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

Grace·2020년 4월 28일
0

Component-project

목록 보기
2/6

Component 소개 페이지 만들기

기존에, 뮤직플레이리스트를 참고해서 페이지를 만들려고 했는데
생각보다 router구조를 잡는게 너무 복잡해서 (내 수준으론 넘 어려웠다😫)
결국은 아예 틀 자체를 수정하기로 했다.

google 메인페이지를 참고

간단한 개인프로필과 그동안 만들었던 컴포넌트들을 소개하기 위함
컴포넌트에는 내가 만든 페이지에 사용된 컴포넌트들이
들어가면 될 것 같다.
내가 이미 사용했던 컴포넌트인게 중요 포인트!

① Main page


다른 페이지에서 돌아올 수 있는 메인페이지.

  • Play Naegle을 클릭하면 [Profile] page로 이동한다.
    • Play Naegle 전체를 로고로 만들어서 컴포넌트로 만들기
    • hover 시 이동할 페이지를 알려줄 수 있는 메세지로 popover 컴포넌트를 이용하여 'Profile page로 이동' 등의 문구를 표시
  • 검색창에는 Text-input 컴포넌트를 사용하여 검색이 가능하게 만들기
    -> 하지만 이부분은 추후 컴포넌트들을 만들어보면서 수정할 예정
  • component 리스트 페이지로 이동할 button들을 google 메인페이지와 같이 만들 예정
    • 가능하다면 컴포넌트 이미지로 로고와 같이 버튼에 넣기

② Profile page


google 계정버튼 눌렀을 때 뜨는 창을 참고하여 만들 예정

③ Component List page


main page에서 각 컴포넌트를 통해 들어올 수 있으며,
상단의 nav bar를 통해 다른 컴포넌트로 이동 가능

  • 상단 nav bar에는 main page의 컴포넌트 버튼들과 동일한 버튼을 위치시킴
  • 각 컴포넌트 페이지에는 이번 프로젝트에서 사용된 컴포넌트의 모양 그대로 넣어서 소개(?) 하기
  • 집모양 아이콘을 누르면 main page로 이동이 가능
  • 프로젝트 초안 그리는 현재 필요한 컴포넌트
    • Button ( img, text, icon )
    • Text-input
    • Logo
    • Popover
    • nav bar

Router 구조 잡기

<Switch>
 <Route exact path="/" component={Main} />
 <Route path="/profile" component={Profile} />
 <Route path="/components/button" component={ButtonBoard} />
 <Route path="/components/text-input" component={TextInputBoard} />
 <Route path="/components/logo" component={LogoBoard} />
 <Route path="/components/popover" component={PopoverBoard} />
 <Route path="/components/nav-bar" component={NavBarBoard} />
 <Route component={NotFound} />
</Swtich>

▶︎ 문제는 중첩라우터를 어디에 위치해야 하며, 그에 해당하는 메인페이지를 어디로 잡아야할지..

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

0개의 댓글