enjoy-hack · ehlung · Sep 16, 2025 · Sep 15, 2025 · Sep 15, 2025 · Sep 15, 2025
diff --git a/.env b/.env
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -26,7 +26,4 @@ jobs:
         run: npm install
 
       - name: Publish to Chromatic
-        uses: chromaui/action@v1
-        with:
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          token: ${{ secrets.GITHUB_TOKEN }}
+        run: npx chromatic --project-token=${{ secrets.CHROMATIC_PROJECT_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -25,3 +25,4 @@ dist-ssr
 
 *storybook.log
 storybook-static
+.env
diff --git a/index.html b/index.html
@@ -2,9 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>마이트랙</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.6.2",
     "vite-plugin-svgr": "^4.5.0",
+    "vite-tsconfig-paths": "^5.1.4",
     "zustand": "^5.0.5"
   },
   "devDependencies": {
@@ -39,7 +40,7 @@
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "autoprefixer": "^10.4.21",
-    "chromatic": "^13.1.3",
+    "chromatic": "^13.1.4",
     "eslint": "^9.29.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-prettier": "^5.5.0",

diff --git a/public/logo.svg b/public/logo.svg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/app/index.jsx b/src/app/index.jsx
@@ -1,30 +1,27 @@
 // 전역 컨텍스트 및 상태 관리 설정 (라우팅, 인증 등)
-
 import {
-  BrowserRouter,
+  BrowserRouter as Router,
   Routes,
   Route,
   useLocation,
   Navigate,
 } from 'react-router-dom';
-
 import Header from '../widgets/navigation/Header';
 import Footer from '../widgets/navigation/Footer';
-
 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 Login from '../pages/login';
 import MyPage from '../pages/my';
-import TrackDataUploadModal from '../features/track-management/components/TrackDataUploadModal';
+// import TrackDataUploadModal from '../features/track-management/components/TrackDataUploadModal';
 
 function App() {
   return (
-    <BrowserRouter>
+    <Router>
       <AppContent />
-    </BrowserRouter>
+    </Router>
   );
 }
 
@@ -34,19 +31,23 @@ function AppContent() {
   const shouldHideHeaderFooter = hiddenRoutes.includes(location.pathname);
 
   return (
-    <div className="min-h-screen bg-blue-primary">
+    <div className="flex flex-col min-h-screen">
       {!shouldHideHeaderFooter && <Header />}
-      <Routes>
-        <Route path="/" element={<Navigate to="/login" replace />} />
-        <Route path="/home" element={<Home />} />
-        <Route path="/login" element={<Login />} />
-        <Route path="/splash" element={<Splash />} />
-        <Route path="/track" element={<TrackInfo />} />
-        <Route path="/search" element={<Search />} />
-        <Route path="/mypage" element={<MyPage />} />
-        <Route path="/upload" element={<TrackDataUploadModal />} />
-        <Route path="*" element={<NotFound />} />
-      </Routes>
+      <main
+        className={`w-full flex-grow ${!shouldHideHeaderFooter ? 'pt-[60px]' : ''}`}
+      >
+        <Routes>
+          <Route path="/" element={<Navigate to="/login" replace />} />
+          <Route path="/home" element={<Home />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/splash" element={<Splash />} />
+          <Route path="/track" element={<TrackInfo />} />
+          <Route path="/search" element={<Search />} />
+          <Route path="/mypage" element={<MyPage />} />
+          {/* <Route path="/upload" element={<UploadSection />} /> */}
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </main>
       {!shouldHideHeaderFooter && <Footer />}
     </div>
   );

diff --git a/src/assets/background.svg b/src/assets/background.svg
diff --git a/src/features/track-management/components/TrackCourseList.jsx b/src/features/track-management/components/TrackCourseList.jsx
@@ -32,7 +32,7 @@ const TrackCourseList = ({ activeTrack }) => {
   if (!current) {
     // 데이터가 없으면 업로드 안내 메시지 표시
     return (
-      <div className="w-full text-white text-center mt-8">
+      <div className="w-full text-blue-light-1 text-center mt-8">
         <p>업로드된 이력이 없습니다.</p>
       </div>
     );

diff --git a/src/features/track-management/components/TrackIntroHeader.jsx b/src/features/track-management/components/TrackIntroHeader.jsx
@@ -16,9 +16,9 @@ function TrackIntroHeader() {
     // 전체 컨테이너: 왼쪽 정렬, 좌우 패딩
     <div className="text-left px-4">
       {/* 일러스트 */}
-      <div className="w-24 h-24 mb-6">
+      {/* <div className="w-24 h-24 mb-6">
         <TrackIcon className="w-full h-full" />
-      </div>
+      </div> */}
 
       {/* 제목 */}
       <h1 className="text-2xl font-semibold text-blue-600 mb-6">

diff --git a/src/features/track-management/components/TrackStatus.jsx b/src/features/track-management/components/TrackStatus.jsx
@@ -19,13 +19,13 @@ function TrackStatus({
   const characterClasses = isLarge ? 'w-40 h-auto' : 'w-28 h-auto'; // 캐릭터 크기 매핑(large: w-40, card: w-28)
   const titleClasses = isLarge // 제목 타이포, 마진 매핑
     ? 'text-2xl font-semibold text-blue-600 mb-2 leading-relaxed'
-    : 'text-xl font-semibold text-blue-600 mt-16 mb-8';
+    : 'text-xl font-semibold text-blue-600 mt-8 mb-4';
 
   return (
     // 공통 레이아웃
     <div className="text-center">
       {/* 캐릭터 */}
-      <div className={`flex justify-center ${isLarge ? 'mb-4' : 'mb-8'}`}>
+      <div className={`flex justify-center ${isLarge ? 'mb-4' : 'mt-4 mb-8'}`}>
         {onClickCharacter ? ( // 클릭 가능 여부에 따라 button으로 감싸기
           <button
             type="button"

diff --git a/src/index.css b/src/index.css
@@ -1,5 +1,19 @@
 @import 'tailwindcss';
 
+:root {
+  /* 웹페이지 전체에 적용될 기본 글꼴 목록 */
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
+    'Pretendard Variable', Pretendard, Roboto, 'Noto Sans KR', 'Segoe UI',
+    'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    sans-serif;
+  /* 기본 줄 간격 */
+  line-height: 1.5;
+  /* 기본 글자 두께 */
+  font-weight: 400;
+  background-color: #0259dd;
+}
+
 @theme {
   --color-blue-primary: #0259dd;
   --color-blue-light-1: #4084e8;

diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
@@ -23,14 +23,14 @@ const Home = () => {
   const handleCloseUpload = () => setShowUpload(false);
 
   return (
-    <div className="p-8 text-center">
+    <div className="p-8 text-center min-h-[75vh] bg-white rounded-tl-[150px] rounded-br-[150px]">
       <TrackStatus
         title="오늘도 트랙을 달려볼까요?"
         subtitle="저를 눌러 수강이력을 업로드 해주세요."
         onClickCharacter={() => setShowUpload(true)}
       />
 
-      <div className="w-full mx-auto flex justify-center mt-24">
+      <div className="w-full mx-auto flex justify-center mt-12">
         <div>
           <TrackTabs
             tabs={TABS}

diff --git a/src/pages/splash/index.jsx b/src/pages/splash/index.jsx
@@ -1,6 +1,4 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import TrackStatus from '../../features/track-management/components/TrackStatus';
 import TrackIntroHeader from '../../features/track-management/components/TrackIntroHeader';
 import TrackDataUploadModal from '../../features/track-management/components/TrackDataUploadModal';
@@ -36,7 +34,23 @@ const Splash = () => {
   }, []);
 
   return (
-    <div className="w-full min-h-screen bg-white relative overflow-hidden">
+    <div className="w-full min-h-screen relative overflow-hidden">
+      <div
+        aria-hidden
+        className="pointer-events-none absolute right-0 top-0 h-full w-full rounded-tr-[140px] bg-blue-primary ring-2 ring-white/20"
+      />
+      <div
+        aria-hidden
+        className="pointer-events-none absolute right-5 top-5 h-full w-full rounded-tr-[140px] bg-blue-primary ring-2 ring-white/20"
+      />
+      <div
+        aria-hidden
+        className="pointer-events-none absolute right-10 top-10 h-full w-full rounded-tr-[140px] bg-blue-primary ring-2 ring-white/20"
+      />
+      <div
+        aria-hidden
+        className="pointer-events-none absolute right-15 top-15 h-full w-full rounded-tr-[140px] bg-white"
+      />
       {/* 업로드 팝업 */}
       {showUpload && (
         <div
@@ -67,12 +81,12 @@ const Splash = () => {
         )}
         {step === 3 && (
           <>
-            <div className="mt-30">
+            {/* <div className="mt-30">
               <TrackStatus
                 variant="large"
                 title="먼저 ‘트랙제’에 대해서 알아볼까요?"
               />
-            </div>
+            </div> */}
 
             <div className="mt-25 mb-10 w-full">
               <TrackIntroHeader />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,3 +25,4 @@ dist-ssr

		*storybook.log
		storybook-static
		.env