프로젝트 활동 보고서_2w - GraduationDku/tastyHub GitHub Wiki

기능 명세서

주제 : RECIPE
기능 제목 주 기능 상세 기능 상호 작용 사용자 인터페이스
1. 주간 인기레시피 인기있는 레시피 약 7개 노출 일주일간 좋아요 개수를 내림차순으로 정렬하여 나열하여 조회하기 1. 사용자는 홈화면에서 주간 인기레시피를 볼 수 있다. 2. 클라이언트 서버는 서버에 기능에 대한 요청을 진행한다. 3. 요청에 대한 응답값을 받아서 클라이언트서버는 사용자에게 해당 레시피를 보여준다. (1)
2. 단일 레시피 조회하기 레시피 리스트에서 단일 레시피 조회하기 레시피 화면 페이지에서 사용자가 원하는 레시피를 보여주기 1. 사용자는 주어진 레시피 리스트에서 하나의 레시피를 고른다. 2. 사용자가 고른 레시피의 ID를 클라이언트 서버는 서버에 요청한다. 3. 요청에 대한 응답값을 기준으로 사용자에게 해당 레시피를 보여준다. (2)
3. 전체 레시피 조회하기 전체 레시피 나열 레시피 화면으로 이동 시 기준점을 기준으로 레시피 7개 조회하기 1. 상단 메뉴바에 레시피 버튼을 누른다. 2. 기준점을 기준으로 레시피 7개를 나열한다. 2-1. 나열 기준을 선택하면 해당 기준으로 레시피가 정렬된다. 3. 원하는 레시피를 선택하면 된다. (3)
4. 레시피 검색하기 음식의 이름으로 레시피 검색하기 데이터베이스에서 검색어와 일치하는 레시피 조회하기 1. 사용자가 궁금한 레시피의 키워드를 검색칸에 입력한다. 2. 돋보기 버튼을 누른다. 3. 해당 키워드가 포함된 레시피들을 나열한다. 4. 찾고있던 레시피가 발견되면 클릭한다. 상단 메뉴바
5. 레시피 생성하기 레시피 정보 저장 사용자가 작성한 레시피 정보를 데이터베이스에 저장하기 1-1 사용자는 레시피 설명을 입력한다. 1-2 사용자는 요리 이미지를 입력한다. 1-3 사용자는 조리시간을 입력한다. 1-4 사용자는 조리 난이도를 입력한다. 1-5 사용자는 레시피의 양을 입력한다. 1-6 사용자는 레시피에 들어가는 재료와 재료마다 양을 입력한다. 1-7 사용자는 요리 단계별 이미지와 설명을 입력한다. 2. 사용자는 레시피 작성을 마쳤다면 레시피 작성하기 버튼을 눌러 저장한다. (4)
6. 레시피 수정하기 레시피 정보 수정 사용자가 본인이 작성한 레시피를 수정하기 1-1 사용자는 레시피 설명을 수정해 입력한다. 1-2 사용자는 요리 이미지를 수정해 입력한다. 1-3 사용자는 조리시간을 수정해 입력한다. 1-4 사용자는 조리 난이도를 수정해 입력한다. 1-5 사용자는 레시피의 양을 수정해 입력한다. 1-6 사용자는 레시피에 들어가는 재료와 재료마다 양을 수정해 입력한다. 1-7 사용자는 요리 단계별 이미지와 설명을 수정해 입력한다. 2. 사용자는 레시피 작성을 마쳤다면 레시피 수정하기 버튼을 눌러 기존의 작성한 레시피를 수정한다.
  • (1)
  • (2)
  • (3)
  • (4)

기술 명세서

프론트엔드

기능 범위

기능 제목 상단 내비게이션 바
구현 기간 24.04.16. (1일)
담당 팀원 박승은
구현 단계 표시 구현 완료
알고리즘 1. 상단에 필요한 기능을 정리한다. 2. 클릭하면 이동할 페이지가 다 구현이 되어있어야 한다. 3. 선언한 setScreen 함수를 통하여 클릭이벤트로 페이지 이동을 할 수 있도록 한다. 4. setScreen 함수를 통하여 상위 컴포넌트에 전달한다. 5. 항상 상단에 띄울 수 있도록 고정한다. (App.js 내부)

