HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
⭐
중간 프로젝트
/
💫
경미, 사휘, 정민
/
🔖
상세기능 명세서
🔖

상세기능 명세서

 
헤더
이름
동작
기능
비고
Logo
클릭
메인으로 이동
SearchButton
클릭
검색 인풋 확장
메인페이지만 렌더링
SearchInput
focus out
검색 인풋 닫힘
메인페이지만 렌더링
MenuButton
클릭
dropdown toggle 회원 : 유저페이지 | 로그아웃 비회원 : 로그인 | 회원 가입
submit
입력된 키워드 관련 포스팅 출력
포스팅만 검색
NewPostButton
클릭
포스트 생성페이지로 이동
비회원일 경우 로그인 페이지
AlarmButton
클릭
클릭시 알림목록 모달 열기
회원만!
LoginButton
클릭
로그인 페이지로 이동
UserPageButton
클릭
유저 페이지로 이동
SignUpButton
클릭
회원가입 페이지로 이동
LogOutButton
클릭
로그아웃 후 메인페이지로 이동
메인
이름
동작
기능
비고
CatagoryNav
카테고리 아이템 컨테이너
CatagoryNavItem
클릭
해당 카테고리 관련 포스팅 출력
TechFilterButton
클릭
기술스텍 아이콘 선택 모달 열기
TechIconModal
기술스택 아이콘 선택창
DoneButton
클릭
포스트 기술스택 필터 결과 출력
TechFilterModal안의 완료버튼
HotUserList
핫유저 5명 리스트 출력
HotUserItem
클릭
해당 유저 정보페이지로 이동
PostsList
포스트 리스트 출력
포스트 아이템 컨테이너
PostItem
클릭
상세 페이지로 이동
썸네일, 좋아요수, 기술스택, 제목, 설명, 유저, 생성일
UserItem
클릭
해당 유저 정보페이지로 이동
프로필이미지, 유저네임
유저(비회원일 경우 로그인 페이지로 )
이름
동작
기능
비고
EditButton
클릭
회원정보 수정 페이지로 이동
본인일 경우
FollowButton
클릭
'팔로잉'으로 변환 팔로우 시작
팔로워 카운트 증가
클릭
팔로우로 변환 팔로워 해제
팔로워 카운트 감소
UserProfile
유저 프로필
UserNickname
유저 네임
UserLevel
유저 등급
Follower
클릭
팔로워 페이지로 이동
Following
클릭
팔로잉 페이지로 이동
TotalPosts
포스트 총 갯수
PostsList
유저페이지 참고
PostItem
유저페이지참고
PostItemUser
유저페이지 참고
팔로워
이름
동작
기능
비고
UserItem
UserProfile
UserNickname
클릭
해당 유저 페이지로 이동
팔로잉
이름
동작
기능
비고
OnlineUserList
접속중 유저 목록
OfflineUserList
—
UserItem
UserProfile
UserNickname
클릭
해당 유저 페이지로 이동
OnlineBadge
접속중 유저에 표시
FollowButton
클릭
유저페이지 참고
회원정보 수정(자세한건 후에 로직구현시)의 사본
이름
동작
기능
비고
UserProfile
ProfileEditButton
EditForm
SubmitButton
포스트 작성 / 수정의 사본
이름
동작
기능
비고
CategoryList
다중 선택 가능
CategoryItem
클릭
선택
TitleInput
텍스트입력
DescriptionInput
텍스트입력
최대 300자
TechSelectButton
클릭
기술스택아이콘 선택 모달 열기
TechIconModal
DoneButton
클릭
선택
DeployLinkInput
링크 입력
필수 입력요소
CodeLinkInput
링크 입력
선택 사항
MediaInput
파일첨부
CollaborationToggleButton
클릭
협업 여부 토글
PostSubmitButton
클릭
포스트 생성/수정 여부 모달 열기
PostSubmitModal
확인: 포스트생성후 유저정보페이지로 이동 취소: 모달 닫기
작성을 완료 하시겠습니까?
포스트 상세
이름
동작
기능
비고
CatagoryBadge
MediaViewer
스와이퍼
PostTitle
PostTechIcon
PostLikes
클릭
아이콘 변경, 좋아요 카운트 증가
PostDescription
PlayButton
클릭
배포링크 새창 오픈
CodeLinkButton
클릭
해당링크 새창 오픈
CommentTypeSelector
클릭
댓글 타입 선택
훈수 | 칭찬 | 잡담 | 질문
CommentInput
텍스트 입력
CollaborationButton
클릭
DM 채팅 페이지로 이동
CommentLIst
CommentTypeBadge
UserNickname
클릭
유저 페이지로 이동
CommentText
DeleteButton
클릭
코멘트 삭제
CommentDate
알림 목록
이름
동작
기능
비고
AlaramItem
클릭
읽음 처리
댓글, 좋아요, 팔로우
CloseButton
클릭
모달 닫기
DM 목록
이름
동작
기능
비고
UserListItem
클릭
DM페이지로 이동
UserProfile
UserNickname
OnlineBadge
접속중 표시
CountBadge
새메시지 카운트 읽으면 사라짐
DM
이름
동작
기능
비고
UserItem
대화중인 유저
CloseButton
클릭
DM목록으로 이동
MessegeBlock
MessegeInput
SendButton
클릭
메세지 전송 과 블록 출력
로그인
이름
동작
기능
비고
EmailInput
입력
이메일 양식 검증
PasswordInput
입력
패스워드 비었는지 검증
LoginButton
클릭
성공: 메인으로 이동 실패: 에러메시지 출력
SignUpLink
클릭
회원가입 페이지로 이동
회원가입
이름
동작
기능
비고
EmailInput
입력
이메일 양식 검증
EmailCheckButton
클릭
이메일 중복 여부 체크
PasswordInput
입력
최소 4자리
PasswordCheckInput
입력
패스워드 인풋과 같은지 검증
SignUpButton
클릭
가입 완료 alert 모달 열기
SuccessAlert
가입 완료 alert 창
SuccessText
ConfirmButton
클릭
로그인 페이지로 이동