/init

/memory add "스택(기술 조합): React + Vite + Tailwind CSS (프론트), FastAPI + Python (백엔드), HuggingFace Inference API (AI)"
/memory add "AI 엔드포인트(주소): https://router.huggingface.co/v1/chat/completions / 모델: Qwen/Qwen2.5-72B-Instruct"
/memory add "스타일 규칙: 불필요한 CSS 금지, 식별자(변수·함수 이름) 짧게, Tailwind 유틸리티 클래스(스타일 클래스)만 사용"
/memory add "컴포넌트(화면 조각): UI.jsx에 Button/Spinner/Modal/Container 공용 컴포넌트 존재"

/memory reload

@frontend/src/components/Card.jsx
@frontend/src/components/Header.jsx
@frontend/src/main.jsx
@frontend/src/components/UI.jsx

찜하기 기능을 추가해줘. 아래 순서대로 진행하고 각 단계마다 내 승인을 받아줘.

[1단계] useFavorites 커스텀 훅(공용 기능 파일) 생성 (frontend/src/hooks/useFavorites.js)
- localStorage(브라우저 저장소) key: 'fav'
- 반환값: { favs, toggle, has }

[2단계] Card.jsx 수정
- faHeart 클릭 시 toggle 호출
- has(item.id) 가 true면 노란색, false면 회색

[3단계] /favorites 페이지 컴포넌트(화면 조각) 생성 (frontend/src/components/Favorites.jsx)
- TMDB /movie/:id API로 찜 목록 상세 정보 불러오기
- Card 컴포넌트 그리드(격자) 표시
- 빈 목록이면 "찜한 영화가 없습니다" 텍스트

[4단계] main.jsx 라우터(페이지 경로 설정)에 /favorites 경로 추가

@backend/main.py
@frontend/src/components/Chatbot.jsx
@frontend/src/components/MovieDetail.jsx

AI 챗봇이 현재 보고 있는 영화 정보를 알고 대답하도록 수정해줘.

[백엔드 수정 — main.py]
- Msg 모델에 context(전달 정보) 필드 추가: context: str = ""
- ask_ai 함수: context가 있으면 messages 맨 앞에 {"role": "system", "content": context} 삽입
- 기존 /chat 엔드포인트(주소) 유지

[프론트엔드 수정]
- MovieDetail.jsx: 영화 제목, 줄거리, 장르를 Chatbot에 movieCtx prop(전달 값)으로 전달
- Chatbot.jsx: movieCtx prop을 받아 fetch body에 context 필드 포함
  context 형식: "현재 영화: {제목}. 장르: {장르}. 줄거리: {줄거리 앞 100자}"

@frontend/src/components/Category.jsx
@frontend/src/components/UI.jsx

Category.jsx의 페이지네이션(페이지 넘기기 버튼)을 무한 스크롤로 교체해줘.

[구현 방식]
- IntersectionObserver(화면 끝 감지 기능)로 목록 맨 아래 div 감지
- 다음 페이지 데이터를 기존 배열에 누적(이어 붙이기, replace 금지)
- 로딩 중: 기존 Spinner 컴포넌트(화면 조각) 재사용
- 마지막 페이지 도달 시: "모든 영화를 불러왔습니다" 텍스트 표시
- type 변경 시 목록·page·hasMore 초기화

[제약]
- 기존 api/axios.js 인스턴스(설정 객체) 유지
- 불필요한 state(상태 값) 추가 금지
- 이전/다음 버튼 완전 제거

@backend/main.py
@frontend/src/components/Chatbot.jsx

챗봇 응답을 스트리밍(실시간 글자 출력)으로 변경해줘.
기존 /chat 엔드포인트(주소)는 그대로 두고 /chat/stream을 새로 추가한다.

[백엔드 — /chat/stream 추가]
- FastAPI StreamingResponse 사용
- requests 대신 httpx를 사용해 HuggingFace API stream=True 호출
- SSE 형식으로 청크(조각) 전송: "data: {chunk}\n\n"
- 스트림 종료 시: "data: [DONE]\n\n"

[프론트엔드 — Chatbot.jsx 수정]
- fetch + ReadableStream + TextDecoder로 청크(조각) 수신
- 봇 말풍선 마지막 항목을 실시간으로 업데이트 (setMessages로 마지막 항목 교체)
- 스트리밍(전송) 완료 전 전송 버튼 disabled(비활성) 유지
- BACKEND 상수를 /chat/stream 으로 교체

