Dev-MAMOKEY · wzrabbit · Jun 9, 2026 · May 23, 2026 · May 29, 2026 · May 29, 2026
diff --git a/README.md b/README.md
diff --git a/react-api/.env.example b/react-api/.env.example
@@ -0,0 +1,3 @@
+VITE_TMDB_ACCESS_TOKEN=your_api_key_here
+VITE_TMDB_BASE_URL=https://api.themoviedb.org/3
+VITE_TMDB_IMAGE_BASE_URL=https://image.tmdb.org/t/p/w500
diff --git a/react-api/.gitignore b/react-api/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Environment variables
+.env
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/react-api/README.md b/react-api/README.md
@@ -0,0 +1,38 @@
+## 환경 변수 설정
+
+이 프로젝트는 TMDB API를 사용하기 때문에 실행 전에 환경 변수 설정이 필요합니다.
+
+보안상 실제 API 키가 들어 있는 `.env` 파일은 GitHub에 업로드하지 않습니다.
+대신 프로젝트에 포함된 `.env.example` 파일을 참고하여 직접 `.env` 파일을 생성해야 합니다.
+
+### 1. `.env` 파일 생성
+
+프로젝트 루트 경로에 `.env` 파일을 생성합니다.
+
+```bash
+.env
+```
+
+### 2. `.env.example` 참고하여 값 입력
+
+`.env.example` 파일에는 필요한 환경 변수 형식이 작성되어 있습니다.
+
+```env
+VITE_TMDB_BASE_URL=https://api.themoviedb.org/3
+VITE_TMDB_ACCESS_TOKEN=your_api_key_here
+VITE_TMDB_IMAGE_BASE_URL=https://image.tmdb.org/t/p/w500
+```
+
+위 내용을 참고하여 `.env` 파일에 본인의 TMDB Access Token을 입력합니다.
+
+```env
+VITE_TMDB_BASE_URL=https://api.themoviedb.org/3
+VITE_TMDB_ACCESS_TOKEN=본인의_TMDB_ACCESS_TOKEN
+VITE_TMDB_IMAGE_BASE_URL=https://image.tmdb.org/t/p/w500
+```
+
+### 3. 주의사항
+
+`.env` 파일에는 개인 API 키와 같은 민감한 정보가 포함될 수 있으므로 GitHub에 업로드하면 안 됩니다.
+
+따라서 `.env` 파일은 `.gitignore`에 추가하여 관리하고, 다른 사용자는 `.env.example` 파일을 참고해 각자 환경 변수를 설정해야 합니다.
diff --git a/react-api/eslint.config.js b/react-api/eslint.config.js
@@ -0,0 +1,21 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+      parserOptions: { ecmaFeatures: { jsx: true } },
+    },
+  },
+])
diff --git a/react-api/index.html b/react-api/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>react-api</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>