ssac-dev · kws0315 · Jul 9, 2025 · Jul 9, 2025 · Jul 9, 2025 · Jul 9, 2025
diff --git a/README.md b/README.md
@@ -1,2 +1,7 @@
 # shooking
-슈킹 신발 쇼핑몰 개발을 위한 문서 가이드 저장소입니다.
+
+인턴IN메타 과업 수행을 위한 Repository
+---
+1. 고객 요구사항 [ V ]
+2. 고객 요구사항 체크리스트 [ V ]
+3. 상품 목록페이지 문서화 [ V ]
diff --git a/docs/00.developer_guideline.md b/docs/00.developer_guideline.md
@@ -1,14 +1,48 @@
 # 프로젝트 개요
-> 프로젝트의 간략한 소개, 프로젝트의 목표와 배경을 설명합니다. 그리고 주로 어떤 문제를 했는지에 대한 이야기를 제공합니다.
+> 모바일 환경에 적합한 쇼핑몰 페이지
+> 프로젝트 목표: PC보다 모바일 환경에 친화적인 UI를 사용하여 쇼핑몰 페이지를 제작하는 것 
+> 주로 쇼핑몰 페이지를 위해서 상품 상세페이지, 상품목록 페이지, 장바구니 페이지 등의 FrontEnd에 적합한 페이지를 제작했습니다.
 
 # 시스템 아키텍처
-> 시스템의 전체적인 구조와 각 컴포넌트가 어떻게 연동되는지를 도식화하여 설명합니다. 이전 문서에서 작성했던 내용이 있다면 링크를 정리해하셔도 좋습니다.
+> 쇼핑몰 페이지는 크게 상품 목록, 장바구니, 결제 모듈 세 가지 주요 영역으로 구성됩니다. 
+> 각 영역은 독립적인 컴포넌트 단위로 작성되었으며, 데이터 흐름은 다음과 같이 연결됩니다.
+- **상품 목록(ProductList, ProductCard, ProductImage, ProductPrice)**
+  - 사용자가 상품을 확인하고 장바구니에 추가할 수 있는 구조.
+  - 상품을 클릭 시 장바구니 컴포넌트로 데이터 전달.
+
+- **장바구니(cart_item, item_count, cart_summary, shipping_cost, total_summary)**
+  - 장바구니에 추가된 상품들의 가격, 수량, 배송비를 합산하여 표시.
+  - 사용자가 결제 버튼을 누르면 결제 모듈로 데이터 전달.
+
+- **결제 모듈(CardNumberInput, CardName, CardNumberMasking)**
+  - PG사(결제 대행사)와 연동된 보안 결제 구조.
+  - 카드 번호, 이름, 보안코드는 암호화 또는 마스킹 처리.
+
+- 데이터 흐름예시
+  - 상품 목록 → 장바구니 담기 → 장바구니 요약 확인 → 결제 모듈로 이동 → 결제 처리
 
 # 개발 환경 설정 및 규칙