[주의]
- requirements.txt에 httpx 추가

@frontend/src/components/Header.jsx

Header.jsx에 카테고리 네비게이션(상단 메뉴바)을 추가해줘.

[데스크탑 — md 이상 넓은 화면]
- 가로 링크: 현재상영작 → /category/now_playing
               인기영화   → /category/popular
               최고평점   → /category/top_rated
- useLocation으로 현재 경로 감지 → 활성(현재 페이지) 링크 text-yellow-400

[모바일 — md 미만 좁은 화면]
- 햄버거 버튼(☰, 줄 세 개 버튼) 클릭 시 세로 메뉴 토글(열고 닫기)
- 메뉴 열림/닫힘 state(상태 값): open (boolean, 참/거짓 값)
- 링크 클릭 시 메뉴 닫힘

[제약]
- 기존 GOFLEX 로고 Link 유지
- 새 컴포넌트(화면 조각) 파일 생성 금지 (Header.jsx 내에서만 처리)

/memory reload

@frontend/src/components/Home.jsx
@frontend/src/components/Section.jsx
@frontend/src/components/Card.jsx
@frontend/src/components/MovieDetail.jsx

GSAP(지샙)을 사용해 주요 화면에 애니메이션(움직임 효과)을 추가해줘.
패키지 설치부터 단계별로 진행하고 각 단계마다 내 승인을 받아줘.

[1단계] 패키지 설치
- npm install gsap

[2단계] Home.jsx — 히어로(메인 화면 상단) 텍스트 등장 애니메이션
- useEffect 안에서 gsap.from() 사용
- 대상: h2(타이틀), p(설명), 버튼
- 효과: 아래에서 위로 올라오며 페이드인(서서히 나타남)
- 옵션: duration 0.8, y: 40, opacity: 0, stagger(순차 지연): 0.2

[3단계] Section.jsx — 섹션(영화 목록 구역) 스크롤 트리거(스크롤 위치 감지) 등장
- ScrollTrigger(스크롤 트리거) 플러그인 등록: gsap.registerPlugin(ScrollTrigger)
- 대상: 섹션 제목(h2)
- 효과: 왼쪽에서 슬라이드인(밀려 들어옴)
- 옵션: scrollTrigger.start "top 85%", duration 0.6, x: -30, opacity: 0

[4단계] Card.jsx — 카드 그리드(격자) 순차 등장
- 카드 컨테이너(감싸는 요소)에 ref(참조 값) 연결
- gsap.from()으로 카드 일괄 적용
- 효과: 아래에서 올라오며 페이드인
- 옵션: duration 0.5, y: 20, opacity: 0, stagger 0.05

[5단계] MovieDetail.jsx — 포스터(영화 이미지)·텍스트 등장
- 포스터: 왼쪽에서 슬라이드인, duration 0.7, x: -50, opacity: 0
- 텍스트 영역: 오른쪽에서 슬라이드인, duration 0.7, x: 50, opacity: 0

[제약]
- 기존 Tailwind 클래스 구조 유지
- CSS transition 속성과 중복 적용 금지
- 컴포넌트(화면 조각) 언마운트(화면에서 제거) 시 애니메이션 인스턴스(실행 객체) 정리 필수
  → return () => ctx.revert() 패턴 사용

@frontend/src/components/UI.jsx
@frontend/src/components/Card.jsx
@frontend/src/components/Header.jsx
@frontend/src/components/Chatbot.jsx

tailwind-merge(테일윈드 머지)가 이미 package.json에 설치되어 있다.
이 라이브러리를 활용해 Tailwind 클래스 충돌(같은 속성 클래스가 중복 적용되는 문제)을 방지하도록 수정해줘.
아래 순서대로 진행하고 각 단계마다 내 승인을 받아줘.

[tailwind-merge 역할]
- Tailwind 클래스를 합칠 때 같은 속성끼리 충돌하면 마지막 클래스만 남기고 나머지 제거
- 예시: twMerge("px-2 px-4") → "px-4" (중복 제거)
- 예시: twMerge("bg-red-500", isActive && "bg-yellow-400") → 조건에 따라 올바른 색상 1개만 적용

[1단계] UI.jsx — Button, Spinner, Modal, Container 수정
- import { twMerge } from 'tailwind-merge' 추가
- 각 컴포넌트의 className 병합 부분을 twMerge()로 교체
  예시: className={`${VARIANTS[variant]} ${className}`}
     → className={twMerge(VARIANTS[variant], className)}

