[FE] 홈 관리 네비게이션에 랜딩페이지로 이동하는 기능 추가 및 TopNav 구조 개선 #627

jinhokim98 · 2024-09-25T06:55:27Z

issue

close [FE] 홈 관리 네비게이션에 랜딩페이지로 이동하는 기능 추가 및 TopNav 구조 개선 #614

구현 사항

랜딩페이지로 돌아가는 기능 추가

사용자를 늘리기 위해 랜딩 페이지로 돌아가는 기능이 필요했고 흔듯콘을 이용해서 구현했습니다.

추후에 흔듯콘 크기를 조절해야합니다.

TopNav 구조 개선

개선 이유

기존의 TopNav는 Switch에 강하게 연결되어있습니다. Switch에 navigate를 하는 기능이 있고 Switch는 TextButton으로 되어있기 때문에 지금의 흔듯콘이 들어오는 상황에 대처를 할 수 없었습니다.

<TopNav>
  <Switch ~~~ />
</TopNav>

개선 방법

NavItem 컴포넌트를 만들어서 기존의 useNavSwitch에서 책임지던 route를 NavElement에 위임했습니다.

사용할 수 있는 props는 아래에 정리해뒀어요

설명	Required	type	비고
`displayName`	X	string	Nav에 보여줄 이름
`routePath`	O	string	Navigate하고 싶은 경로
`noEmphasis`	X	boolean	Nav의 현재 강조를 제거할 수 있음 (default false)
`onHandleRouteInFunnel`	X	callback	퍼널에서 라우팅 기능을 넘겨주기 위해 사용할 함수
`children`	x	ReactNode	Text 이외 다른 것을 (ex: image) nav로 이용하고 싶을 때 사용

기본적으로 displayName과 routePath를 prop으로 넘겨주면 TopNav에 홈과 관리가 보이게 되며 현재 선택된 탭이 강조되게 했습니다.

<TopNav>
  <TopNav.Item displayName="홈" routePath="/home" />
  <TopNav.Item displayName="관리" routePath="/admin" />
</TopNav>

그리고 텍스트가 아닌 다른 것을 Nav로 사용할 수도 있으므로 children을 받습니다. children을 받을 경우는 아래와 같이 사용합니다. 이 때는 보여질 텍스트가 없으므로 displayName을 option으로 설정했어요.

<TopNav.Item routePath="/">
    <Icon iconType="heundeut" />
</TopNav.Item>

추가로 퍼널에서 TopNav를 사용할 때는 실제 route를 사용하지 않고 moveToNextStep을 사용합니다.
그래서 이를 호환하기 위해서 onHandleRouteInFunnel를 넣었습니다. 사용법은 아래와 같아요

<TopNav>
  <TopNav.Item displayName="뒤로가기" noEmphasis routePath="" onHandleRouteInFunnel={moveToPrevStep} />
</TopNav>

그리고 뒤로가기의 경우 텍스트를 강조하지 않아요 그래서 noEmphasis 옵션을 주게 되면 텍스트가 강조되지 않습니다.

🫡 참고사항

components 디렉토리 내에 common이란 디렉토리가 있었는데 그 안에 logo 밖에 없어서 common 디렉토리를 지웠습니다.

github-actions · 2024-09-25T06:57:21Z

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

soi-ha

굳굳쓰 ~ 조하요

soi-ha · 2024-09-26T01:17:20Z

client/src/components/Design/components/TopNav/TopNav.tsx

+    <nav>
+      <ul css={topNavStyle}>{children}</ul>
+    </nav>


오 ~ 적절한 태그 사용

접근성 미션도 있다보니 챙겨봤습니다

soi-ha · 2024-09-26T01:17:37Z

client/src/pages/AccountPage/Account.tsx

