[FE] 라운지 화면 구현 #952

jinhokim98 · 2025-01-17T07:10:35Z

issue

close [FE] 라운지 화면 구현 #951

구현 사항

ContentItem, ContentLabel 디자인 컴포넌트 생성

라운지 페이지에서 프로필, 계좌번호, 행사 목록을 감싸는 컴포넌트를 생성했습니다.
props로 label, 수정 아이콘, children을 넣어줄 수 있습니다.

export type ContentItemProps = React.PropsWithChildren & {
  label?: LabelProps;
  onEditClick?: () => void;
};

먼저 label부터 살펴보면 label은 왼쪽과 오른쪽, 각각을 클릭하는 콜백을 넣어줄 수 있습니다.
콜백을 넣어주면 TextButton이 되며, 콜백을 넣어주지 않으면 단순 Text 컴포넌트가 됩니다.
또한 label이 없으면 ContentItem의 패딩은 상하좌우 16px이고, 있으면 상하 8px, 좌우 16px이 되도록 구현했습니다.

type LabelProps = {
  left?: string;
  right?: string;
  onLeftClick?: () => void;
  onRightClick?: () => void;
};

다음으로 onEditClick은 수정 버튼을 클릭했을 때 실행되는 콜백으로 넣어주지 않으면 수정 아이콘이 보이지 않게 됩니다.

onEditClick?: () => void;

그리고 children으로 원하는 컨텐츠를 넣어주면 됩니다.

컴포넌트 사용법을 아래 예시로 남길게요!

<ContentItem label={{left: '기본 계좌번호'}} onEditClick={navigateEditAccountPage}>
  <Text textColor="black" size="bodyBold">{accountNumber}</Text>
</ContentItem>

라운지 페이지 기능 구현

회의 결과 이전 마이페이지를 (라운지 or 홈)과 설정으로 분리하기로 결정되어 이를 구현했습니다.
디렉터리와 그 하위 파일을 이동하게 됐고 이 영향으로 files changed가 많아요.

우선은 라운지 페이지라 명명했으나 네이밍에 대한 피드백을 주시면 반영하겠습니다~

아래는 구현 결과

CreatedEventItem에서 View 분리

나의 행사목록을 구현하기 위해 CreatedEvent 컴포넌트를 재사용하려고 했지만 이 컴포넌트는 안에 Input 검색을 포함하고 있어 가져올 수 없었습니다. 그 하위의 ContentEventItem을 재사용하려고 하니 그 안에는 체크박스와 수정모드에 대한 props가 있어 이것도 재사용 할 수 없었습니다. 그래서 정산 상태와 행사 이름 만을 포함하는 컴포넌트를 하나 만들어서 이를 CreatedEventItem과 Lounge에서 사용하기로 했습니다.

<Flex gap="0.5rem" minHeight="2.5rem" alignItems="center">
  <InProgressCheck inProgress={!isFinished} />
  <Text size="bodyBold" color="onTertiary">{eventName}</Text>
</Flex>

논의하고 싶은 부분

CreatedEvent과 CreatedEventItem의 위치

CreatedEvent과 CreatedEventItem은 Design 디렉터리 안에 있지만 디자인 기능 이외에 다른 기능이 들어가 있어서 이를 외부로 꺼내는 것은 어떨지 생각이 듭니다.

HStack, VStack width 100%에 대해

스토리북 문서에는 기본적으로 width 100%가 적용된다고 설명되어있는데 실제 사용을 해보니 따로 100%을 주지 않으면 100%가 되지 않는 것 같아서 이 점 논의하고 싶어요.

🫡 참고사항

github-actions · 2025-01-17T07:12:31Z

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

pakxe

새로운 페이지 구현하느라 고생많았습니다! 굉장히 깔끔해용요

페이지 이름에 관해서는.. MainPage는 어떨까 생각이 들어요. 기존에는 랜딩 페이지가 MainPage로 쓰였으니까요..!

pakxe · 2025-01-21T03:10:09Z

client/src/pages/lounge/Lounge.tsx

