Fix/fsd

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"
   }

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 />} />

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;

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";
 

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);

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 = [
   '인공지능 시스템',

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);

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);

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,

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(

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;

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(

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;
+}

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>
+);

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 = [

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 = [

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;

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('내 정보');

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 = [
   '인공지능시스템',

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 (

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 (