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

기능 명세서

주제 : User
기능 제목 주 기능 상세 기능 상호 작용 사용자 인터페이스
1. 회원가입 E-mail 회원가입 1.1. 이메일 검증
1.2 회원정보 전달		 1. 사용자는 이메일을 통한 본인인증을 진행한다.
2. 사용자는 가입에 필요한 정보를 입력한다.
2-1. 사용자 ID와 닉네임이 중복인지 확인한다.
2-1-1. 중복된 데이터가 아니면 통과한다.
2-1-2. 중복된 데이터면 다시 입력을 받는다.
3. 사용자는 가입에 필요한 정보가 플랫폼에서 요구하는 양식에 맞는지 확인한다.
4. 사용자 정보에 맞게 가입이 된다.		 #1
2.로그인 사용자 정보를 통한 ID / PW 인증 받기 1.1 사용자 정보 확인 1. 사용자의 아이디와 비밀번호를 입력한다.
1-1. 회원이지만 아이디와 비밀번호 분실시, 찾기를 진행한다.
1-2. 회원이 아닐 시, 회원 가입을 진행한다.		 #2
주제 : Location
기능 제목 주 기능 상세 기능 상호 작용 사용자 인터페이스
1. 동네 정보 입력 지도를 통한 사용자의 위치 정보 저장 1.1 지도 위치 선택
1.2 위치정보 전달		 1. 지도에서 자동으로 마커가 사용자의 위치와 같도록 정렬한다.
2.사용자는 지도에 표시되어있는 마커를 자신의 위치가 맞는지 확인하여 맞는 버튼을 클릭한다.
2-1. ‘네 맞아요’ 버튼을 누른다면 레시피 전체 조회 화면으로 넘어간다.
2-2. ‘아니에요’ 버튼을 누른다면 다시 한번 사용자의 위치를 찾아 표시해준다.		 #3
#1 #2 #3
스크린샷 2024-04-09 01 19 04 스크린샷 2024-04-09 01 19 16 스크린샷 2024-04-09 01 19 28

기술 명세서

프론트엔드

아키텍처

스크린샷 2024-04-10 00 39 13

유저

기능 제목 로그인
구현 기간 24.04.04.~24.04.05.
담당 팀원 박승은
구현 단계 표시 구현 완료
알고리즘 0. 로그인 UI를 구현한다. (ID,PW)
1. 사용자는 로그인 화면에 접근 후 가입된 회원일 시, 아이디와 비밀번호를 입력한다.
2. 입력된 아이디와 비밀번호를 백엔드에게 사전에 지정된 변수에 담아 전송한다. (API 요청)
3. 승인 응답을 받게 되면 토큰을 받아와 로컬스토리지에 저장한다.
3-1. 승인을 받지 못 하면 로그인 실패로 아이디와 비밀번호를 다시 입력하라는 창을 띄운다.
3-2. 아이디와 비밀번호를 찾을 수 있는 기능을 구현한다.
4. 플랫폼 초기 화면으로 작성한 함수(setScreen)를 통해 화면을 전환한다.
기능 제목 회원가입
구현 기간 24.04.04~24.04.05. / 24.04.06. ~
담당 팀원 박승은
구현 단계 표시 개발 진행 중
알고리즘 0. 회원가입 UI를 구현한다.
1. 로그인하지 못한 사용자가 접근한다.
2. 설정할 프로필 사진을 가져온다.
3. 설정할 ID, PW, 닉네임, E-MAil을 입력한다.
3-1. 입력 시, 정규표현식으로 적절한 양식인지 판별한다.
3-2. 이메일 검증 과정을 진행한다.
4. 입력된 정보들을 백엔드에게 사전에 지정된 변수에 담아 전송한다. (API 요청)
5. 승인 응답을 받게 되면 리프레시 토큰을 받아와 로컬 스토리지에 저장한다.
6. 동네 정보 설정 화면으로 작성한 함수를 통해 화면을 전환한다.
기능 제목 정규표현식
구현 기간 24.04.09~24.04.10
담당 팀원 박승은
구현 단계 표시 구현 완료
알고리즘 1. 사용자로부터 이메일과 아이디를 입력받는다.
2. 입력받은 이메일과 아이디가 각각 정규표현식에 일치하는지 검사한다.
3. 모든 입력 값이 정규표현식에 부합하면, 사용자는 로그인을 진행한다.
3-1. 부합하지 않는 경우, 사용자에게 입력 오류를 팝업으로 알린 후 올바른 형식의 데이터를 입력하도록 요청한다.

