HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🙂
달리팀 노션
/
🎰
달리 1팀
/
📝
기능명세서
📝

기능명세서

날짜
Oct 19, 2021
참여자

주요기능

  • 메인탭 - 날씨 API 연동, 현재 온도 기반 포스트 조회, 트렌딩 - 강푸름
  • 탐색탭 - 댓글, 좋아요, 팔로우, 태그 검색
  • 업로드탭 - 게시물 업로드, 태그 추가 기능, 평가하기
  • 마이페이지(내피드, 다른사람 피드) - 프로필 수정, 팔로우, 기온별 포스트 노출 - 서진환
 

# 종현 기능

  • 랜딩페이지
  • 로그인
  • 회원가입
  • 로딩페이지 - 로딩 스피너에 문구 삽입
  • 토스트 알림
  • 유틸성 함수, axios 호출 등등.., 라우터
 
라우트 페이지 : 첫화면, 회원가입, 로그인, 메인, 탐색, 업로드, 마이페이지(유어페이지), 댓글페이지, 프로필수정
 
주요 기능 명세서
탭
화면이름/브랜치명
기능1
라우팅 경로
기능 설명
담당자
구현
진행상황
메인
기본
현재 날씨 정보 조회
/
- 날씨 API를 사용하여 현재기준 기온, 최저기온, 최고기온 및 문구를 화면 상단에 표시 - setInterval을 활용하여 정해진 간격마다 날씨 정보를 가져오도록 - 사용자가 업로드 할 때에는 그 시점의 날씨가 중요하므로 이 때는 바로 날씨 정보를 가져오도록
- setInterval 기능과 날씨 정보를 contextApi에 담아두는 기능 필요
시작전
메인
메인 화면 아래로 스크롤
- 메인 화면에서 아래로 스크롤 했을 때 프로필 사진과 현재 기온을 fixed로 보여줌
- UI 작업할 때 할 예정
메인
마이페이지 라우팅
- 메인화면에서 바로 마이페이지로 이동하여 프로필 수정 및 자신이 Pick 한 게시물을 볼 수 있게 함
- 이 부분은 공통 부분 인듯
메인
현재 기온의 포스트 조회
- 현재 기온을 기준 (실시간)으로, 다른 사용자들은 어떤 옷을 입었는지 확인할 수 있도록 포스트 조회 - 총 10~15개의 포스트를 조회 한 후 더 보기 버튼을 눌러 탐색페이지로 라우팅 처리
- 먼저 데이터 전체를 불러오도록 구현 하고 그 뒤에 작업
메인
트렌딩 포스트 조회
- 3일을 기준으로 좋아요가 많은 순으로 포스트 조회
메인
포스트 상세 조회
- 포스트를 클릭하여 상세페이지로 라우팅
메인
업로드 후
스타일 평가
/
- 자신이 업로드한 포스트가 있을 경우 오늘 옷차림에 대한 평가를 할 수 있다. (좋았어요, 추웠어요, 더웠어요) 이 때 평가하는 부분은 모달창으로 - 아직 평가하지 않은 항목이 있을 경우 업로드 하지 못하도록, 평가 모달띄우기) - 자신이 업로드한 포스트에 대해 평가했을 경우 스타일 평가 버튼 숨김
탐색
탐색
검색
- 검색은 태그 or 유저 단위로 검색
탐색
검색 결과 조회
- 검색 결과 포스트를 카드 리스트 형태로 조회 - 검색 결과 포스트에 각종 정보 표시 (날씨, 좋아요, 팔로우, Pick, 평가) - 조회는 최근 순으로
탐색
팔로우
- 검색 결과 포스트에서 사용자 팔로우 가능 (이미 팔로우 한 상대라면 언팔로우할 수 있도록)
탐색
Pick
- 검색 결과 포스트에서 Pick 가능 (이미 Pick한 포스트라면 un Pick할 수 있도록)
탐색
댓글 영역
- 댓글 영역(댓글 개수)을 클릭하여 댓글 보기 페이지로 라우팅
탐색
태그 노출
- 검색결과 포스트영역에 태그 노출
탐색
탐색 - 댓글
댓글 리스트 노출
- 해당 게시글의 댓글 리스트(유저 프로필, 유저 닉네임, 댓글)를 가져와서 노출 - 댓글 리스트는 무한스크롤로 15개씩 불러오기
탐색
댓글 유저 프로필
- 댓글 유저 프로필 클릭 시, 해당 유저의 페이지로 이동
탐색
뒤로가기
- 뒤로가기 클릭 시, 이전페이지(검색값이 있다면 검색값 유지, 해당 게시물 위치)로 돌아가기
탐색
댓글 등록
- 한 글자 이상 입력 시 등록 가능 - 댓글 등록 시 최근 등록된 댓글이 상단에 노출
탐색
댓글 삭제 하기
- 내가 쓴 댓글에는 X 버튼 노출 - X 클릭 시 내가 쓴 댓글 삭제
탐색
탐색 - 댓글 - 완료버튼
활성화
- 한 글자 이상 입력 시 활성화
탐색
비활성화
- 아무것도 입력하지 않았을 경우 비활성화, 클릭 안됨
탐색
탐색
업로드
날씨 데이터 노출
- 업로드 탭 진입 시, 날씨 API 호출해서 현재기온, 최저기온, 최고기온, 날씨 받아와서 스토어에 저장, 화면에 현재기온, 일교차 노출
업로드
사진업로드
이미지 파일 업로드
- (모바일) 유저의 앨범에 접근 가능 - (PC) 드래그 앤 드랍으로도 파일 업로드 가능 - (공통) 세로형 이미지 - 이미지 파일만 업로드 가능하도록 구현
시작전
업로드
사진업로드 후
사진업로드 폼 대체
- 업로드한 이미지 미리보기 구현
업로드
사진업로드 후 이미지 수정
- 업로드한 이미지 클릭 시, 수정할 수 있도록 구현
업로드
사진업로드 에러
- 파일이 제대로 업로드 되지 않았을 때, [파일을 다시 선택해주세요] 문구 띄우기
업로드
태그
태그 선택 기능
- 컨셉 태그 제안 (포멀, 캐쥬얼, 스트릿, 댄디 등) - 태그 선택 시 색상 반전(체크박스로 구현) - 최소 1개 이상, 최대 6개 까지 선택 가능
업로드
태그 추가 기능
- 태그 추가 선택 후 input 생성, 해당 input 위치와 키보드와 겹치지 않게 설정 - 태그는 focusout, 엔터, 완료 클릭 시 추가됨 - 태그 추가 후, 선택된 상태가 디폴트
업로드
태그 선택 에러
- 태그를 6개 넘게 선택하려고 할 때, [태그는 6개까지 등록가능합니다.] 문구 띄우기
업로드
등록버튼
비활성화
- 사진이 업로드 되지 않았거나 태그가 선택되지 않은 경우, 비활성화 - 비활성화 상태에서 클릭 시, 에러메세지[사진을 등록해주세요, 태그를 선택해주세요] 띄우기
업로드
활성화
- 사진이 업로드되고, 태그가 1개 이상 선택되었을 때, 활성화
업로드
등록완료
게시물 등록 완료
- 게시물 등록 완료 시, 홈으로 라우팅 후,[오늘의 코디가 등록되었습니다.] 토스트 띄움
업로드
업로드
마이페이지
마이페이지-유저
뒤로가기
/user/:userName
Route 이전 페이지
마이페이지
유저 정보
유저 이름- 유저의 username을 보여줌
http://13.209.30.200/users/{userId} 의 username
마이페이지
유저 프로필- 유저가 설정한 프로필 이미지를 보여줌
마이페이지
유저 팔로워 - 유저를 팔로우 하는사람의 인원을 보여줌
http://13.209.30.200/users/{userId} 의 followers 갯수
마이페이지
유저 팔로잉 - 유저가 팔로우 하는 인원을 보여줌
http://13.209.30.200/users/{userId} 의 following 갯수
마이페이지
유저가 좋아요받은 숫자 - 유저가 올린 포스트의 좋아요 총 갯수를 보여줌
-고민-
마이페이지
마이페이지-프로필수정
버튼 클릭
/user/:userName/edit
Route 프로필 수정 페이지
마이페이지
프로필 이미지 수정
프로필 이미지를 수정한다.
POST isCover: false image: Binary
마이페이지
유저 풀네임 수정
여긴 묶기
유저 fullName을 변경한다.
PUT { "fullName": String, "username": String }
마이페이지
유저 이름 수정
유저 userName을 변경한다.
PUT { "fullName": String, "username": String }
마이페이지
유저 비밀번호 수정
유저의 password를 변경한다.
PUT { "password": String }
마이페이지
유어페이지-팔로우 전
Follow 버튼 보여주기
Follow 버튼을 누르면 팔로우가 된다. 실시간으로 팔로워 팔로잉 정보 변경
POST { "userId": String }
마이페이지
유어페이지-팔로우 후
Following 버튼 보여주기
Following 버튼을 누르면 언팔로우가 된다. 실시간으로 팔로워 팔로잉 정보 변경
DEL { "id": String }
마이페이지- 탭
유저의 옷장
유저의 옷 사진들을 보여준다
유저의 posts 목록 가져오기
유저가 픽한 사진들
유저가 픽한 사진들을 보여준다.
GET http://13.209.30.200/users/{userId} likes 가져오기
마이페이지-사진
온도 탭
현재 온도
온도의 구간별로 사진의 온도데이터에 따라 가져온다. 현재온도 기준으로 +-1
1. 카테고리가 있다면 온도별 카테고리를 가져와서 보여주면 된다. 2. 카테고리가 없다면 유저의 전체 Posts를 가져와 filter를 사용하여 가져온다.
사진 데이터를 보여주기
/user/:userName
필터된 사진 데이터를 최근순으로 보여준다.
필터한 데이터를 createdAt을 기준으로 데이터를 뿌린다.
사진 클릭
Route 상세 페이지로
/user/:userName/post/:postId
온도가 위로 향할수 있도록 애니메이션