Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

라우터 구조 변경 (중첩 라우틱 적용, 레이아웃 믹스인 포함) #273

Open
wants to merge 4 commits into
base: 249-layout
Choose a base branch
from

Conversation

yyeonzu
Copy link
Contributor

@yyeonzu yyeonzu commented Jan 26, 2025

🔎 What is this PR?

✨ 설명

  • 레이아웃 믹스인 반영하여 아울렛 적용하였습니다.

  • 레이아웃과 아울렛이 밀접한 연관이 있는 것 같아 이슈넘버 레이아웃 믹스인 #249 를 그대로 사용했습니다. 머지 브랜치 역시 249-layout입니다.

  • 커밋 메세지 바디에 자세히 작성하려 했는데, 이를 잊어 설명에 작성합니다.

  • Layout jsx 컴포넌트 생성 696b0fb

    • 레이아웃 믹스인에 있던 2가지의 레이아웃은, jsx가 아니라서 react-router-dom의 레이아웃으로 적용할 수 없어 jsx 코드로 변경하였습니다.
    • 변경을 최소화하고 싶었는데, jsx가 반드시 필요해서 어쩔 수 없이 변경했습니다. 이에 따라 파일명 역시 변경하였습니다.
    • main 태그를 Layout의 내부에 두고, 그 이하에 Outlet을 두었습니다. 모든 페이지에서 main 태그를 사용할 필요가 없어진다는 장점이 있습니다.
    • 위의 사항을 변경해서인지, 혜린님의 의도대로 스타일이 나타나지 않는 것 같습니다. 혹 제가 잘못 작성한 게 있다면 확인 한 번 부탁드립니다.
  • 루트 레이아웃 생성 f02b00f

    • 라우터가 너무 복잡해지는 것 같아, 모든 경로에 포함된 컴포넌트를 루트 레이아웃으로 따로 만들었습니다. @rwaeng 파일 변경된 것만 확인 부탁드립니다~
  • 라우터 구조 변경 f9b1860

    • 최종으로 변경된 라우터 구조는 다음과 같습니다. 코드 리뷰를 거치면서 레이아웃 믹스인 및 Layout 컴포넌트도 달라질 것 같아서, 당장은 구조만 알아볼 수 있게 몇가지 경로만 변경해두었습니다.
      element: <RootLayout />,
      loader: checkAuthLoader,
      children: [
       {
         /* Button이 있는 경우 Layout */
         element: <BottomButtonLayout />,
         children: [
           {
             path: ROUTE_PATH.createServer,
             element: <CreateNewCommunityPage />,
           },
         ],
       },
       {
         /* 데이터가 없는 경우 Layout */
         element: <NoDataTextLayout />,
         children: [
           {
             path: ROUTE_PATH.libraryBookSearch,
             element: <SearchPage />,
           },
         ],
       },
       /* 이외의 경우 */
       {
         path: ROUTE_PATH.example,
         element: <RouterExamplePage />,
       },
       이하 생략
      
      
      

📷 스크린샷 (선택)

☑️ 테스트 체크리스트

💡 집중 리뷰 요청

  • 집중적으로 리뷰를 원하는 부분이 있다면 작성해 주세요.

@yyeonzu yyeonzu requested a review from hyerindev January 26, 2025 09:08
@yyeonzu yyeonzu self-assigned this Jan 26, 2025
@yyeonzu yyeonzu added refactor♻️ 코드를 개선 또는 단순 정리함. development🔨 기능 관련 labels Jan 26, 2025
@hyerindev hyerindev requested a review from rwaeng January 27, 2025 07:05
Copy link
Member

@hyerindev hyerindev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다 😊

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 jsx 수정 감사합니다.

Copy link
Member

@hyerindev hyerindev Jan 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❗ 아울렛이 헤더를 포함하기 때문에 main 태그의 자식 요소로 아울렛을 두면 스타일이 정상적으로 작동하지 않습니다. header 태그와 main 태그를 형제 요소로 상정하고 스타일 설계하였습니다. 또, 일부 페이지에서 main 태그를 직접적으로 이용하여 스타일을 제어하는 부분이 있어, main 태그를 여기서 관리하지 않고 각 페이지에서 관리하면 좋겠습니다. 정리하면, 레이아웃으로 아울렛을 감싼 형태로만 jsx를 구성하면 좋겠습니다.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ 아래 파일에 관한 변경사항은 이 PR에 최종적으로 포함되지 않는 게 맞을까요? 아래 파일 관련 변경사항을 삭제하는 커밋을 이 브랜치에 추가할 계획이 있으신가요?

  • src/apis/climbing.ts
  • src/components/channel/SearchBottomsheet.tsx
  • src/components/communityinfosetting/CommunityInfoSection.tsx
  • src/components/communityinfosetting/CommunitySettingSection.tsx
  • src/components/communitysidebar/CommunitySideBar.tsx
  • src/pages/addcommunity/CreateNewCommunityPage.tsx
  • src/pages/addcommunity/EnterInvitationPage.tsx
  • src/pages/book/RecordListPage.tsx
  • src/pages/book/ReviewListPage.tsx
  • src/pages/book/SearchPage.tsx
  • src/pages/communityinfosetting/CommunityInfoSettingPage.tsx

Copy link
Contributor

@rwaeng rwaeng left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 루트 레이아웃 파일 분리 확인했습니다~!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
development🔨 기능 관련 refactor♻️ 코드를 개선 또는 단순 정리함.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants