From 35ef4d1f5b1f411e6d261505cb977d5c056320e4 Mon Sep 17 00:00:00 2001
From: mota <koeracomp5@gmail.com>
Date: Fri, 31 Oct 2025 00:02:17 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A9=94=EC=9D=B8=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=20=EC=9E=91=EC=97=85=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/components/AppHeader.tsx  |  2 +-
 src/app/globals.css               |  5 ++-
 src/app/page.tsx                  | 75 ++++++++++++++++---------------
 src/app/svgs/SearchIcon.tsx       | 12 +++++
 src/app/svgs/profilelableicon.tsx | 11 +++++
 5 files changed, 66 insertions(+), 39 deletions(-)
 create mode 100644 src/app/svgs/SearchIcon.tsx
 create mode 100644 src/app/svgs/profilelableicon.tsx

diff --git a/src/app/components/AppHeader.tsx b/src/app/components/AppHeader.tsx
index 97020f2..1344817 100644
--- a/src/app/components/AppHeader.tsx
+++ b/src/app/components/AppHeader.tsx
@@ -157,7 +157,7 @@ export function AppHeader() {
           </span>
         </button>
         <Link href="/" aria-label="홈" className="shrink-0">
-          <Image src="/logo.png" alt="logo" width={120} height={28} priority className="w-20 md:w-28 xl:w-[120px] h-auto" />
+          <Image src="/logo.png" alt="logo" width={120} height={28} priority className="w-20 xl:w-[120px] h-auto" />
         </Link>
       </div>
       <nav className="flex flex-1 items-center gap-4 justify-between">
diff --git a/src/app/globals.css b/src/app/globals.css
index 9a9efbf..64cd572 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,3 +1,4 @@
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css");
 @import "tailwindcss";
 
 :root {
@@ -8,7 +9,7 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
+  --font-sans: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
   --font-mono: var(--font-geist-mono);
 }
 
@@ -22,7 +23,7 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: var(--font-sans), Arial, Helvetica, sans-serif;
+  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
 }
 
 /* 유틸: 카드 스켈레톤 색상 헬퍼 (타깃 사이트 톤 유사) */
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8de20ed..024e753 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,8 @@
 import { HeroBanner } from "@/app/components/HeroBanner";
 import HorizontalCardScroller from "@/app/components/HorizontalCardScroller";
 import CategoryBoardBrowser from "@/app/components/CategoryBoardBrowser";
+import ProfileLabelIcon from "@/app/svgs/profilelableicon";
+import SearchIcon from "@/app/svgs/SearchIcon";
 
 export default async function Home({ searchParams }: { searchParams: Promise<{ sort?: "recent" | "popular" } | undefined> }) {
   const sp = await searchParams;
@@ -32,8 +34,9 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
       {/* 2행: 고정 높이 610px */}
       <section className="min-h-[514px] overflow-hidden">
         <div className="grid grid-cols-1 md:grid-cols-2 xl:[grid-template-columns:1fr_2fr_2fr] gap-4 h-full min-h-0">
-          <div className="hidden xl:grid rounded-xl bg-white px-[25px] py-[34px] grid-rows-[120px_120px_1fr] gap-y-[32px] h-full w-full md:min-w-[350px]">
-            <div className="h-[120px] flex items-center justify-center">
+          <div className="hidden xl:grid relative overflow-hidden rounded-xl bg-white px-[25px] py-[34px] grid-rows-[120px_120px_1fr] gap-y-[32px] h-full w-full md:min-w-[350px]">
+            <div className="absolute inset-x-0 top-0 h-[56px] bg-[#d5d5d5] z-0" />
+            <div className="h-[120px] flex items-center justify-center relative z-10">
               <div className="flex items-center justify-center gap-[8px]">
                 <img src="https://picsum.photos/seed/profile/200/200" alt="프로필" className="w-[120px] h-[120px] rounded-full object-cover" />
                 <div className="w-[62px] h-[62px] rounded-full bg-neutral-200 flex items-center justify-center text-[11px] text-neutral-700">
@@ -41,58 +44,58 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
                 </div>
               </div>
             </div>
-            <div className="h-[120px] overflow-hidden flex flex-col items-center">
-              <div className="text-[18px] text-[#5c5c5c] truncate text-center">홍길동</div>
-              <div className="mt-[20px] w-[300px] mx-auto flex flex-col gap-[12px]">
-                <div className="grid grid-cols-[64px_auto] gap-x-[24px] items-center">
+            <div className="h-[120px] flex flex-col items-center relative z-10">
+              <div className="text-[18px] text-[#5c5c5c] font-[700] truncate text-center mb-[20px]">홍길동</div>
+              <div className="w-[300px] pl-[67px] flex flex-col gap-[12px]">
+                <div className="grid grid-cols-[64px_auto] gap-x-[24px] items-center h-[16px]">
                   <div className="w-[64px] flex items-center">
-                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" fill="#8c8c8c"/></svg>
-                    <span className="ml-[8px] text-[12px] text-[#8c8c8c]">레벨</span>
+                    <ProfileLabelIcon width={16} height={16} />
+                    <span className="ml-[8px] text-[12px] text-[#8c8c8c] font-[700]">레벨</span>
                   </div>
-                  <div className="text-[16px] text-[#5c5c5c]">Lv. 79</div>
+                  <div className="text-[16px] text-[#5c5c5c] font-[700]">Lv. 79</div>
                 </div>
-                <div className="grid grid-cols-[64px_auto] gap-x-[24px] items-center">
+                <div className="grid grid-cols-[64px_auto] gap-x-[24px] items-center h-[16px]">
                   <div className="w-[64px] flex items-center">
-                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" fill="#8c8c8c"/></svg>
-                    <span className="ml-[8px] text-[12px] text-[#8c8c8c]">등급</span>
+                    <ProfileLabelIcon width={16} height={16} />
+                    <span className="ml-[8px] text-[12px] text-[#8c8c8c] font-[700]">등급</span>
                   </div>
-                  <div className="text-[16px] text-[#5c5c5c]">Iron</div>
+                  <div className="text-[16px] text-[#5c5c5c] font-[700]">Iron</div>
                 </div>
-                <div className="grid grid-cols-[64px_auto] gap-x-[24px] items-center">
+                <div className="grid grid-cols-[64px_auto] gap-x-[24px] items-center h-[16px]">
                   <div className="w-[64px] flex items-center">
-                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" fill="#8c8c8c"/></svg>
-                    <span className="ml-[8px] text-[12px] text-[#8c8c8c]">포인트</span>
+                    <ProfileLabelIcon width={16} height={16} />
+                    <span className="ml-[8px] text-[12px] text-[#8c8c8c] font-[700]">포인트</span>
                   </div>
-                  <div className="text-[16px] text-[#5c5c5c]">1,600,000</div>
+                  <div className="text-[16px] text-[#5c5c5c] font-[700]">1,600,000</div>
                 </div>
               </div>
             </div>
-            <div className="flex flex-col gap-[12px]">
-              <button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] pl-[100px] flex items-center">
-                <span className="absolute left-[12px] inline-flex items-center justify-center">
-                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="6" stroke="white" strokeWidth="2"/><line x1="11.5" y1="11.5" x2="15" y2="15" stroke="white" strokeWidth="2"/></svg>
+            <div className="flex flex-col gap-[12px] relative z-10">
+              <button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] font-[700] flex items-center">
+                <span className="absolute left-[100px] inline-flex items-center">
+                  <SearchIcon width={16} height={16} />
+                  <span className="ml-[8px]">내 정보 페이지</span>
                 </span>
-                내 정보 페이지
               </button>
-              <button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] pl-[100px] flex items-center">
-                <span className="absolute left-[12px] inline-flex items-center justify-center">
-                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="6" stroke="white" strokeWidth="2"/><line x1="11.5" y1="11.5" x2="15" y2="15" stroke="white" strokeWidth="2"/></svg>
+              <button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] font-[700] flex items-center">
+                <span className="absolute left-[100px] inline-flex items-center">
+                  <SearchIcon width={16} height={16} />
+                  <span className="ml-[8px]">포인트 히스토리</span>
                 </span>
-                포인트 히스토리
               </button>