기능 범위

기능 제목 주간 인기 레시피 (= 초기 메인 화면 구현)
구현 기간 24.04.12. - 24.04.14.
담당 팀원 박승은
구현 단계 표시 개발 진행 중
알고리즘 1. 로그인 후 사용자는 초기 메인 화면에 접근하게 된다. 2. fetch를 사용하여 서버에게 필요한 데이터를 받아온다. 2-1. 서버에게 받은 정렬한 레시피를 표시한다. 3. 각 레시피를 클릭하면 해당 상세 레시피로 이동할 수 있도록 구현한다. (동일한 id)
기능 제목 전체 레시피 조회
구현 기간 24.04.12. - 24.04.14
담당 팀원 박승은
구현 단계 표시 개발 완료
알고리즘 1. 상단 내비게이션바에서 레시피를 선택하면 접근할 수 있다. 2. 서버에게 필요한 데이터를 await를 사용하여 받아온다. 2-1. 서버에게 받은 정렬한 레시피를 표시한다. 3. 각 레시피를 클릭하면 해당 상세 레시피로 이동할 수 있도록 구현한다. (동일한 id)
기능 제목 상세 레시피 조회
구현 기간 24.04.12. - 24.04.14.
담당 팀원 박승은
구현 단계 표시 개발 진행 중
알고리즘 1. 레시피를 클릭하면 단일 레시피가 노출되어야 함. 2. fetch 함수를 사용하여 동적으로 구성된 URL을 통해 세부 정보를 요청한 후 받는다. 3. recipedetails가 null이 아닐 경우 레시피의 이름, 이미지, 설명, 재료 목록, 조리 단계를 표시한다. 4. 적절한 UI를 구성한다.

백엔드

기능 범위

기능 제목 레시피 생성하기
구현 기간 24.04.15.
담당 팀원 김민수
구현 단계 표시 개발 완료
알고리즘 1. 서버는 클라이언트가 해당 요청을 호출하면 동작한다. 2. 클라이언트는 생성을 위한 CreateRecipeDto와 사용자 인증을 위한 토큰을 전달한다. 3. 서버는 해당 CreateRecipeDto와 토큰에서 User 값을 가져온다. 4. 서버는 컨트롤러로 전달된 해당 요청을 서비스층으로 전달한다. 5-1. 서비스층에서는 전달된 CreateRecipeDto와 User값을 Recipe, Ingredient, FoodInformation, CookStep으로 각각 재가공한다. 5-2. 전달된 데이터를 사용에 맞게 다시 Recipe 객체를 만든다. 5-3. 만들어진 객체를 RecipeRepository에 저장한다. 5-4. @Transactional을 사용하여 중간에 문제가 생기면 Repository에 저장하지 않는다. 6. 해당 Recipe 객체가 저장이 되면 컨트롤러에서는 클라이언트에 StatusCode 200을 전달한다.

기능 범위

기능 제목 레시피 조회하기
구현 기간 24.04.16. / 24.05.dd
담당 팀원 김민수
구현 단계 표시 개발 진행중
알고리즘 1. 서버는 클라이언트가 해당 요청을 호출하면 동작한다. 2. 클라이언트는 서버로 원하는 레시피의 아이디를 PathVariable로 전달한다. 3. 서버는 들어온 아이디를 컨트롤러 계층으로 받아온다. 4. 컨트롤러 단은 서비스 단에서 조회와 관련된 레시피 로직을 호출한다. 5-1. 서비스단에서 조회하기 로직은 해당 아이디로 된 레시피가 있는지 데이터를 쿼리를 통해 가져온다. 5-2. 데이터가 조회가 되면 해당 데이터를 DTO 클래스로 재가공하여 컨트롤러 단으로 보내준다. 6. 컨트롤러는 해당 응답 데이터를 클라이언트에게 보내준다. 현재 이미지 기능 s3가 추가되지않은 상태이다. 프로토타입이후에 s3를 추가하여 이미지 기능을 추가할 예정이다.

기능 범위

