leeunduck · leeunduck · Nov 3, 2025 · Nov 3, 2025 · Nov 3, 2025 · Nov 3, 2025
diff --git a/public/images/Logo.png b/public/images/Logo.png
diff --git a/src/app/(marketing)/layout.tsx b/src/app/(marketing)/layout.tsx
@@ -1,8 +1,10 @@
+import { LandingFooter } from "@/components/landing/LandingFooter";
+import { LandingHeader } from "@/components/landing/LandingHeader";
 import { LandingWrapper } from "@/components/landing/LandingWrapper";
 import { makePageMetadata } from "@/seo/metadata";
 
 export const metadata = makePageMetadata({
-  title: "PlanMate — 맞춤형 데일리 플래너",
+  title: "MyPlanMate — 맞춤형 데일리 플래너",
   description: "원하는 모듈을 조합해 나만의 플래너를 만드는 PlanMate 랜딩 페이지",
   canonical: "/",
 });
@@ -12,7 +14,9 @@ export default function MarketingLayout({ children }: { children: React.ReactNod
     <html lang="ko">
       <body>
         <LandingWrapper>
+          <LandingHeader />
           <main className="flex-1">{children}</main>
+          <LandingFooter />
         </LandingWrapper>
       </body>
     </html>

diff --git a/src/components/landing/LandingCopyright.tsx b/src/components/landing/LandingCopyright.tsx
@@ -0,0 +1,11 @@
+import { useCurrentYear } from "@/hooks/useCurrentYear";
+
+export function LandingCopyright() {
+  const year = useCurrentYear();
+
+  return (
+    <p className="text-center text-sm text-[var(--color-gray-500)]">
+      © {year} MyPlanMate. All rights reserved.
+    </p>
+  );
+}
diff --git a/src/components/landing/LandingFooter.tsx b/src/components/landing/LandingFooter.tsx
@@ -0,0 +1,64 @@
+import { FooterLink } from "@/types/landing";
+import Image from "next/image";
+import Link from "next/link";
+import { LandingCopyright } from "./LandingCopyright";
+import { LandingFooterColumn } from "./LandingFooterColumn";
+
+export function LandingFooter() {
+  const productLinks: FooterLink[] = [
+    { label: "기능 소개", href: "/features" },
+    { label: "요금제", href: "/pricing" },
+    { label: "업데이트", href: "/changelog" },
+  ];
+
+  const supportLinks: FooterLink[] = [
+    { label: "FAQ", href: "/faq" },
+    { label: "문의하기", href: "/support" },
+    { label: "개인정보처리방침", href: "/privacy" },
+  ];
+
+  return (
+    <footer
+      role="contentinfo"
+      className="border-t border-[var(--color-gray-100)] bg-[var(--color-gray-50)] text-[var(--color-gray-600)]"
+    >
+      <div className="mx-auto flex max-w-[128rem] flex-col gap-10 px-12 py-12">
+        {/* 상단: 좌우 컬럼 + 중앙 로고 */}
+        <div className="flex flex-row items-center gap-10   justify-between">
+          {/* 좌측: 제품 관련 링크 */}
+          <LandingFooterColumn title="제품" links={productLinks} />
+
+          {/* 중앙: 브랜드 로고/문구 */}
+          <div className="flex flex-col items-center gap-5">
+            <Link href="/" aria-label="MyPlanMate 홈으로 이동" className="flex items-center gap-2">
+              <Image
+                src="/images/logo.png"
+                alt="MyPlanMate 로고"
+                width={150}
+                height={150}
+                className="object-contain select-none"
+                draggable={false}
+              />
+            </Link>
+            <p className="t-14-m text-[var(--color-gray-500)]">
+              하루를 정리하는 나만의 플래너, MyPlanMate
+            </p>
+          </div>
+
+          {/* 우측: 지원/정책 링크 */}
+          <LandingFooterColumn title="지원" links={supportLinks} />
+        </div>
+
+        {/* 하단: 구분선 + 저작권 */}
+        <div className="mt-4 border-t border-[var(--color-gray-100)] pt-6">
+          <div className="flex flex-row items-center justify-between gap-4 ">
+            <LandingCopyright />
+            <p className="t-12-r text-[var(--color-gray-400)]">
+              서비스 관련 안내 및 공지사항은 홈페이지를 통해 제공됩니다.
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/components/landing/LandingFooterColumn.tsx b/src/components/landing/LandingFooterColumn.tsx
@@ -0,0 +1,23 @@
+import { LandingFooterColumnProps } from "@/types/landing";
+import Link from "next/link";
+
+export function LandingFooterColumn({ title, links }: LandingFooterColumnProps) {
+  return (
+    <div className="flex flex-col gap-3">
+      <h3 className="t-16-m text-[var(--color-gray-900)] text-center">{title}</h3>
+      <ul className="flex flex-col gap-3 text-center">
+        {links.map((link) => (
+          <li key={link.label}>
+            <Link
+              href={link.href}
+              className="t-14-m text-[var(--color-gray-500)]
+               hover:text-[var(--color-gray-900)] hover:border-b hover:border-[var(--color-gray-900)]"
+            >
+              {link.label}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/src/components/landing/LandingHeader.tsx b/src/components/landing/LandingHeader.tsx
@@ -0,0 +1,10 @@
+import { cn } from "@/lib/utils";
+import { LandingNavBar } from "./LandingNavBar";
+
+export function LandingHeader() {
+  return (
+    <header className={cn("w-full")} role="banner">
+      <LandingNavBar />
+    </header>
+  );
+}
diff --git a/src/components/landing/LandingNavBar.tsx b/src/components/landing/LandingNavBar.tsx
@@ -0,0 +1,43 @@
+// src/components/landing/LandingNavBar.tsx
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+import Link from "next/link";
+
+export function LandingNavBar() {
+  return (
+    <nav
+      className={cn("mx-auto flex h-[9.6rem] max-w-[128rem] items-center justify-between px-12")}
+      aria-label="Global navigation"
+    >
+      {/* 좌측: 로고 (이미지) */}
+      <Link href="/" aria-label="MyPlanMate 홈으로 이동">
+        <Image
+          src="/images/logo.png"
+          alt="MyPlanMate 로고"
+          width={150}
+          height={150}
+          className="object-contain select-none"
+          draggable={false}
+        />
+      </Link>
+
+      {/* 우측: 언어 토글 + 로그인 */}
+      <div className="flex items-center gap-12">
+        <button
+          type="button"
+          className="t-16-m text-[var(--color-gray-600)] hover:text-[var(--color-gray-900)] cursor-pointer"
+          aria-label="언어 전환"
+        >
+          한국어
+        </button>
+        <Link
+          href="/login"
+          className="t-16-m text-[var(--color-gray-600)] hover:text-[var(--color-gray-900)]"
+          aria-label="로그인페이지로 이동"
+        >
+          로그인
+        </Link>
+      </div>
+    </nav>
+  );
+}
diff --git a/src/hooks/useCurrentYear.ts b/src/hooks/useCurrentYear.ts
@@ -0,0 +1,3 @@
+export function useCurrentYear(): number {
+  return new Date().getFullYear();
+}
diff --git a/src/lib/variants/button.hero.ts b/src/lib/variants/button.hero.ts
@@ -17,7 +17,7 @@ export const heroButtonVariants = cva(
     "bg-[var(--color-white)] text-[var(--color-gray-900)] border border-[var(--color-gray-300)]",
 
     // Hover invert (black/white/black)
-    "hover:bg-[var(--color-black)] hover:text-[var(--color-white)] hover:border-[var(--color-black)]]",
+    "hover:bg-[var(--color-black)] hover:text-[var(--color-white)] hover:border-[var(--color-black)]",
   ].join(" "),
   {
     variants: {

diff --git a/src/types/landing.ts b/src/types/landing.ts
@@ -2,3 +2,13 @@ export type LandingWrapperProps = {
   children: React.ReactNode;
   className?: string;
 };
+
+export type FooterLink = {
+  label: string;
+  href: string;
+};
+
+export type LandingFooterColumnProps = {
+  title: string;
+  links: FooterLink[];
+};