[2단계] Card.jsx 수정
- import { twMerge } from 'tailwind-merge' 추가
- 조건부 클래스 적용 부분을 twMerge()로 교체

[3단계] Header.jsx 수정
- 스크롤 여부에 따른 조건부 클래스를 twMerge()로 교체

[4단계] Chatbot.jsx 수정
- 메시지 말풍선의 조건부 클래스를 twMerge()로 교체

[제약]
- twMerge import는 각 파일 상단에 추가
- 기존 클래스 내용(값) 변경 금지, 병합 방식만 교체
- 새 패키지 설치 금지 (이미 설치됨)

@frontend/src/App.jsx
@frontend/src/components/Card.jsx
@frontend/src/components/Section.jsx
@frontend/src/components/MovieDetail.jsx
@frontend/src/api/axios.js

GOFLEX 앱의 렌더링(화면 그리기) 성능을 개선해줘.
아래 순서대로 진행하고 각 단계마다 내 승인을 받아줘.

[1단계] App.jsx — API 호출 결과 캐싱(임시 저장)
- sessionStorage(세션 저장소, 탭 닫으면 삭제)에 API 결과 저장
  → key: 'movies_cache', 형식: JSON.stringify({ now, popular, topRated, ts })
  → 재방문 시 현재 시각 - ts(저장 시각) < 5분이면 API 호출 생략

[2단계] MovieDetail.jsx — 이미지 지연 로딩(lazy loading)
- img 태그에 loading="lazy" 속성 추가
  → 뷰포트(화면에 보이는 영역) 밖 이미지는 스크롤할 때 불러옴
- poster_path가 없으면 회색 배경 div로 대체

[3단계] Section.jsx — 목록 슬라이싱(일부만 표시)
- 홈 화면 각 섹션은 최대 8개만 표시
  → items.slice(0, 8) 적용
- "더보기" 링크는 기존 /category/:type 연결 유지

[제약]
- 기존 api/axios.js 인스턴스(설정 객체) 수정 금지
- 새 패키지 설치 금지
- React.memo, useMemo, useCallback 사용 금지 (리액트 컴파일러가 자동 처리)

@frontend/src/components/Chatbot.jsx
@frontend/src/components/Card.jsx
@frontend/src/components/Category.jsx
@frontend/src/components/MovieDetail.jsx
@frontend/src/components/UI.jsx

사용자가 더 편하게 쓸 수 있도록 UX(사용자 경험)를 개선해줘.
아래 순서대로 진행하고 각 단계마다 내 승인을 받아줘.

[1단계] Card.jsx — 스켈레톤 UI(로딩 중 자리 표시자) 추가
- 이미지 로딩(불러오기) 전까지 회색 사각형 애니메이션 표시
- img onLoad 이벤트로 로딩 완료 감지 → 스켈레톤 숨김
- animate-pulse(Tailwind 깜빡임 클래스) 활용

[2단계] MovieDetail.jsx — 뒤로가기 스크롤 위치 복원
- 페이지 진입 시 window.scrollTo(0, 0)으로 상단 이동
- 뒤로가기 버튼 클릭 시 navigate(-1) 유지 (기존 동작 그대로)

[3단계] Chatbot.jsx — 메시지 복사 버튼 추가
- 봇 말풍선에 마우스 올리면(hover) 복사 버튼 표시
- 클릭 시 navigator.clipboard.writeText()로 클립보드(복사 임시 저장소)에 복사
- 복사 완료 후 1.5초 동안 "복사됨" 텍스트 표시 후 원래대로 복귀

[4단계] Category.jsx — 카테고리 변경 시 스크롤 상단 이동
- type 변경 useEffect(부수 효과 처리)에 window.scrollTo(0, 0) 추가

[5단계] UI.jsx — Toast(토스트, 화면 하단 잠깐 나타나는 알림) 컴포넌트 추가
- 함수 시그니처(호출 방식): showToast(message, duration = 2000)
- 화면 하단 중앙에 표시, duration(지속 시간) 이후 자동 사라짐
- Chatbot 복사 완료, 찜하기 추가/제거 시 활용 가능하도록 export

[제약]
- 새 패키지 설치 금지
- 불필요한 CSS 추가 금지 (Tailwind 클래스만 사용)