-              <button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] pl-[100px] flex items-center">
-                <span className="absolute left-[12px] inline-flex items-center justify-center">
-                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="6" stroke="white" strokeWidth="2"/><line x1="11.5" y1="11.5" x2="15" y2="15" stroke="white" strokeWidth="2"/></svg>
+              <button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] font-[700] flex items-center">
+                <span className="absolute left-[100px] inline-flex items-center">
+                  <SearchIcon width={16} height={16} />
+                  <span className="ml-[8px]">내가 쓴 게시글</span>
                 </span>
-                내가 쓴 게시글
-                <span className="absolute right-[8px] w-[47px] h-[18px] rounded-full bg-white text-[#707070] text-[10px] flex items-center justify-center">12</span>
+                <span className="absolute right-[8px] w-[47px] h-[18px] rounded-full bg-white text-[#707070] text-[10px] font-[600] leading-[18px] flex items-center justify-end pr-[6px]">12 개</span>
               </button>
-              <button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] pl-[100px] flex items-center">
-                <span className="absolute left-[12px] inline-flex items-center justify-center">
-                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="6" stroke="white" strokeWidth="2"/><line x1="11.5" y1="11.5" x2="15" y2="15" stroke="white" strokeWidth="2"/></svg>
+              <button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] font-[700] flex items-center">
+                <span className="absolute left-[100px] inline-flex items-center">
+                  <SearchIcon width={16} height={16} />
+                  <span className="ml-[8px]">내가 쓴 댓글</span>
                 </span>
-                내가 쓴 댓글
-                <span className="absolute right-[8px] w-[47px] h-[18px] rounded-full bg-white text-[#707070] text-[10px] flex items-center justify-center">7</span>
+                <span className="absolute right-[8px] w-[47px] h-[18px] rounded-full bg-white text-[#707070] text-[10px] font-[600] leading-[18px] flex items-center justify-end pr-[6px]">7 개</span>
               </button>
             </div>
           </div>
diff --git a/src/app/svgs/SearchIcon.tsx b/src/app/svgs/SearchIcon.tsx
new file mode 100644
index 0000000..c5fb744
--- /dev/null
+++ b/src/app/svgs/SearchIcon.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+
+export default function SearchIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
+      <path d="M6 7.5C6 6.67157 6.67157 6 7.5 6C8.32843 6 9 6.67157 9 7.5C9 7.91442 8.83293 8.28839 8.56066 8.56066C8.28839 8.83293 7.91442 9 7.5 9C6.67157 9 6 8.32843 6 7.5Z" fill="white"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M4 2C3.17157 2 2.5 2.67157 2.5 3.5V12.5C2.5 13.3284 3.17157 14 4 14H12C12.8284 14 13.5 13.3284 13.5 12.5V6.62132C13.5 6.2235 13.342 5.84197 13.0607 5.56066L9.93934 2.43934C9.65804 2.15804 9.2765 2 8.87868 2H4ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C8.05604 10.5 8.57728 10.3483 9.02386 10.0845L10.2197 11.2803C10.5126 11.5732 10.9874 11.5732 11.2803 11.2803C11.5732 10.9874 11.5732 10.5126 11.2803 10.2197L10.0845 9.02386C10.3483 8.57728 10.5 8.05604 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z" fill="white"/>
+    </svg>
+  );
+}
+
+
diff --git a/src/app/svgs/profilelableicon.tsx b/src/app/svgs/profilelableicon.tsx
new file mode 100644
index 0000000..3c146d2
--- /dev/null
+++ b/src/app/svgs/profilelableicon.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export default function ProfileLabelIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="14" viewBox="0 0 16 16" fill="none" {...props}>
+      <path d="M8.3721 1.34882C8.14153 1.21706 7.85847 1.21706 7.6279 1.34882L2.81794 4.09736L7.99998 7.13075L13.182 4.09735L8.3721 1.34882Z" fill="#D5D5D5"/>
+      <path d="M14 5.35664L8.74998 8.42982V14.4353L13.6221 11.6512C13.8558 11.5177 14 11.2691 14 11V5.35664Z" fill="#D5D5D5"/>
+      <path d="M7.24998 14.4352V8.42982L2 5.35666V11C2 11.2691 2.14421 11.5177 2.3779 11.6512L7.24998 14.4352Z" fill="#D5D5D5"/>
+    </svg>
+  );
+}
\ No newline at end of file