🔗API & ✨Feat : 챗봇 api 연결

[KongMezu]

🔥 작업 내용

• 챗봇 api 연결 완료
• 프로필 이미지 추가

🤔 추후 작업 사항

• 서버 문제 해결 후 작동.. 확인

🔗 이슈

• close #[api&feat] 챗봇 페이지 프로필 추가 api 연결 #117

PR Point (To Reviewer)

챗봇 api 연결

챗봇 api 연결 했습니다.
로그인 유저 : 다시 챗봇 접속시 12시간 동안 이전 채팅 기록 확인 가능
비로그인 유저 : 새로 접속시 리셋

그리고 api 에서 받아오는 글자도 이모티콘, 마침표(.) 에 맞게 줄바꿈이 가능하도록 해놨습니다.

+) instance axios 경로 수정

📸 피그마 스크린샷 or 기능 GIF

비로그인

-.Clipchamp.4.mp4

로그인

-.Clipchamp.5.mp4

Summary by CodeRabbit

• 새로운 기능

  • 챗봇 세션 자동 생성·로컬 저장 및 만료 시 재생성·재시도 자동화
  • 채팅 흐름 통합: 메시지 전송→서버 호출→응답 포맷 후화면에 추가
  • 입력 컴포넌트에 비활성화(disabled) 제어 추가

• 버그 수정 / 개선

  • 세션 상태 기반 입력·전송 버튼 비활성화 일관 적용
  • API 오류 처리·로그 강화 및 세션 만료 처리 개선
  • 채팅 히스토리 로컬에 저장(최신 10개, 만료 정책 적용)

• UI

  • 로고 이미지 교체, ARIA 라벨 정비
  • 메시지 내용의 줄바꿈 보존 개선

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
af-fe	Ready	Preview	Comment	Nov 14, 2025 10:38am

[coderabbitai]

Warning

Rate limit exceeded

@KongMezu has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 14 minutes and 24 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 8c53017 and 73f2c6b.

📒 Files selected for processing (1)

• src/shared/api/instance.ts (1 hunks)

Walkthrough

챗봇 API 클라이언트와 세션 관리 훅(useChatbot)이 추가되고, 챗봇 페이지가 훅 기반 세션·메시지 흐름으로 리팩터링되었습니다. ChattingInput에 disabled?: boolean prop이 도입되어 세션 없을 때 입력/전송이 차단됩니다.

Changes

Cohort / File(s)	변경 요약
ChattingInput 변경 src/pages/chatbot/components/ChattingInput.tsx	ChattingInputProps에 disabled?: boolean 추가. 컴포넌트에서 disabled를 파괴하고, 키다운 및 전송 클릭을 disabled일 때 무시하도록 처리하며 버튼에 disabled 속성 적용.
챗봇 페이지 리팩터링 src/pages/chatbot/index.tsx	useChatbot 훅 도입 및 메시지 흐름을 훅의 messages로 통합. handleSend를 async로 변경해 사용자 메시지 추가 → API 호출 → 봇 메시지 추가 순으로 처리. 세션 유무에 따라 ChattingInput 비활성화 및 UI/ARIA 정리, Image 컴포넌트 사용.
API 클라이언트 추가 src/shared/api/chatbot/chatbot.ts	Axios 기반 클라이언트 추가. getBaseUrl(), createChatSession() 및 fetchChatResponse(message, sessionId) 구현. 다양한 응답 형태 처리, NEXT_PUBLIC_BACKEND_URL 검증, 404(세션 만료) 특수 처리(SESSION_EXPIRED) 및 브라우저 로컬스토리지 정리, 에러/로깅 포함.
세션 훅 추가 src/shared/hooks/chatbot/useChatbot.ts	useChatbot() 훅 추가. 로컬스토리지 기반 세션 부트스트랩(chatbot:sessionId), 사용자별 히스토리 로드/만료 검사, 메시지 상태 및 addMessage 제공. useMutation으로 응답 페칭, SESSION_EXPIRED 시 세션 재생성 후 재시도 로직 포함.
ChattingBubble 스타일 src/pages/chatbot/components/ChattingBubble.tsx	메시지 내용 div에 whiteSpace: 'pre-line' 스타일 추가로 줄바꿈 보존.

Sequence Diagram(s)

