♻️ Refactor : 채팅 로딩 추가 & 북마크 - 상세 페이지만 삭제#140
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough채봇 로딩 애니메이션 기능을 추가하고, 이벤트 카드의 좋아요 버튼 숨김 기능을 구현했습니다. 채봇 입력 버튼 색상을 업데이트하고, 관련 이벤트 렌더링 로직을 단순화했습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI as ChattingInput
participant State as ChatPage State
participant API as Chatbot API
participant Loader as ChattingLoading
User->>UI: 메시지 입력 후 전송 클릭
UI->>State: 메시지 전송 트리거
State->>State: isLoading = true
State->>Loader: 렌더링 (show)
State->>API: 챗봇 응답 요청
API-->>State: 응답 수신
State->>State: 메시지 포맷팅 및<br/>isLoading = false
Loader-->>UI: 언마운트 (hide)
UI->>User: 업데이트된 채팅 표시
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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 |
|
🏷️ Labeler has automatically applied labels based on your PR title, branch name, or commit message. |
![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
🧹 Nitpick comments (1)
src/styles/globals.css (1)
255-271: 키프레임 애니메이션 중복 제거 권장
dotJump1,dotJump2,dotJump3키프레임이 동일한 정의를 가지고 있습니다. 하나의 키프레임으로 통합하고 유틸리티 클래스에서만 지연 시간을 다르게 설정하는 것이 더 효율적입니다.다음과 같이 리팩토링을 권장합니다:
-@keyframes dotJump1 { - 0% { transform: translateY(0); opacity: 0.5; } - 50% { transform: translateY(-0.35rem); opacity: 1; } - 100% { transform: translateY(0); opacity: 0.5; } -} - -@keyframes dotJump2 { - 0% { transform: translateY(0); opacity: 0.5; } - 50% { transform: translateY(-0.35rem); opacity: 1; } - 100% { transform: translateY(0); opacity: 0.5; } -} -@keyframes dotJump3 { +@keyframes dotJump { 0% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-0.35rem); opacity: 1; } 100% { transform: translateY(0); opacity: 0.5; } } .animate-dot1 { - animation: dotJump1 0.7s infinite ease-in-out; + animation: dotJump 0.7s infinite ease-in-out; } .animate-dot2 { - animation: dotJump2 0.7s infinite ease-in-out; + animation: dotJump 0.7s infinite ease-in-out; animation-delay: 0.15s; } .animate-dot3 { - animation: dotJump3 0.7s infinite ease-in-out; + animation: dotJump 0.7s infinite ease-in-out; animation-delay: 0.3s; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/pages/chatbot/components/ChattingInput.tsx(1 hunks)src/pages/chatbot/components/ChattingLoading.tsx(1 hunks)src/pages/chatbot/index.tsx(4 hunks)src/pages/events/[id].tsx(1 hunks)src/pages/mypage/events/[id].tsx(2 hunks)src/shared/components/container/EventCard.tsx(5 hunks)src/styles/globals.css(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (5)
src/pages/chatbot/components/ChattingLoading.tsx (1)
src/pages/chatbot/components/ChattingBubble.tsx (2)
Chatting(32-44)ChattingProps(28-30)
src/shared/components/container/EventCard.tsx (2)
src/shared/icons/components/icon.tsx (1)
Icon(58-130)src/shared/hooks/events/useBookmark.ts (1)
eventId(8-48)
src/styles/globals.css (1)
src/shared/components/flipCard/FlipCard.tsx (1)
FlipCardProps(12-62)
src/pages/chatbot/index.tsx (1)
src/pages/chatbot/components/ChattingLoading.tsx (1)
ChattingLoading(3-11)
src/pages/events/[id].tsx (1)
src/shared/lib/utils.ts (1)
cn(71-73)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-and-deploy
🔇 Additional comments (10)
src/pages/chatbot/components/ChattingInput.tsx (1)
53-53: 전송 버튼 색상 변경 확인 완료bg-mint-500에서 bg-pink-200으로 색상이 변경되어 PR 목표에 부합합니다.
src/pages/mypage/events/[id].tsx (1)
17-17: 리다이렉트 조건 로직 개선이전 조건
(!isLoading || !eventDetail)은 논리적으로 항상 true가 될 수 있었습니다. 새로운 조건(isError || !eventDetail)은 로딩이 완료된 후 에러 상태를 정확하게 확인합니다.src/shared/components/container/EventCard.tsx (3)
21-21: hideLike 프로퍼티 추가 확인북마크 버튼을 조건부로 숨기는 기능이 올바르게 구현되었습니다. 기본값
false로 기존 동작이 유지됩니다.Also applies to: 34-34
107-128: 북마크 버튼 조건부 렌더링 구현 확인
!hideLike조건으로 북마크 버튼이 올바르게 제어됩니다. medium과 large 사이즈 모두 일관되게 적용되었습니다.Also applies to: 155-176
52-52: small 사이즈 레이아웃 변경 확인 완료git 이력 검증 결과, 해당 변경은 의도적입니다:
변경사항은 "관련행사 분기별 처리" 커밋에서 수행되었으며, small 사이즈 EventCard는
src/pages/events/[id].tsx의 관련 행사 섹션에서만 2곳 사용됩니다.w-full과justify-start는 부모 그리드 컨테이너(max-w-[35.4rem])의 레이아웃 맥락에서 적절한 변경으로, 다른 페이지에는 영향이 없습니다.src/pages/events/[id].tsx (2)
98-98: 메인 이벤트 카드에 북마크 숨김 적용 확인
hideLike={true}가 추가되어 PR 목표대로 이벤트 상세 페이지의 메인 카드에서 북마크 버튼이 제거됩니다.
101-139: 관련 행사 렌더링 로직 단순화 및 북마크 동작 확인
isEmptyItem타입 가드를 제거하고 렌더링 로직을 단순화했습니다. 코드가 더 명확해졌습니다.다만, 관련 행사 카드들에는
hideLike프로퍼티가 전달되지 않아 기본값false가 적용되어 북마크 버튼이 표시됩니다. 이것이 의도된 동작인지 확인이 필요합니다. PR 목표는 "이벤트 상세 페이지에서만 북마크 삭제 기능 제거"인데, 관련 행사 섹션도 이벤트 상세 페이지의 일부입니다.또한 관련 행사 카드의
address와description이 빈 문자열로 설정되어 있습니다. small 사이즈에서는 이 필드들이 표시되지 않으므로 문제없지만, 의도를 명확히 하기 위해 주석을 추가하는 것을 고려해보세요.src/pages/chatbot/index.tsx (1)
125-129: 로딩 컴포넌트 렌더링 확인
isLoading상태에 따라ChattingLoading컴포넌트가 조건부로 렌더링됩니다. 레이아웃도 적절하게 구성되었습니다.src/pages/chatbot/components/ChattingLoading.tsx (1)
3-11: 로딩 컴포넌트 구현 확인세 개의 애니메이션 점으로 구성된 간단하고 효과적인 로딩 인디케이터입니다. CSS 애니메이션을 활용하여 성능도 우수합니다.
src/styles/globals.css (1)
273-283: 애니메이션 유틸리티 클래스 구현 확인지연 시간(delay)을 다르게 설정하여 순차적인 애니메이션 효과를 만들었습니다. 의도한 대로 동작합니다.
|
|
||
| export default function ChatPage() { | ||
| const router = useRouter(); | ||
| const [isLoading, setIsLoading] = useState(false); |
There was a problem hiding this comment.
로딩 상태 관리 로직 구현 확인
isLoading 상태가 메시지 전송 전후로 올바르게 설정됩니다.
다만, catch 블록(Line 75-77)에서 에러 발생 시 isLoading이 리셋되지 않아 로딩 인디케이터가 계속 표시될 수 있습니다.
다음과 같이 수정을 권장합니다:
} catch (err) {
+ setIsLoading(false);
console.error('챗봇 응답 실패:', err);
}Also applies to: 61-68
🤖 Prompt for AI Agents
In src/pages/chatbot/index.tsx around line 32 (and similarly lines 61–68), the
isLoading state is set true before sending messages but not reset in the catch
block, causing the loading indicator to remain; update the error handling so
isLoading is set to false when an exception occurs (either by adding
setIsLoading(false) inside the catch block or refactoring to use a finally block
to always reset isLoading after the async operation), and ensure any early
returns still reset isLoading.
2 participants
🔥 작업 내용
🔗 이슈
PR Point (To Reviewer)
채팅
답변 받아오는 동안 로딩 애니메이션 추가 해놨습니다(이뻐요)
그리고 전송 버튼도 핑크로 바꿨습니다.
북마크 상세
도저히 연동이 오류 나서 이벤트 - 상세 페이지에서만 북마크 없앴습니다.
나머지 이벤트 페이지 / 마이페이지 / 마이페이지 이벤트 상세에선 다 됩니다.
이벤트 페이지 관련 행사
1개뜨면 밑에 1개만 뜨도록 했고 2개 다 없는 경우에는 아예 안뜨게 했습니다.
이게 더 깔끔하고 이쁠거 같아서요
📸 스크린샷
채팅 로딩
20251115-1458-58.0124398.mp4
이벤트 페이지 & 이벤트 상세
마이페이지 & 마이페이지 상세
Summary by CodeRabbit
릴리스 노트
새로운 기능
스타일
버그 수정