[FE] 설정 페이지 디자인 및 구현 #962

soi-ha · 2025-01-20T08:35:28Z

issue

close [FE] 설정 페이지 디자인 및 구현 #961

구현 목적

우리 서비스의 플로우가 변경되면서 마이페이지가 사라지고 설정 페이지가 생기게 되었습니다. 설정 페이지에는 현재 계정과 앱 카테고리로 나눠집니다. 계정 카테고리에는 로그아웃, 회원 탈퇴, 약관을 확인할 수 있는 tab이 존재합니다. 앱 카테고리에는 서비스 버전에 대한 tab이 존재합니다. 이런 카테고리와 탭은 추후 변경될 수 있습니다.

구현 사항

디자인

기존에 존재하던 마이페이지의 디자인을 기반으로 조금 변경했습니다.

설정 페이지이지 에서는 유저에 대한 정보는 보여줄 필요가 없다고 판단했습니다. 설정 페이지에 접근하기 전의 페이지가 행동대장 라운지(이름 미정)이기 떄문입니다. 직전 페이지에서 유저에 대한 정보를 보여주고 있기 때문에 설정 페이지에서 중복하여 유저 정보를 보여줄 이유가 없다고 판단했습니다.

구현

setting 폴더 생성 및 withdrawPage 폴더 이동

기존에 withdrawPage(회원탈퇴)는 myPage 폴더에 존재했습니다. 회원 탈퇴는 설정 페이지로 이동되면서 해당 폴더를 setting 폴더로 이동했습니다.
기존의 myPage 처리 (삭제 X)

기존의 myPage와 관련된 폴더 및 router 등은 삭제하지 않았습니다. myPage와 관련된 하위 페이지들 중에서 완전히 다른 페이지(admin이나 home 등)와 연결되어 있는 부분이 존재했습니다. 그렇기에 myPage와 관련된 폴더들을 삭제할 경우 다른 페이지에서도 수정이 발생합니다.

그리고 myPage와 관련된 페이지는 쿠키의 라운지 페이지로 이동되는 것입니다. 쿠키의 작업 내용을 확인한 결과 저의 작업에서 삭제되어야 할 페이지들이 그대로 이름만 바뀌어 사용되고 있는 것을 확인했습니다. 그렇기에 merge 과정에서 이름과 파일 경로가 변경되는 부분을 잘 확인하여 merge를 진행하면 저의 작업에서 삭제를 하지 않아도 될 것이라고 판단했습니다.
SettingSection

VStack 컴포넌트를 활용하여 SettingSection 컴포넌트를 구현했습니다.
Category 컴포넌트

해당 컴포넌트는 카테고리 별로 각 tab을 출력하도록 구현한 설정 페이지만을 위한 컴포넌트입니다.

후에 우리 서비스의 규모가 커지게 되면 설정 페이지에 들어가게 될 카테고리와 tab이 늘어나게 될 것으로 예상했습니다. 따라서 편하게 Tab을 늘리고 Category를 늘릴 수 있도록 고려하여 구현했습니다.
```
export interface CategoryProps {
  categoryTitle: string;
  tabList: Tab[];
}

const Category = ({categoryTitle, tabList}: CategoryProps) => (
  <VStack gap="16">
    <Text textColor="onTertiary" size="bodyBold">
      {categoryTitle}
    </Text>
    {tabList.map(tab => (
      <TextButton key={tab.name} textColor="onTertiary" textSize="body" onClick={tab.onClick}>
        {tab.name}
      </TextButton>
    ))}
  </VStack>
);
```
여기서 Tab 타입은 다음과 같습니다.
```
export type Tab = {name: string; onClick: () => void};
```
Tab을 클릭했을 경우 url이 아닌 onClick으로 했습니다. 페이지 이동 뿐 아니라 Tab을 클릭하면 Modal이 띄워지는 등의 이벤트를 고려하였기 때문입니다.

