HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🤎
프론트엔드 데브코스 5기 교육생
/
이희진팀
이희진팀
/
💙
looky 기능 명세서
💙

looky 기능 명세서

📒
looky 기능 명세서
화면
세부 페이지
epic
기능
설명
기능 우선순위
구현 여부
디자인 여부
담당 팀원
상태
예제
예제
예제
예제
예제
상
중
하
김석주
신수영
오원주
황민호
로그인 페이지
회원 가입 페이지
회원 관리
개인정보 약관 동의
사용자는 필수 조건들에 반드시 동의해야 한다.
상
구현 여부
디자인 여부
김석주
완료
로그인 페이지
회원 관리
전체 동의 칸 체크 시 모든 조건에 동의할 수 있다.
중
구현 여부
디자인 여부
김석주
완료
로그인 페이지
회원 관리
아이디 입력
이메일 형식의 아이디를 입력해야 한다.
중
구현 여부
디자인 여부
김석주
완료
로그인 페이지
회원 관리
비밀번호 입력
비밀번호는 다음 조건을 만족해야 한다. - 8자 이상 - 영어 소문자, 숫자, 특수문자를 각각 1개 이상 포함해야 한다. - 원주 ) 비밀번호는 프론트에서 크립토화 하여 보낸다. 디비는 해싱된 비밀번호만을 가진다. 프론트와 서버는 해싱된 값만을 비교한다. 유저의 플레인 비밀번호는 해싱값의 키로만 사용 되는 형식
중
구현 여부
디자인 여부
김석주
완료
로그인 페이지
회원 관리
비밀번호 확인
상단에서 입력한 비밀번호와 일치해야 한다.
중
구현 여부
디자인 여부
김석주
완료
로그인 페이지
회원 관리
사용자 이름
사용자의 닉네임을 입력받는다. 닉네임은 2글자 이상이여야 한다.
중
구현 여부
디자인 여부
김석주
완료
로그인 페이지
회원 가입 완료
회원 관리
회원 가입 완료
사용자에게 회원 가입 완료 메세지를 띄워주고 메인 화면으로 이동한다.
중
구현 여부
디자인 여부
김석주
완료
로그인 페이지
로그인
회원 관리
이메일
사용자는 이메일을 입력한다.
중
구현 여부
디자인 여부
김석주
완료
로그인 페이지
회원 관리
비밀번호
사용자는 비밀번호를 입력한다.
중
구현 여부
디자인 여부
김석주
완료
로그인 페이지
메인 화면 전환
사용자에게 로그인 성공을 알려주고 메인 화면을 보여주도록 한다.
중
구현 여부
디자인 여부
김석주
완료
메인 페이지
메인 화면
채널 목록
채널 목록 확인
사용자는 자신이 속해 있는 채널의 목록을 확인할 수 있다.
상
구현 여부
디자인 여부
김석주
완료
메인 페이지
채널 목록
최근 접속 채널
사용자는 자신이 가장 마지막에 접속했던 채널의 최신 포스팅을 기본 값으로 확인할 수 있다.
중
구현 여부
디자인 여부
김석주
완료
메인 페이지
포스트
포스트 확인
사용자는 화면 중앙에 현재 속한 채널의 포스트들을 최신순으로 확인할 수 있다.
상
구현 여부
디자인 여부
김석주
완료
메인 페이지
포스트
포스트 스크롤
사용자는 포스트 목록을 스크롤하여 누적된 포스트를 확인할 수 있다.
상
구현 여부
디자인 여부
황민호
완료
메인 페이지
포스트
포스트 디테일 - 모달
포스트를 클릭하면 사용자는 포스트를 모달 화면을 통해 좋아요 수와 댓글 내용을 자세히 확인할 수 있다.
상
구현 여부
디자인 여부
김석주
황민호
완료
메인 페이지
포스트
포스트 디테일 - 모달 - 좋아요 버튼
사용자는 포스트 모달에서 좋아요 버튼 눌러서 좋아요를 남길 수 있다.
하
구현 여부
디자인 여부
김석주
황민호
완료
메인 페이지
포스트
포스트 디테일 - 모달 - 댓글
사용자는 포스트 모달 하단부분에서 해당 포스트에 댓글을 입력할 수 있다.
하
구현 여부
디자인 여부
김석주
황민호
완료
상단 Nav Bar
페이지 전환
현재 상태 확인
사용자는 상단 Nav Bar를 통해 현재 상태(현재 페이지, 대화 중인 상대 등)를 확인할 수 있다.
중
구현 여부
디자인 여부
황민호
완료
상단 Nav Bar
페이지 전환
검색창
포스트 또는 사용자를 검색할 수 있는 화면으로 전환한다.
상
구현 여부
디자인 여부
황민호
완료
상단 Nav Bar
페이지 전환
뒤로가기 버튼
사용자는 뒤로가기 버튼을 통해 이전 페이지로 이동한다.
중
구현 여부
디자인 여부
황민호
완료
상단 Nav Bar
페이지 전환
메시지 버튼
사용자는 메세지 버튼을 통해 주고받은 메세지 목록이 있는 화면으로 이동한다.
중
구현 여부
디자인 여부
황민호
완료
상단 Nav Bar
페이지 전환
알림 버튼
사용자는 알림 버튼을 통해 받은 알림을 확인할 수 있다.
중
구현 여부
디자인 여부
황민호
완료
하단 Nav Bar
페이지 전환
홈 버튼
사용자는 홈 버튼을 통해 홈 페이지로 이동한다.
중
구현 여부
디자인 여부
황민호
완료
하단 Nav Bar
페이지 전환
검색 버튼
사용자는 검색 버튼을 통해 검색 페이지로 이동한다.
중
구현 여부
디자인 여부
황민호
완료
하단 Nav Bar
페이지 전환
채널 버튼
사용자는 채널 버튼을 통해 채널 리스트 페이지로 이동한다.
구현 여부
디자인 여부
황민호
완료
하단 Nav Bar
페이지 전환
프로필 버튼
사용자는 프로필 버튼을 통해 프로필 페이지로 이동한다.
중
구현 여부
디자인 여부
황민호
완료
라우팅
페이지 전환
상
구현 여부
디자인 여부
황민호
신수영
오원주
김석주
완료
프로필 화면
회원 정보
사용자는 화면에서 본인의 가입 정보를 확인할 수 있다.
상
구현 여부
디자인 여부
신수영
완료
프로필 화면
마이페이지/타 사용자 페이지 구분
회원 정보
로그인한 사용자 정보에 따라 마이페이지/타사용자를 구분해야 합니다.
상
구현 여부
디자인 여부
신수영
완료
프로필 화면
회원 정보
비밀번호 변경 버튼
사용자는 비밀번호 변경 버튼을 통해서 비밀번호를 변경할 수 있다. 변경할 비밀번호는 다음 조건을 만족해야 한다. - 8자 이상 - 영어 소문자, 숫자, 특수문자를 각각 1개 이상 포함해야 한다.
상
구현 여부
디자인 여부
신수영
완료
프로필 화면
회원 정보
프로필 이미지 변경
사용자는 프로필 변경 버튼을 눌러서 프로필 사진을 변경할 수 있다.
중
구현 여부
디자인 여부
신수영
완료
메세지 페이지
메세지 정보
사용자는 스크롤을 통해 주고받은 메세지 목록을 확인할 수 있다.
중
구현 여부
디자인 여부
오원주
완료
메세지 페이지
메세지 정보
상대 프로필 이미지
메세지를 주고 받은 상대와의 채팅 목록을 클릭하면 해당 상대방과의 1대1 채팅을 진행할 수 있다.
중
구현 여부
디자인 여부
오원주
완료
글쓰기 페이지
글 쓰기
사용자는 제목과 본문을 수정하고 게시하기 버튼을 통해서 현재 채널에 포스팅을 게시할 수 있다.
상
구현 여부
디자인 여부
오원주
완료
알림 페이지
알림
사용자는 알림 페이지에서 알림을 읽지 않은 순, 이후 최신순으로 확인할 수 있다.
중
구현 여부
디자인 여부
오원주
완료
검색
최근 검색어
검색 버튼
결과를 눌렀을 때 검색 실행
상
구현 여부
디자인 여부
신수영
완료
검색
사용자 리스트
검색 버튼
결과를 눌렀을 때 리다이렉트
사용자는 해당 사용자의 프로필 화면으로 이동하여 프로필을 확인할 수 있다.
상
구현 여부
디자인 여부
신수영
완료
검색
포스트 리스트
검색 버튼
결과를 눌렀을 때 리다이렉트
사용자는 해당 포스트 디테일 화면으로 이동하여 포스트를 확인할 수 있다.
상
구현 여부
디자인 여부
신수영
완료
404페이지
에러 페이지
N 초 후 이전 페이지로 리다이렉트
하
구현 여부
디자인 여부
오원주
완료
splash
하
구현 여부
디자인 여부
김석주
완료
어드민 페이지
어드민
채널 추가 기능
상
구현 여부
디자인 여부
김석주
완료
코어
전역 데이터 상태
코어
전역적으로 관리해야 하는 데이터
상
구현 여부
디자인 여부
김석주
오원주
완료
코어
전역 UI 상태
코어
전역적으로 사용되는 UI 상태 관리
상
구현 여부
디자인 여부
김석주
오원주
완료
코어
전역 UI 매니지먼트
코어
UI 상태에 따라 UI 의 동작을 주관하는 컴포넌트
구현 여부
디자인 여부
오원주
완료
코어
API
코어
상
구현 여부
디자인 여부
김석주
오원주
신수영
황민호
완료
코어
공용 컴포넌트 - 버튼
코어
중
구현 여부
디자인 여부
오원주
완료
코어
공용 컴포넌트 - 텍스트
코어
textarea 형태 / input 형태
중
구현 여부
디자인 여부
오원주
완료
코어
공용 컴포넌트 - 이미지
코어
기본기능 구현 완료 / 점진적으로 개선 예정
중
구현 여부
디자인 여부
오원주
완료
코어
공용 컴포넌트 - 아이콘
코어
구글 머티리얼 아이콘을 사용할 수 있다.
중
구현 여부
디자인 여부
황민호
완료
코어
공용 컴포넌트 - 아바타
코어
중
구현 여부
디자인 여부
신수영
완료
코어
공용 컴포넌트 - 포스트 디테일 카드
코어
- 포스트를 클릭하면 사용자는 포스트를 모달 화면을 통해 좋아요 수와 댓글 내용을 자세히 확인할 수 있다. - 사용자는 포스트 모달에서 좋아요 버튼 눌러서 좋아요를 남길 수 있다. - 사용자는 포스트 모달 하단부분에서 해당 포스트에 댓글을 입력할 수 있다.
중
구현 여부
디자인 여부
황민호
완료
코어
공용 컴포넌트 - 포스트 심플 카드
코어
중
구현 여부
디자인 여부
김석주
완료
코어
Toast UI
코어
https://fkhadra.github.io/react-toastify/introduction
하
구현 여부
디자인 여부
김석주
오원주
황민호
신수영
완료
레이아웃
페이지 레이아웃
레이아웃
상
구현 여부
디자인 여부
신수영
황민호
오원주
완료
레이아웃
모달 레이아웃
레이아웃
상
구현 여부
디자인 여부
오원주
완료
구체적이지는 않아도 구현하고 싶은, 해보고 싶은 아니면 필요하다고 싶은 기능 작성해주세요! 해당 내용을 기반으로 기능 정리해봅시다!🔥🔥🔥
김석주
  • 맡고 싶은 개발 파트: 코어 기능 또는 로그인 화면 + 메인화면 이유: 지금껏 개발할 때 여러 문제점들로 인해서 코어 기능이나 서비스의 핵심이 되는 기능 개발을 두려워했었고, 진행하지 못해봤는데요. 이번 프로젝트에서는 용기내서 진행해보고 싶습니다. 다만 이 부분에서 걱정되는 건 아직 redux 활용이 크게 익숙하지는 않아서 여러분들의 도움이 필요합니다.
  • 필요할 것 같은 기능: 토스트 알림 메세지 이유: 사용자가 접속해 있을 때 토스트메세지로 DM같은 알림이 온 사항을 명시해주면 좋을 것 같습니다. 아래부터는 챌린지 느낌의 아이디어입니다.
  • 개발 해보면 좋을 것 같은 기능1: 해쉬태그 툴팁 이유: 팀 회의에서 나왔던 주제기도 하고 재밌을 것 같습니다.
  • 개발 해보면 좋을 것 같은 기능2: 서비스 수익 모델 이유: 개발자가 특정 주제의 서비스를 개발하는 이유는 서비스를 사용하는 고객이 있기 때문이다라고 생각합니다. 특히 저희 프로젝트는 패션이라는 주제가 뚜렷한데요 앱 요소요소에 사용자가 거슬리지 않아 할 것 같은 광고를 삽입하는 기능을 추가해 우리는 개발뿐만 아니라 수익에 관한 부분도 중요하다는 사실을 인지하고 있는 개발자라는 것을 표현해봐도 좋을 것 같습니다.
  • 개발 해보면 좋을 것 같은 기능3: 기능?이라기보단 애니메이션을 추가하여 시각적으로 보기 좋은 화면 UI/UX를 구성하고 싶습니다. 이유: 저희가 색상코드를 어울리는 코드로 정했듯, 실제 브라우저 서칭이나 앱을 사용할 때 그에 맞는 애니메이션이 있으면 좋더라고요. 따라서 저희도 대부분의 기능이 개발되면 챌린지로 하면 어떨까 하는 의견입니다.
  • 개발 해보면 좋을 것 같은 기능4: 만약 우리가 챌린지로 한 걸 다 했다. 하면 WebRTC API를 이용한 화상채팅 기능을 개발해보면 좋을 것 같습니다. 이유: 아무래도 룩북, 즉 패션이 주제인만큼 유저들간 사진 교환 역시 좋지만, 화상 채팅 기능을 통해서 룩북을 보여주고 비교하고 소통하는 기능을 만들면 어떨까 하는 생각입니다. 다만 이 경우 추가적인 백엔드 서버를 저희가 구현해야 한다는 문제점이 있습니다.
