From 0520749eac149b502d2d4c85904fed6b31ae90c1 Mon Sep 17 00:00:00 2001
From: chlgusdn0203 <dudrjsdud@naver.com>
Date: Wed, 27 May 2026 23:56:13 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EC=83=81=EB=8B=A8=EB=B0=94,=20?=
 =?UTF-8?q?=EC=8B=A0=EC=B2=AD=EB=B6=80=EC=9B=90=20=EC=A1=B0=ED=9A=8C,=20?=
 =?UTF-8?q?=EB=AA=A8=EC=A7=91=20=EB=B0=8F=20=EC=9D=BC=EC=A0=95=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

신청 부원 조회 페이지 진입을 위해 헤더에 임시 네비게이션 메뉴를 추가했습니다
---
 src/App.jsx                                  |   2 +
 src/components/layout/Header.jsx             |  69 ++-
 src/components/layout/Header.module.css      | 117 +++++
 src/constants/routes.js                      |   1 +
 src/pages/admin/ApplicantListPage.jsx        | 285 +++++++++++
 src/pages/admin/ApplicantListPage.module.css | 211 +++++++++
 src/pages/visitor/RecruitPage.jsx            | 473 ++++++++++++++++---
 src/pages/visitor/RecruitPage.module.css     | 383 +++++++++++++++
 src/pages/visitor/SchedulePage.jsx           | 463 +++++++++++++++++-
 src/pages/visitor/SchedulePage.module.css    | 271 +++++++++++
 10 files changed, 2208 insertions(+), 67 deletions(-)
 create mode 100644 src/components/layout/Header.module.css
 create mode 100644 src/pages/admin/ApplicantListPage.jsx
 create mode 100644 src/pages/admin/ApplicantListPage.module.css
 create mode 100644 src/pages/visitor/RecruitPage.module.css
 create mode 100644 src/pages/visitor/SchedulePage.module.css

diff --git a/src/App.jsx b/src/App.jsx
index 6df3ca0..f914e36 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,6 +7,7 @@ import RecruitPage from '@/pages/visitor/RecruitPage';
 import SchedulePage from '@/pages/visitor/SchedulePage';
 import AboutPage from '@/pages/visitor/AboutPage';
 import AdminPage from '@/pages/admin/AdminPage';