그렇기에 TabList를 생성하는 함수가 필요했습니다.
상수가 아닌 함수인 이유는 페이지를 이동하기 위해서는 useNavigate를 사용하여야 하는데 상수일 경우 navigate를 받을 수 없었습니다. 그렇기에 함수를 사용하여 naviagate를 받도록 했습니다.
```
export const createAccountCategory = ({navigate}: TabContext): Tab[] => [
  {name: '약관', onClick: () => {}},
  {name: '로그아웃', onClick: () => {}},
  {name: '회원탈퇴', onClick: () => navigate(ROUTER_URLS.withdraw)},
];
```
```
export interface TabContext {
  navigate: ReturnType<typeof useNavigate>;
}
```

논의하고 싶은 부분(선택)

Setting의 위치

현재 setting 폴더는 쿠키가 구현한 lounge 폴더와는 개별적으로 존재합니다.

그러나 설정 페이지는 라운지 페이지를 통해서만 접근할 수 있습니다. 회원만 접근이 가능하기 때문입니다. 그렇기에 Setting 폴더 및 router가 Lounge의 하위에 존재해야 하는 것은 아닌가?라는 생각이 들었습니다.

실제로 SettingPage에서는 Lounge에서 사용하는 error 및 suspense fallback 페이지를 그대로 사용하며, userInfoContext도 받아서 사용합니다. 그렇기에 Setting의 위치를 Lounge의 하위로 이동하는 것은 어떤지 다른 분들의 의견이 궁금합니다.

건의하고 싶은 부분(선택)

Stack import (@Todari)

Stack 폴더에는 Stack과 VStack, HStack 이 존재합니다. 이 Stack 폴더에서 혹은 Design 폴더에서 index.tsx로 한번에 내보내기를 하면 어떨지! 건의드립니다.

VStack forwardRef warning (@Todari)

VStack을 사용하면 아래 이미지와 같은 warning이 발생하는데요! 어떻게 해결할 수 있을까욤?

🫡 참고사항

fallback 폴더의 MyPageError, MyPageLoading 파일 이름 변경 (@jinhokim98 )

쿠키 측에서 LoungePageError 등으로 변경한 것을 확인했습니다. 저의 구현 부분에서는 이전과 동일하게 MyPageError로 두었기에 merge시 주의가 필요합니다!

…변경 및 tabList에 필요한 context를 넘겨주도록 구현

github-actions · 2025-01-20T08:37:21Z

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

jinhokim98

고생했습니다 소하~ 설정 페이지 디자인 너무 깔끔하네요~ 역시 우리 팀은 저 빼고;;;; 디자인 다 잘 해ㅋㅋ

앗 그리고 제가 작업할 때 mypage 디렉터리를 지우고 새로 디렉터리를 만들어서 작업했는데 git이 이것을 디렉터리 변경으로 인식한 것 같아요.. (당연한건가?ㅋㅋ)

그리고 논의점에 대해 제 생각을 말씀드리면

Setting의 위치

설정 페이지 진입 방법이 라운지(?)에 접속한 후 밖에 없기 때문에 그 하위 라우팅으로 들어가는 것이 자연스럽지만, 라우트 주소를 보면 /lounge/setting 이어서 라운지의 설정을 할 것 같은 느낌도 들어요.. 저는 /setting이 전체 설정처럼 느껴져서 좋을 것 같아요.

jinhokim98 · 2025-01-20T09:09:30Z

client/src/pages/setting/SettingPage.tsx

