DIY + Hobby

나의 취미를 내 손으로 직접 다채롭게 구성해 보세요 🎈

• Front-End Developer : 홍지영, 최민지, 박주희, 김성호
• Template Designer : 김성호

Project - Dobby팀

소개

위코드 50기 B팀의 2nd Project입니다.

프로젝트 시연 영상

• 여기를 클릭하시면 Dobby 시연 영상을 보실수 있습니다.

기술스택

• Frontend: React.js
• Backend: Express.js

저장소 구조

├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── data
│   │   ├── data.json
│   │   ├── menu.json
│   │   └── slideList.json
│   ├── images
│   │   ├── cart_sample.jpg
│   │   ├── icon_basic.svg
│   │   ├── icon_check.png
│   │   ├── icon_close.png
│   │   ├── icon_collection.svg
│   │   ├── icon_creative.svg
│   │   ├── icon_minus.png
│   │   ├── icon_plus.png
│   │   ├── icon_star.svg
│   │   └── sample.png
│   └── index.html
├── pull_request_template.md
└── src
    ├── Router.jsx
    ├── components
    │   ├── Carousel
    │   │   ├── Carousel.jsx
    │   │   ├── Carousel.scss
    │   │   ├── NextBtn.jsx
    │   │   ├── NextBtn.scss
    │   │   ├── PrevBtn.jsx
    │   │   └── PrevBtn.scss
    │   ├── Category
    │   │   ├── Category.jsx
    │   │   └── Category.scss
    │   ├── Footer
    │   │   └── Footer.jsx
    │   ├── Layout
    │   │   ├── Layout.jsx
    │   │   └── Layout.scss
    │   ├── Nav
    │   │   ├── Nav.jsx
    │   │   ├── Nav.scss
    │   │   └── cartIcon.png
    │   └── ProductCard
    │       ├── ProductCard.jsx
    │       └── ProductCard.scss
    ├── config.js
    ├── index.js
    ├── pages
    │   ├── Cart
    │   │   ├── Cart.jsx
    │   │   └── Cart.scss
    │   ├── Delivery
    │   │   ├── Delivery.jsx
    │   │   └── Delivery.scss
    │   ├── Detail
    │   │   ├── Components
    │   │   │   ├── Review.jsx
    │   │   │   ├── Review.scss
    │   │   │   ├── Star.jsx
    │   │   │   ├── Star.scss
    │   │   │   └── StarIcon.jsx
    │   │   ├── Detail.jsx
    │   │   ├── Detail.scss
    │   │   └── 택배.svg
    │   ├── FindID
    │   │   ├── FindID.jsx
    │   │   └── FindID.scss
    │   ├── FindPW
    │   │   ├── FindPW.jsx
    │   │   └── FindPW.scss
    │   ├── Login
    │   │   ├── Login.jsx
    │   │   └── Login.scss
    │   ├── Main
    │   │   ├── Layout
    │   │   │   ├── CategorizedSlide
    │   │   │   │   ├── CategorizedSlide.jsx
    │   │   │   │   └── CategorizedSlide.scss
    │   │   │   ├── CategoryList
    │   │   │   │   ├── CategoryList.jsx
    │   │   │   │   └── CategoryList.scss
    │   │   │   ├── CategoryTitle
    │   │   │   │   ├── CategoryTitle.jsx
    │   │   │   │   └── CategoryTitle.scss
    │   │   │   ├── Subscribe
    │   │   │   │   ├── Subscribe.jsx
    │   │   │   │   └── Subscribe.scss
    │   │   │   ├── TabContent
    │   │   │   │   ├── TabContent.jsx
    │   │   │   │   └── TabContent.scss
    │   │   │   ├── TabList
    │   │   │   │   ├── TabList.jsx
    │   │   │   │   └── TabList.scss
    │   │   │   ├── TitleText
    │   │   │   │   ├── TitleText.jsx
    │   │   │   │   └── TitleText.scss
    │   │   │   └── subscription.js
    │   │   ├── Main.jsx
    │   │   └── Main.scss
    │   ├── PayComplete
    │   │   ├── PayComplete.jsx
    │   │   └── PayComplete.scss
    │   ├── Payment
    │   │   ├── Payment.jsx
    │   │   ├── Payment.scss
    │   │   └── components
    │   │       ├── Address.jsx
    │   │       └── Address.scss
    │   ├── Signup
    │   │   ├── Signup.jsx
    │   │   └── Signup.scss
    │   └── Store
    │       ├── Layout
    │       │   ├── ProductList.jsx
    │       │   ├── ProductList.scss
    │       │   ├── Search.jsx
    │       │   ├── Search.scss
    │       │   ├── Sorting.jsx
    │       │   └── Sorting.scss
    │       ├── Store.jsx
    │       └── Store.scss
    └── styles
        ├── common.scss
        ├── reset.scss
        └── variable.scss

