[Outsourcing_Day 2] HotPlace In Seoul 🔥

2025.02.27 (목) Works

 

1. 와이어프레임 구성

- 페이지 구조

- 메인 페이지

- 장소 세부 모달

- 북마크 페이지

2. UI 구성

- 핫플 리스트

- 북마크 페이지

 

 

 

와이어프레임 구성

 

📍페이지 구조

 

 

 

📍메인 페이지

 

메인 페이지에 들어가면 헤더와 함께 지도를 확인할 수 있다.

지도에는 지역별로 우리가 지정해 둔 핫플레이스가 마커로 표시되어 있으며 마커를 클릭 시 인포 윈도우를 통해 상호명을 확인할 수 있다.

 

우측 아래 '핫플 보기' 버튼을 통해 해당 지역의 핫플레이스를 모아볼 수 있다.

 

메인 페이지는 모든 사용자가 지도를 확인할 수 있으며 회원가입 / 로그인을 통해 핫플레이스를 북마크 할 수 있다.

 

 

 

📍장소 세부 모달

 

핫플 리스트의 항목을 클릭하면 나타나는 세부사항 모달이다.

모달에서는 해당 장소의 이미지와 설명을 확인할 수 있으며 '이 핫플 유튜브 보기' 버튼을 통해 관련 유튜브 영상을 3~5개 확인할 수 있다.

또한 북마크 아이콘을 클릭하여 북마크 설정 및 취소를 할 수 있다.

 

 

 

📍북마크 페이지

 

헤더를 통해 북마크 페이로 들어오면 사용자의 닉네임과 함께 북마크 개수를 확인할 수 있다.

하단으로는 북마크 한 장소의 사진과 상호명이 함께 나타난다. 

 

 

 

 

UI 구성

 

📍핫플 리스트

'핫플 보기' 버튼 클릭 시 오른쪽의 리스트가 생긴다.

처음에는 하드코딩으로 카드를 찍어냈으나, 코드리뷰를 통해 MOCK_DATA 배열을 만들어 map으로 생성하였다.

 

 

📍북마크 페이지

 

마찬가지로 MOCK_DATA 배열을 이용하여 북마크 카드를 나타내었다.

 

 

⭐️ tailwind css 반응형 디자인

중단점마다 최소 너비가 픽셀로 정해져있다.

화면 크기가 해당 픽셀이 되면 정해놓은 형식으로 grid가 적용이 된다.

내가 적용한 로직은 아래와 같다.

<main className='grid place-items-center mt-[120px] grid-cols-1 sm:grid-cols-2 xl:grid-cols-4'>

 

 

 

 

 

Tomorrow Task

- 리스트와 북마크 DB 연결하기 (hotplaces & bookmarks table)

- 각 카드 클릭 시 모달창 연결하기