@@ -25,7 +25,7 @@ const Account = () => {
  return (
    <MainLayout backgroundColor="white">
      <TopNav>
-        <Back />
+        <TopNav.Element displayName="뒤로가기" noEmphasis routePath="-1" />


깔꼼시롬

Todari

대 쿠 키....
너무 조와용 고생많았어요
앞으로 좀 더 확장적으로 nav를 사용할 수 있을 것 같아요

Todari · 2024-09-26T01:01:03Z

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

@@ -1,6 +1,6 @@
 import {TextSize} from '../Text/Text.type';

-export type TextColor = 'black' | 'gray';
+export type TextColor = 'black' | 'gray' | 'onTertiary';


대면으로 설명해 준 것 처럼 black과 onTertiary는 같은 컬러를 가르키는 시맨틱 토큰이에용
이부분에서는 text의 color들을 다루는 것이다 보니, onTertiary보단 black을 사용하는게 좋을 것 같아요
뭐 크게 문제는 없지만~ 추후에 일괄적인 컬러 적용에 차질이 있을 수 있으니
참고만 하고 넘어가면 좋을 것 같숩니당

Todari · 2024-09-26T01:13:14Z

client/src/components/Design/components/TopNav/NavElememt.style.ts

+export const navElementStyle = css({
+  padding: '0 0.5rem',
+
+  ':first-of-type': {


first-of-type은 어떤 역할을 하는 선택자인가요? 여러 element중 첫번째 친구에게만 적용되는건가요?

네 맞아요! 비슷한 것으로 :first-child가 있는데 emotion css에서 이 가상태그를 쓰면 콘솔 창에서 빨간색 경고가 나와요.

Todari · 2024-09-26T01:17:54Z

client/src/pages/EventPage/EventPageLayout.tsx

+      <Flex justifyContent="spaceBetween" alignItems="center" margin="0 1rem 0 0">
+        <TopNav>
+          <TopNav.Element routePath="/">
+            <IconButton variants="none">
+              <Icon iconType="heundeut" />
+            </IconButton>
+          </TopNav.Element>
+          <TopNav.Element displayName="홈" routePath="/home" />
+          <TopNav.Element displayName="관리" routePath="/admin" />
+        </TopNav>


정말 딱 생각했던대로 구현해버린 쿠키....
뉴런공유가 가능한건가...?

Todari · 2024-09-26T01:19:06Z

client/src/components/Design/components/TopNav/NavElement.type.ts

+};
+
+export type NavElementStyleProps = {
+  noEmphasis?: boolean;


noEmphasis 를 사용하는것보다, emphasis로 쓴다면 더 짧은 이름으로 사용할 수 있찌 않을까요?
boolean이면 true, false만 변경되는 것이니까~
그리고 boolean을 나타내기 위해 isEmphasized 와 같이 써도 좋을 것 같아용

강조가 되는 것이 기본이라고 생각했어요. 그래서 noEmphasis 옵션을 주면 강조를 해제한다는 의미입니다.
noEmphasis prop만 주게 되면 적용이 되기 때문에 isEmphasized={false} 보다 더 간편하다고 생각했습니다.

<TopNav.Element displayName="뒤로가기" noEmphasis routePath="-1" />

pakxe

아휴 기존 코드까지 바꾸느라 고생많았습니다.

pakxe · 2024-09-26T01:57:48Z

client/src/components/Design/components/TopNav/NavElement.tsx

+import {navElementStyle} from './NavElememt.style';
+import {NavElementProps} from './NavElement.type';
+
+const NavElement = ({displayName, routePath, onHandleRouteInFunnel, noEmphasis = false, children}: NavElementProps) => {


<TabNav/>와 <TabNav.Item/>은 어떨까요? 엘리먼트보다는 TabNab안의 list의 구성요소라는 느낌으로 아이템이 더 직관적으로 다가오지 않을까 싶어요! 그치만 제 생각이니까 쿠키가 적절하다 생각하는 대로 고고스~

오 아이템도 괜찮은 것 같아요! 더 이해하기 쉽겠다~
3078cea

pakxe · 2024-09-26T01:58:52Z

client/src/components/Design/components/TopNav/TopNav.tsx

+const TopNav = ({children}: TopNavProps) => {
+  return (
+    <nav>
+      <ul css={topNavStyle}>{children}</ul>


접근성을 고려한 것 좋네요👍 이거 낭독기가 아마 "n개아이템 중 몇번재 아이템입니다" 라고 읽어줬던 것 같던데 되게 좋더라구요

pakxe · 2024-09-26T01:59:50Z

client/src/pages/CreateEventPage/CreateEventFunnel.tsx

+        {step !== STEP_SEQUENCE[STEP_SEQUENCE.length - 1] && (
+          <TopNav.Element displayName="뒤로가기" noEmphasis routePath="" onHandleRouteInFunnel={handleBack} />
+        )}


TopNav를 다양한 곳에서 사용하고 있어서 어떤 값들을 props로 받을 지 고민을 많이 했을 것 같아요. 쿠키의 그런 고민 덕분에 편리하게 사용할 수 있게 되었네요! 👍

맞아요~ 이거 고민 좀 많이 했는데;;ㅋㅋ 더 편하게 사용할 수 있게 됐다니 다행입니다😊

github-actions · 2024-09-26T02:12:30Z

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

github-actions · 2024-09-26T06:19:57Z

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

jinhokim98 added 16 commits September 25, 2024 12:50

style: 불필요한 directory 구조 한 단계 제거 (Common)

1a55372

style: 행동디자인에서 Switch 바깥으로 분리

ac05922

refactor: TopNav 자유롭게 사용할 수 있도록 변경

0c91366

style: 디렉토리 구조 변하면서 생긴 import 수정

f091579

style: 사용하지 않는 import 문 제거

efc4bdf

design: TextButton color onTertiary 추가

a155ba1

remove: 사용하지 않게된 Switch 제거

649caa9

remove: 사용하지 않는 Back 컴포넌트 제거

0ffd992

feat: 흔듯콘 아이콘 추가

f060ff4

refactor: TopNav, NavElement를 사용해 navigate 책임 이동

5576597

refactor: 변경된 TopNav 적용

4d9479b

style: 콘솔 경고창 에러를 방지하기 위해 변경

a547e22

feat: noEmphasis prop 추가 (true일 때 강조되지 않음)

b81b0d3

design: 마진 맞춰줌

72be6eb

remove: navigate 기능이 들어오면서 스토리북에서 변경되는 것을 보여줄 수 없어서 스토리북에서 제거

8a690a9

style: emotion css를 위한 추가

f5b72fb

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

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

jinhokim98 requested review from pakxe, soi-ha and Todari September 25, 2024 06:55

jinhokim98 self-assigned this Sep 25, 2024

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

[FE] 홈 관리 네비게이션에 랜딩페이지로 이동하는 기능 추가 및 TopNav 구조 개선 #614

Closed

2 tasks

soi-ha approved these changes Sep 26, 2024

View reviewed changes

Todari approved these changes Sep 26, 2024

View reviewed changes

pakxe approved these changes Sep 26, 2024

View reviewed changes

style: NavElement -> NavItem으로 이름 변경

3078cea

soi-ha and others added 2 commits September 26, 2024 15:17

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

9408043

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

951773b

soi-ha merged commit d5126ea into fe-dev Sep 26, 2024
2 checks passed

soi-ha deleted the feature/#614 branch September 26, 2024 06:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] 홈 관리 네비게이션에 랜딩페이지로 이동하는 기능 추가 및 TopNav 구조 개선 #627

[FE] 홈 관리 네비게이션에 랜딩페이지로 이동하는 기능 추가 및 TopNav 구조 개선 #627

jinhokim98 commented Sep 25, 2024 •

edited

Loading

github-actions bot commented Sep 25, 2024

soi-ha left a comment

soi-ha Sep 26, 2024

jinhokim98 Sep 26, 2024

soi-ha Sep 26, 2024

Todari left a comment

Todari Sep 26, 2024

Todari Sep 26, 2024

jinhokim98 Sep 26, 2024

Todari Sep 26, 2024

Todari Sep 26, 2024

jinhokim98 Sep 26, 2024

pakxe left a comment

pakxe Sep 26, 2024

jinhokim98 Sep 26, 2024 •

edited

Loading

pakxe Sep 26, 2024

pakxe Sep 26, 2024

jinhokim98 Sep 26, 2024

github-actions bot commented Sep 26, 2024

github-actions bot commented Sep 26, 2024

[FE] 홈 관리 네비게이션에 랜딩페이지로 이동하는 기능 추가 및 TopNav 구조 개선 #627

[FE] 홈 관리 네비게이션에 랜딩페이지로 이동하는 기능 추가 및 TopNav 구조 개선 #627

Conversation

jinhokim98 commented Sep 25, 2024 • edited Loading

issue

구현 사항

랜딩페이지로 돌아가는 기능 추가

TopNav 구조 개선

개선 이유

개선 방법

🫡 참고사항

github-actions bot commented Sep 25, 2024

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

Todari 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

pakxe left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jinhokim98 Sep 26, 2024 • 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

github-actions bot commented Sep 26, 2024

github-actions bot commented Sep 26, 2024

jinhokim98 commented Sep 25, 2024 •

edited

Loading

jinhokim98 Sep 26, 2024 •

edited

Loading