신수영
  • 맡고 싶은 개발 파트 : 검색
    • Vue 과제에서 구현에만 급급했던 것 같아서 다시 도전해보고 싶습니다. + 사용자 상호작용과 관련된 기능을 구현해보고 싶어요!
  • 필요할 것 같은 기능 : 회의하면서 적극 의견 내보겠습니다!
  • 챌린지 : 아이콘 모션과 같은 서비스 분위기에 맞는 모션 적용하기!
오원주
  • 하고 싶은 파트 : UI 관련 코어, 메시지 기능, 글쓰기
황민호
  • 맡고 싶은 개발 파트 : 무한스크롤 / 이후에 개인프로젝트 때 무한스크롤을 구현해볼 생각이었는데, 이번 팀프로젝트 때 비슷한 주제의 프로젝트를 진행하게 되어서 무한스크롤 구현에 관심이 있습니다! 다른 개발 파트는 다 상관 없어용😂
  • 개발해보면 좋을 것 같은 기능1 : 해쉬태그 툴팁 룩북 이미지 → hover → 제품의 태그 (like 인스타) 사용자 정의 JSON 값 넣어서 처리하면 될 것같음.. post {
    • “title”: .. ”content”: …
      “tag”: …
      }
  • 개발해보면 좋을 것 같은 기능2 : 쾌적한 UI, UX 저도 기능은 아니지만 사용자에게 쾌적한 UI, UX를 제공하고 싶습니다. 룩북 웹서비스라는 특성상 디자인적인 요소에 관심이 있는 사용자가 주로 저희 서비스를 이용할 것 같고, 그렇기 때문에 다른 서비스보다 쾌적한 UI, UX가 더 강조되어야 할 것 같다는 생각이 듭니다.
  • 개발해보면 좋을 것 같은 기능3 : 강의에서 소개된 레퍼런스 활용하기(토스트 알림) 이것도 기능은 아니지만 개인적인 의견입니다! 강의에서 소개되었던 레퍼런스를 활용해보면 좋을 것 같아요, 사실 강의를 100% 흡수하지 못한 것에 대해 아쉬움이 남았었는데, 예를 들어 토스트 알림이나, 사용자목록을 겹쳐서 보여주는..? 기능을 구현하면서 도움이 될 것 같아서 한번 적어봅니다