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

6W 기능명세서

구현하고자 하는 항목중 S3의 경우 AWS SImple Storage Service로 인터넷을 통해 어디서나 데이터를 저장하고 검색할 수 있는 저장공간입니다. 현재 서비스 구현의 경우 이미지와 관련된 부분이 따로 존재하지 않습니다. 이유는 기존의 데이터를 관리하는 데이터베이스에서 이미지를 저장하는 경우 비용적 측면에서 안좋기에 이미지는 따로 저장을 진행해야하는데 이때 사용하는 것이 S3입니다. S3의 경우 기존 기능 중에 이미지가 들어가는 기능에 이미지 관련 기능을 추가적으로 진행하는 것이기에 해당 주요 기능만 작성하였습니다.

주제 : S3
기능 제목 주 기능 상세 기능 상호 작용 사용자 인터페이스
1. 이미지 저장 이미지 저장 사용자가 저장하려고 하는 이미지를 S3에 저장 후 이미지 URL을 반환한다. 1. 사용자는 사용하려는 이미지를 서비스에 올린다. 2. 사용자가 이미지를 올리면 해당 이미지를 저장한다. 3. 저장된 이미지의 위치가 존재하는 URL을 반환한다. 4. 저장된 이미지의 URL을 사용해서 데이터에 넣어준다.
2. 이미지 삭제 이미지 삭제 사용자가 삭제 요청한 이미지를 삭세한다. 1. 사용자가 해당 이미지의 삭제를 요청한다. 2. 사용자가 전달한 이미지와 요청 값을 서버에 전달한다. 3. S3에 해당 이미지를 삭제 요청을 전달한다. 4. 사용자가 요청한 데이터에서 해당 URL부분을 제거한다.
3. 이미지 수정 저장된 이미지 교체 사용자가 수정을 요청한 경우 해당 이미지를 사용하는 데이터에서 해당 URL을 변경한다. 1. 사용자는 수정하려는 데이터에 접근한다. 2. 수정하고자 하는 이미지를 서비스에 올린다. 3. 수정하고자 하는 이미지는 S3에 저장한다. 4. 이미지는 저장이 되고 URL을 반환한다. 5. URL은 데이터에 수정되어서 전달이 된다. 6. 기존의 URL 및 S3에 요청하여 기존의 데이터는 삭제 요청을 한다.
주제 : 채팅
기능 제목 주 기능 상세 기능 상호 작용 사용자 인터페이스
1. 채팅방 만들기 채팅방 만들기 사용자 간의 채팅방 생성 기능 1. 게시판 기능에서 사용자는 채팅방 만들기를 누른다. 2. 채팅방 만들기를 진행 시 해당 게시판 내부에서 인원을 선택한다. 3. 선택된 인원을 포함하여 채팅방이 생성이 된다.
2. 채팅 진행하기 채팅 진행하기 사용자 간의 채팅방 내에서 채팅 진행 1. 만들어진 채팅방에서 사용자들은 채팅 방 내에서 채팅 기능을 수행할 수있다. 2. 각자 채팅을 진행하면 사용자가 입력한 메시지는 다른 상대방에게 전달이 된다.
3. 채팅방 삭제 채팅방 삭제하기 대화를 끝낸 사용자가 채팅방을 나가는 기능 1. 사용자는 채팅방에서 채팅방 나가기 버튼을 누른다. 2. 사용자가 해당 버튼을 누르면 해당 사용자는 방에서 나가고 사용자의 채팅 리스트에서 해당 채팅방은 사라진다.
4. 채팅방 조회 채팅방 조회하기 본인이 속한 채팅방 리스트 조회하기 1. 사용자는 채팅 버튼을 누르면서 채팅 리스트에 접근할 수 있다. 2. 사용자가 접근을 하면 사용자의 정보를 서버에 전송한다. 3. 서버는 주어진 사용자의 정보를 바탕으로 채팅방 리스트를 반환한다. 4. 사용자는 반환된 리스트를 통해 본인이 속한 채팅방을 알 수 있다.
5. 채팅방 입장 채팅방 입장하기 채팅을 위한 채팅방에 입장하는 기능 1. 사용자는 채팅 리스트에서 원하는 채팅방을 클릭한다. 2. 사용자는 해당 채팅방에 입장한다.

6W-기술명세서

프론트엔드

게시물