sequenceDiagram
    participant User as 사용자
    participant Input as ChattingInput
    participant Page as ChatPage
    participant Hook as useChatbot
    participant API as BackendAPI

    User->>Input: 텍스트 입력 후 Send
    alt Input.disabled == true
        Input-->>User: 입력/전송 무시
    else
        Input->>Page: onSend(message)
        Page->>Page: messages += {role: "user", content}
        Page->>Hook: mutate(message)
        Hook->>API: fetchChatResponse(message, sessionId)
        alt SESSION_EXPIRED (404)
            API-->>Hook: 404 / SESSION_EXPIRED
            Hook->>API: createChatSession()
            API-->>Hook: new sessionId
            Hook->>Hook: sessionId 갱신 & localStorage 저장
            Hook->>API: fetchChatResponse(message, new sessionId)
        end
        API-->>Hook: answer
        Hook-->>Page: mutation success (answer)
        Page->>Page: messages += {role: "bot", content: answer}
        Page->>Input: render 업데이트 및 자동 스크롤
    end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

• 주의 검토 지점:
  • src/shared/api/chatbot/chatbot.ts의 응답 파싱, 404/SESSION_EXPIRED 분기 및 localStorage 정리 로직
  • src/shared/hooks/chatbot/useChatbot.ts의 초기화(로컬스토리지 동기화), 히스토리 만료/보존 로직, 세션 재생성 후 재시도 흐름
  • src/pages/chatbot/index.tsx의 비동기 메시지 업데이트 순서와 에러 처리
  • ChattingInput.tsx의 disabled 전파가 이벤트(키다운/클릭)를 정확히 차단하는지

Possibly related PRs

• ✨Feat: 챗봇페이지 제작 #83 — 동일 챗봇 컴포넌트(ChattingInput, ChattingBubble, 챗봇 페이지) 관련 변경을 도입/수정한 PR로 코드 레벨 연관성 높음.

Suggested labels

feat

Suggested reviewers

• skyblue1232

Poem

🐰 세션 씨앗 땅에 심고,
로컬에 살포시 숨겼네.
입력 잠기면 쉬어가고,
만료면 새 세션 불러와 답하네.
🥕✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목은 '🔗API & ✨Feat : 챗봇 api 연결'로 변경사항의 주요 내용(챗봇 API 연결)을 명확하게 설명하고 있습니다.
Description check	✅ Passed	PR 설명이 주어진 템플릿의 대부분 섹션을 포함하고 있으며, 작업 내용, 추후 작업 사항, 이슈 링크, 리뷰어 포인트, 스크린샷/GIF가 모두 작성되어 있습니다.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🏷️ Labeler has automatically applied labels based on your PR title, branch name, or commit message.
Please verify that they are correct before merging.

[github-actions]

🏷️ Labeler has automatically applied labels based on your PR title, branch name, or commit message.
Please verify that they are correct before merging.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (4)

src/pages/chatbot/components/ChattingInput.tsx (1)

11-21: disabled 처리 방향은 적절하지만, input 자체 비활성화도 고려해볼 만 합니다.

• onKeyDown/onClick를 disabled로 가드해서 실제 전송이 막히는 구조는 잘 정리된 것 같습니다.
• 다만 UX/접근성 관점에서 “입력창이 비활성화됐다”는 의도를 더 분명히 하려면, 아래처럼 input에도 비활성 상태를 반영하는 것을 고려해볼 수 있습니다.
  • disabled={disabled} 또는 readOnly={disabled} + aria-disabled={disabled} 추가
  • 비활성 시 스타일(색상/커서 등)도 함께 조정하면 사용자에게 상태가 더 명확히 전달됩니다.

현재 구현도 기능적으로는 문제 없어서 추후 리팩터링으로 천천히 봐도 될 것 같습니다.

Also applies to: 39-52

src/pages/chatbot/index.tsx (1)

1-5: 세션 연계 메시지 전송 플로우는 잘 구성되어 있습니다. 다만 에러/대기 상태 UX를 조금 더 보완할 수 있습니다.

• useChatbot의 mutateAsync와 sessionId를 이용한 handleSend 로직 구성은 자연스럽고, 세션 없을 때 early return 하는 것도 방어적으로 좋습니다.
• 다만 현재는:
  • 서버 오류(500/E600 등) 시 console.error만 남기고 UI에는 아무 피드백이 없어 사용자가 “왜 답이 안 오는지” 알기 어렵고,
  • 응답 대기 중에도 추가 메시지를 계속 보낼 수 있어, 빠르게 여러 번 전송 시 응답 순서가 뒤섞일 수 있습니다.
• React Query가 제공하는 isPending/isError 등의 상태를 활용해서:
  • const { mutateAsync: sendChat, sessionId, isPending, isError } = useChatbot();
  • <ChattingInput onSend={handleSend} disabled={!sessionId || isPending} />
  • 에러 시 챗봇의 시스템 메시지(예: “지금은 서버 상태가 좋지 않아요. 잠시 후 다시 시도해 주세요.”)를 messages에 추가
    같은 형태로 UX를 개선하면 사용자가 상태를 더 명확히 인지할 수 있을 것 같습니다.

