[FE] 참여자 입금 상태, 참여자 이름 Chip 컴포넌트 구현 #570

soi-ha · 2024-09-19T04:38:58Z

issue

close [FE] 참여자 입금 상태, 참여자 이름 Chip 컴포넌트 구현 #563

구현 사항

구현 목적

참여자의 입금 상태를 관리하는 기능이 추가됩니다. 이때, ‘홈’에서 참여자의 입금 상태를 나타내는 Chip이 필요하여 DepositCheck 컴포넌트를 구현했습니다.

원래는 Chip 컴포넌트를 만들어서 type으로 DepositCheck과 Name (정산 내역에서 해당 지출에 참여하고 있는 인원을 나타내는 Chip)을 나눠서 구현하려고 했습니다.
그러나, 토다리가 ‘홈’을 제작하면서 Name Chip을 만들었기에 저는 Chip 컴포넌트가 아닌 DepositCheck 컴포넌트만 구현하였습니다.

구현된 DepositCheck 디자인은 다음과 같습니다.

구현 설명

Icon 컴포넌트에 ‘check’과 ‘x’ icon을 추가하였습니다.

현재 행동대장에서 사용하는 icon들은 모두 Icon 컴포넌트에 넣어서 사용하고 있습니다. 따라서, 통일성을 위해 Icon 컴포넌트에 DepositCheck에서 사용할 icon을 추가하였습니다.
DepositCheck 컴포넌트 구현

Text 컴포넌트와 Icon 컴포넌트를 활용하여 DepositCheck 컴포넌트를 구현하였습니다.
```
const DepositCheck: React.FC<DepositCheckProps> = ({isDeposited = false}: DepositCheckProps) => {
  const {theme} = useTheme();
  return (
    <div css={DepositCheckStyle({theme, isDeposited})}>
      <Text size="tiny" className="deposit-check-text">
        입금
      </Text>
      <Icon iconType={isDeposited ? 'check' : 'x'}></Icon>
    </div>
  );
};
```
isDeposited는 참여자의 입금 상태를 나타내는 props입니다.
true일 경우 입금 완료, false일 경우 입금 미완료를 뜻합니다. default 값은 false입니다.

isDeposited가 true일 경우 Icon은 check을 사용하며 style color는 primary입니다. false일 경우에 Icon는 x이며 style color는 gray입니다.

🫡 참고사항

github-actions · 2024-09-19T04:40:50Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-zmwhmwxphp.chromatic.com/

github-actions · 2024-09-19T04:48:12Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-hivaiuxynr.chromatic.com/

pakxe

이 컴포넌트를 만들어야하는 이유에 대해서 잘 설명해주어서 좋았어요 소이 햐

현재 행동대장에서 사용하는 icon들은 모두 Icon 컴포넌트에 넣어서 사용하고 있습니다.

통일성을 챙겨주신 것 좋아요좋아요!~~

pakxe · 2024-09-20T12:01:03Z

client/src/components/Design/components/DepositCheck/DepositCheck.style.ts

+    '.deposit-check-text': {
+      color: isDeposited ? theme.colors.primary : theme.colors.gray,
+      paddingTop: '0.0625rem',
+    },


이런 식으로도 스타일을 적용할 수 있군요! NEW지식 습득.. 그런데 혹시 클래스로 스타일을 적용한 이유가 있을까요 ?! 제 추측으로는 하나의 css로 자식에 있는 Text까지 스타일을 적용하려고 해서 나눠진 것 같은데욧. color는 Text 컴포넌트에 준비되어있는 컬러 props를 사용하는 건 어떨지 제안드려봅니다!~ 굳이 싶다면 pass~~~!!

pakxe · 2024-09-20T12:01:25Z

client/src/components/Design/components/DepositCheck/DepositCheck.tsx

