멋쟁이사자처럼 프론트엔드 스쿨 4기 4조의 FINAL PROJECT로 진행한 Karly(칼리) 입니다.
실제 온라인 쇼핑몰인 컬리(Kurly)를 참고하였습니다.
프로젝트 기간: 2023.03.09 ~ 2023.03.28 (모든 팀원 참여)
추가 작업 기간: 2023.03.29 ~ 2023.04.14 (김종엽,서미영,서석원 참여)
|
|
|
|
|
| 최보영 | 서석원 | 서미영 | 김종엽 | 문진기 |
- Sprint1:
Home(메인 페이지)/SingIn(로그인 페이지)/SignUp(회원가입 페이지) - Sprint2:
ProductDetail(제품 상세 페이지)/ProductList(제품 나열 페이지)/Cart(장바구니 페이지)
저희조는 작업을 Sprint1과 Sprint2로 나눈 뒤, Sprint1작업이 모두 끝난 후, Sprint2로 들어갔습니다.
각 Sprint마다 각자 역할을 맡아서 진행했습니다.
저희조는 처음에 공용 컴포넌트들을 먼저 파악하고 시작하려고 노력했습니다.
공용컴포넌트들은 components 폴더안에 모아두었습니다.
- 데일리 스크럼 회의 진행
- 페이지 타이틀 컴포넌트(PageTitle)
- 라디오 버튼 컴포넌트(RadioButton)
SignUp- 회원가입 컴포넌트 마크업
ProductDetail- 상품정보(ProductDetail 페이지 최상단)
- 상품설명
- 상세정보
- 프로젝트 초기 세팅(해당 카테고리 참고)
- 웹팩 빌드툴 개발
- 라우팅 세팅
- 스토리북 연결
- 다크 필터 컴포넌트(DarkFilter)
Home- 메인 캐로셀
- 상품 캐로셀
- 공용 상품 카드
- 장바구니 모달(CartModal)
- 공용 카운터 컴포넌트(Counter)
SignUp- 컴포넌트 분리
- 유효성 검사 (정규 표현식)
- 약관동의
- 주소 검색 (공용 커스텀 훅)
- 이메일 중복 검사 (파이어베이스)
- 회원가입 (파이어베이스)
ProductDetail- 네비게이션 구현
Cart- 공용 아코디언 컴포넌트(Accordion)
- 상품 아코디언 구현
- 주소 검색
- 상품 금액 계산 로직 구현
- 경고창 컴포넌트(AlertBox)
- 투명 필터 컴포넌트(TransparentFilter)
- 스크롤 이동 컴포넌트(ScrollToTop)
Common(모든페이지)- 푸터(Footer)
Home- 메인 모달창(MainModal)
- '오늘 하루 안보기' 쿠키 관리 로직
- 라인베너(LineBanner)
ProductDetail- 상품문의
- 공용 Badge 컴포넌트(Badge)
- 공용 후기&문의작성 팝업창 컴포넌트(ProductDetailPopUp)
- 후기&문의작성에 대한 데이터를 파이어스토어에 넣고 가져오는 공용 커스텀 훅 구현(useDetailFireStore.js, useDetailCollection.js)
Common(모든페이지)- 헤더(Header)
ProductList- DB를 통한 필터 목록 구현 (로컬 DB로 작업 후, 파이어베이스를 사용하여 리팩토링)
- Firebase API에 따른 일괄 데이터 전송 및 Data Read 후, 조건에 맞는 개수를 가져오는 커스텀 훅 제작 (useRead.js , writeBatchData.js)
- 필터 조건에 맞는 상품리스트 렌더링 구현
- 브랜드별 가나다순 정렬 구현
- 조건부랜더링을 통한 ProductNotFound 컴포넌트 렌더링
- 페이지네이션 기능 구현
- 가격순 정렬 기능 구현
- 초기화 컴포넌트
- 신상품 배너 컴포넌트
- 문서 제목 변경 리액트 커스텀훅 제작(useDocumentTitle.js)
- 폼 인풋 컴포넌트(FormInput)
- 버튼 컴포넌트(Button)
SignIn- 로그인 페이지 구현
- 이메일/패스워드 로그인 유틸리티 훅(useCreateAuthUser.js)
- 로그인 인증 로직
ProductDetail- 상품후기
✅ 빌드툴 관리 - Webpack 기본 설정
✅ 빌드툴 관리 - Webpack 빌드 및 분석
✅ 패키지, 폴더
✅ 라우팅, 테스팅
✅ Gitmoji
| Emoji | Text | Description |
|---|---|---|
| ✨ | [feat] | 새롭게 만드는 코드(html,css,javascript 등 모두) |
| 🎨 | [modify] | 기존 코드 수정 |
| ⚡️ | [refactoring] | 리팩토링 |
| 🐛 | [fix] | 버그 문제 수정 |
| ✅ | [test] | 테스트 |
| 💄 | [style] | CSS수정 |
| 🔧 | [setting] | 환경 설정 |
| 📝 | [docs] | readme.md 등의 문서 수정 |
| 🔥 | [delete] | 파일이나 폴더 삭제 |
✅ Commit 컨벤션
- Gitmoji 확장프로그램 설치 후 사용- Gitmoji 카테고리에 해당되는 분류 클릭 후, [ 소문자 ] + 이슈내용 + #이슈번호
✅ 네이밍 컨벤션
- 이름을 통해 쓰임새를 알 수 있도록 한다. (20자 미만, 직관적으로)- 이름의 맨 앞이나 맨 뒤에 언더바(_)를 사용하지 않는다.
| 컴포넌트 | Pascal Case(파스칼 케이스) |
| image, svg | 단어 사이 -를 사용해 네이밍(ex. erase-check.svg) |
| 이벤트 핸들러 | on + 메소드명 + Handler |
| 변수, 함수, 인스턴스 | Camel Case(카멜 케이스) |
| 함수 이름 | '동사+명사' 구조로 네이밍(ex. makingItem(x) / makeItem, getItem, changeItem (o)) |
| Class, Constructor | Camel Case(카멜 케이스) |
| 상수 | Scream Snake Case (스크림 스네이크 케이스) |
✅ 코드 컨벤션
| Tab Depth (들여쓰기) |
기본 tab depth: 4 (유동적으로)
|
| Comment (주석) |
1) // : 기본 주석입니다. 2) //? : 의견을 묻는 주석 예시입니다. → 의견을 구해야하거나, 피드백을 구하려할때 사용해주세요. 3) //! : 주의해주세요 → 신경쓸 부분이나 중요한 이야기가 있을 때 사용해주세요. 4) 분류 주석 : 분류가 될만한 부분은 줄 주석으로 나눠주세요. (다음 확장 프로그램을 설치해주세요) - 확장프로그램: https://marketplace.visualstudio.com/items?itemName=stackbreak.comment-divider 
|
저희팀은 git branch 전략으로, git flow 방식을 선택했습니다.
main : 기준이 되는 branch로 제품을 배포하는 브랜치 입니다.
develop : 개발 branch로 개발자들이 이 브랜치를 기준으로 각자 작업한 기능들을 합(Merge)칩니다.
feature : 단위 기능을 개발하는 branch로 기능 개발이 완료되면 develop branch에 합(Merge)칩니다.
단위 기능을 개발하는 branch인 feature branch의 경우, 다음과 같은 형식으로 네이밍합니다.
feat/#이슈번호
디렉터리 구조 보기
├─.github
│ └─ISSUE_TEMPLATE
├─.storybook
├─build
│ └─static
├─public
│ └─assets
│ ├─cart
│ ├─common
│ ├─footer
│ ├─header
│ ├─main
│ ├─modal
│ ├─product
│ │ ├─bacon
│ │ ├─brownrice
│ │ ├─detergent
│ │ ├─jukkumi
│ │ ├─kangnam
│ │ ├─suncushion
│ │ ├─tangtang
│ │ └─ubuho
│ ├─product-detail
│ └─product-list
├─src
│ ├─app
│ ├─assets
│ │ ├─cart
│ │ ├─common
│ │ ├─footer
│ │ ├─header
│ │ ├─main
│ │ ├─modal
│ │ ├─product
│ │ │ ├─bacon
│ │ │ ├─brownrice
│ │ │ ├─detergent
│ │ │ ├─jukkumi
│ │ │ ├─kangnam
│ │ │ ├─suncushion
│ │ │ ├─tangtang
│ │ │ └─ubuho
│ │ ├─product-detail
│ │ └─product-list
│ ├─components
│ │ ├─Accordion
│ │ ├─AlertBox
│ │ │ ├─@hook
│ │ │ ├─@recoil
│ │ │ └─BtnType
│ │ │ ├─ConfirmAndCancel
│ │ │ └─OnlyConfirm
│ │ ├─Badge
│ │ ├─Button
│ │ ├─CartModal
│ │ ├─CartPopup
│ │ ├─Counter
│ │ │ └─@recoil
│ │ ├─DarkFilter
│ │ ├─Footer
│ │ ├─FormInput
│ │ ├─Header
│ │ │ ├─@recoil
│ │ │ ├─@recoilhooks
│ │ │ ├─HeaderIcon
│ │ │ ├─HeaderLogoContainer
│ │ │ ├─HeaderNav
│ │ │ ├─Member
│ │ │ ├─SearchInput
│ │ │ └─Topbanner
│ │ ├─PageTitle
│ │ ├─ProductCard
│ │ ├─ProductDetailPopUp
│ │ │ ├─PlaceholderInquiry
│ │ │ ├─PlaceholderReview
│ │ │ └─Secret
│ │ ├─RadioButton
│ │ ├─ScrollToTop
│ │ ├─StorybookExample
│ │ └─TransparentFilter
│ │ └─@recoil
│ ├─firebase
│ │ ├─auth
│ │ └─firestore
│ ├─hooks
│ ├─pages
│ │ ├─Cart
│ │ │ ├─Address
│ │ │ ├─CartAccordion
│ │ │ ├─PaymentPrice
│ │ │ └─PriceInfo
│ │ ├─Home
│ │ │ ├─Carousel
│ │ │ ├─LineBanner
│ │ │ └─MainModal
│ │ │ └─@recoil
│ │ ├─Layout
│ │ ├─NotFound
│ │ ├─ProductDetail
│ │ │ ├─@hook
│ │ │ ├─DetailInformation
│ │ │ ├─ProductDetailMenu
│ │ │ ├─ProductInformation
│ │ │ ├─ProductInquiry
│ │ │ │ ├─@recoil
│ │ │ │ └─ProductInquiryAccordion
│ │ │ ├─ProductReview
│ │ │ │ ├─@recoil
│ │ │ │ └─ProductReviewList
│ │ │ └─ProductThumbnail
│ │ ├─ProductList
│ │ │ ├─@recoil
│ │ │ └─@recoilHook
│ │ ├─SignIn
│ │ └─SignUp
│ │ ├─@hook
│ │ ├─@recoil
│ │ ├─Agreement
│ │ ├─BirthInput
│ │ ├─CheckBox
│ │ ├─GenderInput
│ │ ├─Input
│ │ └─SignUpAddress
│ ├─store
│ ├─stories
│ │ └─assets
│ ├─styles
│ ├─theme
│ ├─types
│ └─utils
└─webpack
├─loaders
└─plugins
✅ Home (메인 페이지)
|
1) 오늘 하루 안보기를 쿠키를 이용해서 구현했습니다. 사용자가 오늘 하루 안보기 버튼을 클릭하면, 쿠키가 생성되고, 만료시간으로 설정한 하루 뒤에, 쿠키는 사라집니다. |
|
|
1) 로그인 상태에 따라 버튼이 달라짐 2) 스크롤을 일정 위치 만큼 내릴 시, 헤더가 상단에 고정됩니다. 3) 카테고리 영역 hover 시, 리스트가 나타납니다. |
|
|
1) 메인 배너를 확인할 수 있습니다. 2) 자동으로 슬라이더가 넘어가며, 정지 버튼을 눌러 멈출 수 있습니다. |
|
|
1) 상품이 4개씩 보여집니다. 2) 상품 카드를 누를시 상품 디테일 페이지로 넘어갑니다. 3) 장바구니 버튼을 누를 시 장바구니 모달이 나타납니다. |
|
✅ SignIn (로그인 페이지)
|
1) 이메일 비밀번호를 입력하고, 로그인 버튼을 누르면 로그인 된 후 메인페이지로 이동합니다. |
|
|
1) 회원가입 버튼을 누르면 회원가입 페이지로 이동합니다. |
|
✅ SignUp (회원가입 페이지)
|
1) 이메일 폼 입력 형식을 체크합니다. 2) 회원가입을 하려면 반드시 중복 확인 버튼을 눌러 중복 검사를 해야합니다. 3) 이메일 폼 우측 중복 확인 버튼을 눌러 이미 가입한 이메일인지 확인합니다. 4) 중복된 이메일이 없으면 '사용가능한 이메일입니다.' 라고 알려주며 중복 확인 버튼이 비활성화 됩니다. 5) 다시 이메일을 입력하면 중복 확인 버튼이 재활성화 되며 다시 중복 검사를 해야 회원가입 할 수 있습니다. |
|
|
1) 비밀번호 폼 입력 형식을 체크합니다. (영문/숫자/특수문자(공백 제외)만 허용하며, 2개 이상 조합, 최소 10자리) 2) 비밀번호를 입력하면 비밀번호 확인도 검사가 진행됩니다. |
|
|
1) 비밀번호 확인이 비밀번호와 동일한지 검사합니다. |
|
|
1) 이름 폼 입력 형식을 체크합니다. (최소 2글자 이상) |
|
|
1) 휴대폰 폼 입력 형식을 체크합니다. (숫자 11자) |
|
|
1) 주소를 검색합니다. 2) 카카오 주소 api를 사용합니다. 3) 검색에 성공하면 검색된 주소를 보여줍니다. 4) 재검색 버튼을 눌러 다서 검색 가능합니다. |
|
|
1) 성별을 선택합니다. 기본 값은 '선택안함' 입니다. |
|
|
1) 년도는 1900 ~ 2099 사이의 숫자만 입력가능합니다. 1) 태어난 월은 1~12 사이의 숫자만 입력가능합니다. 1) 태어난 일은 1~31 사이의 숫자만 입력가능합니다. |
|
|
1) 회원가입을 하려면 필수 이용약관에 모두 동의해야합니다. 1) "전체 동의합니다." 체크박스를 체크하면 모든 약관을 체크합니다. |
|
✅ ProductDetail (제품 상세 페이지)
|
1) -/+버튼을 통해 상품 수량을 선택하고, 장바구니에 담기 버튼을 누르면 해당 상품이 장바구니(Cart)에 담깁니다. 2) count값이 1일때는 마이너스 버튼이 비활성화됩니다. 3) count값은 재고량을 초과할 수 없습니다. (오른쪽 gif속, 탱탱쫄면의 재고량은 11개입니다) |
|
|
1) 네비게이션 탭을 클릭하면 해당 영역으로 스크롤해서 이동합니다. 2) 후기탭의 경우, 후기의 개수가 중괄호안에 표시됩니다. 3) 스크롤 위치를 감지해서 탭의 스타일이 변합니다. 4) 네비게이션바는 스크롤 할 때, 작은헤더 밑에 고정됩니다. |
|
|
※ 상품후기/문의 작성 팝업창은 공용컴포넌트를 사용합니다. 1) 후기가 한개도 없다면, `따뜻한 첫 후기를 기다리고 있어요`라고 뜹니다. 2) 상품후기 작성하기의 경우, 보고 있는 상품의 상품명이 자동으로 제목에 설정됩니다. 3) 공지글의 경우, 아코디언으로 펼쳐볼 수 있습니다. 4) 후기글들은 최신순으로 정렬됩니다. 5) 후기글 작성자는 이름의 일부가 *로 가려져서 표시됩니다. |
|
|
※ 상품후기/문의 작성 팝업창은 공용컴포넌트를 사용합니다. 1) 상품문의 작성하기의 경우, 상품후기 작성하기와 다르게 비밀글로 설정할 수 있습니다. 2) 자신이 작성한 비밀글은 확인할 수 있습니다.(오른쪽 gif에서, 자신이 쓴 비밀글은 접근가능하나, 로그아웃한 순간 비밀글에 접근하지 못하는 걸 확인할 수 있습니다) 3) (다른사람이 작성한)비밀글에 접근하려고 했을때는 "비밀글입니다."라고 경고창이 뜹니다. 4) 상품문의의 경우, 모든 글들을 아코디언으로 펼쳐볼 수 있습니다. 5) 문의글들은 최신순으로 정렬됩니다. 6) 문의글 작성자는 이름의 일부가 *로 가려져서 표시됩니다. |
|
|
1) 후기의 경우 3개씩, 문의의 경우 6개씩 한 페이지에 보여집니다. 2) 첫 페이지일때는 이전페이지로 이동하는 버튼이 비활성화됩니다. 3) 마지막 페이지일때는 다음페이지로 이동하는 버튼이 비활성화됩니다. |
|
|
1) 로그인하지 않은 사용자가 상품후기/문의 작성을 하려는 경우, "로그인하셔야 본 서비스를 이용하실 수 있습니다."라는 경고창이 뜨고, 확인버튼을 누르면, 로그인 페이지로 이동합니다. |
|
|
1) 사용자가 특정 상품 페이지에서 리뷰나 문의 글을 등록할 때, 현재 보고 있는 상품의 product id가 파이어스토어에 함께 저장되게 하였고, 저장된 product id를 이용해, 선택한 상품에 대한 후기나 문의글들만 나열되게 구현하였습니다. 2) 오른쪽 gif에서, '소금빵'제품페이지에서 작성한 후기글들은 '브라우니'제품페이지에서는 볼 수 없는 걸 확인할 수 있습니다. |
|
✅ ProductList (제품 나열 페이지)
|
1) 스크롤을 일정 위치 만큼 내릴 시, 레이아웃이 고정됩니다. |
|
|
1) 체크박스 클릭시 조건에 맞는 상품들을 렌더링 및 필터 유형별 클릭 시, 중복적으로 조건에 맞는 상품들을 렌더링합니다. 2) 카테고리별로 필터링 가능합니다. 3) 브랜드별로 필터링 가능합니다. 4) 가격별로 필터링 가능합니다. 5) 혜택별로 필터링 가능합니다. 6) 유형별로 필터링 가능합니다. |
|
|
1) 초기화 버튼을 클릭하면, 필터링된 상태가 초기화됩니다. |
|
|
1) 조건에 맞는 상품이 없다면, '선택하신 필터와 일치하는 상품이 없습니다.'텍스트가 있는 레이아웃을 띄웁니다. |
|
|
1) 높은가격 또는 낮은가격순으로 정렬 가능합니다. |
|
|
1) 한 페이지당 15개의 상품을 보여줍니다. 2) 최대 10페이지까지 늘어납니다. |
|
✅ Cart (장바구니 페이지)
|
1) 장바구니 모달 또는 상품 페이지에서 상품을 수량과 함꼐 저장할 수 있습니다. 2) 수량은 1개 이상 상품의 재고 수량 이하 만큼 선택 할 수 있습니다. |
|
|
1) 장바구니 아코디언은 (냉장 식품, 냉동 식품, 상온 식품)으로 나누어져 있습니다. 2) 전체 선택 체크 박스로 상품 전체를 선택 할 수 있습니다. 3) 선택 삭제 버튼을 통해 선택된 상품들을 삭제 할 수 있습니다. |
|
|
1) 아코디언 내부에서 장바구니에 저장된 상품을 확인 할 수 있습니다. 2) 상품의 체크 여부에 따라 계산이 변경됩니다. 3) 체크 박스 체크후 아코디언의 선택 삭제 버튼을 누르거나, 상품 우측의 x 버튼을 눌러 상품을 삭제 할 수 있습니다. 4) Counter를 통해 상품의 수량을 조정할 수 있습니다. |
|
|
1) 주소 검색을 통해 배송지를 검색 할 수 있습니다. 2) 회원가입의 주소검색과 동일 방식으로 검색이 이루어집니다. |
|
|
1) 장바구니 상품 상태를 반영하여 결제 금액을 보여줍니다. 2) 로그인 상태에서 주문하기 버튼을 누를 수 있습니다 3) 주문하기 버튼을 누르면 결제한 정보와 금액을 알려줍니다. |
|
✅ Common(모든 페이지에 공통적으로 들어가는 부분)
|
1) 스크롤을 일정 위치 만큼 내릴 시, 상단 고정되는 반응형 헤더 레이아웃을 확인할 수 있습니다. |
|
|
1) 카테고리 영역을 HOVER 시, 카테고리 리스트들이 나옵니다. |
|
장바구니 모달창 웹접근성: LikeLion-FE-React-Project04#206메인 모달창 웹접근성: LikeLion-FE-React-Project04#212상품후기/문의 팝업창 웹접근성: LikeLion-FE-React-Project04#228경고창 웹접근성: LikeLion-FE-React-Project04#220
다음 순서대로 명령어를 입력해주세요.
npm install -g pnpm
pnpm install
npm start
데이터들을 파이어베이스로 관리하기 위해서는
.env파일이 필요합니다.
project-repo폴더 최상단에.env파일을 만들어주세요.
.env의 내용은 다음과 같이 구성하면 됩니다. 쌍따옴표안에 개인의 코드를 넣어주세요.
API_KEY = ""
AUTH_DOMAIN = ""
PROJECT_ID = ""
STORAGE_BUCKET = ""
MESSAGING_SENDER_ID = ""
APP_ID = ""
✅ 파이어베이스 연동하기
|
1) 파이어베이스 홈페이지에 들어갑니다. 2) 시작하기 버튼을 누릅니다. |
|
|
1) 프로젝트 만들기 버튼을 클릭합니다. |
|
|
1) 프로젝트의 이름을 지정합니다. 2) 체크박스 표시 후 계속 버튼을 클릭합니다. |
|
|
1) 계속 버튼을 클릭합니다. |
|
|
1) 애널리틱스를 다음과 같이 설정합니다. 2) 프로젝트 만들기 버튼을 클릭합니다. |
|
|
1) 프로젝트 만들기에 성공하면 다음과 같은 화면이 나옵니다. 2) 계속 버튼을 클릭합니다. |
|
|
1) 하단에 Authentication 버튼을 누릅니다. |
|
|
1) 시작하기 버튼을 누릅니다. |
|
|
1) 이메일/비밀번호 버튼을 누릅니다. |
|
|
1) 그림과 같이 설정 후 저장 버튼을 누릅니다. |
|
|
1) </> (웹 앱 추가) 버튼을 클릭합니다. |
|
|
1) 앱을 등록합니다. |
|
|
1) SDK의 값을 .env에 등록합니다. .env 등록하기를 참고하세요 |
|
|
1) Cloud Firestore 버튼을 클릭합니다. |
|
|
1) 데이터베이스 만들기 버튼을 클릭합니다. |
|
|
1) 다음 버튼을 클릭합니다. |
|
|
1) Cloud Firestore 위치를 다음과 같이 설정합니다. 2) 사용 설정 버튼을 클릭합니다. |
|
|
1) 생성된 Cloud Firestore의 규칙을 다음과 같이 바꿔줍니다. (false -> true) |
|
✅ 파이어베이스에 데이터 추가하기
|
1) "src\components\Header\Header.jsx" 코드의 21~23 번째 줄의 주석을 풉니다. |
|
|
1) 주석을 풀면 헤더 상단에 일괄 데이터 쓰기 버튼이 나타납니다. |
|
|
1) 일괄 데이터 쓰기 버튼을 클릭합니다 2) 데이터가 정상적으로 추가되었다고 콘솔에 표시됩니다. |
|
|
1) 데이터가 정상적으로 추가되었으면 주석을 다시 닫아줍니다. |
|
|
1) 상품리스트 페이지(localhost:3000/productList)에 들어가면 다음과 같은 화면이 나타납니다. |
|
|
1) 해당 위치의 주소를 복사해서 검색창에 입력합니다. |
|
|
1) 색인을 입력하는 페이지가 나타납니다. 2) 색인 만들기 버튼을 클릭합니다. |
|
|
1) 그림과 같이 색인을 입력하고 색인 만들기 버튼을 클릭합니다. 2) 주의) 세번째 색인은 __name__ 입니다. 3) 색인이 만들어지는데는 몇 분의 시간이 소요됩니다. |
|
|
1) 색인이 정상적으로 만들어지면 다음과 같이 데이터가 보입니다. |
|
https://exquisite-beijinho-97fbd2.netlify.app/