기능 제목 레시피 전체 조회하기
구현 기간 24.04.15. / 24.05.dd
담당 팀원 임세현
구현 단계 표시 개발 완료
알고리즘 1. 서버는 클라이언트가 해당 요청을 호출하면 동작한다. 2. 서버는 컨트롤러로 전달된 해당 요청에 관련된 서비스 단 로직을 실행한다. 3. 서비스 단 레시피 전체 조회하기 로직은 데이터 베이스에 있는 모든 레시피 정보를 각각 DTO 클래스에 담아 Page 클래스로 묶어 컨트롤러 단으로 보내준다. 4. 컨트롤러는 해당 응답 데이터를 클라이언트에게 보내준다. JPA로만 구현하기에는 복잡한 쿼리문이 필요하기에Querydsl을 사용해 구현 할 예정이다.

기능 범위

기능 제목 인기 레시피 조회하기
구현 기간 24.04.15. / 24.05.dd
담당 팀원 임세현
구현 단계 표시 개발 진행중
알고리즘 1. 서버는 클라이언트가 해당 요청을 호출하면 동작한다. 2. 서버는 컨트롤러로 전달된 해당 요청에 관련된 서비스 단 로직을 실행한다. 3. 서비스 단 레시피 인기 레시피 조회하기 로직은 데이터 베이스에 있는 모든 레시피 중 좋아요 개수가 가장 높은 7개의 레시피 정보를 각각 DTO 클래스에 담아 Page 클래스로 묶어 컨트롤러 단으로 보내준다. 4. 컨트롤러는 해당 응답 데이터를 클라이언트에게 보내준다. JPA로만 구현하기에는 복잡한 쿼리문이 필요하기에Querydsl을 사용해 구현 할 예정이다.

기능 범위

기능 제목 레시피 검색하기
구현 기간 24.04.15. / 24.05.dd
담당 팀원 임세현
구현 단계 표시 개발 진행중
알고리즘 1. 서버는 클라이언트가 해당 요청을 호출하면 동작한다. 2. 클라이언트는 레시피 검색을 위한 RecipeSearchDto를 전달한다. 3. 서버는 컨트롤러로 전달된 해당 요청에 관련된 서비스 단 로직을 RecipeSearchDto에 있는 키워드를 전달하면서 실행한다. 4. 서비스 단 레시피 검색하기 로직은 데이터 베이스에 있는 foodname에 키워드를 포함하는 모든 레시피 정보를 각각 DTO 클래스에 담아 Page 클래스로 묶어 컨트롤러 단으로 보내준다. 5. 컨트롤러는 해당 응답 데이터를 클라이언트에게 보내준다. JPA로만 구현하기에는 복잡한 쿼리문이 필요하기에Querydsl을 사용해 구현 할 예정이다.

Env

Local 통합 테스트 환경 구현

기능 제목 Local 통합 테스트 환경 구현
구현 기간 24.04.12.~24.04.14. / 24.05.dd ~
담당 팀원 김민수
구현 단계 표시 개발 진행중
아키텍처 container(docker) - 일관된 환경세팅을 위해 사용한다. 지정된 환경을 통해 개발을 진행하기에 기존 사용자가 사용하던 세팅과 무관하게 바로 사용할 수 있다. - docker의 dockerfile 및 compose를 통해 다중 컨테이너를 관리하여 테스트를 위한 일관된 환경을 제공한다. - 각 컨테이너는 docker 네트워크를 통해 연결되어 있는 상태가 된다. - 프로토 타입 위주로 구현이 되었으며 https 적용 시 nginx를 추가로 구현할 예정이다. react (frontend) - 사용자(클라이언트)의 화면을 구성한다. - container에서 3000번 포트를 통해 접근한다. - 사용자가 요청을 보내면 서버로 해당 요청을 전달 및 응답을 진행한다. spring boot (backend) - 클라이언트 서버에서 넘어온 요청에 관한 데이터 처리 및 응답값을 전송하는 역할이다. - 8080 포트를 통해 접근이 가능하다. mysql (database) - 사용자의 데이터를 저장하는데 사용이 된다. - 3306 포트를 통해 접근이 가능하며, 서버에서 요청한 쿼리에 맞춰서 데이터를 전달하는 역할을 한다. redis (key-value database) - 이메일 인증 및 refresh 토큰 관리를 위해 사용한다. - 6379 포트로 연결이 되어있다.