링크상세패널 흐름별 상세 UI 추가#333
Conversation
|
🚀 storybook url: https://689bfce92a7bd08f5aa1edbe-dviqnstrhy.chromatic.com/ |
WalkthroughLinkCardDetailPanel 컴포넌트에 요약 관련 상태와 콜백이 추가되었습니다. SummaryState 타입('idle' | 'loading' | 'writing' | 'error' | 'ready') 및 summaryState, summaryErrorMessage, onRegenerateSummary, onRetrySummary props가 공개 API로 도입되었고, 요약 영역이 상태에 따라 로딩/에러/완료 등으로 분기되어 렌더링됩니다. 스타일 변경으로 Possibly related PRs
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom Pre-merge Checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 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: 1
🤖 Fix all issues with AI agents
In @src/components/wrappers/LinkCardDetailPanel/LinkCardDetailPanel.tsx:
- Around line 34-36: The prop summaryBadge is declared on the component
interface and destructured in LinkCardDetailPanel but never used; either render
it in the summary section or remove its declaration/destructuring. Fix options:
(A) If a badge is needed, update the LinkCardDetailPanel JSX where
summary/summaryState is rendered to include summaryBadge (e.g., next to the
summary title or inside the summary card) and ensure SummaryState handling still
works, or (B) if not needed, remove summaryBadge from the props/interface and
from the function parameter list to avoid unused prop warnings; update any
tests/types referring to summaryBadge accordingly.
🧹 Nitpick comments (4)
src/stories/LinkCardDetailPanel.stories.tsx (1)
18-18: summaryState에 대해 select 컨트롤 사용을 권장합니다.
summaryState는 특정 값들('idle' | 'loading' | 'writing' | 'error' | 'ready')만 허용하므로, 'text' 대신 'select' 컨트롤을 사용하면 Storybook에서 더 나은 사용자 경험을 제공할 수 있습니다.🔎 제안하는 수정
- summaryState: { control: 'text' }, + summaryState: { + control: 'select', + options: ['idle', 'loading', 'writing', 'error', 'ready'], + },src/components/wrappers/LinkCardDetailPanel/LinkCardDetailPanel.tsx (3)
173-177: 클립보드 API 에러 처리가 누락되었습니다.
navigator.clipboard.writeText()는 Promise를 반환하며 권한 거부 등의 이유로 실패할 수 있습니다. 현재 구현에서는 복사 실패 시 사용자에게 피드백이 없습니다. 동일한 패턴이 라인 204-206, 237-239, 428-430에도 반복됩니다.🔎 에러 처리 예시
onClick={() => { if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) { - navigator.clipboard.writeText(safeUrl || url); + navigator.clipboard.writeText(safeUrl || url).catch(() => { + // 복사 실패 시 처리 (예: toast 알림) + }); } }}
248-253:renderSummaryBox헬퍼 함수 단순화를 고려해 보세요.이 헬퍼 함수는 한 번만 사용되고
footer매개변수도 전달되지 않습니다. 인라인으로 변경하거나 불필요한 매개변수를 제거하면 코드가 더 간결해집니다.
465-465: 중복된 width 클래스가 있습니다.
memoWrapper()가 이미w-full을 반환하는데, 추가로w-full max-w-full을 붙이고 있습니다. 기능적으로 문제는 없지만 중복을 제거하면 더 깔끔합니다.🔎 제안하는 수정
- <div className={`${memoWrapper()} w-full max-w-full`}> + <div className={memoWrapper()}>
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/wrappers/LinkCardDetailPanel/LinkCardDetailPanel.style.tssrc/components/wrappers/LinkCardDetailPanel/LinkCardDetailPanel.tsxsrc/stories/LinkCardDetailPanel.stories.tsx
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: Bangdayeon
Repo: Team-SoFa/linkiving PR: 97
File: src/components/basics/LinkCard/LinkCard.tsx:12-19
Timestamp: 2025-11-23T12:03:33.890Z
Learning: In src/components/basics/LinkCard/LinkCard.tsx, the summary prop should remain required (string type) because the backend always provides it as a string value. The isHaveSummary flag controls whether to display the summary text or show the AddSummaryButton, not whether the data exists.
📚 Learning: 2025-11-23T12:03:33.890Z
Learnt from: Bangdayeon
Repo: Team-SoFa/linkiving PR: 97
File: src/components/basics/LinkCard/LinkCard.tsx:12-19
Timestamp: 2025-11-23T12:03:33.890Z
Learning: In src/components/basics/LinkCard/LinkCard.tsx, the summary prop should remain required (string type) because the backend always provides it as a string value. The isHaveSummary flag controls whether to display the summary text or show the AddSummaryButton, not whether the data exists.
Applied to files:
src/components/wrappers/LinkCardDetailPanel/LinkCardDetailPanel.style.tssrc/stories/LinkCardDetailPanel.stories.tsxsrc/components/wrappers/LinkCardDetailPanel/LinkCardDetailPanel.tsx
🧬 Code graph analysis (1)
src/components/wrappers/LinkCardDetailPanel/LinkCardDetailPanel.tsx (1)
src/hooks/util/getSafeUrl.ts (1)
getSafeUrl(1-10)
🔇 Additional comments (4)
src/components/wrappers/LinkCardDetailPanel/LinkCardDetailPanel.style.ts (1)
18-18: LGTM!memoWrapper를 전체 너비로 변경한 것은 새로운 레이아웃과 잘 맞습니다. 컴포넌트의 메모 섹션 업데이트와 일관성이 있습니다.
src/stories/LinkCardDetailPanel.stories.tsx (1)
43-81: LGTM!스토리 구조가 잘 작성되었습니다.
baseArgs를 활용한 재사용 패턴과 각 요약 상태별 스토리 분리가 적절합니다.src/components/wrappers/LinkCardDetailPanel/LinkCardDetailPanel.tsx (2)
255-330: LGTM!
renderSummaryContent함수가 각 요약 상태를 명확하게 처리합니다. 로딩, 에러, 완료 상태에 대한 UI가 잘 구현되어 있고, 접기/펼치기 기능도 적절합니다.
337-349: LGTM!URL 표시 로직이 잘 구현되었습니다.
getSafeUrl을 활용한 유효성 검증과 유효하지 않은 URL에 대한 fallback 처리가 적절합니다.
Seong-Myeong
force-pushed
the
feature/#328-add-linkdetailpanel-detailFlow
branch
from
e0b2273 to
705346d
Compare
|
🚀 storybook url: https://689bfce92a7bd08f5aa1edbe-rardxrikjf.chromatic.com/ |
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/wrappers/LinkCardDetailPanel/LinkCardDetailPanel.tsx (1)
425-429: 클립보드 복사 시 빈 문자열 처리가 필요합니다.
safeUrl이 빈 문자열일 경우에도 클립보드에 빈 값이 복사됩니다. 헤더의 복사 버튼(line 173)처럼safeUrl || url폴백을 사용하거나, 빈 값일 때는 복사를 수행하지 않도록 처리하는 것이 좋습니다.🔧 제안된 수정
onClick={() => { if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) { - navigator.clipboard.writeText(safeUrl); + navigator.clipboard.writeText(safeUrl || url); } }}
🧹 Nitpick comments (2)
src/stories/LinkCardDetailPanel.stories.tsx (1)
18-18:summaryState에select컨트롤 사용을 권장합니다.
summaryState는'idle' | 'loading' | 'writing' | 'error' | 'ready'유니온 타입이므로, 스토리북에서 유효한 값만 선택할 수 있도록select컨트롤이 더 적합합니다.🔧 제안된 수정
- summaryState: { control: 'text' }, + summaryState: { + control: 'select', + options: ['idle', 'loading', 'writing', 'error', 'ready'], + },src/components/wrappers/LinkCardDetailPanel/LinkCardDetailPanel.tsx (1)
21-21:SummaryState타입을 export하는 것을 고려해 주세요.외부 컴포넌트에서
summaryStateprop을 전달할 때 타입 안전성을 위해SummaryState타입을 export하면 유용합니다.🔧 제안된 수정
-type SummaryState = 'idle' | 'loading' | 'writing' | 'error' | 'ready'; +export type SummaryState = 'idle' | 'loading' | 'writing' | 'error' | 'ready';
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/wrappers/LinkCardDetailPanel/LinkCardDetailPanel.style.tssrc/components/wrappers/LinkCardDetailPanel/LinkCardDetailPanel.tsxsrc/stories/LinkCardDetailPanel.stories.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/wrappers/LinkCardDetailPanel/LinkCardDetailPanel.style.ts
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: Bangdayeon
Repo: Team-SoFa/linkiving PR: 97
File: src/components/basics/LinkCard/LinkCard.tsx:12-19
Timestamp: 2025-11-23T12:03:33.890Z
Learning: In src/components/basics/LinkCard/LinkCard.tsx, the summary prop should remain required (string type) because the backend always provides it as a string value. The isHaveSummary flag controls whether to display the summary text or show the AddSummaryButton, not whether the data exists.
📚 Learning: 2025-11-23T12:03:33.890Z
Learnt from: Bangdayeon
Repo: Team-SoFa/linkiving PR: 97
File: src/components/basics/LinkCard/LinkCard.tsx:12-19
Timestamp: 2025-11-23T12:03:33.890Z
Learning: In src/components/basics/LinkCard/LinkCard.tsx, the summary prop should remain required (string type) because the backend always provides it as a string value. The isHaveSummary flag controls whether to display the summary text or show the AddSummaryButton, not whether the data exists.
Applied to files:
src/stories/LinkCardDetailPanel.stories.tsxsrc/components/wrappers/LinkCardDetailPanel/LinkCardDetailPanel.tsx
🧬 Code graph analysis (2)
src/stories/LinkCardDetailPanel.stories.tsx (2)
src/components/basics/LinkCard/components/AddSummaryButton.tsx (2)
onSummaryGenerate(3-18)console(4-6)src/stories/ReSummaryModal.stories.tsx (1)
useModalStore(17-26)
src/components/wrappers/LinkCardDetailPanel/LinkCardDetailPanel.tsx (1)
src/hooks/util/getSafeUrl.ts (1)
getSafeUrl(1-10)
🔇 Additional comments (6)
src/stories/LinkCardDetailPanel.stories.tsx (1)
43-79: LGTM!
baseArgs를 활용한 스토리 구성이 깔끔하고, 각 상태별(loading, error, ready) 스토리가 잘 정의되어 있습니다.SummaryError에서summaryErrorMessage도 적절히 포함되어 있습니다.src/components/wrappers/LinkCardDetailPanel/LinkCardDetailPanel.tsx (5)
210-242: 조건부 렌더링 로직이 올바르게 구현되어 있습니다.
loading과error상태에서는 액션을 숨기고, 그 외 상태에서만 "요약 다시 생성" 및 "복사" 버튼을 표시하는 로직이 적절합니다.
253-328:renderSummaryContent함수가 잘 구현되어 있습니다.각 상태(
loading,error,ready,writing,idle)에 따른 UI 분기가 명확하고,writing상태에서 추가 안내 문구를 표시하는 UX가 좋습니다.isSummaryOverflowing을 활용한 아코디언 펼침/접기 기능도 적절합니다.
44-45: 상수 정의가 적절합니다.
TITLE_MAX_LENGTH와MEMO_MAX_LENGTH상수가 매직 넘버 대신 명명된 상수로 정의되어 가독성과 유지보수성이 향상되었습니다.
462-486: 메모 섹션의 편집 가능 여부 처리가 올바릅니다.
memoEditableprop을 통해 읽기 전용 모드와 편집 모드를 적절히 구분하고 있으며, 이벤트 핸들러들도memoEditable조건을 일관되게 검사하고 있습니다.
333-348: 헤더 섹션 구조가 개선되었습니다.URL 표시 영역과 액션 버튼이 잘 구성되어 있고,
safeUrl유효성 검사를 통해 유효하지 않은 URL에 대한 폴백 UI도 제공됩니다.
2 participants
관련 이슈
PR 설명