1차 프로젝트 기획안 스케치

Grace·2020년 5월 6일
1

Component-project

목록 보기
1/6

Component 소개페이지 만들기

genie 뮤직 플레이어 페이지를 참고
프로필과 그동안 만들었던 컴포넌트들을 소개하기 위함

① Main page (왼쪽)


path="/"로 들어올 수 있는 메인페이지.
화면 전체를 사용하는 것이 아니라 플레이어의 모양을 참고하여
화면 중간에 페이지를 구성할 계획

  • 가운데 앨범사진 들어가는 위치에 내 프로필 사진을 배치
  • 가사가 띄워지는 위치에 간략한 내 소개글을 배치한 후 링크를 걸어서 클릭할 경우 프로필 소개 페이지로 이동 가능
  • ▶︎버튼을 누르게 되면 component소개 페이지로 넘어가게 됨
    -> hover됬을 때 페이지가 넘어가는 것을 알릴 수 있도록 메세지를 띄움
  • toggle을 사용하여 day/night 모드 설정이 가능하도록 함

② Profile page (오른쪽)

path="/about"으로 들어올 수 있는 프로필 소개 페이지.

  • 깃허브, 블로그 링크를 걸어두고 간단한 내 소개를 한 후
    좌측 상단 X버튼을 누르면 메인페이지로 돌아갈 수 있도록 링크 걸기
  • 상단의 'LEE EUN JI, Front-end Developer'를 nav bar처럼 고정시켜볼 예정

③ Component List page


메인페이지에서 플레이버튼을 눌렀을 때 들어올 수 있는 컴포넌트 소개 페이지.
플레이리스트처럼 소개할 component 리스트를 만들어서 링크를 걸어서 각 페이지로 넘어갈 수 있도록 함

  • 이미지로 만들어서 미리보기처럼 보여질 수 있도록 하기
  • 하단에 일시정지 버튼을 누르면 메인페이지로 다시 넘어갈 수 있도록 함
  • 각 컴포넌트 소개페이지에서는 좌측 상단의 ∨버튼을 누르면 컴포넌트 리스트 페이지로 넘어갈 수 있도록 링크 걸기

인터넷에서 보여지는 예제들과는 달리 특정 위치에 고정된 nav bar가 없어서 구조 잡기가 복잡할 것으로 예상되지만 최대한 간단히 구조를 잡아보려고 했다...
아직 시도는 해보지 않아서 수정은 또 해야할 듯...ㅜㅅㅜ

profile
쉽게 사는건 재미가 없더군요, 새로 시작합니다🤓

0개의 댓글