[Feat] 업로드 예약 > 상세페이지 구현 및 부가 수정 #120
Conversation
Walkthrough이 PR은 업로드 예약 상세페이지 구현과 관련된 UI 및 코드 로직 수정을 포함합니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ScheduleDetailPage
participant API
participant Toast
User->>ScheduleDetailPage: 상세페이지 요청 (id 포함)
ScheduleDetailPage->>API: getAllPostsQuery 호출 (agentId, postGroupId, 토큰 포함)
API-->>ScheduleDetailPage: posts 데이터 반환
alt Post 존재함
ScheduleDetailPage->>User: 상세정보 및 이미지 렌더링
else Post 미존재
ScheduleDetailPage->>Toast: 에러 메시지 전송
ScheduleDetailPage-->>User: 에러 상태 렌더링
end
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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
apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/Schedule.tsxOops! Something went wrong! :( ESLint: 9.17.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@repo/eslint-config' imported from /eslint.config.mjs 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
🔭 Outside diff range comments (1)
apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/Edit.tsx (1)
31-33: 배열 메서드 사용 시 안전성 검사가 필요합니다.
posts.data.posts가 undefined일 경우some메서드 호출 시 에러가 발생할 수 있습니다.다음과 같이 안전성 검사를 추가하는 것을 추천드립니다:
- const hasReadyToUploadPosts = posts.data.posts.some( + const hasReadyToUploadPosts = posts?.data?.posts?.some( (post) => post.status === POST_STATUS.READY_TO_UPLOAD );
🧹 Nitpick comments (2)
apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/detail/[id]/pageStyle.css.ts (1)
4-51: 스타일 정의가 깔끔하나, 반응형 디자인 개선이 필요합니다.현재 스타일 정의는 잘 구성되어 있으나, 다양한 화면 크기에 대한 대응이 부족합니다. 미디어 쿼리를 추가하여 모바일 환경에서의 사용성을 개선하는 것이 좋겠습니다.
다음과 같이 미디어 쿼리를 추가하는 것을 제안드립니다:
export const contentWrapperStyle = style({ maxWidth: '768px', position: 'relative', display: 'flex', flexDirection: 'column', padding: `0 ${vars.space[16]}`, + '@media': { + 'screen and (max-width: 480px)': { + padding: `0 ${vars.space[8]}`, + } + } });apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/detail/[id]/ScheduleDetail.tsx (1)
73-79: 이미지 처리 방식 개선이 필요합니다.
- 고정된 이미지 크기는 이미지의 원본 비율을 왜곡시킬 수 있습니다.
- 대체 텍스트가 더 구체적일 필요가 있습니다.
다음과 같이 개선하는 것을 추천드립니다:
<Image src={image.url} - alt={`업로드 예정인 이미지 ${image.id}`} + alt={`${currentPost.summary}의 ${image.id}번째 이미지`} width={185.5} height={240} + style={{ objectFit: 'contain' }} className={style.imageStyle} />또한 이미지 크기를 반응형으로 처리하는 것을 고려해보세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/Edit.tsx(1 hunks)apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/_components/EditContent/EditContent.tsx(1 hunks)apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/Schedule.tsx(2 hunks)apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/_components/ScheduleTable/ScheduleTable.tsx(2 hunks)apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/_components/TitleWithDescription/TitleWithDescription.css.ts(1 hunks)apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/_components/TitleWithDescription/TitleWithDescription.tsx(1 hunks)apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/detail/[id]/ScheduleDetail.tsx(1 hunks)apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/detail/[id]/page.tsx(1 hunks)apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/detail/[id]/pageStyle.css.ts(1 hunks)apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/detail/[id]/type.ts(1 hunks)apps/web/src/types/post.ts(1 hunks)
🔇 Additional comments (11)
apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/detail/[id]/type.ts (1)
3-7: 타입 정의가 명확하고 적절합니다!
EditPageProps를 확장하여id파라미터를 추가한 것이 페이지 라우팅 구조에 잘 맞습니다.apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/detail/[id]/page.tsx (1)
7-20: 서버 컴포넌트 구현이 잘 되어있습니다!서버 사이드 토큰 처리와 데이터 페칭 로직이 적절하게 구현되어 있습니다.
ServerFetchBoundary를 사용한 것이 좋은 패턴입니다.apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/detail/[id]/ScheduleDetail.tsx (2)
1-12: 컴포넌트 선언과 임포트가 잘 구성되어 있습니다!필요한 의존성들이 명확하게 임포트되어 있고, 클라이언트 컴포넌트 지시자가 올바르게 배치되어 있습니다.
13-19: params 유효성 검사가 필요합니다.쿼리 파라미터를 사용하기 전에 agentId와 postGroupId의 유효성을 검사하는 것이 좋습니다. 잘못된 파라미터로 인한 오류를 방지할 수 있습니다.
다음과 같이 검사 로직을 추가하는 것을 고려해보세요:
+ if (!params.agentId || !params.postGroupId) { + toast.error('잘못된 접근입니다.'); + router.push('/'); + return; + } const { data: posts } = useGetAllPostsQuery({ agentId: params.agentId, postGroupId: params.postGroupId, });apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/_components/TitleWithDescription/TitleWithDescription.css.ts (1)
11-15: 새로운 스타일 구현이 적절합니다!디자인 시스템의 spacing 변수를 일관되게 사용하고, flex 레이아웃을 적절하게 활용하였습니다.
apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/_components/TitleWithDescription/TitleWithDescription.tsx (2)
4-8: 타입 정의가 명확합니다!
rightTitle을 옵셔널 프롭으로 추가한 것이 적절합니다.
17-26: UI 구현이 깔끔합니다!타이틀 레이아웃과 조건부 렌더링이 잘 구현되었습니다. 폰트 스타일도 일관성 있게 적용되었습니다.
apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/_components/ScheduleTable/ScheduleTable.tsx (1)
10-12: Props 단순화가 잘 되었습니다!불필요한 props를 제거하여 컴포넌트의 재사용성이 향상되었습니다.
apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/Schedule.tsx (2)
109-109: 업로드 예약 일정 제목에 게시물 수 표시 추가가 잘 되었습니다!사용자가 업로드할 준비가 된 게시물의 수를 한눈에 파악할 수 있도록 하는 UI 개선이 잘 이루어졌습니다.
130-130: ScheduleTable 컴포넌트의 params prop 제거 검증 필요params prop이 제거되었습니다. 이 변경이 ScheduleTable 컴포넌트의 기능에 영향을 미치지 않는지 확인이 필요합니다.
✅ Verification successful
🏁 Script executed:
#!/bin/bash # ScheduleTable 컴포넌트에서 params 사용 여부 확인 ast-grep --pattern 'const ScheduleTable = ({ $_ }) => { $$$ params $$$ }'Length of output: 81
ScheduleTable 컴포넌트의 params prop 사용 검증 결과
추가 확인 결과, ScheduleTable 컴포넌트 내부에서 params prop에 대한 참조를 찾을 수 없었습니다. 따라서 props에서 params가 제거된 변경 사항이 기능에 영향을 미치지 않을 것으로 판단됩니다.
apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/_components/EditContent/EditContent.tsx (1)
178-178: placeholder 텍스트가 더 명확하게 개선되었습니다!"AI에게 요청하여 수정 중인 글 모두 업그레이드하기"로 변경함으로써, 해당 액션이 현재 수정 중인 모든 글에 적용된다는 것을 사용자가 더 명확하게 이해할 수 있게 되었습니다.
| @@ -22,23 +22,24 @@ export const POST_PURPOSE = { | |||
| MARKETING: 'MARKETING', | |||
| } as const; | |||
|
|
|||
| type PostPurpose = (typeof POST_PURPOSE)[keyof typeof POST_PURPOSE]; | |||
| export type PostPurpose = (typeof POST_PURPOSE)[keyof typeof POST_PURPOSE]; | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
중복된 타입 정의를 통합할 필요가 있습니다.
Purpose와 PostPurpose, Reference와 PostReference 등 유사한 타입이 중복 정의되어 있습니다. 타입 정의를 통합하여 코드의 일관성을 높이는 것이 좋겠습니다.
다음과 같이 수정하는 것을 제안드립니다:
-export type Purpose = 'INFORMATION' | 'OPINION' | 'HUMOR' | 'MARKETING';
-export type Reference = 'NONE' | 'NEWS' | 'IMAGE';
// PostPurpose와 PostReference 타입을 재사용
+export type Purpose = PostPurpose;
+export type Reference = PostReference;Also applies to: 33-34, 42-42, 63-65
apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/schedule/detail/[id]/ScheduleDetail.tsx
Show resolved
Hide resolved
...p/(prompt)/edit/[agentId]/[postGroupId]/schedule/_components/ScheduleTable/ScheduleTable.tsx
Show resolved
Hide resolved
관련 이슈
close: #119
변경 사항
업로드 예약 > 상세페이지를 구현 완료 했어요.
그리고 업로드 예약 페이지에서 불필요했던 로직 제거 및 자잘한 개선을 진행했어요.
레퍼런스
Summary by CodeRabbit
새로운 기능
리팩토링
유지보수