From 983be52842abf21a321552c44c55e3c6a9eb5ce8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8F=84=ED=98=95?= <shapekim98@gmail.com>
Date: Fri, 24 Apr 2026 14:33:16 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Hero=EC=97=90=20AI=20=ED=99=9C=EC=9A=A9?=
 =?UTF-8?q?=20=EC=86=8C=EA=B0=9C=C2=B7Repository=20=EB=A7=81=ED=81=AC=20+?=
 =?UTF-8?q?=20=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20=ED=91=9C=EC=A7=80=20?=
 =?UTF-8?q?aspect=20fill=20(#29)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- HeroSection: 이 사이트가 Claude Code 바이브 코딩으로 직접 만들어졌다는
  AI 활용 역량 선언 문단 추가 (웹 전용, PDF에서는 data-print-hide)
- HeroSection: Repository 버튼·MetaList 항목 추가 (ShapeKim98/portfolio)
- HeroSection: 프린트 전용 웹사이트 URL 라인 노출 (data-print-only)
- print.css: data-print-hide 패턴과 대칭되는 data-print-only 유틸 신설
- ProjectLayout: ProjectCover / UseCaseCover 이미지 object-contain → cover
  + 래퍼에 max-h-[85vh] 적용하여 85vh 초과 시 자연스럽게 잘림

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/app/components/HeroSection.tsx   | 57 ++++++++++++++++++++++++++++
 src/app/components/ProjectLayout.tsx | 10 ++---
 src/styles/print.css                 |  7 ++++
 3 files changed, 69 insertions(+), 5 deletions(-)

diff --git a/src/app/components/HeroSection.tsx b/src/app/components/HeroSection.tsx
index c10885c..2b41042 100644
--- a/src/app/components/HeroSection.tsx
+++ b/src/app/components/HeroSection.tsx
@@ -31,6 +31,33 @@ export function HeroSection() {
               iOS 개발자입니다.
             </p>
 
+            {/* AI 활용 역량 선언 — 웹 전용 (PDF에서는 숨김) */}
+            <p
+              data-print-hide
+              className="text-sm md:text-base font-normal text-muted-foreground/80 leading-relaxed max-w-2xl"
+            >
+              이 포트폴리오 사이트는{" "}
+              <a
+                href="https://claude.com/product/claude-code"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline decoration-dotted underline-offset-4 hover:opacity-70 transition-opacity"
+              >
+                Claude Code
+              </a>
+              를 활용한{" "}
+              <strong className="font-medium text-foreground">바이브 코딩</strong>
+              으로 직접 만들었습니다. 기획·디자인 시스템·편집 레이아웃·PDF 자동 출력까지 AI를 도구로 활용해 빠르게 구현했습니다.{" "}
+              <a
+                href="https://github.com/ShapeKim98/portfolio"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline decoration-dotted underline-offset-4 hover:opacity-70 transition-opacity"
+              >
+                소스 보기 →
+              </a>
+            </p>
+
             {/* Actions */}
             <div className="flex flex-wrap items-center gap-x-5 gap-y-2 text-sm">
               <a
@@ -43,6 +70,16 @@ export function HeroSection() {
                 <span>GitHub</span>
                 <ArrowUpRight size={12} className="opacity-60" />
               </a>
+              <a
+                href="https://github.com/ShapeKim98/portfolio"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1.5 text-foreground hover:opacity-70 transition-opacity"
+              >
+                <Github size={14} />
+                <span>Repository</span>
+                <ArrowUpRight size={12} className="opacity-60" />
+              </a>
               <a
                 href="mailto:shapekim98@gmail.com"
                 className="inline-flex items-center gap-1.5 text-foreground hover:opacity-70 transition-opacity"
@@ -59,6 +96,13 @@ export function HeroSection() {
                 <Download size={14} />
                 <span>PDF</span>
               </a>
+              {/* 프린트 전용: PDF 독자가 웹 버전 위치를 알 수 있게 */}
+              <span
+                data-print-only
+                className="items-center gap-1.5 text-muted-foreground tabular-nums"
+              >
+                Web · shapekim98.github.io/portfolio
+              </span>
             </div>
           </div>
 
@@ -92,6 +136,19 @@ export function HeroSection() {
                     </a>
                   ),
                 },
+                {
+                  label: "Repository",
+                  value: (
+                    <a
+                      href="https://github.com/ShapeKim98/portfolio"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="hover:opacity-70 transition-opacity break-all"
+                    >
+                      ShapeKim98/portfolio
+                    </a>
+                  ),
+                },
               ]}
             />
           </div>
diff --git a/src/app/components/ProjectLayout.tsx b/src/app/components/ProjectLayout.tsx
index 6a7f0a9..1c2ffcc 100644
--- a/src/app/components/ProjectLayout.tsx
+++ b/src/app/components/ProjectLayout.tsx
@@ -84,12 +84,12 @@ export function ProjectCover({
       data-print-keep
       data-print-cover
     >
-      <div className="relative overflow-hidden border-y border-border bg-muted/40 group">
-        {/* Image — natural aspect ratio preserved, clickable for detail view */}
+      <div className="relative overflow-hidden border-y border-border bg-muted/40 group max-h-[85vh]">
+        {/* Image — aspect fill: 자연 비율 유지, 85vh 초과분은 하단에서 잘림 */}
         <ClickableImage
           src={imageSrc}
           alt={imageAlt ?? title}
-          className="block w-full h-auto max-h-[85vh] object-contain"
+          className="block w-full h-auto object-cover"
         />
         {/* Readable gradient overlay — kept in PDF too to match web design */}
         <div
@@ -168,11 +168,11 @@ export function UseCaseCover({
 }) {
   return (
     <section className={cn("relative w-full", className)} data-print-keep>
-      <div className="relative overflow-hidden border-y border-border bg-muted/40 group">
+      <div className="relative overflow-hidden border-y border-border bg-muted/40 group max-h-[85vh]">
         <ClickableImage
           src={imageSrc}
           alt={imageAlt ?? name}
-          className="block w-full h-auto max-h-[85vh] object-contain"
+          className="block w-full h-auto object-cover"
         />
         <div
           className="absolute inset-0 pointer-events-none"
diff --git a/src/styles/print.css b/src/styles/print.css
index d51f493..4966056 100644
--- a/src/styles/print.css
+++ b/src/styles/print.css
@@ -45,8 +45,14 @@
 
   /* 인쇄 시 숨김 플래그 */
   [data-print-hide] { display: none !important; }
+
+  /* 인쇄 시에만 표시 플래그 (웹에서는 숨김) */
+  [data-print-only] { display: inline !important; }
 }
 
+/* 웹 모드 기본값: data-print-only 요소는 숨김 */
+[data-print-only] { display: none; }
+
 /* ───────────────────────────────────────────────────────────
  * 수동 print 모드: ?print=1 로 접근 시 <html> 에 .print-mode 클래스 부여
  * Puppeteer 기반 PDF 추출은 이 경로를 주로 사용한다.
@@ -66,6 +72,7 @@ html.print-mode [class*="h-screen"] { height: auto !important; }
 html.print-mode main { padding-left: 0 !important; padding-top: 0 !important; }
 html.print-mode section[id="hero"] { min-height: 0 !important; padding-top: 24px !important; padding-bottom: 24px !important; }
 html.print-mode [data-print-hide] { display: none !important; }
+html.print-mode [data-print-only] { display: inline !important; }
 
 /* 테마 배경/장식 레이어 제거 */
 html.print-mode { background: transparent !important; }