멋쟁이사자처럼 프론트엔드 스쿨 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
- 상품후기
✅ Gitmoji
Emoji | Text | Description |
---|---|---|
✨ | [feat] | 새롭게 만드는 코드(html,css,javascript 등 모두) |
🎨 | [modify] | 기존 코드 수정 |
⚡️ | [refactoring] | 리팩토링 |
🐛 | [fix] | 버그 문제 수정 |
✅ | [test] | 테스트 |
💄 | [style] | CSS수정 |
🔧 | [setting] | 환경 설정 |
📝 | [docs] | readme.md 등의 문서 수정 |
🔥 | [delete] | 파일이나 폴더 삭제 |
✅ 네이밍 컨벤션
- 이름을 통해 쓰임새를 알 수 있도록 한다. (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 (메인 페이지)
✅ SignIn (로그인 페이지)
1) 이메일 비밀번호를 입력하고, 로그인 버튼을 누르면 로그인 된 후 메인페이지로 이동합니다. |
![]() |
1) 회원가입 버튼을 누르면 회원가입 페이지로 이동합니다. |
![]() |
✅ SignUp (회원가입 페이지)
✅ ProductDetail (제품 상세 페이지)
✅ ProductList (제품 나열 페이지)
✅ Cart (장바구니 페이지)
✅ Common(모든 페이지에 공통적으로 들어가는 부분)
1) 스크롤을 일정 위치 만큼 내릴 시, 상단 고정되는 반응형 헤더 레이아웃을 확인할 수 있습니다. |
![]() |
1) 카테고리 영역을 HOVER 시, 카테고리 리스트들이 나옵니다. |
![]() |
다음 순서대로 명령어를 입력해주세요.
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) |
|