+import ApplicantListPage from '@/pages/admin/ApplicantListPage';  //어드민페이지 추가
 import NotFoundPage from '@/pages/visitor/NotFoundPage';
 
 function App() {
@@ -18,6 +19,7 @@ function App() {
         <Route path={ROUTES.SCHEDULE} element={<SchedulePage />} />
         <Route path={ROUTES.ABOUT} element={<AboutPage />} />
         <Route path={ROUTES.ADMIN} element={<AdminPage />} />
+        <Route path={ROUTES.ADMIN_APPLICANTS} element={<ApplicantListPage />}/>
         <Route path="*" element={<NotFoundPage />} />
       </Route>
     </Routes>
diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx
index 81e2918..336fff3 100644
--- a/src/components/layout/Header.jsx
+++ b/src/components/layout/Header.jsx
@@ -1,17 +1,70 @@
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
+
 import { ROUTES } from '@/constants/routes';
 
+import styles from './Header.module.css';
+
 function Header() {
   return (
-    <header>
-      <nav>
-        <Link to={ROUTES.HOME}>ONE</Link>
-        <Link to={ROUTES.ABOUT}>동아리 소개</Link>
-        <Link to={ROUTES.SCHEDULE}>연간 계획</Link>
-        <Link to={ROUTES.RECRUIT}>모집 신청</Link>
+    <header className={styles.header}>
+      {/* 로고 클릭 시 메인 페이지로 이동 */}      
+      <NavLink to={ROUTES.HOME} className={styles.title}>
+        ONE
+      </NavLink>
+
+      <nav className={styles.nav} aria-label="주요 메뉴">
+        <NavLink
+          to={ROUTES.SCHEDULE}
+          className={({ isActive }) =>
+            isActive ? `${styles.navLink} ${styles.active}` : styles.navLink
+          }
+        >
+          <svg
+            className={styles.icon}
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path d="M7 2v3" />
+            <path d="M17 2v3" />
+            <path d="M4 8h16" />
+            <rect x="4" y="5" width="16" height="17" rx="2" />
+          </svg>
+          <span>연간 계획</span>
+        </NavLink>
+
+        <NavLink
+          to={ROUTES.RECRUIT}
+          className={({ isActive }) =>
+            isActive ? `${styles.navLink} ${styles.active}` : styles.navLink
+          }
+        >
+          <svg
+            className={styles.icon}
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <circle cx="12" cy="7" r="4" />
+            <path d="M5 22a7 7 0 0 1 14 0" />
+          </svg>
+          <span>신입 부원 모집</span>
+        </NavLink>
+
+        {/* 관리자 확인용 임시 메뉴 */}
+        <NavLink
+          to={ROUTES.ADMIN_APPLICANTS}
+          className={({ isActive }) =>
+            isActive ? `${styles.navLink} ${styles.active}` : styles.navLink
+          }
+        >
+          <span className={styles.smallMenu}>
+            신청 부원 조회
+          </span>
+        </NavLink>
       </nav>
     </header>
   );
 }
 
-export default Header;
+export default Header;
\ No newline at end of file
diff --git a/src/components/layout/Header.module.css b/src/components/layout/Header.module.css
new file mode 100644
index 0000000..6b0f13d
--- /dev/null
+++ b/src/components/layout/Header.module.css
@@ -0,0 +1,117 @@
+.header {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  min-height: 112px;
+  padding: 0 10rem;
+  background-color: #ffffff;
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
+}
+
+.title {
+  flex-shrink: 0;
+  color: #4b5563;
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1.2;
+  transition: color 0.2s ease;
+}
+
+.title:hover {
+  color: #1f2937;
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  left: 50%;
+  gap: 6rem;
+  transform: translateX(-50%);
+}
+
+.navLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 1.25rem;
+  color: #111827;
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+  transition:
+    color 0.2s ease,
+    opacity 0.2s ease;
+}
+
+.navLink:hover,
+.active {
+  color: #ff6a00;
+}
+
+.icon {
+  width: 3rem;
+  height: 3rem;
+  stroke: currentcolor;
+  stroke-width: 1.8;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+@media (max-width: 1024px) {
+  .header {
+    min-height: 88px;
+    padding: 0 2rem;
+  }
+
+  .title,
+  .navLink {
+    font-size: 1.25rem;
+  }
+
+  .nav {
+    position: static;
+    gap: 2.5rem;
+    transform: none;
+  }
+
+  .navLink {
+    gap: 0.875rem;
+  }
+
+  .icon {
+    width: 2rem;
+    height: 2rem;
+  }
+}
+
+@media (max-width: 640px) {
+  .header {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem 1.25rem;
+  }
+
+  .nav {
+    justify-content: space-between;
+    width: 100%;
+    gap: 1rem;
+  }
+
+  .title,
+  .navLink {
+    font-size: 1rem;
+  }
+
+  .navLink {
+    gap: 0.5rem;
+  }
+
+  .icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+}
diff --git a/src/constants/routes.js b/src/constants/routes.js
index fd11dbe..7e741c2 100644
--- a/src/constants/routes.js
+++ b/src/constants/routes.js
@@ -8,4 +8,5 @@ export const ROUTES = {
   SCHEDULE: '/schedule',
   ABOUT: '/about',
   ADMIN: '/admin',
+  ADMIN_APPLICANTS: '/admin/applicants',
 };
diff --git a/src/pages/admin/ApplicantListPage.jsx b/src/pages/admin/ApplicantListPage.jsx
new file mode 100644
index 0000000..6333799
--- /dev/null
+++ b/src/pages/admin/ApplicantListPage.jsx
@@ -0,0 +1,285 @@
+import { useState } from 'react';
+
+import styles from './ApplicantListPage.module.css';
+
+// 퍼블리싱 단계 UI 확인용 임시 신청자 데이터
+const MOCK_APPLICANTS = [
+  {
+    id: 1,
+    name: '최현우',
+    studentId: '20771234',
+    phone: '010-1111-2222',
+    appliedAt: '2026.08.08',
+    isNew: false,
+    major: '웹응용소프트웨어공학과',
+    gender: '남',
+    birthDate: '2005.01.01',
+    grade: '2',
+    motivation:
+      '동아리 활동을 하며 실무 경험을 길러 보고 싶어 지원했습니다.',
+    skills: 'React, JavaScript, Java',
+    goal: '프로젝트 경험 쌓기',
+    message: '잘 부탁드립니다.',
+  },
+  {
+    id: 2,
+    name: '최우현',
+    studentId: '20774567',
+    phone: '010-0000-0000',
+    appliedAt: '2026.08.10',
+    isNew: true,
+    major: '웹응용소프트웨어공학과',
+    gender: '남',
+    birthDate: '2004.03.12',
+    grade: '3',
+    motivation:
+      '실제 협업 프로젝트를 경험해 보고 싶습니다.',
+    skills: 'Python, React',
+    goal: '협업 능력 향상',
+    message: '열심히 하겠습니다.',
+  },
+  {
+    id: 3,
+    name: '우현최',
+    studentId: '20779876',
+    phone: '010-2222-3333',
+    appliedAt: '2026.08.12',
+    isNew: true,
+    major: '웹응용소프트웨어공학과',
+    gender: '여',
+    birthDate: '2005.06.20',
+    grade: '1',
+    motivation:
+      '개발 공부를 더 깊게 해보고 싶습니다.',
+    skills: 'HTML, CSS',
+    goal: '웹 프로젝트 참여',
+    message: '잘 부탁드립니다.',
+  },
+];
+
+function ApplicantListPage() {
+  // 상세 정보 모달에 표시할 신청자 데이터
+  const [selectedApplicant, setSelectedApplicant] =
+    useState(null);
+
+  return (
+    <section className={styles.page}>
+      <div className={styles.panel}>
+        <div className={styles.header}>
+          <h1>신청 부원 조회</h1>
+
+          <p>
+            총 {MOCK_APPLICANTS.length}명
+          </p>
+        </div>
+
+        <div className={styles.tableWrapper}>
+          <table className={styles.table}>
+            <thead>
+              <tr>
+                <th>no</th>
+                <th>이름</th>
+                <th>학번</th>
+                <th>전화번호</th>
+                <th>신청날짜</th>
+                <th>정보조회</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              {MOCK_APPLICANTS.map(
+                (applicant, index) => (
+                  <tr key={applicant.id}>
+                    <td>
+                      {index + 1}
+                    </td>
+
+                    <td>
+                      <div
+                        className={
+                          styles.nameCell
+                        }
+                      >
+                        {/* 신규 신청자 구분용 표시 */}
+                        {applicant.isNew && (
+                          <span
+                            className={
+                              styles.newBadge
+                            }
+                          >
+                            N
+                          </span>
+                        )}
+
+                        {applicant.name}
+                      </div>
+                    </td>
+
+                    <td>
+                      {
+                        applicant.studentId
+                      }
+                    </td>
+
+                    <td>
+                      {applicant.phone}
+                    </td>
+
+                    <td>
+                      {
+                        applicant.appliedAt
+                      }
+                    </td>
+
+                    <td>
+                      <button
+                        type="button"
+                        className={
+                          styles.viewButton
+                        }
+                        onClick={() =>
+                          setSelectedApplicant(
+                            applicant
+                          )
+                        }
+                      >
+                        🔍
+                      </button>
+                    </td>
+                  </tr>
+                )
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        <p className={styles.notice}>
+          최근 1년 동안 신청한 부원의 정보만
+          조회 가능합니다.
+        </p>
+      </div>
+
+      {/* 신청자 선택 시 상세 정보 모달 표시 */}
+      {selectedApplicant && (
+        <div className={styles.modalOverlay}>
+          <div className={styles.modal}>
+            <button
+              type="button"
+              className={styles.closeButton}
+              onClick={() =>
+                setSelectedApplicant(null)
+              }
+            >
+              ×
+            </button>
+
+            <h2>신청자 상세 정보</h2>
+
+            <div className={styles.detailGrid}>
+              <div>
+                <strong>이름</strong>
+                <span>
+                  {
+                    selectedApplicant.name
+                  }
+                </span>
+              </div>
+
+              <div>
+                <strong>학번</strong>
+                <span>
+                  {
+                    selectedApplicant.studentId
+                  }
+                </span>
+              </div>
+
+              <div>
+                <strong>학과</strong>
+                <span>
+                  {
+                    selectedApplicant.major
+                  }
+                </span>
+              </div>
+
+              <div>
+                <strong>성별</strong>
+                <span>
+                  {
+                    selectedApplicant.gender
+                  }
+                </span>
+              </div>
+
+              <div>
+                <strong>생년월일</strong>
+                <span>
+                  {
+                    selectedApplicant.birthDate
+                  }
+                </span>
+              </div>
+
+              <div>
+                <strong>전화번호</strong>
+                <span>
+                  {
+                    selectedApplicant.phone
+                  }
+                </span>
+              </div>
+
+              <div>
+                <strong>학년</strong>
+                <span>
+                  {
+                    selectedApplicant.grade
+                  }
+                </span>
+              </div>
+
+              <div className={styles.fullWidth}>
+                <strong>지원동기</strong>
+                <span>
+                  {
+                    selectedApplicant.motivation
+                  }
+                </span>
+              </div>
+
+              <div className={styles.fullWidth}>
+                <strong>기술 스택</strong>
+                <span>
+                  {
+                    selectedApplicant.skills
+                  }
+                </span>
+              </div>
+
+              <div className={styles.fullWidth}>
+                <strong>활동 목표</strong>
+                <span>
+                  {
+                    selectedApplicant.goal
+                  }
+                </span>
+              </div>
+
+              <div className={styles.fullWidth}>
+                <strong>마지막 하고 싶은 말</strong>
+                <span>
+                  {
+                    selectedApplicant.message
+                  }
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}
+
+export default ApplicantListPage;
\ No newline at end of file
diff --git a/src/pages/admin/ApplicantListPage.module.css b/src/pages/admin/ApplicantListPage.module.css
new file mode 100644
index 0000000..5765d15
--- /dev/null
+++ b/src/pages/admin/ApplicantListPage.module.css
@@ -0,0 +1,211 @@
+.page {
+  min-height: calc(100vh - 112px);
+  padding: 4rem 6rem;
+  background-color: #fffaf7;
+}
+
+.panel {
+  max-width: 1200px;
+  margin: 0 auto;
+  border: 1px solid #f2d7c6;
+  border-radius: 20px;
+  background-color: #ffffff;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
+  padding: 3rem;
+}
+
+.header {
+  margin-bottom: 2rem;
+}
+
+.header h1 {
+  margin: 0;
+  color: #111827;
+  font-size: 3rem;
+  font-weight: 800;
+}
+
+.header p {
+  margin: 0.75rem 0 0;
+  color: #6b7280;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.tableWrapper {
+  max-height: 520px;
+  overflow-y: auto;
+  border: 1px solid #e5e7eb;
+  border-radius: 16px;
+  background-color: #ffffff;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 1000px;
+}
+
+.table thead {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: #f9fafb;
+}
+
+.table th {
+  padding: 1.25rem 1rem;
+  text-align: center;
+  font-size: 1.4rem;
+  font-weight: 800;
+  color: #111827;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.table td {
+  padding: 1.2rem 1rem;
+  text-align: center;
+  font-size: 1rem;
+  color: #374151;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.nameCell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.newBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.35rem;
+  height: 1.35rem;
+  border-radius: 4px;
+  background-color: #ff6a00;
+  color: #ffffff;
+  font-size: 0.75rem;
+  font-weight: 800;
+}
+
+.viewButton {
+  border: none;
+  background: transparent;
+  font-size: 1.35rem;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.viewButton:hover {
+  transform: scale(1.1);
+}
+
+.notice {
+  margin-top: 2rem;
+  text-align: center;
+  color: #6b7280;
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.modalOverlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+  padding: 1rem;
+}
+
+.modal {
+  position: relative;
+  width: 720px;
+  max-height: 85vh;
+  overflow-y: auto;
+  border-radius: 24px;
+  background-color: #ffffff;
+  padding: 2.5rem;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
+}
+
+.closeButton {
+  position: absolute;
+  top: 1.2rem;
+  right: 1.4rem;
+  border: none;
+  background: transparent;
+  font-size: 2rem;
+  cursor: pointer;
+  color: #374151;
+}
+
+.modal h2 {
+  margin: 0 0 2rem;
+  font-size: 2rem;
+  font-weight: 800;
+  color: #111827;
+}
+
+.detailGrid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.5rem;
+}
+
+.detailGrid div {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.detailGrid strong {
+  color: #111827;
+  font-size: 1rem;
+  font-weight: 800;
+}
+
+.detailGrid span {
+  color: #374151;
+  line-height: 1.6;
+  font-size: 1rem;
+}
+
+.fullWidth {
+  grid-column: 1 / -1;
+}
+
+@media (max-width: 1024px) {
+  .page {
+    padding: 2rem;
+  }
+
+  .panel {
+    padding: 2rem;
+  }
+
+  .modal {
+    width: 100%;
+  }
+}
+
+@media (max-width: 640px) {
+  .page {
+    padding: 1rem;
+  }
+
+  .panel {
+    padding: 1.25rem;
+  }
+
+  .header h1 {
+    font-size: 2rem;
+  }
+
+  .detailGrid {
+    grid-template-columns: 1fr;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/visitor/RecruitPage.jsx b/src/pages/visitor/RecruitPage.jsx
index 927a8b6..346eed0 100644
--- a/src/pages/visitor/RecruitPage.jsx
+++ b/src/pages/visitor/RecruitPage.jsx
@@ -1,78 +1,441 @@
 import { useState } from 'react';
-import { submitRecruit } from '@/apis/recruit';
+
 import Button from '@/components/common/Button';
 
+import styles from './RecruitPage.module.css';
+
+// 신청 흐름을 단계별로 보여주기 위한 표시용 데이터
+const STEPS = [
+  '기본정보 입력',
+  '지원정보 입력',
+  '개인정보 동의',
+  '신청 완료',
+];
+
+// 폼 초기 상태를 한 곳에서 관리해서 초기화/확장 쉽게 처리
 const INITIAL_FORM = {
   name: '',
-  studentId: '',
   major: '',
+  studentId: '',
+  birthDate: '',
+  grade: '',
+  phone: '',
+  gender: '',
   motivation: '',
+  skills: '',
+  clubGoal: '',
+  lastMessage: '',
+  privacyAgreed: false,
 };
 
 function RecruitPage() {
-  // 1. 상태
+  // 현재 사용자가 어느 단계에 있는지 관리
+  const [currentStep, setCurrentStep] = useState(0);
+
+  // 입력값 전체를 한 객체로 관리
   const [form, setForm] = useState(INITIAL_FORM);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [submitError, setSubmitError] = useState(null);
 
-  // 2. 핸들러
   const handleChange = (event) => {
-    const { name, value } = event.target;
-    setForm((prev) => ({ ...prev, [name]: value }));
-  };
+    const { name, value, type, checked } = event.target;
 
-  const handleSubmit = async () => {
-    if (isSubmitting) return;
-    setIsSubmitting(true);
-    setSubmitError(null);
-
-    try {
-      await submitRecruit(form);
-      setForm(INITIAL_FORM);
-      alert('신청이 완료되었습니다.');
-    } catch (error) {
-      console.error('[RecruitPage] 신청 실패:', error);
-      setSubmitError('신청 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.');
-    } finally {
-      setIsSubmitting(false);
+    // 작성 중 페이지를 벗어날 경우 입력 데이터 유실 여부 확인용
+    localStorage.setItem('recruitFormDirty', 'true');
+
+    let nextValue =
+      type === 'checkbox' ? checked : value;
+
+    // 전화번호 입력 형식을 자동으로 맞춰서 사용자 입력 부담 줄임
+    if (name === 'phone') {
+      const onlyNumbers = value.replace(
+        /[^0-9]/g,
+        ''
+      );
+
+      if (onlyNumbers.length <= 3) {
+        nextValue = onlyNumbers;
+      } else if (onlyNumbers.length <= 7) {
+        nextValue = `${onlyNumbers.slice(
+          0,
+          3
+        )}-${onlyNumbers.slice(3)}`;
+      } else {
+        nextValue = `${onlyNumbers.slice(
+          0,
+          3
+        )}-${onlyNumbers.slice(
+          3,
+          7
+        )}-${onlyNumbers.slice(7, 11)}`;
+      }
     }
+
+    setForm((prevForm) => ({
+      ...prevForm,
+      [name]: nextValue,
+    }));
   };
 
-  // 3. 파생 변수
-  const isFormValid = form.name.trim() !== '' && form.studentId.trim() !== '';
+  // 다음 단계 이동
+  const handleNext = () => {
+    setCurrentStep((prevStep) => prevStep + 1);
+  };
+
+  // 이전 단계 이동
+  const handlePrevious = () => {
+    setCurrentStep((prevStep) => prevStep - 1);
+  };
+
+  // 신청 완료 후 작성 상태 정리 후 메인으로 이동
+  const handleMoveHome = () => {
+    localStorage.removeItem('recruitFormDirty');
+    window.location.href = '/';
+  };
 
-  // 4. 렌더링
   return (
-    <section>
-      <h2>신입부원 모집 신청</h2>
-
-      <label>
-        이름
-        <input name="name" value={form.name} onChange={handleChange} />
-      </label>
-
-      <label>
-        학번
-        <input name="studentId" value={form.studentId} onChange={handleChange} />
-      </label>
-
-      <label>
-        전공
-        <input name="major" value={form.major} onChange={handleChange} />
-      </label>
-
-      <label>
-        지원 동기
-        <textarea name="motivation" value={form.motivation} onChange={handleChange} />
-      </label>
-
-      {submitError && <p role="alert">{submitError}</p>}
-
-      <Button onClick={handleSubmit} disabled={!isFormValid || isSubmitting}>
-        {isSubmitting ? '제출 중...' : '신청하기'}
-      </Button>
+    <section className={styles.page}>
+      <div className={styles.panel}>
+        <div className={styles.header}>
+          <p className={styles.category}>
+            ONE 신입 부원 모집
+          </p>
+
+          <h1>신입 부원 모집 신청</h1>
+        </div>
+
+        {/* 현재 진행 단계 시각적으로 표시 */}
+        <ol
+          className={styles.stepList}
+          aria-label="신청 단계"
+        >
+          {STEPS.map((step, index) => (
+            <li
+              key={step}
+              className={
+                index <= currentStep
+                  ? `${styles.step} ${styles.activeStep}`
+                  : styles.step
+              }
+            >
+              <span>{index + 1}</span>
+              {step}
+            </li>
+          ))}
+        </ol>
+
+        {/* 1단계: 기본정보 */}
+        {currentStep === 0 && (
+          <div className={styles.stepContent}>
+            <div className={styles.sectionTitle}>
+              <h2>
+                기본정보를 입력해 주세요.
+              </h2>
+
+              <p>
+                신청자 확인을 위해 필요한
+                정보를 정확히 입력해 주세요.
+              </p>
+            </div>
+
+            <div className={styles.formGrid}>
+              <label className={styles.field}>
+                이름 *
+                <input
+                  name="name"
+                  value={form.name}
+                  onChange={handleChange}
+                  placeholder="이름 입력"
+                />
+              </label>
+
+              <label className={styles.field}>
+                학과 *
+                {/* 현재 학과 선택지는 디자인 단계 기준 임시 고정 */}
+                <select
+                  name="major"
+                  value={form.major}
+                  onChange={handleChange}
+                >
+                  <option value="">
+                    학과를 선택해 주세요.
+                  </option>
+
+                  <option value="웹응용소프트웨어공학과">
+                    웹응용소프트웨어공학과
+                  </option>
+                </select>
+              </label>
+
+              <label className={styles.field}>
+                학번 *
+                <input
+                  name="studentId"
+                  value={form.studentId}
+                  onChange={handleChange}
+                  placeholder="20251234"
+                />
+              </label>
+
+              <label className={styles.field}>
+                생년월일 *
+                <input
+                  type="date"
+                  name="birthDate"
+                  value={form.birthDate}
+                  onChange={handleChange}
+                />
+              </label>
+
+              <label className={styles.field}>
+                학년 *
+                <input
+                  name="grade"
+                  value={form.grade}
+                  onChange={handleChange}
+                  placeholder="1"
+                />
+              </label>
+
+              <label className={styles.field}>
+                전화번호 *
+                <input
+                  name="phone"
+                  value={form.phone}
+                  onChange={handleChange}
+                  placeholder="010-0000-0000"
+                  maxLength={13}
+                />
+              </label>
+
+              <div
+                className={`${styles.field} ${styles.fullField}`}
+              >
+                <span>성별 *</span>
+
+                <div className={styles.genderGroup}>
+                  <label
+                    className={styles.radioLabel}
+                  >
+                    <input
+                      type="radio"
+                      name="gender"
+                      value="male"
+                      checked={
+                        form.gender === 'male'
+                      }
+                      onChange={handleChange}
+                    />
+                    남자
+                  </label>
+
+                  <label
+                    className={styles.radioLabel}
+                  >
+                    <input
+                      type="radio"
+                      name="gender"
+                      value="female"
+                      checked={
+                        form.gender === 'female'
+                      }
+                      onChange={handleChange}
+                    />
+                    여자
+                  </label>
+                </div>
+              </div>
+            </div>
+
+            <div className={styles.actionArea}>
+              <Button onClick={handleNext}>
+                제출하기
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* 2단계: 지원정보 */}
+        {currentStep === 1 && (
+          <div className={styles.stepContent}>
+            <div className={styles.sectionTitle}>
+              <h2>
+                지원정보를 입력해 주세요.
+              </h2>
+
+              <p>
+                지원 정보를 작성해 주세요.
+              </p>
+            </div>
+
+            <div className={styles.formGrid}>
+              <label
+                className={`${styles.field} ${styles.fullField}`}
+              >
+                지원 동기 *
+                <textarea
+                  name="motivation"
+                  value={form.motivation}
+                  onChange={handleChange}
+                  placeholder="지원 동기를 작성해 주세요."
+                />
+              </label>
+
+              <label className={styles.field}>
+                사용해봤거나 들어본 언어 및 라이브러리 *
+                <input
+                  name="skills"
+                  value={form.skills}
+                  onChange={handleChange}
+                  placeholder="예) React, Java"
+                />
+              </label>
+
+              <label className={styles.field}>
+                동아리에서 해 보고 싶은 것 *
+                <input
+                  name="clubGoal"
+                  value={form.clubGoal}
+                  onChange={handleChange}
+                  placeholder="예) 프로젝트"
+                />
+              </label>
+
+              <label
+                className={`${styles.field} ${styles.fullField}`}
+              >
+                마지막으로 하고 싶은 말
+                <input
+                  name="lastMessage"
+                  value={form.lastMessage}
+                  onChange={handleChange}
+                  placeholder="자유롭게 작성해 주세요."
+                />
+              </label>
+            </div>
+
+            <div className={styles.actionArea}>
+              <button
+                type="button"
+                className={styles.secondaryButton}
+                onClick={handlePrevious}
+              >
+                이전
+              </button>
+
+              <Button onClick={handleNext}>
+                제출하기
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* 3단계: 개인정보 동의 */}
+        {currentStep === 2 && (
+          <div className={styles.stepContent}>
+            <div className={styles.sectionTitle}>
+              <h2>
+                개인정보 수집 및 이용 동의
+              </h2>
+
+              <p>
+                신청 진행을 위해 아래 내용을
+                확인해 주세요.
+              </p>
+            </div>
+
+            <div className={styles.privacyBox}>
+              <dl>
+                <div>
+                  <dt>수집 항목</dt>
+                  <dd>
+                    이름, 학과, 학번,
+                    생년월일, 전화번호,
+                    학년, 성별, 지원 동기,
+                    기술 스택, 활동 목표
+                  </dd>
+                </div>
+
+                <div>
+                  <dt>수집 목적</dt>
+                  <dd>
+                    신입부원 선발 및
+                    동아리 활동 운영
+                  </dd>
+                </div>
+
+                <div>
+                  <dt>보유 기간</dt>
+                  <dd>
+                    지원 일자로부터 1년
+                  </dd>
+                </div>
+
+                <div>
+                  <dt>안내 사항</dt>
+                  <dd>
+                    동의하지 않을 시
+                    불이익이 있을 수
+                    있습니다.
+                  </dd>
+                </div>
+              </dl>
+            </div>
+
+            <label className={styles.checkField}>
+              <input
+                type="checkbox"
+                name="privacyAgreed"
+                checked={form.privacyAgreed}
+                onChange={handleChange}
+              />
+
+              개인정보 수집 및 이용에
+              동의합니다.
+            </label>
+
+            <div className={styles.actionArea}>
+              <button
+                type="button"
+                className={styles.secondaryButton}
+                onClick={handlePrevious}
+              >
+                이전
+              </button>
+
+              <Button onClick={handleNext}>
+                신청하기
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* 4단계: 완료 화면 */}
+        {currentStep === 3 && (
+          <div
+            className={`${styles.stepContent} ${styles.completeContent}`}
+          >
+            <div className={styles.completeMark}>
+              완료
+            </div>
+
+            <h2>
+              신청이 접수되었습니다!
+            </h2>
+
+            <p>
+              면접 일정 및 결과는
+              추후 공지될 예정입니다.
+            </p>
+
+            <div className={styles.actionArea}>
+              <Button onClick={handleMoveHome}>
+                메인으로 이동
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
     </section>
   );
 }
 
-export default RecruitPage;
+export default RecruitPage;
\ No newline at end of file
diff --git a/src/pages/visitor/RecruitPage.module.css b/src/pages/visitor/RecruitPage.module.css
new file mode 100644
index 0000000..5bdff45
--- /dev/null
+++ b/src/pages/visitor/RecruitPage.module.css
@@ -0,0 +1,383 @@
+.page {
+  min-height: calc(100vh - 112px);
+  padding: 4rem 10rem 5rem;
+  background-color: #fffaf7;
+}
+
+.panel {
+  max-width: 1120px;
+  margin: 0 auto;
+  border: 1px solid #f2d7c6;
+  border-radius: 24px;
+  background-color: #ffffff;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+.header {
+  padding: 3rem 4rem 2rem;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.category {
+  margin: 0 0 0.75rem;
+  color: #ff6a00;
+  font-size: 1rem;
+  font-weight: 800;
+}
+
+.header h1 {
+  margin: 0;
+  color: #111827;
+  font-size: 2.75rem;
+  font-weight: 800;
+}
+
+.stepList {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin: 0;
+  padding: 0;
+  border-bottom: 1px solid #f3f4f6;
+  list-style: none;
+}
+
+.step {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 1.25rem 1rem;
+  color: #9ca3af;
+  font-weight: 800;
+  font-size: 0.95rem;
+}
+
+.step span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid currentcolor;
+  border-radius: 50%;
+  font-size: 0.875rem;
+}
+
+.activeStep {
+  color: #ff6a00;
+  background-color: #fff4ec;
+}
+
+.stepContent {
+  padding: 3rem 4rem;
+}
+
+.sectionTitle {
+  margin-bottom: 2.5rem;
+}
+
+.sectionTitle h2,
+.completeContent h2 {
+  margin: 0;
+  color: #111827;
+  font-size: 2rem;
+  font-weight: 800;
+}
+
+.sectionTitle p,
+.completeContent p {
+  margin: 0.75rem 0 0;
+  color: #6b7280;
+  font-size: 1.05rem;
+  line-height: 1.6;
+}
+
+/* 핵심 수정 */
+.formGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.75rem 2rem;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  color: #111827;
+  font-size: 0.95rem;
+  font-weight: 700;
+}
+
+.field input,
+.field textarea,
+.field select {
+  width: 100%;
+  border: 1px solid #d1d5db;
+  border-radius: 10px;
+  padding: 0.95rem 1rem;
+  background-color: #ffffff;
+  color: #111827;
+  font: inherit;
+  transition: border-color 0.2s ease;
+}
+
+.field input:focus,
+.field textarea:focus {
+  outline: none;
+  border-color: #ff6a00;
+}
+
+.field textarea {
+  min-height: 10rem;
+  resize: vertical;
+}
+
+.wideField {
+  grid-column: span 2;
+}
+
+.fullField {
+  grid-column: 1 / -1;
+}
+
+.genderGroup {
+  display: flex;
+  gap: 2rem;
+  margin-top: 0.5rem;
+}
+
+.radioLabel {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #111827;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.radioLabel input {
+  width: 18px;
+  height: 18px;
+  accent-color: #ff6a00;
+  cursor: pointer;
+}
+
+.privacyBox {
+  max-height: 260px;
+  overflow: auto;
+  padding: 2rem;
+  border: 1px solid #f2d7c6;
+  border-radius: 12px;
+  background-color: #fffaf7;
+}
+
+.privacyBox dl {
+  display: grid;
+  gap: 1.25rem;
+  margin: 0;
+}
+
+.privacyBox div {
+  display: grid;
+  grid-template-columns: 8rem 1fr;
+  gap: 1rem;
+}
+
+.privacyBox dt,
+.summary dt {
+  color: #111827;
+  font-weight: 800;
+}
+
+.privacyBox dd,
+.summary dd {
+  margin: 0;
+  color: #4b5563;
+  line-height: 1.6;
+}
+
+.checkField {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+  color: #111827;
+  font-weight: 800;
+}
+
+.checkField input {
+  width: 1.25rem;
+  height: 1.25rem;
+  accent-color: #ff6a00;
+}
+
+.actionArea {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+  margin-top: 2.5rem;
+}
+
+.secondaryButton {
+  min-width: 7rem;
+  padding: 0.9rem 1.5rem;
+  border: 1px solid #f2d7c6;
+  border-radius: 10px;
+  background-color: #fff4ec;
+  color: #c35a00;
+  font-size: 1rem;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.completeContent {
+  text-align: center;
+}
+
+.completeMark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 5rem;
+  height: 5rem;
+  margin-bottom: 1.5rem;
+  border-radius: 50%;
+  background-color: #ff6a00;
+  color: #ffffff;
+  font-weight: 800;
+}
+
+.summary {
+  display: grid;
+  gap: 1rem;
+  max-width: 720px;
+  margin: 2rem auto 0;
+  padding: 2rem;
+  border: 1px solid #f2d7c6;
+  border-radius: 12px;
+  background-color: #fffaf7;
+  text-align: left;
+}
+
+.summary div {
+  display: grid;
+  grid-template-columns: 8rem 1fr;
+  gap: 1rem;
+}
+
+@media (max-width: 1024px) {
+  .page {
+    padding: 2rem;
+  }
+
+  .header,
+  .stepContent {
+    padding-right: 2rem;
+    padding-left: 2rem;
+  }
+
+  .stepList,
+  .formGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .step {
+    justify-content: flex-start;
+  }
+
+  .wideField,
+  .fullField {
+    grid-column: auto;
+  }
+}
+
+@media (max-width: 640px) {
+  .page {
+    padding: 1rem;
+  }
+
+  .header h1 {
+    font-size: 2rem;
+  }
+
+  .header,
+  .stepContent {
+    padding: 1.5rem;
+  }
+
+  .privacyBox div,
+  .summary div {
+    grid-template-columns: 1fr;
+    gap: 0.375rem;
+  }
+
+  .actionArea {
+    flex-direction: column-reverse;
+  }
+
+  .genderGroup {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .modalOverlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+}
+
+.modal {
+  width: 420px;
+  padding: 2.5rem 2rem;
+  border: 1px solid #f2d7c6;
+  border-radius: 20px;
+  background: #ffffff;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
+  text-align: center;
+}
+
+.modalText {
+  margin: 0;
+  color: #374151;
+  font-size: 1.2rem;
+  font-weight: 600;
+  line-height: 1.7;
+}
+
+.modalActions {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.cancelButton {
+  min-width: 120px;
+  padding: 0.8rem 1.5rem;
+  border: none;
+  border-radius: 12px;
+  background: #ff6a00;
+  color: white;
+  font-size: 1rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.confirmButton {
+  min-width: 120px;
+  padding: 0.8rem 1.5rem;
+  border: 1px solid #f2d7c6;
+  border-radius: 12px;
+  background: #fff4ec;
+  color: #c35a00;
+  font-size: 1rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+}
\ No newline at end of file
diff --git a/src/pages/visitor/SchedulePage.jsx b/src/pages/visitor/SchedulePage.jsx
index a5e1634..15e205d 100644
--- a/src/pages/visitor/SchedulePage.jsx
+++ b/src/pages/visitor/SchedulePage.jsx
@@ -1,10 +1,465 @@
+import { useMemo, useState } from 'react';
+
+import Button from '@/components/common/Button';
+
+import styles from './SchedulePage.module.css';
+
+const WEEK_DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+
+// 퍼블리싱 단계에서 일정 UI 확인용 임시 데이터
+const INITIAL_EVENTS = [
+  {
+    id: 1,
+    title: '신입 부원 모집 프로젝트(가안)',
+    start: '04.01',
+    end: '04.13',
+  },
+  {
+    id: 2,
+    title: '중간고사',
+    start: '04.21',
+    end: '04.27',
+  },
+];
+
 function SchedulePage() {
+  // 현재 선택된 연/월 상태
+  const [year, setYear] = useState(2026);
+  const [month, setMonth] = useState(4);
+
+  // 화면에 표시할 일정 목록
+  const [events, setEvents] = useState(INITIAL_EVENTS);
+
+  // 드롭다운/모달 UI 상태 관리
+  const [showMonthDropdown, setShowMonthDropdown] =
+    useState(false);
+  const [showYearDropdown, setShowYearDropdown] =
+    useState(false);
+  const [showAddModal, setShowAddModal] =
+    useState(false);
+  const [showDeleteModal, setShowDeleteModal] =
+    useState(false);
+
+  // 삭제 대상 일정 식별용
+  const [selectedEventId, setSelectedEventId] =
+    useState(null);
+
+  // 캘린더 뷰 / 전체 목록 뷰 전환
+  const [isListView, setIsListView] = useState(false);
+
+  // 일정 추가 모달 입력값
+  const [newEvent, setNewEvent] = useState({
+    title: '',
+    start: '',
+    end: '',
+  });
+
+  // 현재는 퍼블리싱 단계라 고정된 31일 캘린더로 UI만 구성
+  const calendarDays = useMemo(() => {
+    const days = [];
+
+    for (let i = 1; i <= 31; i += 1) {
+      days.push(i);
+    }
+
+    return days;
+  }, []);
+
+  // 월 이동 시 연도 변경도 함께 처리
+  const handlePreviousMonth = () => {
+    if (month === 1) {
+      setMonth(12);
+      setYear((prev) => prev - 1);
+      return;
+    }
+
+    setMonth((prev) => prev - 1);
+  };
+
+  const handleNextMonth = () => {
+    if (month === 12) {
+      setMonth(1);
+      setYear((prev) => prev + 1);
+      return;
+    }
+
+    setMonth((prev) => prev + 1);
+  };
+
+  // 일정 추가 퍼블리싱 테스트용 임시 처리
+  const handleAddEvent = () => {
+    if (!newEvent.title) {
+      setShowAddModal(false);
+      return;
+    }
+
+    setEvents((prev) => [
+      ...prev,
+      {
+        id: Date.now(),
+        title: newEvent.title,
+        start: newEvent.start || '00.00',
+        end: newEvent.end || '00.00',
+      },
+    ]);
+
+    setNewEvent({
+      title: '',
+      start: '',
+      end: '',
+    });
+
+    setShowAddModal(false);
+  };
+
+  // 삭제 확인 모달 표시
+  const handleDeleteClick = (id) => {
+    setSelectedEventId(id);
+    setShowDeleteModal(true);
+  };
+
+  // 선택된 일정 삭제
+  const handleDeleteConfirm = () => {
+    setEvents((prev) =>
+      prev.filter(
+        (event) => event.id !== selectedEventId
+      )
+    );
+
+    setShowDeleteModal(false);
+    setSelectedEventId(null);
+  };
+
   return (
-    <section>
-      <h2>연간 계획</h2>
-      <p>동아리 연간 일정을 확인할 수 있습니다.</p>
+    <section className={styles.page}>
+      <div className={styles.panel}>
+        <div className={styles.toolbar}>
+          <div className={styles.dateControls}>
+            <button
+              type="button"
+              onClick={handlePreviousMonth}
+            >
+              ◀
+            </button>
+
+            {/* 월 선택 드롭다운 */}
+            <div className={styles.dropdownWrapper}>
+              <button
+                type="button"
+                onClick={() =>
+                  setShowMonthDropdown(
+                    !showMonthDropdown
+                  )
+                }
+              >
+                {month}월
+              </button>
+
+              {showMonthDropdown && (
+                <div
+                  className={styles.dropdown}
+                >
+                  {Array.from(
+                    { length: 12 },
+                    (_, index) => (
+                      <button
+                        key={index + 1}
+                        type="button"
+                        onClick={() => {
+                          setMonth(index + 1);
+                          setShowMonthDropdown(
+                            false
+                          );
+                        }}
+                      >
+                        {index + 1}월
+                      </button>
+                    )
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* 연도 선택 드롭다운 */}
+            <div className={styles.dropdownWrapper}>
+              <button
+                type="button"
+                onClick={() =>
+                  setShowYearDropdown(
+                    !showYearDropdown
+                  )
+                }
+              >
+                {year}
+              </button>
+
+              {showYearDropdown && (
+                <div
+                  className={styles.dropdown}
+                >
+                  {[2023, 2024, 2025, 2026].map(
+                    (item) => (
+                      <button
+                        key={item}
+                        type="button"
+                        onClick={() => {
+                          setYear(item);
+                          setShowYearDropdown(
+                            false
+                          );
+                        }}
+                      >
+                        {item}
+                      </button>
+                    )
+                  )}
+                </div>
+              )}
+            </div>
+
+            <button
+              type="button"
+              onClick={handleNextMonth}
+            >
+              ▶
+            </button>
+          </div>
+
+          <div className={styles.actions}>
+            {/* 피그마 기준 전체 보기 UI 전환 */}
+            <button
+              type="button"
+              onClick={() =>
+                setIsListView(!isListView)
+              }
+            >
+              {isListView
+                ? '캘린더 보기'
+                : '전체 보기'}
+            </button>
+
+            <button
+              type="button"
+              onClick={() =>
+                setShowAddModal(true)
+              }
+            >
+              일정 추가
+            </button>
+          </div>
+        </div>
+
+        {!isListView && (
+          <div className={styles.calendarLayout}>
+            <div className={styles.calendar}>
+              <div
+                className={styles.weekHeader}
+              >
+                {WEEK_DAYS.map((day) => (
+                  <span key={day}>{day}</span>
+                ))}
+              </div>
+
+              <div
+                className={styles.dayGrid}
+              >
+                {calendarDays.map((day) => (
+                  <button
+                    key={day}
+                    type="button"
+                    className={
+                      day === 2
+                        ? styles.activeDay
+                        : ''
+                    }
+                  >
+                    {day}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <div className={styles.eventList}>
+              {events.map((event) => (
+                <div
+                  key={event.id}
+                  className={
+                    styles.eventItem
+                  }
+                >
+                  <div>
+                    <p>
+                      {event.start} ~
+                      {event.end}
+                    </p>
+
+                    <span>
+                      {event.title}
+                    </span>
+                  </div>
+
+                  <button
+                    type="button"
+                    onClick={() =>
+                      handleDeleteClick(
+                        event.id
+                      )
+                    }
+                  >
+                    🗑
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* 월별 일정 전체 조회 화면 */}
+        {isListView && (
+          <div className={styles.listView}>
+            <div>
+              <h3>3월</h3>
+
+              {events.map((event) => (
+                <div
+                  key={event.id}
+                  className={
+                    styles.listItem
+                  }
+                >
+                  <span>
+                    {event.title}
+                  </span>
+
+                  <small>
+                    {event.start} ~
+                    {event.end}
+                  </small>
+                </div>
+              ))}
+            </div>
+
+            <div>
+              <h3>4월</h3>
+
+              {events.map((event) => (
+                <div
+                  key={`${event.id}-4`}
+                  className={
+                    styles.listItem
+                  }
+                >
+                  <span>
+                    {event.title}
+                  </span>
+
+                  <small>
+                    {event.start} ~
+                    {event.end}
+                  </small>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 일정 추가 모달 */}
+      {showAddModal && (
+        <div className={styles.modalOverlay}>
+          <div className={styles.modal}>
+            <h3>일정 추가</h3>
+
+            <input
+              placeholder="일정명"
+              value={newEvent.title}
+              onChange={(event) =>
+                setNewEvent({
+                  ...newEvent,
+                  title:
+                    event.target.value,
+                })
+              }
+            />
+
+            <input
+              placeholder="시작일"
+              value={newEvent.start}
+              onChange={(event) =>
+                setNewEvent({
+                  ...newEvent,
+                  start:
+                    event.target.value,
+                })
+              }
+            />
+
+            <input
+              placeholder="종료일"
+              value={newEvent.end}
+              onChange={(event) =>
+                setNewEvent({
+                  ...newEvent,
+                  end:
+                    event.target.value,
+                })
+              }
+            />
+
+            <div className={styles.modalActions}>
+              <button
+                type="button"
+                onClick={() =>
+                  setShowAddModal(false)
+                }
+              >
+                취소
+              </button>
+
+              <Button
+                onClick={handleAddEvent}
+              >
+                등록
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 일정 삭제 확인 모달 */}
+      {showDeleteModal && (
+        <div className={styles.modalOverlay}>
+          <div className={styles.modal}>
+            <h3>
+              해당 일정을
+              삭제하시겠습니까?
+            </h3>
+
+            <div className={styles.modalActions}>
+              <button
+                type="button"
+                onClick={() =>
+                  setShowDeleteModal(
+                    false
+                  )
+                }
+              >
+                취소
+              </button>
+
+              <Button
+                onClick={
+                  handleDeleteConfirm
+                }
+              >
+                삭제
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
     </section>
   );
 }
 
-export default SchedulePage;
+export default SchedulePage;
\ No newline at end of file
diff --git a/src/pages/visitor/SchedulePage.module.css b/src/pages/visitor/SchedulePage.module.css
new file mode 100644
index 0000000..4e38fbd
--- /dev/null
+++ b/src/pages/visitor/SchedulePage.module.css
@@ -0,0 +1,271 @@
+.page {
+  min-height: calc(100vh - 112px);
+  padding: 4rem 10rem 5rem;
+  background-color: #fffaf7;
+}
+
+.panel {
+  max-width: 1120px;
+  margin: 0 auto;
+  border: 1px solid #f2d7c6;
+  border-radius: 24px;
+  background-color: #ffffff;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
+  padding: 2.5rem;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+}
+
+.dateControls {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.dateControls button {
+  border: 1px solid #d1d5db;
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.dropdownWrapper {
+  position: relative;
+}
+
+.dropdown {
+  position: absolute;
+  top: 110%;
+  left: 0;
+  width: 120px;
+  max-height: 220px;
+  overflow-y: auto;
+  border: 1px solid #d1d5db;
+  border-radius: 10px;
+  background: #ffffff;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
+  z-index: 10;
+}
+
+.dropdown button {
+  width: 100%;
+  border: none;
+  background: #ffffff;
+  padding: 0.75rem 1rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.dropdown button:hover {
+  background: #fff4ec;
+}
+
+.actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.actions button {
+  border: none;
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  background: #6b7280;
+  color: #ffffff;
+  cursor: pointer;
+  font-weight: 700;
+}
+
+.calendarLayout {
+  display: grid;
+  grid-template-columns: 420px 1fr;
+  gap: 2rem;
+}
+
+.calendar {
+  border: 1px solid #f3f4f6;
+  border-radius: 16px;
+  padding: 1.5rem;
+  background: #ffffff;
+}
+
+.weekHeader {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  margin-bottom: 1rem;
+  text-align: center;
+  font-weight: 700;
+  color: #6b7280;
+}
+
+.dayGrid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.5rem;
+}
+
+.dayGrid button {
+  width: 44px;
+  height: 44px;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.activeDay {
+  background: #3b82f6 !important;
+  color: #ffffff;
+}
+
+.eventList {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.eventItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border: 1px solid #f3f4f6;
+  border-radius: 12px;
+  background: #ffffff;
+}
+
+.eventItem p {
+  margin: 0 0 0.25rem;
+  font-size: 0.9rem;
+  color: #6b7280;
+}
+
+.eventItem span {
+  font-weight: 700;
+  color: #111827;
+}
+
+.eventItem button {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 1.1rem;
+}
+
+.listView {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.listView h3 {
+  margin: 0 0 1rem;
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: #111827;
+}
+
+.listItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.listItem span {
+  font-weight: 700;
+}
+
+.listItem small {
+  color: #6b7280;
+}
+
+.modalOverlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+}
+
+.modal {
+  width: 420px;
+  border-radius: 20px;
+  background: #ffffff;
+  padding: 2rem;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
+}
+
+.modal h3 {
+  margin: 0 0 1.5rem;
+  font-size: 1.25rem;
+  font-weight: 800;
+}
+
+.modal input {
+  width: 100%;
+  margin-bottom: 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 10px;
+  padding: 0.875rem 1rem;
+  font: inherit;
+}
+
+.modalActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+.modalActions button {
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  background: #ffffff;
+  cursor: pointer;
+}
+
+@media (max-width: 1024px) {
+  .page {
+    padding: 2rem;
+  }
+
+  .calendarLayout {
+    grid-template-columns: 1fr;
+  }
+
+  .toolbar {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+}
+
+@media (max-width: 640px) {
+  .page {
+    padding: 1rem;
+  }
+
+  .panel {
+    padding: 1.5rem;
+  }
+
+  .actions {
+    flex-direction: column;
+  }
+
+  .dayGrid button {
+    width: 38px;
+    height: 38px;
+  }
+}
\ No newline at end of file

From 049441c4c429eb146451cfe1a93705a434bb3a55 Mon Sep 17 00:00:00 2001
From: takjinwu <takjinwu0613@gmail.com>
Date: Mon, 1 Jun 2026 02:29:29 +0900
Subject: [PATCH 2/2] =?UTF-8?q?tailwind=20css=20=EC=84=A4=EC=A0=95=20?=
 =?UTF-8?q?=EB=B0=8F=20Noto=20Sans=20KR=20=EA=B8=80=EA=BC=B4=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore            |   1 +
 README.md             |  85 ++--
 index.html            |   6 +
 package-lock.json     | 884 +++++++++++++++++++++++++++++++++++++++++-
 package.json          |   3 +
 postcss.config.js     |   6 +
 src/styles/global.css |   6 +-
 tailwind.config.js    |  12 +
 8 files changed, 963 insertions(+), 40 deletions(-)
 create mode 100644 postcss.config.js
 create mode 100644 tailwind.config.js

diff --git a/.gitignore b/.gitignore
index 49abe4c..2475149 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,3 +37,4 @@ coverage
 
 # OS
 Thumbs.db
+.claude/claude.md
diff --git a/README.md b/README.md
index 572182c..c53c3b5 100644
--- a/README.md
+++ b/README.md
@@ -26,16 +26,16 @@
 
 ## 1. 기술 스택
 
-| 분류 | 사용 기술 |
-|---|---|
-| Framework | React 18+ (Vite 기반) |
-| Language | JavaScript (ES2022+) 또는 TypeScript |
-| 3D | Three.js, @react-three/fiber, @react-three/drei |
-| Routing | react-router-dom v6 |
-| State | Zustand (전역), useState/useReducer (지역) |
-| HTTP | Axios |
-| Styling | Tailwind CSS (선택) 또는 CSS Modules |
-| Lint/Format | ESLint + Prettier |
+| 분류        | 사용 기술                                       |
+| ----------- | ----------------------------------------------- |
+| Framework   | React 18+ (Vite 기반)                           |
+| Language    | JavaScript (ES2022+) 또는 TypeScript            |
+| 3D          | Three.js, @react-three/fiber, @react-three/drei |
+| Routing     | react-router-dom v6                             |
+| State       | Zustand (전역), useState/useReducer (지역)      |
+| HTTP        | Axios                                           |
+| Styling     | Tailwind CSS                                    |
+| Lint/Format | ESLint + Prettier                               |
 
 > **버전 변경 시 PM 승인 필수.** `package.json` 의존성을 임의로 업그레이드하지 않습니다.
 
@@ -80,6 +80,7 @@ src/
 ```
 
 **규칙**
+
 - 한 폴더에 파일이 10개 이상 쌓이면 하위 폴더로 분리합니다.
 - `pages/` 안에는 라우트와 1:1로 매칭되는 파일만 둡니다. 그 외 로직은 `components/`, `hooks/`로 분리합니다.
 
@@ -87,19 +88,20 @@ src/
 
 ## 3. 네이밍 규칙
 
-| 대상 | 규칙 | 예시 |
-|---|---|---|
-| 컴포넌트 파일 | PascalCase + `.jsx` | `RecruitForm.jsx` |
-| 일반 JS 파일 | camelCase + `.js` | `formatDate.js` |
-| 커스텀 훅 | `use`로 시작, camelCase | `useRecruitForm.js` |
-| 상수 | UPPER_SNAKE_CASE | `MAX_FILE_SIZE` |
-| 변수/함수 | camelCase | `getUserInfo` |
-| Boolean 변수 | `is`, `has`, `can`, `should` 접두사 | `isLoading`, `hasError` |
-| 이벤트 핸들러 | `handle` + 동작 | `handleSubmit`, `handleClick` |
-| props로 받는 핸들러 | `on` + 동작 | `onSubmit`, `onClose` |
-| CSS 클래스 (CSS Modules) | camelCase | `submitButton` |
+| 대상                     | 규칙                                | 예시                          |
+| ------------------------ | ----------------------------------- | ----------------------------- |
+| 컴포넌트 파일            | PascalCase + `.jsx`                 | `RecruitForm.jsx`             |
+| 일반 JS 파일             | camelCase + `.js`                   | `formatDate.js`               |
+| 커스텀 훅                | `use`로 시작, camelCase             | `useRecruitForm.js`           |
+| 상수                     | UPPER_SNAKE_CASE                    | `MAX_FILE_SIZE`               |
+| 변수/함수                | camelCase                           | `getUserInfo`                 |
+| Boolean 변수             | `is`, `has`, `can`, `should` 접두사 | `isLoading`, `hasError`       |
+| 이벤트 핸들러            | `handle` + 동작                     | `handleSubmit`, `handleClick` |
+| props로 받는 핸들러      | `on` + 동작                         | `onSubmit`, `onClose`         |
+| CSS 클래스 (CSS Modules) | camelCase                           | `submitButton`                |
 
 **금지 사항**
+
 - 의미 없는 약어 사용 금지 (`btn`, `usr`, `tmp` 등). `button`, `user`, `temporary`로 풀어쓰기.
 - 한글 변수명 금지.
 - `data`, `info`, `value`처럼 모호한 이름 단독 사용 금지. `userData`, `recruitInfo`처럼 맥락 포함.
@@ -109,6 +111,7 @@ src/
 ## 4. 컴포넌트 작성 규칙
 
 ### 4.1 기본 원칙
+
 - **함수형 컴포넌트만 사용합니다.** Class 컴포넌트 금지.
 - **한 파일에 한 컴포넌트.** export default는 파일당 하나.
 - **150줄을 넘으면 분리를 고민합니다.** 250줄을 넘으면 무조건 분리합니다.
@@ -159,6 +162,7 @@ export default RecruitForm;
 ```
 
 ### 4.3 컴포넌트 작성 순서 (위에서 아래로)
+
 1. import
 2. 컴포넌트 함수 선언
 3. 상태(useState, useReducer)
@@ -170,12 +174,15 @@ export default RecruitForm;
 9. export default
 
 ### 4.4 조건부 렌더링
+
 - 삼항 연산자는 1단까지만. 중첩 금지.
 - 복잡한 분기는 변수로 빼거나 early return 사용.
 
 ```jsx
 // ❌ 나쁜 예
-{isLoading ? <Loading /> : error ? <Error /> : data ? <List /> : <Empty />}
+{
+  isLoading ? <Loading /> : error ? <Error /> : data ? <List /> : <Empty />;
+}
 
 // ✅ 좋은 예
 if (isLoading) return <Loading />;
@@ -189,11 +196,13 @@ return <List />;
 ## 5. 스타일링 규칙
 
 ### 5.1 도구 선택
+
 - **기본은 Tailwind CSS를 사용합니다.** (선택한 경우)
 - 복잡한 애니메이션, 글로벌 스타일은 `styles/` 아래 CSS 파일로 분리.
 - 인라인 style은 동적 값(예: `transform: translateX(${x}px)`)에만 사용.
 
 ### 5.2 색상과 폰트
+
 - **하드코딩 금지.** 모든 색상은 `tailwind.config.js` 또는 `src/constants/theme.js`에 정의 후 사용.
 
 ```js
@@ -207,6 +216,7 @@ export const COLORS = {
 ```
 
 ### 5.3 반응형
+
 - 모바일 우선(Mobile First). 기본 스타일은 모바일, `md:`, `lg:` 등으로 확장.
 - 브레이크포인트: `sm: 640px`, `md: 768px`, `lg: 1024px`, `xl: 1280px` (Tailwind 기본값 유지)
 
@@ -215,6 +225,7 @@ export const COLORS = {
 ## 6. Three.js 작성 규칙
 
 ### 6.1 기본 원칙
+
 - **`@react-three/fiber`를 통해 선언적으로 작성합니다.** 명령형(`new THREE.Scene()`)은 정말 필요한 경우에만.
 - Three.js 관련 모든 코드는 `src/three/` 아래에 둡니다.
 - 3D 모델 파일은 `assets/models/`에 두고, 파일명은 kebab-case (`hero-scene.glb`).
@@ -249,6 +260,7 @@ export default HeroScene;
 ```
 
 ### 6.3 성능 규칙 (인수인계용 필수 사항)
+
 - **메모리 누수 방지**: `useEffect` cleanup에서 `geometry.dispose()`, `material.dispose()`, `texture.dispose()` 호출.
 - **재사용 가능한 geometry/material은 `useMemo`로 감쌉니다.** 매 렌더마다 새로 만들지 않습니다.
 - **3D 모델은 `useGLTF.preload()`로 사전 로드**하여 초기 진입 지연을 줄입니다.
@@ -256,6 +268,7 @@ export default HeroScene;
 - **모델 파일 크기는 5MB 이하** 권장. Draco 압축 사용.
 
 ### 6.4 Three.js 매직 넘버 금지
+
 좌표, FOV, 회전 속도 같은 값은 컴포넌트 상단에 상수로 분리합니다.
 
 ```jsx
@@ -269,13 +282,15 @@ const LIGHT_INTENSITY = 0.8;
 ## 7. 상태 관리 및 API 통신
 
 ### 7.1 상태 분류
-| 종류 | 도구 |
-|---|---|
-| 컴포넌트 내부 상태 | `useState`, `useReducer` |
-| 전역 상태 (로그인 정보, 테마 등) | Zustand |
-| 서버 상태 (API 응답 캐싱) | TanStack Query 권장 / 또는 직접 관리 |
+
+| 종류                             | 도구                                 |
+| -------------------------------- | ------------------------------------ |
+| 컴포넌트 내부 상태               | `useState`, `useReducer`             |
+| 전역 상태 (로그인 정보, 테마 등) | Zustand                              |
+| 서버 상태 (API 응답 캐싱)        | TanStack Query 권장 / 또는 직접 관리 |
 
 ### 7.2 Axios 인스턴스
+
 모든 API는 `src/apis/instance.js`의 공통 인스턴스를 통해 호출합니다.
 
 ```js
@@ -297,6 +312,7 @@ export default instance;
 ```
 
 ### 7.3 API 함수 분리
+
 컴포넌트에서 직접 `axios.get(...)`을 호출하지 않습니다. 반드시 `apis/` 폴더의 함수를 통해 호출합니다.
 
 ```js
@@ -308,6 +324,7 @@ export const getRecruitList = () => instance.get('/admin/recruit');
 ```
 
 ### 7.4 에러 처리
+
 - 모든 비동기 호출은 `try-catch`로 감쌉니다.
 - 사용자에게 보일 에러 메시지는 상수로 관리하고, 콘솔에는 `[컴포넌트명] 에러내용` 형식으로 출력합니다.
 
@@ -343,6 +360,7 @@ import logoImage from '@/assets/images/logo.png';
 ## 9. 주석 작성 규칙
 
 ### 9.1 작성 원칙
+
 - **"무엇을" 하는지가 아니라 "왜" 하는지를 적습니다.** 코드만 봐서 알 수 있는 건 주석 달지 않습니다.
 - **인수인계받는 사람을 생각하고 적습니다.** "이건 ~ 때문에 이렇게 했다"가 핵심.
 - 한국어로 작성. 영어 섞지 않기.
@@ -364,6 +382,7 @@ const TEMP_BG_COLOR = '#CCCCCC';
 ```
 
 ### 9.3 JSDoc
+
 재사용 컴포넌트와 유틸 함수에는 JSDoc 권장.
 
 ```js
@@ -380,6 +399,7 @@ export function formatKoreanDate(dateString) { ... }
 ## 10. Git 컨벤션
 
 ### 10.1 브랜치 전략
+
 ```
 main      → 배포용 (PM만 머지)
 develop   → 개발 통합 브랜치
@@ -389,6 +409,7 @@ refactor/*→ 리팩토링
 ```
 
 ### 10.2 커밋 메시지 (Conventional Commits)
+
 ```
 <type>: <제목 (한국어, 명령형, 50자 이내)>
 
@@ -407,6 +428,7 @@ refactor/*→ 리팩토링
 | `chore` | 빌드 설정, 패키지 매니저 등 |
 
 **예시**
+
 ```
 feat: 신입부원 모집 신청 폼 구현
 fix: 모바일에서 Three.js 캔버스가 잘리는 문제 해결
@@ -414,6 +436,7 @@ docs: README에 환경 변수 설명 추가
 ```
 
 ### 10.3 PR 규칙
+
 - **base 브랜치는 항상 `develop`.** `main`에 직접 PR 금지.
 - 제목: 커밋 컨벤션과 동일한 형식
 - 본문에 포함할 것:
@@ -445,9 +468,11 @@ VITE_ADMIN_SECRET_KEY=your_key_here
 ## 12. 코드 품질 도구
 
 ### 12.1 ESLint + Prettier
+
 프로젝트 루트의 `.eslintrc`, `.prettierrc`를 따릅니다. 개인 설정으로 덮어쓰지 마세요.
 
 **필수 설정**
+
 ```json
 // .prettierrc
 {
@@ -461,6 +486,7 @@ VITE_ADMIN_SECRET_KEY=your_key_here
 ```
 
 ### 12.2 커밋 전 체크리스트
+
 - [ ] `npm run lint` 통과
 - [ ] `npm run format` 적용
 - [ ] `console.log` 제거 (디버깅 후)
@@ -468,6 +494,7 @@ VITE_ADMIN_SECRET_KEY=your_key_here
 - [ ] 주석 처리된 옛날 코드 제거
 
 ### 12.3 VSCode 확장 (권장)
+
 - ESLint
 - Prettier - Code formatter
 - ES7+ React/Redux/React-Native snippets
@@ -480,6 +507,7 @@ VITE_ADMIN_SECRET_KEY=your_key_here
 > **다음 기수에게 넘기기 전에 반드시 확인할 항목입니다.**
 
 ### 13.1 문서
+
 - [ ] 본 README가 최신 상태인지 확인
 - [ ] `.env.example`에 모든 환경 변수가 명시되어 있는지 확인
 - [ ] 주요 디렉토리에 `README.md`가 있는지 (예: `src/three/README.md`)
@@ -487,18 +515,21 @@ VITE_ADMIN_SECRET_KEY=your_key_here
 - [ ] 디자인 시안 링크 (Figma 등) 포함
 
 ### 13.2 코드
+
 - [ ] `TODO`, `FIXME` 주석 정리 (작성자/날짜 명시)
 - [ ] 사용하지 않는 파일/패키지 제거
 - [ ] 매직 넘버 상수화
 - [ ] 모든 페이지가 정상 동작하는지 수동 테스트
 
 ### 13.3 배포
+
 - [ ] 빌드 명령어 (`npm run build`) 정상 동작
 - [ ] 배포 URL, 도메인 정보 문서화
 - [ ] 호스팅 계정 인수인계 (Vercel, Netlify 등)
 - [ ] Firebase / 백엔드 서버 접근 권한 이양
 
 ### 13.4 회고
+
 - [ ] 알려진 버그/이슈 목록 작성
 - [ ] 다음 기수에게 전하고 싶은 개선 포인트 정리
 
diff --git a/index.html b/index.html
index 10c5921..7984da5 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
     <title>ONE | 컴퓨터공학과 동아리</title>
     <meta name="description" content="ONE 동아리 공식 웹사이트" />
   </head>
diff --git a/package-lock.json b/package-lock.json
index dfedc11..fb8f68f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
     "": {
       "name": "one-frontend",
       "version": "0.1.0",
+      "hasInstallScript": true,
       "dependencies": {
         "@react-three/drei": "^9.105.0",
         "@react-three/fiber": "^8.16.0",
@@ -22,14 +23,34 @@
         "@types/react": "^18.3.0",
         "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.3.0",
+        "autoprefixer": "^10.5.0",
         "eslint": "^9.0.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-react": "^7.34.0",
         "eslint-plugin-react-hooks": "^5.1.0",
         "eslint-plugin-react-refresh": "^0.4.6",
         "globals": "^15.0.0",
+        "postcss": "^8.5.15",
         "prettier": "^3.2.5",
+        "tailwindcss": "^3.4.19",
         "vite": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=9.0.0"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -1011,6 +1032,44 @@
         "three": ">= 0.159.0"
       }
     },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@react-spring/animated": {
       "version": "9.7.5",
       "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.5.tgz",
@@ -1819,6 +1878,34 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -1980,6 +2067,43 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "license": "MIT"
     },
+    "node_modules/autoprefixer": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.0.tgz",
+      "integrity": "sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.2",
+        "caniuse-lite": "^1.0.30001787",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -2056,6 +2180,19 @@
         "require-from-string": "^2.0.2"
       }
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.14",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
@@ -2067,6 +2204,19 @@
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.28.2",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
@@ -2184,6 +2334,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/camera-controls": {
       "version": "2.10.1",
       "resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-2.10.1.tgz",
@@ -2231,6 +2391,44 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2263,6 +2461,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2309,6 +2517,19 @@
         "node": ">= 8"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -2448,6 +2669,20 @@
         "webgl-constants": "^1.1.1"
       }
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/doctrine": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -2953,6 +3188,36 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -2967,6 +3232,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
     "node_modules/fflate": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
@@ -2986,6 +3261,19 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -3076,6 +3364,20 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -3496,6 +3798,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-boolean-object": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
@@ -3662,6 +3977,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-number-object": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
@@ -3882,6 +4207,16 @@
         "@types/react": "*"
       }
     },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3997,6 +4332,26 @@
         "immediate": "~3.0.5"
       }
     },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -4061,6 +4416,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/meshline": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/meshline/-/meshline-3.3.1.tgz",
@@ -4076,6 +4441,20 @@
       "integrity": "sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g==",
       "license": "MIT"
     },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -4117,6 +4496,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.12",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
@@ -4169,6 +4560,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -4178,6 +4579,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -4390,23 +4801,56 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/possible-typed-array-names": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
-      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+    "node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/postcss": {
-      "version": "8.5.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.14.tgz",
-      "integrity": "sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==",
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
       "dev": true,
-      "funding": [
-        {
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.15",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
+      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
+      "dev": true,
+      "funding": [
+        {
           "type": "opencollective",
           "url": "https://opencollective.com/postcss/"
         },
@@ -4421,7 +4865,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.11",
+        "nanoid": "^3.3.12",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -4429,6 +4873,162 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-import/node_modules/resolve": {
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/potpack": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
@@ -4501,6 +5101,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -4626,6 +5247,29 @@
         }
       }
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -4713,6 +5357,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.60.3",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.3.tgz",
@@ -4765,6 +5420,30 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/safe-array-concat": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.4.tgz",
@@ -5146,6 +5825,29 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -5181,6 +5883,89 @@
         "react": ">=17.0"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/resolve": {
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/three": {
       "version": "0.163.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.163.0.tgz",
@@ -5220,6 +6005,67 @@
       "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
       "license": "MIT"
     },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/troika-three-text": {
       "version": "0.52.4",
       "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.52.4.tgz",
@@ -5250,6 +6096,13 @@
       "integrity": "sha512-W1CpvTHykaPH5brv5VHLfQo9D1OYuo0cSBEUQFFT/nBUzM8iD6Lq2/tgG/f1OelbAS1WtaTPQzE5uM49egnngw==",
       "license": "MIT"
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/tunnel-rat": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/tunnel-rat/-/tunnel-rat-0.1.2.tgz",
@@ -5419,6 +6272,13 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/utility-types": {
       "version": "3.11.0",
       "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
diff --git a/package.json b/package.json
index 81c48c2..4aaa54f 100644
--- a/package.json
+++ b/package.json
@@ -32,13 +32,16 @@
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.0",
+    "autoprefixer": "^10.5.0",
     "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.34.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "globals": "^15.0.0",
+    "postcss": "^8.5.15",
     "prettier": "^3.2.5",
+    "tailwindcss": "^3.4.19",
     "vite": "^5.2.0"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..2aa7205
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/src/styles/global.css b/src/styles/global.css
index 5c9515a..b472821 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 *,
 *::before,
 *::after {
@@ -8,7 +12,7 @@ html,
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #1f2937;
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..204b3a5
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,jsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['"Noto Sans KR"', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [],
+};