HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🤎
프론트엔드 데브코스 5기 교육생
/
🎄
노아팀
/
💬
노닥노닥
/회의록/
유저스토리

유저스토리

유저 스토리


페이지
형식
인증
특이사
Index
노닥노닥의 요약과 메인 페이지로 이동하는 버튼이 존재한다.
비인증
요약에는 이미지화 된 내용이 포함된다.
404
유저는 잘못된 접근을 했을 때 404 페이지로 접속할 수 있다.
ㅤ
ㅤ
메인
다크모드를 선택할 수 있다.
ㅤ
로그인한 사용자는 기존에 저장했던 다크모드를 유지한다.
ㅤ
Header에 채널선택과 로그인버튼이 존재한다.
비인증
비 인증상태이기에 로그인버튼이 존재한다.
ㅤ
Header에는 Avatar | Notification 이 존재하며 Avatar는 간단한 User정보를 Modal창으로 보여주며 User페이지로 라우팅을 발생시킨다. Notification아이콘은 알림내역을 모달창으로 보여준다
인증
로그인버튼은 없어지고 사용자의 데이터가 포함된다. USER 데이터는 페이지 라우팅을 발생시킨다.
ㅤ
Nav에는 온라인 접속자 - 오프라인 접속자가 보여진다.
ㅤ
온라인 접속자와 오프라인 접속자는 뱃지를 통해 구분하며 인증된 사용자의 경우 팔로우 한 접속자는 하트뱃지가 부여된다.
ㅤ
Nav에 존재하는 온라인 사용자를 클릭하면 Modal창을 통해 간단한 데이터정보를 확인하고 DM을 전송할 수 있다.
인증
ㅤ
ㅤ
초기에는 모든 채널의 게시글이 렌더링되며 각 세부채널별 POST를 렌더링시킬 수 있다.
ㅤ
채널선택을 통해 변경할 수 있다.
ㅤ
게시글 생성이라는 버튼을 통해 게시글 생성 페이지로 이동한다.
인증
페이지 라우팅 발생
ㅤ
아래는 게시글의 PageNation이 존재한다.
ㅤ
ㅤ
ㅤ
하나의 POST는 TITLE, 투표자수, 댓글수, 좋아요 수 등이 포함된다. 또한 결과보기버튼을 통해 인증없이 결과를 확인할 수 있다.
ㅤ
인증된 사용자만이 버튼을 클릭할 수 있다.
ㅤ
모바일 버전의 경우 PageNation이 아닌 무한스크롤을 아래로 내리면 더 많은 Post가 보여진다.
ㅤ
ㅤ
ㅤ
채널선택의 항목 중 Follow한 사람들의 Post가 보여지는 채널이 존재한다.
인증
인증하지 않은 사용자는 Follow가 존재할 수 없다.
로그인
이메일과 비밀번호를 입력받아 로그인을 진행한다
비인증
ㅤ
회원가입
이메일과 비밀번호, 비밀번호 확인 3개의 데이터를 전달받는다. 비밀번호는 정규표현식을 통해 데이터를 검증하고, 이메일은 이메일 타입으로 전달받는다.
비인증
ㅤ
게시글 작성
content, title, image, channel를 입력해 POST를 생성할 수 있다.
인증
ㅤ
ㅤ
postBox를 통해 투표 주제와 항목을 지정할 수 있다.
인증
ㅤ
게시글 상세
Title 과 Content가 렌더링된다.
인증
유저가 생성하고자 하는 채널을 선택할 수 있다.
ㅤ
선택항목에서 다양한 선택항목이 존재하고 버튼클릭으로 인해서 투표를 진행할 수 있다.
인증
ㅤ
ㅤ
댓글을 추가할 수 있다.
인증
댓글창은 버튼을 통해 활성화 / 비활성화 되도록 한다.
ㅤ
댓글을 삭제할 수 있다.
인증
ㅤ
ㅤ
좋아요 버튼을 통해 해당 POST를 좋아요 할 수 있다.
인증
ㅤ
투표 결과
게시글 상세에서 진행된 투표의 결과를 Progress를 통해 화면에 보여준다.
인증
ㅤ
유저페이자
Avatar에 이미지를 추가할 수 있다.
인증
링형식의 프로필사진을 업데이트 할 수 있다.
ㅤ
유저는 본인의 페이지의 경우 수정 버튼을 통해 본인의 데이터를 수정할 수 있다.
인증
수정하는 페이지로 라우팅이 발생한다.
ㅤ
팔로워와 팔로잉한 숫자를 볼 수 있다.
인증
ㅤ
ㅤ
유저가 작성한 포스트를 볼 수 있다.
인증
ㅤ
ㅤ
잔디밭 , 레벨이 화면에 표시된다.
인증
ㅤ
DM
대화를 나눈 상대를 확인할 수 있다.
인증
ㅤ
ㅤ
특정상대와의 대화를 나눌 수 있다.
인증
ㅤ
 
