wafflestudio · jun-0411 · Jan 2, 2026 · Jan 1, 2026 · Jan 1, 2026 · Jan 1, 2026
diff --git a/src/App.css b/src/App.css
@@ -1,5 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700");
 @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght@100..700");
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@700&display=swap");
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
 
 @import "tailwindcss";
@@ -34,6 +35,12 @@
 
 /* https://dev.to/derick1530/how-to-create-scrollable-element-in-tailwind-without-a-scrollbar-4mbd */
 @layer utilities {
+  .font-title {
+    font-family: "IBM Plex Sans KR", sans-serif;
+    font-weight: 700;
+    font-style: normal;
+  }
+
   /* Hide scrollbar for Chrome, Safari and Opera */
   .no-scrollbar::-webkit-scrollbar {
     display: none;

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,7 +1,49 @@
+import { Link, NavLink } from 'react-router';
+import useAuth from '../hooks/useAuth';
+
 export default function Header() {
+  const { isLoggedIn, handleLogout } = useAuth();
+
+  const linkClassName = (isActive: boolean) => `
+    font-bold h-[42px] items-center px-4 py-2 rounded-md
+    ${isActive ? 'bg-gray-200' : 'hover:bg-gray-200 transition-all text-gray-500'}
+  `;
+
   return (
-    <div>
-      <p>Hello, Header!</p>
-    </div>
+    <header className="sticky top-0 z-50 flex w-full justify-center bg-grey-50 shadow-md">
+      <div className="flex w-full items-center justify-between px-6 py-4 sm:w-screen-sm md:w-screen-md lg:w-screen-lg xl:max-w-screen-xl">
+        <Link to="/" className="text-xl font-bold font-title">
+          모이샤
+        </Link>
+        <div className="items-center space-x-2">
+          {isLoggedIn === false ? (
+            <>
+              <NavLink
+                to="/login"
+                className={({ isActive }) => linkClassName(isActive)}
+              >
+                로그인
+              </NavLink>
+              <NavLink
+                to="/register"
+                className={({ isActive }) => linkClassName(isActive)}
+              >
+                회원가입
+              </NavLink>
+            </>
+          ) : (
+            <>
+              <button
+                onClick={handleLogout}
+                className="font-bold h-[42px] items-center px-4 py-2 rounded-md hover:bg-gray-200 transition-all text-gray-500"
+              >
+                로그아웃
+              </button>
+              {/* TODO: Add an avatar UI */}
+            </>
+          )}
+        </div>
+      </div>
+    </header>
   );
 }
diff --git a/src/layouts/RootLayout.tsx b/src/layouts/RootLayout.tsx
@@ -3,9 +3,12 @@ import Header from '../components/Header';
 
 export default function RootLayout() {
   return (
-    <div>
+    <div className="flex flex-col min-h-screen">
       <Header />
-      <main style={{ padding: '2rem' }}>
+      <main
+        className="flex w-full flex-1 flex-col items-center justify-center bg-gray-50 px-3 xs:px-0"
+        style={{ padding: '2rem' }}
+      >
         <Outlet />
       </main>
     </div>

diff --git a/src/routes/Login.tsx b/src/routes/Login.tsx
@@ -14,108 +14,104 @@ export default function Login() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
-      <div className="max-w-md w-full space-y-8 bg-white p-10 rounded-xl shadow-lg">
-        <div>
-          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
-            모이샤 로그인
-          </h2>
-          <p className="mt-2 text-center text-sm text-gray-600">
-            계정이 없으신가요?{' '}
-            <Link
-              to="/register"
-              className="font-medium text-blue-600 hover:text-blue-500 transition-all"
-            >
-              회원가입하러 가기
-            </Link>
-          </p>
-        </div>
+    <div className="text-center flex w-full flex-col gap-2 rounded-2xl bg-white px-5 pb-[30px] pt-10 shadow-md max-w-md xs:px-[34px]">
+      <div>
+        <h2 className="text-2xl font-title text-gray-900">로그인</h2>
+        <p className="mt-2 text-sm text-gray-600">
+          계정이 없으신가요?{' '}
+          <Link
+            to="/register"
+            className="font-medium text-blue-600 hover:text-blue-500 transition-all"
+          >
+            회원가입하러 가기
+          </Link>
+        </p>
+      </div>
 
-        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
-          <div className="rounded-md shadow-sm -space-y-px">
-            <div>
-              <input
-                type="text"
-                required
-                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
-                placeholder="이메일 (아이디)"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-              />
-            </div>
-            <div>
-              <input
-                type="password"
-                required
-                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
-                placeholder="비밀번호"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-            </div>
+      <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+        <div className="rounded-md shadow-sm -space-y-px">
+          <div>
+            <input
+              type="text"
+              required
+              className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
+              placeholder="이메일 (아이디)"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+            />
           </div>
-
           <div>
-            <button
-              type="submit"
-              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
-            >
-              로그인하기
-            </button>
+            <input
+              type="password"
+              required
+              className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
+              placeholder="비밀번호"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
           </div>
-        </form>
+        </div>
 
-        <div className="mt-6">
-          <div className="relative">
-            <div className="absolute inset-0 flex items-center">
-              <div className="w-full border-t border-gray-300"></div>
-            </div>
-            <div className="relative flex justify-center text-sm">
-              <span className="px-2 bg-white text-gray-500">
-                또는 소셜 계정으로 로그인
-              </span>
-            </div>
+        <div>
+          <button
+            type="submit"
+            className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-md font-bold rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+          >
+            로그인하기
+          </button>
+        </div>
+      </form>
+
+      <div className="mt-4 space-y-4">
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center">
+            <div className="w-full border-t border-gray-300"></div>
+          </div>
+          <div className="relative flex justify-center text-sm">
+            <span className="px-2 bg-white text-gray-500">
+              또는 소셜 계정으로 로그인
+            </span>
           </div>
+        </div>
 
-          <div className="flex justify-center gap-4">
-            <a
-              href={GOOGLE_AUTH_URL}
-              className="w-12 h-12 flex items-center justify-center border border-gray-300 rounded-full hover:bg-gray-50 transition-all shadow-sm"
-              aria-label="Google 로그인"
-            >
-              <svg width="24" height="24" viewBox="0 0 24 24">
-                <path
-                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-                  fill="#4285F4"
-                />
-                <path
-                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-1 .67-2.28 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-                  fill="#34A853"
-                />
-                <path
-                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"
-                  fill="#FBBC05"
-                />
-                <path
-                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-                  fill="#EA4335"
-                />
-              </svg>
-            </a>
+        <div className="flex justify-center gap-4">
+          <a
+            href={GOOGLE_AUTH_URL}
+            className="w-12 h-12 flex items-center justify-center border border-gray-300 rounded-full hover:bg-gray-50 transition-all shadow-sm"
+            aria-label="Google 로그인"
+          >
+            <svg width="24" height="24" viewBox="0 0 24 24">
+              <path
+                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                fill="#4285F4"
+              />
+              <path
+                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-1 .67-2.28 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                fill="#34A853"
+              />
+              <path
+                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"
+                fill="#FBBC05"
+              />
+              <path
+                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                fill="#EA4335"
+              />
+            </svg>
+          </a>
 
-            <a
-              href={KAKAO_AUTH_URL}
-              className="w-12 h-12 flex items-center justify-center bg-[#FEE500] rounded-full hover:bg-[#FDD835] transition-all shadow-sm"
-              aria-label="카카오 로그인"
-            >
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-                <path
-                  d="M12 3C7.02944 3 3 6.13401 3 10C3 12.5 4.5 14.5 7 15.5L6 19L10 16.5C10.5 16.8 11.2 17 12 17C16.9706 17 21 13.866 21 10C21 6.13401 16.9706 3 12 3Z"
-                  fill="#3A1D1D"
-                />
-              </svg>
-            </a>
-          </div>
+          <a
+            href={KAKAO_AUTH_URL}
+            className="w-12 h-12 flex items-center justify-center bg-[#FEE500] rounded-full hover:bg-[#FDD835] transition-all shadow-sm"
+            aria-label="카카오 로그인"
+          >
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M12 3C7.02944 3 3 6.13401 3 10C3 12.5 4.5 14.5 7 15.5L6 19L10 16.5C10.5 16.8 11.2 17 12 17C16.9706 17 21 13.866 21 10C21 6.13401 16.9706 3 12 3Z"
+                fill="#3A1D1D"
+              />
+            </svg>
+          </a>
         </div>
       </div>
     </div>