디자인 변경

features/layout/components/Logo.tsx

@@ -0,0 +1,108 @@
+import { cn } from "@/lib/utils";
+
+interface LogoProps {
+  className?: string;
+  variant?: "symbol" | "full";
+  /** 배경과 섞이는 모드 (홈 화면 등). 로고가 흰색으로 표시됩니다. */
+  blendWithBackground?: boolean;
+}
+
+export function Logo({
+  className,
+  variant = "full",
+  blendWithBackground = false,
+}: LogoProps) {
+  // 색상 클래스 정의
+  const mainColorClass = blendWithBackground
+    ? "fill-brand-500 stroke-brand-500" // 배경 혼합 모드에서도 심볼은 브랜드 컬러 유지
+    : "fill-brand-600 stroke-brand-600 dark:fill-brand-500 dark:stroke-brand-500";
+
+  return (
+    <div
+      className={cn("relative flex items-center gap-2 select-none", className)}
+      aria-label="Jurini Logo"
+    >
+      <svg
+        viewBox="0 0 100 100"
+        xmlns="http://www.w3.org/2000/svg"
+        className={cn(
+          "shrink-0",
+          variant === "full" ? "h-10 w-10" : "h-full w-full",
+        )}
+      >
+        <defs>
+          {/* Mask for the cutout effect around the arrow */}
+          <mask id="arrow-cutout">
+            <rect width="100%" height="100%" fill="white" />
+            <path
+              d="M10 75 C 35 45, 55 85, 90 25"
+              fill="none"
+              stroke="black"
+              strokeWidth="12"
+              strokeLinecap="round"
+            />
+            {/* Arrow Head Cutout */}
+            <path
+              d="M90 25 L 78 32 L 85 42 Z"
+              fill="black"
+              stroke="black"
+              strokeWidth="6"
+              strokeLinejoin="round"
+              transform="rotate(-15 90 25)"
+            />
+          </mask>
+        </defs>
+
+        {/* ========== BARS (Masked) ========== */}
+        <g
+          mask="url(#arrow-cutout)"
+          className={
+            blendWithBackground
+              ? "fill-brand-500" // 배경 혼합 모드에서도 브랜드 컬러 사용
+              : "fill-brand-600 dark:fill-brand-500"
+          }
+        >
+          {/* Bar 1 (Left, Short) */}
+          <rect x="15" y="45" width="18" height="40" rx="4" />
+          {/* Bar 2 (Middle, Medium) */}
+          <rect x="41" y="30" width="18" height="55" rx="4" />
+          {/* Bar 3 (Right, Tall) */}
+          <rect x="67" y="10" width="18" height="75" rx="4" />
+        </g>
+
+        {/* ========== ARROW (Foreground) ========== */}
+        <g className={mainColorClass}>
+          {/* Arrow Path */}
+          <path
+            d="M10 75 C 35 45, 55 85, 90 25"
+            fill="none"
+            strokeWidth="7"
+            strokeLinecap="round"
+          />
+          {/* Arrow Head */}
+          <path
+            d="M90 25 L 78 32 L 85 42 Z"
+            fill="currentColor"
+            stroke="none"
+            transform="rotate(-15 90 25)"
+          />
+        </g>
+      </svg>
+
+      {/* ========== TEXT (Optional) ========== */}
+      {variant === "full" && (
+        <span
+          className={cn(
+            "font-bold tracking-tight",
+            blendWithBackground
+              ? "text-white opacity-95"
+              : "text-brand-900 dark:text-brand-50",
+          )}
+          style={{ fontSize: "1.35rem", fontFamily: "'Inter', sans-serif" }}
+        >
+          JOORIN-E
+        </span>
+      )}
+    </div>
+  );
+}

features/layout/components/header.tsx

@@ -11,6 +11,7 @@ import { ThemeToggle } from "@/components/theme-toggle";
 import { Button } from "@/components/ui/button";
 import { SessionTimer } from "@/features/auth/components/session-timer";
 import { cn } from "@/lib/utils";
+import { Logo } from "@/features/layout/components/Logo";
 
 interface HeaderProps {
   /** 현재 로그인 사용자 정보(null 가능) */
@@ -59,40 +60,29 @@ export function Header({
         )}
       >
         {/* ========== LEFT: LOGO SECTION ========== */}
-        <Link
-          href={AUTH_ROUTES.HOME}
-          className={cn("group flex items-center gap-2", blendWithBackground ? "text-white" : "")}
-        >
-          <div
-            className={cn(
-              "flex h-9 w-9 items-center justify-center rounded-xl transition-transform duration-200 group-hover:scale-110",
-              blendWithBackground ? "bg-brand-500/45 ring-1 ring-white/55" : "bg-primary/10",
-            )}
-          >
-            <div className="h-5 w-5 rounded-lg bg-linear-to-br from-brand-500 to-brand-700" />
-          </div>
-          <span
-            className={cn(
-              "text-xl font-bold tracking-tight transition-colors",
-              blendWithBackground
-                ? "!text-white [text-shadow:0_2px_18px_rgba(0,0,0,0.75)] group-hover:text-brand-100"
-                : "text-foreground group-hover:text-primary",
-            )}
-          >
-            Jurini
-          </span>
+        {/* ========== LEFT: LOGO SECTION ========== */}
+        <Link href={AUTH_ROUTES.HOME} className="group flex items-center gap-2">
+          <Logo
+            variant="full"
+            className="h-10 text-xl transition-transform duration-200 group-hover:scale-105"
+            blendWithBackground={blendWithBackground}
+          />
         </Link>
 
         {/* ========== RIGHT: ACTION SECTION ========== */}
-        <div className={cn("flex items-center gap-2 sm:gap-3", blendWithBackground ? "text-white" : "")}
+        <div
+          className={cn(
+            "flex items-center gap-2 sm:gap-3",
+            blendWithBackground ? "text-white" : "",
+          )}
         >
           <ThemeToggle
             className={cn(
               blendWithBackground
-                ? "rounded-full border border-white/40 bg-black/50 !text-white backdrop-blur-md hover:bg-black/65 focus-visible:ring-white/80"
+                ? "rounded-full border border-white/40 bg-black/50 text-white! backdrop-blur-md hover:bg-black/65 focus-visible:ring-white/80"
                 : "",
             )}
-            iconClassName={blendWithBackground ? "!text-white" : undefined}
+            iconClassName={blendWithBackground ? "text-white!" : undefined}
           />
 
           {user ? (
@@ -107,7 +97,7 @@ export function Header({
                   className={cn(
                     "hidden font-medium sm:inline-flex",
                     blendWithBackground
-                      ? "rounded-full border border-white/40 bg-black/50 !text-white backdrop-blur-md [text-shadow:0_1px_8px_rgba(0,0,0,0.45)] hover:bg-black/65 hover:!text-white"
+                      ? "rounded-full border border-white/40 bg-black/50 text-white! backdrop-blur-md [text-shadow:0_1px_8px_rgba(0,0,0,0.45)] hover:bg-black/65 hover:text-white!"
                       : "",
                   )}
                 >
@@ -126,7 +116,7 @@ export function Header({
                 className={cn(
                   "hidden sm:inline-flex",
                   blendWithBackground
-                    ? "rounded-full border border-white/40 bg-black/50 !text-white backdrop-blur-md hover:bg-black/65 hover:!text-white"
+                    ? "rounded-full border border-white/40 bg-black/50 text-white! backdrop-blur-md hover:bg-black/65 hover:text-white!"
                     : "",
                 )}
               >