feat: 공통 컴포넌트 Progress bar #30

BeMatthewsong · 2024-09-09T02:36:12Z

✏️ 작업 내용

Progress Bar 상태는 아래와 같습니다.

개설 전
개설 확정 (5명 ~ 19명)
모집 종료 (20명)
개설 확정 배지 없는 버전
모집 인원 없는 버전

📷 스크린샷

✍️ 사용법

// 개설 전
<ProgressBar
  participantNumber={3}
  hasParticipantNumber={true}
  hasOpeningConfirmed={true}
  capacity={20}
  hasText={true}
/>
// 개설 확정 (5인 이상)
<ProgressBar
  participantNumber={5}
  hasParticipantNumber={true}
  hasOpeningConfirmed={true}
  capacity={20}
  hasText={true}
/>
// 개설 확정 (두 자릿수)
<ProgressBar
  participantNumber={12}
  hasParticipantNumber={true}
  hasOpeningConfirmed={true}
  capacity={20}
  hasText={true}
/>
// 모집 종료
<ProgressBar
  participantNumber={20}
  hasParticipantNumber={true}
  hasOpeningConfirmed={true}
  capacity={20}
  hasText={true}
/>
// 참가인원과 개설 확정 배지 없는 경우
<ProgressBar
  participantNumber={5}
  hasParticipantNumber={false}
  hasOpeningConfirmed={false}
  capacity={20}
  hasText={true}
/>
// 우측 텍스트 없는 버전 (1)
<ProgressBar
  participantNumber={5}
  hasParticipantNumber={true}
  hasOpeningConfirmed={true}
  capacity={20}
  hasText={false}
/>
// 우측 텍스트 없는 버전 (2)
<ProgressBar
  participantNumber={20}
  hasParticipantNumber={true}
  hasOpeningConfirmed={true}
  capacity={20}
  hasText={false}
/>

🎸 기타

애니메이션은 목록 페이지가 아닌 상세 페이지에서만 보여서 선택적으로 보일 필요가 있다고 판단해서 안 넣었습니다.

close #11

BeMatthewsong · 2024-09-09T02:42:51Z

src/app/components/ProgressBar/ProgressBar.tsx

이 컴포넌트에서의 variation은 아래와 같은 조건으로 결정이 됩니다.

isOpeningConfirmed (개설확정)

isClosedGathering (모집 종료)

hasParticipantNumber (인원 수 보일지 말지)

hasOpeningConfirmed (개설확정 배지 보일지 말지)

16가지 버전 만들 수 있어요!

BeMatthewsong · 2024-09-09T04:03:32Z

public/icons/person.svg

+<circle cx="7.99967" cy="5.33317" r="2.66667" fill="currentColor" stroke="currentColor"/>
+<path d="M3.55826 11.5469C3.99899 9.68441 5.84749 8.6665 7.76139 8.6665H8.23796C10.1519 8.6665 12.0004 9.68441 12.4411 11.5469C12.5264 11.9073 12.5941 12.2844 12.6323 12.6676C12.6687 13.034 12.3679 13.3332 11.9997 13.3332H3.99967C3.63148 13.3332 3.33062 13.034 3.36708 12.6676C3.40521 12.2844 3.47299 11.9073 3.55826 11.5469Z" fill="currentColor" stroke="currentColor"/>


컬러 설정 추가했습니다!

yunchaeney

조건이 많아 복잡하셨을 텐데 깔끔하게 잘 정리하신 것 같아요 알아보기 쉬워용 👍

yunchaeney · 2024-09-09T04:06:57Z

src/app/components/ProgressBar/ProgressBar.tsx

+/**
+ * ProgressBar component
+ * @param {number} participantNumber - 참여 인원 수
+ * @param {boolean} hasParticipantNumber - 참여 인원 수 렌더링 여부
+ * @param {boolean} hasOpeningConfirmed - 개설 확정 렌더링 여부
+ */


이런 doc의 경우 vscode extension 사용하시나요? 궁금해용

저는 수제로 만들긴 했습니다 😂

yunchaeney · 2024-09-09T04:10:54Z

src/app/components/ProgressBar/ProgressBar.tsx