또한 상단의 'use client';는 Pages Router 환경에선 동작상 문제는 없지만, 이 레포 컨벤션(페이지는 기본적으로 클라이언트 컴포넌트) 기준으론 불필요하므로 제거해도 좋겠습니다.
Based on learnings

Also applies to: 23-27, 30-37, 39-59, 107-107

src/shared/hooks/chatbot/useChatbot.ts (1)

1-44: 세션 관리 흐름은 안정적입니다. 세션 생성 실패 시 재시도/에러 노출 경로만 추가되면 더 좋겠습니다.

• SESSION_KEY 캐시, inited ref로 StrictMode 2회 실행을 막는 패턴, createChatSession/fetchChatResponse 연계 모두 자연스럽습니다.
• 다만 createChatSession이 한 번 실패하면:
  • sessionId는 계속 null이고,
  • inited.current가 true라서 동일 탭에서 더 이상 재부트스트랩이 발생하지 않아,
  • 상위 컴포넌트 입장에선 입력창이 영구적으로 disabled 상태가 될 수 있습니다.

추가로 고려해볼 만한 점입니다.

• 이 hook에서 error 상태(부트스트랩 중의 에러/세션 미생성)를 별도로 관리해서 반환하거나,
• 상위에서 “다시 시도” 버튼을 눌렀을 때 localStorage.removeItem(SESSION_KEY) 후 부트스트랩 함수를 재호출할 수 있는 API를 노출하는 방식도 있습니다.
• 이미 mutation 객체 전체를 반환하고 있으니, 상위 컴포넌트에서 isPending, isError를 활용해 UX를 풍부하게 만드는 것도 권장됩니다.

큰 구조는 잘 잡혀 있고, 위 내용은 이후 에러 처리를 개선할 때 참고용으로 보시면 될 것 같습니다.

src/shared/api/chatbot/chatbot.ts (1)

1-92: API 클라이언트는 방어적으로 잘 작성되었습니다. 에러 정보 구조화와 타임아웃만 추가되면 더욱 활용도가 높을 것 같습니다.

좋은 점:

• validateStatus: () => true로 모든 응답을 직접 검사하고, 4xx/5xx에서 명시적으로 에러를 발생시키는 패턴은 명확합니다.
• 세션/챗 응답에서 result/data/루트 필드를 모두 탐색해 sessionId/answer를 얻는 부분도 실제 백엔드 응답 변화에 어느 정도 유연하게 대응하도록 설계되어 있습니다.
• NEXT_PUBLIC_BACKEND_URL에서 trailing slash를 제거하는 것도 URL 결합 시 실수를 줄여줍니다.

개선 제안:

• 현재는 new Error(\챗봇 응답 실패: ${res.status}`)처럼 HTTP status만 포함해 에러를 던지기 때문에, 백엔드에서 내려주는 도메인 에러 코드(예: code: 'E600'`)를 클라이언트에서 구분 처리하기 어렵습니다.

  • 예를 들어 아래처럼 커스텀 에러 객체를 만들어 status, code, message 등 메타데이터를 담아 두면, 상위 레벨에서 “E600이면 이런 안내 메시지를 띄운다” 같은 분기 처리가 쉬워집니다.

    const apiError = new Error(`챗봇 응답 실패: ${res.status}`);
    (apiError as any).status = res.status;
    (apiError as any).code = (res.data as any)?.code;
    throw apiError;

• 장기적으로는 axios에 timeout 옵션을 추가해, 서버가 응답을 아주 오래 끌고 가는 상황에서 UI가 무기한 대기하지 않도록 하는 것도 고려해볼 만합니다.

현재 동작 자체에는 문제 없어 보이고, 위 내용은 추후 서버 에러(E600 등)를 프론트에서 더 세밀하게 처리해야 할 때 도움이 될 개선 포인트입니다.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 81659e0 and 5206f59.

⛔ Files ignored due to path filters (1)

