[network] #101 템플릿 조회 API 연결 - #102
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
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:
Walkthrough템플릿 조회 훅과 목업 데이터가 추가되었습니다. 작성 페이지는 조회 상태에 따라 로딩·빈 상태·입력 폼을 표시하고, 동적 필드와 업로드 파일을 게시글 미리보기 및 제출 흐름에 반영합니다. Changes템플릿 작성 흐름
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested labels: Suggested reviewers: Sequence Diagram(s)sequenceDiagram
participant PostWritePage
participant useTemplates
participant TemplateWriteForm
participant PreviewBox
participant createPost
PostWritePage->>useTemplates: 템플릿 필드 조회
useTemplates-->>PostWritePage: 필드 목록과 조회 상태 전달
PostWritePage->>TemplateWriteForm: fields, value, onUpload 전달
TemplateWriteForm-->>PostWritePage: 입력값 및 선택 파일 전달
PostWritePage->>PreviewBox: 필드 순서대로 값을 결합해 표시
PostWritePage->>createPost: 최종 content와 업로드 파일 제출
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/pages/PostWritePage.jsxESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
src/features/post/api/useTemplates.js (1)
13-13: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueBoolean 변수 이름을
is접두사로 변경해주세요.
ignore는 Boolean 상태이므로isIgnored처럼 의도가 드러나는 이름으로 바꾸고 모든 참조를 함께 갱신해주세요. As per path instructions, “Boolean 값은 is / has / should 로 시작”.🤖 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/features/post/api/useTemplates.js` at line 13, Rename the Boolean variable ignore to isIgnored in useTemplates and update every reference consistently, preserving the existing behavior.Source: Path instructions
src/pages/PostWritePage.jsx (1)
24-28: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value로딩 Boolean 이름을
is접두사로 통일해주세요.
templateLoading은 Boolean 값이므로isTemplateLoading으로 변경하고 렌더링 조건도 함께 갱신해주세요. As per path instructions, “Boolean 값은 is / has / should 로 시작”.Also applies to: 70-70
🤖 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/PostWritePage.jsx` around lines 24 - 28, Rename the Boolean returned as templateLoading from useTemplates to isTemplateLoading, following the is/has/should naming convention, and update all rendering conditions and references in PostWritePage accordingly.Source: Path instructions
🤖 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 `@src/features/post/api/useTemplates.js`:
- Line 7: useTemplates 함수의 type 매개변수에 기본값 BASIC을 지정해, 인자 없이 호출되는
PostWritePage에서도 API 요청에 type 쿼리가 포함되도록 수정하세요.
In `@src/features/post/components/TemplateWriteForm.jsx`:
- Around line 13-16: Update the upload-field rendering in TemplateWriteForm so
UploadArea triggers real file selection and upload behavior instead of being a
passive button. Either accept and invoke an onUpload callback connected to the
parent attachment state, or implement UploadArea as a label associated with an
input[type="file"], while preserving the displayed field name.
In `@src/pages/PostWritePage.jsx`:
- Around line 72-73: Update the conditional rendering in PostWritePage so
templateError and an empty templateFields array use separate branches. Keep the
existing failure message only for templateError, and add the appropriate
empty-template 안내 message for successful responses with no templates.
- Around line 70-79: 템플릿 작성 모드에서 templateLoading이 true이거나 templateError가 있거나
templateFields가 비어 있는 동안에는 다음 단계 버튼을 disabled 처리하세요. 해당 조건이 해소되면 기존처럼 활성화되도록
`PostWritePage`의 다음 버튼 상태 로직을 업데이트하세요.
---
Nitpick comments:
In `@src/features/post/api/useTemplates.js`:
- Line 13: Rename the Boolean variable ignore to isIgnored in useTemplates and
update every reference consistently, preserving the existing behavior.
In `@src/pages/PostWritePage.jsx`:
- Around line 24-28: Rename the Boolean returned as templateLoading from
useTemplates to isTemplateLoading, following the is/has/should naming
convention, and update all rendering conditions and references in PostWritePage
accordingly.
🪄 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: CHILL
Plan: Pro Plus
Run ID: 4a244fcf-bf51-4b5a-b1e2-f4d9b74c52e1
📒 Files selected for processing (4)
src/features/post/api/useTemplates.jssrc/features/post/components/TemplateWriteForm.jsxsrc/mocks/mockTemplates.jssrc/pages/PostWritePage.jsx
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@src/features/post/components/TemplateWriteForm.jsx`:
- Around line 66-87: Update HiddenInput to use a visually hidden technique
instead of display: none so keyboard users can reach the file input, and add a
:focus-within style to UploadArea using the project’s focus-color token to
provide a visible focus state.
🪄 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: CHILL
Plan: Pro Plus
Run ID: a20b9af7-ff39-416d-bf84-72423dc62a34
📒 Files selected for processing (3)
src/features/post/api/useTemplates.jssrc/features/post/components/TemplateWriteForm.jsxsrc/pages/PostWritePage.jsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/pages/PostWritePage.jsx
# Conflicts: # src/pages/PostWritePage.jsx
# Conflicts: # src/pages/PostWritePage.jsx
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
src/pages/PostWritePage.jsx (3)
36-40: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win템플릿 모드 전환 시 조회를 다시 시작해야 합니다.
PostWritePage는 자유 작성 모드에서도useTemplates()를 호출합니다. 제공된 훅은type만 의존하므로 최초 요청이 실패하거나 빈 응답이면 사용자가 템플릿 모드로 전환해도 재요청되지 않아 오류/빈 상태가 그대로 남습니다.enabled옵션으로 템플릿 모드 진입 시 조회하도록 하거나, 템플릿 전용 feature 컴포넌트 안에서 훅을 마운트해주세요. 자유 모드의 불필요한 API 요청도 제거할 수 있습니다.🤖 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/PostWritePage.jsx` around lines 36 - 40, Update the useTemplates call in PostWritePage so template data is fetched when entering template mode and retried after an initial failure or empty response; use the hook’s enabled option if supported, or move the hook into a template-only component. Avoid issuing the templates API request while free-writing mode is active.
83-99: 🗄️ Data Integrity & Integration | 🟠 Major | 🏗️ Heavy lift첨부 파일을 미리보기와 제출 payload에 전달해야 합니다.
files와photos는 로컬 미리보기에서만 사용되고, 2단계PreviewBox와createPostpayload에는 포함되지 않습니다. 현재 선택한 증빙 파일이 성공적으로 게시된 것처럼 보여도 실제 게시글에는 조용히 누락됩니다. 백엔드 계약에 맞는 첨부 필드 또는FormData로 제출하고, 2단계에서도 첨부 내역을 확인할 수 있게 해주세요.Also applies to: 159-166
🤖 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/PostWritePage.jsx` around lines 83 - 99, PostWritePage의 files와 photos가 로컬 미리보기에만 사용되어 PreviewBox와 createPost 제출 데이터에서 누락되지 않도록 수정하세요. 2단계 PreviewBox에 첨부 내역을 전달하고, createPost 호출 시 백엔드 계약에 맞는 첨부 필드 또는 FormData로 선택 파일과 사진을 함께 제출하세요.
174-174: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win오류 안내 문구의 띄어쓰기를 수정해주세요.
시도해주세요를시도해 주세요로 수정하면 자연스러운 사용자 안내가 됩니다.수정 예시
- 게시글을 등록하지 못했습니다. 다시 시도해주세요. + 게시글을 등록하지 못했습니다. 다시 시도해 주세요.🤖 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/PostWritePage.jsx` at line 174, Update the error message rendered by the error conditional in PostWritePage so the Korean phrase uses “시도해 주세요” instead of “시도해주세요”, leaving the rest of the user-facing message unchanged.
🧹 Nitpick comments (1)
src/pages/PostWritePage.jsx (1)
68-101: 📐 Maintainability & Code Quality | 🔵 Trivial | 🏗️ Heavy lift페이지의 도메인 로직과 복잡한 UI 분기를
features/post로 분리해주세요.현재 페이지가 인증 리다이렉트, 콘텐츠 직렬화, 카테고리 변환, 게시글 payload 생성, 템플릿 상태별 렌더링, 폼 연결까지 모두 담당합니다. 제출 로직은 전용 훅으로, 템플릿 상태/UI는 feature 컴포넌트로 옮겨
PostWritePage를 얇게 유지하는 편이 테스트와 변경에 유리합니다.As per path instructions:
src/pages/**페이지 컴포넌트는 얇게 유지하고, 비즈니스 로직이나 복잡한 UI는features/하위 도메인 폴더로 분리해야 합니다.Also applies to: 110-147
🤖 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/PostWritePage.jsx` around lines 68 - 101, Move the post submission domain logic from PostWritePage, including authentication redirect, content serialization, category mapping, payload construction, and createPost handling, into a dedicated hook under features/post. Move template state and conditional UI rendering into feature components there, then keep PostWritePage focused on composing the feature UI and connecting the form; preserve the existing submission behavior and success toast.Source: Path instructions
🤖 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.
Outside diff comments:
In `@src/pages/PostWritePage.jsx`:
- Around line 36-40: Update the useTemplates call in PostWritePage so template
data is fetched when entering template mode and retried after an initial failure
or empty response; use the hook’s enabled option if supported, or move the hook
into a template-only component. Avoid issuing the templates API request while
free-writing mode is active.
- Around line 83-99: PostWritePage의 files와 photos가 로컬 미리보기에만 사용되어 PreviewBox와
createPost 제출 데이터에서 누락되지 않도록 수정하세요. 2단계 PreviewBox에 첨부 내역을 전달하고, createPost 호출 시
백엔드 계약에 맞는 첨부 필드 또는 FormData로 선택 파일과 사진을 함께 제출하세요.
- Line 174: Update the error message rendered by the error conditional in
PostWritePage so the Korean phrase uses “시도해 주세요” instead of “시도해주세요”, leaving
the rest of the user-facing message unchanged.
---
Nitpick comments:
In `@src/pages/PostWritePage.jsx`:
- Around line 68-101: Move the post submission domain logic from PostWritePage,
including authentication redirect, content serialization, category mapping,
payload construction, and createPost handling, into a dedicated hook under
features/post. Move template state and conditional UI rendering into feature
components there, then keep PostWritePage focused on composing the feature UI
and connecting the form; preserve the existing submission behavior and success
toast.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: c9c73018-b5a0-46d8-b3b2-f015ae7d3926
📒 Files selected for processing (1)
src/pages/PostWritePage.jsx
2 participants
☘️ 작업한 이슈
🍀 작업한 내용
GET /api/templates) 연동을 위한useTemplates훅을 구현했습니다. (VITE_USE_MOCK플래그로 목업/실서버 전환,type파라미터 지원 — 기본값 BASIC)mockTemplates.js)를 추가했습니다.values배열 기반 동적 렌더링으로 변경했습니다. "증빙 자료" 항목은 디자인대로 업로드 영역으로 표시됩니다.🍃 작업 포인트
data.values가 항목 "이름 문자열 배열"이라, 폼 상태를 고정 키(basicInfo등) 객체 대신 항목 이름을 키로 쓰는 객체로 바꿨습니다. 백엔드에서 템플릿 항목이 바뀌어도 프론트 수정 없이 그대로 반영됩니다.Summary by CodeRabbit