Navbar 생성 및 페이지 연결

[hyeonzi423]

여행지 검색 Map

1. 카카오 맵 api

• 제일 바닥에 카카오 맵 api로 지도를 불러와서 화면에 띄웠습니다.

2. 왼쪽 사이드 바

• 제일 왼쪽의 4개의 선택 칸
  • 버튼이 한번에 하나씩만 선택될 수 있게 하였습니다.
  • 기본으로 제일 위에 버튼이 선택되어 있습니다.
• 왼쪽에서 두번째 사이드 바
  • 제일 위에 어디로 떠날까요 라는 문구를 넣었습니다.
  • select 칸을 2개 넣어 지역을 선택하여 검색을 누르면 선택된 값이 칸 위에 출력되게 했습니다.
  • 해시태그들을 선택할 수 있는 버튼을 만들었습니다. (한번에 하나만 선택 가능)
  • 마지막으로 선택된 조건에 맞는 여행지를 보여 줄 카드들이 보입니다.
• 오른쪽 Slider
  • 카드가 선택되면 슬라이더가 열려 카드의 상세 정보를 볼 수 있습니다.

3. 여행코드 버튼

• 카카오 맵 위(화면상 제일 상단)에 위치하였습니다.

• 한번에 여러개 선택될 수 있습니다.

  Navbar 구현

  1. Navbar.vue 생성

• 페이지 선택하면 밑에 바가 움직이도록 하려 했는데 페이지 전환시 바의 위치가 제대로 동작하지 않아 일단은 가장 기본적인 디자인으로 구현했습니다.
• 왼쪽에 '요기조기' 오른쪽에 '홈', '여행지도', '여행경로', '로그인' 순으로 지정했습니다.

2. 각 페이지 연결

• 페이지를 연결하면서 오류가 난 부분을 발견하여 수정하였습니다.
• 단, 여행경로 페이지는 아직 구현하지 않았기 때문에 임시로 로그인 페이지로 연결했습니다.

3. 정상동작 하는 페이지

• 메인 페이지
• 여행지도 페이지
• 로그인 페이지 & 회원가입 클릭시 회원가입 페이지로 넘어갑니다.