feat: 공통 컴포넌트 Chips, Tab, Badge, Filters, Tag 추가 #25

yunchaeney · 2024-09-06T06:18:03Z

✏️ 작업 내용

공통 컴포넌트 총 10개 파일 추가하였으며, 내역은 아래와 같습니다.

Badge
Tag
Tab
- Tab
- TopTab
Filter
- FilterList
- FilterSort
Chip
- Chip
- InfoChip
- StateChip
- TimeChip
tailwind config 에 fontSize 추가

📷 스크린샷

(동영상) 기본 Chip, Filter 컴포넌트의 경우 모바일 뷰포트일 때 사이즈 변경이 있습니다

(동영상) Tab 컴포넌트의 경우 state 변경에 따른 애니메이션이 있습니다 (아래 사용법 참고)

tailwind.config.ts

추가! TopTab

✍️ 사용법

<Badge>1</Badge> 

<Tag>오늘 21시 마감</Tag>                          //default size : large
<Tag size='small'>오늘 21시 마감</Tag>

<Tab type='workation'            // or 'dalaemfit'
  isActive={firstActive}
  onClick={() => setFirstActive((prev) => !prev)}
 />

<Chip state='default'>전체</Chip>
<Chip state='active'>전체</Chip>

<TimeChip state='default'>13:00</TimeChip>
<TimeChip state='active'>13:00</TimeChip>
<TimeChip state='disabled'>13:00</TimeChip>

<StateChip state='scheduled' />
<StateChip state='done' />
<StateChip state='confirmed' />
<StateChip state='pending' />

<InfoChip type='date'>1월 7일</InfoChip>
<InfoChip type='time'>13:00</InfoChip>

<FilterList state='default'>전체</FilterList>
<FilterList state='active'>전체</FilterList>

<FilterSort state='default'>마감임박</FilterSort>
<FilterSort state='active'>마감임박</FilterSort>

<TopTab isActive={true}>모임 찾기</TopTab>
<TopTab>
  찜한 모임
  <Badge>10</Badge>
</TopTab>

<div className='text-12'> 12px </div>
<div className='text-16'> 16px </div>

🎸 기타

ic_check 컴포넌트의 경우, 피그마 상 2가지 color state 를 가지고 있지만
사용처가 Card 컴포넌트에만, 오렌지컬러만 "개설확정" 이라는 라벨과 사용되고 있었습니다.
이에 너무 마이크로하게 컴포넌트를 분리하는 것 같아 추가하지 않았습니다.
의견 주시면 감사하겠습니다!
Filter 컴포넌트가 하나의 컴포넌트로 되어 있었으나, dropdown 형태와 sort 형태가 뷰포트 사이즈에 따른 스타일 변화가 커서 List, Sort 두 개의 컴포넌트로 분리하였습니다.
~~Top Tab 컴포넌트 빼먹었습니다... 얼른 작업하고 수정하겠습니다.~~ 추가 완료.

close #17

BeMatthewsong

PR 마스터 좋습니다 LGTM 👍

BeMatthewsong · 2024-09-06T08:13:57Z

src/app/components/Badge/Badge.tsx

+    <>
+      <div className='rounded-full bg-var-gray-900 px-8 text-12 font-semibold text-white'>
+        {children}
+      </div>
+    </>


P4) 빈 프래그먼트 안 감싸도 충분할 것 같은데 빼시는 건 어떠신가요?

수정하겠습니다!

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

src/app/components/Chip/StateChip.tsx

+const stateClasses = {
+  scheduled: 'bg-var-orange-100 text-var-orange-600',
+  done: 'bg-var-gray-200 text-var-gray-500',
+  confirmed: 'bg-white text-var-orange-500 border border-var-orange-100',
+  pending: 'bg-white text-var-gray-500 border border-var-gray-200',
+};


이거 볼 때마다 아이디어 좋네요 👏

BeMatthewsong · 2024-09-06T08:17:42Z

