[FE] feat: 좌측 상단에 경로를 표시하는 Breadcrumb 컴포넌트 구현 #372

soosoo22 · 2024-08-15T16:11:09Z

resolves [FE] 좌측 상단에 경로 표시 및 라우터 연결 공통 컴포넌트를 구현한다. #360

🚀 어떤 기능을 구현했나요 ?

사용자가 현재 위치를 쉽게 확인할 수 있도록 경로를 표시하는 Breadcrumb 컴포넌트를 구현했습니다.
각 경로를 클릭할 경우, 해당 페이지로 이동하는 기능도 추가했습니다.
현재 위치에 따라 경로를 반환하는 로직을 useBreadcrumbPaths 훅으로 분리했습니다.

🔥 어떻게 해결했나요 ?

paths prop을 통해 Breadcrumb 컴포넌트에 경로 정보를 전달하고, 각 경로를 클릭하면 페이지가 해당 경로로 이동할 수 있도록 useNavigate 훅을 사용해 라우터를 연결했습니다.

  const paths = [
    { pageName: '연결 페이지', path: '/' }, // TODO: 연결 페이지 경로 결정되면 변경
    { pageName: '목록 페이지', path: location.pathname },
  ];

path 타입을 string | number로 설정했지만 navigate 호출 시 오버로드 에러가 발생했습니다. 그래서 path가 number일 경우와 string일 경우를 명확히 구분하여 처리했습니다.

const Breadcrumb = ({ paths }: BreadcrumbProps) => {
  const navigate = useNavigate();

  const handleNavigation = (path: PathType) => {
    if (typeof path === 'number') {
      navigate(path);
    } else {
      navigate(path);
    }
  };

  return (
    <S.BreadcrumbList>
      {paths.map(({ pageName, path }, index) => (
        <S.BreadcrumbItem key={index} onClick={() => handleNavigation(path)}>
          {pageName}
        </S.BreadcrumbItem>
      ))}
    </S.BreadcrumbList>
  );
};

각 페이지별 경로를 상수 처리했습니다.

// src/constants/routes.ts

export const ROUTES = {
  home: '/',
  reviewList: 'user/review-list',
  reviewWriting: 'user/review-writing',
  reviewWritingComplete: 'user/review-writing-complete',
  detailedReview: 'user/detailed-review',
};

경로를 반환하는 로직을 useBreadcrumbPaths 훅으로 분리했습니다. 연결 페이지에서 시작해서 현재 위치에 맞는 경로를 추가합니다.

const useBreadcrumbPaths = () => {
  const { pathname } = useLocation();
  
  const breadcrumbPathList: Path[] = [
    { pageName: '연결 페이지', path: ROUTES.home }, // TODO: 연결 페이지 경로 결정되면 수정 필요
  ];
  // 목록 페이지
  if (pathname === `/${ROUTES.reviewList}`) {
    breadcrumbPathList.push({ pageName: '목록 페이지', path: pathname });
  }
  // 작성 페이지
  if (pathname.includes(`/${ROUTES.reviewWriting}/`)) {
    breadcrumbPathList.push({ pageName: '작성 페이지', path: pathname });
  }
  // 작성 완료 페이지
  if (pathname === `/${ROUTES.reviewWritingComplete}`) {
    breadcrumbPathList.push({ pageName: '작성 페이지', path: -1 }, { pageName: '작성 완료 페이지', path: pathname });
  }
  // 상세 페이지
  if (pathname.includes(ROUTES.detailedReview)) {
    breadcrumbPathList.push(
      { pageName: '목록 페이지', path: ROUTES.reviewList },
      { pageName: '상세 페이지', path: pathname },
    );
  }

  return breadcrumbPathList;
};

src/index.tsx에도 routes.ts에서 정의한 상수를 적용했습니다.

const router = createBrowserRouter([
  {
    path: ROUTES.home,
    element: <App />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: '',
        element: <LandingPage />,
      },
      {
        path: 'user',
        element: <div>user</div>,
      },
      { path: `${ROUTES.reviewWriting}/:reviewRequestCode`, element: <ReviewWritingCardFormPage /> },
      { path: ROUTES.reviewWritingComplete, element: <ReviewWritingCompletePage /> },
      {
        path: ROUTES.reviewList,
        element: <ReviewListPage />,
      },
      {
        path: `${ROUTES.detailedReview}/:reviewId`,
        element: <DetailedReviewPage />,
      },
    ],
  },
]);

📝 어떤 부분에 집중해서 리뷰해야 할까요?

