HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🧚
[1기]최종 프로젝트 데브코스/
🏄‍♂️
[팀8] 어푸(Ah puh) - Surf/
📕
프론트엔드 회의록/
11/30 회의록

11/30 회의록

TODO

백엔드가 만들어 놓은 API 바탕으로 받고 싶은 데이터 점검하기(백엔드는 우리한테 전달해주기 위해 필요로 하는 데이터를 나열할 예정)
npm, node version 맞추기
레포지토리 다운
commit type 쓸거 정하기
.env 추가하기
moscow 추가하기
soft delete 대응할 수 있게 휴지통 페이지 추가하기

Convention

commit 규칙

emoji commit-type: commit message in korean
ex) 🐶 Feat: 커밋메시지는 한글로 쓰자~!!
14.17.6
Feat
Refactor
Fix
Style
Hotfix
 
  • 비동기 통신할 때 예외처리는 try-catch 를 쓴다
  • 커밋티즈 사용법
    • git add .
    • yarn cz // 커밋티즈 실행됨
    • 커밋 타입에 맞는 타이틀||아이콘 선택
    • short description에서 필요한 내용 작성하고 나머지는 그냥 엔터해서 넘어가면 됨
    • 마지막에 이슈 번호 걸수 있음 (#199)

Components

Base

  • text
  • button
  • avatar
  • heart toggle(좋아요에 쓰일 하트 토글)
  • icon button(연필, 톱니바퀴)
  • dropdown
  • input

domain

 
* 각 서프별로 공개/비공개 여부 체크 하는 기능 있어야 할거 같다
* 달력 점 말고 간단한 소개형태로 보여주면 좋을거 같아.

[점수 입력 관련]
* 최근 점수 전달해주면 거기서 옆에 버튼으로 +10 -10 같은 방식으로 입력하기 편하게 개선하면 좋을거 같아(고민해보기)
* 점수 입력 방식 슬라이드 바 형식으로 써보는건 어떤지??
* 절대적인 점수의 범위가 좀 큰거 같다. 
* 절대적인 숫자는 백엔드에서만 알고 있고 사용자는 상대적인 증감만 보여 주는 방식은 어떤가요?
* 0~10까지 변경하되 증감 단위를 0.5로 

* 그룹기능 + 팔로우 기능 동시에 지원

* 좋아요, 팔로우 알림 기능은 약간 후순위로 두는건 어떤가요?

* 버전1은 개인 기록 위주로 하고, 버전2는 공유 기능(팔로우, 그룹 등) 강화하는 방향으로 진행하면 어떨까?


======= 프론트 협의 완료 사항 ========
* 슬라이더+ input 같이 두기 + 최근점수를 최초값으로 둔다

피드백

점수 범위 & 점수 입력 방식 & 사용자에게 점수 노출
  1. 점수 범위
    1. 0~100 유지
    2. 증감 step을 3~5 정도로 조절
  1. 점수 입력 방식
    1. 원래의 절대 점수 입력 방식 유지
    2. 단, 슬라이더 도입
    3. 슬라이더의 default 값이 해당 surf의 가장 최근 점수
        4. ex) 저번 기록의 점수가 72점이었으면 슬라이더/ 점수가 72로 설정되어있음
  1. 사용자에게 점수 노출
    1. 프론트 쪽에서는 점수를 노출해야 된다고 생각
    2. 점수 노출 안하면 대시보드에 영향 끼침
팔로우&팔로잉 or 그룹
  1. 일단 팔로우&팔로잉 시스템이나 그룹 시스템 중 하나만 채택해야 할 거 같음
    1. 둘 다 관리하는 시스템 복잡함
  1. 팔로우&팔로잉
    1. 둘러보기에 불특정 다수가 올린 최근 기록이 노출됨
    2. 불특정 다수를 팔로우 할 수 있음
    3. 그룹 없음
  1. 그룹
    1. 링크 생성(미정) 등의 방식으로 원하는 사람끼리만 곡선/기록 공유
    2. 팔로우&팔로잉 없음
surf 별 공개 여부 설정
  1. 만약 surf 별 공개 허용한다면?
    1. 마이페이지에서 그래프 토글 삭제
    2. surf를 생성할 때(미정) / 메인페이지에서 surf 별로 공개/비공개 토글 가능
    3. 공개 여부 속성 (boolean)
    4. 일단 모든 surf 정보 가져 온 다음 속성 값이 true인 surf만 프론트에서 필터링해서 렌더링
달력 표시 방식
  • 모바일 / 데스크탑 버전 분리
  1. 모바일 버전
    1. 원래 방식 유지
    2. 모바일 유저 가독성 & UX 고려
  1. 데스크탑 버전
    1. 달력 크기가 커지니까 간략하게 기록마다 내용 보여줄 수 있음
        2. ex) 맥북 캘린더, 구글 캘린더 등등
 
 

페이지

메인 페이지 → 예임
  • 내 surf 목록 가져오기
    • 가져온 목록에서 surf id로 surf별 기록 가져오기
    • 1Y 정도 가져와서 프론트에서 기간 설정
  • 내 모든 기록 가져오기
    • 전체, 성장곡선 별 필터링
  • 글 작성 페이지로 라우팅
대시보드 페이지 → 예임
  • 내 surf 목록 가져오기
    • surf 목록 길이 반환
    • surf id로 surf별 기록 가져와서 점수 평균, 기록 개수 구하기
  • 내 모든 기록 가져오기
    • 프론트에서 점수 평균 구하기
    • surf별로 점수 평균 구하기
    • 기록들 날짜별로 그룹화해서 heat map 그리기 (잔디)
년도별 기록 조회 페이지 → 지영
  • 해당 년도의 월별 기록 개수 가져오기(get)
월별 기록 조회 페이지 → 지영
  • 해당 년도의 월별 기록 가져오기 (get)
기록 수정 페이지 → 지영
  • 내 surf 목록 가져오기 (get)
  • surf 추가하기 (post ? put?)
  • 파일, 성장 수치, 제목(?), 내용 수정하기 (put)
내 정보 페이지 → 찬민
  • 개인정보(프로필이미지, 이메일, 닉네임) 가져오기(get)
  • 닉네임 수정하기(put)
  • 비밀번호 수정하기(put)
  • 프로필 사진 수정하기(put)
  • 자기소개
    • url 추가
    • 내용 추가
    • 공개/비공개 선택(수정 버튼 눌러서 들어갔을 때 설정)
    • 차트 이미지 가져오기(1순위)
    • 공개할 이미지 가져오기(이미지 칸 자체를 2순위)
    • 첨부파일 기록 가져오기(2순위)
기록 작성 페이지 → + 찬민
  • type, score, title, content, (image) 보내기(post)
      • (이미지 제외한 나머지는 모두 required)
기록 읽기 페이지 → + 찬민
  • 프로필이미지, 카드 제목, 점수, 날짜, 좋아요(t/f), 내용 (get)
  • 좋아요/좋아요 취소 (put)
  • 프로필의 메인페이지, 개인페이지 라우팅
  • 카드 수정(put) (본인 것인 경우에만)
둘러보기 페이지 → 지영
     
    /record/2021/11
    /record/:year/:day (params: year, day)
     
    /api/main
    /api/dashboard
    /api/record/:id → 이미 작성된 페이지 (수정은 모달로 처리)
    /api/record/new → 작성하는 페이지
    • body에 date 객체로 보내기
    • 리턴값으로 record 메타 데이터를 전부다 받도록
    • 기록 보는 페이지
    • 기록 적는 페이지