[FE] 이벤트 홈 화면 새로운 플로우로 교체 (참여자 별 정산, 전체 지출 내역), Dropdown 컴포넌트 구현 #582

jinhokim98 · 2024-09-21T15:11:30Z

issue

구현 사항

Tabs 디자인 변경

이전 디자인

수정된 디자인

탭을 최신 디자인에 맞게 변경했습니다.

사용자가 더 관심이 많은 참여자 별 정산이 먼저 보이도록 설정

행동대장 링크를 타고 들어온 사람은 전체 지출 내역보다는 내가 얼마를 내야할지 더 관심이 많았습니다. 그래서 사용자가 더 관심있는 데이터를 먼저 보여주도록 했습니다.

지출내역 안에 검색창이 들어가도록 변경

이전 디자인

새로운 디자인

입금 확인 컴포넌트 적용 완료

Flex 컴포넌트 다른 스타일 확장할 수 있도록 설정

otherStyle 옵션을 추가했어요 React.CSSProperties 타입으로 React에서 인라인으로 css를 넣어주는 속성 그대로 사용하도록 했어요.

아래와 같이 사용하면 됩니다.

<Flex
      flexDirection="column"
      width="100%"
      backgroundColor="white"
      padding="0.5rem 1rem"
      paddingInline="0.5rem"
      gap="0.5rem"
      height="100%"
      otherStyle={{borderRadius: '1rem'}}
    >

초대 버튼 색상 변경

지출 내역이 없을 때 fallback 컴포넌트 구현

이 fallback은 참여자만 볼 수 있습니다.

관리 페이지의 dropdown 구현

사용방식은 탭 컴포넌트와 비슷해요!
Title의 dropdown prop에 Tabs와 Tab과 비슷한 구조로 넣으면 됩니다!

<Title
        title={eventName}
        amount={totalExpenseAmount}
        dropdown={
          <Dropdown>
            <DropdownButton text="전체 참여자 관리" />
            <DropdownButton text="계좌번호 입력하기" />
          </Dropdown>
        }
      />

탭 컴포넌트 Indicator width 이슈

두 가지 이슈가 있었습니다

실제 tab width에 indicator가 꽉 차지 않음
0에서 실제 tab width로 값이 바뀌며 생기는 indicator가 채워지는 현상

실제 tab width에 indicator가 꽉 차지 않음
tab width에 indicator가 채워지지 않던 이유는 명확히는 모르겠어요. 초기 값에서 8px정도 적게 되고 resize가 일어났을 때 그때서야 바로 채워지더라구요. 현재의 방식은 ref.current.offsetWidth를 통해서 값을 가져오는 방식이었습니다.

그래서 방식을 바꿨어요. ResizeObserver를 사용하는 방식으로 바꿨습니다.
ResizeObserver는 특정 요소 자체의 크기 변화를 감지하는 옵저버입니다.

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
https://duknock.tistory.com/8

초기에 컴포넌트가 랜더링되고 요소의 크기가 변했으니 observer callback이 실행됩니다.
그 때 현재의 tabRef와 entry target이 동일할 때 entry의 width 값을 가져옴으로써 정확한 width를 가져올 수 있습니다.

if (entry.target === tabRef.current) {
  setTabWidth(entry.contentRect.width);
}

0에서 실제 tab width로 값이 바뀌며 생기는 indicator가 채워지는 현상

기존에는 이런 현상이 있었습니다.

2024-09-24-11-56-18.mp4

탭을 이동할 때마다 indicator가 채워지는 현상이 부자연스러웠고 이를 수정하기 위해 tab width가 0일 때는 indicator를 랜더링하지 않는 방향으로 수정했습니다.

2024-09-24-11-56-52.mp4

중점적으로 리뷰받고 싶은 부분(선택)

위 Flex 확장 방식 괜찮은가요?

🫡 참고사항

행동 디자인 토큰으로 z-index를 추가했습니다. 정해진 z-index 값만 사용하기 위해서입니다~

