Skip to content

JoStar33/BoriSsal-Front

Repository files navigation

보리쌀 - 보리사이트 프론트엔드

🐶1. 서론

왜 보리쌀을 만들게 됐나?

우리 귀엽고 세상에서 제일 착한 보리를 사람들에게 자랑하고 싶어서 만들게 됐습니다. 실제로 우리 보리는 너무 귀엽습니다. 아래 사진을 보실래요? KakaoTalk_20230331_170007171

KakaoTalk_20230402_223912387

KakaoTalk_20230402_223912387_01

너무귀엽죠ㅎㅎ

🐶2. 기획서

https://www.figma.com/file/ostLEtK2oJDRCU3HInhDbD/%EB%B3%B4%EB%A6%AC%EC%8C%80?node-id=0%3A1&t=4JlyKT2EoBWC6vIP-1

🐶3. 브랜치

배포 브랜치명

  • release

개발 브랜치명

  • develop

화면별 브랜치명

  • feature/main-page
  • feature/goods-page
  • feature/bori-gallery-page
  • feature/user-page
  • feature/admin-page

🐶4. 기술 스택

프론트엔드

🐶5. 플로우 차트

  • 로그인과 회원가입 플로우차트

회원가입과 로그인 플로우차트

  • 굿즈 플로우차트

주문과 장바구니 플로우차트

  • 배송조회 플로우차트

배송내역조회 플로우차트

  • 굿즈 등록 플로우차트

상품 등록 플로우차트

  • 보리갤러리 플로우차트

보리갤러리 플로우차트

🐶6. 폴더 구조

image

폴더들은 위에 보시는 구조처럼 이루어져 있습니다. scss파일, test파일, 스토리북 파일과 같은 파일들을 계속해서 찾아다니는 과정이 불편하고 비효율적이라고 생각이 들었습니다. 때문에 저는 하나의 컴포넌트와 연관된 모든 test, stories, module.scss파일들을 다음과 같이 구성시켰습니다.

🐶7. 시연 영상

✨보리쌀 메인페이지

1 보리쌀 메인페이지

✨회원가입

2 회원가입

✨로컬 로그인

3 로컬 로그인

✨소셜 로그인

4 소셜 로그인

✨소셜 로그인(중복 이메일 접근)

5 소셜 로그인(중복 이메일 접근)

✨사용자 페이지

6 사용자 페이지

✨굿즈 페이지

7 굿즈 페이지

✨장바구니 담기

8 장바구니 담기

✨장바구니에서 구매

9  장바구니에서 구매

✨보리 갤러리 페이지

10 보리 갤러리 페이지

✨어드민 페이지 접속 및 굿즈 등록

11 어드민 페이지 접속 및 굿즈 등록

✨굿즈확인

12 굿즈확인

✨갤러리 등록 및 확인

13 갤러리 등록 및 확인

✨주문내역 수정 및 확인

14 주문내역 수정 및 확인

🐶더 자세한 내용이 궁금하다면?🐶

https://github.com/JoStar33/BoriSsal-Front/wiki