HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 4기 교육생
/
오프팀
오프팀
/
SNS 프로젝트
SNS 프로젝트
/
최종 기획서
최종 기획서
/
페이지별 기능
페이지별 기능
페이지별 기능

페이지별 기능

  • 사용자: 비회원, 회원을 통틀어 일컫는 말
  • 인증된 사용자: 회원가입 후 로그인을 완료한 사용자
  • 뉴스기사: tmi를 작성한 게시글
  • 기자: 인증된 사용자.
  • 응원하기: 좋아요
  • 구독: 팔로우, 팔로
페이지: 기능 | use case | U
페이지
기능
유저스토리
UI
우선순위
예상 MD
담당자
진행상황
비밀번호 변경 페이지
비밀번호 변경하기
Done
프로필 수정 페이지
프로필 수정페이지 레이아웃
프로필 페이지 레이아웃
- 닉네임 - 자기소개 - 프로필 페이지에서 props 넘기도록
2
0.5
Done
프로필 수정 페이지
api 연동
인증된 사용자는 프로필 수정버튼 을 눌러 프로필을 수정할 수 있습니다.
닉네임, 자기소개 validation 비밀번호 변경 버튼 누르면 비밀번호 변경 페이지로 라우팅 유저의 id와 userId가 같을때만 접속할수 있도록 라우팅 가드?
2
0.7
Done
랜딩 페이지
랜딩 페이지
시작하기
사용자는 랜딩페이지에서 TMI HOMERS에 대한 간략한 소개글을 볼 수 있습니다.
- 소개글 및 사용 방법 - 시작하기 버튼
4
0.3
Done
로그인 페이지
로그인하기
인증된 사용자는 로그인을 할 수 있습니다.
- 이메일 입력 칸 - 비밀번호 입력 칸 - 로그인 버튼 - 회원가입 버튼
1
0.5
Done
게시판 페이지
게시판 페이지 레이아웃 + 라우팅
사용자는 게시판에서 게시된 글들을 확인할 수 있습니다.
- 최신의, 뜨거운, 구독한 탭 - 각 탭의 게시글 목록 - 위로가기 버튼 - 고정 하단바
1
0.3
Done
글 상세 페이지
글 상세 페이지 레이아웃
사용자는 게시글을 눌러 상세정보를 확인할 수 있습니다.
- 프로필사진 - 닉네임 - 작성 날짜, 시간 - 제목 - 본문 내용 - 좋아요 수 - 댓글 수 - 좋아요 버튼 - 수정 삭제 버튼 - 댓글 - 고정 하단 댓글 입력 칸
1
1.2
Done
글 상세 페이지
좋아요 누르기
인증된 사용자는 뉴스기사에 좋아요를 누를 수 있습니다.
- 좋아요 버튼: 토글
1
0.3
Done
글 상세 페이지
댓글 달기
인증된 사용자는 뉴스기사의 상세화면에서 댓글을 남길 수 있습니다.
- 프로필사진 - 댓글 입력 칸 - 댓글 입력 버튼
1
0.7
Done
글 상세 페이지
글 삭제하기
인증된 사용자는 자신의 뉴스기사 를 삭제할 수 있습니다.
- 삭제버튼
3
0.3
Done
글 상세 페이지
댓글 삭제하기
인증된 사용자는 자신이 남긴 댓글을 삭제할 수 있습니다.
- 삭제 버튼
4
0.3
Done
글 상세 페이지
글 수정하기로 이동하기
인증된 사용자는 자신의 뉴스기사 에 달린 수정 버튼을 클릭하여 글 작성 페이지로 이동할 수 있습니다.
- 수정 버튼
4
0.3
Done
글 상세 페이지
좋아요 취소하기
인증된 사용자는 좋아요 누른 뉴스기사 를 좋아요 취소할 수 있습니다.
4
0.3
Done
404 페이지
엉뚱한 페이지 접속
사용자는 엉뚱한 페이지로 접속시 안내 문구를 볼 수 있습니다.
- 404 페이지 - 홈으로 이동하기 버튼
2
0.3
Done
프로필 페이지
작성한 글 목록 확인하기 및 게시글 상세 화면으로 이동하기
인증된 사용자는 마이 페이지에서 자신이 작성한 글 목록을 확인할 수 있습니다.
- 프로필 사진 - 닉네임 - 팔로잉 수 | 팔로워 수 - 한줄 소개글(옵션) - 프로필 수정 버튼 - 환경설정 버튼 - 내 TMI 탭 - 내가 작성한 글 목록 - 좋아요 탭 - 내가 좋아요 누른 글 목록 - 고정 하단바 - 로그아웃 버튼
3
1
Done
프로필 페이지
프로필 페이지 API 연동하기
3
1
Done
글쓰기 페이지
글 작성하기
인증된 사용자는 하단 중앙의 글쓰기 버튼을 눌러 뉴스기사를 작성할 수 있습니다.
- 닉네임 - 작성하기 버튼 - 제목 입력 칸 - 본문 입력 칸 - 사진 첨부 아이콘 - X 버튼
1
1.5
Done
글쓰기 페이지
글 수정하기
인증된 사용자는 자신이 작성한 글을 수정할 수 있습니다.
4
1
Done
알림 페이지
알림 확인하기
인증된 사용자는 알림을 확인할 수 있습니다.
- 알림 타입에 따라 메시지 생성 - 알림 페이지 들어가면 읽음 처리 - 알림 컴포넌트에 적절하게 라우팅 달기
2
1
Done
검색 페이지
검색 하기 레이아웃, 닉네임 검색 결과 마이페이지로 라우팅
사용자는 돋보기 버튼을 눌러 유저 혹은 게시글을 검색할 수 있습니다.
- 검색 입력 칸 - 최근 검색어 목록 - X 버튼
2
1
Done
검색 페이지
게시물 검색 결과 확인하기
사용자는 입력한 텍스트를 제목에 포함한 게시글을 볼 수 있습니다.
- 글 제목 탭 - 검색된 게시글 목록
2
0.6
Done
검색 페이지
유저 검색 결과 확인하기
사용자는 입력한 텍스트를 닉네임에 포함한 유저를 볼 수 있습니다.
- 닉네임 탭 - 검색된 유저 목록 - 팔로우 토글 버튼
2
0.6
Done
검색 페이지
검색 페이지 팔로우, 언팔로우 api연동
2
0.2
Done
검색 페이지
최근 검색어 결과
2
0.2
Done
홈페이지
인기글, 최신글 불러오기
인기글, 최신글을 확인할 수 있습니다
2
0.3
Done
홈페이지
홈페이지 UI
홈페이지 레이아웃
2
0.7
Done
회원가입 페이지
회원 가입하기
사용자는 회원가입을 할 수 있습니다.
- 이메일 입력 칸 - 비밀번호 입력 칸 - 비밀번호 확인 칸 - 닉네임 입력 칸 - 회원가입 버튼 - 로그인 버튼
1
3
Done
공통 API 만들기
공통 API 정리하기
1
1
Done
프로필 페이지
BottomNavigation 공통 컴포넌트 refactor
프로필 클릭하면 동적으로 라우팅
2
0.5
Done
알림 페이지
알림 페이지 레이아웃
알림 페이지 레이아웃
알림 없을때 화면 알림 있을때 화면
2
0.7
Done
index.html에 메타데이터 추가
seo를 높이기 위해 index.html에 메타데이터를 추가합니다
4
Done
유저 정보 저장 로직 context에서 react query로 변경
1
1
Done
검색 페이지
팔로우 알림
Done
글 상세 페이지
좋아요 알림 보내기
좋아요 시 알림 보내기
Done
글 상세 페이지
좋아요 연속 토글…
좋아요 연속 토글 및 낙관적 업데이트
Done
토스트 사용 기능
- 토스트
3
1
Done
검색 페이지
비회원인 상태에서 팔로우버튼을 누르면?
Done
알림 페이지
알림 쏘기 (댓글)
2
Done
게시판 페이지
게시판 페이지 구독한 탭 기능 마무리
2
0.5
Done
모달 페이지
모달 기능
Done
구독자/구독중 페이지
팔로우, 팔로잉 목록 확인하기 및 프로필 상세 화면으로 이동하기
인증된 사용자는 자신의 팔로우, 팔로잉 목록을 확인할 수 있습니다.
- 팔로우 | 팔로잉 탭 - 팔로우 | 팔로잉 목록 - 팔로잉 토글 버튼
4
0.5
Todo
컴포넌트 이름
설명
담당자
MainButton 컴포넌트
큰 버튼
SubButton
작은 버튼
Input 컴포넌트
AppBar 컴포넌트
하단 고정바
PostButton 컴포넌트
글작성 고정버튼
CardPost 컴포넌트
게시글 목록
CardUser 컴포넌트
유저 목록
CardNotice 컴포넌트
알림 목록
ProfileImage 컴포넌트
유저 프로필 이미지
CloseButton 컴포넌트
페이지 닫기 버튼
BackButton 컴포넌트
뒤로가기 버튼
Header 컴포넌트
페이지 헤더 text
LikeIcon 컴포넌트
좋아요 아이콘
CommentIcon 컴포넌트
댓글 아이콘
Spacing 컴포넌트
컴포넌트 간 공간 여백
이채연
Loading 컴포넌트
Modal 컴포넌트
Toast 컴포넌트
짧은 상태 메시지