diff --git a/.env b/.env
deleted file mode 100644
index e69de29..0000000
diff --git a/.gitignore b/.gitignore
index f52343a..c0d44f7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,4 @@ dist-ssr
*storybook.log
storybook-static
+.env
\ No newline at end of file
diff --git a/index.html b/index.html
index 0c589ec..3a441b8 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,13 @@
+
{!shouldHideHeaderFooter && }
-
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
-
+
+
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
{!shouldHideHeaderFooter && }
);
diff --git a/src/assets/background.svg b/src/assets/background.svg
deleted file mode 100644
index 6c60523..0000000
--- a/src/assets/background.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
-
-
-
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
new file mode 100644
index 0000000..bfefa48
--- /dev/null
+++ b/src/components/Button.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+function Button({
+ label,
+ onClick,
+ disabled,
+ variant = 'default',
+ isSelected = false,
+}) {
+ const baseClasses = 'w-full rounded-lg py-3 font-bold transition';
+
+ const variantClasses = {
+ default: disabled ? 'bg-blue-light-3 text-white' : 'bg-blue-600 text-white',
+ file: 'border border-blue-400 text-blue-400 bg-white',
+ track: isSelected
+ ? 'bg-blue-600 text-white border border-blue-600 rounded-full px-3 py-2'
+ : 'bg-white text-blue-500 border border-blue-300 rounded-full px-3 py-2',
+ };
+
+ return (
+
+ {label}
+
+ );
+}
+
+export default Button;
diff --git a/src/components/Character.jsx b/src/components/Character.jsx
new file mode 100644
index 0000000..ba6a5b7
--- /dev/null
+++ b/src/components/Character.jsx
@@ -0,0 +1,13 @@
+import Logo from '../assets/logo-character.svg?react';
+import MyTrack from '../assets/mytrack.svg?react';
+
+function Character() {
+ return (
+
+
+
+
+ );
+}
+
+export default Character;
diff --git a/src/components/Input.jsx b/src/components/Input.jsx
new file mode 100644
index 0000000..7490406
--- /dev/null
+++ b/src/components/Input.jsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { Eye, EyeOff, Search } from 'lucide-react';
+
+function Input({ type = 'text', placeholder, value, onChange, error }) {
+ const [showPassword, setShowPassword] = useState(false);
+ const isPassword = type === 'password';
+ const isSearch = type === 'search';
+
+ return (
+
+
+
onChange(e.target.value)}
+ className={`
+ w-full px-4 py-3 border rounded-md outline-none transition
+ border-[#DFDFDF] focus:outline-none focus:ring-0 focus:border-blue-light-1
+ `}
+ />
+ {isPassword && (
+
setShowPassword(!showPassword)}
+ >
+ {showPassword ? : }
+
+ )}
+ {isSearch && (
+
+
+
+ )}
+
+ {error &&
{error}
}
+
+ );
+}
+
+export default Input;
diff --git a/src/features/track-management/components/TrackCourseList.jsx b/src/features/track-management/components/TrackCourseList.jsx
index b4c843d..ad9359d 100644
--- 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 (
-
+
);
diff --git a/src/features/track-management/components/TrackIntroHeader.jsx b/src/features/track-management/components/TrackIntroHeader.jsx
index 4bea7bf..3d699b2 100644
--- a/src/features/track-management/components/TrackIntroHeader.jsx
+++ b/src/features/track-management/components/TrackIntroHeader.jsx
@@ -1,5 +1,4 @@
-import TrackIcon from '../../../assets/logo-character.svg?react'; // 일러스트 svg
-import useUserStore from '../../../entities/user/model/useUserStore'; // 사용자 상태 관리 훅: 학생 이름을 전역 상태에서 읽어옴
+import useUserStore from '../entities/user/model/useUserStore';
/**
* TrackIntroHeader: 트랙 안내 페이지의 히어로 섹션(일러스트 + 환영 헤드라인 + 소개 문단)
@@ -15,11 +14,6 @@ function TrackIntroHeader() {
return (
// 전체 컨테이너: 왼쪽 정렬, 좌우 패딩
- {/* 일러스트 */}
-
-
-
-
{/* 제목 */}
안녕하세요! {studentName}님
diff --git a/src/index.css b/src/index.css
index 9d62070..c6c14aa 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,27 @@
@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;
+}
+
+/* body {
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ min-width: 320px;
+ min-height: 100vh;
+} */
+
@theme {
--color-blue-primary: #0259dd;
--color-blue-light-1: #4084e8;
diff --git a/src/pages/login/index.jsx b/src/pages/login/index.jsx
index 0fa5482..9fefe05 100644
--- a/src/pages/login/index.jsx
+++ b/src/pages/login/index.jsx
@@ -44,34 +44,34 @@ function Login() {
diff --git a/src/pages/splash/index.jsx b/src/pages/splash/index.jsx
index 9e6e86a..da54ef2 100644
--- a/src/pages/splash/index.jsx
+++ b/src/pages/splash/index.jsx
@@ -1,5 +1,3 @@
-'use client';
-
import React, { useEffect, useState } from 'react';
import TrackStatus from '../../features/track-management/components/TrackStatus';
import TrackIntroHeader from '../../features/track-management/components/TrackIntroHeader';
@@ -36,8 +34,25 @@ const Splash = () => {
}, []);
return (
-
- {/* 업로드 팝업 */}
+
+
+
+
+
+
+ {/* ✅ 업로드 팝업 */}
{showUpload && (
{
)}
{step === 3 && (
<>
-
-
-
-
diff --git a/src/widgets/navigation/Footer.jsx b/src/widgets/navigation/Footer.jsx
index c43c848..bf32b1c 100644
--- a/src/widgets/navigation/Footer.jsx
+++ b/src/widgets/navigation/Footer.jsx
@@ -1,12 +1,11 @@
-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';
function Footer() {
return (
-
-
+
+
{/* 왼쪽: 연락처 및 안내 */}
diff --git a/src/widgets/navigation/Header.jsx b/src/widgets/navigation/Header.jsx
index 72d36bb..d5ccf9e 100644
--- a/src/widgets/navigation/Header.jsx
+++ b/src/widgets/navigation/Header.jsx
@@ -7,8 +7,8 @@ import MypageIcon from '../../assets/mypage.svg?react';
function Header() {
return (
-
-
+
+
{/* 왼쪽 로고 */}
@@ -20,13 +20,19 @@ function Header() {
{/* 오른쪽 아이콘들 */}
-
+ {/* */}
+
+ 서비스 소개
+
-
+ {/*
-
-
-
+ */}
+
+ {/* */}
+
+ 로그인
+
diff --git a/vite.config.js b/vite.config.js
index 762d636..c8c337b 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,6 +3,7 @@ import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
import svgr from 'vite-plugin-svgr';
+import tsconfigPaths from 'vite-tsconfig-paths';
// https://vite.dev/config/
import path from 'node:path';
@@ -13,7 +14,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
export default defineConfig({
- plugins: [react(), tailwindcss(), svgr()],
+ plugins: [react(), tailwindcss(), svgr(), tsconfigPaths()],
test: {
projects: [
{