feat: 공통 컴포넌트 gnb 컴포넌트 UI 작성 #26

hakyoung12 · 2024-09-06T07:31:44Z

✏️ 작업 내용

gnb 컴포넌트 UI 작성

📷 스크린샷

PC사이즈

태블릿사이즈

모바일사이즈

로그아웃상태 레이아웃

모임찾기 활성화시(예시)

프로필 드롭다운

✍️ 사용법

//UserStatus.tsx
const user = {
  name: 'test name',
}; // 이부분을 null로 바꿔 로그아웃시 레이아웃을 볼 수 있습니다.

layout.tsx에서 사용될 UI입니다.

🎸 기타

현재 pathname이 지정되지 않아 네비게이션바의 링크는 '#'로 되어있습니다. 정해지면 수정 예정입니다.

hakyoung12 · 2024-09-06T07:35:00Z

src/app/components/Gnb/Gnb.tsx

+];
+
+const Gnb = () => {
+  const pathname = usePathname();


현재 URL 경로를 가져오는 코드입니다.

hakyoung12 · 2024-09-06T07:35:44Z

src/app/components/Gnb/Gnb.tsx

+            {navList.map((nav, index) => (
+              <li key={index}>
+                <Link
+                  className={`text-[16px] font-semibold ${pathname.includes(nav.link) ? 'text-black' : 'text-white'}`}


현재 URL경로를 받아와서 link가 포함되어있다면 글자색상이 검정색으로 출력됩니다.

BeMatthewsong

학영님 코드 잘 짜시네요! LGTM👍

BeMatthewsong · 2024-09-06T08:20:27Z

src/app/components/Gnb/Gnb.tsx

+import { usePathname } from 'next/navigation';
+import UserStatus from './UserStatus';
+
+//@todo pathname 정해질 시 추가 예정


👍

P4) 정말 사소한 건데 'use client' 쓰고 한 줄 띄워주셔도 좋을 것 같습니다!

BeMatthewsong · 2024-09-06T08:22:36Z

src/app/components/Gnb/UserStatus.tsx

+      if (
+        dropDownRef.current &&
+        !dropDownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }


P3) !dropDownRef.current.contains(event.target as Node) 에 대해 설명 부탁드려도 되나요?

event.target, 즉 현재 클릭이벤트가 일어난 곳이 dropDownRef.current가 참조하는 DOM 요소의 내부에 있는지 아닌지 판단하고 만약 false가 나올 시에 setIsOpen(false);를 실행하여 드롭다운을 닫습니다.

BeMatthewsong · 2024-09-06T08:23:06Z

src/app/components/Gnb/UserStatus.tsx

객체 야무지게 잘 쓰셨네요 👍

yunchaeney

👍👍👍

yunchaeney · 2024-09-06T07:47:13Z

src/app/components/Gnb/Gnb.tsx

+                <Link
+                  className={`text-[16px] font-semibold ${pathname.includes(nav.link) ? 'text-black' : 'text-white'}`}
+                  href={nav.link}
+                >
+                  {nav.name}
+                </Link>


componenets/Tab/TopTab.tsx 파일에 해당 부분이 컴포넌트로 작성되어 있습니다만, 굳이 컴포넌트로 갈아끼울 필요가 있을까? 싶습니다.
현재 방식도 복잡해 보이진 않아서 유지하고, 위 언급한 컴포넌트는 아예 삭제해도 될 것 같아요.

p1) 모바일 사이즈에서 font 크기 조정이 필요합니다.
p2) text-[16px] 은 text-16 으로 수정해 주시면, 제 PR 머지 시 반영됩니다.
--> 괜찮으시면 위 언급한 컴포넌트에서 class name 만 참고해 주세요!

text 사이즈는 수정완료했습니다!
제가 봤을 때에는 네이게이션바를 다른 컴포넌트로 분리하고 채현님께서 만든 컴포넌트를 사용하는 방식도 좋아보입니다!
사실 제 방식은 찜한 모임 뱃지 넣기 애매할거같더라구요...

yunchaeney · 2024-09-06T07:47:55Z

src/app/components/Gnb/Gnb.tsx

+    name: '찜한 모임',
+    link: '#',


찜한 모임 옆에 갯수 Badge 달리는 경우는 어떻게 되나요 ?_?

그부분은 제가 깜빡했습니다ㅠ 추가하겠습니다!

HMRyu

깔끔하게 잘 작성해 주신 것 같습니다!

