From 91a86134dd50c21fde4bc975d67705bd352186c7 Mon Sep 17 00:00:00 2001
From: jjunier <yyt1186@gmail.com>
Date: Tue, 19 May 2026 18:25:56 +0900
Subject: [PATCH] feat(layout): add common footer service info section [D2C-57]

- add shared footer with service, purchase flow and implementation scope sections
- add GitHub repository link with inline GitHub icon
- improve footer copyright and repository metadata
- fix sticky footer layout for short content pages
---
 apps/web/src/components/layout/MainLayout.tsx |  62 +++++++++
 apps/web/src/styles/global.css                | 127 ++++++++++++++++++
 2 files changed, 189 insertions(+)

diff --git a/apps/web/src/components/layout/MainLayout.tsx b/apps/web/src/components/layout/MainLayout.tsx
index a02e2d3..ed406da 100644
--- a/apps/web/src/components/layout/MainLayout.tsx
+++ b/apps/web/src/components/layout/MainLayout.tsx
@@ -62,6 +62,68 @@ export function MainLayout() {
       <main className="app-main">
         <Outlet />
       </main>
+
+      <footer className="app-footer">
+        <div className="app-footer-inner">
+          <section className="app-footer-brand">
+            <h2>D2C Commerce</h2>
+            <p>
+              상품 탐색부터 장바구니, 체크아웃, 주문, 결제 시뮬레이션, 리뷰 작성까지
+              구매 흐름을 검증하는 D2C 커머스 프로토타입입니다.
+            </p>
+          </section>
+
+          <nav className="app-footer-nav" aria-label="Footer navigation">
+            <div>
+              <h3>서비스</h3>
+              <Link to="/products">상품 둘러보기</Link>
+              <Link to="/cart">장바구니</Link>
+              <Link to="/orders">주문 내역</Link>
+            </div>
+
+            <div>
+              <h3>구매 흐름</h3>
+              <span>상품 선택 및 장바구니 담기</span>
+              <span>쿠폰 적용 및 주문 생성</span>
+              <span>결제 성공·실패 시뮬레이션</span>
+              <span>구매 상품 리뷰 작성</span>
+            </div>
+
+            <div>
+              <h3>구현 범위</h3>
+              <span>사용자 상태 기반 화면 제어</span>
+              <span>주문·결제 상태 이력 관리</span>
+              <span>상품별 리뷰 데이터 조회</span>
+              <span>반응형 UI 및 공통 레이아웃</span>
+            </div>
+          </nav>
+        </div>
+
+        <div className="app-footer-bottom">
+          <span>© 2026 jjunier. All rights reserved.</span>
+          
+          <a
+            href="https://github.com/d2c-commerce-lab/prototype"
+            target="_blank"
+            rel="noreferrer"
+            className="app-footer-repository-link"
+            aria-label="GitHub Prototype Repository 새 창에서 열기"
+          >
+            <svg
+              className="app-footer-github-icon"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+              focusable="false"
+            >
+              <path
+                fill="currentColor"
+                d="M12 2C6.48 2 2 6.58 2 12.26c0 4.53 2.87 8.37 6.84 9.73.5.1.68-.22.68-.49 0-.24-.01-.88-.01-1.73-2.78.62-3.37-1.37-3.37-1.37-.45-1.18-1.11-1.49-1.11-1.49-.91-.64.07-.63.07-.63 1 .07 1.53 1.06 1.53 1.06.89 1.56 2.34 1.11 2.91.85.09-.66.35-1.11.63-1.37-2.22-.26-4.56-1.14-4.56-5.07 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.71 0 0 .84-.28 2.75 1.05A9.28 9.28 0 0 1 12 6.99c.85 0 1.71.12 2.51.35 1.91-1.33 2.75-1.05 2.75-1.05.55 1.41.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.75 0 3.94-2.34 4.8-4.57 5.06.36.32.68.94.68 1.9 0 1.37-.01 2.48-.01 2.82 0 .27.18.59.69.49A10.1 10.1 0 0 0 22 12.26C22 6.58 17.52 2 12 2Z"
+              />
+            </svg>
+            <span>GitHub Repository</span>
+          </a>
+        </div>
+      </footer>
     </div>
   );
 }
\ No newline at end of file
diff --git a/apps/web/src/styles/global.css b/apps/web/src/styles/global.css
index e278d3b..a8852d7 100644
--- a/apps/web/src/styles/global.css
+++ b/apps/web/src/styles/global.css
@@ -38,7 +38,9 @@ textarea {
 
 /* App layout */
 .app-shell {
+  display: flex;
   min-height: 100vh;
+  flex-direction: column;
   background-color: #f8fafc;
 }
 
@@ -81,11 +83,118 @@ textarea {
 }
 
 .app-main {
+  flex: 1;
+  display: flex;
   width: min(1180px, calc(100% - 48px));
   margin: 0 auto;
   padding: 48px 0;
 }
 
+.app-main > * {
+  width: 100%;
+}
+
+/* App footer */
+.app-footer {
+  margin-top: auto;
+  border-top: 1px solid #e5e7eb;
+  background-color: #ffffff;
+}
+
+.app-footer-inner {
+  display: grid;
+  width: min(1180px, calc(100% - 48px));
+  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
+  gap: 48px;
+  margin: 0 auto;
+  padding: 40px 0 28px;
+}
+
+.app-footer-brand {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.app-footer-brand h2 {
+  margin: 0;
+  color: #111827;
+  font-size: 22px;
+  font-weight: 900;
+  letter-spacing: -0.03em;
+}
+
+.app-footer-brand p {
+  max-width: 420px;
+  margin: 0;
+  color: #4b5563;
+  font-size: 14px;
+  line-height: 1.75;
+  word-break: keep-all;
+}
+
+.app-footer-nav {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 28px;
+}
+
+.app-footer-nav div {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.app-footer-nav h3 {
+  margin: 0 0 4px;
+  color: #111827;
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.app-footer-nav a,
+.app-footer-nav span {
+  width: fit-content;
+  color: #6b7280;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.app-footer-nav a:hover {
+  color: #111827;
+}
+
+.app-footer-bottom {
+  display: flex;
+  width: min(1180px, calc(100% - 48px));
+  justify-content: space-between;
+  gap: 16px;
+  margin: 0 auto;
+  padding: 18px 0 28px;
+  border-top: 1px solid #f3f4f6;
+  color: #9ca3af;
+  font-size: 13px;
+}
+
+.app-footer-repository-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #6b7280;
+  font-size: 13px;
+  text-decoration: none;
+}
+
+.app-footer-repository-link:hover {
+  color: #111827;
+}
+
+.app-footer-github-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
 /* Shared actions */
 .link-button {
   border: 0;
@@ -2064,6 +2173,11 @@ textarea {
 }
 
 @media (max-width: 900px) {
+  .app-footer-inner {
+    grid-template-columns: 1fr;
+    gap: 28px;
+  }
+
   .product-detail-layout,
   .cart-layout {
     grid-template-columns: 1fr;
@@ -2110,6 +2224,19 @@ textarea {
     grid-template-columns: 1fr;
   }
 
+  .app-footer-inner,
+  .app-footer-bottom {
+    width: min(100% - 32px, 1180px);
+  }
+
+  .app-footer-nav {
+    grid-template-columns: 1fr;
+  }
+
+  .app-footer-bottom {
+    flex-direction: column;
+  }
+
   .product-list-toolbar {
     align-items: flex-start;
     flex-direction: column;