Conversation
Walkthrough팀피셜록 페이지의 키워드 수정 플로우를 변경하기 위해 새로운 KeywordGuideBalloon 컴포넌트를 도입하고, KeywordBar와 LogNote 컴포넌트에 가이드 상태 관리를 추가했습니다. 반응형 타이포그래피 및 높이 조정 최적화와 함께 날짜 파싱 유틸리티를 개선했습니다. Changes
Sequence DiagramsequenceDiagram
participant User as 사용자
participant KeywordBar as KeywordBar
participant LogNote as LogNote
participant GuideBalloon as KeywordGuideBalloon
User->>KeywordBar: 편집 모드 진입
activate KeywordBar
KeywordBar->>KeywordBar: isEditMode=true, showGuide 상태 초기화
deactivate KeywordBar
KeywordBar->>KeywordBar: useEffect: isEditMode && !selectedSlot<br/>→ showGuide=true
KeywordBar->>GuideBalloon: 렌더링 (position='desktop'/'mobile')
activate GuideBalloon
GuideBalloon-->>User: 가이드 메시지 표시
deactivate GuideBalloon
LogNote->>LogNote: useEffect: isEditMode && !selectedSlot<br/>→ showGuide=true
LogNote->>GuideBalloon: 좌측 패널에서 렌더링 (position='bottom')
activate GuideBalloon
GuideBalloon-->>User: 키워드 선택 가이드 표시
deactivate GuideBalloon
User->>GuideBalloon: 닫기(✕) 클릭
activate GuideBalloon
GuideBalloon->>KeywordBar: onClose() 호출
GuideBalloon->>LogNote: onClose() 호출
deactivate GuideBalloon
KeywordBar->>KeywordBar: showGuide=false
LogNote->>LogNote: showGuide=false
KeywordBar-->>User: 가이드 숨김
LogNote-->>User: 가이드 숨김
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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/utils/project/formatDate.ts:
- Around line 1-14: The parseDate function's isoString uses replace(' ', 'T')
which only replaces the first space; update the isoString assignment in
parseDate to replace all spaces (e.g., use a global regex like replace(/ /g,
'T')) so multiple spaces in dateString are converted to 'T' before creating the
Date; ensure you reference the isoString variable and the parseDate function
when making this change.
🧹 Nitpick comments (2)
src/app/(main)/teampsylog/_components/KeywordGuideBalloon.tsx (1)
22-27: 닫기 버튼에 접근성 레이블 추가 권장닫기 버튼에 시각적으로 "✕" 문자만 표시되고 있습니다. 스크린 리더 사용자를 위해
aria-label을 추가하는 것을 권장합니다.♿ 접근성 개선 제안
<button onClick={onClose} + aria-label="가이드 닫기" className="flex h-4 w-4 flex-shrink-0 items-center justify-center p-0 text-base text-white/70 hover:text-white focus:outline-none" > ✕ </button>src/app/(main)/teampsylog/_components/LogNote.tsx (1)
47-53: useEffect 로직에 주석 추가를 권장합니다.편집 플로우가 2단계(슬롯 선택 → 키워드 선택)로 구성되어 있는데, 현재 로직에는 이를 설명하는 주석이 없어 코드 의도를 파악하기 어려울 수 있습니다. 유지보수성 향상을 위해 주석 추가를 권장합니다.
♻️ 주석 추가 제안
useEffect(() => { + // 편집 모드에서 슬롯이 선택된 경우 키워드 선택 가이드 표시 if (isEditMode && selectedSlot !== null) { setShowGuide(true); } else { setShowGuide(false); } }, [isEditMode, selectedSlot]);
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
public/icons/teamficial-keyword.svgis excluded by!**/*.svg
📒 Files selected for processing (7)
src/app/(main)/project/[id]/_components/InfoItem.tsxsrc/app/(main)/teampsylog/_components/KeywordBar.tsxsrc/app/(main)/teampsylog/_components/KeywordGuideBalloon.tsxsrc/app/(main)/teampsylog/_components/KeywordGuideOverlay.tsxsrc/app/(main)/teampsylog/_components/KeywordItem.tsxsrc/app/(main)/teampsylog/_components/LogNote.tsxsrc/utils/project/formatDate.ts
🔇 Additional comments (14)
src/app/(main)/project/[id]/_components/InfoItem.tsx (1)
21-21: LGTM! 반응형 타이포그래피 개선URL 링크에 반응형 폰트 크기를 적용하여 모바일과 데스크톱 환경에서 일관된 사용자 경험을 제공합니다. 동일 파일의 27번 라인과 스타일 패턴이 일치합니다.
src/utils/project/formatDate.ts (3)
16-25: LGTM! parseDate를 활용한 리팩토링
parseDate함수로 위임하여 날짜 파싱 로직을 중앙화했습니다. null 처리가 일관적이며 코드 중복이 제거되었습니다.
27-36: LGTM! parseDate를 활용한 리팩토링
parseDate함수로 위임하여 날짜 파싱 로직을 중앙화했습니다. null 처리가 일관적이며 코드 중복이 제거되었습니다.
38-53: LGTM! 개선된 유효성 검증
isNaN검증을 별도로 분리하고 에러 로깅을 추가하여 디버깅이 용이해졌습니다. 기존 동작은 유지하면서 코드 품질이 향상되었습니다.src/app/(main)/teampsylog/_components/KeywordGuideOverlay.tsx (1)
81-81: LGTM! 모바일 뷰포트 높이 개선
min-h-screen에서min-h-[100dvh]로 변경하여 모바일 브라우저의 동적 뷰포트 높이를 정확하게 처리합니다. 이는 주소창 등 브라우저 UI가 표시/숨김될 때 발생하는 레이아웃 문제를 방지합니다.src/app/(main)/teampsylog/_components/KeywordItem.tsx (1)
46-60: LGTM! 스타일링 로직 가독성 개선편집 모드와 선택 상태에 따른 className 조건문을 3단계 구조로 리팩토링하여 가독성이 향상되었습니다. 기존 동작은 유지하면서 코드 복잡도를 줄였습니다.
src/app/(main)/teampsylog/_components/KeywordGuideBalloon.tsx (1)
1-41: LGTM! 잘 구조화된 가이드 풍선 컴포넌트새로운
KeywordGuideBalloon컴포넌트가 깔끔하게 구현되었습니다:
- position 기반 동적 스타일링이 명확합니다
- CSS border를 활용한 꼬리 렌더링이 적절합니다
- 닫기 기능과 커스텀 텍스트 지원이 잘 구현되었습니다
src/app/(main)/teampsylog/_components/LogNote.tsx (3)
11-11: 새로운 가이드 기능 추가를 위한 import와 state가 적절합니다.KeywordGuideBalloon 컴포넌트 import와 showGuide state 추가가 올바르게 구현되었습니다.
Also applies to: 28-28
80-88: 가이드 벌룬 렌더링 로직이 올바르게 구현되었습니다.조건부 렌더링, 반응형 포지셔닝, 이벤트 핸들러가 모두 적절하게 구현되었습니다.
169-182: 우측 패널 로직 단순화가 코드 가독성을 개선했습니다.조건부 렌더링 로직이 간결하고 명확하게 개선되었습니다.
src/app/(main)/teampsylog/_components/KeywordBar.tsx (4)
2-2: 가이드 기능을 위한 import와 state가 적절합니다.필요한 Hook들과 컴포넌트 import, 그리고 showGuide state가 올바르게 추가되었습니다.
Also applies to: 8-8, 33-33
66-73: 가이드 표시 로직과 주석이 명확합니다.편집 플로우의 첫 단계(슬롯 선택)를 안내하는 로직이 올바르게 구현되었으며, 주석도 명확합니다.
85-119: 데스크톱 레이아웃 리팩토링이 잘 구현되었습니다.프로필/키워드 영역과 액션 버튼을 명확하게 분리하여 코드 구조가 개선되었습니다.
82-84: 이 문제는 실제 이슈가 아닙니다. KeywordGuideBalloon 컴포넌트의textprop은 선택사항(optional)이며, 기본값으로'변경할 대표 키워드를\n먼저 선택하세요'를 사용합니다. text prop을 전달하지 않을 경우 컴포넌트가 자동으로 기본 텍스트를 표시합니다.Likely an incorrect or invalid review comment.
woneeeee
left a comment
woneeeee
left a comment
There was a problem hiding this comment.
확인했습니다!! NaN까지.. 감사합니당 ㅜㅜ 이번엔 잘 됐으면 좋겠네요...
2 participants
✅ PR 유형
어떤 변경 사항이 있었나요?
📌 관련 이슈번호
✅ Key Changes
📸 스크린샷 or 실행영상
keyword-toast-mo.mp4
keyword-toast.mp4
🎸 기타 사항 or 추가 코멘트
Summary by CodeRabbit
릴리스 노트
새로운 기능
개선 사항
✏️ Tip: You can customize this high-level summary in your review settings.