Feat : 공통 컴포넌트 - Header 구현 #7

guesung · 2023-08-04T15:49:01Z

💡 왜 PR을 올렸나요?

신규 피처

💁 무엇이 어떻게 바뀌나요?

1. 각 페이지별 Header의 구현하였습니다.

선영님이 만들어놓은 Header를 구성을 바꾸었습니다.
공통 컴포넌트인 Header는 leftNode와 rightNode를 받습니다.
각 페이지, 혹은 각 도메인에서 이 Header를 이용하여 커스텀하여 사용할 수 있습니다.

2. 폴더 구조를 수정하였습니다.

저희 서비스의 메인 페이지인 포즈픽, 포즈톡, 포즈피드는 같은 Header를 사용합니다.
그래서 Next.js 13에 추가된 route-groups을 이용하여 (Main)과 (Sub)를 묶었습니다.
폴더 구성은 다음과 같습니다.
(Main)하위에 있는 포즈픽, 톡, 피드는 같은 Header를 사용하기에 (Main)/components에 공통 Header를 만들었습니다.
(Sub)하위에 있는 페이지는 Header가 조금씩 다릅니다. 이에 따라, 각 도메인에서 Header를 만들었습니다.

3. 각 컴포넌트 및 타입을 구현하였습니다.

Spacing 컴포넌트 : 여백이 필요할 때 사용합니다.

사용법

<Spacing size={10} direction="horizental" />  // 수평 여백 10rem

StrictPropsWithChildren : children의 타입을 강제함으로써 엄격하게 타입 체크를 하도록 하였습니다.

사용법

import { StrictPropsWithChildren } from '@/types';
export default function SubLayout({ children }: StrictPropsWithChildren) {
  return (
// ..
  );
}

📆 작업 예정인 것이 있나요 ?

포즈픽 페이지 구현

💬 리뷰어분들께

폴더 구조를 고민하다가 Route Group을 이용하여 짜보았습니다.

혹시 더 좋은 방법이 있으시면 언제든지 말씀해주세요 ! 환영입니다 :)

seondal · 2023-08-04T17:14:29Z

src/app/(Main)/components/MainHeader.tsx

+    <div>
+      <Header
+        leftNode={<h4>PosePicker</h4>}
+        rightNode={<Image src="/icons/menu.svg" width={24} height={24} alt="24" />}


혹시 아이콘 에셋 경로 상수로 관리하실 의향이 있으시다면....!
#8 참고해 주세욥..!

객체로 관리하니 확실히 깔끔하고, 유지보수 측면에서 좋을 거 같네요.

선영님 PR 머지 후에 반영할게요 !

seondal · 2023-08-04T17:16:03Z

