Toy Project 06 떡볶닷컴

dory·2021년 6월 6일
0

토이프로젝트

목록 보기
8/8

프로젝트 소개

다양한 분야의 창작자와 후원자를 이어주는 펀딩 커뮤니티 사이트인 텀블벅을 모티브로, 분식의 다양한 메뉴를 소개하고 후원할 수 있는 사이트를 기획했다.

프로젝트 개요

  • 분식을 라면, 떡볶이, 김밥, 튀김, 순대인 다섯가지 카테고리로 나누어 다양한 메뉴를 소개한다.
  • 유저는 자신의 독특한 메뉴를 소개하고 후원받아 메뉴를 런칭할 수 있다.
  • 누구나 자신만의 메뉴를 소개하고 글을 올릴 수 있다.

프로젝트 계획 및 일정

🗓️ 작업기간 : 2021.05.23 ~ 2021.06.04

  • 1st Sprint : 전체 레이아웃, 공통 컴포넌트 구현 및 공유
  • 2nd Sprint : 컴포넌트 별 기능 구현, 프론트-백 통신, conflict 수정 작업

👫 팀원

🔧 Skills

  • FE : React, React Hooks, React Router, Styled-Components, AWS S3
  • BE : Django, Docker, AWS S3

🌈 구현 기능 상세

1. 이메일/소셜 로그인&회원가입&로그아웃

  • 카카오 소셜로그인 & 회원가입 (OAuth2.0)
  • 이메일 로그인

2. 프로젝트 등록

  • s3 서버로 FormData 전송
  • input, textarea 등 폼 입력시 유효성 검사

3. 프로젝트 리스트 (메인 화면)

  • 다중 filter, sorting 기능 구현
  • 검색창 검색 기능 구현 및 filter, sorting과 연결
  • 좋아요 기능 메인-상세-유저 페이지 연결

4. 프로젝트 상세 페이지

  • 메인 - 상세 - 유저 페이지 동적 라우팅
  • 프로젝트 후원 (밀어주기) 기능 :후원 성공시 유저페이지에 정보 저장
  • 스크롤 애니메이션 구현

5. 나의 관심/후원 프로젝트 확인

  • 좋아요/후원한 프로젝트 확인
  • 좋아요/후원한 프로젝트 검색 기능

😎 Our Website : http://tteokbok.com/

📎 Route Path

  • / : 메인페이지
  • /detail/:id : 상세페이지
  • /project-start : 프로젝트 등록페이지
  • /profile : 마이페이지

📒 맡은 업무

  • 소셜 로그인을 이용한 로그인 및 회원가입
  • 공동 컴포넌트 중 하나인 버튼 컴포넌트 제작
  • 카테고리, 신제품, 마감일 등에 따라 프로젝트를 검색할 수 있는 필터기능 구현
  • 반응형 레이아웃 구현
  • 로그인 시 유저 정보가 나타나는 공동 헤더(네브바) 구현
  • path parameter를 이용한 메인 및 리스트 페이지와의 동적 라우팅

0개의 댓글