diff --git a/README.md b/README.md index 53798b2..a66d688 100644 --- 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 index a8721c7..bd90150 100644 --- 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 index a538395..57c95e5 100644 --- a/docs/01.products_docs.md +++ b/docs/01.products_docs.md @@ -2,22 +2,21 @@ ## 프로젝트 개요 -- 프로젝트 목표와 주요 기능에 대한 간략한 설명 -- 참여한 팀원 - -예시: 이 상품 목록 페이지는 고객에게 다양한 상품을 표시하고, 상품을 선택하여 장바구니에 추가할 수 있는 기능을 제공합니다. +- 이 상품 목록페이지는 고객에게 이미지와 함께 다양한 상품을 표시하고, 상품을 선택하여 장바구니에 추가할 수 있는 기능을 제공합니다. +- 고완석 ## 개발 환경 -사용한 프레임워크, 라이브러리, 언어 등 - -예시: React 17.0, JavaScript ES6 +**프론트 엔드:** React LogoReact.js, +Vue.js LogoVue.js, +Tailwind CSS +**백엔드:** Django LogoDjango, RESTful API +**배포:** Github LogoGithub Pages, Netlify ## 설치 및 실행 방법 프로젝트를 로컬에서 실행하기 위한 설치 방법과 명령어 -예시: ``` npm install npm start @@ -25,18 +24,15 @@ 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 index 75723e0..1cc22a1 100644 --- a/docs/01.products_requirements.md +++ b/docs/01.products_requirements.md @@ -2,19 +2,32 @@ ## 📌 기본 정보 ### 프로젝트명: -예) 패션 쇼핑몰 상품 목록 페이지 (모바일) +패션 쇼핑몰 상품 목록 페이지 (모바일) ### 사용하게 될 기술: -예) React +**프론트 엔드:** React LogoReact.js, +Vue.js LogoVue.js, +Tailwind CSS +**백엔드:** Django LogoDjango, RESTful API +**데이터베이스:** MySQL LogoMySQL +**배포:** Docker LogoDocker -### 문서 작성자: 예) 김준우, 오지원 +### 문서 작성자: +너구리37 ## 📝 고객 요구사항 정리 +1. 모바일 환경에서의 사용성 중심 +2. 신발의 사진이 잘 보이도록 작업 +3. 장바구니에 상품을 추가할 때, 실시간으로 상품 개수가 표시 +4. 작업 결과물을 확인할 수 있는 테스트 URL 제공 ## 📋 기능 목록 - 상품 리스트 - 상품을 2개의 컬럼으로 보여준다. - `` +- 이미지가 포함된 상품 카드 +- 상품 카드에서 담기 버튼과 담김 상태 변화 +- 담기 버튼을 누른 후, 헤더에 담긴 상품의 갯수 변화 diff --git a/docs/01.products_requirements_checklist.md b/docs/01.products_requirements_checklist.md index f5bef31..427af17 100644 --- 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 index 97f58ff..6bfa3c6 100644 --- 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 index 7c21803..651beab 100644 --- 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 index e2838ee..1bb144e 100644 --- a/docs/02.payments_requirements.md +++ b/docs/02.payments_requirements.md @@ -2,19 +2,29 @@ ## 📌 기본 정보 ### 프로젝트명: -예) 패션 쇼핑몰 경제 모듈 +패션 쇼핑몰 경제 모듈 ### 사용하게 될 기술: -예) React +프론트엔드: Figma, React, BootStrap +백엔드: Django ### 문서 작성자: -예) 김준우, 오지원 +너구리37 ## 📝 고객 요구사항 정리 +온라인 결제기능 탑재해야한다. +사용자는 신용카드를 등록할 수 있다. +결제모듈의 보안을 철저히 대비해야한다. +사용자의 카드 뒷면 8자리와 보안코드의 정보는 숨김처리해야한다. +사용자는 여러 카드를 등록할 수 있다. ## 📋 기능 목록 - 카드 번호 input - `` +- 입력한 카드 이름 + - `` +- 카드번호 보안처리 + - `` diff --git a/docs/02.payments_review.md b/docs/02.payments_review.md index 6df03ae..245a7e0 100644 --- 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 index 898806b..9f7368f 100644 --- 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 ``` ## 컴포넌트 구조 +- 장바구니 상품 + - `` + - 장바구니에 담긴 상품의 이미지, 이름, 가격, 수량을 표시하고 수량 조절·삭제 기능 제공 + +- 장바구니 목록 + - `` + - 장바구니에 담긴 모든 상품 목록을 나열 -주요 컴포넌트들의 구조와 역할 +- 장바구니 총금액 + - `` + - 상품 갯수, 상품의 가격, 배송비 등을 합산한 결제 예정 금액 등을 표시 + +- 배송지 선택 + - `` + - 배송지 선택 및 배송지 변경 ## 테스트 방법 테스트 케이스 및 실행 방법 -예시: ``` npm test ``` @@ -40,6 +50,5 @@ npm test ## 추가 항목 -문서화에 추가하고 싶은 기타 내용 - +쿠폰코드를 입력하는 컴포넌트를 추가하고 싶음 예시: 참고한 자료 등 diff --git a/docs/03.cart_requirements.md b/docs/03.cart_requirements.md index af2ad19..2392abd 100644 --- a/docs/03.cart_requirements.md +++ b/docs/03.cart_requirements.md @@ -2,14 +2,29 @@ ## 📌 기본 정보 ### 프로젝트명: -예) 패션 쇼핑몰 장바구니 페이지 +패션 쇼핑몰 장바구니 페이지 ### 사용하게 될 기술: -예) React +React, Spring, Github Actions ### 문서 작성자: -예) 김준우, 오지원 +너구리37 ## 📝 고객 요구사항 정리 +1. 금액을 정확하게 계산해서 보여주세요. +2. 금액은 상품의 가격, 배송비, 상품 갯수에 따른 총 가격으로 정리되어 표시해야합니다. +3. 총 금액이 10만원 미만이라면 배송비 3000원, 10만원 이상은 배송비 무료임을 명시해야한다. +4. 뒤로가기 버튼을 이용해 메인 상품 목록 페이지로 이동할 수 있다. +5. 결제하기 버튼을 누르면, 결제 모듈을 모달로 사용할 수 있도록 연동해주세요 ## 📋 기능 목록 +- 상품 정보 + - `` +- 상품 갯수 + - `` +- 상품 금액 + - `` +- 배송비 + - `` +- 총금액 + - `` diff --git a/docs/03.cart_review.md b/docs/03.cart_review.md index e88a846..32d0f9f 100644 --- a/docs/03.cart_review.md +++ b/docs/03.cart_review.md @@ -1,8 +1,36 @@ # 장바구니 페이지 리뷰 ## 고객사 요구사항 -> 이메일에 작성된 요구 사항 외에 피그마 시안에 있는 세부적인 요구사항을 추가해주시면 됩니다. +1. 금액을 정확하게 계산해서 보여주세요. +2. 금액은 상품의 가격, 배송비, 상품 갯수에 따른 총 가격으로 정리되어 표시해야합니다. +3. 장바구니에서 상품의 목록을 확인할 수 있습니다. +4. 장바구니에서 상품의 이미지, 가격, 갯수를 확인할 수 있습니다. +5. 총 금액이 10만원 미만이라면 배송비 3000원, 10만원 이상은 배송비 무료임을 명시해야한다. +6. 뒤로가기 버튼을 이용해 메인 상품 목록 페이지로 이동할 수 있다. +7. 결제하기 버튼을 누르면, 결제 모듈을 모달로 사용할 수 있도록 연동해주세요 ## 요구사항에 따른 기능 동작 확인 -> ... 세부적인 기능을 추가로 작성해주세요. +- 장바구니 상품 + - `` + - 장바구니에 담긴 상품의 이미지, 이름, 가격, 수량을 표시하고 수량 조절·삭제 기능 제공 + +- 장바구니 목록 + - `` + - 장바구니에 담긴 모든 상품 목록을 나열 + +- 장바구니 총금액 + - `` + - 상품 갯수, 상품의 가격, 배송비 등을 합산한 결제 예정 금액 등을 표시 + +- 배송지 선택 + - `` + - 배송지 선택 및 배송지 변경 + +- 뒤로가기 버튼 + - `` + - 이전페이지(메인 상품 목록 페이지)로 이동 + +- 결제하기 버튼 + - `` + - 결제 절차(결제 페이지 또는 결제 API 호출)로 이동 diff --git a/docs/04.shopping_docs.md b/docs/04.shopping_docs.md index 0d4be97..d331a28 100644 --- a/docs/04.shopping_docs.md +++ b/docs/04.shopping_docs.md @@ -3,34 +3,60 @@ ## 프로젝트 개요 - 프로젝트 목표와 주요 기능에 대한 간략한 설명 + - 모바일 환경에 적합한 신발 쇼핑몰 페이지 - 참여한 팀원 + - 너구리37 ## 개발 환경 -사용한 프레임워크, 라이브러리, 언어 등 - -예시: React 17.0, JavaScript ES6 +React 17.0, JavaScript ES6, Github Actions, ## 설치 및 실행 방법 프로젝트를 로컬에서 실행하기 위한 설치 방법과 명령어 -예시: ``` npm install npm start ``` ## 프로젝트 구조 +- 상품 목록페이지 + - `` +- 장바구니 페이지 + - `` +- 결제 페이지 + - `` +- 결제 상페 페이지 + - `` +- 상품 상세 페이지 + - `` +- 테스트 URL 제공 + - `` ## 주요 함수와 기능 +- 상품 컴포넌트 + - ``: 상품 목록을 보여줍니다. + - ``: 각 상품의 정보를 보여줍니다. + - ``: 각 상품의 이미지를 보여줍니다. + - ``: 각 상품의 가격을 표시합니다. +- 결제 모듈 컴포넌트 + - ``: 카드 번호를 입력할 수 있습니다. + - ``: 입력한 카드 이름을 보여줍니다. + - ``: 카드번호를 보안처리합니다. +- 장바구니 컴포넌트 + - ``: 장바구니에 담긴 상품의 정보 보여줍니다. + - ``: 장바구니에 담긴 상품의 갯수를 보여줍니다. + - ``: 장바구니에 담긴 각 상품의 금액을 보여줍니다. + - ``: 배송비를 표시합니다.(10만원 이상 무료배송) + - ``: 장바구니에 담긴 모든 상품의 총 금액을 보여줍니다. + ## 테스트 방법 테스트 케이스 및 실행 방법 -예시: ``` npm test ``` diff --git a/docs/04.shopping_requirements.md b/docs/04.shopping_requirements.md index 9c2f96a..db78657 100644 --- a/docs/04.shopping_requirements.md +++ b/docs/04.shopping_requirements.md @@ -2,14 +2,33 @@ ## 📌 기본 정보 ### 프로젝트명: -예) 패션 쇼핑몰 연동 +패션 쇼핑몰 연동 -### 사용하게 될 기술: -예) React +### 사용하게 될 기술: +React, Spring ### 문서 작성자: -예) 김준우, 오지원 +너구리37 ## 📝 고객 요구사항 정리 +1. **페이지 연동:** 상품 목록, 장바구니, 결제 등 모든 페이지에서 이동이 자연스럽게 이루어져야합니다. + - 상품 목록에서 장바구니로 이동하면서도 사용자가 선택한 상품 데이터가 유지되어야함 +2. **데이터 일관성:** 페이지 간 이동이 있어도 데이터가 일관성 있게 유지되어야한다. + - 상품 목록에서 상품을 선택하여 장바구니에 담았을 때, + 다른 페이지에서도 그 상품이 장바구니에 담겨 있음을 명확히 보여줘야함 +3. **상세 페이지 추가:** 상품을 클릭했을 때, 나타나는 상세페이지에선 상품에 대한 상세 정보와 관련 상품등이 보여야합니다. +4. **테스트 URL 제공:** 작업하시면서 중간에 테스트 URL를 제공하여 고객이 직업 사용해보고 피드백을 줄 수 있게 해야합니다. ## 📋 기능 목록 +- 상품 목록페이지 + - `` +- 장바구니 페이지 + - `` +- 결제 페이지 + - `` +- 결제 상페 페이지 + - `` +- 상품 상세 페이지 + - `` +- 테스트 URL 제공 + - `` diff --git a/docs/04.shopping_review.md b/docs/04.shopping_review.md index d068fe6..a577031 100644 --- a/docs/04.shopping_review.md +++ b/docs/04.shopping_review.md @@ -1,8 +1,46 @@ # 쇼핑몰 연동 리뷰 ## 고객사 요구사항 -> 이메일에 작성된 요구 사항 외에 피그마 시안에 있는 세부적인 요구사항을 추가해주시면 됩니다. + +**상품목록** +- 모바일 환경에서의 사용성이 좋아합니다. +- 신발의 사진이 잘 보여야합니다. +- 장바구니에 상품을 추가할 때, 실시간으로 상품 개수가 표시되야합니다. +- 작업 결과물을 확인할 수 있는 테스트 URL 제공해야합니다. + +**결제모듈** +- 온라인 결제기능 탑재해야한다. +- 사용자는 신용카드를 등록할 수 있다. +- 결제모듈의 보안을 철저히 대비해야한다. +- 사용자의 카드 뒷면 8자리와 보안코드의 정보는 숨김처리해야한다. +- 사용자는 여러 카드를 등록할 수 있다. + +**장바구니** +- 금액을 정확하게 계산해서 보여주세요. +- 금액은 상품의 가격, 배송비, 상품 갯수에 따른 총 가격으로 정리되어 표시해야합니다. +- 총 금액이 10만원 미만이라면 배송비 3000원, 10만원 이상은 배송비 무료임을 명시해야한다. +- 뒤로가기 버튼을 이용해 메인 상품 목록 페이지로 이동할 수 있다. +- 결제하기 버튼을 누르면, 결제 모듈을 모달로 사용할 수 있도록 연동해주세요 + ## 요구사항에 따른 기능 동작 확인 +**상품목록** +- 모바일 환경에서 사용하기 적합하게 제작했습니다. +- 신발의 사진을 돋보이도록 제작했습니다. +- 장바구니에 상품을 추가하면 "현재 ~개의 상품이 담겨있습니다."라는 문서를 추가하여 갯수를 확인할 수 있습니다. +- 작업 결과물을 확인할 수 있도록 테스트 URL를 제공했습니다. + +**결제모듈** +- 온라인 결제기능 탑재해야한다. +- 사용자는 신용카드를 등록하여 사용할 수 있습니다. +- PG사(결제 대행사)와 연동하여 카드/계좌번호같이 결제정보는 암호화 및 저장이 금지되었고 +고객의 이름, 주소, 연락처 등의 정보는 암호화/접근제어하여 보안을 철저히 했습니다. +- 사용자의 카드 뒷면 8자리와 보안코드의 정보는 숨김 처리되었습니다. +- 사용자는 여러 카드를 등록할 수 있습니다. + +**장바구니** +- 각 상품의 가격을 명시하여 장바구니에서 정확한 가격을 확인할 수 있습니다. +- 상품의 가격, 배송비, 상품 갯수를 총합하여 총 금액을 표시하고 있습니다. +- 뒤로가기 버튼을 이용해 메인 상품 목록 페이지로 이동할 수 있습니다. +- 결제하기 버튼을 누르면, 결제 모듈로 이동하여 결제할 수 있습니다. -> ... 세부적인 기능을 추가로 작성해주세요. diff --git a/docs/timeline_retrospective.md b/docs/timeline_retrospective.md index 21f4372..24a413b 100644 --- a/docs/timeline_retrospective.md +++ b/docs/timeline_retrospective.md @@ -3,84 +3,84 @@ > 아래는 타임라인 회고의 예시입니다. 모든 이벤트에 대해 영향, 통찰, 액션 플랜을 작성할 필요는 없습니다. 타임라인을 되돌아보며 나에게 중요했던 사건 중심으로 회고를 작성해주세요. ## 1단계: 프로젝트 기간 동안 중요 이벤트 작성해보기 -- 1월 10일: 첫 스프린트 시작 -- 1월 11일: 고객사 미팅 -- 1월 12일: 상품 목록 페이지 요구사항 분석서 작성 -- 1월 14일: 상품 목록 페이지 배포 -- 1월 15일: 첫 코드 리뷰 및 리팩터링 -- 1월 18일: 프로젝트 회고 +- 7월 7일: 첫 스프린트 시작 +- 7월 9일: 고객사 미팅 +- 7월 9일: 상품 목록 페이지 요구사항 분석서 작성 +- 7월 10일: 상품 목록 페이지 배포 +- 7월 11일: 첫 코드 리뷰 및 리팩터링 +- 7월 11일: 프로젝트 회고 ## 2단계: 이벤트별 영향력 작성 -- 1월 10일: 첫 스프린트 시작 +- 7월 7일: 첫 스프린트 시작 - 영향: 프로젝트의 초석을 다지며 팀의 초점과 우선 순위 설정. -- 1월 11일: 고객사 미팅 +- 7월 9일: 고객사 미팅 - 영향: 고객사 미팅을 통해 프로젝트 방향 재조정 및 중요 요구사항 파악. -- 1월 12일: 상품 목록 페이지 요구사항 분석서 작성 +- 7월 9일: 상품 목록 페이지 요구사항 분석서 작성 - 영향: 요구사항 분석서를 통해 프로젝트 범위 및 팀의 작업 방향 설정. -- 1월 14일: 상품 목록 페이지 배포 +- 7월 10일: 상품 목록 페이지 배포 - 영향: 제품의 첫 배포로 프로젝트 진행 상황과 성공적인 결과 확인. -- 1월 15일: 첫 코드 리뷰 및 리팩터링 +- 7월 11일: 첫 코드 리뷰 및 리팩터링 - 영향: 코드 리뷰를 통해 코드 품질 향상 및 팀의 기술적 역량 강화. -- 1월 18일: 프로젝트 회고 +- 7월 11일: 프로젝트 회고 - 영향: 프로젝트 전반의 성과 및 문제점 평가. ## 3단계: 개인적 인사이트 도출 -- 1월 10일: 첫 스프린트 시작 +- 7월 7일: 첫 스프린트 시작 - 영향: 프로젝트의 초석을 다지며 팀의 초점과 우선 순위 설정. - 통찰: 스프린트의 시작이 팀 동기부여에 중요한 역할을 함을 인식. -- 1월 11일: 고객사 미팅 +- 7월 9일: 고객사 미팅 - 영향: 고객사 미팅을 통해 프로젝트 방향 재조정 및 중요 요구사항 파악. - 통찰: 고객의 피드백과 요구사항이 프로젝트의 성공에 결정적임을 인식. -- 1월 12일: 상품 목록 페이지 요구사항 분석서 작성 +- 7월 9일: 상품 목록 페이지 요구사항 분석서 작성 - 영향: 요구사항 분석서를 통해 프로젝트 범위 및 팀의 작업 방향 설정. - 통찰: 분석서 작성 과정에서 프로젝트의 중요 세부사항에 대한 팀의 이해도 증진. -- 1월 14일: 상품 목록 페이지 배포 +- 7월 10일: 상품 목록 페이지 배포 - 영향: 제품의 첫 배포로 프로젝트 진행 상황과 성공적인 결과 확인. - 통찰: 제때 배포하는 것이 프로젝트의 모멘텀 유지에 중요함을 인식. -- 1월 15일: 첫 코드 리뷰 및 리팩터링 +- 7월 11일: 첫 코드 리뷰 및 리팩터링 - 영향: 코드 리뷰를 통해 코드 품질 향상 및 팀의 기술적 역량 강화. - 통찰: 리팩터링 과정이 프로젝트의 품질 및 유지보수에 중요하다는 것을 인식. -- 1월 18일: 프로젝트 회고 +- 7월 11일: 프로젝트 회고 - 영향: 프로젝트 전반의 성과 및 문제점 평가. - 통찰: 회고를 통해 팀의 성장 포인트 및 개선 필요 영역 확인. ## 4단계: 액션 플랜 수립 -- 1월 10일: 첫 스프린트 시작 +- 7월 7일: 첫 스프린트 시작 - 영향: 프로젝트의 초석을 다지며 팀의 초점과 우선 순위 설정. - 통찰: 스프린트의 시작이 팀 동기부여에 중요한 역할을 함을 인식. - 액션 플랜: 미래 스프린트 계획을 보다 체계적으로 수립하고 명확한 목표 설정하기. -- 1월 11일: 고객사 미팅 +- 7월 9일: 고객사 미팅 - 영향: 고객사 미팅을 통해 프로젝트 방향 재조정 및 중요 요구사항 파악. - 통찰: 고객의 피드백과 요구사항이 프로젝트의 성공에 결정적임을 인식. - 액션 플랜: 향후 고객사와의 미팅을 정기적으로 개최하여 지속적인 피드백을 받고 프로젝트 조정하기. -- 1월 12일: 상품 목록 페이지 요구사항 분석서 작성 +- 7월 9일: 상품 목록 페이지 요구사항 분석서 작성 - 영향: 요구사항 분석서를 통해 프로젝트 범위 및 팀의 작업 방향 설정. - 통찰: 분석서 작성 과정에서 프로젝트의 중요 세부사항에 대한 팀의 이해도 증진. - 액션 플랜: 앞으로의 프로젝트에서는 요구사항 분석서를 더 상세하게 작성하여 명확한 지침 제공하기. -- 1월 14일: 상품 목록 페이지 배포 +- 7월 10일: 상품 목록 페이지 배포 - 영향: 제품의 첫 배포로 프로젝트 진행 상황과 성공적인 결과 확인. - 통찰: 제때 배포하는 것이 프로젝트의 모멘텀 유지에 중요함을 인식. - 액션 플랜: 추후 배포 과정에서의 시간 관리와 효율성을 개선하기 위한 방안 마련하기. -- 1월 15일: 첫 코드 리뷰 및 리팩터링 +- 7월 11일: 첫 코드 리뷰 및 리팩터링 - 영향: 코드 리뷰를 통해 코드 품질 향상 및 팀의 기술적 역량 강화. - 통찰: 리팩터링 과정이 프로젝트의 품질 및 유지보수에 중요하다는 것을 인식. - 액션 플랜: 정기적인 코드 리뷰 및 리팩터링 세션을 통해 코드의 질을 지속적으로 관리하기. -- 1월 18일: 프로젝트 회고 +- 7월 11일: 프로젝트 회고 - 영향: 프로젝트 전반의 성과 및 문제점 평가. - 통찰: 회고를 통해 팀의 성장 포인트 및 개선 필요 영역 확인. - 액션 플랜: 발견된 문제점을 해결하고, 팀의 강점을 더 발전시키기 위한 구체적인 전략 수립하기.