동네 위치 정보

기능 제목 동네 위치 정보 서버에게 전송하기
구현 기간 24.04.09.~24.04.10.
담당 팀원 박승은
구현 단계 표시 구현 완료
알고리즘 1. navigator.geolocation.getCurrentPosition함수를 이용하여 사용자의 현재 위치를 가져온다.
2. 현재 위도와 경도를 location 변수에 저장한다.
3. 저장된 변수를 이용하여 네이버 지도 API에 키와 함께 역지오코딩 요청을 보낸다. (fetch함수를 사용한 GET방식 이용)
4. 현재 위치에 해당하는 주소 정보를 API응답으로 받는다.
5. 받은 주소 정보를 파싱하여(동으로 한정) 변수에 넣고 서버에게 전송한다.
기능 제목 위치 지도에 표시하기 + 마커 작업
구현 기간 24.04.09.~24.04.10.
담당 팀원 박승은
구현 단계 표시 구현 완료
알고리즘 1. location 상태가 변경될 때마다 네이버 지도 API를 초기화한다.
2. 현재 위치에 마커를 표시한다.
3. 지도의 중심은 현지 위치로 설정한다.
4. 사용자의 현재 위치의 주소 정보를 화면에 표시한다.
5. 사용자는 “현재 위치 가져오기” 버튼을 클릭하여 현재 위치를 업데이트할 수 있다.

백엔드

데이터베이스 스키마, ERD

스크린샷 2024-04-10 00 27 09

아키텍처

스크린샷 2024-04-10 00 19 33 스크린샷 2024-04-10 00 19 44
  1. client : 프론트엔드(리액트)
    1. 사용자의 요청을 받아서 server로 전송
  2. server : 백엔드(스프링)
    1. API URI를 통해 컨트롤러에 들어온 요청을 확인
    2. 들어온 요청을 서비스에 전달
    3. 서비스는 요청에 맞게 데이터베이스에 요청
  3. database : mysql, redis
    1. 요청에 맞는 쿼리 및 작업 진행 후 응답값을 전달
  4. Server
    1. database에서 찾은 데이터를 가공해서 클라이언트로 전송
  5. client
    1. 주어진 응답값을 사용자에게 도출

유저

