[D2C-57] 공통 레이아웃 Footer 및 서비스 정보 영역 구성

[jjunier]

개요

본 PR은 D2C-57 공통 레이아웃 Footer 및 서비스 정보 영역 구성 작업 결과를 develop 브랜치에 반영하기 위한 PR입니다.

D2C-57에서는 전체 페이지에서 공통으로 노출되는 Footer 영역을 추가하고, 서비스 주요 화면, 구매 흐름, 구현 범위, GitHub Repository 정보를 제공하도록 레이아웃을 보완했습니다.

또한 콘텐츠가 짧은 장바구니/체크아웃 빈 상태 페이지에서도 Footer가 화면 중간에 떠 보이지 않고 하단에 자연스럽게 위치하도록 sticky footer 레이아웃을 함께 정리했습니다.

---

포함 범위

공통 Footer 영역 추가

• 전체 앱 공통 Footer 추가
• 서비스 소개 문구 추가
• 주요 서비스 링크 추가
  • 상품 둘러보기
  • 장바구니
  • 주문 내역
• 구매 흐름 안내 영역 추가
  • 상품 선택 및 장바구니 담기
  • 쿠폰 적용 및 주문 생성
  • 결제 성공·실패 시뮬레이션
  • 구매 상품 리뷰 작성
• 구현 범위 안내 영역 추가
  • 사용자 상태 기반 화면 제어
  • 주문·결제 상태 이력 관리
  • 상품별 리뷰 데이터 조회
  • 반응형 UI 및 공통 레이아웃

GitHub Repository 정보 추가

• Footer 하단에 저작권자 정보 추가
• GitHub Prototype Repository 링크 추가
• GitHub inline SVG 아이콘 추가
• Repository 링크 hover 스타일 추가

Sticky Footer 레이아웃 보완

• app-shell을 세로 flex layout으로 구성
• app-main이 남은 화면 높이를 차지하도록 수정
• 콘텐츠가 짧은 페이지에서도 Footer가 화면 하단에 위치하도록 개선
• 장바구니 빈 상태 페이지 Footer 위치 보완
• 체크아웃 빈 상태 페이지 Footer 위치 보완

반응형 스타일 보완

• Footer desktop layout 구성
• Footer mobile layout 구성
• 모바일 화면에서 Footer navigation 세로 정렬 처리
• Footer bottom 영역 모바일 세로 배치 처리

---

검증 결과

프론트엔드 타입 체크를 실행하여 정상 통과를 확인했습니다.

cd apps/web
npm run typecheck

프론트엔드 빌드를 실행하여 정상 통과를 확인했습니다.

cd apps/web
npm run build

수동 확인 항목:

• 홈 화면 하단 Footer 표시 확인
• 상품 목록 페이지 Footer 표시 확인
• 상품 상세 페이지 Footer 표시 확인
• 장바구니 페이지 Footer 표시 확인
• 체크아웃 페이지 Footer 표시 확인
• 주문 내역 페이지 Footer 표시 확인
• 리뷰 작성 페이지 Footer 표시 확인
• 장바구니 빈 상태에서 Footer가 화면 하단에 위치하는지 확인
• 체크아웃 빈 상태에서 Footer가 화면 하단에 위치하는지 확인
• Footer의 상품 둘러보기 링크 이동 확인
• Footer의 장바구니 링크 이동 확인
• Footer의 주문 내역 링크 이동 확인
• GitHub Repository 링크 새 창 이동 확인
• GitHub 아이콘 표시 확인
• 모바일 폭에서 Footer layout이 자연스럽게 정렬되는지 확인

---

브랜치 통합 방식

이번 PR의 통합 흐름은 아래와 같습니다.

feature/D2C-57-common-footer-service-info
→ develop

develop 병합 후에는 공통 Footer 및 서비스 정보 영역이 Sprint 2 프론트엔드 공통 레이아웃에 반영됩니다.

---

향후 브랜치 운영 원칙

Sprint 2에서는 아래 브랜치 운영 원칙을 유지합니다.

• Jira 이슈키별 독립 feature 브랜치 생성
• 각 feature 브랜치는 develop에서 분기
• 작업 완료 후 develop으로 개별 PR 생성
• PR 단위로 CI 검증 후 병합
• 의미 있는 사용자 흐름 단위가 완료되면 develop을 main에 병합
• main은 배포 기준 브랜치로 유지
• 기능 작업이 누적된 장기 브랜치는 지양

---

체크리스트

• D2C-57 브랜치를 develop 기준으로 분기
• 공통 Footer 영역 추가
• 서비스 링크 영역 추가
• 구매 흐름 안내 영역 추가
• 구현 범위 안내 영역 추가
• GitHub Repository 링크 추가
• GitHub inline SVG 아이콘 추가
• sticky footer layout 적용
• 짧은 콘텐츠 페이지 Footer 위치 보완
• 반응형 Footer layout 적용
• Frontend typecheck 통과 확인
• Frontend build 통과 확인