기능 제목 게시물 작성하기
구현 기간 24.05.10. ~ 24.05.11.
담당 팀원 박승은
구현 단계 표시 개발 완료
알고리즘 1. 사용자가 함께 재료 공유할 사람을 모집하기 위하여 게시글을 생성한다. 2. 게시물 작성하기 버튼을 누른다. 3. 게시물을 작성하기 위하여 필요한 제목과 내용을 기입한다. 4. 전송 버튼을 누르면 await fetch에 url을 기입하여 ‘POST’ 유형을 이용하여 사전에 정의한 변수를 기반으로 데이터를 전송한다. 5. 데이터가 제대로 전송되었는지 response 변수에 응답을 받는다. 5-1. 응답이 승인되면 게시물 작성을 성공했다는 ok 사인을 받게 되며, 토큰 설정과 게시물 작성을 성공했다는 팝업을 띄운다. 5-2. 응답이 승인이 안되면 오류 팝업을 띄운다.
기능 제목 게시물 전체 조회
구현 기간 24.05.12. ~ 24.05.13.
담당 팀원 박승은
구현 단계 표시 개발 완료
알고리즘 1. 사용자가 내비게이션바에 재료 공유 버튼을 클릭하면 게시물이 전체 조회된다. 2. await fetch에 사전에 정의한 url을 기입하여 ‘GET’ 유형을 이용하여 변수를 기반으로 데이터를 받아온다. 3. 응답이 승인되었는지 확인하기 위하여 response 변수를 사용하여 확인한다. 3-1. 응답이 확인되면 변수를 이용하여 적절한 곳에 데이터를 받아와 사용한다. 3-2. 응답이 확인되지 않으면 오류가 발생했다는 팝업을 띄운다.
기능 제목 실시간 게시물 조회
구현 기간 24.05.12. ~ 24.05.13.
담당 팀원 박승은
구현 단계 표시 개발 완료
알고리즘 1. 메인 화면에 실시간 게시물을 약 5개정도 노출된다. 2. 서버에게 await fetch를 이용하여 사전에 정의한 url을 기입하고 ‘GET’ 유형을 이용하여 변수를 기반으로 데이터를 받아온다. 3. 서버는 실시간으로 올라온 게시 약 5개를 클라이언트로 보낸다. 4. 응답이 승인되었는지 확인하기 위하여 response 변수를 사용하여 확인한다. 4-1. 응답이 확인되면 변수를 이용하여 적절한 곳에 데이터를 받아와 사용한다. 4-2. 응답이 확인되지 않으면 오류가 발생했다는 팝업을 띄운다.
기능 제목 게시물 상세 조회
구현 기간 24.05.10. ~
담당 팀원 박승은
구현 단계 표시 개발 진행 중
알고리즘 1. 실시간 게시물 조회나 전체 게시물 조회 중 하나의 게시물을 클릭하면 상세 게시물이 뜬다. 2. 서버에게 await fetch를 이용하여 사전에 정의한 url을 기입하고 ‘GET’ 유형을 이용하여 변수를 기반으로 데이터를 받아온다. 3. 사용자의 프로필 사진과 닉네임, 게시물의 제목과 내용의 데이터를 가져온다. 3-1. 이 화면에 댓글 기능을 첨부한다. 4. 응답이 승인되었는지 확인하기 위하여 response 변수를 사용하여 확인한다. 4-1. 응답이 확인되면 변수를 이용하여 적절한 곳에 데이터를 받아와 사용한다. 4-2. 응답이 확인되지 않으면 오류가 발생했다는 팝업을 띄운다.

백엔드

채팅

