feature: 메인 페이지 퍼블리싱

[asdf99245]

👀 What is this PR?

메인 페이지 뷰 작업을 했슴다. 👍

📝 Changes

• Avatar 모양 쓰는데 나중에라도 꽤 있을거같아서 컴포넌트로 뻈어
• Drawer도 일단 컴포넌트로 분리
• 일단 api 붙이기전까지는 애매한게 많아서 empty view 같은건 데이터 붙일 때 작업할듯! -> 프로필 edit modal도 이때 처리할듯?
• edit, noedit 뷰 차이도 나중에 로그인 붙이면? 해야할거같음
• tw migration에 맞추어서 같이 처리해줬음 :)
• logo 밑에 Grafi 텍스트 타이포그래피에 따로 정의 안돼있길래 text-logo1 classname 추가했음!

📌 Related issue(s)

• close feature: 메인 페이지 퍼블리싱 #10

📷 Attachment(optional)

[github-actions]

Thanks for the contribution!
I have applied any labels matching special text in your title and description.

Please review the labels and make any necessary changes.

[bsy1141]

아직 메인 페이지 실행 & 확인을 못해가지구 고것만 확인해보고 리뷰 이어서 할게!

[bsy1141]

옹 요정도도 훅으로 빼는구나..?? drawer가 여러군데 쓰이면 이렇게 해도될 거 같은데 아니라면 이렇게까지 할 필요는 없을듯!

아니면 아예 공용으로 사용할 수 있도록 빼는 건 어때? ex. useToggle

import { useState, useCallback } from 'react';

function useToggle(initStatus = false) {
    const [value, setValue] = useState(initStatus);
    const toggle = useCallback(() => setValue((prevValue) => !prevValue), []);

    return [value, toggle, setValue];
}

export default useToggle;

// 사용단 : 
// const [isOpen, toggle] = useToggle(false);
// const openDrawer = () => toggle(true)
// const closeDrawer = () => toggle(false)

[asdf99245]

오 너무 좋은데? 완전 DDb 👍

[bsy1141]

여기서는 상수 1개밖에 없어서 뺄 필요가 없긴 하지만 우리 상수 관리는 어떻게 할까?
Drawer.contstants.js 요런식으로 빼는것도 괜찮을듯?
유틸은 Drawer.utils.js 요런식으로 이름 맞춰서 빼는 것도 좋을 거 같아엽

[asdf99245]

아하 맞네맞네 component.constants.js, **.utls.js 그 방식으로 하고 여러군데서 쓰이는거면 utils 폴더에 파일 만들어서 써도 좋을듯!
저렇게 한개만 있는건 안뺄게!

[bsy1141]

요기는 나중에 내 PR 합쳐지고 나서 그때 너가 만들어준 ImageFrame 사용하면 좋을듯??

[asdf99245]

맞어 아무래도 merge되면 ImageFrame 쓸려고 했음 :)

[bsy1141]

내 PR 합치면서 충돌난거 수정해뒀고 동작 잘되는거 확인 완! 합치면 될듯해요 :)