• public/assets/chatbot.svg is excluded by !**/*.svg

📒 Files selected for processing (4)

• src/pages/chatbot/components/ChattingInput.tsx (2 hunks)
• src/pages/chatbot/index.tsx (4 hunks)
• src/shared/api/chatbot/chatbot.ts (1 hunks)
• src/shared/hooks/chatbot/useChatbot.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-10-31T17:34:04.352Z

Learnt from: jjangminii
Repo: geulDa/FE PR: 64
File: src/pages/map/result/components/ResultMap.tsx:3-3
Timestamp: 2025-10-31T17:34:04.352Z
Learning: The geulDa/FE project uses Next.js Pages Router (not App Router), so components should import useRouter from 'next/router' and should not use the 'use client' directive.

Applied to files:

• src/pages/chatbot/index.tsx

🧬 Code graph analysis (3)

src/shared/hooks/chatbot/useChatbot.ts (1)

src/shared/api/chatbot/chatbot.ts (2)

• createChatSession (28-56)
• fetchChatResponse (59-92)

src/pages/chatbot/components/ChattingInput.tsx (1)

src/shared/hooks/useChattingInput.ts (1)

• useChattingInput (8-49)

src/pages/chatbot/index.tsx (3)

src/shared/hooks/chatbot/useChatbot.ts (1)

• useChatbot (9-44)

src/pages/chatbot/components/ChattingBubble.tsx (1)

• Chatting (32-43)

src/pages/chatbot/components/ChattingInput.tsx (1)

• ChattingInput (16-60)

⏰ 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

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

ARIA 설정은 전반적으로 좋지만, 첫 Chatting의 aria-label prop은 실제로 사용되지 않을 가능성이 큽니다.

• <main>에 role='log', aria-live='polite', aria-label='채팅 내용'을 부여한 점, bottomRef에 aria-hidden='true'를 준 점은 SR 관점에서 잘 잡혀 있습니다.

• 다만 첫 번째 Chatting 컴포넌트에 넘긴 aria-label:

  <Chatting
    message='...'
    variant='received'
    aria-label='글다의 메시지: ...'
  />

  은 현재 Chatting 구현(메시지/variant만 사용, 나머지 props를 DOM에 전달하지 않음) 상 실제 DOM까지 전달되지 않을 가능성이 높습니다. 타입 정의가 message/variant만 허용한다면 TS 에러도 발생할 수 있습니다.

• 선택지는 두 가지 정도가 있어 보입니다.

  1. aria-label을 여기서 제거하고, 필요하면 Chatting 내부 로직/문구를 조정해서 접근성을 통일성 있게 관리한다.
  2. Chatting의 props를 ChattingProps & React.HTMLAttributes<HTMLDivElement>처럼 확장하고, 내부에서 ...rest를 bubble에 스프레드해 외부에서 전달한 aria-*를 그대로 내려보낸다.

현재 구조에선 ①이 간단하고, ②는 Chatting을 더 범용적으로 쓰고 싶을 때 고려할 만한 방향입니다.

Also applies to: 98-104

---

---

🏁 Script executed:

```shell
#!/bin/bash
# Find the Chatting component definition
fd -t f -e tsx -e ts | head -20 | xargs grep -l "export.*Chatting" 2>/dev/null | head -5

Length of output: 94

---

🏁 Script executed:

#!/bin/bash
# Search for Chatting component definition with ast-grep
ast-grep --pattern 'export $_ Chatting'

Length of output: 0

---

🏁 Script executed:

#!/bin/bash
# Also search more broadly for Chatting
rg -n "component.*Chatting|function Chatting|const Chatting" --type=tsx --type=ts -A 5 | head -50

Length of output: 27

---

🏁 Script executed:

#!/bin/bash
# Check the current file to see both sections mentioned
cat src/pages/chatbot/index.tsx | head -110 | tail -50

Length of output: 1309

---

🏁 Script executed:

#!/bin/bash
# Look for ChattingProps type definition
rg -n "type ChattingProps|interface ChattingProps" --type=tsx --type=ts -A 10

Length of output: 27

---

---

🏁 Script executed:

```shell
#!/bin/bash
# Find Chatting component files
fd "Chatting" --type f

Length of output: 131

---

🏁 Script executed:

#!/bin/bash
# Search for Chatting in components directory
fd "." src/pages/chatbot/components/ --type f

Length of output: 94

---

🏁 Script executed:

#!/bin/bash
# Search for ChattingProps definition - use grep directly
grep -r "ChattingProps" src/pages/chatbot/ 2>/dev/null

Length of output: 238

---

🏁 Script executed:

#!/bin/bash
# Search for Chatting component definition - broader search
grep -r "function Chatting\|const Chatting\|export.*Chatting" src/pages/chatbot/ 2>/dev/null | grep -v node_modules | head -20

Length of output: 206

---

🏁 Script executed:

#!/bin/bash
# Look at ChattingBubble since it was found
cat src/pages/chatbot/components/ChattingBubble.tsx

Length of output: 884

---

aria-label prop이 Chatting 컴포넌트에 전달되지 않습니다.

검증 결과, 리뷰 지적이 정확합니다. src/pages/chatbot/components/ChattingBubble.tsx의 ChattingProps 인터페이스는 message와 variant만 허용하며, 컴포넌트는 추가 props를 DOM에 전달하지 않습니다.

라인 85-88에서 전달한 aria-label='글다의 메시지: ...'은 무시되고, Chatting 컴포넌트의 기본 제공 aria-label={variant === 'sent' ? '내 메시지' : '상대방 메시지'}만 사용됩니다. 더 구체적인 접근성 정보를 담으려던 의도가 실현되지 않습니다.

해결안:

1. 라인 85-88의 aria-label prop을 제거하고 컴포넌트 기본값 사용
2. 또는 ChattingProps를 React.HTMLAttributes<HTMLDivElement>와 합치고 내부에서 ...rest 스프레드 처리

현재 구조에선 ①이 간단합니다.

🤖 Prompt for AI Agents

In src/pages/chatbot/index.tsx around lines 69 to 90, the aria-label prop passed
to the Chatting component is ignored because ChattingProps only allows message
and variant and the component doesn't forward extra props; remove the explicit
aria-label from lines 85-88 so the Chatting component's built-in aria-label
logic is used, or alternatively update ChattingBubble.tsx to extend
React.HTMLAttributes<HTMLDivElement> and spread ...rest onto the root element to
accept and forward custom aria attributes (option 1 is the simpler fix in this
context).

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (2)

src/shared/api/chatbot/chatbot.ts (2)

78-83: API 클라이언트에서 localStorage를 직접 조작하는 것은 관심사 분리 측면에서 개선이 필요합니다.

fetchChatResponse 함수 내에서 localStorage를 직접 제거하고 있습니다. 이는 API 클라이언트의 책임 범위를 벗어나며, 호출하는 쪽(hook)에서 SESSION_EXPIRED 에러를 받아 처리하도록 하는 것이 더 깔끔합니다.

다음과 같이 리팩토링을 고려해보세요:

  if (res.status === 404 && res.data?.code === 'E602') {
-   if (typeof window !== 'undefined') {
-     localStorage.removeItem('chatbot:sessionId');
-   }
    throw new Error('SESSION_EXPIRED');
  }

localStorage 정리는 useChatbot.ts의 에러 핸들러로 이동:

// useChatbot.ts의 catch 블록에서
if (err.message === 'SESSION_EXPIRED') {
  if (typeof window !== 'undefined') {
    localStorage.removeItem(SESSION_KEY);
  }
  // ... 새 세션 생성
}

---

78-78: 들여쓰기 이슈.

if 문 앞에 불필요한 공백이 있습니다.

- if (res.status === 404 && res.data?.code === 'E602') {
+  if (res.status === 404 && res.data?.code === 'E602') {

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5206f59 and 08fb368.

📒 Files selected for processing (2)

• src/shared/api/chatbot/chatbot.ts (1 hunks)
• src/shared/hooks/chatbot/useChatbot.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/shared/hooks/chatbot/useChatbot.ts (1)

src/shared/api/chatbot/chatbot.ts (2)

• createChatSession (28-56)
• fetchChatResponse (59-99)

⏰ 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 (5)

src/shared/api/chatbot/chatbot.ts (3)

3-19: API 응답 스키마가 불확실합니다.

SessionSuccess와 ChatSuccess 타입에서 여러 선택적 필드(result?, data?, sessionId?, answer?)를 정의하여 다양한 응답 형식을 처리하고 있습니다. 이는 백엔드 API 계약이 명확하지 않거나 일관성이 없음을 시사합니다.

백엔드 API 문서를 확인하여 정확한 응답 스키마를 파악하고, 가능하다면 단일 응답 형식으로 표준화하는 것을 권장합니다. 이렇게 하면 코드가 더 명확해지고 예상치 못한 응답 형식 처리 로직을 줄일 수 있습니다.

---

21-25: 환경 변수 검증이 적절합니다.

getBaseUrl 함수가 환경 변수를 확인하고 trailing slash를 제거하여 일관된 URL을 보장합니다.

---

27-56: 세션 생성 로직이 견고합니다.

다양한 응답 형식을 처리하고 적절한 에러 로깅을 제공합니다. validateStatus: () => true를 사용하여 수동으로 상태 코드를 확인하는 방식도 적절합니다.

src/shared/hooks/chatbot/useChatbot.ts (2)

9-11: inited.current 패턴은 적절하지만 제한사항이 있습니다.

React 18 Strict Mode의 이중 렌더링을 방지하기 위한 일반적인 패턴입니다. 하지만 컴포넌트가 언마운트 후 재마운트되면 inited.current가 여전히 true이므로 bootstrap이 실행되지 않습니다.

이것이 의도된 동작인지 확인하세요. 만약 재마운트 시 새 세션을 생성해야 한다면, cleanup에서 inited.current = false로 재설정해야 합니다.

---

1-7: 'use client' 지시어와 상수 정의가 적절합니다.

Next.js 클라이언트 컴포넌트임을 명시하고 localStorage 키를 상수로 정의하여 재사용성과 유지보수성을 높였습니다.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

잠재적 메모리 누수: 컴포넌트 언마운트 후 상태 업데이트 가능성.

bootstrap 함수가 비동기로 실행되는 동안 컴포넌트가 언마운트되면, setSessionId가 언마운트된 컴포넌트에서 호출되어 경고가 발생할 수 있습니다.

cleanup 함수를 추가하여 이를 방지하세요:

  useEffect(() => {
    if (inited.current) return;
    inited.current = true;
+   let mounted = true;

    const bootstrap = async () => {
      try {
        const cached = typeof window !== 'undefined' ? localStorage.getItem(SESSION_KEY) : null;
        if (cached) {
+         if (mounted) {
            setSessionId(cached);
+         }
          return;
        }
        const id = await createChatSession();
+       if (mounted) {
          setSessionId(id);
          if (typeof window !== 'undefined') localStorage.setItem(SESSION_KEY, id);
+       }
      } catch (e) {
        console.error('세션 생성 실패:', e);
+       if (mounted) {
          setSessionId(null);
+       }
      }
    };

    bootstrap();
+   return () => {
+     mounted = false;
+   };
  }, []);

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	useEffect(() => {
	if (inited.current) return;
	inited.current = true;
	const bootstrap = async () => {
	try {
	const cached = typeof window !== 'undefined' ? localStorage.getItem(SESSION_KEY) : null;
	if (cached) {
	setSessionId(cached);
	return;
	}
	const id = await createChatSession();
	setSessionId(id);
	if (typeof window !== 'undefined') localStorage.setItem(SESSION_KEY, id);
	} catch (e) {
	console.error('세션 생성 실패:', e);
	setSessionId(null);
	}
	};
	bootstrap();
	}, []);
	useEffect(() => {
	if (inited.current) return;
	inited.current = true;
	let mounted = true;
	const bootstrap = async () => {
	try {
	const cached = typeof window !== 'undefined' ? localStorage.getItem(SESSION_KEY) : null;
	if (cached) {
	if (mounted) {
	setSessionId(cached);
	}
	return;
	}
	const id = await createChatSession();
	if (mounted) {
	setSessionId(id);
	if (typeof window !== 'undefined') localStorage.setItem(SESSION_KEY, id);
	}
	} catch (e) {
	console.error('세션 생성 실패:', e);
	if (mounted) {
	setSessionId(null);
	}
	}
	};
	bootstrap();
	return () => {
	mounted = false;
	};
	}, []);

🤖 Prompt for AI Agents

In src/shared/hooks/chatbot/useChatbot.ts around lines 13 to 34, the async
bootstrap may call setSessionId after the component unmounts causing a
memory-leak/warning; add a mounted flag (or use a ref) that is true while
mounted and set to false in the effect cleanup, then check that flag before any
setSessionId or localStorage writes (and before console.error handling) so state
updates are only performed when mounted; ensure the flag is closed over by
bootstrap and the effect returns the cleanup that flips it to false.

[coderabbitai]

Actionable comments posted: 0

♻️ Duplicate comments (1)

src/pages/chatbot/index.tsx (1)

93-101: 프로필 이미지 추가는 적절하나, Chatting에 넘긴 aria-label은 여전히 무시됩니다

• next/image로 챗봇 프로필 SVG를 렌더링하고, 적절한 alt 텍스트를 부여한 부분은 좋습니다.

• 다만 첫 번째 Chatting 컴포넌트에 넘긴 aria-label:

  <Chatting
    message='안녕하세요, 글다에요! 부천시 여행에 대한 정보를 쉽게 알려드릴게요.'
    variant='received'
    aria-label='글다의 메시지: 안녕하세요, 글다에요! 부천시 여행에 대한 정보를 쉽게 알려드릴게요.'
  />

  은 현재 Chatting 구현(ChattingBubble.tsx의 ChattingProps가 message/variant만 허용, 나머지 props는 DOM으로 전달하지 않음) 상 실제 DOM까지 전달되지 않습니다. 이전 PR에서 지적된 것과 동일한 이슈입니다.

• 이 PR에서는 간단하게 이 aria-label prop을 제거하고, Chatting 컴포넌트 내부의 기본 aria-label 로직에 맡기는 쪽이 무난해 보입니다.

예시 diff:

-          <Chatting
-            message='안녕하세요, 글다에요! 부천시 여행에 대한 정보를 쉽게 알려드릴게요.'
-            variant='received'
-            aria-label='글다의 메시지: 안녕하세요, 글다에요! 부천시 여행에 대한 정보를 쉽게 알려드릴게요.'
-          />
+          <Chatting
+            message='안녕하세요, 글다에요! 부천시 여행에 대한 정보를 쉽게 알려드릴게요.'
+            variant='received'
+          />

Also applies to: 102-106

🧹 Nitpick comments (4)

src/pages/chatbot/components/ChattingBubble.tsx (1)

35-41: 멀티라인 메시지 표시용 whiteSpace: 'pre-line' 추가 좋습니다

API 응답에 포함된 줄바꿈을 그대로 살릴 수 있어서 실제 대화처럼 보여줄 수 있는 변경이라 좋아 보입니다. 스타일 일관성을 위해 나중에 여유가 있으면 Tailwind 유틸(whitespace-pre-line)이나 chatBubbleStyle에 클래스로 녹여 두는 것도 고려해 볼 만합니다.

src/pages/chatbot/index.tsx (3)

3-12: 라우터/훅/컴포넌트 import 구성 적절합니다

next/router로 useRouter를 가져오고, useChatbot 훅과 Chatting·ChattingInput 컴포넌트를 이 페이지에서만 사용하도록 묶은 구조가 Pages Router 컨벤션과 잘 맞습니다.
추가로, 이 파일은 Pages Router의 page 컴포넌트라 'use client' 지시문은 사실상 의미가 없으므로 스타일 측면에서 제거해도 됩니다.

---

34-45: formatAnswer 후처리 로직은 유용하지만, 브라우저 호환성과 유지보수에 유의하면 좋겠습니다

• 불릿(·, •)과 문장부호 뒤에 줄바꿈을 넣고, 이모지 주변 공백/줄바꿈을 정리하는 규칙은 챗봇 답변을 읽기 좋게 만드는 데 도움이 될 것 같습니다.
• 다만 \p{Emoji_Presentation}, \p{Emoji} 같은 유니코드 프로퍼티 정규식은 일부 구형 브라우저에서는 지원이 제한될 수 있으니, 타겟 브라우저 범위를 고려해두는 편이 좋습니다.
• 규칙이 꽤 많아졌으니, 나중에 포맷이 더 복잡해질 경우 주석으로 의도를 간단히 남기거나 별 유틸 함수 파일로 분리하는 것도 고려해볼 만합니다.

---

51-75: handleSend 흐름은 맞지만, 전송 중 상태 및 에러 UX를 조금 더 보완할 여지가 있습니다

• 공백 문자열 차단, sessionId 미존재 시 early return, 사용자 메시지 → 챗봇 응답 순으로 messages를 업데이트하는 흐름은 자연스럽습니다.
• 현재 실패 시에는 콘솔 로그만 남고 사용자에게는 아무 피드백이 없어, 실제 서비스 시에는 “답변을 가져오지 못했습니다” 같은 메시지를 봇 메시지로 추가해 주는 것도 좋겠습니다.
• useChatbot에서 React Query useMutation을 쓰고 있으므로, isPending 등을 이 컴포넌트로 끌어와 ChattingInput의 disabled에 함께 반영하면 연속 클릭/중복 전송을 방지할 수 있습니다. 예: disabled={!sessionId || isPending}.

Also applies to: 123-123

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 409fd03 and 558fc5b.

📒 Files selected for processing (2)

• src/pages/chatbot/components/ChattingBubble.tsx (1 hunks)
• src/pages/chatbot/index.tsx (4 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-10-31T17:34:04.352Z

Learnt from: jjangminii
Repo: geulDa/FE PR: 64
File: src/pages/map/result/components/ResultMap.tsx:3-3
Timestamp: 2025-10-31T17:34:04.352Z
Learning: The geulDa/FE project uses Next.js Pages Router (not App Router), so components should import useRouter from 'next/router' and should not use the 'use client' directive.

Applied to files:

• src/pages/chatbot/index.tsx

🧬 Code graph analysis (2)

src/pages/chatbot/index.tsx (4)

src/shared/hooks/chatbot/useChatbot.ts (1)

• useChatbot (9-63)

src/shared/lib/utils.ts (1)

• cn (71-73)

src/pages/chatbot/components/ChattingBubble.tsx (1)

• Chatting (32-44)

src/pages/chatbot/components/ChattingInput.tsx (1)

• ChattingInput (16-60)

src/pages/chatbot/components/ChattingBubble.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 (2)

src/pages/chatbot/index.tsx (2)

23-33: Message 타입 정의와 메시지 렌더링 흐름이 깔끔합니다

Message를 text와 variant('received' | 'sent')로 명확히 타입화해서 messages: Message[] 상태와 messages.map(...) 렌더링에 재사용한 점이 유지보수 측면에서 좋습니다. 메시지 필터링 없이 동일 배열을 그대로 화면에 맵핑하는 구조라, 이후 시스템 메시지나 상태 메시지를 추가할 때도 확장하기 수월해 보입니다.

Also applies to: 114-116

---

85-90: role='log' + aria-live + 스크롤 센티넬 조합이 접근성 측면에서 잘 잡혀 있습니다

<main role='log' aria-live='polite' aria-label='채팅 내용'>과 bottomRef를 이용한 자동 스크롤 패턴은 스크린리더 사용자에게도 새로운 메시지가 자연스럽게 읽히도록 하는 구조라 좋아 보입니다. aria-hidden='true'로 센티넬를 숨긴 것도 적절합니다.

Also applies to: 119-119

[coderabbitai]

Actionable comments posted: 2

♻️ Duplicate comments (2)

src/shared/hooks/chatbot/useChatbot.ts (2)

64-93: 이전 리뷰에서 지적된 메모리 누수 문제가 여전히 존재합니다.

비동기 bootstrap 실행 중 컴포넌트가 언마운트되면 setSessionId와 setMessages 호출이 언마운트된 컴포넌트에서 발생하여 메모리 누수 경고가 발생할 수 있습니다. 이전 리뷰에서 제안된 mounted 플래그를 사용한 cleanup 함수 추가가 필요합니다.

또한, Lines 76, 85에서 localStorage 접근 시 typeof window !== 'undefined' 체크가 누락되어 SSR 환경에서 문제가 발생할 수 있습니다.

다음과 같이 수정하세요:

  useEffect(() => {
    if (inited.current) return;
    inited.current = true;
+   let mounted = true;

    // 히스토리 로드 (로그인 유저만)
    if (isLoggedIn) {
      const prev = loadHistory();
+     if (mounted) {
        setMessages(prev);
+     }
    }

    const bootstrap = async () => {
      try {
-       const cached = localStorage.getItem(SESSION_KEY);
+       const cached = typeof window !== 'undefined' ? localStorage.getItem(SESSION_KEY) : null;

        if (cached) {
+         if (mounted) {
            setSessionId(cached);
+         }
          return;
        }

        const id = await createChatSession();
+       if (mounted) {
          setSessionId(id);
-         localStorage.setItem(SESSION_KEY, id);
+         if (typeof window !== 'undefined') {
+           localStorage.setItem(SESSION_KEY, id);
+         }
+       }
      } catch (e) {
        console.error('세션 생성 실패:', e);
+       if (mounted) {
          setSessionId(null);
+       }
      }
    };

    bootstrap();
+   return () => {
+     mounted = false;
+   };
  }, []);

---

96-113: 이전 리뷰에서 지적된 재시도 오류 처리가 여전히 누락되었습니다.

Line 104: createChatSession()이 실패하면 에러가 그대로 전파되어 사용자에게 명확한 피드백이 제공되지 않습니다.

또한, Line 106에서 localStorage.setItem 호출 시 typeof window !== 'undefined' 체크가 없습니다.

다음과 같이 수정하세요:

      } catch (err: any) {
        if (err.message === 'SESSION_EXPIRED') {
-         const newId = await createChatSession();
-         setSessionId(newId);
-         localStorage.setItem(SESSION_KEY, newId);
-
-         return await fetchChatResponse(body.message, newId);
+         try {
+           const newId = await createChatSession();
+           setSessionId(newId);
+           if (typeof window !== 'undefined') {
+             localStorage.setItem(SESSION_KEY, newId);
+           }
+
+           return await fetchChatResponse(body.message, newId);
+         } catch (retryErr) {
+           console.error('재시도 중 오류:', retryErr);
+           throw new Error('세션 재생성 실패. 나중에 다시 시도해주세요.');
+         }
        }

        throw err;
      }

🧹 Nitpick comments (1)

src/shared/hooks/chatbot/useChatbot.ts (1)

22-25: 성능 최적화 고려: memberId 계산을 메모이제이션할 수 있습니다.

getMemberIdFromToken()이 매 렌더마다 호출되어 localStorage 접근 및 JWT 디코딩이 반복됩니다. 컴포넌트가 자주 리렌더링되는 경우 useMemo로 최적화할 수 있습니다.

다음과 같이 수정할 수 있습니다:

+  const memberId = useMemo(() => getMemberIdFromToken(), []);
-  const memberId = getMemberIdFromToken();
   const isLoggedIn = !!memberId;

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 558fc5b and 3967986.

📒 Files selected for processing (2)

• src/pages/chatbot/index.tsx (4 hunks)
• src/shared/hooks/chatbot/useChatbot.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/pages/chatbot/index.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

src/shared/hooks/chatbot/useChatbot.ts (2)

src/shared/utils/token.ts (1)

• getMemberIdFromToken (25-39)

src/shared/api/chatbot/chatbot.ts (2)

• createChatSession (29-57)
• fetchChatResponse (60-99)

⏰ 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

[skyblue1232]

챗봇 구현이 UX 적으로 좋은 것 같고, 전체적으로 잘 작동하는 것 같네요! 수고하셨습니다!