Tip: Gemini CLI로 구현하기 — Category 페이지네이션 & ErrorPage 프롬프트: gemini "src/components/Category.jsx와 ErrorPage.jsx를 작성해줘. Category는 useParams로 type(now_playing, popular, top_rated)을 받아서 TMDB API movie/[type]?page=[page]를 호출하고, 이전/다음 버튼으로 페이지네이션을 구현해줘. 최대 페이지는 [최대 페이지 수]으로 제한해줘. ErrorPage는 404 메시지와 홈으로 돌아가기 Link를 포함해줘." 사용 가이드: [최대 페이지 수]를 원하는 숫자(기본: 20)로 바꾼다. 카테고리 한글 이름이 필요하면 프롬프트에 … 더 읽기
Tip: Gemini CLI로 구현하기 — 영화 상세 페이지 프롬프트: gemini "src/components/MovieDetail.jsx를 작성해줘. useParams로 영화 ID를 받아서 TMDB API movie/[id]?append_to_response=videos로 상세정보와 예고편을 한 번에 가져와야 해. 포스터, 원제, 개봉일, 러닝타임, 장르 배지, 줄거리를 표시하고, YouTube Trailer가 있으면 Modal 팝업으로 재생해줘. useNavigate로 뒤로가기 버튼도 만들어줘. axios 인스턴스는 [axios 경로]에서 가져와줘." 사용 가이드: [axios 경로]를 ../api/axios로 바꾼다. 예고편 … 더 읽기
Tip: Gemini CLI로 구현하기 — Section & Card 컴포넌트 프롬프트: gemini "src/components/Section.jsx와 Card.jsx를 작성해줘. Section은 title, items, category props를 받아서 제목, 더보기 링크(/category/[category]), [열 수]열 그리드 카드 목록을 렌더링해줘. Card는 item prop을 받아서 TMDB 포스터 이미지(https://image.tmdb.org/t/p/w500/), 호버 시 줄거리+평점 오버레이, 하단에 제목+평점+개봉일을 표시해줘. Tailwind CSS group-hover를 활용해줘." 사용 가이드: [열 수]를 원하는 그리드 열 개수(기본: … 더 읽기
Tip: Gemini CLI로 구현하기 — Home 메인 페이지 프롬프트: gemini "src/components/Home.jsx를 작성해줘. useOutletContext로 now, popular, topRated, loading 데이터를 받아야 해. 상단에는 배경 영상([영상 파일명])과 인기영화 첫 번째 항목을 히어로로 표시하고, 하단에는 현재 상영작/인기 영화/최고 평점 3개의 Section 컴포넌트를 보여줘. 로딩 중에는 Spinner를 표시해줘." 사용 가이드: [영상 파일명]을 public 폴더에 넣은 동영상 파일 이름으로 바꾼다(예: video.mp4). … 더 읽기
Tip: Gemini CLI로 구현하기 — Header & Footer 컴포넌트 프롬프트: gemini "src/components/Header.jsx와 Footer.jsx를 작성해줘. Header는 fixed로 상단에 고정되고, [로고명] 텍스트 클릭 시 홈(/)으로 이동해야 해. Container 컴포넌트(./UI에서 import)를 사용해서 내용을 가운데 정렬해줘. Footer는 하단에 로고와 저작권 문구를 표시해줘. Tailwind CSS를 사용해줘." 사용 가이드: [로고명]을 서비스 이름(예: GOFLEX)으로 바꾼다. 네비게이션 메뉴가 필요하면 프롬프트 마지막에 "헤더에 [메뉴 … 더 읽기
Tip: Gemini CLI로 구현하기 — App.jsx 레이아웃 & 데이터 로딩 프롬프트: gemini "src/App.jsx를 작성해줘. TMDB API에서 movie/now_playing, tv/airing_today, movie/top_rated 데이터를 Promise.all로 동시에 가져와야 해. useState로 3개의 상태를 관리하고, useEffect로 앱 시작 시 한 번만 호출해줘. 가져온 데이터는 Outlet의 context로 하위 페이지에 전달하고, Header와 Footer도 포함해줘. axios 인스턴스는 [axios 인스턴스 경로]에서 가져와줘." 사용 가이드: [axios 인스턴스 … 더 읽기
Tip: Gemini CLI로 구현하기 — 공통 UI 컴포넌트 프롬프트: gemini "src/components/UI.jsx 파일을 작성해줘. Button(variant, className, children, …props), Spinner(message, full, className), Modal(onClose, children), Container(className, children) 4개의 공통 컴포넌트가 필요해. Tailwind CSS를 사용하고, Button의 variant별 스타일은 src/index.css에 @layer components로 정의해줘. [추가 요구사항]" 사용 가이드: [추가 요구사항]에 필요한 변형이 있으면 추가하고, 없으면 삭제한다. CSS 부분은 src/index.css에 붙여넣는다. 1. … 더 읽기
Tip: Gemini CLI로 구현하기 — Axios 인스턴스 & API 연결 프롬프트: gemini "src/api/axios.js 파일을 작성해줘. axios.create()로 TMDB API 전용 인스턴스를 만들어야 해. baseURL은 https://api.themoviedb.org/3/, api_key는 import.meta.env.[API 키 환경변수명], language는 ko-KR, region은 KR로 설정해줘." 사용 가이드: .env 파일에 VITE_TMDB_API_KEY=본인의키를 저장한다. [API 키 환경변수명]을 VITE_TMDB_API_KEY로 바꾼다. 1. API란 무엇인가? API(Application Programming Interface, 에이피아이)는 프로그램끼리 데이터를 주고받는 약속된 … 더 읽기
Tip: Gemini CLI로 구현하기 — 진입점 & 라우팅 설정 프롬프트: gemini "React 19 + Vite 프로젝트에서 main.jsx와 App.jsx를 작성해줘. main.jsx에는 BrowserRouter로 앱을 감싸고, App.jsx에는 Routes를 구성해줘. 페이지 컴포넌트는 Home, MovieDetail, Category, ErrorPage이고, 경로는 각각 /, /movie/:id, /category/:type, * 야. [파일 경로: src/]" 사용 가이드: [파일 경로]를 실제 src 폴더 경로로 바꾼다. 생성된 파일을 src/ 폴더에 … 더 읽기
Tip: Gemini CLI로 구현하기 — 프로젝트 생성 & 패키지 설치 프롬프트: gemini "React 19 + Vite + Tailwind CSS 4 프로젝트를 생성해줘. 프로젝트 이름은 [프로젝트명]이야. react-router, axios, @fortawesome/react-fontawesome, @fortawesome/free-solid-svg-icons, swiper 패키지도 함께 설치해줘. .env 파일 예시와 vite.config.js도 작성해줘." 사용 가이드: 터미널을 열고 프로젝트를 생성할 폴더로 이동한다. [프로젝트명]을 원하는 이름으로 바꾼 뒤 실행한다. 1. GOFLIX 프로젝트 … 더 읽기