Skip to content

HOMEMADE WIKI

expectta edited this page Feb 16, 2021 · 31 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

메인화면

  • 메인화면에서 확인 할 수 있는 정보 : 최근 등록된 레시피, 이번달 최고의 레시피, 금주의 탑 4 레시피
  • 메인화면에서 사용할 수 있는 기능 : 카테고리별 레시피 목록 page이동, 검색어별 레시피 목록 page이동, 회원정보 버튼, 회원가입 버튼
스크린샷 2021-02-13 오후 4 56 57

1 . 최근등록된 레시피 확인

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

2 . 이번달 최고의 레시피

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

3 . 금주의 탑 4레시피

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

회원가입/로그인/비밀번호찾기

  • 사용자의 잘못된입력(email 형식, passord 8자이상, 전화번호 형식)을 유효성 검사를 통해 예외처리함.
스크린샷 2021-02-13 오후 4 56 57 스크린샷 2021-02-13 오후 4 56 57 스크린샷 2021-02-13 오후 4 57 19

회원정보/myrecipe

회원정보

  • 프로필등록 / 변경 , 비밀번호 변경, 전화번호 변경, 회원탈퇴기능
스크린샷 2021-02-13 오후 4 57 41

myrecipe

  • 유저가 등록한 recipe list 확인 , carousel로 화면 recipe list 전환기능, recipe 클릭시 recipe 상세 page전환
스크린샷 2021-02-13 오후 4 57 41

레시피 작성

  1. 레시피 정보 작성 , 순서(step)별 이미지 & 설명 등록 , 필수입력사항 미입력시 예외처리
스크린샷 2021-02-13 오후 4 59 09

카테고리별, 검색어별 레시피 목록확인

  • 유저가 레시피를 등록할때 카테고리를 정할 수 있으며, 검색은 제목의 필터링을 통해 레시피를 검색한다
스크린샷 2021-02-13 오후 4 59 09 스크린샷 2021-02-13 오후 4 59 09




스키마

스키마 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
이름 내용
리액트 컴포넌트기반으로 재사용성이 용이, 컴포넌트별 상태관리가 용이
hooks 상태관리 코드의 단순화, 컴포넌트간 데이터 공유시 편의성


  • Library
이름 내용
axios 서버 비동기 통신
styled_componets javascript 파일 내에서 CSS를 사용하여 별도의 CSS 파일 생성 불필요, 스타일컴포넌트에 props를 전달수있다


  • 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)

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 스크린샷 2020-03-09 오후 5 33 39 스크린샷 2020-03-09 오후 5 33 39 스크린샷 2020-03-09 오후 5 33 39
이름 내용
AWS S3 이미지 전용 버킷 / 레시피, 유저 아바타 사진 관리 목적
AWS EC2 가상 서버를 구축, 보안 및 네트워크 구성, 스토리지 관리 목적
AWS RDS 배포용 DB / 데이터베이스 저장 목적
AWS ROUTE 53 Homemade 도메인 연결 목적
AWS ELB 네트워크 트래픽 분산을 통한 애플리케이션 확장성 개선 목적
AWS certificate manager HTTPS 제공, 보안 콘텐츠 제공 목적
PM2 NodeJS 프로세서 관리, 무중단 서비스 운영 목적


  • 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 스크린샷 2020-03-09 오후 5 33 39 스크린샷 2020-03-09 오후 5 33 39
이름 내용
gitbook API 문서 작성 목적
dbdiagram 스키마 테이블 기획, 관계구성 표현 목적
postman API 작동 테스트 목적
git 버전관리
ESlint 협업간 코드style의 통일 목적
prettier 협업간 코드style의 통일 목적 (airbnb)