User Story (1)
페이지
유저스토리
인증
특이사항
우선순위
작업 여부
Index
노닥노닥의 요약과 메인 페이지로 이동하는 버튼이 존재한다.
비인증
요약에는 이미지화 된 내용이 포함된다.
1
작업 전
404
유저는 잘못된 접근을 했을 때 404 페이지로 접속할 수 있다.
1
작업 전
메인
다크모드를 선택할 수 있다.
무관
로그인한 사용자는 기존에 저장했던 다크모드를 유지한다.
3
작업 전
메인
Header에 채널선택과 로그인버튼이 존재한다.
비인증
비 인증상태이기에 로그인버튼이 존재한다.
1
작업 전
메인
Header에는 Avatar | Notification 이 존재하며 Avatar는 간단한 User정보를 Modal창으로 보여주며 User페이지로 라우팅을 발생시킨다. Notification아이콘은 알림내역을 모달창으로 보여준다
인증
로그인버튼은 없어지고 사용자의 데이터가 포함된다. USER 데이터는 페이지 라우팅을 발생시킨다.
2
작업 전
메인
Nav에는 온라인 접속자 - 오프라인 접속자가 보여진다.
무관
온라인 접속자와 오프라인 접속자는 뱃지를 통해 구분하며 인증된 사용자의 경우 팔로우 한 접속자는 하트뱃지가 부여된다.
1
작업 전
메인
Nav에 존재하는 온라인 사용자를 클릭하면 Modal창을 통해 간단한 데이터정보를 확인하고 DM을 전송할 수 있다.
인증
3
작업 전
메인
초기에는 모든 채널의 게시글이 렌더링되며 각 세부채널별 POST를 렌더링시킬 수 있다.
무관
채널선택을 통해 변경할 수 있다.
1
작업 전
메인
게시글 생성이라는 버튼을 통해 게시글 생성 페이지로 이동한다.
인증
페이지 라우팅 발생
2
작업 전
메인
아래는 게시글의 PageNation이 존재한다.
무관
2
작업 전
메인
하나의 POST는 TITLE, 투표자수, 댓글수, 좋아요 수 등이 포함된다. 또한 결과보기버튼을 통해 인증없이 결과를 확인할 수 있다.
무관
인증된 사용자만이 버튼을 클릭할 수 있다.
1
작업 전
메인
모바일 버전의 경우 PageNation이 아닌 무한스크롤을 아래로 내리면 더 많은 Post가 보여진다.
무관
4
작업 전
메인
채널선택의 항목 중 Follow한 사람들의 Post가 보여지는 채널이 존재한다.
인증
인증하지 않은 사용자는 Follow가 존재할 수 없다.
3
작업 전
로그인
이메일과 비밀번호를 입력받아 로그인을 진행한다
비인증
1
작업 전
로그인
소셜로그인을 진행한다.
비인증
Google, Kakao
3
작업 전
회원가입
이메일과 비밀번호, 비밀번호 확인 3개의 데이터를 전달받는다. 비밀번호는 정규표현식을 통해 데이터를 검증하고, 이메일은 이메일 타입으로 전달받는다.
비인증
1
작업 전
게시글 작성
content, title, image, channel를 입력해 POST를 생성할 수 있다.
인증
유저가 생성하고자 하는 채널을 선택할 수 있다.
1
작업 전
게시글 상세
Title 과 Content가 렌더링된다.
인증
1
작업 전
게시글 상세
선택항목에서 다양한 선택항목이 존재하고 버튼클릭으로 인해서 투표를 진행할 수 있다.
인증
2
작업 전
게시글 상세
댓글을 추가할 수 있다.
인증
댓글창은 버튼을 통해 활성화 / 비활성화 되도록 한다.
2
작업 전
게시글 상세
댓글을 삭제할 수 있다.
인증
2
작업 전
게시글 상세
좋아요 버튼을 통해 해당 POST를 좋아요 할 수 있다.
인증
2
작업 전
투표 결과
게시글 상세에서 진행된 투표의 결과를 Progress를 통해 화면에 보여준다.
인증
1
유저페이지
Avatar에 이미지를 추가할 수 있다.
인증
링형식의 프로필사진을 업데이트 할 수 있다.
2
작업 전
유저페이지
유저는 본인의 페이지의 경우 수정 버튼을 통해 본인의 데이터를 수정할 수 있다.
인증
수정하는 페이지로 라우팅이 발생한다.
2
작업 전
유저페이지
팔로워와 팔로잉한 숫자를 볼 수 있다.
인증
2
작업 전
유저페이지
유저가 작성한 포스트를 볼 수 있다.
인증
1
작업 전
유저페이지
잔디밭 , 레벨이 화면에 표시된다.
인증
2
작업 전
DM
대화를 나눈 상대를 확인할 수 있다.
인증
3
작업 전
DM
특정상대와의 대화를 나눌 수 있다.
인증
3
작업 전