기능 제목 이메일 검증코드 발송
구현 기간 24.03.30.~24.04.01.
담당 팀원 김민수
구현 단계 표시 구현 완료
알고리즘 1. 사용자는 이메일을 작성한다.
2. 프론트서버는 API 요청에 맞게 해당 이메일을 전달한다.
3. 전달된 요청에 맞게 값이 들어왔는지 확인한다.
4. 요청을 통해 들어온 email에 검증코드를 발송한다.
4-1. 검증코드를 redis에 저장한다.
5. 사용자에게 메일을 발송했다고 확인을 위해 응답값을 전송한다.
기능 제목 이메일 검증코드 확인
구현 기간 24.03.30.~24.04.01.
담당 팀원 김민수
구현 단계 표시 구현 완료
알고리즘 1.사용자는 이메일과 검증코드를 입력한다.
2.프론트엔드에서의 API 요청을 통해 백엔드로 전달받는다.
3.백엔드에서는 해당 요청을 전달받고 서비스 레이어로 전달한다.
4. 전달된 이메일을 key로 하여 redis에서 값을 가져온다.
5. 가져온 값이 사용자가 입력한 값과 동일한지 검증한다.
6-1. 검증 시 통과가 되면 redis에서 해당 key,value값을 삭제한다.
6-1-1.프론트엔드에 True 전달한다.
6-2. 검증 미통과 시 프론트엔드에 False 전달한다.
기능 제목 유저 ID 중복확인
구현 기간 24.04.01.~24.04.02.
담당 팀원 김민수
구현 단계 표시 구현 완료
알고리즘 1.사용자는 데이터를 입력한다.
2.프론트엔드에서의 API 요청을 통해 백엔드로 전달받는다.
3.백엔드에서는 해당 요청을 전달받고 유저 서비스 레이어로 전달한다.
4. 전달된 요청에서 ‘username’을 가져온다.
5. 가져온 값을 userRepository로 exist쿼리를 사용한다.
6-1. 레포지토리에 없는 경우 프론트엔드에 status code 200 전달한다.
6-2. 레포지토리에 있는 경우 프론트엔드에 exception 전달한다.
기능 제목 유저 닉네임 중복확인
구현 기간 24.04.01.~24.04.02.
담당 팀원 김민수
구현 단계 표시 구현 완료
알고리즘 1.사용자는 데이터를 입력한다.
2.프론트엔드에서의 API 요청을 통해 백엔드로 전달받는다.
3.백엔드에서는 해당 요청을 전달받고 유저 서비스 레이어로 전달한다.
4. 전달된 요청에서 ‘nickName’을 가져온다.
5. 가져온 값을 userRepository로 exist쿼리를 사용한다.
6-1. 레포지토리에 없는 경우 프론트엔드에 status code 200 전달한다.
6-2. 레포지토리에 있는 경우 프론트엔드에 exception 전달한다.
기능 제목 회원가입
구현 기간 24.04.01.~24.04.02.
담당 팀원 김민수
구현 단계 표시 구현 완료
알고리즘 1.사용자는 데이터를 입력한다.
2.프론트엔드에서의 API 요청을 통해 백엔드로 전달받는다.
3.백엔드에서는 해당 요청을 전달받고 유저 서비스 레이어로 전달한다.
4. 전달된 요청에서 ‘signupRequest’을 가져온다.
5-1. 가져온 값을 user 객체로 생성한다.
5-2. 생성된 값을 userRepository에 save한다.
6. 데이터베이스에 저장 후 프론트엔드에 status code 200 전달한다.
기능 제목 로그인
구현 기간 24.04.04.~24.04.06.
담당 팀원 김민수
구현 단계 표시 구현 완료
알고리즘 1.사용자는 데이터를 입력한다.
2.프론트엔드에서의 API 요청을 통해 백엔드로 전달받는다
3.백엔드에서는 해당 요청을 전달받고 유저 서비스 레이어로 전달한다.
4. 전달된 요청에서 ‘loginRequest’을 가져온다.
5-1. 가져온 requestBody에서 ‘username’을 가져온다
5-2. 가져온 username을 통해 데이터베이스에서 조회한다.
5-3. 조회된 user의 비밀번호와 사용자가 입력한 비밀번호가 일치하는지 확인한다.
5-3-1. 올바른 접근이면 프론트엔드 서버에 jwt 토큰을 발급한다.
5-3-1-1. redis 서버에 username:refresh 토큰으로 저장한다.
5-3-2. 잘못된 접근이면 프론트엔드 서버에 exception을 보낸다.
6. 데이터베이스에 저장 후 프론트엔드에 status code 200 전달한다.

동네 위치 정보

기능 제목 동네 위치 정보 저장
구현 기간 24.04.07.~24.04.08.
담당 팀원 임세현
구현 단계 표시 구현 완료
알고리즘 1.사용자가 자신의 위치를 확정한다.
2.프론트엔드에서의 API 요청을 통해 백엔드로 전달받는다.
3.백엔드에서는 해당 요청을 전달받고 Village 서비스 레이어로 전달한다.
4. 전달된 요청에서 ‘locationRequest’을 가져온다.
5-1. 가져온 값을 village 객체를 생성한다.
5-2 생성된 객체를 villageRepository를 통해 DB에 저장한다.
6. 프론트엔드에 status code 200 전달한다.

시큐리티

기능 제목 JWT 발급
구현 기간 24.04.04.~24.04.05.
담당 팀원 임세현
구현 단계 표시 구현 완료
알고리즘 1. 로그인 시 토큰 발급 요청이 발생한다.
2.username, 권한, 발급 시기, 만료 시기 등의 정보를 payload 부분에 넣는다.
3.암호화 알고리즘을 통해 전자 서명 및 암호화를 통해 토큰을 발급한다.
기능 제목 Security filter 설정
구현 기간 24.04.05.~24.04.06.
담당 팀원 임세현
구현 단계 표시 구현 완료
알고리즘 1.Spring Security 에서 제공하는 인증,인가를 위한 필터들의 모임인 Security Filter Chain에 Custom filter를 작성해 넣는다.
2.작성한 Custom filter는 jwt의 유효성과 권한을 판단한다.
3. 인증, 인가가 필요없는 요청은 필터를 통과 시킨다.
4-1. 유효하지 않는 토큰일 경우 프론트엔드 서버에 exception을 보낸다.
4-2. userType에 따라 권한을 security context에 저장한다.

|

스크린샷 2024-04-07 02 33 43
⚠️ **GitHub.com Fallback** ⚠️