src/app/(Main)/components/Tab.tsx

      {tabData.map((item) => (
        <div key={item.path}>
          {item.path === path ? (
            <>
              <div className="py-12">
                <h5 className="text-brand">{item.title}</h5>
              </div>
-              <div className="border-b-main-violet relative top-0.5 border-b-2" />
+              <div className="relative top-0.5 border-b-2 border-b-main-violet" />


엇 제 vsc에서는 tailwind 속성들을 자동으로 정렬해주는데 규성님과 순서가 다른 것 같아요..! 세팅 차이인지 확인해봐야할 것 같습니담

seondal · 2023-08-04T17:17:06Z

src/app/(Main)/components/Tab.tsx

@@ -13,15 +13,15 @@ export default function Tab() {
  const path = usePathname();

  return (
-    <nav className="flex items-center gap-16">
+    <nav className="fixed inset-x-0 top-64 mx-auto flex h-48 items-center gap-16 border-b-2 border-b-divider px-20">


inset-x-0 ...! 배워갑니다 //

seondal · 2023-08-04T17:18:04Z

src/app/(Main)/feed/page.tsx

폴더구조 변경 좋은 것 같습니다! 안그래도 페이지 종류들을 구분하고싶지만 도메인에 포함될까봐 못하고있었는데 이런 좋은 방식이 있었네요!

seondal · 2023-08-04T17:18:56Z

src/app/(Main)/layout.tsx

+export default function MainLayout({ children }: StrictPropsWithChildren) {
+  return (
+    <>
+      <Spacing size={140} />


만들어주신 spacing은 어느경우에 사용되는걸까요?! 피그마에서 못찾겠어서 여쭤봅니다..!

여백을 추가하고 싶을 때 선언적으로 줄 수 있는 컴포넌트입니다.

물론 각 컴포넌트마다 className="mt-5"로 여백을 추가할 수 있지만, Spacing컴포넌트로 관리하면 '무엇'을 할 지만 보여준다는 점에서 더 선언적이고, 유지보수 측면에서 좋다고 판단하여 추가하였습니다.

좋은 아이디어 같아요 fixed 된 컴포넌트 때문에 계속 padding 값 신경쓰는게 낭비라고 생각했는데 깔끔한 방법이 있었네요 ㅎㅎ

seondal · 2023-08-04T17:19:06Z

src/app/(Main)/pick/page.tsx

@@ -1,3 +1,3 @@
 export default function Pick() {
-  return <>포즈픽</>;
+  return <>포즈픽s</>;


seondal · 2023-08-04T17:20:36Z

src/app/(Sub)/layout.tsx

+export default function SubLayout({ children }: StrictPropsWithChildren) {
+  return (
+    <div>
+      <Spacing size={100} />


상위 div에 padding을 적용하는 것과의 차이는 어떤게 있을지 궁금합니다아

위에 작성한 커멘트 참고해주세용

seondal · 2023-08-04T17:22:41Z

src/components/header/Header.tsx

+  leftNode?: React.ReactNode;
+  rightNode?: React.ReactNode;
+  className?: string;
+  props?: PropsWithChildren<HTMLAttributes<HTMLHeadElement>>;


엇 인터페이스에 따로 지정하지 않아도 일반 props들은 받아올 수 있는걸로 아는데 아닌걸까요 ?!

seondal · 2023-08-04T17:23:20Z

src/types/index.ts

아직 개발진행중인건지, 완성이라면 어떤 용도인지 궁금합니다아

완성입니다.

PR 본문 내용 확인해주세용

임의로 만드신거라고 생각했는데 검색해보니 많이 사용되는 타입이였네요!
덕분에 알아가네요 감사합니다

공식 팀에서 children 과 관련된 타입을 만든 이유

seondal · 2023-08-04T17:24:25Z

폴더구조 변경이 #8 머지할때 충돌날 것 같네욤..! 본 PR 머지하고 리졸브하겠습니다!

guesung added 11 commits August 4, 2023 21:20

refactor : (Main) 폴더로 이동

637d73c

refactor : layout.tsx에서 px,py 속성 제거

dd295da

refactor : Header.tsx 제구성

7b7753e

design : layout에 padding 부여

db1a910

feat : StrictPropsWithChildren type 구현

3e4e19d

feat : Spacing 컴포넌트 구현

50ed94a

feaet : Main Header import 수정

1774ba2

feat : SubHeader 구현

2fcb054

refactor : 폴더 이동

c932b6a

refactor : 공백 제거

5ab4172

refactor : Header 각 페이지별 생성

6bdfcd1

guesung requested a review from seondal as a code owner August 4, 2023 15:49

seondal approved these changes Aug 4, 2023

View reviewed changes

seondal added the 💄 Style 화면 그리기, 스타일링 label Aug 4, 2023

seondal added this to the DND Final Project ⛳️ milestone Aug 4, 2023

guesung merged commit de0ddfd into develop Aug 5, 2023

guesung deleted the OZ-35-F-header branch August 5, 2023 01:56

guesung self-assigned this Aug 12, 2023

guesung added the ✨ Feat 새로운 기능 개발 label Aug 25, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat : 공통 컴포넌트 - Header 구현 #7

Feat : 공통 컴포넌트 - Header 구현 #7

guesung commented Aug 4, 2023 •

edited

Loading

seondal Aug 4, 2023

guesung Aug 5, 2023

seondal Aug 4, 2023

seondal Aug 4, 2023

seondal Aug 4, 2023

seondal Aug 4, 2023

guesung Aug 5, 2023

seondal Aug 5, 2023

seondal Aug 4, 2023

seondal Aug 4, 2023

guesung Aug 5, 2023

seondal Aug 4, 2023

seondal Aug 4, 2023

guesung Aug 5, 2023 •

edited

Loading

seondal Aug 5, 2023

seondal commented Aug 4, 2023

Feat : 공통 컴포넌트 - Header 구현 #7

Feat : 공통 컴포넌트 - Header 구현 #7

Conversation

guesung commented Aug 4, 2023 • edited Loading

💡 왜 PR을 올렸나요?

💁 무엇이 어떻게 바뀌나요?

1. 각 페이지별 Header의 구현하였습니다.

2. 폴더 구조를 수정하였습니다.

3. 각 컴포넌트 및 타입을 구현하였습니다.

📆 작업 예정인 것이 있나요 ?

💬 리뷰어분들께

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

guesung Aug 5, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seondal commented Aug 4, 2023

guesung commented Aug 4, 2023 •

edited

Loading

guesung Aug 5, 2023 •

edited

Loading