플젝 2주차 : 6월 17일

오늘 작업 요약

1. Chatbot 컴포넌트 구현

- 사용자 입력 및 버튼 클릭 시 서버로 메시지 전송, 응답 받아 챗로그에 출력

- 첫 응답은 타이핑 애니메이션 효과 적용

- 응답 데이터에서 session_id를 추출하여 상태로 저장 → 세션 유지

- useState, useEffect 사용해 상태 관리

 

2. API 연결 오류 해결

1) 오류 현상: http://localhost:8000/chat/send 요청 시 404 발생

2) 해결 과정:

- .env 수정:

- VITE_BACKEND_URL=http://localhost:8001

- 백엔드 실행 명령어: uvicorn app.main:app --host 0.0.0.0 --port 8001 --reload

- 프론트에서 .env의 주소를 읽어 정상 연결됨

 

3. DocumentCard 클릭 → EditorPage 이동 기능 추가

목적

문서 카드 클릭 시 해당 문서의 ID에 따라 EditorPage로 이동하여 문서 상세 편집 가능하도록 구현

 

주요 구현 내용

1) DocumentCard.tsx 수정

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

<div onClick={() => navigate(`/editor/${id}`)}>

- 카드 클릭 시 navigate를 통해 /editor/:id 경로로 이동

- 반드시 템플릿 리터럴 백틱(`)을 사용해야 문자열로 정확히 인식됨

- navigate(/editor/${id}) ← 이런 식은 정규표현식처럼 해석될 수 있으므로 주의

 

2) AppRouter에서 라우트 등록

<Route path="/editor/:id" element={<EditorPage />} />

- :id는 URL 파라미터로, EditorPage 내부에서 useParams()로 접근 가능