frontendschool8 / jandi-market Goto Github PK

마켓컬리 홈페이지를 클론하여 비슷하게 구현한 프로젝트 Jandi Market 입니다. 이전의 유명했던 드라마 꽃보다 남자 에 등장하는 F4를 저희 조 이름으로 차용하였고( mbti F가 4명이라서) 드라마 여주인공인 금잔디 를 소재로 이용하여 마켓 이름을 Jandi Market 으로 정하였습니다. (실제 온라인 쇼핑몰인 컬리를 참고하였습니다.)

장효진	김충만	박주현	황승준
팀장	스크럼마스터	디자인담당	육아담당

2023.12.29 ~ 2024.01.15 (18일간, 주말 자율참여)

2024년 1월

Main(메인 페이지) / Cart(장바구니) / Login(로그인) / Register(회원가입)/ ProductDetail(제품 상세 페이지) / ProductList(제품 나열 페이지) / Components(공용) /

먼저 구현해야 할 작업 단위를 페이지별로 구분한 뒤, 총8개의 작업으로 나누어져 각 조원이 2개의 작업을 분담하여 진행하였습니다.

• 데일리 스크럼 회의 진행
• 문서 작업
• Product Detail Page
• Footer Component

• Main(메인페이지)
• ProductList

git branch 전략으로, 각 레포지토리로 fork 하는 방식을 선택했습니다.

• main
  • 제품을 배포하는 브랜치 입니다.
    
• develop
  • 개발 branch로 개발자들이 이 브랜치를 기준으로 각자 작업한 기능들을 Merge 합니다.
    
• feature
  • 단위 기능을 개발하는 branch로 기능 개발이 완료되면 develop branch에 Merge합니다.
    

단위 기능을 개발하는 branch인 feature branch의 경우, 다음과 같은 형식으로 네이밍합니다.

feature/담당페이지#이슈번호

Home (메인 페이지)

메인페이지 모달창 📍기능 설명

ProductDetail (제품 상세 페이지)

기능 설명
장바구니에 상품 담기 1) -/+버튼을 통해 상품 수량을 선택하고, 장바구니에 담기 버튼을 누르면 해당 상품이 장바구니(Cart)에 담깁니다. 2) 담기를 누르면 bubble창이 같이 뜹니다. 3) user의 cart에 상품이 없는 경우, 새로 추가되며, 상품이 있는 경우, 기존의 상품에 추가로 담깁니다. 4) 로그인이 안된 경우, 로그인 페이지로 넘어갑니다.
WISH LIST 1) 하트 아이콘을 누르면 색이 변경되며 localStorage에 담깁니다. 2) 각 상품마다 wish를 저장할 수 있으며, 다시 한 번 누르면 localStorage에서 삭제됩니다.
TAB 메뉴 1) 하트 아이콘을 누르면 색이 변경되며 localStorage에 담깁니다. 2) 각 상품마다 wish를 저장할 수 있으며, 다시 한 번 누르면 localStorage에서 삭제됩니다.
REVIEW 1) 리뷰 작성 시, 실시간으로 적용됩니다. 2) 각 상품마다 리뷰를 작성할 수 있습니다.
문의 글 1) 글자수 5000자 제한이 적용됩니다. 2) 글자가 입력될 경우 가상 placeholder가 사라지며, 글자수가 0이되면 다시 나타납니다. 2) 비밀글을 선택할 수 있습니다. 이 경우 제목이 `비밀글입니다`로 변경됩니다.
아코디언 토글 1) 해당 제목버튼을 클릭 시 내용이 나타납니다. 2) 다시 한 번 클릭 시 내용이 사라집니다. 3) 다른 제목을 클릭 시 내용이 사라집니다.

다음 순서대로 명령어를 입력해주세요.

npm i
npm run dev

데이터들을 파이어베이스로 관리하기 위해서는 .env파일이 필요합니다.
jandi-market폴더 최상단에 .env파일을 만들어주세요.
.env의 내용은 다음과 같이 구성하면 됩니다. 쌍따옴표안에 개인의 코드를 넣어주세요.

VITE_PH_URL = ""
VITE_PH_API  ""
VITE_PH_USERS = ""
VITE_PH_PL = ""
VITE_PH_REVIEW = ""
VITE_PH_CART = ""
VITE_PH_INQUIRY =  ""
VITE_PH_IMG  ""

• 사용하실 때에는 import.meta.env.VITE_PH_URL 형식으로 변수에 담아 사용하시면 됩니다.

https://jandi-market.netlify.app/