[오피셜팀] 프론트엔드 코드리뷰용 PR

[sunhwaaRj]

[오피셜팀] 팀피셜 프론트엔드 코드리뷰

✨ 리뷰를 요청드리는 주요 부분

가장 고민되는 지점을 아래 형식으로 정리했습니다.

• src/components/modal/apply/profile/ProfileCard.tsx
• src/app/(main)/recruit/_components/profile/ProfileCard.tsx
• src/app/(main)/mypage/profile/_components/ProfileCard.tsx
• src/app/(main)/mypage/_components/profile/ProfileCard.tsx
• src/app/(main)/recruit/_components/*

💬 오피셜팀이 고민하고 있는 부분

• 컴포넌트

  • 현재 profile 관련 컴포넌트들이 여러 페이지에서 사용되고 있습니다. 이 컴포넌트들이 UI는 유사하지만, props나 데이터 흐름이 조금씩 달라서 공통 컴포넌트로 묶기엔 애매하고, 그대로 두자니 유지보수가 어렵습니다. (ProfileCard.tsx 파일이 각 다른 폴더에 4개가 중복되어있습니다.)
  • src/app/(main)/project/[id]/_components/InfoCard.tsx && src/app/(main)/project/[id]/applicants/_components/InfoCard.tsx 두 컴포넌트는 UI가 동일하지만, 서버 응답 필드명이 달라 데이터 구조가 다릅니다. 통일 방법이 있을지 고민입니다.

• TipTap 에디터 관련

  • 에디터 관련 로직이 여러 컴포넌트로 분산되어 있는데, 어떤 기준으로 분리하는 게 좋을지 고민입니다. 또한 내부에서 상태 관리하는 현재 구조가 너무 과도한지, 더 단순하게 바꿀 수 있는지 궁금합니다.

• 구조

  • src/app/(main)/project/[id]/applicants/page.tsx 의 경로 depth 가 너무 깊어 파일트리 가독성이 떨어지는 것으로 느껴집니다. 현재 구조로 유지하는게 좋을지 기타 단위로 묶는 것이 좋을지 여쭤봅니다.
  • 현재까지는 UI 및 api 연결을 우선적으로 진행하였습니다. 추후 페이지 별 인증 관리, 로딩 및 에러처리까지 한번에 진행할 예정인데 이 관리를 어떻게 하면 좋을지 고민입니다. 페이지 별 인증의 경우 단순한 로그인 여부와 달리 글의 작성자 또는 참여자까지 접근할 수 있는 페이지 등 유형이 모두 달라 되도록이면 공통적으로 처리하고 싶지만 효율적으로 처리할 수 있는 좋은 방법이 있을까요?

💌 요청드리는 리뷰 방향

• profile 관련 컴포넌트들의 공통화 / 모듈화 설계 방향에 대한 피드백
• 아키텍처 및 설계 구조의 전반적 사항
• UI는 동일하지만 데이터 구조가 다른 경우(InfoCard 등) 어떤 패턴이 유지보수에 유리할지

구조/설계 관점에서의 개선 제안을 주시면 많은 도움이 될 것 같습니다.

바쁘신 와중에 시간 내어 리뷰해주셔서 감사합니다.
편하게 피드백 부탁드립니다! 🥹

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}