qhals321 / naebook Goto Github PK

#11

검색결과 모달 컴포넌트

• 검색어
• 책 아이템 molecule
  • '책이름, 설명' 타이틀 atom
  • 책 사진 atom
  • 별평점 molecule
    • 별 아이콘 atom
  • 버튼(팔로우(?)) atom

• 흑 진즉에 했어야 했는데 얼른 해놓을게요.

[화면] 헤더 && 메뉴

화면 이미지

내용

• 로고
• 검색창 (필터항목: 제목, 작가, 사용자)
• 메뉴 (추천 및 라이브러리 && 알림 및 프로필)

TODO

• atoms

  • Input
  • Select
  • Link (메뉴들, logo)
  • Icon

• molecules

  • Search
  • MenuItems (메뉴들, 알림, 프로필)

• organisms

  • Header
  • Menu

제목:

Drag and Drop 기능 구현

기능:

• 드래그 앤 드롭 상태는 3가지가 존재한다 ('BOOKING' | 'READING' | 'COMPLETE')
• book.id 를 기준으로 book.status 가 변경된다.
• COMPLETE로 변경 시 book review div 팝업이 출력된다.
• review 입력 시 COMPLETE로 이동할 수 있다.
• review 미입력 시 원래 자리로 돌아간다. (이동할 수 없다)

리뷰 View 컴포넌트

• 팔로워 신규 리뷰 Organism

  • 리뷰 '아이템 molecule'
  • 유저 정보
    • 아바타 atom
    • 유저 네임, 회사(?) 텍스트
  • 한줄평(?) 텍스트
  • 사진 atom

• 팔로잉 하는 책 리뷰 Organism

  • 사진 atom

#12

• 스토리북 세팅
• 스토리북 배포 (netlify or chromatic)

라이브러리 View

• 북킹, 읽는 중, 완료 '리스트 organism'

  • 라이브러리 아이템 molecule

    • 책 사진 atom
    • 타이틀 atom
    • 태그 atom
    • 아이콘(공개, 비공개) atom
    • 확인취소 버튼 atom

  • 북킹 아이템 상세(수정) 모달

    • 책사진 atom
    • 책 타이틀Atom
    • 카테고리 molecule
      • 태그 atom
    • 확인취소 버튼 atom

• 완료 상태로 변경할 때 모달

  • 타이틀 atom
  • 책사진 atom
  • 책 타이틀 Atom
  • textArea atom
  • 별평점 molecule
    • 별아이콘 atom
  • 확인취소 버튼 atom

• 수정 모달

• 책사진 atom

• 책 타이틀 Atom

• 별평점 molecule

  • 별아이콘 atom

• 카테고리 molecule

  • 태그 atom

• 리뷰

  • 아이콘 atom
  • text
  • textArea atom

• 확인취소 버튼 atom

• TODO: 필터, 등록 모달�

내용:

• css: root 파일 완료
• 메인화면 헤더와 바디 부분 마크업 완료
• 린트에러 수정하면서 프리티어 환경설정 추가 함

참고:

• 기획이 변경 될 예정이므로 메인 마크업은 임시로 완료함.
• 바디 부분 전면 수정이 예상되므로 분리하지 않음.
• views/main/body

• 초기 환경 세팅 완료
• 공통되는 로직 작성하기

atoms

• Avartar
• Button
• tag
• Text 보류
• Pagination

molecules

• Card

Template

• 인플루언서 List, Section

초기 폴더구조

내용:

• 삭제 표시 우측 상단으로 이동
• 태그별 색상 설정

로그인 View 컴포넌트

• 로그인 organism
  • oauth2 로그인 버튼

제목:

[공통] 태그 라이브러리 적용

기능:

• 태그 추가/수정 시:

• 태그를 입력하는 순간 전체 태그 목록을 호출한다.
• 전체 태그 목록을 스토어에 저장한다.
• 태그 입력 시 자동완성 목록을 출력한다.
• 태그를 하나 입력하면 post 호출
• 태그를 다시 입력하는 순간 전체 태그 목록을 호출한다. 위에 상황 반복
• 태그를 하나 삭제하면 delete api 를 호출한다.
• 다시 태그 목록을 불러온다.
• 전체 삭제 클릭 시 저장시점에 모든 태그는 삭제된다. (confirm : 삭제 하면 복구 불가)

TODO

• composition-api 설치

기타

• vue + typescript 환경에서 composition API
• class 스타일 컴포넌트에 composition API 사용법

추천 View 컴포넌트

• Main 헤더 organism

  • 검색 molecule
  • 메뉴 molecule

• 오늘의 추천 Organism

  • 추천 '아이템 molecule'
    • 사진 atom
    • 타이틀 atom
    • 별점 molecule
      • 별 아이콘 atom

• 팔로워 추천 Organism

  • 팔로워 '아이템 molecule'
    • 사진 atom
    • 타이틀 atom
    • 버튼 atom

• 인기책 Organis

  • 인기책 '아이템 molecule'
    • 사진 atom
    • 타이틀 atom
    • 별점 molecule
      • 별 아이콘 atom

공통된 컴포넌트: 아이템 molecule

• vue-star-rating

제목:

[공통] 별 평점 컴포넌트

기능:

• 빈 별 5개가 출력된다.
• hover : 현재 별까지 gold 색상으로 출력된다.
• click: 현재 별을 클릭하면, 현재 별까시 gold 색상으로 출력된다.
• click: 현재 별의 평점을 저장한다.
• 평점은 1, 2, 3, 4, 5로 지정한다.