+  hasOpeningConfirmed,
+}: ProgressBarProps) => {
+  const isOpeningConfirmed = participantNumber >= 5; // 개설 확정 여부 (boolean)
+  const isClosedGathering = participantNumber === 20; // 참여 인원이 20명인 경우 (boolean)


모임 인원수의 경우 모임 생성 시 직접 입력하는 것으로 보이는데 20으로 지정하기보다 capacity 값도 props로 받는 게 좋지 않을까요? 만약 다른 이유가 있다면 알려주세요!

이 부분은 제가 캐치 못했는데 지적해주셔서 감사합니다 ! 코멘트 반영하도록 하겠습니다 !

hakyoung12

LGTM!
로직이 복잡하던데 고생하셨습니다!

hakyoung12 · 2024-09-09T04:08:11Z

src/app/components/ProgressBar/ProgressBar.tsx

+  hasOpeningConfirmed,
+}: ProgressBarProps) => {
+  const isOpeningConfirmed = participantNumber >= 5; // 개설 확정 여부 (boolean)
+  const isClosedGathering = participantNumber === 20; // 참여 인원이 20명인 경우 (boolean)


P2)모임생성 api를 보시면 수용가능인원을 설정할 수 있습니다.
모임 목록 조회 및 모임 상세 조회에서 받아올 수 있으니 이 부분 추가해주시면 좋을 것 같아요!

추가하도록 하겠습니다!

HMRyu

조건이 까다롭고 어려운 컴포넌트였던 것 같은데 잘 작성해 주셔서 감사합니다!

코멘트 확인 부탁드려요~!

HMRyu · 2024-09-09T04:26:18Z

src/app/components/ProgressBar/ProgressBar.tsx

+  hasOpeningConfirmed,
+}: ProgressBarProps) => {
+  const isOpeningConfirmed = participantNumber >= 5; // 개설 확정 여부 (boolean)
+  const isClosedGathering = participantNumber === 20; // 참여 인원이 20명인 경우 (boolean)


P2) 저도 수용 인원 부분은 props 로 받아서 전달하는 것이 좋을 것 같습니다!

HMRyu · 2024-09-09T04:27:31Z

src/app/components/ProgressBar/ProgressBar.tsx

+        <div className='flex h-4 w-full rounded-md bg-var-orange-100'>
+          <div
+            className={`h-full ${isClosedGathering ? 'bg-var-orange-400' : 'bg-var-orange-600'} transition-all ease-in-out`}
+            style={{ width: `${(participantNumber / 20) * 100}%` }}


P4) 혹시 이 부분은 tailwind styling 말고 style 로 지정하신 이유가 있으실까요?

테일윈드 주의사항 중에 하나가 스타일을 동적으로 제시하지 말아야 합니다.
그래서 원래라면 w-200 이런 식으로 너비로 설정해야 하는데, 저 너비 속성은 동적으로 결정되기 때문에 style 프로퍼티로 따로 지정하였습니다.

BeMatthewsong · 2024-09-09T04:28:45Z

src/app/components/ProgressBar/ProgressBar.tsx

