[괴발개발] 덕지덕지 - 기본 페이지 및 엔티티 설계

일상글에서 언급했다시피 프로젝트명을 Remote Note에서 덕지덕지로 바꾸었습니다.

포스트잇 혹은 메모지를 벽에 덕지덕지 붙인다는 말이 떠올랐고, 어감이 나름 괜찮아서

무엇보다도 Remote Note 보다는 괜찮아서 이름을 바꾸었습니다.

 

현재 아주 단순한 것부터 개발을 하였습니다.

먼저 엔티티부터 설계를 하였습니다.

OAUTH 2.0으로만 로그인하도록 기획하였기에 이에 맞게 엔티티를 설계하였습니다.

@Getter
@AllArgsConstructor @NoArgsConstructor
@Builder
@Embeddable
public class OAuth implements Serializable {

    @NotNull
    @Column(unique = true)
    private String email;

    @NotNull
    private String token;

    @NotNull
    private String provider;

}

@Getter
@AllArgsConstructor @NoArgsConstructor
@Builder
@Entity
public class Member {

    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Embedded
    private OAuth oAuth;

}

그리고 메모지 엔티티는 식별관계가 아닌 회원키(FK), 그리고 폰트를 저장하도록 설계하였습니다.

@Getter
@AllArgsConstructor @NoArgsConstructor
@Builder
@Entity
public class Post {

    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Embedded
    private Author author;

    @NotNull
    private String content;

    @Column(columnDefinition = "varchar(128) default 'FFB400'") // 기본값: 노랑색
    private String color; // 16 진수로 나타낼 수 있음

    @Enumerated(EnumType.STRING)
    private Font font;

    @Column(columnDefinition = "boolean default false")
    private boolean shared;

}

@Getter
@Embeddable
public class Author implements Serializable {

    @OneToOne
    @JoinColumn(name = "author_id")
    private Member member;

}

그리고 React로 메인폼을 구성하였습니다.

import React, {Component} from "react";
import {GoogleLogin} from 'react-google-login';
import styled from 'styled-components';

const clientId = "";

class GoggleButton extends Component {

    constructor(props) {
        super(props);

        this.state = {
            id: '',
            name: '',
            provider: '',
        }
    }

    // Google Login
    responseGoogle = (res) => {
        console.log(res);
    }

    // Login Fail
    responseFail = (err) => {
        console.error(err);
    }

    render() {
        return (
            <Container>
                <GoogleLogin
                    clientId={clientId}
                    buttonText="Sign in with Google"
                    onSuccess={this.responseGoogle}
                    onFailure={this.responseFail}
                    />
            </Container>
        );
    }
}

const Container = styled.div`
    width: 200px;
    height: 20px;
    flex-flow: column wrap;
    position: absolute;
    margin: 0 auto;
    bottom: 120px;
    left: calc(50% - 100px);
`

export default GoggleButton;

 

import './App.css';
import Template from "./component/Template";
import Logo from "./component/Logo";
import GoggleButton from "./component/GoggleButton";

function App() {
  return (
    <div className="App">
      <Template children={
          <div>
              <div>
                  <Logo/>
              </div>
              <div>
                    <GoggleButton/>
              </div>
          </div>
      }/>
    </div>
  );
}

export default App;

결과는 다음과 같습니다.

놀랍게도 모바일 버전이 아닌 웹 FE입니다.

카카오 로그인까지 추가할 예정입니다.

그 후, DB에 저장할 예정입니다.

 

 

이상입니다.