[Feat] 후기 페이지 ui 구현#24
Open
KyeongJooni wants to merge 19 commits into
Open
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughReact Router Framework Mode SPA 전환과 라우트·오류 화면을 구성하고, 후기 관리 UI 및 E2E 테스트를 추가했습니다. 프로젝트 에이전트 지침, API reference, 라우팅 결정 문서와 자동화 라벨 형식도 갱신했습니다. Changes프로젝트 지침과 계약
React Router SPA와 오류 경계
후기 관리 UI
자동화 라벨 포맷
Possibly related PRs
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
CI 결과
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 14
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.claude/agents/api-contract-reviewer.md:
- Line 7: Markdownlint MD041을 해소하도록 frontmatter 뒤에 top-level heading을 추가하세요.
.claude/agents/api-contract-reviewer.md 7-7에는 API 계약 리뷰어 heading,
.claude/agents/debugger.md 7-7에는 디버거 heading, .claude/agents/e2e-planner.md
7-7에는 E2E 테스트 전략 담당 heading, .claude/agents/reviewer.md 7-7에는 코드 리뷰어 heading을 각각
추가하세요.
In @.claude/agents/route-reviewer.md:
- Line 4: 읽기 전용 에이전트의 도구 권한에서 Bash를 제거하거나 제한된 검증 전용 권한으로 교체하세요.
.claude/agents/route-reviewer.md 4-4의 tools 설정과
.claude/agents/ui-accessibility-reviewer.md 4-4의 tools 설정을 모두 수정해 파일 변경 및 임의
스크립트 실행이 불가능하도록 하세요.
In @.claude/agents/verifier.md:
- Around line 11-13: Update the verification steps in verifier.md so git status
and git diff are explicitly allowed as read-only exceptions to the command
restriction. Clarify that tests, lint, typecheck, and build commands must be run
only through pnpm, keeping the existing verification guidance and ordering
intact.
In @.claude/decisions/records/005-auth-route-layout-convention.md:
- Line 9: 문서의 라우트 진입 파일 경로 설명을 실제 구조에 맞게 수정하세요. `src/app/routes/(group)/*.tsx`를
`src/routes/(group)/*.tsx`로 변경하고, 나머지 라우트 컨벤션 설명은 유지하세요.
In @.claude/rules/architecture.md:
- Line 26: 현재 구현을 유지하면서 route-local redirect를 명시적 예외로 문서화하세요.
`.claude/rules/architecture.md` 26번 줄에서는 `src/routes/(main)/index.tsx`의 redirect
컴포넌트처럼 예외적으로 직접 구현할 수 있음을 추가하고,
`.claude/decisions/records/005-auth-route-layout-convention.md` 14번 줄에서는
`index.tsx`가 항상 thin re-export라는 설명을 해당 예외를 반영하도록 수정하세요.
In `@e2e/reviews.spec.ts`:
- Around line 13-33: Extend the review E2E coverage in the existing review tests
to exercise deletion: create or target a known review row, click its row-level
삭제 button, and assert that the deleted row or corresponding total count is no
longer present. Keep the existing registration scenario intact and use the
established review page locators and dialog flow.
In `@src/components/common/ErrorFallback/ErrorFallback.test.tsx`:
- Around line 18-21: Update the test case “description이 없으면 렌더링하지 않는다” to assert
that the description content is absent rather than counting paragraph elements.
Use the rendered output from ErrorFallback and verify the expected description
text is not present, without coupling the test to the p tag or other HTML
structure.
In `@src/components/common/ErrorFallback/ErrorFallback.tsx`:
- Line 14: ErrorFallback의 title 렌더링 요소를 p에서 h1으로 변경해 페이지 제목이 heading으로 노출되도록
하세요. 해당 컴포넌트를 검증하는 테스트도 텍스트 조회가 아닌 heading role과 적절한 level을 확인하도록 갱신하세요.
In `@src/pages/errors/GlobalErrorPage.test.tsx`:
- Around line 15-30: Update the tests around the route-response and
generic-error cases to assert the full displayed messages, including “Not Found”
for the 404 response and “잠시 후 다시 시도해주세요.” for a standard Error. Add a separate
route-error test with an empty statusText and verify the UI uses its fallback
error description.
In `@src/pages/errors/GlobalErrorPage.tsx`:
- Line 4: 페이지 컴포넌트의 named/default export 계약을 통일하세요.
src/pages/errors/GlobalErrorPage.tsx의 GlobalErrorPage named export는 유지하고 기본
export를 추가하세요. src/pages/errors/NotFoundPage.tsx에서는 NotFoundPage를 named function
export로 변경한 뒤 기본 export도 추가하세요.
- Line 16: Update the description expression in GlobalErrorPage so
error.statusText is used only when it is non-empty; otherwise preserve the
existing “잠시 후 다시 시도해주세요.” fallback for known route errors and other errors.
In `@src/pages/reviews/ReviewsPage.tsx`:
- Around line 31-32: Clamp the current page to the calculated totalPages after
rows change or deletion so it never exceeds the available page range. Update the
pagination state used by pagedRows, preserving the existing PAGE_SIZE slicing
and ensuring deleting the final row on a page navigates to the last valid page.
- Around line 15-18: ReviewsPage의 part 상태를 string이 아닌 PartBadgeType으로 선언하고, 선택
콜백 경계에서 입력값이 유효한 PartBadgeType인지 타입 가드로 확인한 뒤에만 상태와 행 데이터에 저장하세요. 기존의 단순한 as
PartBadgeType 캐스팅은 제거하고 PART_OPTIONS와 일관된 도메인 타입을 유지하세요.
In `@src/routes/`(main)/index.tsx:
- Around line 3-4: Update the Home component’s Navigate target from the
nonexistent /introduction route to the implemented /review route, and ensure the
404 page’s home link uses the same valid destination so root navigation does not
return to the catch-all 404 flow.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 3ed8184b-6554-4a48-915a-f12cbd44c0e0
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml,!pnpm-lock.yaml
📒 Files selected for processing (58)
.claude/agents/api-contract-reviewer.md.claude/agents/debugger.md.claude/agents/e2e-planner.md.claude/agents/reviewer.md.claude/agents/route-reviewer.md.claude/agents/ui-accessibility-reviewer.md.claude/agents/verifier.md.claude/decisions/records/003-react-router-framework-mode.md.claude/decisions/records/004-error-page-boundary.md.claude/decisions/records/005-auth-route-layout-convention.md.claude/manifest.md.claude/references/api/admin-auth.md.claude/rules/architecture.md.claude/rules/code-style.md.codex/agents/api-contract-reviewer.toml.codex/agents/debugger.toml.codex/agents/e2e-planner.toml.codex/agents/reviewer.toml.codex/agents/route-reviewer.toml.codex/agents/ui-accessibility-reviewer.toml.codex/agents/verifier.toml.gitignoree2e/reviews.spec.tseslint.config.jsindex.htmlpackage.jsonreact-router.config.tssrc/App.tsxsrc/components/common/Button/Button.tsxsrc/components/common/ErrorFallback/ErrorFallback.stories.tsxsrc/components/common/ErrorFallback/ErrorFallback.test.tsxsrc/components/common/ErrorFallback/ErrorFallback.tsxsrc/components/common/ErrorFallback/index.tssrc/components/common/Modal/Modal.tsxsrc/components/common/PartBadge/PartBadge.tsxsrc/components/common/PartBadge/index.tssrc/components/common/PartBadge/partLabels.tssrc/components/common/ReviewTableRow/ReviewTableRow.tsxsrc/components/common/SelectField/SelectField.tsxsrc/components/common/index.tssrc/layout/RootLayout.tsxsrc/main.tsxsrc/pages/.gitkeepsrc/pages/errors/GlobalErrorPage.test.tsxsrc/pages/errors/GlobalErrorPage.tsxsrc/pages/errors/NotFoundPage.tsxsrc/pages/reviews/ReviewsPage.mock.tssrc/pages/reviews/ReviewsPage.tsxsrc/root.tsxsrc/routes.tssrc/routes/(auth)/.gitkeepsrc/routes/(main)/index.tsxsrc/routes/(main)/notFound.tsxsrc/routes/(main)/review.tsxsrc/routes/.gitkeeptsconfig.node.jsonvite.config.tsvitest.config.ts
💤 Files with no reviewable changes (4)
- src/pages/.gitkeep
- index.html
- src/main.tsx
- src/App.tsx
| tools: Read, Glob, Grep, Bash | ||
| --- | ||
|
|
||
| 당신은 관리자 API 계약 검토 담당입니다. |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Markdownlint MD041 경고를 해소하세요.
frontmatter 뒤에 각 역할을 설명하는 top-level heading을 추가해야 합니다.
- .claude/agents/api-contract-reviewer.md#L7-L7:
# API 계약 리뷰어를 추가합니다. - .claude/agents/debugger.md#L7-L7:
# 디버거를 추가합니다. - .claude/agents/e2e-planner.md#L7-L7:
# E2E 테스트 전략 담당을 추가합니다. - .claude/agents/reviewer.md#L7-L7:
# 코드 리뷰어를 추가합니다.
정적 분석의 MD041 경고를 근거로 한 지적입니다.
🧰 Tools
🪛 markdownlint-cli2 (0.23.0)
[warning] 7-7: First line in a file should be a top-level heading
(MD041, first-line-heading, first-line-h1)
📍 Affects 4 files
.claude/agents/api-contract-reviewer.md#L7-L7(this comment).claude/agents/debugger.md#L7-L7.claude/agents/e2e-planner.md#L7-L7.claude/agents/reviewer.md#L7-L7
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.claude/agents/api-contract-reviewer.md at line 7, Markdownlint MD041을 해소하도록
frontmatter 뒤에 top-level heading을 추가하세요. .claude/agents/api-contract-reviewer.md
7-7에는 API 계약 리뷰어 heading, .claude/agents/debugger.md 7-7에는 디버거 heading,
.claude/agents/e2e-planner.md 7-7에는 E2E 테스트 전략 담당 heading,
.claude/agents/reviewer.md 7-7에는 코드 리뷰어 heading을 각각 추가하세요.
Source: Linters/SAST tools
| --- | ||
| name: route-reviewer | ||
| description: 라우트, 접근 그룹, 레이아웃, 오류 경계가 React Router Framework Mode 규칙을 따르는지 읽기 전용으로 검토한다. | ||
| tools: Read, Glob, Grep, Bash |
There was a problem hiding this comment.
🔒 Security & Privacy | 🟠 Major | ⚡ Quick win
읽기 전용 에이전트의 Bash 권한을 제한하세요.
두 역할 모두 읽기 전용으로 정의되어 있지만 Bash를 통해 파일 수정이나 임의 스크립트 실행이 가능합니다.
.claude/agents/route-reviewer.md#L4-L4: Bash를 제거하거나 제한된 검증 역할로 위임합니다..claude/agents/ui-accessibility-reviewer.md#L4-L4: Bash를 제거하거나 제한된 검증 역할로 위임합니다.
📍 Affects 2 files
.claude/agents/route-reviewer.md#L4-L4(this comment).claude/agents/ui-accessibility-reviewer.md#L4-L4
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.claude/agents/route-reviewer.md at line 4, 읽기 전용 에이전트의 도구 권한에서 Bash를 제거하거나
제한된 검증 전용 권한으로 교체하세요. .claude/agents/route-reviewer.md 4-4의 tools 설정과
.claude/agents/ui-accessibility-reviewer.md 4-4의 tools 설정을 모두 수정해 파일 변경 및 임의
스크립트 실행이 불가능하도록 하세요.
| import { isRouteErrorResponse, useRouteError } from 'react-router' | ||
| import { ErrorFallback } from '@components/common/ErrorFallback' | ||
|
|
||
| export function GlobalErrorPage() { |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
페이지 컴포넌트 export 계약을 통일하세요.
src/pages/** 규칙상 모든 페이지 컴포넌트는 named export와 export default를 함께 제공해야 합니다.
src/pages/errors/GlobalErrorPage.tsx#L4-L4:GlobalErrorPagenamed export를 유지하고export default GlobalErrorPage를 추가하세요.src/pages/errors/NotFoundPage.tsx#L4-L4: named function export로 변경한 뒤export default NotFoundPage를 추가하세요.
📍 Affects 2 files
src/pages/errors/GlobalErrorPage.tsx#L4-L4(this comment)src/pages/errors/NotFoundPage.tsx#L4-L4
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/pages/errors/GlobalErrorPage.tsx` at line 4, 페이지 컴포넌트의 named/default
export 계약을 통일하세요. src/pages/errors/GlobalErrorPage.tsx의 GlobalErrorPage named
export는 유지하고 기본 export를 추가하세요. src/pages/errors/NotFoundPage.tsx에서는
NotFoundPage를 named function export로 변경한 뒤 기본 export도 추가하세요.
Source: Coding guidelines
CI 결과
|
CI 결과
|
CI 결과
|
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/routes.ts (1)
3-7: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win라우트 설명 주석을 현재 구성에 맞게 갱신하세요.
현재 주석은
/review만 구현되었고 나머지는 모두 not-found라고 설명하지만, 이 변경에서/introduction도 실제 페이지에 연결되었습니다. 유지보수자가 라우트 상태를 오해하지 않도록 주석을 갱신하세요.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/routes.ts` around lines 3 - 7, Update the Korean route-status comment above the default route configuration to reflect that /introduction is now implemented alongside /review, while keeping the description of any remaining routes that fall through to not-found accurate..claude/rules/architecture.md (1)
14-16: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
src/pages의 역할 설명을 route 구조와 일치시키세요.표는
src/pages를 “라우트 진입점”으로 설명하지만, Lines 16과 26에서는 route entry를src/routes/(group)에 둡니다. 새 기능 구현자가 잘못된 위치에 route 파일을 만들 수 있으므로src/pages를 “페이지 구현·조립”으로 수정하세요.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.claude/rules/architecture.md around lines 14 - 16, Update the src/pages row in the architecture documentation to describe it as responsible for page implementation and composition, not route entry points. Keep route entry ownership aligned with src/routes/(group) and preserve the existing cross-cutting pseudo-domain example.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.claude/agents/verifier.md:
- Line 15: Update the command restrictions in the verifier instructions so
E2E/Playwright execution is explicitly included in the pnpm-only list alongside
tests, lint, typecheck, and build. Keep the existing read-only git/diff guidance
and command ordering unchanged.
---
Outside diff comments:
In @.claude/rules/architecture.md:
- Around line 14-16: Update the src/pages row in the architecture documentation
to describe it as responsible for page implementation and composition, not route
entry points. Keep route entry ownership aligned with src/routes/(group) and
preserve the existing cross-cutting pseudo-domain example.
In `@src/routes.ts`:
- Around line 3-7: Update the Korean route-status comment above the default
route configuration to reflect that /introduction is now implemented alongside
/review, while keeping the description of any remaining routes that fall through
to not-found accurate.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 22159eae-22f0-4bc7-bf26-537ecd865d04
📒 Files selected for processing (22)
.claude/agents/api-contract-reviewer.md.claude/agents/debugger.md.claude/agents/e2e-planner.md.claude/agents/reviewer.md.claude/agents/route-reviewer.md.claude/agents/ui-accessibility-reviewer.md.claude/agents/verifier.md.claude/decisions/records/005-auth-route-layout-convention.md.claude/rules/architecture.md.github/workflows/auto-create-branch.yml.github/workflows/pr-auto-setup.ymle2e/reviews.spec.tssrc/components/common/ErrorFallback/ErrorFallback.test.tsxsrc/components/common/ErrorFallback/ErrorFallback.tsxsrc/components/common/SelectField/SelectField.tsxsrc/pages/errors/GlobalErrorPage.test.tsxsrc/pages/errors/GlobalErrorPage.tsxsrc/pages/errors/NotFoundPage.tsxsrc/pages/introductions/IntroductionsPage.tsxsrc/pages/reviews/ReviewsPage.tsxsrc/routes.tssrc/routes/(main)/introduction.tsx
CI 결과
|
CI 결과
|
leemanjae02
reviewed
Jul 19, 2026
leemanjae02
left a comment
leemanjae02
left a comment
Member
There was a problem hiding this comment.
고생하셨습니다! 코멘트 남겼으니 확인 부탁드려요!
Member
There was a problem hiding this comment.
디자인으로는 상단 헤더에 저장하기 버튼이 있는데 구현에서는 빠져있어서 따로 이유가 있으신지 궁금합니다!
Member
Author
There was a problem hiding this comment.
모달로 후기를 등록하게 되는데 유저 플로우상 저장하기 버튼이 불필요하다고 판단해서 제거했습니다!
leemanjae02
reviewed
Jul 19, 2026
leemanjae02
left a comment
leemanjae02
left a comment
Member
There was a problem hiding this comment.
그리고 피그마상에서 후기 등록, 활동 후기 등록이 섞여서 사용되고 있어서 피그마에 코멘트 남긴 결과
활동 후기로 통일해달라고 전달받아서 모달과 헤더에 활동 후기로 작성해주시면 될 것 같아요!
leemanjae02
reviewed
Jul 19, 2026
|
|
||
| <section className="flex flex-col items-start gap-3"> | ||
| <h2 className="text-body-18sb text-label-normal">리스트</h2> | ||
| <ReviewTable |
Member
There was a problem hiding this comment.
리뷰 테이블 border가 흰색 위에 그려지고 있어서 피그마 대비보다 저대비로 그려지는 것을 확인했습니다, border가 아니라 box-shadow로 그리면 피그마와 동일하게 border가 그려질 것 같아서 수정부탁드려요!
CI 결과
|
CI 결과
|
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
#️⃣ 연관된 이슈
Close #23
🚧 Work in Progress
📌 주요 변경사항
📝 작업 내용
root.tsx·라우트 그룹·공통 레이아웃 기반 앱 구조 전환pnpm exec eslint --quiet src/components/common/SelectField/SelectField.tsx통과📸 스크린샷 (선택)
💬 리뷰 요구사항(선택)
Summary by CodeRabbit