-> 개발을 시작하기 위해 필요한 환경 설정에 대한 자세한 단계를 포함합니다. 프로젝트 주차가 진행되면서 조금씩 추가되거나 변경된 요소를 한 번에 정리합니다. 또한 코드 저장소의 구조, 사용되는 브랜치 전략, 커밋 메시지 규칙 등을 설명합니다.
+- **환경 설정**
+  - React 기반 SPA(단일 페이지 애플리케이션)로 개발.
+  - Node.js와 npm을 사용하여 패키지 관리.
+  - 테스트 URL 제공을 위해 로컬 서버와 간단한 배포 환경 구성.
+- **브랜치 전략**
+  - main: 안정된 배포용 코드
+  - develop: 기능 개발 및 통합
+  - feature/*: 개별 기능 구현
 
 # 프로젝트에서 중요했던 지점
-> 프로젝트 개발에 있어서 가장 중요했던 결정이나 방향성을 설명합니다.
+> **모바일 환경 최적화:** 상품 이미지를 강조하고 작은 화면에서도 직관적으로 사용할 수 있도록 설계.
+> **보안 강화:** 결제 모듈에서 카드 번호, 보안 코드 마스킹, 개인정보 암호화를 통해 보안 유지.
+> **사용자 경험(UX):** 장바구니에 담긴 상품 개수와 총 금액을 실시간으로 표시하여 사용자가 결제 전 상태를 쉽게 확인할 수 있도록 구현.
 
 # 다른 문서를 어떻게 참고하면 좋을지에 대한 가이드
-> 기존 문서를 참고하는 법과 문서 갱신에 대한 절차를 안내합니다.
+> 기존 문서를 참고하는 법
+- 상품목록페이지 문서
+  - https://github.com/kws0315/shooking/blob/main/docs/01.products_docs.md
+- 결제모듈 문서
+  - https://github.com/kws0315/shooking/blob/main/docs/02.payments_docs.md
+- 장바구니 문서
+  - https://github.com/kws0315/shooking/blob/main/docs/03.cart_docs.md
+- 쇼핑몰 문서
+  - https://github.com/kws0315/shooking/blob/main/docs/04.shopping_docs.md
diff --git a/docs/01.products_docs.md b/docs/01.products_docs.md
@@ -2,41 +2,37 @@
 
 ## 프로젝트 개요
 
-- 프로젝트 목표와 주요 기능에 대한 간략한 설명
-- 참여한 팀원
-
-예시: 이 상품 목록 페이지는 고객에게 다양한 상품을 표시하고, 상품을 선택하여 장바구니에 추가할 수 있는 기능을 제공합니다.
+- 이 상품 목록페이지는 고객에게 이미지와 함께 다양한 상품을 표시하고, 상품을 선택하여 장바구니에 추가할 수 있는 기능을 제공합니다.
+- 고완석
 
 ## 개발 환경
 
-사용한 프레임워크, 라이브러리, 언어 등
-
-예시: React 17.0, JavaScript ES6
+**프론트 엔드:** <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React Logo" width="25"/>React.js, 
+<img src="https://vuejs.org/images/logo.png" alt="Vue.js Logo" width="25"/>Vue.js, 
+Tailwind CSS  
+**백엔드:** <img src="https://www.djangoproject.com/m/img/logos/django-logo-negative.svg" alt="Django Logo" width="50"/>Django, RESTful API  
+**배포:** <img src= "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/GitHub_Invertocat_Logo.svg/1024px-GitHub_Invertocat_Logo.svg.png" alt="Github Logo" width="25" />Github Pages, Netlify
 
 ## 설치 및 실행 방법
 
 프로젝트를 로컬에서 실행하기 위한 설치 방법과 명령어
 
-예시:
 ```
 npm install
 npm start
 ```
 
 ## 컴포넌트 구조
 
-주요 컴포넌트들의 구조와 역할
-
-예시:
-
 - `ProductList`: 상품 목록을 보여줍니다.
 - `ProductCard`: 각 상품의 정보를 보여줍니다.
+- `ProductImage`: 각 상품의 이미지를 보여줍니다.
+- `ProductPrice`: 각 상품의 가격을 표시합니다. 
+- `AddCartButton`: 장바구니 추가 버튼을 표시합니다.
 
 ## 테스트 방법
 
 테스트 케이스 및 실행 방법
-
-예시:
 ```
 npm test
 ```
@@ -45,10 +41,10 @@ npm test
 
 버그, 해결하지 못한 문제, 추가하고 싶은 기능 등
 
-예시: 현재 safari 브라우저에서 접속시에는 폰트가 다르게 보이는 이슈가 있습니다.
+현재 safari 브라우저에서 접속시에는 폰트가 다르게 보이는 이슈가 있습니다.
 
 ## 추가 항목
 
 문서화에 추가하고 싶은 기타 내용
 
-예시: 참고한 자료 등
+참고한 자료: 인턴IN메타 배포자료
diff --git a/docs/01.products_requirements.md b/docs/01.products_requirements.md
@@ -2,19 +2,32 @@
 
 ## 📌 기본 정보
 ### 프로젝트명: 
-예) 패션 쇼핑몰 상품 목록 페이지 (모바일)
+패션 쇼핑몰 상품 목록 페이지 (모바일)
 
 ### 사용하게 될 기술: 
-예) React
+**프론트 엔드:** <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React Logo" width="25"/>React.js, 
+<img src="https://vuejs.org/images/logo.png" alt="Vue.js Logo" width="25"/>Vue.js, 
+Tailwind CSS  
+**백엔드:** <img src="https://www.djangoproject.com/m/img/logos/django-logo-negative.svg" alt="Django Logo" width="50"/>Django, RESTful API  
+**데이터베이스:** <img src="https://upload.wikimedia.org/wikipedia/en/d/dd/MySQL_logo.svg" alt="MySQL Logo" width="50"/>MySQL  
+**배포:** <img src="https://upload.wikimedia.org/wikipedia/en/f/f4/Docker_logo.svg" alt="Docker Logo" width="50"/>Docker  
 
-### 문서 작성자: 예) 김준우, 오지원
+### 문서 작성자:
+너구리37
 
 ## 📝 고객 요구사항 정리
+1. 모바일 환경에서의 사용성 중심
+2. 신발의 사진이 잘 보이도록 작업
+3. 장바구니에 상품을 추가할 때, 실시간으로 상품 개수가 표시
+4. 작업 결과물을 확인할 수 있는 테스트 URL 제공
 
 ## 📋 기능 목록
 - 상품 리스트
 - 상품을 2개의 컬럼으로 보여준다.
   - `<ProductList />`
+- 이미지가 포함된 상품 카드
+- 상품 카드에서 담기 버튼과 담김 상태 변화
+- 담기 버튼을 누른 후, 헤더에 담긴 상품의 갯수 변화
 
 
 

diff --git a/docs/01.products_requirements_checklist.md b/docs/01.products_requirements_checklist.md
@@ -1,7 +1,10 @@
 # 상품 목록 페이지 요구사항 체크리스트
 
 # 기본 정보
-- [ ] 기본 정보에 프로젝트명, 사용하는 기술, 그리고 문서 작성자 표기
+- [ ] 패션 쇼핑몰 상품 목록 페이지 (모바일)
+- [ ] 프론트 엔드: React.js
+- [ ] 백엔드: Django
+- [ ] 문서 작성자: 너구리37
 
 # 고객사 요구사항 분석 체크리스트
 - [ ] 모바일 UI

diff --git a/docs/01.products_review.md b/docs/01.products_review.md
@@ -11,13 +11,20 @@
 ## 요구사항에 따른 기능 동작 확인
 
 ### 1. 모바일 환경 구성
-예) 모바일 사파리, 삼성 브라우저에서 접속시 정상 동작함을 확인할 수 있습니다.
+사파리/삼성 브라우저, Chrome에서 접속시 정상 동작함을 확인할 수 있습니다.
+사파리 브라우저에서 접속 시에 폰트가 다르게 보이는 이슈를 조치했습니다.
+아이패드나 폴더블같은 화면의 크기가 다른 모바일 환경에서도 디스플레이 크기에 맞춰 조절됩니다.
 
 ### 2. 신발 상품 사진
+상품의 이미지의 이미지가 돋보이게 되어있습니다.
+상품의 이미지 아래에 가격이 표시되어있습니다.
+상품을 클릭하면 상품의 상세페이지로 들어갈 수 있습니다.
 
-### 3. 장바구니 담기 기능
 
-### 4. 배포 URL
+### 3. 장바구니 담기 기능
+상품의 담기 버튼을 누르면 상단 헤더에 표시되는 숫자가 1 증가합니다.
+장바구니를 누르면 선택한 상품들을 살펴볼 수 있습니다.
 
 
-... 세부적인 기능을 추가로 작성해주세요.
+### 4. 배포 URL
+배포 URL은 어떻게 하지...
diff --git a/docs/02.payments_docs.md b/docs/02.payments_docs.md
@@ -2,22 +2,21 @@
 
 ## 프로젝트 개요
 
-- 프로젝트 목표와 주요 기능에 대한 간략한 설명
-- 참여한 팀원
+- 이 결제 모듈은 카드를 등록하고 결제할 수 있게 도와주는 모달 컴포넌트입니다.
+- 참여한 팀원: 너구리37
+
 
-예시: 이 결제 모듈은 카드를 등록하고 결제할 수 있게 도와주는 모달 컴포넌트입니다.
 
 ## 개발 환경
 
 사용한 프레임워크, 라이브러리, 언어 등
 
-예시: React 17.0, JavaScript ES6
+React 17.0, Java 17, Github Actions
 
 ## 설치 및 실행 방법
 
 프로젝트를 로컬에서 실행하기 위한 설치 방법과 명령어
 
-예시:
 ```
 npm install
 npm start
@@ -27,11 +26,17 @@ npm start
 
 주요 컴포넌트들의 구조와 역할
 
+- `ProductList`: 상품 목록을 보여줍니다.
+- `ProductCard`: 각 상품의 정보를 보여줍니다.
+- `ProductImage`: 각 상품의 이미지를 보여줍니다.
+- `ProductPrice`: 각 상품의 가격을 표시합니다. 
+- `AddCartButton`: 장바구니 추가 버튼을 표시합니다.
+
+
 ## 테스트 방법
 
 테스트 케이스 및 실행 방법
 
-예시:
 ```
 npm test
 ```
@@ -40,7 +45,8 @@ npm test
 
 버그, 해결하지 못한 문제, 추가하고 싶은 기능 등
 
-예시: 현재 safari 브라우저에서 접속시에는 폰트가 다르게 보이는 이슈가 있습니다.
+현재 safari 브라우저에서 접속시에는 폰트가 다르게 보이는 이슈가 있습니다.
+연속적으로 새로고침을 하며 장바구니에 상품을 담으면 상품이 갯수가 아닌 따로따로 보이는 이슈가 있습니다.
 
 ## 추가 항목
 

diff --git a/docs/02.payments_requirements.md b/docs/02.payments_requirements.md
@@ -2,19 +2,29 @@
 
 ## 📌 기본 정보
 ### 프로젝트명: 
-예) 패션 쇼핑몰 경제 모듈
+패션 쇼핑몰 경제 모듈
 
 ### 사용하게 될 기술: 
-예) React
+프론트엔드: Figma, React, BootStrap
+백엔드: Django
 
 ### 문서 작성자: 
-예) 김준우, 오지원
+너구리37
 
 ## 📝 고객 요구사항 정리
+온라인 결제기능 탑재해야한다.
+사용자는 신용카드를 등록할 수 있다.
+결제모듈의 보안을 철저히 대비해야한다.
+사용자의 카드 뒷면 8자리와 보안코드의 정보는 숨김처리해야한다.
+사용자는 여러 카드를 등록할 수 있다.
 
 ## 📋 기능 목록
 - 카드 번호 input
   - `<CardNumberInput />`
+- 입력한 카드 이름
+  - `<CardName />`
+- 카드번호 보안처리
+  - `<CardNumberMasking />`
 
 
 

diff --git a/docs/02.payments_review.md b/docs/02.payments_review.md
@@ -2,7 +2,17 @@
 
 ## 고객사 요구사항
 > 이메일에 작성된 요구 사항 외에 피그마 시안에 있는 세부적인 요구사항을 추가해주시면 됩니다.
+1. 온라인 결제기능 탑재해야한다.
+2. 사용자는 신용카드를 등록할 수 있다.
+3. 결제모듈의 보안을 철저히 대비해야한다.
+4. 사용자의 카드 뒷면 8자리와 보안코드의 정보는 숨김처리해야한다.
+5. 사용자는 여러 카드를 등록할 수 있다.
 
 ## 요구사항에 따른 기능 동작 확인
+1. KG이니시스, 카카오페이, 토스페이먼츠와 같은 결제 대행사와 연동하여 온라인 결제기능을 탑재했습니다.
+2. 사용자가 카드번호, CVC 등을 등록하여 신용카드를 등록하고 사용할 수 있다.
+3. 암호화, 인증절차, 세션 보안/쿠키 보안 등을 통해서 보안을 대비했습니다.
+4. 비밀번호 해싱을 통해서 보안코드와 카드 뒷면 8자리의 정보를 고정된 길이의 무작위 문자열로 변경해서 숨겼습니다.
+5. 개인마다 등록가능한 카드를 5개로 설정하여 여러 카드를 등록할 수 있도록 했습니다.
 
 > ... 세부적인 기능을 추가로 작성해주세요.
diff --git a/docs/03.cart_docs.md b/docs/03.cart_docs.md
@@ -3,33 +3,43 @@
 ## 프로젝트 개요
 
 - 프로젝트 목표와 주요 기능에 대한 간략한 설명
-- 참여한 팀원
+- 패션 쇼핑몰 장바구니 페이지
+  - 장바구니에 상품을 나열
+  - 금액은 상품의 가격, 배송비, 상품 갯수에 따른 총 가격으로 정리되어 표시
+- 참여한 팀원: 너구리37
 
 ## 개발 환경
 
-사용한 프레임워크, 라이브러리, 언어 등
-
-예시: React 17.0, JavaScript ES6
+React 17.0, JavaScript ES6, Storybook
 
 ## 설치 및 실행 방법
 
-프로젝트를 로컬에서 실행하기 위한 설치 방법과 명령어
-
-예시:
 ```
-npm install
+npm instal
 npm start
 ```
 
 ## 컴포넌트 구조
+- 장바구니 상품
+  - `<CardItem />`
+  - 장바구니에 담긴 상품의 이미지, 이름, 가격, 수량을 표시하고 수량 조절·삭제 기능 제공
+
+- 장바구니 목록
+  - `<CardList />`
+  - 장바구니에 담긴 모든 상품 목록을 나열
 
-주요 컴포넌트들의 구조와 역할
+- 장바구니 총금액
+  - `<CardSummary />`
+  - 상품 갯수, 상품의 가격, 배송비 등을 합산한 결제 예정 금액 등을 표시
+
+- 배송지 선택
+  - `<ShippingInfo />`
+  - 배송지 선택 및 배송지 변경
 
 ## 테스트 방법
 
 테스트 케이스 및 실행 방법
 
-예시:
 ```
 npm test
 ```
@@ -40,6 +50,5 @@ npm test
 
 ## 추가 항목
 
-문서화에 추가하고 싶은 기타 내용
-
+쿠폰코드를 입력하는 컴포넌트를 추가하고 싶음
 예시: 참고한 자료 등