기능 제목 채팅방 만들기
구현 기간 24.05.11. ~
담당 팀원 김민수
구현 단계 표시 개발 진행중
알고리즘 1. 사용자는 주어진 사용자들을 포함하여 채팅방을 만든다. 2. 사용자는 서버에 본인의 토큰과 사용자들의 닉네임 리스트, 해당 게시글의 아이디를 전송한다. 3. 주어진 데이터는 HTTP POST 요청과 컨트롤러로 넘어온다. 4. 넘어온 데이터를 바탕으로 채팅방 서비스에 전달한다. 5. 사용자들의 정보와 게시글의 번호를 바탕으로 채팅방을 만든다. 6. 해당 채팅방을 레포지토리를 통해 저장한다. 7. 생성이 완료되면 사용자에게 status code 200을 전송한다.
기능 제목 채팅방 조회하기
구현 기간 24.05.11. ~
담당 팀원 김민수
구현 단계 표시 개발 진행중
알고리즘 1. 사용자는 본인이 가지고 있는 채팅방을 조회하려고 한다 2. 사용자는 본인이 가진 채팅방 조회를 위해 해당 버튼을 클릭한다. 3. 버튼에 연결된 HTTP 요청이 서버로 전송된다. 4. 요청과 사용자의 토큰이 서버로 전송된다. 5. 요청에 맞게 서비스, 레포지토리 레이어에서는 사용자의 채팅방 아이디를 담은 리스트를 반환한다. 6. 사용자는 해당 리스트를 통해 채팅방을 확인한다.
기능 제목 채팅방 삭제하기
구현 기간 24.05.11. ~
담당 팀원 김민수
구현 단계 표시 개발 진행중
알고리즘 1. 사용자는 해당 HTTP 요청과 roomId를 서버로 전송한다. 2. 서버는 해당 토큰의 값을 받아 사용자를 식별한다. 3. 식별된 사용자가 해당 채팅방에 존재 시 사용자를 제거한다. 4. HTTP status code를 반환한다.
기능 제목 채팅방 입장하기
구현 기간 24.05.11. ~
담당 팀원 김민수
구현 단계 표시 개발 진행중
알고리즘 1. 사용자는 해당 채팅방을 입장하기 위해 채팅방 목록에서 해당 채팅방을 클릭해야한다. 2. 사용자가 해당 채팅방을 클릭하면 사용자 정보를 서버에 요청값으로 넘긴다. 3. 서버에서는 해당 사용자의 아이디가 채팅방에 접근할 수 있는 지 확인한다. 4. 사용자 확인 후 해당 사용자가 접근 권한이 있으면 RESPONES_OK를, 권한이 없으면 Exception을 반환한다.
기능 제목 채팅하기
구현 기간 24.05.11. ~
담당 팀원 김민수
구현 단계 표시 개발 진행중
알고리즘 1. 사용자는 채팅방 입장 시 웹소켓에 연결된다. 2. 사용자는 메시지를 작성한다. 3. 사용자는 작성한 메시지를 send로 보낸다. 4. 작성된 메시지는 서버에서 처리후 “/topic/**”의 url을 가진 현 채팅방에 반환된다.

이미지

기능 제목 레시피 이미지 저장하기
구현 기간 24.05.11. ~
담당 팀원 임세현
구현 단계 표시 개발 진행중
알고리즘 1. 사용자가 레시피 작성을 마친 뒤 레시피 정보를 담은 JSON과 이미지파일을 mutipartfile 형태로 보내준다. 2. 받은 파일의 파일명을 형식에 알맞게 생성 한다. 3. 생성한 파일명과 파일을 통해 S3의 image/recipeImg 디렉토리에 저장한다. 4. 저장이 완료되면 해당 이미지의 URL을 반환해 저장한다.
기능 제목 레시피 이미지 수정하기
구현 기간 24.05.11. ~
담당 팀원 임세현
구현 단계 표시 개발 진행중
알고리즘 1. 사용자가 레시피 수정을 마친 뒤 레시피 정보를 담은 JSON과 이미지파일을 mutipartfile 형태로 보내준다. 2. 받은 파일의 파일명을 형식에 알맞게 생성 한다. 3-1.기존의 레시피 이미지 파일을 S3에서 삭제한다. 3-2. 생성한 파일명과 파일을 통해 S3의 image/recipeImg 디렉토리에 저장한다. 4. 저장이 완료되면 해당 이미지의 URL을 반환해 수정한다.
기능 제목 레시피 이미지 삭제하기
구현 기간 24.05.11 ~
담당 팀원 임세현
구현 단계 표시 개발 진행중
알고리즘 1. 이미지를 수정할 때나 요청을 받고 이미지가 저장된 이후에 로직에서 오류가 발생한 경우 S3 저장소에서 해당 이미지를 삭제한다.
기능 제목 프로필 이미지 저장하기
구현 기간 24.05.11 ~
담당 팀원 임세현
구현 단계 표시 개발 진행중
알고리즘 1. 사용자가 레시피 작성을 마친 뒤 레시피 정보를 담은 JSON과 이미지파일을 mutipartfile 형태로 보내준다. 2. 받은 파일의 파일명을 형식에 알맞게 생성 한다. 3. 생성한 파일명과 파일을 통해 S3의 image/profileImg 디렉토리에 저장한다. 4. 저장이 완료되면 해당 이미지의 URL을 반환해 저장한다.
기능 제목 프로필 이미지 수정하기
구현 기간 24.05.11 ~
담당 팀원 임세현
구현 단계 표시 개발 진행중
알고리즘 1. 사용자가 레시피 수정을 마친 뒤 레시피 정보를 담은 JSON과 이미지파일을 mutipartfile 형태로 보내준다. 2. 받은 파일의 파일명을 형식에 알맞게 생성 한다. 3-1.기존의 레시피 이미지 파일을 S3에서 삭제한다. 3-2. 생성한 파일명과 파일을 통해 S3의 image/profileImg 디렉토리에 저장한다. 4. 저장이 완료되면 해당 이미지의 URL을 반환해 수정한다.
기능 제목 프로필 이미지 삭제하기
구현 기간 24.05.11 ~
담당 팀원 임세현
구현 단계 표시 개발 진행중
알고리즘 1. 이미지를 수정할 때나 요청을 받고 이미지가 저장된 이후에 로직에서 오류가 발생한 경우 S3 저장소에서 해당 이미지를 삭제한다.