프로젝트

실행하기

• 아래 명령어를 입력하여 실행해주세요.

npm start

• 명령어는 디렉토리 최상단에서 실행해주세요.

기여하기

위코드 50기 2차 프로젝트 팀원 총 8명이 참여하였으며, 프론트엔드 4명, 백엔드 4명이 참여하였습니다.

현재 기여하기는 팀원들을 통해서만 가능하니, 추가 코드 수정은 팀원을 통해 추후 진행할 예정입니다.

벤치마킹 Platform

구독 서비스 술담화를 벤치마킹하였습니다.

• 월간 토이 DIY 플랫폼의 DIY 카테고리 등을 추가로 참고하였습니다.

벤치마킹 포인트 👀

구독 서비스 종류

• 종합적, 창작성, 수집성

메인 페이지 단 하나에 구독 기능, 제품 추가

• 메인 페이지에서 DIY 상품과 구독 DIY 상품을 전부 소개하여 이탈을 방지

- DIY 상품 검색 기능은 사용자의 취미 상품 찾기를 돕습니다.

    - DIY가 가능한 수집/제작 취미가 있는 분들은 특정 상품을 원할 수 있기 때문에 검색, 정렬 필터링 서비스도 활성화하였습니다.

- 구독 기능 : 메인 페이지에서 구독 버튼을 누르면 구독 결제 페이지로 이동합니다.

- 제품을 클릭하면 그 제품의 상세 페이지로 화면 이동합니다.

- 로그인을 하면 결제 및 장바구니 생성이 가능합니다.

- 회원가입 및 로그인이 가능하다는 것을 로그인 페이지로 이동하자마자 곧바로 버튼을 보여 줘, 미가입 유저의 회원가입 장벽을 술담화보다 조금 더 낮췄습니다.

- 사용자의 경험에서의 첫인상이 중요하고 유저의 이탈이 쉽게 언제든 이루어진다는 것을 근거로 위와 같이 설계하였습니다.

- 이로써 유저가 메인 페이지에서는 곧바로 구독, 스토어 상품을 보고 난 이후에, 회원가입/로그인은 상단에서 버튼만 누르면 그 다음에 기능을 쓰도록 설계하였습니다.

- 아이디, 비밀번호 찾기는 눈에 잘 띄게 컬러 버튼으로 만들어 시인성이 낮지 않게 하였습니다.

- 로그인 하지 않아도 상품을 미리 볼 수 있습니다.  로그인하면 고객이 가입 시 입력한 닉네임을 상단에 띄우며 인삿말을 보이도록 구현하였습니다.

Dev Story

기여한 사람들

🍑 Minsu	🍇 Jinseo	🥑 Hyunsu	🥝 Youngbeom	🍋 Jiyeong	🍍 Juhee	🍹 Minji	🍒 Seongho

Dev Note

이곳에 개발 과정을 팀원들이 작성하였습니다. Front-End 관련 notion은 여기에 있습니다.

저장소에 별 달아주시면 감사드리겠습니다:) ✨✨✨