Merge pull request #20 from enjoy-hack/fix/fsd

ehlung · web-flow · commit 690850ead19e · 2025-09-01T18:09:10.000+09:00
Fix/fsd
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.1.10",
+    "@tailwindcss/vite": "^4.1.12",
     "lucide-react": "^0.523.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -50,11 +50,10 @@
     "globals": "^16.0.0",
     "husky": "^9.1.7",
     "playwright": "^1.54.2",
-    "postcss": "^8.5.6",
     "prettier": "^3.6.0",
     "prop-types": "^15.8.1",
     "storybook": "^9.1.2",
-    "tailwindcss": "^4.1.10",
+    "tailwindcss": "^4.1.12",
     "vite": "^6.3.5",
     "vitest": "^3.2.4"
   }
diff --git a/src/app/index.jsx b/src/app/index.jsx
@@ -5,16 +5,16 @@ import {
   useLocation,
   Navigate,
 } from 'react-router-dom';
-import Home from './pages/home';
-import TrackInfo from './pages/info';
-import NotFound from './pages/NotFound';
-import Search from './pages/Search';
-import Splash from './pages/splash';
-import Header from './widgets/navigation/Header';
-import Footer from './widgets/navigation/Footer';
-import Login from './pages/login';
-import MyPage from './pages/my';
-import UploadSection from './components/UploadSection';
+import Home from '../pages/home';
+import TrackInfo from '../pages/info';
+import NotFound from '../pages/NotFound';
+import Search from '../pages/Search';
+import Splash from '../pages/splash';
+import Header from '../widgets/navigation/Header';
+import Footer from '../widgets/navigation/Footer';
+import Login from '../pages/login';
+import MyPage from '../pages/my';
+import UploadSection from '../components/UploadSection';
 
 function App() {
   return (
@@ -30,7 +30,7 @@ function AppContent() {
   const shouldHideHeaderFooter = hiddenRoutes.includes(location.pathname);
 
   return (
-    <div className="flex flex-col min-h-screen">
+    <div className="min-h-screen bg-blue-primary">
       {!shouldHideHeaderFooter && <Header />}
       <Routes>
         <Route path="/" element={<Navigate to="/login" replace />} />
diff --git a/src/assets/background.svg b/src/assets/background.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 1920 1081" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M100 0H1920V1040H400C234.32 1040 100 905.68 100 740V0Z" fill="white"/>
+<path d="M103.39 1036.61C119.63 1052.85 137.21 1067.35 156 1080H163.22C142.89 1066.77 123.77 1051.34 106.22 1033.78C40.3 967.86 4 880.22 4 787V70H50V762C50 849.61 84.12 931.98 146.07 993.93C188.47 1036.33 240.45 1065.69 297.12 1080H315.5C252.78 1067.81 195.09 1037.29 148.9 991.1C87.7 929.9 54 848.54 54 762V110H100V106H54V0H50V66H4V0H0V787.02C0 834.67 9.34 880.89 27.74 924.4C45.52 966.44 70.97 1004.19 103.39 1036.6V1036.61Z" fill="#84AFFB"/>
+<path d="M65.89 1074.12C39.58 1047.81 17.51 1018.26 0 985.94V994.16C17.1 1024.36 38.2 1052.1 63.06 1076.96C64.09 1077.99 65.15 1079 66.19 1080.02H71.91C69.89 1078.08 67.87 1076.12 65.88 1074.14L65.89 1074.12Z" fill="#84AFFB"/>
+</svg>
diff --git a/src/components/Character.jsx b/src/components/Character.jsx
@@ -4,11 +4,10 @@ import MyTrack from '../assets/mytrack.svg?react';
 function Character() {
   return (
     <div className="flex flex-col items-center gap-2">
-      <Logo className="w-20 h-20 block" />  {/* ✅ block 추가 */}
+      <Logo className="w-20 h-20 block" />
       <MyTrack />
     </div>
   );
-
 }
 
 export default Character;
diff --git a/src/components/CourseList.jsx b/src/components/CourseList.jsx
@@ -1,6 +1,6 @@
 import TrackHeader from './TrackHeader';
 import CourseItem from './CourseItem';
-import useTrackStore from '../stores/useTrackStore';
+import useTrackStore from '../entities/course/model/useTrackStore';
 
 // import { track1,track2,track3,track4,track5,track6,track7,track8 } from "../constants/mock";
 
diff --git a/src/components/MyInfo.jsx b/src/components/MyInfo.jsx
@@ -1,6 +1,6 @@
 import InfoLabel from './InfoLabel';
 import Chip from './Chip';
-import useUserStore from '../stores/useUserStore';
+import useUserStore from '../entities/user/model/useUserStore';
 
 const MyInfo = () => {
   const studentName = useUserStore((state) => state.studentName);
diff --git a/src/components/MySetTrack.jsx b/src/components/MySetTrack.jsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import useUserStore from '../stores/useUserStore';
+import useUserStore from '../entities/user/model/useUserStore';
 import Button from './Button';
-import { postUserTrack } from '../services/userTrackService';
+import { postUserTrack } from '../features/track-manamgement/api/userTrackService';
 
 const allTracks = [
   '인공지능 시스템',
diff --git a/src/components/TrackIntroTop.jsx b/src/components/TrackIntroTop.jsx
@@ -1,5 +1,5 @@
 import TrackIcon from '../assets/logo-character.svg?react'; // 일러스트 svg
-import useUserStore from '../stores/useUserStore';
+import useUserStore from '../entities/user/model/useUserStore';
 
 function TrackIntroTop() {
   const studentName = useUserStore((state) => state.studentName);
diff --git a/src/components/UploadSection.jsx b/src/components/UploadSection.jsx
@@ -3,8 +3,8 @@ import TrackStatusLarge from './TrackStatusLarge';
 import Chip from './Chip';
 import Button from './Button';
 import DeleteIcon from '../assets/delete.svg';
-import { uploadStudentExcel } from '../services/userDataService';
-import useTrackStore from '../stores/useTrackStore';
+import { uploadStudentExcel } from '../features/track-manamgement/api/userDataService';
+import useTrackStore from '../entities/course/model/useTrackStore';
 
 const UploadSection = ({ onClose }) => {
   const fileInputRef = useRef(null);
diff --git a/src/features/auth/api/userService.js b/src/features/auth/api/userService.js
@@ -1,6 +1,6 @@
 // API 요청 관련 함수
 // src/services/userService.js
-import { BASE_URL } from '../../../constants/api';
+import { BASE_URL } from '../../../shared/api/api';
 
 export const loginWithSejongPortal = async (
   sejongPortalId,
diff --git a/src/features/recommendation/api/trackRecommendService.js b/src/features/recommendation/api/trackRecommendService.js
@@ -1,4 +1,4 @@
-import { BASE_URL } from '../constants/api';
+import { BASE_URL } from '../../../shared/api/api';
 
 export const getRecommendTrackByProgress = async (studentId) => {
   const response = await fetch(
diff --git a/src/features/track-manamgement/api/userDataService.js b/src/features/track-manamgement/api/userDataService.js
@@ -1,6 +1,6 @@
 // src/services/userDataService.js
-import { BASE_URL } from '../../../constants/api';
-import useUserStore from '../../../stores/useUserStore';
+import { BASE_URL } from '../../../shared/api/api';
+import useUserStore from '../../../entities/user/model/useUserStore';
 
 export const uploadStudentExcel = async (file) => {
   const studentId = useUserStore.getState().studentId;
diff --git a/src/features/track-manamgement/api/userTrackService.js b/src/features/track-manamgement/api/userTrackService.js
@@ -1,4 +1,4 @@
-import { BASE_URL } from '../../../constants/api';
+import { BASE_URL } from '../../../shared/api/api';
 
 export const postUserTrack = async (studentId, trackName) => {
   const response = await fetch(
diff --git a/src/index.css b/src/index.css
@@ -1 +1,15 @@
-@import "tailwindcss";
+@import 'tailwindcss';
+
+@theme {
+  --color-blue-primary: #0259dd;
+  --color-blue-light-1: #4084e8;
+  --color-blue-light-2: #84affb;
+  --color-blue-light-3: #cfe7ff;
+  --color-blue-light-4: #dae6ff;
+
+  --color-red: #f24539;
+  --color-red-light-1: #fd685e;
+
+  --color-pink: #ff4ed0;
+  --color-green: #2ed9bf;
+}
diff --git a/src/main.jsx b/src/main.jsx
@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app';
+import './index.css';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <App />
-  </StrictMode>,
-)
+  </StrictMode>
+);
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
@@ -1,7 +1,7 @@
-import TrackTabs from "../components/TrackTabs";
-import CourseList from "../components/CourseList";
-import TrackStatusCard from "../components/TrackStatusCard";
-import UploadSection from "../components/UploadSection"; // 이전에 만든 UploadSection 컴포넌트
+import TrackTabs from "../../components/TrackTabs";
+import CourseList from "../../components/CourseList";
+import TrackStatusCard from "../../components/TrackStatusCard";
+import UploadSection from "../../components/UploadSection"; // 이전에 만든 UploadSection 컴포넌트
 import { useState } from "react";
 
 const TABS = [
diff --git a/src/pages/info/index.jsx b/src/pages/info/index.jsx
@@ -1,6 +1,6 @@
-import InfoList from '../components/InfoList';
-import TrackTabs from '../components/TrackTabs';
-import TrackIntroTop from '../components/TrackIntroTop';
+import InfoList from '../../components/InfoList';
+import TrackTabs from '../../components/TrackTabs';
+import TrackIntroTop from '../../components/TrackIntroTop';
 import { useState } from 'react';
 
 const TABS = [
diff --git a/src/pages/login/index.jsx b/src/pages/login/index.jsx
@@ -1,10 +1,11 @@
 import { useState } from 'react';
-import Input from '../components/Input';
-import Button from '../components/Button';
-import Character from '../components/Character';
-import { loginWithSejongPortal } from '../services/userService'; // 포털 API 호출 함수
+import Input from '../../components/Input';
+import Button from '../../components/Button';
+import Character from '../../components/Character';
+import { loginWithSejongPortal } from '../../features/auth/api/userService'; // 포털 API 호출 함수
 import { useNavigate } from 'react-router-dom'; // 리다이렉션을 위한 훅
-import useUserStore from '../stores/useUserStore';
+import useUserStore from '../../entities/user/model/useUserStore';
+import BackGround from '../../assets/background.svg?react';
 
 function Login() {
   const [id, setId] = useState('');
@@ -17,7 +18,7 @@ function Login() {
     setError('');
     setLoading(true);
 
-   try {
+    try {
       const userData = await loginWithSejongPortal(id, pw);
       useUserStore.getState().setStudentId(userData.studentIdString);
       useUserStore.getState().setStudentName(userData.studentName);
@@ -31,18 +32,19 @@ function Login() {
         navigate('/splash'); // 처음 로그인 시 스플래시 페이지로 이동
       }
       // localStorage.setItem('studentInfo', JSON.stringify(userData));
-
     } catch (err) {
       console.error(err);
       setError('포털 아이디 혹은 비밀번호가 잘못되었습니다.');
     } finally {
       setLoading(false);
     }
-}
+  };
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-white px-4">
-      <div className="w-full max-w-sm flex flex-col items-center space-y-10">
+    <div className="flex flex-col items-center justify-center relative min-h-screen">
+      <BackGround className="bg-cover absolute z-10" />
+      <div className="relative z-20 w-full max-w-md space-y-10">
+        {/* 아이콘 + 마이트랙 로고 */}
         <Character />
         <div className="w-full space-y-4">
           <Input
@@ -73,7 +75,6 @@ function Login() {
       </div>
     </div>
   );
-
 }
 
 export default Login;
diff --git a/src/pages/my/index.jsx b/src/pages/my/index.jsx
@@ -1,17 +1,17 @@
 import { useState } from 'react';
-import CommonSquare from '../components/CommonSquare';
-import MyTabs from '../components/MyTabs';
-import MyInfo from '../components/MyInfo';
-import MySetTrack from '../components/MySetTrack';
-import TrackStatusLarge from '../components/TrackStatusLarge';
-import useUserStore from '../stores/useUserStore';
-import TrackInitButton from '../components/TrackInitButton';
-import Button from '../components/Button';
-import TrackLoadMap from '../assets/TrackLoadMap.svg?react';
+import CommonSquare from '../../components/CommonSquare';
+import MyTabs from '../../components/MyTabs';
+import MyInfo from '../../components/MyInfo';
+import MySetTrack from '../../components/MySetTrack';
+import TrackStatusLarge from '../../components/TrackStatusLarge';
+import useUserStore from '../../entities/user/model/useUserStore';
+import TrackInitButton from '../../components/TrackInitButton';
+import Button from '../../components/Button';
+import TrackLoadMap from '../../assets/TrackLoadMap.svg?react';
 import {
   getRecommendTrackByProgress,
   getRecommendTrackByInterest,
-} from '../services/trackRecommendService';
+} from '../../features/recommendation/api/trackRecommendService';
 
 const MyPage = () => {
   const [activeTab, setActiveTab] = useState('내 정보');
diff --git a/src/pages/splash/index.jsx b/src/pages/splash/index.jsx
@@ -1,13 +1,13 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import TrackStatusCard from '../components/TrackStatusCard';
-import TrackStatusLarge from '../components/TrackStatusLarge';
-import TrackIntroTop from '../components/TrackIntroTop';
-import UploadSection from '../components/UploadSection';
-import DeleteIcon from '../assets/delete.svg';
-import InfoList from '../components/InfoList';
-import TrackTabs from '../components/TrackTabs';
+import TrackStatusCard from '../../components/TrackStatusCard';
+import TrackStatusLarge from '../../components/TrackStatusLarge';
+import TrackIntroTop from '../../components/TrackIntroTop';
+import UploadSection from '../../components/UploadSection';
+import DeleteIcon from '../../assets/delete.svg';
+import InfoList from '../../components/InfoList';
+import TrackTabs from '../../components/TrackTabs';
 
 const TABS = [
   '인공지능시스템',
diff --git a/src/widgets/navigation/Footer.jsx b/src/widgets/navigation/Footer.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import SejongIcon from '../assets/logo-sejong.svg?react';
-import SwIcon from '../assets/logo-sw.svg?react';
-import IitpIcon from '../assets/logo-iitp.svg?react';
+import SejongIcon from '../../assets/logo-sejong.svg?react';
+import SwIcon from '../../assets/logo-sw.svg?react';
+import IitpIcon from '../../assets/logo-iitp.svg?react';
 
 function Footer() {
   return (
diff --git a/src/widgets/navigation/Header.jsx b/src/widgets/navigation/Header.jsx
@@ -1,9 +1,9 @@
 import { Link } from 'react-router-dom';
-import Logo from '../assets/logo-character2.svg?react';
-import MyTrackHeader from '../assets/mytrack-header.svg?react';
-import TrackIcon from '../assets/track.svg?react';
-import SearchIcon from '../assets/search.svg?react';
-import MypageIcon from '../assets/mypage.svg?react';
+import Logo from '../../assets/logo-character2.svg?react';
+import MyTrackHeader from '../../assets/mytrack-header.svg?react';
+import TrackIcon from '../../assets/track.svg?react';
+import SearchIcon from '../../assets/search.svg?react';
+import MypageIcon from '../../assets/mypage.svg?react';
 
 function Header() {
   return (
diff --git a/tailwind.config.js b/tailwind.config.js