+export const createAccountCategory = ({navigate}: TabContext): Tab[] => [
+  {name: '약관', onClick: () => {}},
+  {name: '로그아웃', onClick: () => {}},
+  {name: '회원탈퇴', onClick: () => navigate(ROUTER_URLS.withdraw)},


공감합니다. onClick 될 때 navigate 이외 다른 액션이 일어날 수 있기 때문에 외부에서 넣어주는 것이 좋다고 느껴져요

jinhokim98 · 2025-01-20T09:14:56Z

client/src/pages/setting/SettingPage.tsx

+  const tabContext: TabContext = {navigate};
+
+  return (
+    <VStack p="24" bg={theme.colors.white} br="12" gap="16">


여기 VStack을 보면서 bg 속성이 CSSProperties['background'] 보다는 ColorTokens 이 더 좋을 것 같다는 생각이 드네요!
그렇게 한다면 여기서 useTheme을 import해서 넣어주지 않아도 될 것 같아요.

소하는 어떻게 생각하시나요?

오~ 좋은 것 같아요! color 상수를 활용해서 해볼게요!

jinhokim98 · 2025-01-20T09:18:35Z

client/src/pages/setting/SettingPage.tsx

+  return (
+    <VStack p="24" bg={theme.colors.white} br="12" gap="16">
+      <Category categoryTitle="계정" tabList={createAccountCategory(tabContext)} />
+      <div style={{height: '1px', width: '100%', backgroundColor: theme.colors.grayContainer}}></div>


VStack 스토리북 가이드를 보면 divider 옵션이 있어요!

아래 코드는 스토리북에서 가져온 예시 코드인데 이렇게 구현해봐도 좋을 것 같아요!

<Box b="1px solid #eee" bg="#ffffff" br={8} h={640} p={16} w={640} > <VStack align="flex-start" b="1px solid #f66" bg="#fff" br={16} divider={<Divider />} gap={16} m={0} p={16} > <DemoBox> Box 1 </DemoBox> <DemoBox> Box 2 </DemoBox> <DemoBox> Box 3 </DemoBox> </VStack> </Box>

오!!! 이런게 있었군요? 진챠.. 여기까지 생각한 대다리...
알려주셔서 고마워용!

jinhokim98 · 2025-01-20T09:19:33Z

client/src/pages/setting/SettingPage.tsx

+  return (
+    <MainLayout backgroundColor="gray">
+      <TopNav>
+        <TopNav.Item displayName="뒤로가기" noEmphasis routePath="-1" />


요 부분도 웨디의 TopNav 변경과 충돌이 있을 것 같아요!

jinhokim98 · 2025-01-20T09:25:45Z

client/src/pages/setting/SettingPage.type.ts

+
+export type Tab = {name: string; onClick: () => void};
+
+export interface TabContext {


처음에 TabContext를 봤을 때 Context API를 사용한 줄 알고 Provider는 어디 있지 했는데 인터페이스 이름이었군요ㅋㅋㅋㅋㅋ

엇 혹쉬.. 다른 이름은 어떨까요..! 저도 프로바이더를 찾고있었어욬ㅋㅋㅋ

앜ㅋㅋㅋ! 이름 꼭 바꿀게요!
TabActions는 어떤가용?!

pakxe

새로운 설정 페이지..! 굉장히 깔끔하고 보기 좋은 것 같아요. 고생많았습니다 소황

논의하고 싶은 사항을 보니 Setting페이지를 어디에 위치시킬지 고민이 많아보입니다. 제 생각은 Setting의 path에 따라 맞춰주는게 좋을 것 같아요. 라운지/세팅 이면 라운지 안에 들어가고, 그냥 /세팅 이면 빼주는게 좋지 않을까 싶습니다..!

pakxe · 2025-01-21T03:37:35Z

client/src/pages/setting/SettingPage.type.ts

+
+export type Tab = {name: string; onClick: () => void};
+
+export interface TabContext {


엇 혹쉬.. 다른 이름은 어떨까요..! 저도 프로바이더를 찾고있었어욬ㅋㅋㅋ

soi-ha · 2025-01-21T06:48:51Z

쿠키랑 웨디가 남겨주신 코멘트를 보니 setting의 위치는 lounge와 별개로 두는 것이 더 좋을 것 같네요! lounge/setting은 아무래도 path가 조금 이상한 것 같다고 생각이 들더라구요! setting이라는 기능은 lounge와는 조금 별개인 것 같아서요!

다들 좋은 의견 감사합니당 :)

github-actions · 2025-01-21T06:48:53Z

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

github-actions · 2025-01-22T06:22:02Z

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

* feat: setting 페이지 생성 * feat: settingPage router 생성 및 연결 * chore: setting 페이지 생성에 따른 회원탈퇴 폴더 이동 및 router 변경 * feat: SettingSection 구현 및 Category 컴포넌트 구현 * feat: TabList 타입이 url이 아닌 다양한 onClick 이벤트를 실행할 수 있도록 카테고리 상수가 아닌 함수로 변경 및 tabList에 필요한 context를 넘겨주도록 구현 * feat: 앱 카테고리 생성 * refactor: TabList 타입의 이름을 Tab으로 변경 * design: 카테고리 사이의 line 생성 * refactor: 불필요한 백틱 사용 수정 * refactor: useTheme 대신에 COLORS 상수를 사용하고 VStack의 divider 활용하기 * refactor: 사용하지 않는 useTheme import 삭제 * refactor: TabContext의 이름 혼동을 줄이기 위해 TabActions로 이름 변경

soi-ha added 9 commits January 20, 2025 15:09

feat: setting 페이지 생성

2c3b272

feat: settingPage router 생성 및 연결

1bfb944

chore: setting 페이지 생성에 따른 회원탈퇴 폴더 이동 및 router 변경

0e766b6

feat: SettingSection 구현 및 Category 컴포넌트 구현

8d75b7e

feat: TabList 타입이 url이 아닌 다양한 onClick 이벤트를 실행할 수 있도록 카테고리 상수가 아닌 함수로 …

a169c02

…변경 및 tabList에 필요한 context를 넘겨주도록 구현

feat: 앱 카테고리 생성

746725e

refactor: TabList 타입의 이름을 Tab으로 변경

af45f31

design: 카테고리 사이의 line 생성

99d02fd

refactor: 불필요한 백틱 사용 수정

05fd535

soi-ha added 🖥️ FE Frontend ⚙️ feat feature labels Jan 20, 2025

soi-ha added this to the v3.1.4 milestone Jan 20, 2025

soi-ha requested review from pakxe, jinhokim98 and Todari January 20, 2025 08:35

soi-ha self-assigned this Jan 20, 2025

jinhokim98 approved these changes Jan 20, 2025

View reviewed changes

pakxe approved these changes Jan 21, 2025

View reviewed changes

soi-ha added 3 commits January 21, 2025 15:40

refactor: useTheme 대신에 COLORS 상수를 사용하고 VStack의 divider 활용하기

9b47317

refactor: 사용하지 않는 useTheme import 삭제

52db80a

refactor: TabContext의 이름 혼동을 줄이기 위해 TabActions로 이름 변경

d8aa91c

chore: fe-dev와의 merge 충돌 해결

b3cc39d

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

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

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] 설정 페이지 디자인 및 구현 #962

[FE] 설정 페이지 디자인 및 구현 #962

soi-ha commented Jan 20, 2025 •

edited

Loading

github-actions bot commented Jan 20, 2025

jinhokim98 left a comment

jinhokim98 Jan 20, 2025

jinhokim98 Jan 20, 2025

soi-ha Jan 21, 2025

jinhokim98 Jan 20, 2025

soi-ha Jan 21, 2025

jinhokim98 Jan 20, 2025

jinhokim98 Jan 20, 2025

pakxe Jan 21, 2025 •

edited

Loading

soi-ha Jan 21, 2025

pakxe left a comment

pakxe Jan 21, 2025 •

edited

Loading

soi-ha commented Jan 21, 2025

github-actions bot commented Jan 21, 2025

github-actions bot commented Jan 22, 2025


		export type Tab = {name: string; onClick: () => void};

		export interface TabContext {

[FE] 설정 페이지 디자인 및 구현 #962

[FE] 설정 페이지 디자인 및 구현 #962

Conversation

soi-ha commented Jan 20, 2025 • edited Loading

issue

구현 목적

구현 사항

디자인

구현

논의하고 싶은 부분(선택)

Setting의 위치

건의하고 싶은 부분(선택)

Stack import (@Todari)

VStack forwardRef warning (@Todari)

🫡 참고사항

fallback 폴더의 MyPageError, MyPageLoading 파일 이름 변경 (@jinhokim98 )

github-actions bot commented Jan 20, 2025

jinhokim98 left a comment

Choose a reason for hiding this comment

Setting의 위치

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

pakxe Jan 21, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pakxe left a comment

Choose a reason for hiding this comment

pakxe Jan 21, 2025 • edited Loading

Choose a reason for hiding this comment

soi-ha commented Jan 21, 2025

github-actions bot commented Jan 21, 2025

github-actions bot commented Jan 22, 2025

soi-ha commented Jan 20, 2025 •

edited

Loading

pakxe Jan 21, 2025 •

edited

Loading

pakxe Jan 21, 2025 •

edited

Loading