+interface ProgressBarProps {
+  participantNumber: number;
+  capacity: number;
+  hasParticipantNumber: boolean;
+  hasOpeningConfirmed: boolean;
+}
+
+const ProgressBar = ({
+  participantNumber,
+  capacity,
+  hasParticipantNumber,
+  hasOpeningConfirmed,
+}: ProgressBarProps) => {
+  const isOpeningConfirmed = participantNumber >= 5; // 개설 확정 여부 (boolean)
+  const isClosedGathering = participantNumber === capacity; // 참여 인원이 다 찬 경우 (boolean)


수용인원 관련한 코드 추가했습니다.

@HMRyu @yunchaeney @hakyoung12

BeMatthewsong added 5 commits September 6, 2024 17:27

[KAN-15] feat: progress bar 초기 세팅

fc19b8f

[KAN-15] style: progress bar UI 구현

5396fcf

Merge branch 'develop' into feat/hyuk/KAN-15-Progress-Bar

77c9728

[KAN-15] style: 스타일 컨벤션 반영 및 속성 변경

adacc19

[KAN-15] feat: 개설확정 렌더링 선택 옵션 추가 및 TSDoc 추가

f115320

BeMatthewsong added the ✨ Feat 기능 추가 label Sep 9, 2024

BeMatthewsong requested a review from HMRyu September 9, 2024 02:36

BeMatthewsong self-assigned this Sep 9, 2024

BeMatthewsong added 2 commits September 9, 2024 11:39

[KAN-15] chore: 불필요한 코드 제거

2889da8

[KAN-15] chore: 불필요한 코드 제거 (2)

f0b2552

BeMatthewsong commented Sep 9, 2024

View reviewed changes

BeMatthewsong changed the title ~~feat: Progress bar~~ feat: 공통 컴포넌트 Progress bar Sep 9, 2024

BeMatthewsong requested review from yunchaeney and removed request for HMRyu September 9, 2024 02:47

BeMatthewsong commented Sep 9, 2024

View reviewed changes

yunchaeney approved these changes Sep 9, 2024

View reviewed changes

hakyoung12 reviewed Sep 9, 2024

View reviewed changes

[KAN-15] fix: 수용인원 관련 코드 추가

a00de4e

HMRyu approved these changes Sep 9, 2024

View reviewed changes

BeMatthewsong commented Sep 9, 2024

View reviewed changes

hakyoung12 approved these changes Sep 9, 2024

View reviewed changes

[KAN-15] fix: 수용인원 관련 코드 추가 (2)

7e9800b

BeMatthewsong merged commit ef7b927 into develop Sep 9, 2024
4 checks passed

BeMatthewsong deleted the feat/hyuk/KAN-15-Progress-Bar branch September 9, 2024 04:35

BeMatthewsong mentioned this pull request Sep 9, 2024

fix: 우측 텍스트 조건부 렌더링 옵션 추가 #32

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 공통 컴포넌트 Progress bar #30

feat: 공통 컴포넌트 Progress bar #30

BeMatthewsong commented Sep 9, 2024 •

edited

Loading

BeMatthewsong Sep 9, 2024

BeMatthewsong Sep 9, 2024

BeMatthewsong Sep 9, 2024

yunchaeney left a comment

yunchaeney Sep 9, 2024

BeMatthewsong Sep 9, 2024

yunchaeney Sep 9, 2024 •

edited by hakyoung12

Loading

BeMatthewsong Sep 9, 2024

hakyoung12 left a comment

hakyoung12 Sep 9, 2024 •

edited

Loading

BeMatthewsong Sep 9, 2024

HMRyu left a comment

HMRyu Sep 9, 2024

HMRyu Sep 9, 2024

BeMatthewsong Sep 9, 2024

BeMatthewsong Sep 9, 2024

BeMatthewsong Sep 9, 2024

		<circle cx="7.99967" cy="5.33317" r="2.66667" fill="currentColor" stroke="currentColor"/>
		<path d="M3.55826 11.5469C3.99899 9.68441 5.84749 8.6665 7.76139 8.6665H8.23796C10.1519 8.6665 12.0004 9.68441 12.4411 11.5469C12.5264 11.9073 12.5941 12.2844 12.6323 12.6676C12.6687 13.034 12.3679 13.3332 11.9997 13.3332H3.99967C3.63148 13.3332 3.33062 13.034 3.36708 12.6676C3.40521 12.2844 3.47299 11.9073 3.55826 11.5469Z" fill="currentColor" stroke="currentColor"/>

feat: 공통 컴포넌트 Progress bar #30

feat: 공통 컴포넌트 Progress bar #30

Conversation

BeMatthewsong commented Sep 9, 2024 • edited Loading

✏️ 작업 내용

📷 스크린샷

✍️ 사용법

🎸 기타

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

yunchaeney Sep 9, 2024 • edited by hakyoung12 Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hakyoung12 left a comment

Choose a reason for hiding this comment

hakyoung12 Sep 9, 2024 • edited Loading

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

BeMatthewsong commented Sep 9, 2024 •

edited

Loading

yunchaeney Sep 9, 2024 •

edited by hakyoung12

Loading

hakyoung12 Sep 9, 2024 •

edited

Loading