Feat: #308 프로젝트 상세 페이지 프로젝트 설정 수정 모달 추가

[Seok93]

PR Type

What kind of change does this PR introduce?

• [Feat] 새로운 기능을 추가했어요.

Related Issues

• close 프로젝트 상세 페이지에서 프로젝트 설정 변경 모달 기능 추가 #308

What does this PR do?

• 소속된 팀명 표시
• 프로젝트 상세 페이지: 프로젝트 수정 모달 추가

View

[coderabbitai]

변경사항 개요

Walkthrough

ProjectLayout 컴포넌트에 프로젝트 설정 변경 모달 기능이 추가되었습니다. 새로운 상태 관리 훅과 useReadTeamInfo를 통해 팀 정보를 가져오고, 프로젝트 ID 비교 방식을 숫자로 변경했습니다. 사용자 권한에 따른 모달 열기 로직과 팀 이름 표시 기능이 구현되었으며, 오류 처리도 개선되었습니다.

Changes

파일	변경 요약
src/layouts/page/ProjectLayout.tsx	- useReadTeamInfo, useStore 훅 추가 - 프로젝트 업데이트 모달 기능 구현 - 팀 정보 및 사용자 권한 확인 로직 추가 - 프로젝트 설정 변경 모달 조건부 렌더링

Assessment against linked issues

목표	해결 여부	설명
소속된 팀명 표시 [#308]	✅
프로젝트 상세 페이지: 프로젝트 수정 모달 추가 [#308]	✅

Suggested reviewers

• ice-bear98
• Yoonyesol

Poem

🐰 코드의 토끼, 모달을 춤추네
프로젝트 설정, 손쉽게 바꾸네
팀 이름 반짝, 권한의 빛
새로운 기능, 코드의 멋
개발의 즐거움, 여기 있네! 🚀

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/layouts/page/ProjectLayout.tsx (1)

48-48: 권한 확인 로직 통합 TODO
권한 체크를 한 곳에서 일괄 처리하는 훅을 계획해두신 점은 좋습니다. 반복되는 로직을 제거해 가독성과 유지보수성을 높일 수 있을 것으로 기대됩니다.

권한 관리 훅 구현과 관련되어 도움이 필요하시면 알려주세요.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2dc87d4 and 73fb00f.

📒 Files selected for processing (1)

• src/layouts/page/ProjectLayout.tsx (4 hunks)

🔇 Additional comments (8)

src/layouts/page/ProjectLayout.tsx (8)

4-15: 새로 추가된 의존성 임포트 확인
새롭게 추가된 모달과 훅(useStore, useToast, useReadTeamInfo 등)을 임포트하여 기능을 확장한 점이 좋습니다. 현재 구문의 문제는 없어 보이며, 코드 구조도 깔끔합니다.

---

20-27: 팀 정보 및 모달 상태 관리 로직
Number()를 통해 teamId를 숫자로 변환하여 API를 호출하는 로직이 명확합니다. useModal 훅으로 모달 상태를 잘 관리하고 있어 유지보수에 유리합니다.

---

30-35: useStore 및 사용자 권한 정보 가져오기
userInfo와 projectCoworkers 정보를 통해 사용자 역할을 찾는 로직이 적절하고, useMemo로 project를 캐싱하여 렌더링 최적화에 도움이 됩니다.

---

38-38: 에러 페이지로의 즉시 리다이렉션
팀 정보나 project가 없을 때 즉시 /error로 이동하는 방식은 명확합니다. 다만, 사용자에게 좀 더 세부적인 에러 메시지를 노출할 필요가 있을 수 있습니다.

---

49-54: 프로젝트 설정 수정 핸들러에서의 권한 체크
관리자 권한(ADMIN)이 아니면 수정 모달을 열 수 없도록 예외 처리를 한 점이 적절합니다. 예외 상황에 대한 경고도 사용자 친화적입니다.

---

59-59: ListSidebar에 팀명 표시
팀 정보를 사이드바에 표시함으로써 사용자 경험을 높이는 접근이 좋습니다. 충분히 직관적인 UI 강화를 기대할 수 있습니다.

---

69-75: 프로젝트 설정 버튼
Button 엘리먼트와 클릭 핸들러를 명확히 구분해서 접근성을 확보한 점이 좋습니다.

---

109-109: 프로젝트 수정 모달 렌더링
showProjectModal을 조건으로 UpdateModalProject를 띄우는 로직이 간결하며, projectId 전달이 명확해 가독성이 좋습니다.

[ice-bear98]

LGTM!