작업 속도가 엄청 빠르신 것 같아요... 🤣

고생 많으셨습니다..!

HMRyu · 2024-09-06T08:25:53Z

src/app/components/Gnb/Gnb.tsx

+    <header className='gap-0 bg-var-orange-600 py-16'>
+      <div className='mx-16 flex max-w-[1200px] items-center justify-between md:mx-24 lg:mx-auto'>
+        <nav className='flex items-center'>


시멘틱 태그 👍

P4) 혹시 gap-0 은 사용되고 있는 스타일일까요?

잘못 들어간 스타일인데 현재는 수정했습니다!

HMRyu · 2024-09-06T08:28:48Z

src/app/components/Gnb/Gnb.tsx

+import { usePathname } from 'next/navigation';
+import UserStatus from './UserStatus';
+
+//@todo pathname 정해질 시 추가 예정


👍

P4) 정말 사소한 건데 'use client' 쓰고 한 줄 띄워주셔도 좋을 것 같습니다!

HMRyu · 2024-09-06T08:29:09Z

src/app/components/Gnb/Gnb.tsx

+];
+
+const Gnb = () => {
+  const pathname = usePathname();


hakyoung12 · 2024-09-09T01:34:34Z

src/app/components/Gnb/Gnb.tsx

+          <ul className='flex gap-24'>
+            {navList.map((nav, index) => (
+              <li key={index} className='flex items-center gap-[5px]'>
+                <Link href={nav.link}>
+                  <TopTab isActive={pathname.includes(nav.link)}>
+                    {nav.name}
+                  </TopTab>
+                </Link>
+                {renderBadge(nav.name)}
+              </li>
+            ))}
+          </ul>


9/9 변경사항입니다!

TopTab 컴포넌트 적용

찜한 모임 뱃지 추가

👍👍👍 반영 감사합니다!

yunsung-hodoopapa · 2024-09-14T02:41:28Z

src/app/components/Chip/Chip.tsx

@@ -0,0 +1,21 @@
+interface ChipProps {


칩스 컴포넌트를 하나로 선언해두고 variant 프롭스로 InfoChip, StateChip, TimeChip 등 다양한 칩을 리터하도록 내부에서 조정해보도록 리팩토링해보시면 좋을 것 같습니다.

공통 컴포넌트 혹은 디자인 시스템을 사용할대, 아톤 컴포넌트 하나를 만들고 그 내부에서 variant props를 두고 사용목적에 맞게 리턴하도록 사용하는 패턴이 많이 응용되거든요

yunsung-hodoopapa · 2024-09-14T02:41:48Z

src/app/components/Chip/StateChip.tsx

+  pending: 'bg-white text-var-gray-500 border border-var-gray-200',
+};
+
+const stateContents = {


상수로 분리해두는게 더 좋을 것 같네요

yunsung-hodoopapa · 2024-09-14T02:42:52Z

src/app/components/Gnb/Gnb.tsx

+
+  /* 찜한 모임 배지 렌더링 함수
+  nav.name이 '찜한 모임'이고 웹스토리지에 저장된 '찜한 모임'의 개수가 1개 이상일 시 Badge 렌더링 */
+  const renderBadge = (name: string) => {


목요일날 배운 뷰 컴포넌트에서 상태 로직 분리하기를 떠올려보시고,
커스텀 훅을 작성해보는게 어떨까요?

yunsung-hodoopapa · 2024-09-14T02:43:46Z

src/app/components/Gnb/UserStatus.tsx

+
+const UserStatus = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const dropDownRef = useRef<HTMLDivElement>(null);


이러한 로직들도 하나의 공통 훅으로 마련해서 처리를 해보면 좋을 것 같네요

cont { ref, clickOutSide } = useClickoutSide();

hakyoung12 added 5 commits September 6, 2024 16:09

[KAN-10] style: gnb UI 추가

3fe1182

[KAN-10] style: 주소에 pathname이 포함되어있다면 해당 메뉴 텍스트 색상이 black으로 변경

16b0c09

[KAN-10] style: 프로필 UI 추가

f5f306c

[KAN-10] style: gnb 반응형 디자인 설정

8dc165c

[KAN-10] style: 반응형 사이즈 수정

c1edb78

hakyoung12 added the ✨ Feat 기능 추가 label Sep 6, 2024

hakyoung12 self-assigned this Sep 6, 2024

hakyoung12 requested review from BeMatthewsong, HMRyu and yunchaeney as code owners September 6, 2024 07:31

hakyoung12 commented Sep 6, 2024

View reviewed changes

[KAN-10] style: profile 커서포인터 추가

5147919

BeMatthewsong approved these changes Sep 6, 2024

View reviewed changes

yunchaeney approved these changes Sep 6, 2024

View reviewed changes

HMRyu approved these changes Sep 6, 2024

View reviewed changes

hakyoung12 and others added 15 commits September 6, 2024 17:54

[KAN-10] style: gnb style 수정

4342508

[KAN-10] style: gnb 반응형 폰트 사이즈 추가

f613ce1

[KAN-11] feat: BoxSelect 컴포넌트 (데스크톱 버전) 추가

1f695be

[KAN-11] chore: tailwind 미디어쿼리 설정 추가

4d0a8a5

[KAN-11] style: BoxSelect 컴포넌트 (모바일 버전) 추가 및 trasition 추가

2f8013e

[KAN-11] fix: 상위 태그를 label 태그로 교체

9aecc82

[KAN-11] style: 스크린 사이즈에 따른 전체 높이 조절

336e845

[KAN-11] chore: 불필요한 코드 삭제

798c302

[KAN-11] chore: ChangeEvent Import

b98120c

[KAN-11] chore: 불필요한 코드 삭제

5bcdcf2

[KAN-11] fix: 변수명 변경 및 테일윈드 수정

4be38c8

[KAN-3] chore : tailwind 설정 font-size 추가

e5c1124

[KAN-3] feat: 컴포넌트 Tab 추가 및 svg icon 코드 변경

dea6550

[KAN-3] feat: 컴포넌트 Chips 추가 (chip, info, state, time)

fe7b6b1

[KAN-3] feat: 컴포넌트 Badge, Tag 추가

641109c

yunchaeney and others added 6 commits September 9, 2024 10:15

[KAN-3] feat: 컴포넌트 Filter 추가 (list, sort)

bac2058

[KAN-3] feat: 컴포넌트 Top Tab 추가

6420887

[KAN-3] refactor: PR 리뷰 반영 (fragment 삭제, ReactNode import)

4ca1ebf

[KAN-10] rename: Input 폴더 변경

5afe17a

[KAN-10] feat: TopTab 컴포넌트적용

66a7390

[KAN-10] feat: 찜한 모임 뱃지 추가

e1515f0

hakyoung12 commented Sep 9, 2024

View reviewed changes

hakyoung12 merged commit 804abc1 into develop Sep 9, 2024
4 checks passed

yunsung-hodoopapa reviewed Sep 28, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 공통 컴포넌트 gnb 컴포넌트 UI 작성 #26

feat: 공통 컴포넌트 gnb 컴포넌트 UI 작성 #26

hakyoung12 commented Sep 6, 2024 •

edited

Loading

hakyoung12 Sep 6, 2024

HMRyu Sep 6, 2024

hakyoung12 Sep 6, 2024

BeMatthewsong left a comment

BeMatthewsong Sep 6, 2024

HMRyu Sep 6, 2024

BeMatthewsong Sep 6, 2024

hakyoung12 Sep 6, 2024

BeMatthewsong Sep 6, 2024

yunchaeney left a comment

yunchaeney Sep 6, 2024

hakyoung12 Sep 6, 2024

yunchaeney Sep 6, 2024

hakyoung12 Sep 6, 2024

HMRyu left a comment

HMRyu Sep 6, 2024

hakyoung12 Sep 6, 2024

HMRyu Sep 6, 2024

HMRyu Sep 6, 2024

hakyoung12 Sep 9, 2024

yunchaeney Sep 9, 2024

yunsung-hodoopapa Sep 14, 2024

yunsung-hodoopapa Sep 14, 2024

yunsung-hodoopapa Sep 14, 2024

yunsung-hodoopapa Sep 14, 2024

yunsung-hodoopapa Sep 14, 2024

feat: 공통 컴포넌트 gnb 컴포넌트 UI 작성 #26

feat: 공통 컴포넌트 gnb 컴포넌트 UI 작성 #26

Conversation

hakyoung12 commented Sep 6, 2024 • edited Loading

✏️ 작업 내용

📷 스크린샷

✍️ 사용법

🎸 기타

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BeMatthewsong left a 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

yunchaeney left a 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

HMRyu left a 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

hakyoung12 commented Sep 6, 2024 •

edited

Loading