github-actions · 2024-09-24T03:01:44Z

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

pakxe

고생 많았습니다! 이슈를 가져가준 것도 모자라 잘 만들어 주어서 너무 고마워요~!!!

pakxe · 2024-09-24T05:20:26Z

client/src/components/Design/components/Dropdown/Dropdown.tsx

+
+const Dropdown = ({children}: DropdownProps) => {
+  const {isOpen, openDropdown, meetBallsRef, dropdownRef} = useDropdown();
+  const isDropdownOpen = isOpen && meetBallsRef.current;


드랍다운을 여는 상황이 미트볼이 아닐 수도 있을 것 같아서 좀 더 범용적인 이름도 좋을 것 같네요 ! 😁

pakxe · 2024-09-24T05:24:33Z

client/src/components/Design/components/Dropdown/DropdownButton.tsx

+import {dropdownButtonStyle} from './Dropdown.style';
+import {DropdownButtonProps} from './Dropdown.type';
+
+const DropdownButton = ({text, ...buttonProps}: DropdownButtonProps) => {


드랍다운 안에서 이 버튼들이 ul -> li처럼 li태그로 감싸진 후 버튼이나 다른 태그 안에 사용하는 것도 좋아보여요~! ul, li로 하면 아마 "아이템 3개 중 1번째" 이런 식으로 낭독기가 읽어줬던 것 같거든요.

pakxe · 2024-09-24T05:25:32Z

client/src/components/Design/components/Dropdown/Dropdown.tsx

+    >
+      <Icon iconType="meatballs" />
+      {isDropdownOpen && (
+        <section ref={dropdownRef}>


시멘틱 태그를 적극적으로 활용하는 것 같아 좋아요~~ 제안이지만 ul태그도 넣는 건 어떻게 생각하시나요?!

pakxe · 2024-09-24T05:25:48Z

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

+export type DropdownButtonProps = React.HTMLAttributes<HTMLButtonElement> & {
+  text: string;
+};
+
+export type DropdownProps = {
+  children: React.ReactElement<DropdownButtonProps>[];
+};


타입 굿굿 ~~ 👍

pakxe · 2024-09-24T05:26:41Z

client/src/components/Design/components/Dropdown/useDropdown.ts

+        (dropdownRef.current && dropdownRef.current.contains(targetNode)) ||
+        (meetBallsRef.current && meetBallsRef.current.contains(targetNode))


이걸 함수로 분리해도 좋을 것 같아요! 무엇을 의미하는지 더 빠르게 알 수 있을 것 같아요 😁

pakxe · 2024-09-24T05:30:02Z

client/src/pages/EventPage/HomePage/HomePage.tsx

  const {steps} = useRequestGetSteps();
  const {totalExpenseAmount} = useTotalExpenseAmountStore();

  return (
-    <div style={{paddingBottom: '2rem'}}>
+    <div css={receiptStyle}>


인라인 css를 없애주셨군요! 좋아요좋아요

pakxe · 2024-09-24T05:46:25Z

client/src/components/Reports/Reports.tsx

+  if (reports.length <= 0) {
+    return <BillEmptyFallback />;
+  }
+
  return (
-    <Flex flexDirection="column" gap="0.5rem" paddingInline="0.5rem">
-      {reports.length > 0 ? (
-        <>
-          <Input inputType="search" value={name} onChange={changeName} placeholder="참여자 이름" />
-          {matchedReports.length !== 0 && <ExpenseList expenseList={expenseListProp} />}
-        </>
-      ) : (
-        <Flex width="100%" justifyContent="center">
-          <Text size="body" textColor="gray" style={{paddingTop: '1rem'}}>
-            지금은 참여자가 한 명도 없어요. :(
-          </Text>
-        </Flex>
-      )}
+    <Flex flexDirection="column" gap="0.5rem">
+      <ExpenseList name={name} onSearch={changeName} placeholder="이름 검색" expenseList={expenseListProp} />


뭔가 if문으로 위에 동떨어져 있으니까 이게 렌더링 대상이라는게 잘 인지되지 않을 수도 있을 것 같기도 해요.. 저만 그런걸 수도 ..!! 혹시 아래의 return문 안에 이걸 넣지 않은 이유가 있을까요?

pakxe · 2024-09-24T05:46:47Z

client/src/components/Design/theme/HDesignProvider.tsx

@@ -5,6 +5,7 @@ import {Theme} from '@theme/theme.type';
 import {GlobalStyle} from '@theme/GlobalStyle';
 import {COLORS} from '@token/colors';
 import {TYPOGRAPHY} from '@token/typography';
+import {ZINDEX} from '@token/zIndex';


Z_INDEX는 어떤가요?!

pakxe · 2024-09-24T05:49:49Z

client/src/components/Design/components/Input/Input.tsx

+      {inputType === 'input' && value && hasFocus && (
        <IconButton tabIndex={-1} variants="none" onMouseDown={handleClickDelete}>
          <Icon iconType="inputDelete" />
        </IconButton>
      )}
+      {inputType === 'search' && (
+        <IconButton tabIndex={-1} variants="none">
+          <Icon iconType="search" />
+        </IconButton>
+      )}


분기문이 늘어나니 드는 생각이 <Input.Search />이런 식으로 만든다면 각 컴포넌트를 따로 만들게 되니까 읽기 더 좋을 것 같기도 하네요 😆

pakxe · 2024-09-24T05:50:02Z

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

@@ -17,4 +17,6 @@ export interface FlexProps {
  backgroundColor?: FlexBackgroundColor;
  theme?: Theme;
  minHeight?: string;
+
+  otherStyle?: React.CSSProperties;


추가해줘서 고맙숩니다 !~~~!!

github-actions · 2024-09-24T07:33:32Z

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

jinhokim98 added 9 commits September 21, 2024 22:41

feat: z index theme에 추가

ce6960c

feat: 탭 컴포넌트 스타일 바뀐대로 설정

fb00660

design: gap 만큼 더 움직이도록 설정

24d808a

feat: ExpenseList안에 검색input 추가

dc7808a

feat: Flex 컴포넌트에 다른 style 넣을 수 있도록 확장

277e79b

feat: inputType search일 때 검색 아이콘 보이도록 설정

eba6146

feat: 바뀐 이벤트 홈 디자인 반영

b5e6d97

remove: 사용하지 않는 Search 컴포넌트 삭제

300fbb9

fix: Flex컴포넌트 다른 스타일 확장으로 인한 ts 오류 수정

49fb7f4

jinhokim98 added 🖥️ FE Frontend ⚙️ feat feature labels Sep 21, 2024

jinhokim98 added this to the lev4 milestone Sep 21, 2024

jinhokim98 requested review from pakxe, soi-ha and Todari September 21, 2024 15:11

jinhokim98 self-assigned this Sep 21, 2024

jinhokim98 linked an issue Sep 21, 2024 that may be closed by this pull request

[FE] 이벤트 홈 화면 새로운 플로우로 교체 (참여자 별 정산, 전체 지출 내역) #578

Closed

6 tasks

jinhokim98 added 11 commits September 22, 2024 11:32

feat: ExpenseList isDeposited 내용 추가

7a559ef

style: 사용하지 않는 import제거

4c24b1a

design: 버튼 색상 변경

0c8ec39

feat: 지출내역이 없을 때 fallback 추가

eda3f72

feat: 지출 내역이 없을 때 fallback 적용

a035475

feat: Dropdown 컴포넌트 구현

c6ca8a7

fix: createPortal 제거 -> position absolute를 이용해 대체

7928682

feat: AdminPage에 dropdown 컴포넌트 적용

48bf85d

design: 모바일에서 클릭 시 파란색 강조되는 색 제거

5d5c38b

feat: 계좌번호 입력 드랍다운 눌렀을 때 페이지 이동 (머지되면 붙일 예정)

6b13fb1

design: 탭 컴포넌트 애니메이션 cubic-bezier를 이용해서 변경

639262b

jinhokim98 changed the title ~~[FE] 이벤트 홈 화면 새로운 플로우로 교체 (참여자 별 정산, 전체 지출 내역)~~ [FE] 이벤트 홈 화면 새로운 플로우로 교체 (참여자 별 정산, 전체 지출 내역), Dropdown 컴포넌트 구현 Sep 23, 2024

design: 드랍다운 버튼 hover 강조

4e49fc1

jinhokim98 added 2 commits September 24, 2024 11:28

fix: ResizeObserver를 이용해서 tab width의 값을 정확히 가져오도록 설정

abd0729

design: tab width가 0일 때 indicator가 랜더링 되지 않도록 설정

3a8e323

woowacourse-teams deleted a comment from github-actions bot Sep 24, 2024

jinhokim98 linked an issue Sep 24, 2024 that may be closed by this pull request

[FE] 관리 페이지의 타이틀 옆에 뜨는 케밥 버튼을 눌렀을 때 뜨는 드랍다운 구현 #576

Closed

pakxe approved these changes Sep 24, 2024

View reviewed changes

Todari approved these changes Sep 24, 2024

View reviewed changes

chore: 충돌 병합

aa126fe

jinhokim98 force-pushed the feature/#578 branch from 0028319 to aa126fe Compare September 24, 2024 07:30

Merge branch 'fe-dev' into feature/#578

09aa46a

jinhokim98 merged commit 396ff78 into fe-dev Sep 24, 2024
2 checks passed

jinhokim98 deleted the feature/#578 branch September 24, 2024 07:33

Todari added this to the v2.0.0 milestone Sep 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] 이벤트 홈 화면 새로운 플로우로 교체 (참여자 별 정산, 전체 지출 내역), Dropdown 컴포넌트 구현 #582

[FE] 이벤트 홈 화면 새로운 플로우로 교체 (참여자 별 정산, 전체 지출 내역), Dropdown 컴포넌트 구현 #582

jinhokim98 commented Sep 21, 2024 •

edited

Loading

github-actions bot commented Sep 24, 2024

pakxe left a comment

pakxe Sep 24, 2024

pakxe Sep 24, 2024

pakxe Sep 24, 2024

pakxe Sep 24, 2024

pakxe Sep 24, 2024

pakxe Sep 24, 2024

pakxe Sep 24, 2024

pakxe Sep 24, 2024

pakxe Sep 24, 2024

pakxe Sep 24, 2024

github-actions bot commented Sep 24, 2024

		(dropdownRef.current && dropdownRef.current.contains(targetNode)) \|\|
		(meetBallsRef.current && meetBallsRef.current.contains(targetNode))

[FE] 이벤트 홈 화면 새로운 플로우로 교체 (참여자 별 정산, 전체 지출 내역), Dropdown 컴포넌트 구현 #582

[FE] 이벤트 홈 화면 새로운 플로우로 교체 (참여자 별 정산, 전체 지출 내역), Dropdown 컴포넌트 구현 #582

Conversation

jinhokim98 commented Sep 21, 2024 • edited Loading

issue

구현 사항

Tabs 디자인 변경

사용자가 더 관심이 많은 참여자 별 정산이 먼저 보이도록 설정

지출내역 안에 검색창이 들어가도록 변경

입금 확인 컴포넌트 적용 완료

Flex 컴포넌트 다른 스타일 확장할 수 있도록 설정

초대 버튼 색상 변경

지출 내역이 없을 때 fallback 컴포넌트 구현

관리 페이지의 dropdown 구현

탭 컴포넌트 Indicator width 이슈

중점적으로 리뷰받고 싶은 부분(선택)

🫡 참고사항

github-actions bot commented Sep 24, 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

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

github-actions bot commented Sep 24, 2024

jinhokim98 commented Sep 21, 2024 •

edited

Loading