From 79e5269977e761cc58bb1ddb656e56b9428f4960 Mon Sep 17 00:00:00 2001
From: Radian06 <aksen05aksen@gmail.com>
Date: Wed, 4 Feb 2026 19:02:41 +0900
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=EC=83=81=EB=8B=A8=EB=B0=94=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.tsx               | 26 +++++++++++++++++++++-----
 src/components/Topbar.tsx | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Topbar.tsx

diff --git a/src/App.tsx b/src/App.tsx
index f5d6b50..01e18c7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,27 @@
-import { Routes, Route } from 'react-router-dom';
-import LoginPage from './pages/LoginPage';
+import Header from './components/Topbar'; 
 
 function App() {
   return (
-    <Routes>
-      <Route path="/login" element={<LoginPage />} />
-    </Routes>
+    <div className="flex min-h-screen bg-[#F9FAFB]">
+      
+      {/* 왼쪽: 사이드바 대용 회색 상자 (너비 207px, 높이 500px 고정) */}
+      <div 
+        className="bg-gray-400 sticky top-0" 
+        style={{ width: '207px', height: '800px' }}
+      >
+        <div className="p-4 text-white font-bold text-sm">
+          Sidebar Placeholder (207px)
+        </div>
+      </div>
+
+      {/* 오른쪽: 탑바와 콘텐츠 영역 */}
+      <div className="flex-1 flex flex-col">
+        {/* 탑바 */}
+        <Header /> 
+        
+        
+      </div>
+    </div>
   );
 }
 
diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx
new file mode 100644
index 0000000..a36f513
--- /dev/null
+++ b/src/components/Topbar.tsx
@@ -0,0 +1,37 @@
+import { useState } from 'react';
+
+const Topbar: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('학습 관리');
+
+  return (
+    <header className="h-[76px] w-full bg-white border-b border-gray-200 relative flex items-end justify-center">
+      {/* 탭 메뉴 */}
+      <nav className="flex gap-16 h-full items-end">
+        {['학습 관리', '플래너'].map((tab) => {
+          const isSelected = activeTab === tab;
+          
+          return (
+            <div
+              key={tab}
+              // 클릭 시 상태를 변경하는 함수 추가
+              onClick={() => setActiveTab(tab)}
+              className={`
+                cursor-pointer text-[15px] font-bold relative transition-all
+                /* pb-[18px]로 글자를 바닥 선에서 띄워줍니다 */
+                pb-[18px] px-1
+                ${isSelected 
+                  ? 'text-gray-900 border-b-[3px] border-gray-800'
+                  : 'text-gray-400 border-b-[3px] border-transparent'
+                }
+              `}
+            >
+              {tab}
+            </div>
+          );
+        })}
+      </nav>
+    </header>
+  );
+};
+
+export default Topbar;
\ No newline at end of file

From 82547e227e245b7668a84dcd286a3adc1002d0dc Mon Sep 17 00:00:00 2001
From: Radian06 <aksen05aksen@gmail.com>
Date: Wed, 4 Feb 2026 21:07:17 +0900
Subject: [PATCH 2/4] =?UTF-8?q?style:=20=EC=83=81=EB=8B=A8=EB=B0=94=20px?=
 =?UTF-8?q?=20->=20=EB=B7=B0=ED=8F=AC=ED=8A=B8=20=EB=8B=A8=EC=9C=84=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Topbar.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx
index a36f513..062716e 100644
--- a/src/components/Topbar.tsx
+++ b/src/components/Topbar.tsx
@@ -4,24 +4,22 @@ const Topbar: React.FC = () => {
   const [activeTab, setActiveTab] = useState('학습 관리');
 
   return (
-    <header className="h-[76px] w-full bg-white border-b border-gray-200 relative flex items-end justify-center">
+    <header className="h-[7.04vh] w-full bg-white border-b border-gray-200 relative flex items-end justify-center">
       {/* 탭 메뉴 */}
-      <nav className="flex gap-16 h-full items-end">
+      <nav className="flex gap-[3.33vw] h-full items-end">
         {['학습 관리', '플래너'].map((tab) => {
           const isSelected = activeTab === tab;
           
           return (
             <div
               key={tab}
-              // 클릭 시 상태를 변경하는 함수 추가
               onClick={() => setActiveTab(tab)}
               className={`
-                cursor-pointer text-[15px] font-bold relative transition-all
-                /* pb-[18px]로 글자를 바닥 선에서 띄워줍니다 */
-                pb-[18px] px-1
+                cursor-pointer text-[1.39vh] font-bold relative transition-all
+                pb-[1.67vh] px-[0.21vw]
                 ${isSelected 
-                  ? 'text-gray-900 border-b-[3px] border-gray-800'
-                  : 'text-gray-400 border-b-[3px] border-transparent'
+                  ? 'text-gray-900 border-b-[0.28vh] border-gray-800'
+                  : 'text-gray-400 border-b-[0.28vh] border-transparent'
                 }
               `}
             >

From 6e743d3fe19c145cb76217f69f00da9a4da5937a Mon Sep 17 00:00:00 2001
From: Radian06 <aksen05aksen@gmail.com>
Date: Thu, 5 Feb 2026 17:15:23 +0900
Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20=EC=83=81=EB=8B=A8=EB=B0=94=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC=20?=
 =?UTF-8?q?=EB=B0=8F=20App.tsx=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EC=9B=90?=
 =?UTF-8?q?=EB=B3=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx | 26 +++++---------------------
 1 file changed, 5 insertions(+), 21 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 01e18c7..f5d6b50 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,27 +1,11 @@
-import Header from './components/Topbar'; 
+import { Routes, Route } from 'react-router-dom';
+import LoginPage from './pages/LoginPage';
 
 function App() {
   return (
-    <div className="flex min-h-screen bg-[#F9FAFB]">
-      
-      {/* 왼쪽: 사이드바 대용 회색 상자 (너비 207px, 높이 500px 고정) */}
-      <div 
-        className="bg-gray-400 sticky top-0" 
-        style={{ width: '207px', height: '800px' }}
-      >
-        <div className="p-4 text-white font-bold text-sm">
-          Sidebar Placeholder (207px)
-        </div>
-      </div>
-
-      {/* 오른쪽: 탑바와 콘텐츠 영역 */}
-      <div className="flex-1 flex flex-col">
-        {/* 탑바 */}
-        <Header /> 
-        
-        
-      </div>
-    </div>
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+    </Routes>
   );
 }
 

From 9696710fa613bb85a01e95736e63bc9264dba79a Mon Sep 17 00:00:00 2001
From: Radian06 <aksen05aksen@gmail.com>
Date: Fri, 6 Feb 2026 00:12:32 +0900
Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20=EC=83=81=EB=8B=A8=EB=B0=94=20?=
 =?UTF-8?q?=EB=A9=94=EB=89=B4=20=ED=94=8C=EB=9E=98=EB=84=88=20->=20?=
 =?UTF-8?q?=EA=B3=BC=EC=A0=9C=20=EA=B4=80=EB=A6=AC=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Topbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx
index 062716e..b750a57 100644
--- a/src/components/Topbar.tsx
+++ b/src/components/Topbar.tsx
@@ -7,7 +7,7 @@ const Topbar: React.FC = () => {
     <header className="h-[7.04vh] w-full bg-white border-b border-gray-200 relative flex items-end justify-center">
       {/* 탭 메뉴 */}
       <nav className="flex gap-[3.33vw] h-full items-end">
-        {['학습 관리', '플래너'].map((tab) => {
+        {['학습 관리', '과제 관리'].map((tab) => {
           const isSelected = activeTab === tab;
           
           return (