src/app/components/Tab/Tab.tsx

+const Tab = ({ type, isActive, onClick }: TabProps) => {
+  const styles = isActive
+    ? 'text-var-gray-900 first-of-type:before:right-0 last-of-type:before:left-0'
+    : 'text-var-gray-400 first-of-type:before:-right-full last-of-type:before:-left-full';


P3) 진짜궁금
first-of-type:before:right-0 last-of-type:before:left-0 이거 설명 좀 해주세요

Tab에서 클릭 시 active 상태가 바뀜에 따라 밑줄의 움직임 애니메이션을 하기 위함입니다!
before 상태로 border-bottom을 추가해 놓고,
isActive = false 시 첫번째 아이템은 -right-full -left-full 로, 마지막 아이템은 -left-full 로 밑줄이 안 보이게 되어 있습니다.
isActive가 true로 바뀌면 각각 왼쪽/오른쪽에서부터 0으로 밑줄이 이동합니다.

이에 애니메이션 상에서는 두개 tab을 번갈아 클릭 시 밑줄이 두 아이템 사이를 오가는 것처럼 보입니다.

설명을 잘 못하겠어요 😥

어렵긴 하네요 제가 좀 더 뜯어보면서 이해해볼게요 !

BeMatthewsong · 2024-09-06T08:18:11Z

src/app/components/Tab/Tab.tsx

여기 쉽지 않네요

BeMatthewsong · 2024-09-06T08:18:37Z

src/app/components/Tab/TopTab.tsx

@@ -0,0 +1,16 @@
+interface TopTabProps {
+  isActive?: boolean;
+  children: React.ReactNode;


P2) ReactNode 만 따로 임포트해서 쓰시는 거 어떠신가요?!

수정하겠습니다!

HMRyu

전반적으로 코드가 깔끔한 것 같습니다!

작업량이 많으셨을 텐데 고생 많으셨습니다...!

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

src/app/components/Badge/Badge.tsx

+    <>
+      <div className='rounded-full bg-var-gray-900 px-8 text-12 font-semibold text-white'>
+        {children}
+      </div>
+    </>


P4) fragment 가 불필요하다면 삭제해도 될 것 같습니다!

수정하겠습니다!

HMRyu · 2024-09-06T08:20:08Z

src/app/components/Chip/StateChip.tsx

+interface StateChipProps {
+  state: 'scheduled' | 'done' | 'confirmed' | 'pending'; // 이용 예정 | 이용 완료 | 개설 확정 | 개설 대기
+}
+
+const stateClasses = {
+  scheduled: 'bg-var-orange-100 text-var-orange-600',
+  done: 'bg-var-gray-200 text-var-gray-500',
+  confirmed: 'bg-white text-var-orange-500 border border-var-orange-100',
+  pending: 'bg-white text-var-gray-500 border border-var-gray-200',
+};
+
+const stateContents = {
+  scheduled: '이용 예정',
+  done: '이용 완료',
+  confirmed: '개설 확정',
+  pending: '개설 대기',
+};


HMRyu · 2024-09-06T08:21:16Z

src/app/components/Tab/Tab.tsx

+  const styles = isActive
+    ? 'text-var-gray-900 first-of-type:before:right-0 last-of-type:before:left-0'
+    : 'text-var-gray-400 first-of-type:before:-right-full last-of-type:before:-left-full';


HMRyu · 2024-09-06T08:22:02Z

src/app/components/Tag/Tag.tsx

+    <>
+      <div
+        className={`absolute right-0 top-0 flex items-center gap-4 rounded-bl-[12px] bg-orange-600 py-4 pl-8 text-12 font-medium text-white ${sizeClasses[size]}`}
+      >
+        <IconAlarm width='24' height='24' />
+        <span className='shrink-0'>{children}</span>
+      </div>
+    </>


P4) 여기도 fragment 가 불필요하다면 삭제해도 될 것 같습니다!

수정하겠습니다!

