HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🧚
[1기]최종 프로젝트 데브코스/
🏄‍♂️
[팀8] 어푸(Ah puh) - Surf/
📙
전체 스크럼/2주차 프로젝트 진행 현황/
프로젝트 진행 현황

프로젝트 진행 현황

🟣 FE


├── README.md
├── __mocks__
│   └── next
│       ├── image.js
│       ├── link.js
│       └── router.js
├── components
│   ├── base
│   │   ├── Avatar
│   │   ├── Badge
│   │   ├── Dropdown
│   │   ├── Input
│   │   ├── Loading
│   │   ├── Logo
│   │   ├── Modal
│   │   ├── Text
│   │   ├── Textarea
│   │   ├── Toggle
│   │   ├── Upload
│   │   └── index.js
│   ├── common
│   │   ├── Header
│   │   ├── Navbar
│   │   └── index.js
│   └── domain
│       ├── AddSurfModal
│       ├── AreaChartComponent
│       ├── Calendar
│       ├── CalendarCard
│       ├── Carot
│       ├── CategoryCard
│       ├── ContentBox
│       ├── DashboardCard
│       ├── DatePicker
│       ├── EditAboutMe
│       ├── HeatmapChartComponent
│       ├── InputItem
│       ├── NoticeCard
│       ├── Post
│       ├── PostDetail
│       ├── Profile
│       ├── RadialBarChartComponent
│       ├── ScoreSlider
│       ├── SkeletonBox
│       ├── Tabs
│       └── index.js
├── constants
│   ├── DropdownData.js
│   ├── PostData.js
│   └── environment.js
├── hooks
│   ├── index.js
│   ├── useForm.js
│   ├── useHover.js
│   └── useToggle.js
├── jsconfig.json
├── next.config.js
├── package.json
├── pages
│   ├── 404
│   │   ├── index.jsx
│   │   └── style.js
│   ├── _app.jsx
│   ├── _document.jsx
│   ├── categorymanage
│   │   └── index.jsx
│   ├── dashboard
│   │   ├── index.jsx
│   │   └── style.js
│   ├── explore
│   │   └── index.jsx
│   ├── index.jsx
│   ├── login
│   │   └── index.jsx
│   ├── main.jsx
│   ├── mypage
│   │   ├── edit
│   │   ├── index.jsx
│   │   └── style.js
│   ├── posts
│   │   ├── [month]
│   │   ├── all
│   │   └── new
│   └── signup
│       ├── index.jsx
│       └── style.js
├── public
│   ├── favicon.ico
│   ├── fonts
│   │   ├── AppleSDGothicNeo
│   │   └── Frutiger
│   ├── images
│   │   ├── loadingAnimation.json
│   │   ├── logo
│   │   ├── sample.jpeg
│   │   ├── surfPapa.png
│   │   └── upload.svg
│   ├── lottie
│   │   └── surfing-poodle.json
│   └── vercel.svg
├── stories
│   ├── base
│   │   ├── Avatar.stories.jsx
│   │   ├── Badge.stories.jsx
│   │   ├── Dropdown.stories.jsx
│   │   ├── Input.stories.jsx
│   │   ├── Loading.stories.jsx
│   │   ├── Logo.stories.jsx
│   │   ├── Text.stories.jsx
│   │   ├── Textarea.stories.jsx
│   │   ├── Toggle.stories.jsx
│   │   └── Upload.stories.jsx
│   ├── common
│   │   ├── Header.stories.jsx
│   │   └── Navbar.stories.jsx
│   ├── domain
│   │   ├── AreaChartComponent.stories.jsx
│   │   ├── Calendar.stories.jsx
│   │   ├── Carot.stories.jsx
│   │   ├── CategoryCard.stories.js
│   │   ├── ContentBox.stories.jsx
│   │   ├── DashboardCard.stories.jsx
│   │   ├── DatePicker.stories.jsx
│   │   ├── EditAboutMe.stories.jsx
│   │   ├── HeatmapChartComponent.stories.jsx
│   │   ├── NoticeCard.stories.jsx
│   │   ├── Post.stories.jsx
│   │   ├── PostDetail.stories.jsx
│   │   ├── RadialChartComponent.stories.jsx
│   │   ├── ScoreSlider.stories.jsx
│   │   ├── SkeletonBox.stories.jsx
│   │   └── Tabs.stories.jsx
│   └── hooks
│       ├── useForm.stories.jsx
│       ├── useHover.stories.jsx
│       └── useToggle.stories.jsx
├── styles
│   ├── globals.css
│   └── theme.js
├── utils
│   ├── SampleData
│   │   ├── AreaChartComponent1.js
│   │   ├── AreaChartComponent2.js
│   │   ├── CategoryCard.js
│   │   ├── CategoryManage.js
│   │   ├── CategoryScore.js
│   │   ├── Explores.js
│   │   ├── Mypage.js
│   │   ├── PostDetail.js
│   │   ├── Posts.js
│   │   ├── RadialChartComponent.js
│   │   └── heatmapChart.js
│   ├── apis
│   │   ├── api.js
│   │   ├── category
│   │   ├── fetcher.js
│   │   ├── follow
│   │   ├── like
│   │   ├── post
│   │   └── user
│   └── validation
│       └── index.js
├── yarn-error.log
└── yarn.lock
  • 컴포넌트 개발(components)
    • 베이스 컴포넌트 개발 완료
    • 도메인 컴포넌트
    • 페이지 마크업 , 더미데이터 연결 👇🏻
      • Must Have 1
      태그
      순위
      Done
      도메인
      이미지
      1 Depth
      2 Depth
      3 Depth
      4 Depth
      Must Have
      1순위
      Done
      메인
      localhost_3000_(iPhone X).png
      사용자는 성장 곡선을 조회할 수 있다
      1. 한 주/ 한 달/ 일 년 단위로 기간 설정 가능
      2. 기록 필터링과 곡선 필터링 연동됨 (드롭다운에서 특정 성장곡선을 선택하면 성장곡선 표도 리렌더링)
      3. 특정 성장 곡선 선택되면 해당 성장 곡선 그래프에 마크가 나타남 (2순위)
      Must Have
      1순위
      Done
      메인
      사용자는 작성한 기록을 조회할 수 있다
      1. 전체 / 성장곡선 별로 필터링해서 조회할 수 있다
      Must Have
      1순위
      Done
      대시보드
      스크린샷 2021-12-14 오후 11.44.18.png
      사용자는 기록에 대한 통계를 조회할 수 있다
      1. 전체 카테고리 개수, 기록 개수, 점수 평균, 기록 Heat map을 조회할 수 있다
      2. 카테고리 별 통계(기록 개수, 평균 점수 등)를 조회할 수 있다
      Must Have
      1순위
      Done
      전체 카드 페이지
      스크린샷 2021-12-13 오전 12.29.09.png
      사용자는 원하는 년도를 선택해 기록을 조회할 수 있다.
      1. 월별 카드를 슬라이드 형태로 조회할 수 있다.
      2. 사용자는 캘린더 버튼을 눌러 해당 월의 캘린더를 조회할 수 있다.
      Must Have
      1순위
      Done
      월별 카드 페이지
      스크린샷 2021-12-14 오후 11.41.33.png
      사용자는 월별 기록을 상세조회할 수 있다.
      1. 일별 카드가 내림차순 형태로 정렬되어 보여지고 한번 더 클릭하면 오름차순할 수 있다.
      Must Have
      1순위
      Done
      카드 읽기 페이지
      사용자는 일별 기록을 상세조회할 수 있다.
      1. 프로필, 닉네임, 등록한 파일(1장) / 날짜 / 카테고리 / 성장 수치
      Must Have
      1순위
      Done
      카드 읽기 페이지
      스크린샷 2021-12-14 오후 11.39.31.png
      사용자는 메뉴 버튼을 눌러 카드 관리를 할 수 있다.
      1. 기록 수정, 삭제
      Must Have
      1순위
      Done
      카드 작성 페이지
      2021-12-14_23-38-04.png
      category, score, title, content, (image)를 작성할 수 있다
      Must Have
      1순위
      Done
      프로필 수정 페이지
      localhost_3000_mypage(iPhone X).png
      닉네임, 비밀번호(optional), 프로필 이미지 수정하기
      계정 공개/비공개 선택(수정 버튼 눌러서 들어갔을 때 설정)
      Must Have
      1순위
      Done
      개인 페이지
      개인정보(프로필이미지, 이메일, 닉네임) 가져오기(get)
      Must Have
      1순위
      Done
      개인 페이지
      스크린샷 2021-12-14 오후 11.36.29.png
      자기소개 내용을 작성할 수 있다.
      1. url(개인 블로그 링크등)을 추가할 수 있다.
      2. 내용 추가
      Must Have
      1순위
      Done
      개인 페이지
      공개된 카테고리를 확인할 수 있다
      Must Have
      1순위
      Done
      404 페이지
      localhost_3000_asdfasdf(iPhone X).png
      유효하지 않은 url로 접속했을 때
      Must Have
      2순위
      Done
      메인
      사용자는 성장 곡선을 클릭해서 해당 성장 곡선의 기록을 조회할 수 있다
      Must Have
      2순위
      Done
      둘러보기 페이지
      2021-12-14_23-39-28.png
      사용자는 타인의 기록을 조회할 수 있다.
      1. 파일(1장) / 타인의 닉네임 / 성장 수치 / 좋아요 수 / 내용을 볼 수 있다.
      2. 최신 기록이 내림차순으로 조회된다.
      Must Have
      2순위
      Done
      둘러보기 페이지
      사용자는 타인의 프로필을 눌러 개인 페이지로 이동할 수 있다.
      Must Have
      2순위
      Done
      카테고리 관리 페이지
      스크린샷 2021-12-14 오후 11.55.28.png
      카테고리의 정보를 수정하거나 삭제할 수 있다
      1. 카테고리의 공개 여부 설정, 이름 변경, 삭제 가능
      Must Have
      2순위
      Done
      개인 페이지
      스크린샷 2021-12-14 오후 11.36.29.png
      dashboard 공개/비공개를 설정할 수 있다.
      Should Have 1
      태그
      순위
      도메인
      1 Depth
      2 Depth
      3 Depth
      Should Have
      1순위
      둘러보기, 개인 페이지
      사용자는 다른 사용자를 팔로우할 수 있다/ 다른 사용자가 나를 팔로우할 수 있다
      1. 상대방이 나를 팔로우하면 알림을 받을 수 있다 (2순위)
      Should Have
      1순위
      월별 카드 페이지, 카드 읽기 페이지
      사용자는 자신이 작성한 기록을 즐겨찾기에 등록할 수 있다
      1. 카드 읽기 페이지의 메뉴를 눌러서 즐겨찾기에 등록할 수 있다.
      Should Have
      1순위
      둘러보기, 카드 읽기 페이지
      사용자는 둘러보기에서 다른 사용자의 글에 좋아요를 누를 수 있다/ 다른 사용자가 나의 글에 좋아요를 누를 수 있다
      1. 상대방이 내 기록에 좋아요를 누르면 알림을 받을 수 있다 (2순위)
      Should Have
      2순위
      전체(헤더)
      사용자는 실시간 알림을 받을 수 있다
      1. 상대방이 나를 팔로우하거나 나의 기록에 좋아요를 누르면 실시간 알림을 받을 수 있다
      Should Have
      2순위
      메인
      사용자는 프로필 사진으로 알림 여부를 확인할 수 있다
      Should Have
      2순위
      전체 카드 페이지
      사용자는 오늘 날짜를 눌러 해당 월의 카드로 돌아올 수 있다.
      Should Have
      3순위
      카테고리 관리 페이지
      카테고리의 색상을 수정할 수 있다.
      Could Have 1
      태그
      순위
      도메인
      1 Depth
      2 Depth
      3 Depth
      Could Have
      1순위
      기록
      1. 사용자는 검색으로 원하는 기록 키워드를 검색할 수 있다. (월별 카드를 눌렀을 때)
      Could Have
      1순위
      둘러보기 페이지
      사용자는 검색으로 원하는 계정을 검색할 수 있다.
      Could Have
      2순위
      개인 페이지
      첨부파일 기록 가져오기
      Could Have
      2순위
      개인 페이지
      공개할 이미지 가져오기
      Could Have
      2순위
      파일 페이지
      이미지 모아보기, 파일 모아보기
      스크린샷
      • 메인 페이지
          •  

