✨ Feat: 대시보드 수정 페이지 기초 UI 작업 #75
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ay-FE/coplan into feature/dashboard_modify-UI
## Walkthrough
여러 개의 새로운 대시보드 편집 관련 컴포넌트가 추가되고, 기존 편집 페이지가 이들 컴포넌트를 활용하도록 리팩토링되었습니다. 공통 색상 상수와 목업 멤버 데이터가 도입되었으며, 타입 정의 및 CSS 유틸리티 클래스가 보완되었습니다. 경로 alias도 확장되었습니다.
## Changes
| 파일/경로 요약 | 변경 내용 요약 |
|--------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
| src/app/dashboard/[id]/edit/components/EditInfo.tsx<br>src/app/dashboard/[id]/edit/components/EditInvitation.tsx<br>src/app/dashboard/[id]/edit/components/EditMember.tsx | 대시보드 정보, 초대, 멤버 편집용 단순 React 컴포넌트 3종 신규 추가 |
| src/app/dashboard/[id]/edit/page.tsx | 편집 페이지 레이아웃 및 UI 전면 리팩토링, 신규 컴포넌트 3종 적용, 버튼 및 토스트 메시지 변경 |
| src/app/features/dashboard/components/edit/EditInfo.tsx | 대시보드 생성/편집 폼 기능 컴포넌트 신규 추가, 색상 선택 및 API 연동 포함 |
| src/app/features/dashboard/components/edit/EditInvitation.tsx | 초대 내역 및 초대 버튼, 멤버 리스트 표시 컴포넌트 신규 추가 |
| src/app/features/dashboard/components/edit/EditMember.tsx | 멤버 리스트와 삭제 버튼 표시 컴포넌트 신규 추가 |
| src/app/features/dashboard/components/edit/mockMember.js | 목업 멤버 데이터 배열(mockMembers) 신규 추가 |
| src/app/globals.css | `.Text-btn` 텍스트 색상 유틸리티 클래스 신규 추가 |
| src/app/shared/components/common/UserInfo.tsx | UserInfoProps의 imageUrl 타입을 string → string \| null로 변경 |
| src/app/shared/components/common/header/Header.tsx | 헤더 UI 일부 스타일 및 마크업 개선, 불필요한 구분자 제거, border 스타일 변경 |
| src/app/shared/components/common/sidebar/modal/CreateDashboardModal.tsx | 상수 및 타입 import 경로 alias로 변경, 색상 상수 외부화, 코드 정렬 개선 |
| src/app/shared/constants/colors.ts | 대시보드 색상 상수(DASHBOARD_COLORS) 배열 신규 추가 |
| tsconfig.json | @/types/*, @constants/*, @dashboard/* 등 경로 alias 신규 추가 |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant User
participant EditPage
participant EditInfo
participant EditMember
participant EditInvitation
User->>EditPage: 대시보드 편집 페이지 접속
EditPage->>EditInfo: 정보 편집 컴포넌트 렌더링
EditPage->>EditMember: 멤버 편집 컴포넌트 렌더링
EditPage->>EditInvitation: 초대 편집 컴포넌트 렌더링
User->>EditInfo: 대시보드 정보 입력 및 저장
User->>EditMember: 멤버 관리(삭제 등)
User->>EditInvitation: 초대 관리(취소 등)Possibly related PRs
Suggested labels
Suggested reviewers
Poem
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (5)
src/app/shared/constants/colors.ts (1)
3-9: 대시보드 컬러 팔레트 상수 정의
중앙 집중형 색상 상수로 일관된 테마 적용이 용이해졌습니다.DASHBOARD_COLORS를as const로 지정하여 변경 불가능한 배열로 만드는 방안을 고려해볼 수 있습니다.src/app/features/dashboard/components/edit/mockMember.js (1)
16-19: 불필요한 공백 제거
'나연 '닉네임 문자열 끝에 공백이 포함돼 있습니다. 검색·정렬 시 예상치 못한 버그를 유발할 수 있으니 제거해주세요.- nickname: '나연 ', + nickname: '나연',tsconfig.json (1)
29-32: paths 우선순위에 따른 의도치 않은 매핑 가능성
"@/*": ["./src/*"]규칙이 가장 먼저 매칭됩니다.
추가하신"@/types/*"패턴이"@/*"보다 뒤에 위치해도 TypeScript는 더 구체적인 패턴을 우선 적용하므로 실질적 문제는 없지만, 가독성을 위해 일반적으로 generic 패턴은 가장 마지막에 두는 것을 권장합니다.src/app/shared/components/common/sidebar/modal/CreateDashboardModal.tsx (1)
48-51: 엔드포인트 문자열 하드코딩 최소화다른 모달/페이지에서도 동일한 경로를 사용할 경우를 대비해 API 엔드포인트를 상수화해 두면 유지보수성이 올라갑니다.
- const response = await api.post( - `/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards`, - formData, - ) + const DASHBOARD_PATH = `/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards` + const response = await api.post(DASHBOARD_PATH, formData)src/app/shared/components/common/header/Header.tsx (1)
46-47: 버튼 테두리 클래스 제거로 UI 일관성 영향 점검
border클래스를 제거하면서도Border-btn유틸리티가 그대로 남아 있어 실질적으로 시각적 변화가 없을 수도 있습니다. 의도된 스타일 변경인지, 혹은 중복 정의인지 다시 확인해 주세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
public/images/back.pngis excluded by!**/*.pngpublic/images/invitation-white.pngis excluded by!**/*.pngpublic/images/next.pngis excluded by!**/*.pngpublic/images/prev.pngis excluded by!**/*.png
📒 Files selected for processing (14)
src/app/dashboard/[id]/edit/components/EditInfo.tsx(1 hunks)src/app/dashboard/[id]/edit/components/EditInvitation.tsx(1 hunks)src/app/dashboard/[id]/edit/components/EditMember.tsx(1 hunks)src/app/dashboard/[id]/edit/page.tsx(1 hunks)src/app/features/dashboard/components/edit/EditInfo.tsx(1 hunks)src/app/features/dashboard/components/edit/EditInvitation.tsx(1 hunks)src/app/features/dashboard/components/edit/EditMember.tsx(1 hunks)src/app/features/dashboard/components/edit/mockMember.js(1 hunks)src/app/globals.css(1 hunks)src/app/shared/components/common/UserInfo.tsx(1 hunks)src/app/shared/components/common/header/Header.tsx(4 hunks)src/app/shared/components/common/sidebar/modal/CreateDashboardModal.tsx(2 hunks)src/app/shared/constants/colors.ts(1 hunks)tsconfig.json(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (4)
src/app/shared/components/common/header/Header.tsx (1)
src/app/shared/components/common/header/Collaborator/CollaboratorList.tsx (1)
CollaboratorList(25-61)
src/app/dashboard/[id]/edit/page.tsx (1)
src/app/shared/lib/toast.ts (2)
showSuccess(3-3)showError(4-4)
src/app/features/dashboard/components/edit/EditMember.tsx (1)
src/app/shared/components/common/UserInfo.tsx (1)
UserInfo(11-18)
src/app/features/dashboard/components/edit/EditInfo.tsx (2)
src/app/shared/types/dashboard.ts (1)
CreateDashboardRequest(31-34)src/app/shared/constants/colors.ts (1)
DASHBOARD_COLORS(3-9)
🔇 Additional comments (20)
src/app/globals.css (1)
43-45: 유틸리티 클래스.Text-btn추가
Light/Dark 테마에 맞춘 텍스트 버튼 컬러가 일관성 있게 정의되었습니다.src/app/dashboard/[id]/edit/components/EditInfo.tsx (1)
1-3: EditInfo 컴포넌트 기본 구현 확인
대시보드 수정 페이지의 placeholder 컴포넌트가 간결하고 명확하게 작성되었습니다.src/app/dashboard/[id]/edit/components/EditInvitation.tsx (1)
1-3: EditInvitation 컴포넌트 기본 구현 확인
대시보드 초대 수정 페이지의 placeholder 컴포넌트가 간결하고 명확하게 작성되었습니다.src/app/shared/components/common/UserInfo.tsx (1)
5-8:imageUrl타입 변경에 따른 Avatar 처리 검증 요청
imageUrl?: string | null로 변경되어 null이 전달될 수 있습니다. Avatar 컴포넌트가 null 값을 안전하게 처리하는지 확인이 필요합니다.src/app/dashboard/[id]/edit/components/EditMember.tsx (1)
1-3: 중복 컴포넌트 존재 여부 확인 필요동일한 이름(
EditMember)의 실질 구현이src/app/features/dashboard/components/edit/EditMember.tsx에도 존재합니다.
폴더 구조상 Next 13/14의app라우터 우선순위와 alias(@dashboard/*) 해석이 겹치면 어떤 컴포넌트가 빌드에 포함될지 불명확할 수 있습니다. 실제 사용처를 점검하고 placeholder 컴포넌트를 제거하거나 파일명을 변경하는 편이 안전합니다.src/app/shared/components/common/sidebar/modal/CreateDashboardModal.tsx (1)
3-5: alias 변경으로 ESLint 경로 오류가 발생하지 않는지 확인절대 경로 alias로 수정하면서 ESLint import/resolver 설정이 같이 업데이트됐는지 확인이 필요합니다. 설정이 누락되면
import/no-unresolved경고가 발생할 수 있습니다.src/app/dashboard/[id]/edit/page.tsx (3)
10-16: 불필요한 핸들러 및 토스트 유틸리티가 그대로 남아 있습니다
handleSuccess,handleError, 그리고 그에 대응하는showSuccess,showError는 정의되었지만 실제 JSX 트리에 바인딩되지 않고 있습니다. 사용 계획이 없다면 제거하거나, 추후 기능(예: 저장/삭제 완료 알림)에 연결해 주세요. 미사용 코드가 남으면 ESLint 경고가 발생하고 유지보수성이 저하됩니다.
[ suggest_essential_refactor ]
20-26: 브라우저 API 직접 호출 대신 Next.js router 사용 권장
window.history.back()대신const router = useRouter(); router.back();을 사용하면 SSR 환경에서 타입 안정성과 테스트 용이성이 향상됩니다.-import Image from 'next/image' +import Image from 'next/image' +import { useRouter } from 'next/navigation' ... - <div - className="flex cursor-pointer items-center gap-12 p-16" - onClick={() => window.history.back()} - > + const router = useRouter() + <div + className="flex cursor-pointer items-center gap-12 p-16" + onClick={() => router.back()} + >[ suggest_optional_refactor ]
32-34: 삭제 버튼이 동작하지 않습니다
‘대시보드 삭제하기’ 버튼에onClick핸들러(또는form내type="submit"동작)가 없어 UI 만 존재합니다.
- 실제 삭제 로직이 미구현된 ‘임시 버튼’이라면 TODO 주석을 추가해 의도를 명확히 하세요.
- 구현할 계획이라면 API 호출 후 리다이렉트, 오류 처리, 토스트 노출 등을 연결하시기 바랍니다.
또한 form 밖에 위치하므로 예상치 못한 submit 동작을 방지하려면type="button"명시가 필요합니다.
[ request_verification ]src/app/features/dashboard/components/edit/EditInvitation.tsx (4)
1-6: 경로 alias 사용이 파일마다 불일치합니다
본 파일은@components/common/UserInfo를, 다른 컴포넌트(EditMember.tsx)는@/app/shared/components/common/UserInfo를 사용합니다. alias 전략을 통일하지 않으면 추후 경로 변경 시 일부 파일만 깨질 위험이 있습니다. 한 가지 방식으로 통일해 주세요.
[ suggest_essential_refactor ]
21-23: 이미지 경로 뒤 공백으로 404 위험
src="/images/next.png "처럼 파일명 뒤에 공백이 포함되어 있습니다. S3 · CDN · Vercel 배포 시 공백은 다른 경로로 인코딩되어 404를 유발할 수 있으니 제거해주세요.-<Image src="/images/next.png " alt="다음" width={36} height={36} /> +<Image src="/images/next.png" alt="다음" width={36} height={36} />[ raise_critical_issue ]
47-57: 중복 key 전달 및 index 사용 주의
이미 부모div에key={index}를 전달했는데, 자식<UserInfo>에도 동일한key를 또 전달하고 있습니다. 중복 key는 불필요하며 React devtools에서 경고를 유발할 수 있습니다. 또한 리스트 순서가 변할 가능성이 있다면indexkey는 재렌더 성능 문제가 생길 수 있으므로 고유 id 사용을 고려하세요.
[ suggest_optional_refactor ]
42-64:<form>요소를 단순 레이아웃 컨테이너로 사용 중
해당form은 실제 submit 이벤트나 입력 필드가 없으므로 시맨틱 관점에서 부적절합니다.
- 단순 레이아웃이면
div로 교체- 추후 ‘초대 취소’ 일괄 submit 기능이 필요하다면 버튼 type·submit 핸들러 추가
[ request_verification ]src/app/features/dashboard/components/edit/EditMember.tsx (3)
4-4: UserInfo 경로 alias 불일치
EditInvitation.tsx와 동일하게 alias를 통일하세요.
[ suggest_optional_refactor ]
18-20: 이미지 경로 뒤 공백 오류 반복
next.png뒤 공백을 삭제하세요. 동일 패턴이 여러 곳에서 발견됩니다.
[ duplicate_comment ]
28-37: index key 사용 및 중복 key 전달
EditInvitation.tsx와 동일한 문제입니다. 고유 id (예: member.id)로 key를 대체하고, 자식 컴포넌트에는 key를 중복 전달하지 마세요.
[ duplicate_comment ]src/app/features/dashboard/components/edit/EditInfo.tsx (4)
3-4:useEffect미사용 import
useEffect를 import했으나 코드에서 사용하지 않습니다. 제거해 주세요.
[ suggest_nitpick ]
30-55: ‘대시보드 편집’ 페이지에서 POST / 생성 로직 사용
현재 컴포넌트 이름이EditInfo이고 편집 페이지에서 사용되지만, 실제 API 호출은 새 대시보드를 생성(POST)합니다.
- 편집(use PUT/PATCH
/dashboards/:id)과 생성 로직을 분리하거나- props로 모드를 받아 조건부로 호출 메서드를 분기시키는 것이 명확합니다.
사용자 경험 관점에서도 버튼 텍스트 ‘변경’과 헤더 ‘새로운 대시보드’가 상충하므로 문구를 일관성 있게 조정해 주세요.
[ suggest_essential_refactor ]
62-64: 헤더 문구가 기능과 일치하지 않습니다
<h2>새로운 대시보드</h2>는 생성 폼에 어울리는 문구입니다. 편집 페이지라면 ‘대시보드 정보 수정’ 등으로 변경하는 것이 적절합니다.
[ suggest_nitpick ]
91-103: 체크 아이콘 컨테이너에 flex 누락
선택된 색상 표시div에items-center justify-center클래스가 있으나flex가 없어서 정렬이 적용되지 않습니다.-<div className="relative size-24 items-center justify-center"> +<div className="relative flex size-24 items-center justify-center">[ suggest_optional_refactor ]
Insung-Jo
approved these changes
Jun 18, 2025
| <div className="BG-gray"> | ||
| <div | ||
| className="flex cursor-pointer items-center gap-12 p-16" | ||
| onClick={() => window.history.back()} |
There was a problem hiding this comment.
widow.history.back()은 Next에 useRouter에서 동일하게 back() 이라는 함수가 존재합니다! 동작은 동일하지만 일관성을 위해서 해당 함수를 사용하는 게 좋을 거 같습니다! 공식 문서
import { useRouter } from 'next/navigation'
export default function Page() {
const router = useRouter()
return (
<button type="button" onClick={() => router.back()}>
Click here to go back
</button>
)
}
This was referenced Jun 19, 2025
Merged
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📌 변경 사항 개요
대시보드 수정 페이지 기초 UI 작업
✨ 요약
대시보드 수정 페이지 기초 UI 작업
📝 상세 내용
🎨style:
✨feat:
🔧chore:
🫧modify:
🔗 관련 이슈
🖼️ 스크린샷
20250618_153327.mp4
✅ 체크리스트
💡 참고 사항
EditInfo.tsx)의 경우 찬호 님의 모달과 유사하여 참고하여 필요한 부분만 사용하였습니다(이 부분은 추후 공용으로 빼면 간결하고 재사용성이 향상될 것 같습니다.)Summary by CodeRabbit