📚 참고 자료, 할 말

리뷰미 짱!

…' into fe/feat/360-path-indicator-router

ImxYJL

소소하게 코멘트 남겼어요~~
새 컴포넌트 만드느라 고생했어용

ImxYJL · 2024-08-16T00:42:14Z

frontend/src/hooks/useBreadcrumbPaths.ts

+const useBreadcrumbPaths = () => {
+  const location = useLocation();
+
+  const breadcrumbPaths = [


배열은 -List로 만들어주세용

ImxYJL · 2024-08-16T00:46:16Z

frontend/src/hooks/useBreadcrumbPaths.ts

+    { pageName: '연결 페이지', path: '/' }, // TODO: 연결 페이지 경로 결정되면 수정 필요
+  ];
+
+  if (location.pathname === '/user/review-list') {


여기서 경로를 별도로 상수화하지 않은 이유가 있을까요??
아직 정식 경로 상수 파일이 없어서 그런가용

이제 슬슬 경로를 상수로 뺄지 논의해봐야겠네요

상수 처리를.. 안 했군요!🥹

각 페이지별 경로를 상수 처리했습니다:)

// src/constants/routes.ts export const ROUTES = { home: '/', reviewList: 'user/review-list', reviewWriting: 'user/review-writing', reviewWritingComplete: 'user/review-writing-complete', detailedReview: 'user/detailed-review', };

ImxYJL · 2024-08-16T00:53:57Z

frontend/src/hooks/useBreadcrumbPaths.ts

+    breadcrumbPaths.push({ pageName: '작성 페이지', path: location.pathname });
+  }
+
+  if (location.pathname.includes('/user/detailed-review/')) {


저라면 상세 리뷰 페이지만 별도의 includes를 사용해 검사하기보다는 if문이 중첩되더라도 직관적으로 목록 페이지에서 후속 경로가 있냐 없냐를 검사할 것 같아요.
이건 개인 취향이기도 하니 꼭 반영하지 않아도 됩니다~~

BadaHertz52 · 2024-08-16T04:27:53Z

frontend/src/hooks/useBreadcrumbPaths.ts

+  const location = useLocation();
+
+  const breadcrumbPaths = [
+    { pageName: '연결 페이지', path: '/' }, // TODO: 연결 페이지 경로 결정되면 수정 필요


breadcrumbPaths에 연결페이지가 기본으로 들어가있네요.

지금은 변경할 필요 없지만, 나중에 페이지가 더 생기는 경우에 breadcrumPaths 빈 배열로 둘지 한번 생각해봐야겠어요.

일단은 연결 페이지에서 시작하니까 연결 페이지를 기본으로 넣어줬어요. 추후에 변경될 수 있으니 이 부분은 생각을 해보도록 하겠습니다

BadaHertz52

Breadcrumb 이라는 좋은 명칭을 사용했네!!!

쑤쑤 고생했어~

chysis

쑤쑤~ 고생했어요
컨벤션 관련해서 수정할 부분이 있어서 Approve는 잠시 후에 하겠습니다!🔥🔥

chysis · 2024-08-16T08:12:51Z

frontend/src/components/common/Breadcrumb/index.tsx

+  const handleNavigation = (path: PathType) => {
+    if (typeof path === 'number') {
+      navigate(path);
+    } else {
+      navigate(path);
+    }
+  };


number, string 유연한 대처 좋아요

chysis · 2024-08-16T08:13:45Z

frontend/src/constants/routes.ts

+export const ROUTES = {
+  home: '/',
+  review_list: 'user/review-list',
+  review_writing: 'user/review-writing',
+  review_writing_complete: 'user/review-writing-complete',
+  detailed_review: 'user/detailed-review',
+};


컨벤션에 맞게 camelCase로 수정해주세요!

예리하십니다!!!

export const ROUTES = { home: '/', reviewList: 'user/review-list', reviewWriting: 'user/review-writing', reviewWritingComplete: 'user/review-writing-complete', detailedReview: 'user/detailed-review', };

chysis · 2024-08-16T08:14:47Z

frontend/src/styles/globalStyles.ts

@@ -10,7 +10,7 @@ const globalStyles = css`
  }

  body {
-    font-family: 'Pretendard-Regular', 'NanumGothic', 'Noto Sans', sans-serif;
+    font-family: 'Pretendard-Regular', 'Noto Sans', sans-serif;


이 부분도 폰트 관련 pr 머지 이후 regular를 지워야 할 것 같아요.

chysis

수정 사항 확인했어요!👍

soosoo22 added 9 commits August 15, 2024 16:22

fix: Pretendard 폰트가 정상적으로 적용되도록 나눔고딕 제거

84c6988

Merge remote-tracking branch 'origin/fe/fix/359-pretendard-font-issue…

be11f4a

…' into fe/feat/360-path-indicator-router

chore: 오른쪽 화살표 이미지 추가

8c24258

feat: 경로 표시를 위한 Breadcrumb 컴포넌트 구현

8adbcad

refactor: rightArrow 이미지를 '/'로 변경

57df970

feat: 리뷰 목록 페이지에 Breadcrumb 컴포넌트 추가

d8b27ee

style: css 속성 순서 변경

a44e1c9

refactor: 경로 반환 로직을 useBreadcrumbPaths 훅으로 분리

0377728

refactor: Breadcrumb 컴포넌트 렌더링을 App.tsx로 이동

b9d75d0

soosoo22 added 🍀 FE 🚀 기능 labels Aug 15, 2024

soosoo22 added this to the 4차 스프린트: 최종 milestone Aug 15, 2024

soosoo22 requested review from chysis, BadaHertz52 and ImxYJL August 15, 2024 16:11

soosoo22 self-assigned this Aug 15, 2024

soosoo22 linked an issue Aug 15, 2024 that may be closed by this pull request

[FE] 좌측 상단에 경로 표시 및 라우터 연결 공통 컴포넌트를 구현한다. #360

Closed

2 tasks

ImxYJL approved these changes Aug 16, 2024

View reviewed changes

BadaHertz52 reviewed Aug 16, 2024

View reviewed changes

BadaHertz52 approved these changes Aug 16, 2024

View reviewed changes

soosoo22 added 6 commits August 16, 2024 16:09

feat: 작성 완료 페이지 경로 추가

755d10f

refactor: path가 number, string일 경우를 명확히 구분하여 처리

9b2d51e

chore: 코드 컨벤션에 맞춰 배열 이름을 List로 변경

6725cad

refactor: 각 페이지별 경로 상수 처리

b9d9508

refactor: 객체 키를 모두 소문자로 변경

4a53136

refactor: 경로 상수를 src/index.tsx에도 적용

185895a

chysis requested changes Aug 16, 2024

View reviewed changes

refactor: 카멜 케이스로 변경 후 적용

2f76ce9

chysis approved these changes Aug 16, 2024

View reviewed changes

soosoo22 merged commit 7cda545 into develop Aug 16, 2024
3 checks passed

soosoo22 added the 🛠️ 리팩터링 label Aug 16, 2024

donghoony deleted the fe/feat/360-path-indicator-router branch September 26, 2024 02:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] feat: 좌측 상단에 경로를 표시하는 Breadcrumb 컴포넌트 구현 #372

[FE] feat: 좌측 상단에 경로를 표시하는 Breadcrumb 컴포넌트 구현 #372

soosoo22 commented Aug 15, 2024 •

edited

Loading

ImxYJL left a comment

ImxYJL Aug 16, 2024

ImxYJL Aug 16, 2024

BadaHertz52 Aug 16, 2024

soosoo22 Aug 16, 2024 •

edited

Loading

ImxYJL Aug 16, 2024

BadaHertz52 Aug 16, 2024

soosoo22 Aug 16, 2024

BadaHertz52 left a comment •

edited

Loading

chysis left a comment

chysis Aug 16, 2024

chysis Aug 16, 2024

soosoo22 Aug 16, 2024

chysis Aug 16, 2024

chysis left a comment

[FE] feat: 좌측 상단에 경로를 표시하는 Breadcrumb 컴포넌트 구현 #372

[FE] feat: 좌측 상단에 경로를 표시하는 Breadcrumb 컴포넌트 구현 #372

Conversation

soosoo22 commented Aug 15, 2024 • edited Loading

🚀 어떤 기능을 구현했나요 ?

🔥 어떻게 해결했나요 ?

📝 어떤 부분에 집중해서 리뷰해야 할까요?

📚 참고 자료, 할 말

ImxYJL 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

soosoo22 Aug 16, 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

BadaHertz52 left a comment • edited Loading

Choose a reason for hiding this comment

chysis 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

chysis left a comment

Choose a reason for hiding this comment

soosoo22 commented Aug 15, 2024 •

edited

Loading

soosoo22 Aug 16, 2024 •

edited

Loading

BadaHertz52 left a comment •

edited

Loading