From 76dbf1cf0cafdcec8e5de42f090d1e4ff27c865c Mon Sep 17 00:00:00 2001
From: yoooooojin <ujin4903@sookmyung.ac.kr>
Date: Sat, 18 Jul 2026 16:52:11 +0900
Subject: [PATCH 1/7] =?UTF-8?q?fix:=20=EB=A3=A8=ED=8A=B8=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/RootLayout.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/layout/RootLayout.tsx b/src/components/layout/RootLayout.tsx
index f41b647..66eb950 100644
--- a/src/components/layout/RootLayout.tsx
+++ b/src/components/layout/RootLayout.tsx
@@ -3,11 +3,9 @@ import { Outlet } from 'react-router-dom';
 export default function RootLayout() {
   return (
     <div className="h-[100dvh] bg-gray-200 flex justify-center font-sans text-gray-900">
-      
-      <div className="w-full max-w-[402px] h-full bg-gray-50 shadow-xl relative flex flex-col overflow-hidden">
+      <div className="w-full max-w-[402px] h-full bg-[#FBFBFB] shadow-xl relative flex flex-col overflow-hidden">
         <Outlet />
       </div>
-      
     </div>
   );
-}
\ No newline at end of file
+}

From 3c4c86c46e916aae49667fe7762a57a7127f30d7 Mon Sep 17 00:00:00 2001
From: yoooooojin <ujin4903@sookmyung.ac.kr>
Date: Sat, 18 Jul 2026 17:16:48 +0900
Subject: [PATCH 2/7] =?UTF-8?q?fix:=20Paperozi=20->=20Paperlogy=EB=A1=9C?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.css | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/index.css b/src/index.css
index 27c3ac2..dbd3f5d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -81,7 +81,7 @@
 
 /* ── Paperlogy (포인트 제목 폰트) ── */
 @font-face {
-  font-family: 'Paperozi';
+  font-family: 'Paperlogy';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2')
     format('woff2');
   font-weight: 100;
@@ -89,7 +89,7 @@
 }
 
 @font-face {
-  font-family: 'Paperozi';
+  font-family: 'Paperlogy';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2')
     format('woff2');
   font-weight: 200;
@@ -97,7 +97,7 @@
 }
 
 @font-face {
-  font-family: 'Paperozi';
+  font-family: 'Paperlogy';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2')
     format('woff2');
   font-weight: 300;
@@ -105,7 +105,7 @@
 }
 
 @font-face {
-  font-family: 'Paperozi';
+  font-family: 'Paperlogy';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2')
     format('woff2');
   font-weight: 400;
@@ -113,7 +113,7 @@
 }
 
 @font-face {
-  font-family: 'Paperozi';
+  font-family: 'Paperlogy';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2')
     format('woff2');
   font-weight: 500;
@@ -121,7 +121,7 @@
 }
 
 @font-face {
-  font-family: 'Paperozi';
+  font-family: 'Paperlogy';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2')
     format('woff2');
   font-weight: 600;
@@ -129,7 +129,7 @@
 }
 
 @font-face {
-  font-family: 'Paperozi';
+  font-family: 'Paperlogy';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2')
     format('woff2');
   font-weight: 700;
@@ -137,7 +137,7 @@
 }
 
 @font-face {
-  font-family: 'Paperozi';
+  font-family: 'Paperlogy';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2')
     format('woff2');
   font-weight: 800;
@@ -145,7 +145,7 @@
 }
 
 @font-face {
-  font-family: 'Paperozi';
+  font-family: 'Paperlogy';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2')
     format('woff2');
   font-weight: 900;

From c0cc308d68195c613fb9d252093d4b3c114d5b96 Mon Sep 17 00:00:00 2001
From: yoooooojin <ujin4903@sookmyung.ac.kr>
Date: Sat, 18 Jul 2026 17:29:15 +0900
Subject: [PATCH 3/7] =?UTF-8?q?fix:=20=ED=8C=8C=EB=9E=80=20=EC=9B=90=20?=
 =?UTF-8?q?=EB=B0=B0=EA=B2=BD=20=EC=A4=91=EC=95=99=20=EC=A0=95=EB=A0=AC=20?=
 =?UTF-8?q?+=20=EC=B1=84=ED=8C=85=20=EC=95=84=EC=9D=B4=EC=BD=98=20fill=20?=
 =?UTF-8?q?=EC=97=86=EB=8A=94=20=EA=B1=B8=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/BottomNav.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/layout/BottomNav.tsx b/src/components/layout/BottomNav.tsx
index 0195d4a..bf0f14b 100644
--- a/src/components/layout/BottomNav.tsx
+++ b/src/components/layout/BottomNav.tsx
@@ -5,8 +5,6 @@ export default function BottomNav() {
   const location = useLocation();
   const navigate = useNavigate();
 
-  // 💡 메뉴 데이터 배열 (주소와 아이콘 매핑)
-  // 아이콘은 시안과 가장 유사한 ph(Phosphor) 및 mdi 계열로 임시 세팅했습니다.
   const navItems = [
     { id: 'home', label: '홈', path: '/', icon: 'ph:house-fill' },
     {
@@ -19,7 +17,7 @@ export default function BottomNav() {
       id: 'chat',
       label: '교환채팅방',
       path: '/chat',
-      icon: 'ph:chat-circle-dots-fill',
+      icon: 'ph:chat-circle-dots',
     },
     { id: 'lounge', label: '라운지', path: '/lounge', icon: 'mdi:snowflake' },
     { id: 'my', label: '마이페이지', path: '/my', icon: 'ph:user' },
@@ -41,15 +39,17 @@ export default function BottomNav() {
             onClick={() => navigate(item.path)}
             className="flex flex-col items-center justify-center gap-1 w-16"
           >
-            {/* 아이콘 영역 (활성화 시 파란색 동그라미 배경 + 흰색 아이콘) */}
             <div
-              className={`flex items-center justify-center w-10 h-10 rounded-full transition-colors duration-200 ${
+              className={`relative shrink-0 w-10 h-10 rounded-full transition-colors duration-200 ${
                 isActive
-                  ? 'bg-brand-lightBlue text-white' // 활성화: 파란 원 배경, 흰색 아이콘 (아까 쓰신 색상 변수명)
-                  : 'bg-transparent text-gray-400' // 비활성화: 투명 배경, 회색 아이콘
+                  ? 'bg-brand-lightBlue text-white'
+                  : 'bg-transparent text-gray-400'
               }`}
             >
-              <Icon icon={item.icon} className="text-[24px]" />
+              <Icon
+                icon={item.icon}
+                className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-6 h-6 block"
+              />
             </div>
 
             {/* 텍스트 영역 (활성화 시 파란색 글씨) */}

From d98d2f7ca6389d3808d6b5aa9d8fd7ea6dd2f3c1 Mon Sep 17 00:00:00 2001
From: yoooooojin <ujin4903@sookmyung.ac.kr>
Date: Sat, 18 Jul 2026 18:06:27 +0900
Subject: [PATCH 4/7] =?UTF-8?q?chore:=20test=20=ED=8C=8C=EC=9D=BC=EB=93=A4?=
 =?UTF-8?q?=20=EB=AA=A8=EB=91=90=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/TestAvatar.tsx  |  76 ------------------
 src/pages/TestButton.tsx  | 125 -----------------------------
 src/pages/TestCard.tsx    | 103 ------------------------
 src/pages/TestExtra.tsx   | 165 --------------------------------------
 src/pages/TestHeader.tsx  |  82 -------------------
 src/pages/TestInput.tsx   |  94 ----------------------
 src/pages/TestLoading.tsx |  72 -----------------
 src/pages/TestModal.tsx   | 126 -----------------------------
 src/pages/TestTabs.tsx    |  87 --------------------
 src/routes/router.tsx     |  24 +-----
 10 files changed, 3 insertions(+), 951 deletions(-)
 delete mode 100644 src/pages/TestAvatar.tsx
 delete mode 100644 src/pages/TestButton.tsx
 delete mode 100644 src/pages/TestCard.tsx
 delete mode 100644 src/pages/TestExtra.tsx
 delete mode 100644 src/pages/TestHeader.tsx
 delete mode 100644 src/pages/TestInput.tsx
 delete mode 100644 src/pages/TestLoading.tsx
 delete mode 100644 src/pages/TestModal.tsx
 delete mode 100644 src/pages/TestTabs.tsx

diff --git a/src/pages/TestAvatar.tsx b/src/pages/TestAvatar.tsx
deleted file mode 100644
index 66e7f68..0000000
--- a/src/pages/TestAvatar.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { Avatar } from '../components/common/Avatar';
-
-export const TestAvatar = () => {
-  return (
-    <div className="min-h-screen bg-gray-50 flex flex-col items-center p-6 gap-8">
-      <div className="text-center mt-10">
-        <h1 className="text-2xl font-bold text-gray-900">
-          아바타 컴포넌트 테스트 👤
-        </h1>
-        <p className="text-gray-500 mt-2 text-sm">
-          사이즈별 기본 상태와 이미지 적용 상태
-        </p>
-      </div>
-
-      <div className="flex flex-col gap-6 w-full max-w-[402px]">
-        {/* 1. 사이즈별 기본 아바타 (이미지 없음) */}
-        <section className="bg-white p-5 rounded-2xl border border-gray-200 shadow-sm flex flex-col gap-4">
-          <h2 className="text-sm font-semibold text-gray-700 mb-2 border-b pb-2">
-            1. 기본 프로필 (사이즈별)
-          </h2>
-          <div className="flex items-end justify-center gap-6">
-            <div className="flex flex-col items-center gap-2">
-              <Avatar size="sm" />
-              <span className="text-xs text-gray-500">sm (댓글용)</span>
-            </div>
-            <div className="flex flex-col items-center gap-2">
-              <Avatar size="md" />
-              <span className="text-xs text-gray-500">md (기본용)</span>
-            </div>
-            <div className="flex flex-col items-center gap-2">
-              <Avatar size="lg" />
-              <span className="text-xs text-gray-500">lg (마이페이지)</span>
-            </div>
-          </div>
-        </section>
-
-        {/* 2. 이미지가 들어온 경우 */}
-        <section className="bg-white p-5 rounded-2xl border border-gray-200 shadow-sm flex flex-col gap-4">
-          <h2 className="text-sm font-semibold text-gray-700 mb-2 border-b pb-2">
-            2. 사진이 있을 경우 (src 전달)
-          </h2>
-          <div className="flex items-end justify-center gap-6">
-            {/* 임시로 더미 이미지 URL을 넣어두었습니다 */}
-            <Avatar
-              size="sm"
-              src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=100&q=80"
-            />
-            <Avatar
-              size="md"
-              src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=150&q=80"
-            />
-            <Avatar
-              size="lg"
-              src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=200&q=80"
-            />
-          </div>
-        </section>
-
-        {/* 3. 실제 시안 적용 예시 (게시글 상세 작성자 정보) */}
-        <section className="bg-white p-5 rounded-2xl border border-gray-200 shadow-sm flex flex-col gap-4">
-          <h2 className="text-sm font-semibold text-gray-700 mb-2 border-b pb-2">
-            3. 실제 시안 흉내내기
-          </h2>
-
-          <div className="flex items-center gap-3 py-2">
-            <Avatar size="md" />
-            <div className="flex flex-col">
-              <span className="font-bold text-gray-900">너송</span>
-              <span className="text-xs text-gray-500">받은 요청 3개</span>
-            </div>
-          </div>
-        </section>
-      </div>
-    </div>
-  );
-};
diff --git a/src/pages/TestButton.tsx b/src/pages/TestButton.tsx
deleted file mode 100644
index 89f6e05..0000000
--- a/src/pages/TestButton.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import Button from '../components/common/Button';
-
-export const TestButton = () => {
-  return (
-    <div className="min-h-screen bg-gray-50 p-8 flex flex-col gap-10 pb-20">
-      <div className="border-b border-gray-200 pb-4">
-        <h1 className="text-2xl font-bold text-gray-900">
-          버튼 UI 테스트 도화지 🎨
-        </h1>
-        <p className="text-gray-500 mt-2 text-sm">
-          시안의 모든 케이스를 커버하는 만능 버튼 검증 페이지입니다.
-        </p>
-      </div>
-
-      {/* 1. 새로운 색상(Variant) 테스트 */}
-      <section className="flex flex-col gap-4">
-        <h2 className="text-lg font-semibold text-gray-700">
-          1. Variant (디자인 종류)
-        </h2>
-        <div className="flex flex-wrap items-center gap-4 bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
-          <Button variant="primary" size="md" fullWidth={false}>
-            Primary
-          </Button>
-          <Button variant="danger" size="md" fullWidth={false}>
-            Danger
-          </Button>
-          <Button variant="warning" size="md" fullWidth={false}>
-            Warning (수락)
-          </Button>
-          <Button variant="light" size="md" fullWidth={false}>
-            Light (입장)
-          </Button>
-          <Button variant="outline" size="md" fullWidth={false}>
-            Outline
-          </Button>
-          <Button variant="ghost" size="md" fullWidth={false}>
-            Ghost
-          </Button>
-        </div>
-      </section>
-
-      {/* 2. 실제 시안 레이아웃(Layout) 테스트 - 하이라이트 ✨ */}
-      <section className="flex flex-col gap-4">
-        <h2 className="text-lg font-semibold text-gray-700">
-          2. 실제 시안 레이아웃 조립 테스트
-        </h2>
-        <div className="flex flex-col gap-8 bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
-          {/* 케이스 A: 하단 고정 100% 버튼 */}
-          <div>
-            <p className="text-sm text-gray-400 mb-2 font-medium">
-              ✅ 케이스 A: 회원가입, 시간등록 (기본 100%)
-            </p>
-            <Button>인증하기</Button>
-          </div>
-
-          {/* 케이스 B: 50:50 모달창 버튼 */}
-          <div>
-            <p className="text-sm text-gray-400 mb-2 font-medium">
-              ✅ 케이스 B: 모달창 (취소/삭제 반반 나누기)
-            </p>
-            <div className="flex w-full gap-2">
-              <Button variant="outline" className="flex-1">
-                취소
-              </Button>
-              <Button variant="danger" className="flex-1">
-                삭제
-              </Button>
-            </div>
-          </div>
-
-          {/* 케이스 C: 리스트 아이템 내부의 수락/거절 */}
-          <div>
-            <p className="text-sm text-gray-400 mb-2 font-medium">
-              ✅ 케이스 C: 받은 요청함 (수락/거절 작은 버튼)
-            </p>
-            <div className="flex gap-2">
-              <Button variant="warning" size="sm" className="flex-1">
-                수락
-              </Button>
-              <Button variant="outline" size="sm" className="flex-1">
-                거절
-              </Button>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* 3. 크기(Size) 테스트 */}
-      <section className="flex flex-col gap-4">
-        <h2 className="text-lg font-semibold text-gray-700">
-          3. Size (크기 변화) - fullWidth={false} 기준
-        </h2>
-        <div className="flex items-center gap-6 bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
-          <Button size="lg" fullWidth={false}>
-            lg 사이즈 (기본)
-          </Button>
-          <Button size="md" fullWidth={false}>
-            md 사이즈
-          </Button>
-          <Button size="sm" fullWidth={false}>
-            sm 사이즈
-          </Button>
-        </div>
-      </section>
-
-      {/* 4. 비활성화(Disabled) 테스트 */}
-      <section className="flex flex-col gap-4">
-        <h2 className="text-lg font-semibold text-gray-700">
-          4. Disabled (비활성화 상태)
-        </h2>
-        <div className="flex flex-wrap items-center gap-4 bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
-          <Button disabled fullWidth={false}>
-            내용 입력 전
-          </Button>
-          <Button variant="warning" disabled fullWidth={false}>
-            수락 불가
-          </Button>
-          <Button variant="outline" disabled fullWidth={false}>
-            선택 불가
-          </Button>
-        </div>
-      </section>
-    </div>
-  );
-};
diff --git a/src/pages/TestCard.tsx b/src/pages/TestCard.tsx
deleted file mode 100644
index f84caa7..0000000
--- a/src/pages/TestCard.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { Icon } from '@iconify/react';
-import { Badge } from '../components/common/Badge';
-import { CourseCard } from '../components/common/CourseCard';
-
-export const TestCard = () => {
-  return (
-    <div className="min-h-screen bg-gray-50 flex flex-col items-center p-6 gap-8 pb-20">
-      <div className="text-center mt-10">
-        <h1 className="text-2xl font-bold text-gray-900">
-          과목 카드 & 배지 테스트 🪪
-        </h1>
-        <p className="text-gray-500 mt-2 text-sm">
-          시안의 모든 카드 케이스 완벽 구현
-        </p>
-      </div>
-
-      <div className="flex flex-col gap-6 w-full max-w-[402px]">
-        {/* 케이스 A: 찜 목록 (가장 단순한 형태 + 노란색 배지) */}
-        <section className="flex flex-col gap-2">
-          <p className="text-sm font-semibold text-gray-500 px-2">
-            1. 찜 목록 스타일
-          </p>
-          <CourseCard
-            title="운영체제 2분반 폐강위기"
-            professor="현재 수강 인원 7명 3명만 더" // 재사용의 묘미!
-            badges={
-              <>
-                <Badge variant="lightYellow">교양필수</Badge>
-                <Badge variant="secondary">운영체제</Badge>
-              </>
-            }
-          />
-        </section>
-
-        {/* 케이스 B: 글쓰기 - 원하는 과목 선택 (+ 아이콘) */}
-        <section className="flex flex-col gap-2">
-          <p className="text-sm font-semibold text-gray-500 px-2">
-            2. 원하는 과목 선택 (+ 아이콘)
-          </p>
-          <CourseCard
-            className="bg-gray-50/50" // 배경을 살짝 어둡게
-            title="컴퓨터구조"
-            professor="John Smith"
-            time="화목 10:30-11:45"
-            leftNode={
-              <div className="w-6 h-6 rounded-full bg-blue-100 text-brand-blue flex items-center justify-center font-bold text-sm">
-                +
-              </div>
-            }
-            badges={
-              <>
-                <Badge variant="lightBlue">컴퓨터 과학</Badge>
-                <Badge variant="lightBlue">전공필수</Badge>
-              </>
-            }
-          />
-        </section>
-
-        {/* 케이스 C: 글쓰기 - 선택된 과목 삭제 (X 아이콘 + 우측 정렬 배지) */}
-        <section className="flex flex-col gap-2">
-          <p className="text-sm font-semibold text-gray-500 px-2">
-            3. 교환글 작성 (X 삭제 버튼)
-          </p>
-          <CourseCard
-            title="영어회화"
-            professor="John Smith"
-            time="화목 10:30-11:45"
-            rightNode={<Icon icon="ph:x" className="text-lg text-gray-400" />}
-            badges={
-              <div className="flex justify-end w-full">
-                {' '}
-                {/* 배지만 우측으로 밀기 */}
-                <Badge variant="outlineGray">컴퓨터 과학</Badge>
-                <Badge variant="outlineGray" className="ml-1">
-                  전공필수
-                </Badge>
-              </div>
-            }
-          />
-        </section>
-
-        {/* 케이스 D: 게시글 상세 - 요청받은 내 게시글 (파란 테두리 배지) */}
-        <section className="flex flex-col gap-2">
-          <p className="text-sm font-semibold text-gray-500 px-2">
-            4. 상세 - 요청받은 게시글 (파란 테두리)
-          </p>
-          <CourseCard
-            className="border-brand-blue/30 shadow-sm" // 강조용 테두리
-            title="운영체제"
-            professor="John Smith"
-            time="화목 10:30-11:45"
-            badges={
-              <>
-                <Badge variant="outlineBlue">전공필수</Badge>
-                <Badge variant="outlineBlue">컴퓨터과학</Badge>
-              </>
-            }
-          />
-        </section>
-      </div>
-    </div>
-  );
-};
diff --git a/src/pages/TestExtra.tsx b/src/pages/TestExtra.tsx
deleted file mode 100644
index 8fc6dc5..0000000
--- a/src/pages/TestExtra.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import { useState } from 'react';
-import { Icon } from '@iconify/react';
-import { Dropdown } from '../components/common/Dropdown';
-import { EmptyState } from '../components/common/EmptyState';
-import { FAB } from '../components/common/FAB';
-import { Toast } from '../components/common/Toast';
-import Button from '../components/common/Button';
-import Header from '../components/layout/Header';
-import { ICONS } from '../constants/icons';
-import { IconButton } from '../components/common/IconButton';
-
-export const TestExtra = () => {
-  // 1. 드롭다운 상태 관리
-  const [filterValue, setFilterValue] = useState('all');
-
-  // 2. 토스트 상태 관리
-  const [isToastVisible, setIsToastVisible] = useState(false);
-  const [toastMessage, setToastMessage] = useState('');
-  const [toastIcon, setToastIcon] = useState('ph:check-bold');
-
-  // 토스트 띄우기 도우미 함수
-  const showToast = (message: string, icon: string = 'ph:check-bold') => {
-    setToastMessage(message);
-    setToastIcon(icon);
-    setIsToastVisible(false); // 연타 시 타이머 초기화를 위해 한번 껐다가 켭니다
-    setTimeout(() => setIsToastVisible(true), 10);
-  };
-
-  return (
-    <div className="min-h-screen bg-gray-100 flex flex-col items-center p-6 gap-8 pb-20">
-      <div className="text-center mt-6">
-        <h1 className="text-2xl font-bold text-gray-900">
-          기타 컴포넌트 테스트 🧩
-        </h1>
-        <p className="text-gray-500 mt-2 text-sm">
-          드롭다운, 빈 화면, 토스트, 그리고 플로팅 버튼
-        </p>
-      </div>
-
-      {/* 💡 모바일 화면 규격 (스크롤 테스트를 위해 높이와 overflow 속성 추가) */}
-      <div className="relative w-full max-w-[402px] h-[650px] bg-gray-50 shadow-xl rounded-2xl border border-gray-200 overflow-hidden flex flex-col">
-        {/* =========================================
-            💡 공통 Header 컴포넌트 적용 완료
-        ========================================= */}
-        <Header
-          leftNode={<IconButton icon={ICONS.BACK} />}
-          title="컴포넌트 테스트"
-          rightNode={<IconButton icon={ICONS.BELL} />}
-        />
-
-        {/* 스크롤 가능한 메인 영역 */}
-        <div className="flex-1 overflow-y-auto p-5 flex flex-col gap-10 pb-32">
-          {/* =========================================
-              💡 1. Dropdown (드롭다운 필터) 테스트
-          ========================================= */}
-          <section className="flex flex-col gap-3">
-            <h3 className="text-sm font-semibold text-gray-500">
-              1. 드롭다운 필터 (z-index 테스트)
-            </h3>
-            <div className="flex justify-end">
-              <Dropdown
-                className="w-32" // 너비를 좁게 설정
-                value={filterValue}
-                onChange={setFilterValue}
-                options={[
-                  { value: 'all', label: '전체' },
-                  { value: 'offline', label: '대면' },
-                  { value: 'online', label: '비대면' },
-                ]}
-              />
-            </div>
-            <p className="text-xs text-right text-gray-400 mt-1">
-              현재 선택된 값:{' '}
-              <strong className="text-brand-blue">{filterValue}</strong>
-            </p>
-          </section>
-
-          <div className="w-full h-px bg-gray-200"></div>
-
-          {/* =========================================
-              💡 2. EmptyState (빈 화면) 테스트
-          ========================================= */}
-          <section className="flex flex-col gap-3">
-            <h3 className="text-sm font-semibold text-gray-500">
-              2. 텅 빈 화면 안내
-            </h3>
-            <div className="bg-white rounded-2xl border border-gray-200 shadow-sm">
-              <EmptyState
-                icon={<Icon icon="ph:warning" className="text-[#8FB6D9]" />} // 시안의 연파란색 느낌
-                title="아직 등록한 교환 게시글이 없어요."
-                description="교환하려는 과목을 등록하고 원하는 과목을 찾아보세요!"
-                action={
-                  <button className="text-[#3DA5F5] underline text-sm mt-2 font-medium">
-                    교환 매칭 추천함가기 &gt;
-                  </button>
-                }
-              />
-            </div>
-          </section>
-
-          <div className="w-full h-px bg-gray-200"></div>
-
-          {/* =========================================
-              💡 3. Toast (토스트 알림) 테스트
-          ========================================= */}
-          <section className="flex flex-col gap-3">
-            <h3 className="text-sm font-semibold text-gray-500">
-              3. 토스트 알림 띄우기
-            </h3>
-            <div className="flex flex-col gap-2">
-              <Button
-                variant="primary"
-                onClick={() => showToast('교환 요청이 완료되었습니다.')}
-              >
-                성공 메시지 띄우기
-              </Button>
-              <Button
-                variant="outline"
-                onClick={() =>
-                  showToast(
-                    '비밀번호가 일치하지 않습니다.',
-                    'ph:warning-circle',
-                  )
-                }
-              >
-                경고 메시지 띄우기
-              </Button>
-            </div>
-          </section>
-
-          {/* 스크롤 길이를 늘리기 위한 가짜 여백 */}
-          <div className="h-40 flex items-center justify-center text-gray-300 text-sm">
-            (스크롤 영역)
-          </div>
-        </div>
-
-        {/* =========================================
-            💡 4. FAB (플로팅 버튼) 테스트
-        ========================================= */}
-        {/* 기본 동그라미 FAB (+ 아이콘) : 겹치지 않게 위치 조정 */}
-        <FAB
-          onClick={() => alert('+ 아이콘 클릭!')}
-          className="bottom-28" // 원래 위치
-        />
-
-        {/* 알약 모양 FAB (+ 글쓰기) : 겹치지 않게 위치 조정 */}
-        <FAB
-          onClick={() => alert('글쓰기 클릭!')}
-          text="글쓰기"
-          className="bottom-8" // 아래로 조금 내림
-        />
-
-        {/* =========================================
-            💡 5. 실제 렌더링되는 Toast 컴포넌트
-        ========================================= */}
-        <Toast
-          isVisible={isToastVisible}
-          message={toastMessage}
-          onClose={() => setIsToastVisible(false)}
-          icon={toastIcon}
-        />
-      </div>
-    </div>
-  );
-};
diff --git a/src/pages/TestHeader.tsx b/src/pages/TestHeader.tsx
deleted file mode 100644
index 50f5a24..0000000
--- a/src/pages/TestHeader.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { ICONS } from '../constants/icons';
-import { IconButton } from '../components/common/IconButton';
-import Header from '../components/layout/Header';
-
-export const TestHeader = () => {
-  return (
-    <div className="min-h-screen bg-gray-100 flex flex-col items-center py-10 gap-10">
-      <div className="text-center">
-        <h1 className="text-2xl font-bold text-gray-900">
-          헤더 UI 테스트 도화지 🎨
-        </h1>
-        <p className="text-gray-500 mt-2 text-sm">
-          타이틀 중앙 정렬 및 가변 아이콘 검증
-        </p>
-      </div>
-
-      {/* 모바일 화면(402px) 규격을 흉내 낸 컨테이너 */}
-      <div className="flex flex-col gap-10 w-full max-w-[402px]">
-        {/* 1번 시안: 게시글 상세 */}
-        <section className="flex flex-col gap-2">
-          <p className="text-sm font-semibold text-gray-500 px-2">
-            1. 게시글 상세 (타이틀 중앙 + 우측 점 3개)
-          </p>
-          <div className="relative w-full bg-white shadow-md rounded-t-2xl overflow-hidden border border-gray-200">
-            <Header
-              leftNode={
-                <IconButton
-                  icon={ICONS.BACK}
-                  onClick={() => console.log('뒤로가기')}
-                />
-              }
-              title="게시글 상세"
-              rightNode={<IconButton icon={ICONS.MORE_VERTICAL} />}
-            />
-            {/* 헤더 아래 빈 내용 영역 */}
-            <div className="h-32 bg-gray-50"></div>
-          </div>
-        </section>
-
-        {/* 2번 시안: 교환 요청함 */}
-        <section className="flex flex-col gap-2">
-          <p className="text-sm font-semibold text-gray-500 px-2">
-            2. 교환 요청함 (기본 형태)
-          </p>
-          <div className="relative w-full bg-white shadow-md rounded-t-2xl overflow-hidden border border-gray-200">
-            <Header
-              leftNode={<IconButton icon={ICONS.BACK} />}
-              title="교환 요청함"
-              rightNode={<IconButton icon={ICONS.BELL} />}
-            />
-            <div className="h-32 bg-gray-50"></div>
-          </div>
-        </section>
-
-        {/* 3번 시안: 메인 홈 */}
-        <section className="flex flex-col gap-2">
-          <p className="text-sm font-semibold text-gray-500 px-2">
-            3. 메인 홈 (좌측 로고 + 우측 멀티 아이콘)
-          </p>
-          <div className="relative w-full bg-white shadow-md rounded-t-2xl overflow-hidden border border-gray-200">
-            <Header
-              leftNode={
-                <h1 className="text-2xl font-extrabold text-[#1B365D] pl-1 whitespace-nowrap">
-                  교환해요
-                </h1>
-              }
-              // title은 아예 비워둡니다
-              rightNode={
-                <>
-                  {/* 💡 아이콘 두 개가 나란히 들어가도 알아서 예쁘게 배치됩니다 */}
-                  <IconButton icon={ICONS.BELL} />
-                  <IconButton icon={ICONS.MENU} />
-                </>
-              }
-            />
-            <div className="h-32 bg-gray-50"></div>
-          </div>
-        </section>
-      </div>
-    </div>
-  );
-};
diff --git a/src/pages/TestInput.tsx b/src/pages/TestInput.tsx
deleted file mode 100644
index 53d0f2b..0000000
--- a/src/pages/TestInput.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useState } from 'react';
-import { Icon } from '@iconify/react';
-// 💡 컴포넌트들의 실제 경로에 맞게 수정해주세요
-import { Input } from '../components/common/Input';
-import { Textarea } from '../components/common/Textarea';
-
-export const TestInput = () => {
-  // 비밀번호 보이기/숨기기 토글 상태 관리
-  const [showPassword, setShowPassword] = useState(false);
-
-  return (
-    <div className="min-h-screen bg-gray-100 flex flex-col items-center py-10 gap-10 pb-24">
-      <div className="text-center">
-        <h1 className="text-2xl font-bold text-gray-900">
-          입력창 UI 테스트 도화지 📝
-        </h1>
-        <p className="text-gray-500 mt-2 text-sm">
-          기본, 아이콘, 에러, 채팅 피드 타입 검증
-        </p>
-      </div>
-
-      {/* 모바일 화면(402px) 규격 컨테이너 */}
-      <div className="flex flex-col gap-8 w-full max-w-[402px] bg-white p-6 shadow-xl rounded-2xl border border-gray-200">
-        {/* 케이스 1: 기본 이메일 입력창 */}
-        <section className="flex flex-col gap-2">
-          <label className="text-sm font-semibold text-gray-700">
-            1. 이메일 입력창 (좌측 아이콘)
-          </label>
-          <Input
-            type="email"
-            placeholder="이메일을 입력해주세요"
-            leftNode={<Icon icon="ph:envelope-simple" className="text-xl" />}
-          />
-        </section>
-
-        {/* 케이스 2: 비밀번호 변경 에러 상태 */}
-        <section className="flex flex-col gap-2">
-          <label className="text-sm font-semibold text-gray-700">
-            2. 비밀번호 확인 (우측 아이콘 + 에러)
-          </label>
-          <Input
-            type={showPassword ? 'text' : 'password'}
-            placeholder="**********"
-            rightNode={
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-              >
-                <Icon
-                  icon={showPassword ? 'ph:eye-fill' : 'ph:eye-slash-fill'}
-                  className="text-xl text-gray-400 hover:text-gray-600"
-                />
-              </button>
-            }
-            isError={true}
-            errorMessage="비밀번호가 일치하지 않습니다."
-          />
-        </section>
-
-        {/* 케이스 3: 게시판 글쓰기 제목 및 내용 */}
-        <section className="flex flex-col gap-2">
-          <label className="text-sm font-semibold text-gray-700">
-            3. 게시글 작성 (일반 Input + Textarea)
-          </label>
-          <div className="flex flex-col gap-3">
-            <Input placeholder="제목을 입력해주세요" />
-            <Textarea placeholder="자유롭게 선택 과목에 대한 이야기를 나누세요." />
-          </div>
-        </section>
-
-        {/* 케이스 4: 채팅 및 댓글 입력창 (Pill 타입) */}
-        <section className="flex flex-col gap-2">
-          <label className="text-sm font-semibold text-gray-700">
-            4. 채팅/댓글창 (알약 모양 + 우측 전송)
-          </label>
-          <div className="bg-gray-50 p-4 rounded-xl border border-gray-100 flex items-center justify-center">
-            <Input
-              variant="pill"
-              placeholder="메세지 보내기"
-              rightNode={
-                <button
-                  type="button"
-                  className="text-brand-blue active:opacity-70 flex items-center"
-                >
-                  <Icon icon="ph:paper-plane-right-fill" className="text-xl" />
-                </button>
-              }
-            />
-          </div>
-        </section>
-      </div>
-    </div>
-  );
-};
diff --git a/src/pages/TestLoading.tsx b/src/pages/TestLoading.tsx
deleted file mode 100644
index e633446..0000000
--- a/src/pages/TestLoading.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Spinner } from '../components/common/Spinner';
-import { Skeleton } from '../components/common/Skeleton';
-
-export const TestLoading = () => {
-  return (
-    <div className="min-h-screen bg-gray-50 flex flex-col items-center p-6 gap-8 pb-20">
-      <div className="text-center mt-6">
-        <h1 className="text-2xl font-bold text-gray-900">로딩 UI 테스트 ⏳</h1>
-      </div>
-
-      <div className="w-full max-w-[402px] flex flex-col gap-10">
-        {/* =========================================
-            💡 1. Spinner 테스트
-        ========================================= */}
-        <section className="bg-white p-6 rounded-2xl shadow-sm border border-gray-200 flex flex-col gap-6">
-          <h2 className="text-sm font-bold text-gray-700 border-b pb-2">
-            1. 스피너 (Spinner)
-          </h2>
-          <div className="flex items-center justify-around">
-            <Spinner size="sm" />
-            <Spinner size="md" />
-            <Spinner size="lg" />
-          </div>
-        </section>
-
-        {/* =========================================
-            💡 2. Skeleton 테스트 (게시글 목록 흉내내기)
-        ========================================= */}
-        <section className="bg-white p-6 rounded-2xl shadow-sm border border-gray-200 flex flex-col gap-6">
-          <h2 className="text-sm font-bold text-gray-700 border-b pb-2">
-            2. 스켈레톤 (Skeleton)
-          </h2>
-          <p className="text-xs text-gray-500 mb-2">
-            데이터를 불러오는 중입니다...
-          </p>
-
-          <div className="flex flex-col gap-4">
-            {/* 가짜 게시글 1 */}
-            <div className="flex items-center gap-3">
-              {/* 프로필 이미지 스켈레톤 (원형) */}
-              <Skeleton className="w-12 h-12 rounded-full shrink-0" />
-              <div className="flex flex-col gap-2 w-full">
-                {/* 제목 스켈레톤 */}
-                <Skeleton className="w-3/4 h-4" />
-                {/* 내용/시간 스켈레톤 */}
-                <Skeleton className="w-1/2 h-3" />
-              </div>
-            </div>
-
-            {/* 가짜 게시글 2 */}
-            <div className="flex items-center gap-3">
-              <Skeleton className="w-12 h-12 rounded-full shrink-0" />
-              <div className="flex flex-col gap-2 w-full">
-                <Skeleton className="w-full h-4" />
-                <Skeleton className="w-2/3 h-3" />
-              </div>
-            </div>
-
-            {/* 가짜 게시글 3 */}
-            <div className="flex items-center gap-3">
-              <Skeleton className="w-12 h-12 rounded-full shrink-0" />
-              <div className="flex flex-col gap-2 w-full">
-                <Skeleton className="w-5/6 h-4" />
-                <Skeleton className="w-1/3 h-3" />
-              </div>
-            </div>
-          </div>
-        </section>
-      </div>
-    </div>
-  );
-};
diff --git a/src/pages/TestModal.tsx b/src/pages/TestModal.tsx
deleted file mode 100644
index 8108a7b..0000000
--- a/src/pages/TestModal.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { useState } from 'react';
-import { Icon } from '@iconify/react';
-import { Modal } from '../components/common/Modal';
-import Button from '../components/common/Button';
-
-export const TestModal = () => {
-  // 모달 3개의 열림/닫힘 상태 관리
-  const [openDeleteModal, setOpenDeleteModal] = useState(false);
-  const [openAuthModal, setOpenAuthModal] = useState(false);
-  const [openExchangeModal, setOpenExchangeModal] = useState(false);
-
-  return (
-    <div className="min-h-screen bg-gray-50 flex flex-col items-center p-6 gap-6 relative">
-      <div className="text-center mt-10">
-        <h1 className="text-2xl font-bold text-gray-900">
-          모달 UI 테스트 도화지 팝업창 💬
-        </h1>
-        <p className="text-gray-500 mt-2 text-sm">
-          아래 버튼들을 눌러 모달을 띄워보세요.
-        </p>
-      </div>
-
-      <div className="w-full flex flex-col gap-4 mt-10">
-        <Button onClick={() => setOpenDeleteModal(true)} variant="outline">
-          1. 게시글 삭제 모달 띄우기
-        </Button>
-        <Button onClick={() => setOpenAuthModal(true)} variant="primary">
-          2. 인증 실패 모달 띄우기
-        </Button>
-        <Button onClick={() => setOpenExchangeModal(true)} variant="light">
-          3. 지금 교환하세요 모달 띄우기
-        </Button>
-      </div>
-
-      {/* =========================================
-          💡 1. 게시글 삭제 모달 (50:50 버튼)
-      ========================================= */}
-      <Modal
-        isOpen={openDeleteModal}
-        onClose={() => setOpenDeleteModal(false)}
-        icon={
-          <Icon icon="ph:warning-circle" className="text-4xl text-point-red" />
-        }
-        title="게시글 삭제"
-        footer={
-          <>
-            <Button
-              variant="outline"
-              className="flex-1"
-              onClick={() => setOpenDeleteModal(false)}
-            >
-              취소
-            </Button>
-            <Button
-              variant="danger"
-              className="flex-1"
-              onClick={() => setOpenDeleteModal(false)}
-            >
-              삭제
-            </Button>
-          </>
-        }
-      >
-        삭제 시 복구할 수 없습니다
-      </Modal>
-
-      {/* =========================================
-          💡 2. 인증 실패 모달 (단일 버튼 + 긴 텍스트)
-      ========================================= */}
-      <Modal
-        isOpen={openAuthModal}
-        onClose={() => setOpenAuthModal(false)}
-        icon={
-          <Icon icon="ph:x-circle-fill" className="text-4xl text-point-red" />
-        }
-        title="인증에 실패했습니다"
-        footer={
-          <Button variant="danger" onClick={() => setOpenAuthModal(false)}>
-            다시 인증하기
-          </Button>
-        }
-      >
-        인증 QR 코드를 확인할 수 없습니다.{'\n\n'}
-        수강신청(내역) 페이지와 인증 QR 코드가{'\n'}한 화면에 모두 보이도록 한
-        뒤{'\n'}
-        다시 인증을 진행해주세요.
-      </Modal>
-
-      {/* =========================================
-          💡 3. 교환하기 모달 (커스텀 내용 + 세로 버튼)
-      ========================================= */}
-      <Modal
-        isOpen={openExchangeModal}
-        onClose={() => setOpenExchangeModal(false)}
-        title={<span className="text-point-red text-xl">지금 교환하세요</span>}
-        footer={
-          <div className="flex flex-col w-full gap-2">
-            <Button
-              variant="danger"
-              onClick={() => setOpenExchangeModal(false)}
-            >
-              교환성공
-            </Button>
-            <Button
-              variant="outline"
-              onClick={() => setOpenExchangeModal(false)}
-            >
-              교환 실패
-            </Button>
-          </div>
-        }
-      >
-        <div className="text-left text-gray-700 bg-gray-50 p-4 rounded-xl border border-gray-200">
-          <p>1. 현재 강의를 취소하세요.</p>
-          <p>2. 상대방의 강의를 신청하세요.</p>
-          <br />
-          <p className="text-xs text-gray-500 text-center">
-            강의 신청이 완료되면
-            <br />
-            결과에 따라 아래 버튼을 선택해주세요.
-          </p>
-        </div>
-      </Modal>
-    </div>
-  );
-};
diff --git a/src/pages/TestTabs.tsx b/src/pages/TestTabs.tsx
deleted file mode 100644
index 8ecf151..0000000
--- a/src/pages/TestTabs.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { useState } from 'react';
-import { Icon } from '@iconify/react';
-import { Tabs } from '../components/common/Tabs';
-
-export const TestTabs = () => {
-  // 1번 라인 탭 상태 관리
-  const [activeRequestTab, setActiveRequestTab] = useState('received');
-
-  // 2번 알약 탭 상태 관리
-  const [activeFilterTab, setActiveFilterTab] = useState('all');
-
-  return (
-    <div className="min-h-screen bg-gray-50 flex flex-col items-center p-6 gap-10">
-      <div className="text-center mt-10">
-        <h1 className="text-2xl font-bold text-gray-900">
-          Tabs UI 테스트 도화지 🗂️
-        </h1>
-        <p className="text-gray-500 mt-2 text-sm">
-          상단 메뉴용 라인 타입과 필터용 알약 타입 검증
-        </p>
-      </div>
-
-      {/* 모바일 화면(402px) 규격 컨테이너 */}
-      <div className="flex flex-col w-full max-w-[402px] bg-white shadow-xl rounded-2xl border border-gray-200 overflow-hidden min-h-[400px]">
-        {/* =========================================
-            💡 케이스 1: 교환 요청함 (Line 타입)
-        ========================================= */}
-        <div className="flex flex-col bg-white pb-4 mb-6">
-          <p className="text-xs font-semibold text-gray-400 p-4 pb-2">
-            1. 라인(Line) 타입 - 상단 메뉴용
-          </p>
-
-          <Tabs
-            variant="line"
-            activeTabId={activeRequestTab}
-            onTabChange={setActiveRequestTab}
-            tabs={[
-              { id: 'received', label: '받은 요청' },
-              { id: 'sent', label: '보낸 요청' },
-            ]}
-          />
-
-          {/* 탭 내용이 바뀌는 영역 임시 구현 */}
-          <div className="p-10 flex justify-center items-center text-gray-400 text-sm">
-            {activeRequestTab === 'received'
-              ? '📥 받은 요청 내역이 없습니다.'
-              : '📤 보낸 요청 내역이 없습니다.'}
-          </div>
-        </div>
-
-        <div className="w-full h-px bg-gray-100"></div>
-
-        {/* =========================================
-            💡 케이스 2: 교환준비방 필터 (Pill 타입)
-        ========================================= */}
-        <div className="flex flex-col bg-white p-4 pb-10">
-          <p className="text-xs font-semibold text-gray-400 pb-4">
-            2. 알약(Pill) 타입 - 필터/토글용
-          </p>
-
-          <div className="flex items-center gap-2">
-            {/* 좌측 필터 아이콘 (시안 참고) */}
-            <button className="flex items-center justify-center w-8 h-8 rounded-full border border-gray-200 text-gray-500">
-              <Icon icon="ph:faders" className="text-lg" />
-            </button>
-
-            <Tabs
-              variant="pill"
-              activeTabId={activeFilterTab}
-              onTabChange={setActiveFilterTab}
-              tabs={[
-                { id: 'all', label: '전체' },
-                { id: 'unread', label: '안읽음' },
-              ]}
-            />
-          </div>
-
-          <div className="pt-10 flex justify-center items-center text-gray-400 text-sm">
-            {activeFilterTab === 'all'
-              ? '👀 모든 채팅방을 보여줍니다.'
-              : '🔴 안 읽은 메세지만 보여줍니다.'}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index 1e6891e..eceae44 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -5,16 +5,7 @@ import RootLayout from '@/components/layout/RootLayout';
 import DefaultLayout from '@/components/layout/DefaultLayout';
 import FullScreenLayout from '@/components/layout/FullScreenLayout';
 
-// --- 2. 페이지 불러오기 (임시 예시) ---
-import { TestButton } from '../pages/TestButton';
-import { TestHeader } from '../pages/TestHeader';
-import { TestInput } from '../pages/TestInput';
-import { TestModal } from '../pages/TestModal';
-import { TestTabs } from '../pages/TestTabs';
-import { TestCard } from '../pages/TestCard';
-import { TestExtra } from '../pages/TestExtra';
-import { TestAvatar } from '../pages/TestAvatar';
-import { TestLoading } from '../pages/TestLoading';
+// --- 2. 페이지 불러오기  ---
 
 export const router = createBrowserRouter([
   {
@@ -26,16 +17,7 @@ export const router = createBrowserRouter([
         // ==========================================
         element: <DefaultLayout />,
         children: [
-          // 예시: { path: 'board', element: <BoardPage /> },    // /board (교환게시판)
-          { path: '/test-input', element: <TestInput /> },
-          { path: '/test-modal', element: <TestModal /> },
-          { path: '/test-button', element: <TestButton /> },
-          { path: '/test-header', element: <TestHeader /> },
-          { path: '/test-tabs', element: <TestTabs /> },
-          { path: '/test-card', element: <TestCard /> },
-          { path: '/test-extra', element: <TestExtra /> },
-          { path: '/test-avatar', element: <TestAvatar /> },
-          { path: '/test-loading', element: <TestLoading /> },
+          // 예시: { path: '/board', element: <BoardPage /> },    // /board (교환게시판)
         ],
       },
       {
@@ -45,7 +27,7 @@ export const router = createBrowserRouter([
         element: <FullScreenLayout />,
         children: [
           // :id 나 :roomId 는 동적 라우팅 기법입니다. (ex. /board/123)
-          // 예시: { path: 'board/:id', element: <DetailPage /> },    // 상세 게시글
+          // 예시: { path: '/board/:id', element: <DetailPage /> },    // 상세 게시글
         ],
       },
     ],

From 4f8a8c9bb55233818238b4d869d31bee3f763c05 Mon Sep 17 00:00:00 2001
From: yoooooojin <ujin4903@sookmyung.ac.kr>
Date: Sun, 19 Jul 2026 16:38:45 +0900
Subject: [PATCH 5/7] =?UTF-8?q?fix:=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Badge.tsx      |  2 +-
 src/components/common/CourseCard.tsx | 10 ++++------
 src/components/common/FAB.tsx        |  2 +-
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/common/Badge.tsx b/src/components/common/Badge.tsx
index a24f892..4cb8630 100644
--- a/src/components/common/Badge.tsx
+++ b/src/components/common/Badge.tsx
@@ -13,7 +13,6 @@ interface BadgeProps {
   className?: string; // 추가적인 여백(ml-2) 등을 줄 때 사용
 }
 
-// 💡 5가지 디자인 시안 컬러 매핑
 const badgeVariants = {
   primary: 'bg-brand-lightBlue text-white', // 파란 바탕 + 흰 글씨 (제안, 강의꿀팁)
   secondary: 'bg-gray-100 text-gray-700', // 회색 바탕 + 진회색 글씨 (데이터베이스)
@@ -22,6 +21,7 @@ const badgeVariants = {
   lightYellow: 'bg-yellow-main text-[#CA8A04] border border-[#FEF08A]', // 연노랑 바탕 + 노랑 글씨 (교양필수)
   outlineBlue: 'bg-white border border-brand-lightBlue text-brand-lightBlue', // 흰 바탕 + 파란 테두리 + 파란 글씨 (요청받은 게시글)
   outlineGray: 'bg-white border border-gray-300 text-gray-600', // 흰 바탕 + 회색 테두리
+  lightRed: 'bg-red-100 text-red-100 border text-gray-600',
 };
 
 export const Badge = ({
diff --git a/src/components/common/CourseCard.tsx b/src/components/common/CourseCard.tsx
index 6e7828d..bbb2c2a 100644
--- a/src/components/common/CourseCard.tsx
+++ b/src/components/common/CourseCard.tsx
@@ -1,4 +1,3 @@
-// src/components/common/CourseCard.tsx
 import React from 'react';
 
 interface CourseCardProps {
@@ -9,7 +8,7 @@ interface CourseCardProps {
   leftNode?: React.ReactNode;
   rightNode?: React.ReactNode;
   className?: string;
-  onClick?: () => void; // 💡 1. 여기에 onClick 타입을 추가합니다.
+  onClick?: () => void;
 }
 
 export const CourseCard = ({
@@ -20,10 +19,9 @@ export const CourseCard = ({
   leftNode,
   rightNode,
   className = '',
-  onClick, // 💡 2. props로 onClick을 받습니다.
+  onClick,
 }: CourseCardProps) => {
   return (
-    // 💡 3. 최상위 div에 onClick을 달아주고, 클릭 가능할 땐 마우스 커서를 포인터로 바꿔줍니다.
     <div
       onClick={onClick}
       className={`flex items-start p-4 bg-white rounded-xl border border-gray-200 ${
@@ -37,9 +35,9 @@ export const CourseCard = ({
       <div className="flex flex-col flex-1 gap-1.5">
         <h4 className="font-bold text-gray-900 text-[15px]">{title}</h4>
 
-        {/* 교수, 시간 정보가 있을 때만 렌더링 */}
+        {/* 교수, 시간 정보가 있을 때만 렌더링 (팀원 요청 스타일 반영됨) */}
         {(professor || time) && (
-          <div className="text-xs text-gray-500 leading-tight">
+          <div className="text-neutral-500 text-sm font-light font-['Pretendard'] leading-5 whitespace-nowrap">
             {professor && <p>교수 : {professor}</p>}
             {time && <p>시간 : {time}</p>}
           </div>
diff --git a/src/components/common/FAB.tsx b/src/components/common/FAB.tsx
index ac0d3ed..2182d19 100644
--- a/src/components/common/FAB.tsx
+++ b/src/components/common/FAB.tsx
@@ -20,7 +20,7 @@ export const FAB = ({
     <button
       onClick={onClick}
       className={`
-        absolute bottom-28 right-4 z-40 
+        absolute bottom-28 right-8 z-40 
         flex items-center justify-center gap-1.5
         bg-brand-lightBlue text-white font-bold
         

From 1ef5b00e41b9c510d3697def8c0b6f82e5a1813a Mon Sep 17 00:00:00 2001
From: yoooooojin <ujin4903@sookmyung.ac.kr>
Date: Wed, 22 Jul 2026 16:51:39 +0900
Subject: [PATCH 6/7] =?UTF-8?q?fix:=20=EB=B0=B0=EC=A7=80,=20=EB=93=9C?=
 =?UTF-8?q?=EB=9E=8D=EB=8B=A4=EC=9A=B4=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8,=20=ED=97=A4=EB=8D=94=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Badge.tsx    |  5 +++++
 src/components/common/Dropdown.tsx |  2 +-
 src/components/layout/Header.tsx   | 15 ++++++++++++---
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/common/Badge.tsx b/src/components/common/Badge.tsx
index 4cb8630..0166e57 100644
--- a/src/components/common/Badge.tsx
+++ b/src/components/common/Badge.tsx
@@ -22,6 +22,11 @@ const badgeVariants = {
   outlineBlue: 'bg-white border border-brand-lightBlue text-brand-lightBlue', // 흰 바탕 + 파란 테두리 + 파란 글씨 (요청받은 게시글)
   outlineGray: 'bg-white border border-gray-300 text-gray-600', // 흰 바탕 + 회색 테두리
   lightRed: 'bg-red-100 text-red-100 border text-gray-600',
+  grayOutline: 'bg-gray-200 text-zinc-900 text-xs border border-slate-400 ', // 교양필수
+  blueSolid:
+    'bg-brand-lightBlue text-white text-xs font-light border border-slate-500 font-normal', // 졸업요건
+  lightBlueOutline:
+    'bg-blue-100 text-zinc-900 border text-xs border-brand-lightBlue ', //전공필수
 };
 
 export const Badge = ({
diff --git a/src/components/common/Dropdown.tsx b/src/components/common/Dropdown.tsx
index b5b3ac1..57994aa 100644
--- a/src/components/common/Dropdown.tsx
+++ b/src/components/common/Dropdown.tsx
@@ -30,7 +30,7 @@ export const Dropdown = ({
       <button
         type="button"
         onClick={() => setIsOpen(!isOpen)}
-        className="w-full flex items-center justify-between px-4 py-3 bg-white border border-gray-300 rounded-xl text-sm text-gray-900 focus:outline-none focus:border-brand-blue transition-colors"
+        className="w-full flex items-center justify-between px-4 py-3 bg-white border border-gray-300 rounded-xl text-sm text-gray-900 focus:outline-none focus:border-brand-lightBlue transition-colors"
       >
         <span>{selectedOption ? selectedOption.label : placeholder}</span>
         <Icon
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 82dbc8f..87704e3 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -4,12 +4,21 @@ interface HeaderProps {
   leftNode?: React.ReactNode;
   title?: string | React.ReactNode;
   rightNode?: React.ReactNode;
+  height?: number;
 }
 
-export default function Header({ leftNode, title, rightNode }: HeaderProps) {
+export default function Header({
+  leftNode,
+  title,
+  rightNode,
+  height = 80,
+}: HeaderProps) {
   return (
-    // 💡 높이를 56px(모바일 표준)로 고정하고, z-index를 높여 스크롤 시 위로 올라오게 합니다.
-    <header className="relative flex justify-between items-center w-full h-[60px] px-4 bg-[#FBFBFB] border-b border-gray-200 z-50">
+    // :bulb: 높이를 60px(모바일 표준)로 기본 고정하되, height prop으로 오버라이드 가능. z-index를 높여 스크롤 시 위로 올라오게 합니다.
+    <header
+      style={{ height: `${height}px` }}
+      className="relative flex justify-between items-center w-full px-4 bg-[#FBFBFB] border-b border-gray-200 z-50"
+    >
       {/* 1. 왼쪽 영역 (뒤로가기 버튼 or 메인 로고) */}
       <div className="flex items-center z-10">{leftNode}</div>
 

From 4d6f0a5dc56aac84e4655b409009d4de29913ee2 Mon Sep 17 00:00:00 2001
From: yoooooojin <ujin4903@sookmyung.ac.kr>
Date: Wed, 22 Jul 2026 23:29:17 +0900
Subject: [PATCH 7/7] =?UTF-8?q?fix:=20input=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=EC=97=90=20label=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Input.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/common/Input.tsx b/src/components/common/Input.tsx
index ee986b4..dd161d3 100644
--- a/src/components/common/Input.tsx
+++ b/src/components/common/Input.tsx
@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
 import cautionIcon from '@/assets/icons/caution.svg';
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string | React.ReactNode; // 💡 새로 추가된 라벨 타입
   leftNode?: React.ReactNode; // 왼쪽 아이콘 (이메일, 자물쇠 등)
   rightNode?: React.ReactNode; // 오른쪽 아이콘 (눈 모양, 전송 버튼 등)
   isError?: boolean; // 에러 여부 (빨간 테두리)
@@ -13,6 +14,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 export const Input = forwardRef<HTMLInputElement, InputProps>(
   (
     {
+      label, // 💡 추가된 부분
       leftNode,
       rightNode,
       isError = false,
@@ -25,6 +27,13 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
   ) => {
     return (
       <div className="w-full flex flex-col gap-1">
+        {/* 💡 새로 추가된 라벨 영역 */}
+        {label && (
+          <label className="text-sm font-medium text-gray-900 mb-1">
+            {label}
+          </label>
+        )}
+
         {/* 입력창 + 아이콘을 감싸는 컨테이너 */}
         <div className="relative flex items-center w-full">
           {/* 1. 왼쪽 아이콘 영역 */}