yunchaeney · 2024-09-06T08:36:24Z

리뷰 주신 부분 반영하였습니다.

TopTab 컴포넌트의 ReactNode import 하여 사용
Badge, Tag 컴포넌트의 불필요한 fragment 삭제

fragment 의 경우 습관이었어서, 지적 감사합니다. 고쳐보겠습니다. 😊

hakyoung12 · 2024-09-06T08:35:35Z

src/app/components/Chip/StateChip.tsx

+  done: '이용 완료',
+  confirmed: '개설 확정',
+  pending: '개설 대기',
+};


상태를 명확하게 나눠주셔서 사용할 때 편리할 것 같습니다👍👍

hakyoung12 · 2024-09-06T08:39:03Z

src/app/components/Tab/TopTab.tsx

이게 원래 사용할 top tap이었군요..! 제가 isActive만 props로 내려주도록 수정하면 사용할 수 있을 것 같습니다!

hakyoung12 · 2024-09-06T08:39:30Z

tailwind.config.ts

+        20: ['2.0rem', '2.8rem'],
+        24: ['2.4rem', '3.2rem'],
+        30: ['3rem', '3.6rem'],
+      },


yunsung-hodoopapa · 2024-09-14T02:29:57Z

src/app/components/Badge/Badge.tsx

+  children: string;
+}
+
+const Badge = ({ children }: BadgeProps) => {


PropWithChilren type을 사용해볼까요?

yunchaeney added 5 commits September 6, 2024 09:37

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

baf12e9

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

a2ad7ec

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

572a21f

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

ea78df7

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

6496b0f

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

yunchaeney added ✨ Feat 기능 추가 and removed ✨ Feat 기능 추가 labels Sep 6, 2024

yunchaeney self-assigned this Sep 6, 2024

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

017aad6

BeMatthewsong approved these changes Sep 6, 2024

View reviewed changes

HMRyu approved these changes Sep 6, 2024

View reviewed changes

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

43e0cfc

hakyoung12 reviewed Sep 6, 2024

View reviewed changes

yunchaeney merged commit bf66cbb into develop Sep 6, 2024
4 checks passed

yunchaeney deleted the feat/chaeney/KAN-3-chip-tab branch September 8, 2024 06:32

yunsung-hodoopapa reviewed Sep 14, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 공통 컴포넌트 Chips, Tab, Badge, Filters, Tag 추가 #25

feat: 공통 컴포넌트 Chips, Tab, Badge, Filters, Tag 추가 #25

yunchaeney commented Sep 6, 2024 •

edited

Loading

BeMatthewsong left a comment

BeMatthewsong Sep 6, 2024

yunchaeney Sep 6, 2024

BeMatthewsong Sep 6, 2024

BeMatthewsong Sep 6, 2024

yunchaeney Sep 6, 2024

BeMatthewsong Sep 6, 2024

BeMatthewsong Sep 6, 2024

BeMatthewsong Sep 6, 2024

yunchaeney Sep 6, 2024

HMRyu left a comment

HMRyu Sep 6, 2024

yunchaeney Sep 6, 2024

HMRyu Sep 6, 2024

HMRyu Sep 6, 2024

HMRyu Sep 6, 2024

yunchaeney Sep 6, 2024

yunchaeney commented Sep 6, 2024

hakyoung12 Sep 6, 2024

hakyoung12 Sep 6, 2024

hakyoung12 Sep 6, 2024

yunsung-hodoopapa Sep 14, 2024

feat: 공통 컴포넌트 Chips, Tab, Badge, Filters, Tag 추가 #25

feat: 공통 컴포넌트 Chips, Tab, Badge, Filters, Tag 추가 #25

Conversation

yunchaeney commented Sep 6, 2024 • edited Loading

✏️ 작업 내용

📷 스크린샷

✍️ 사용법

🎸 기타

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

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

yunchaeney commented Sep 6, 2024

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 commented Sep 6, 2024 •

edited

Loading