-
프로젝트 명 : Miju Shop
-
프로젝트 기간 : 2024.03.18(월) ~ 03.22(금) (5일간)
-
프로젝트 소개 : 식자재 및 가공식품 등 생활에 필요한 식품을 구매할 수 있는 쇼핑몰입니다.
-
배포 링크 : https://shoppy-sage.vercel.app/
| 이준구 | 서가희 | 김연재 | 윤미주 |
|---|---|---|---|
| @LeeJunGoo | @seokahee | @YEONJAE | @anywhereim |
| 팀장 | 팀원 | 팀원 | 팀원 |
| - 로그인 및 회원가입 기능구성 - 로그인 전역 상태관리 -admin페이지 URL 접근제한 -마이페이지 |
- 메인 UI 및 상품 리스트 출력 -카테고리별 상품 정렬 -로딩페이지 |
- 상세페이지 -후기 기능 -문의기능 -관리자 문의 답변 |
- 관리자페이지 -로그인 시 admin 구분 -장바구니 버튼 -장바구니 실시간 개수 - 장바구니페이지 |
| 링크 배포/README 작성 | 시연 영상 | 발표 | README 작성 |
그 외 : Redux Toolkit, React-icon
| 메인 페이지 | 상품 리스트 페이지 | 상품 상세 페이지 | 장바구니 페이지 | 마이 페이지 | 관리자 페이지 |
|---|---|---|---|---|---|
|
|
|
|
|
|
- 화면 렌더링 시 로딩 페이지 구현
- tailwind 라이브러리를 활용한 슬라이드 구성
- 메인 배너 슬라이더가 자동으로 이동
- 상품을 각각의 카테고리 분류하였고 카테고리 선택 시 해당 페이지로 이동
- 등록일 기준으로 상품 리스트를 정렬하여 출력
| 로그인 | 회원가입 |
|---|---|
|
|
- firebase authentication 및 firestore를 사용한 로그인 및 회원가입 기능 구현
-
- 로그인 아이콘 클릭 시 로그인 모달창 활성화
- 이메일/비밀번호 로그인: 회원 존재 여부 확인 후 로그인
- 구글 및 깃허브 소셜 로그인
-
- 회원가입 아이콘 클릭 시 회원가입 모달창 활성화
- 이메일 형식 여부 및 아이디 중복 여부, 비밀번호 일치여부를 확인
-
- 관리자일 경우에만 관리자 페이지로 접근 및 URL창에 직접 접근하는 것을 제한
| 장바구니 버튼 | 장바구니에 담긴 상품 개수 표시 |
|---|---|
|
|
- 장바구니 버튼
- 사용자 로그인 시 사용자의 고유 아이디를 기준으로 장바구니 버튼 클릭 시 상품의 정보를 담을 수 있도록 설계
- 장바구니 담긴 상품 개수 표시
- 장바구니 버튼 클릭 시 현재 장바구니에 담긴 상품의 개수를 확인할 수 있도록 구현
|
- `useQuery`훅을 사용하여 키워드를 기준으로 firebase에 저장된 데이터를 가져와 리스트로 보여준다.
- 상품 가격을 기준으로 오름차순 및 내림차순으로 상품 정렬
- 상품 클릭 시 상품별 상세 페이지로 이동
|
- `useQuery`훅을 사용하여 상품 Id를 기준으로 firebase에 저장된 데이터를 가져와 상품의 정보를 보여준다.
|
|
- 해당 상품에 후기,문의 작성 가능은 로그인된 유저만 사용할 수 있게끔 활성화 시키고 비회원일 경우에는 비활성화 시킨다.
- 현재 로그인된 유저와 해당 글을 작성한 유저의 일치 여부를 검사한 후 일치할 경우에만 글 수정 삭제
|
|
|
- `useQuery`훅을 사용하여 해당 userId를 기준으로 firebase에 저장된 상품데이터를 가져와 장바구니에 담았던 상품을 보여주는 페이지
- 수량 버튼: 상품 등록 시 quantity값을 가지고 등록. 초기값은 1로 수량 체크. 수량이 1개인 경우 "-"버튼을 누를 수 없고, 2개 이상인 경우 "-"버튼 활성화
- 금액창: quantity의 개수가 늘어남에 따라 금액이 변동되고, 상품이 없는 경우에는 텍스트 이외 금액은 보이지 않도록 구현
- 삭제버튼(X): X버튼 클릭 시 장바구니에서 상품이 삭제
|
- `useQuery`훅을 사용하여 해당 user의 정보를 가져오며 작성한 글을 클릭할 시 해당 글의 상품 페이지로 이동
- middleware를 사용하여 마이페이지에서 로그아웃을 하거나, 로그인을 하지 않은 상태에서 마이페이지(/mypage)에 접근할 경우 홈으로 이동
|
- 해당 웹 어플리케이션에 상품을 등록하기 위해서는 위의 사진처럼 관리자 권환이 있는 별도의 페이지로 이동해야하며 상품 등록 시 firebase에 저장된다.
윤미주
욕심많게 시작했던 프로젝트이기에 팀원들에게 부담이되고 많이 힘들었을 것 같다고 생각합니다.
다들 본인이 맞는 기능에 대해서 잘 만들어주시고 최선을 다해주시고 조금 더 나은 방향으로 가기 위해 의견도 물으시고 모르는 부분이나 에러가 발생이 되면 다함께 해결해나가는
팀원이었어서 너무 즐겁고 재미있는 프로젝트가 되었던 것 같습니다.
만들다보니 각자 욕심을 가지고 기능들에 대해 욕심을 가지고 해주셔서 또 너무 감사했던 팀원들이었습니다.
이번 프로젝트를 하면서 처음 접해보는 프레임워크(Next.js), 또 아직은 낯선 라이브러리(TypeScript, Tailwind) 그리고 이전에 만들어보지 못했던 기능들이었기에 만들면서 재미도 있었고
해결해 나가면서도 참 재미있었던 것 같습니다.
항상 늦게까지 남아서 본인의 기능이 아니더라도 함께 머리를 맞대고 해결해 나가던 팀원들이었어서 기억에 정말 많이 남을 것 같습니다.
앞으로 팀프로젝트를 하면서 어떻게 해나가면 좋을지 또 어떻게 소통하면 좋을지에 대해서 가장 많이 배울 수 있었던 팀원분들을 만나 너무 감사한 팀 프로젝트 경험을 만들 수 있었습니다.
이준구
Github를 효율적으로 관리하기 위해 issue, projects를 사용하였으며, 팀원 개개인의 작업 및 프로젝트의 진척도를 쉽게 파악할 수 있었다. 정해진 팀회의 시간 이외에도 지속적인 소통시간을 가졌으며, 발생하는 에러를 즉각적으로 대응할 수 있었다. 이전에 시도해보지 않았던 로그인과 회원가입 기능을 도전함으로써 많이 배웠습니다. 또한, 익숙하지 않았던 Next.js와 TypeScript를 사용하면서 많은 문법 에러가 발생했지만, 팀원들과 함께 늦은 시간까지 남아 에러를 해결해 나갔습니다. 끝으로 1주일이라는 시간이 누군가에겐 짧게 늦겨질 수 있지만 프로젝트를 진행하는 동안에는 정말 긴 시간이었고 긴 시간동안 혼자가아닌 팀원분들과 함께 프로젝트 진행 할 수 있어 정말 재밌고 행복했습니다.
서가희
프로젝트를 진행하며 Github의 Project 기능을 활용하여 개인의 작업과 프로젝트 진척 상황을 체계적으로 파악할 수 있었고, 에러가 발생하면 바로 공유하여 문제를 같이 해결할 수 있었습니다 적극적인 소통과 노력 덕분에 프로젝트를 원활히 진행할 수 있었습니다 찜 기능 등 다른 기능을 더 만들고 싶었지만 시간 부족으로 결국 만들지 못해 원하던 것보다 적은 결과를 만든 것 같아 아쉽지만 많은 것을 배울 수 있었습니다 좋은 팀을 만나 즐겁게 작업할 수 있었고 저의 부족한 부분을 이해해 주고 격려해 주어 너무 감사합니다 덕분에 많은 동기부여를 받았습니다
김연재
프로젝트의 초기 세팅을 이렇게까지 해야 되는 건가라고 처음에 생각을 하였습니다.
하지만 프로젝트를 진행을 하면서 초기 세팅의 중요성을 점차 깨닫게 되었습니다.
맡은 기능 구현을 하나 끝내면 그다음 뭐 하지가 아닌 피그마를 통해 디자인, api 명세서를 보고 바로 다음 기능을 시작할 수 있어
쓸데없는 곳에 시간을 버리지 않아서 좋았고 엄청 편했습니다.
거기다 많은 기능 구현에도 불구하고 더 하겠다고 나서는 팀원들을 보면서 뜨거운 열정을 배울 수 있었습니다.
그런 팀원분들이 있었기에 저의 부족한 부분을 채워줘서 프로젝트를 무사히 마칠 수 있었습니다.
시작이 반이라는 말이 괜히 있는 게 아닌 것 같습니다.
팀원분들에게 많이 배우고 이전의 저의 자세에 대해 반성하게 되는 뜻깊은 프로젝트였습니다.
📦src
┣ 📂api
┃ ┣ 📜cartFirebaseApi.ts
┃ ┣ 📜cookie.ts
┃ ┣ 📜fiebaseApi.ts
┃ ┗ 📜login.ts
┣ 📂app
┃ ┣ 📂admin
┃ ┃ ┗ 📜page.tsx
┃ ┣ 📂cart
┃ ┃ ┗ 📂[userId]
┃ ┃ ┃ ┗ 📜page.tsx
┃ ┣ 📂home
┃ ┃ ┗ 📜page.tsx
┃ ┣ 📂products
┃ ┃ ┣ 📂[id]
┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┗ 📜page.tsx
┃ ┣ 📂profile
┃ ┃ ┗ 📜page.tsx
┃ ┣ 📜globals.css
┃ ┣ 📜layout.tsx
┃ ┣ 📜page.tsx
┃ ┗ 📜provider.tsx
┣ 📂components
┃ ┣ 📂cart
┃ ┃ ┣ 📜CartButton.tsx
┃ ┃ ┣ 📜CartItem.tsx
┃ ┃ ┗ 📜CartStatus.tsx
┃ ┣ 📂common
┃ ┃ ┗ 📜Header.tsx
┃ ┣ 📂detail
┃ ┃ ┣ 📂ask
┃ ┃ ┃ ┗ 📜Ask.tsx
┃ ┃ ┗ 📂review
┃ ┃ ┃ ┗ 📜Review.tsx
┃ ┣ 📂main
┃ ┃ ┣ 📜Join.tsx
┃ ┃ ┣ 📜Login.tsx
┃ ┃ ┣ 📜MainProductItems.tsx
┃ ┃ ┗ 📜SlideShow.tsx
┃ ┗ 📂products
┃ ┃ ┗ 📜ProductItems.tsx
┣ 📂store
┃ ┣ 📂config
┃ ┃ ┗ 📜configStore.ts
┃ ┗ 📂modules
┃ ┃ ┣ 📜isModalToggle.ts
┃ ┃ ┗ 📜user.ts
┣ 📂types
┃ ┣ 📜cart-type.ts
┃ ┣ 📜product-type.ts
┃ ┗ 📜user-type.ts
┣ 📂utill
┃ ┗ 📂hooks
┃ ┃ ┣ 📂cart
┃ ┃ ┃ ┗ 📜useCart.ts
┃ ┃ ┣ 📂detail
┃ ┃ ┃ ┣ 📜useAskInput.ts
┃ ┃ ┃ ┗ 📜useReviewInput.ts
┃ ┃ ┣ 📂input
┃ ┃ ┃ ┗ 📜useInput.ts
┃ ┃ ┗ 📂redux
┃ ┃ ┃ ┗ 📜useRedux.ts
┗ 📜middleware.ts