🔵 BE

API 설계
도메인
기능
HTTP method
Path
Request / Response
응답 코드
완료
담당자
메모
USER
로그인
POST
/users/login
200
완료
USER
회원가입
POST
/users
201
완료
USER
개인 정보 수정
PUT
/users
200
완료
USER
회원 정보 조회
GET
/users/{userId}
200
완료
USER
회원 탈퇴
DELETE
/users
204
완료
POST
게시글 등록
POST
/posts
201
완료
POST
게시글 수정
PUT
/posts/{postId}
200
완료
POST
게시글 삭제
DELETE
/posts/{postId}
204
완료
POST
게시글 상세 조회
GET
/posts/{postId}
200
완료
POST
검색 (보류)
GET
💥특정 사용자, 기간(년, 월), 키워드(엘라스틱서치) 검색 기능(후순위)
POST
해당년도 게시글 개수 정보 조회
GET
/posts/calendarGraph?year={year}
200
완료
1. 카드 페이지 버튼 누를 때 - 1년치 한 번에 보냄 2. surfing stat(잔디밭)
POST
일년치 게시글 점수 조회
GET
/posts/score?userId={userId}
200
- 메인페이지 그래프 (카테고리 미 선택시) 타회원 그래프 조회 가능 (userId) 카테고리 선택하면 categoryId로 필터링
POST
즐겨찾기
POST
/posts/{postId}/favorite
200
POST
즐겨찾기 취소
DELETE
/posts/{postId}/favorite
200
POST
한달 전체 게시글 조회
GET
/posts/month?year={year}&month={month}
200
완료
- 카드 페이지에서 카드를 눌렀을 때 ex> URL?year=2016&month=8 - userId는 토큰
POST
전체 게시글 조회
GET
/posts/all?userId={userId}
200
완료
- 10개씩 무한 스크롤(커서 페이징)
POST
카테고리별 게시글 전체 조회
GET
/posts?userId={userId}&categoryId={categoryId}
200
완료
- 10개씩 무한 스크롤(커서 페이징)
POST
팔로우 한 사용자 게시글 전체 조회 (둘러보기)
GET
/follow/posts
200
완료
- 둘러보기 페이지
CATEGORY
카테고리 등록
POST
/categories
201
완료
CATEGORY
카테고리 수정
PUT
/categories/{categoryId}
200
완료
CATEGORY
카테고리 삭제
DELETE
/categories/{categoryId}
204
완료
CATEGORY
카테고리 전체 조회
GET
/categories
200
완료
CATEGORY
해당 사용자의 대시보드 정보
GET
/categories/dashboard?userId={userId}
200
완료
완료
FOLLOW
팔로우
POST
/follow
201
완료
FOLLOW
언팔로우
DELETE
/follow/{followId}
204
완료
FOLLOW
특정 사용자를 팔로우 한 사람 목록 전체 조회
GET
/users/{userId}/followers
200
완료
FOLLOW
특정 사용자가 팔로잉 한 사람 목록 전체 조회
GET
/users/{userId}/following
200
완료
LIKE
게시글 좋아요
POST
/likes/{postId}
200
완료
LIKE
게시글 좋아요 취소
DELETE
/likes/{likeId}
204
완료
 
💥 TODO : 소켓 통신을 이용한 알림 기능