+  };
+
+  return (
+    <ContentItem label={{left: '나의 행사목록', right: '전체보기', onRightClick: navigateCreatedEventsPage}}>


right, onRightClick이렇게 분리하는 것보단 클릭 핸들러가 부착된 컴포넌트 자체를 넘기는 것은 불가능할까요?

아마 Text, TextButton으로 분기시켜 구현하기 위해서 이렇게 분리된 듯 한데, 만약 children이 string이면 Text로 쓰고, 그 외는 전부 그냥 children 자체를 넘기면 가능 할 것도 같아서요,,!

확실히 left, leftClick이 조금 보기 어려울 수도 있을 것 같아요. 아래 방식으로 개선해봤는데 괜찮을까요?
labels prop으로 ReactElement를 받도록 해서 label을 직접 컴포넌트로 넣어주는 방식으로 개선했어요.

<ContentItem labels={ <> <ContentItem.Label>나의 행사목록</ContentItem.Label> <ContentItem.Label onClick={navigateCreatedEventsPage}>전체보기</ContentItem.Label> </> } > ... </ContentItem>

soi-ha

구현해주신 라운지 페이지 잘 확인했습니다!

이번에 새로 생긴 이 페이지의 이름은 라운지 아니면 웨디가 말해준 것처럼 랜딩페이지를 MainPage가 아닌 LandingPage로 변경하고 이 페이지의 이름을 MainPage라고 해도 좋을 것 같아요!

그리고 CreatedEvent과 CreatedEventItem는 말씀해주신 것처럼 디자인만 존재하는 것은 아니고 또, 다른 곳에서 재활용될 것 같지는 않아서... 파일 위치를 이동하거나 혹은 기능을 완전히 분리하고 디자인만 남기는 것도 괜찮다고 생각합니당!

soi-ha · 2025-01-21T04:20:30Z

client/src/constants/routerUrls.ts

@@ -1,6 +1,6 @@
 const EVENT = '/event';
 const EVENT_WITH_EVENT_ID = `${EVENT}/:eventId`;
-const MY_PAGE = '/mypage';
+const LOUNGE = '/lounge';


제 pr과의 충돌을 매우 조심해야 할 부분이군요...

soi-ha · 2025-01-21T04:20:53Z

client/src/pages/event/[eventId]/EventPageLayout.tsx

@@ -74,7 +74,7 @@ const EventPageLayout = () => {
            <DesktopShareEventButton onCopy={trackLinkShare} />
          )}
          {isKakaoUser && (
-            <Link to={ROUTER_URLS.myPage}>
+            <Link to={ROUTER_URLS.lounge}>


이런 파일들도 저랑 merge할 때 lounge로 잘 되어있는지 확인해요!

soi-ha · 2025-01-21T04:32:36Z

client/src/pages/lounge/Lounge.tsx

+        {slicedEvents.map(event => (
+          <CreatedEventView key={event.eventId} {...event} />
+        ))}


생성된 행사가 아무것도 없을 때, 다른 문구가 보여지면 좋을 것 같아요!

오... 확실히 좋을 것 같아요

요렇게 행댕이 사용해서 만들어봤습니다!

추가로 계좌번호가 비었을 때도 문구 추가해봤어요!

회원의 기본 계좌번호가 없을때 뜨는 문구니까 기본 계좌번호를 입력했을 때 '회원에게 이득'이 되는 문구면 더 좋을 것 같아요!

음.. '기본 계좌번호를 설정하여 매 행사마다 입력해야 하는 번거로움을 해소하세요' 같은.. 근데 좀 간결한?!

행사 목록 없을때 띄워지는 것도 너무 좋네요! 다만 문구에서 '아래'는 없어도 될 것 같아요!
그냥 '행사버튼을 ~'로 해도 충분할 것 같습니당

아, 그리고 계좌번호를 입력했을 때 어떤 은행인지 은행명도 같이 보여주는 건 어떨까요??? 아님 로고도 좋구요!

아래 처럼 은행 로고가 계좌번호와 같이 들어가면 인식하기 쉬울 것 같아요!

앗 맞네요!! 여기는 회원이니깐 회원에게 맞는 문구가 좋겠네요
소하 추천에서 글자 수를 살짝 줄여서 '기본 계좌번호를 설정하여\n 행사마다 입력하는 번거로움을 줄이세요' 로 수정했습니다!
24c8137

아래 버튼이 있으니깐 '아래' 지우는 것 동의합니다!
e5aadc9

은행 로고 붙이는 것 좋을 것 같아요!! 이거 한 번 시도해볼게요!

-> 그 이미지가 아래처럼 저장되어있어서

이렇게 나오게 돼요

그래서 요 작업은 은행 이미지를 다시 동그랗게 따서 해봐야 할 것 같아요! 이건 다음 배포 이슈로 가져가야 할 것 같습니당.. 시간이 좀 걸릴 것 같아서;;

github-actions · 2025-01-21T13:28:48Z

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

* feat: mypage -> lounge 디렉토리 명 변경 및 탈퇴 관련 삭제 * feat: ContentItem 디자인 컴포넌트 제작 * feat: ContentLabel 컴포넌트 제작 * refactor: CreatedEvent에서 View 부분 분리 * design: content item VStack width 100% 추가 * fix: 생성 퍼널에서 뒤로가기 누를 때 -1로 대체 * feat: 라운지 페이지 기능 구현 * design: CreatedEvent 패딩 설정 변경 * refactor: left, right가 아니라 컴포넌트를 받는 방식으로 변경 * feat: 행사 생성 목록이 비었을 때 fallback 보이도록 추가 * feat: 계좌번호가 비었을 때 안내 문구 설정 * fix: 계좌번호 입력이 비었을 때 문구 변경 * fix: 행사 목록이 비었을 때 '아래' 문구 제거

jinhokim98 added 8 commits January 17, 2025 13:40

feat: mypage -> lounge 디렉토리 명 변경 및 탈퇴 관련 삭제

f644dd9

feat: ContentItem 디자인 컴포넌트 제작

dca5682

feat: ContentLabel 컴포넌트 제작

7468335

refactor: CreatedEvent에서 View 부분 분리

cc926df

design: content item VStack width 100% 추가

1808d62

fix: 생성 퍼널에서 뒤로가기 누를 때 -1로 대체

de888bf

feat: 라운지 페이지 기능 구현

5b8a5b7

design: CreatedEvent 패딩 설정 변경

9a896b9

jinhokim98 added 🖥️ FE Frontend ⚙️ feat feature labels Jan 17, 2025

jinhokim98 added this to the v3.1.4 milestone Jan 17, 2025

jinhokim98 requested review from pakxe, soi-ha and Todari January 17, 2025 07:10

jinhokim98 self-assigned this Jan 17, 2025

jinhokim98 linked an issue Jan 17, 2025 that may be closed by this pull request

[FE] 라운지 화면 구현 #951

Closed

1 task

pakxe approved these changes Jan 21, 2025

View reviewed changes

soi-ha approved these changes Jan 21, 2025

View reviewed changes

jinhokim98 added 5 commits January 21, 2025 14:55

refactor: left, right가 아니라 컴포넌트를 받는 방식으로 변경

0ff8073

feat: 행사 생성 목록이 비었을 때 fallback 보이도록 추가

2afceb5

feat: 계좌번호가 비었을 때 안내 문구 설정

f116ab3

fix: 계좌번호 입력이 비었을 때 문구 변경

24c8137

fix: 행사 목록이 비었을 때 '아래' 문구 제거

e5aadc9

woowacourse-teams deleted a comment from github-actions bot Jan 21, 2025

jinhokim98 merged commit d180f3a into fe-dev Jan 22, 2025
2 checks passed

jinhokim98 deleted the feature/#951 branch January 22, 2025 06:07

jinhokim98 mentioned this pull request Jan 22, 2025

[FE] v3.1.4 배포 #972

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] 라운지 화면 구현 #952

[FE] 라운지 화면 구현 #952

jinhokim98 commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025

pakxe left a comment

pakxe Jan 21, 2025

jinhokim98 Jan 21, 2025

soi-ha left a comment •

edited

Loading

soi-ha Jan 21, 2025

soi-ha Jan 21, 2025

soi-ha Jan 21, 2025

jinhokim98 Jan 21, 2025

jinhokim98 Jan 21, 2025

jinhokim98 Jan 21, 2025

soi-ha Jan 21, 2025

soi-ha Jan 21, 2025

soi-ha Jan 21, 2025 •

edited

Loading

jinhokim98 Jan 21, 2025 •

edited

Loading

jinhokim98 Jan 21, 2025 •

edited

Loading

github-actions bot commented Jan 21, 2025

[FE] 라운지 화면 구현 #952

[FE] 라운지 화면 구현 #952

Conversation

jinhokim98 commented Jan 17, 2025 • edited Loading

issue

구현 사항

ContentItem, ContentLabel 디자인 컴포넌트 생성

라운지 페이지 기능 구현

CreatedEventItem에서 View 분리

논의하고 싶은 부분

CreatedEvent과 CreatedEventItem의 위치

HStack, VStack width 100%에 대해

🫡 참고사항

github-actions bot commented Jan 17, 2025

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

soi-ha 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

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

soi-ha Jan 21, 2025 • edited Loading

Choose a reason for hiding this comment

jinhokim98 Jan 21, 2025 • edited Loading

Choose a reason for hiding this comment

jinhokim98 Jan 21, 2025 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Jan 21, 2025

jinhokim98 commented Jan 17, 2025 •

edited

Loading

soi-ha left a comment •

edited

Loading

soi-ha Jan 21, 2025 •

edited

Loading

jinhokim98 Jan 21, 2025 •

edited

Loading

jinhokim98 Jan 21, 2025 •

edited

Loading