Skip to content

Home

Jump to bottom
atomsong92 edited this page Feb 14, 2021 · 76 revisions

한번 본 사람은 잊어도, 한번 먹은 음식은 못 잊는다

  • 이 프로젝트는 코로나로 인한 사회적거리두기/비대면 업무가 증가함에 따라 집에서 보내는 시간이 늘어남으로서 직접 요리를 만들어 먹는 수요가 증가 할 것으로 판단되어 레시피 공유 플랫폼을 구상하게 되었습니다. 회원 가입을 통해 레시피를 등록하고 공유 할 수 있으며, 다른사람의 레시피에 평점을 주거나 댓글을 작성 하여 소통할 수 있습니다. 또한 메인 화면에서 금주의 인기 레시피를 선별적으로 보여줌으로서 타인으로 부터 좋은 평가를 받은 음식의 레시피를 노출시켜 맛있는 음식을 공유 할 수있습니다.

GIT HUB repository
구별 저장소 링크
Client https://github.com/codestates/Homemade-client
Server https://github.com/codestates/im25Homemade-server

우리들의 시크릿 레시피 Homemade

기능별 담당자

Front End : 김남인, 김지운

이름 담당 설명
김남인 UX/UI, 디자인, recipe 상태관리 recipe list, recipe 등록, 메인화면 구성
김지운 UX/UI, 디자인, 유저 상태관리 유저 회원가입, 로그인 , 회원정보 변경 화면 구성


Back End : 김용재, 송정현

이름 담당 설명
김용재 유저정보 API, 배포 설명설명설명설명
송정현 레시피정보 API, 데이터 설명설명설명설명

시스템 아키텍쳐

시스템 아키텍쳐

메인화면

스크린샷 2021-02-13 오후 4 56 51

금주의 인기레시피 확인

스크린샷 2021-02-13 오후 4 56 57

로그인 / 로그아웃

스크린샷 2021-02-13 오후 4 57 19

회원가입

스크린샷 2021-02-13 오후 4 57 41

레시피 작성

  1. 레시피 정보 작성
스크린샷 2021-02-13 오후 4 59 09
  1. 순서(step)별 이미지 & 설명 등록
스크린샷 2021-02-13 오후 4 59 19

마이페이지

  1. 내 정보 보기
스크린샷 2021-02-13 오후 4 59 19 : 내 정보와 내가 올린 레시피를 확인할 수 있는 페이지로 구성
  1. 내 정보 수정
스크린샷 2021-02-13 오후 4 59 19

이곳에선 나의 계정 정보에 대해 변경이 가능합니다.

  1. 내 레시피 보기
스크린샷 2021-02-13 오후 4 59 19

내가 작성한 레시피 목록을 볼 수 있습니다.

이전 슬라이드, 다음 슬라이드 버튼으로 목록들을 확인할 수 있습니다.



스키마

스키마 dbdiagram 링크

스크린샷 2021-02-13 오후 4 38 35
1 (hasMany) N (belongsTo)
users contents
users comments
users labals
contents comments
contents images
categories contents
N (belongsToMany) N (belongsToMany)
users labels
labels users
N (belongsTo) N
user_label users
user_label label

API API 문서

스크린샷 2021-02-13 오후 6 31 10

GET API명 설명 엔드포인트
GET user info 유저 정보 GET, 마이페이지 데이터 전달용 users/userinfo
GET my recipes 내가 작성한 레시피 보기 users/myrecipes
GET recipes 검색어 & 카테고리별 레시피 분류, 결과얻기 recipes/recipes
GET recipe 레시피 클릭했을 때의 레시피 정보(상세정보 GET) recipes/recipe
GET check email email 중복 여부 판단 users/checkemail

POST API명 설명 엔드포인트
POST sign in 로그인, 엑세스 토큰 발급 users/singin
POST sign out 로그아웃 users/singout
POST sign up 회원가입 users/signup
POST content 레시피 글 작성 recipes/content
POST comment 레시피 글의 댓글 작성 recipes/comment

PATCH API명 설명 엔드포인트
PATCH update userinfo 회원 정보 변경 users/uuserinfo
PATCH update content 레시피 글 수정 users/ucontent
PATCH update comment 회원가입 users/ucomment
PATCH update password 레시피 글 작성 users/upassword

DELETE API명 설명 엔드포인트
DELETE delete user 회원 탈퇴 users/duser
DELETE delete content 레시피 글 삭제 recipes/dcontent
DELETE delete comment 레시피 댓글 삭제 recipes/dcomment

기술 스택

Front End


  • Framework
이름 내용
리액트 컴포넌트기반으로 재사용성이 용이, 컴포넌트별 상태관리가 용이


  • Library
이름 내용
axios 서버 비동기 통신
styled_componets javascript 파일 내에서 CSS를 사용하여 별도의 CSS 파일 생성 불필요.


  • Tools
스크린샷 2020-03-09 오후 5 33 39 스크린샷 2020-03-09 오후 5 33 39 스크린샷 2020-03-09 오후 5 33 39 스크린샷 2020-03-09 오후 5 33 39
이름 내용
figma 시스템아키텍쳐 설계
git 버전관리
ESlint 협업간 코드style의 통일 목적
prettier 협업간 코드style의 통일 목적 (airbnb)
  • Deploy
스크린샷 2020-03-09 오후 5 33 39 스크린샷 2020-03-09 오후 5 33 39
이름 내용
AWS S3 클라이언트 파일 배포
AWS ROUTE 53 ~~~~ 에 사용

Back End

  • Framework
이름 내용
Node js 비동기 활용 퍼포먼스 증가 목적
Express 라우팅, Node js 효율적인 사용 목적


  • Database
이름 사용 이유
Mysql 무료로 사용가능하기 때문
Mysql 널리 알려진 표준 SQL 형식을 사용


  • Library
스크린샷 2020-03-09 오후 5 33 39 스크린샷 2020-03-09 오후 5 33 39 스크린샷 2020-03-09 오후 5 33 39
이름 내용
Sequelize database 관계 설정, ORM형식으로 DB CRUD 목적
Multer S3 레시피 이미지 S3 이미지 버켓에 저장목적
crypto 유저 비밀번호 암호화 저장 목적


  • Deploy
스크린샷 2020-03-09 오후 5 33 39 스크린샷 2020-03-09 오후 5 33 39 스크린샷 2020-03-09 오후 5 33 39 스크린샷 2020-03-09 오후 5 33 39
이름 내용
AWS S3 이미지 전용 버킷 / 레시피, 유저 아바타 사진 관리 목적
AWS ROUTE 53 Homemade 도메인 연결 목적
AWS EC2 배포용 Server
AWS RDS 배포용 DB / 데이터베이스 저장 목적


  • Tools
스크린샷 2020-03-09 오후 5 33 39 스크린샷 2020-03-09 오후 5 33 39 스크린샷 2020-03-09 오후 5 33 39
이름 내용
gitbook API 문서 작성 목적
dbdiagram 스키마 테이블 기획, 관계구성 표현 목적
postman API 작동 테스트 목적


Clone this wiki locally