feat(frontend): Phase 1 - 리팩토링을 위한 frontend-temp 프로젝트 셋업

- frontend-temp/ 폴더 생성 (Strangler Fig Pattern) - package.json: clsx 추가, 버전 2.0.0 - vite.config.js: @ path alias 추가 - 기본 폴더 구조 생성 (api, components, hooks, pages, stores, utils, constants) - docker-compose.yml: fromis9-frontend-dev 서비스 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-21 17:04:18 +09:00 · 2026-01-21 17:04:18 +09:00 · 4ec368c936
commit 4ec368c936
parent 9d365dcadb
22 changed files with 3461 additions and 0 deletions
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -12,6 +12,19 @@ services:
      - app
    restart: unless-stopped
  fromis9-frontend-dev:
    build: ./frontend-temp
    container_name: fromis9-frontend-dev
    labels:
      - "com.centurylinklabs.watchtower.enable=false"
    volumes:
      - ./frontend-temp:/app
    depends_on:
      - fromis9-backend
    networks:
      - app
    restart: unless-stopped
  fromis9-backend:
    build: ./backend
    container_name: fromis9-backend
--- a/frontend-temp/Dockerfile
+++ b/frontend-temp/Dockerfile
@ -0,0 +1,4 @@
 # 개발 모드
 FROM node:20-alpine
 WORKDIR /app
 CMD ["sh", "-c", "npm install --include=dev && npm run dev -- --host 0.0.0.0"]
--- a/frontend-temp/index.html
+++ b/frontend-temp/index.html
@ -0,0 +1,22 @@
 <!DOCTYPE html>
 <html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
    />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <title>fromis_9 - 프로미스나인</title>
    <link
      rel="stylesheet"
      as="style"
      crossorigin
      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
    />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
 </html>
--- a/frontend-temp/package-lock.json
+++ b/frontend-temp/package-lock.json
--- a/frontend-temp/package.json
+++ b/frontend-temp/package.json
@ -0,0 +1,44 @@
 {
  "name": "fromis9-frontend",
  "private": true,
  "version": "2.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@babel/runtime": "^7.28.6",
    "@tanstack/react-query": "^5.90.16",
    "@tanstack/react-virtual": "^3.13.18",
    "canvas-confetti": "^1.9.4",
    "clsx": "^2.1.1",
    "dayjs": "^1.11.19",
    "framer-motion": "^11.0.8",
    "lucide-react": "^0.344.0",
    "react": "^18.2.0",
    "react-calendar": "^6.0.0",
    "react-colorful": "^5.6.1",
    "react-device-detect": "^2.2.3",
    "react-dom": "^18.2.0",
    "react-infinite-scroll-component": "^6.1.1",
    "react-intersection-observer": "^10.0.0",
    "react-ios-time-picker": "^0.2.2",
    "react-linkify": "^1.0.0-alpha",
    "react-photo-album": "^3.4.0",
    "react-router-dom": "^6.22.3",
    "react-window": "^2.2.3",
    "swiper": "^12.0.3",
    "zustand": "^5.0.9"
  },
  "devDependencies": {
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.22",
    "postcss": "^8.5.6",
    "tailwindcss": "^3.4.18",
    "vite": "^5.4.1"
  }
 }
--- a/frontend-temp/postcss.config.js
+++ b/frontend-temp/postcss.config.js
@ -0,0 +1,6 @@
 export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
 };
--- a/frontend-temp/src/App.jsx
+++ b/frontend-temp/src/App.jsx
@ -0,0 +1,41 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { isMobile } from "react-device-detect";
 /**
 * 프로미스나인 팬사이트 메인 앱
 *
 * Phase 1: 프로젝트 셋업 완료
 * - 기본 구조 및 설정 파일 생성
 * - React Query, React Router 설정
 * - Tailwind CSS 설정
 *
 * 다음 단계에서 유틸리티, 스토어, API, 컴포넌트들이 추가될 예정
 */
 function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/"
          element={
            <div className="min-h-screen flex items-center justify-center bg-gray-50">
              <div className="text-center">
                <h1 className="text-2xl font-bold text-primary mb-2">
                  fromis_9 Frontend Refactoring
                </h1>
                <p className="text-gray-600">
                  Phase 1 완료 - 프로젝트 셋업
                </p>
                <p className="text-sm text-gray-500 mt-2">
                  디바이스: {isMobile ? "모바일" : "PC"}
                </p>
              </div>
            </div>
          }
        />
      </Routes>
    </BrowserRouter>
  );
 }
 export default App;
