✨ Header

[young-52]

📝 작업 내용

• 화면 상단 헤더를 디자인하였습니다.
• 헤더를 디자인하면서 RootLayout을 리팩토링하였습니다. 공통적인 화면 배경색, 크기 등은 레이아웃으로 넘기고, 각 라우트에서는 화면 내의 요소 배치만 관리하도록 했습니다.
• 리팩토링 과정에서 로그인/회원가입 화면의 디자인이 일부 조정되었습니다.

(원래는 프로필 사진 구현까지 하려고 했으나… 사진을 JSON으로 상하차하는 방식은 의논해봐야 할 것 같아서 우선 유보해 둡니다.)

📸 스크린샷

🚀 리뷰 요구사항

• 아직 커스텀 훅의 사용법이 익지 않아서… 적절하게 useAuth를 활용하고 있는지 모르겠습니다.
• RootLayout.tsx 코드의 리팩토링을 진행하면서 로그인/회원가입 화면의 디자인도 일부 건드리게 되었는데요, 혹시 디자인이 의도하신 바에서 달라졌다면 반드시 수정 요청 부탁드립니다!

[jun-0411]

너무 늦게 확인해서 죄송합니다 ㅠㅠ

1. useAuth 함수

아직 커스텀 훅의 사용법이 익지 않아서… 적절하게 useAuth를 활용하고 있는지 모르겠습니다.

아직 이미지 처리 방식은 확정이 아니지만, 로그인한 유저 정보를 user 이름으로 저장해 두었어요!

// 1. user 객체를 추가로 가져옵니다.
const { user, isLoggedIn, handleLogout } = useAuth();

// ... (중략)

{/* avatar UI */}
{user?.photo ? (
  <img src={user.photo} />
) : (
  <span> {user?.name}님</span>
)}

이런 식으로 만들 수 있을 것 같아요.

2. 로그인/회원가입 디자인 변경

RootLayout.tsx 코드의 리팩토링을 진행하면서 로그인/회원가입 화면의 디자인도 일부 건드리게 되었는데요, 혹시 디자인이 의도하신 바에서 달라졌다면 반드시 수정 요청 부탁드립니다!

디자인은 임시로 만든거라 변경하셔도 괜찮습니다 ㅎㅎ
디자이너분 오시면 다시 css 작업하는게 어떨까요?

기타 의견

type 선언 방식

특별한 이유를 가지고 type과 interface를 구분하고 있지는 않아요. 저도 하나로 통일하는게 좋을 것 같다고 생각합니다!

type으로 선언하면 유니온 타입이나 튜플 같은 기능을 사용할 수 있다고 합니다.
(e.g. type Status = "success" | "error" | "loading"; // 유니온 타입)

interface는 같은 이름으로 여러 번 선언하면 타입스크립트가 자동적으로 하나로 합쳐주는 기능이 있어 외부 라이브러리 사용에 편리하다고 합니. 성능도 조금 더 좋다고는 하네요?

찾아보니까 관습적으로 interface를 사용하고, "객체는 interface로, 그 외의 조합 타입은 type으로 정의" 이런식으로 사용하는 방법도 있다고 합니다. 편하신 쪽으로 통일만 하면 될 것 같아요!