+import {DepositCheckStyle} from './DepositCheck.style';
+import {DepositCheckProps} from './DepositCheck.type';
+
+const DepositCheck: React.FC<DepositCheckProps> = ({isDeposited = false}: DepositCheckProps) => {


꼼꼼한 default ~~ 👍

pakxe · 2024-09-20T12:04:49Z

client/src/components/Design/components/DepositCheck/DepositCheck.style.ts

@@ -0,0 +1,21 @@
+import {css} from '@emotion/react';
+
+import {WithTheme} from '@components/Design/type/withTheme';


활용해주어서 고마어용~~

사실은 이런 타입 만든게 반복되니까 하나로 뭉쳐서 쓰자가 목적이었는데요. 이번에 용어 정리를 하면서 eventId -> eventToken으로 바뀌게 되었어요. 그리고 이 eventId라는 프로퍼티도 WIthEventId라는 타입으로 WithEvent와 동일한 형태로 사용할 수 있었는데요. 한번에 바꿀 수 있다는 점에서 유용함을 느꼈씁니다.!!

pakxe · 2024-09-20T12:08:02Z

client/src/components/Design/components/DepositCheck/DepositCheck.type.ts

+export interface DepositCheckStyleProps {
+  isDeposited: boolean;
+}
+
+export interface DepositCheckCustomProps {
+  isDeposited: boolean;
+}
+
+export type DepositCheckOptionProps = DepositCheckStyleProps & DepositCheckCustomProps;


isDeposited 프로퍼티가 DepositCheckStyleProps와 DepositCheckCustomProps에도 존재하는데 둘을 다시 &로 얽는게 혼란스러울 수도 있을 것 같은데요.

다른 방법을 생각해보자면 style에도 필요하고 이 컴포넌트가 받는 props에도 필요하다면 With~처럼 타입을 만들어서 사용해도 좋을 것 같구요.

pakxe · 2024-09-20T12:09:29Z

client/src/components/Design/components/Icon/Icon.stories.tsx

@@ -13,7 +13,7 @@ const meta = {
    iconType: {
      description: '',
      control: {type: 'select'},
-      options: ['inputDelete', 'buljusa', 'rightChevron', 'search', 'confirm', 'error', 'trash'],
+      options: ['inputDelete', 'buljusa', 'rightChevron', 'search', 'confirm', 'error', 'trash', 'check', 'x'],


'x'가 정말 직관적이네요. ㅋㅋㅋ 👍

pakxe · 2024-09-20T12:10:56Z

client/src/components/Design/components/Icon/Icon.type.ts

+export type IconType =
+  | 'inputDelete'
+  | 'buljusa'
+  | 'rightChevron'
+  | 'search'
+  | 'error'
+  | 'confirm'
+  | 'trash'
+  | 'check'
+  | 'x';


이건 그냥 든 생각인데요.
아이콘이 많아지면 이렇게 타입을 나열하기도 쉽지 않을 것 같아요. 너무 길어서 읽기가 힘드니까요. 뭔가 style, custom 이렇게 나누는 것처럼 아이콘의 타입을 나눠서 할 수도 있으려나요....

jinhokim98

웨디가 너무 질문을 잘 해줘서 코멘트는 별로 없네요;;
이제 이 컴포넌트를 잘 이식해볼게요!

그 전에 ci test 터지는 것 해결해주시면 좋을 것 같아요!
고생하셨습니다😊😊

jinhokim98 · 2024-09-21T08:57:12Z

client/src/components/Design/components/DepositCheck/DepositCheck.style.ts

@@ -0,0 +1,21 @@
+import {css} from '@emotion/react';
+
+import {WithTheme} from '@components/Design/type/withTheme';


오..! 이런 것도 있었구나. 모르고 있었는데 활용하면 너무 좋을 것 같아요!

jinhokim98 · 2024-09-21T08:59:39Z

client/src/components/Design/components/Icon/Icon.stories.tsx

@@ -13,7 +13,7 @@ const meta = {
    iconType: {
      description: '',
      control: {type: 'select'},
-      options: ['inputDelete', 'buljusa', 'rightChevron', 'search', 'confirm', 'error', 'trash'],
+      options: ['inputDelete', 'buljusa', 'rightChevron', 'search', 'confirm', 'error', 'trash', 'check', 'x'],


나중의 일이지만 사용하지 않는 아이콘 정리해봐도 좋을 것 같아요!

…eng-dong into feature/#563

github-actions · 2024-09-21T12:25:18Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-cckooyaors.chromatic.com/

soi-ha added 3 commits September 19, 2024 09:40

feat: Icon 컴포넌트에 check, x 추가

95f52f4

feat: 참여자의 입금 상태를 관리하는 DepositCheck 컴포넌트 기능 구현

4ccc72d

test: DepositCheck 스토리북 생성

9328178

soi-ha added 🖥️ FE Frontend ⚙️ feat feature labels Sep 19, 2024

soi-ha added this to the lev4 milestone Sep 19, 2024

soi-ha self-assigned this Sep 19, 2024

refactor: isCheck props를 isDeposited로 api 이름과 동일하게 변경

47681dc

pakxe self-requested a review September 20, 2024 11:54

pakxe approved these changes Sep 20, 2024

View reviewed changes

jinhokim98 approved these changes Sep 21, 2024

View reviewed changes

jinhokim98 added 2 commits September 21, 2024 21:22

fix: icon defalut color 누락된 부분 추가

24f1da8

Merge branch 'fe-dev' of https://github.com/woowacourse-teams/2024-ha…

053e928

…eng-dong into feature/#563

jinhokim98 merged commit 5e9555e into fe-dev Sep 21, 2024
2 checks passed

jinhokim98 deleted the feature/#563 branch September 21, 2024 12:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] 참여자 입금 상태, 참여자 이름 Chip 컴포넌트 구현 #570

[FE] 참여자 입금 상태, 참여자 이름 Chip 컴포넌트 구현 #570

soi-ha commented Sep 19, 2024

github-actions bot commented Sep 19, 2024

github-actions bot commented Sep 19, 2024

pakxe left a comment

pakxe Sep 20, 2024

pakxe Sep 20, 2024

pakxe Sep 20, 2024

pakxe Sep 20, 2024

pakxe Sep 20, 2024

pakxe Sep 20, 2024

jinhokim98 left a comment •

edited

Loading

jinhokim98 Sep 21, 2024

jinhokim98 Sep 21, 2024

github-actions bot commented Sep 21, 2024

		@@ -0,0 +1,21 @@
		import {css} from '@emotion/react';

		import {WithTheme} from '@components/Design/type/withTheme';

[FE] 참여자 입금 상태, 참여자 이름 Chip 컴포넌트 구현 #570

[FE] 참여자 입금 상태, 참여자 이름 Chip 컴포넌트 구현 #570

Conversation

soi-ha commented Sep 19, 2024

issue

구현 사항

구현 목적

구현 설명

🫡 참고사항

github-actions bot commented Sep 19, 2024

github-actions bot commented Sep 19, 2024

pakxe 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

jinhokim98 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Sep 21, 2024

jinhokim98 left a comment •

edited

Loading