--- a/frontend-temp/src/api/.gitkeep
+++ b/frontend-temp/src/api/.gitkeep
--- a/frontend-temp/src/components/album/.gitkeep
+++ b/frontend-temp/src/components/album/.gitkeep
--- a/frontend-temp/src/components/common/.gitkeep
+++ b/frontend-temp/src/components/common/.gitkeep
--- a/frontend-temp/src/components/layout/.gitkeep
+++ b/frontend-temp/src/components/layout/.gitkeep
--- a/frontend-temp/src/components/schedule/.gitkeep
+++ b/frontend-temp/src/components/schedule/.gitkeep
--- a/frontend-temp/src/constants/.gitkeep
+++ b/frontend-temp/src/constants/.gitkeep
--- a/frontend-temp/src/hooks/.gitkeep
+++ b/frontend-temp/src/hooks/.gitkeep
--- a/frontend-temp/src/index.css
+++ b/frontend-temp/src/index.css
@ -0,0 +1,85 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
 /* 기본 스타일 */
 body {
  background-color: #fafafa;
  color: #1a1a1a;
 }
 /* 스크롤바 스타일 */
 ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
 }
 ::-webkit-scrollbar-track {
  background: #f1f1f1;
 }
 ::-webkit-scrollbar-thumb {
  background: #548360;
  border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
  background: #456e50;
 }
 /* View Transitions API - 앨범 커버 이미지 부드러운 전환 */
 ::view-transition-old(root),
 ::view-transition-new(root) {
  animation-duration: 0.3s;
 }
 /* 앨범 커버 트랜지션 */
 ::view-transition-group(*) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 ::view-transition-old(*) {
  animation: fade-out 0.3s ease-out both;
 }
 ::view-transition-new(*) {
  animation: fade-in 0.3s ease-in both;
 }
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
 }
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
 }
 /* 라이트박스 스크롤바 숨기기 */
 .lightbox-no-scrollbar::-webkit-scrollbar {
  display: none;
 }
 /* 스크롤바 숨기기 유틸리티 */
 .scrollbar-hide::-webkit-scrollbar {
  display: none;
 }
 .scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
 }
 /* Swiper autoHeight 지원 */
 .swiper-slide {
  height: auto !important;
 }
--- a/frontend-temp/src/main.jsx
+++ b/frontend-temp/src/main.jsx
@ -0,0 +1,23 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import App from "./App";
 import "./index.css";
 const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5분
      retry: 1,
      refetchOnWindowFocus: false,
    },
  },
 });
 ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
 );
--- a/frontend-temp/src/pages/mobile/.gitkeep
+++ b/frontend-temp/src/pages/mobile/.gitkeep
--- a/frontend-temp/src/pages/pc/.gitkeep
+++ b/frontend-temp/src/pages/pc/.gitkeep
--- a/frontend-temp/src/stores/.gitkeep
+++ b/frontend-temp/src/stores/.gitkeep
--- a/frontend-temp/src/utils/.gitkeep
+++ b/frontend-temp/src/utils/.gitkeep
--- a/frontend-temp/tailwind.config.js
+++ b/frontend-temp/tailwind.config.js
@ -0,0 +1,21 @@
 /** @type {import('tailwindcss').Config} */
 export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: "#548360",
          dark: "#456E50",
          light: "#6A9A75",
        },
        secondary: "#F5F5F5",
        accent: "#FFD700",
      },
      fontFamily: {
        sans: ["Pretendard", "Inter", "sans-serif"],
      },
    },
  },
  plugins: [],
 };
--- a/frontend-temp/vite.config.js
+++ b/frontend-temp/vite.config.js
@ -0,0 +1,27 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import path from "path";
 export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  server: {
    host: true,
    port: 80,
    allowedHosts: true,
    proxy: {
      "/api": {
        target: "http://fromis9-backend:80",
        changeOrigin: true,
      },
      "/docs": {
        target: "http://fromis9-backend:80",
        changeOrigin: true,
      },
    },
  },
 });