Code Monkey home page Code Monkey logo

buyte's Introduction

seb44_main_022



  • 팀 이름 : 🥯 BUYTE
  • 프로젝트 명 : 커스텀 케이크, 빵, 쿠키를 제작해주는 제과점 중개 유통 서비스입니다.
  • 프로젝트 기간 : 2023.06.28 ~ 2023.07.24
  • 팀원 : 김준표(팀장), 민정호, 양효정, 김현우(부팀장), 오숙현, 이준기
  • 배포 링크 : 배포링크

목차

  1. 팀원 소개
  2. 서비스 소개/주요 기능
  3. 프로젝트 문서
  4. Git
  5. 기술 스택
  6. 실행&빌드
  7. 미리 보기

🧑‍💻 팀원 소개

Contributors

김준표(FE, 팀장) 민정호 (FE) 양효정 (FE) 김현우 (BE, 부팀장) 오숙현(BE) 이준기(BE)
담당 파트

김준표

  • Login/SignUp
  • OAuth Google 2.0
  • Private Routing
  • Header
  • Map Page
  • Cart Page
  • Payment Page
  • Order Complete Page
  • Not Found Page
  • Chatting
  • Chat List Page

민정호

  • Main Page
  • Header
  • Footer
  • Custom Page
  • Design

양효정

  • Store List Page
  • Preference Product List Page
  • MyPage
  • Store Detail Page

김현우

  • Cart
  • Order
  • Payment
  • Chatting
  • Deploy

오숙현

  • Member CRUD
  • Log In, Log out
  • Spring Security
  • JWT
  • OAuth2 (Google)
  • Order History

이준기

  • Store
  • Product
  • Ingredients
  • Logging

서비스 소개/주요 기능

BUYTE는 커스텀 제과를 판매하는 서비스입니다.

나만의 빵을 원하시나요? BUTYE에서 주문해보세요!

  • 🍪 주문방법
    • 지도에서 가까운 매장 찾기
    • 입점된 매장리스트 확인하기
    • BUYTE에서 추천해주는 추천 메뉴 확인하기
    • 커스텀 제품, 기존 판매중인 제품 구매
  • 🍩 커스텀
    • 사용자가 원하는 디자인의 케이크, 도넛, 쿠키의 디자인시안을 제작
    • 그림판에서 원하는 이미지를 업로드
    • 사이드바에서 원하는 재료를 추가
  • 🥐 장바구니/결제
    • 제품 이미지 클릭 시 확해된 이미지 제공
    • 체크박스를 통한 수량변경
    • 장바구니 내 일부/전체 제품 선택 및 결제
    • 상세 주소를 입력받고 가상 결제
  • 💬 채팅
    • 채팅을 통한 사용자와 사장님간 소통
    • 판매자 계정으로 접근한 채팅(기존 채팅목록 확인 가능)
  • 👤 마이페이지
    • 주문내역 확인 / 주문한 제품의 페이지로 이동 가능
    • 프로필 (닉네임 수정, 회원 탈퇴)

📃 프로젝트 문서

✅ Git

Commit rule

이름 내용
feat 새로운 기능을 추가할 경우
fix 버그를 고친 경우
refactor 리팩토링
design css, UI 수정
docs 문서를 수정한 경우
style 코드 포맷 변경, 세미 콜론 누락, 코드 수정이 없는 경우
test 테스트 추가, 테스트 리팩토링(프로덕션 코드 변경 X)
chore 빌드 태스트 업데이트, 패키지 매니저를 설정하는 경우(프로덕션 코드 변경 X)
rename 파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우
remove 파일을 삭제하는 작업만 수행한 경우
comment 필요한 주석 추가 및 변경

Branch

main: 배포 브랜치

dev: 프론트, 백 통합 dev브랜치

feat/be/"기능": 백엔드 기능 구현 브랜치

feat/fe/"기능": 프론트엔드 기능 구현 브랜치

⚙️ 기술 스택

⚙️ Tools

Github Discord Notion
github logo Discord logo Notion logo

🖥 Frontend

Html CSS TypeScript React Styled-
Components
Redux-ToolKit
Html
CSS
icon
icon
styled-components icon
icon

🔒 Backend

Java AWS Spring Spring
Boot
MySQL Spring
Security
icon
icon
spring logo spring-boot logo spring-boot logo spring-boot logo

아키텍처

🕹️ 실행 & 빌드(Frontend)

  • 실행
# 폴더 진입
cd client

# 패키지 설치 ( "node" 필요 )
npm install

# 개발용 실행
npm start

😎 미리보기

메인 페이지 로그인/회원가입 페이지
signup page
✔ 처음 사용자를 위해 주문방법, 판매제품 등을 소개합니다.
✔ 커스텀 기능을 사용해본 팀원들의 리뷰를 확인할 수 있습니다.
login page
✔ 일반회원가입과 google oauth로 계정을 생성합니다.
✔ 유효성 검사를 모두 통과해야 로그인,가입버튼이 활성화 됩니다.
✔ 로그인 상태에 따라 헤더가 변경됩니다.
매장 리스트 페이지 채팅 페이지
main page
✔ 매장 리스트들을 확인하여 원하는매장을 선택합니다.
✔ 매장명으로 검색이 가능합니다.
write page
✔ 채팅으로 소비자와 사장님간 소통이 가능합니다.
✔ 판매자 계정으로 접근하면 채팅목록을 확인할 수 있습니다.
커스텀 페이지 지도 페이지
main page
✔ 케이크,쿠키,도넛 세가지 제품을 커스텀할 수 있습니다.
✔ 펜/지우개를 색상을 변경하여 사용할 수 있습니다.
✔ 사이드바에서 재료를 추가할 수 있습니다.
main page
✔ 카카오맵을 사용한 지도를 통해 매장위치를 확인할 수 있습니다.
✔ 모달에서 매장사진,매장명,추천제품을 확인합니다.
장바구니/결제 페이지 마이 페이지
main page
✔ 장바구니에 담긴 제품들의 이미지를 새 창으로 확인하고 결제화면으로 넘어갑니다.
✔ iamport를 사용하여 카카오페이 가상결제를 할 수 있습니다.
main page
✔ 사용자의 주문내역을 확인합니다.
✔ 회원탈퇴, 닉네임수정이 가능합니다.

buyte's People

Contributors

jungo0 avatar raros17 avatar kimjunpyo avatar ljg980708 avatar oshyun00 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.