feat: 장소 클릭 시 장소 정보 모달 UI 구현

[rina1201]

✨ 무엇을 바꿨나요?

장소 클릭 시 장소 정보 모달 UI 구현

🔗 관련 이슈

Closes #9

💡 왜 바꿨나요?

장소 클릭 시 장소 정보 모달 UI 구현하기 위해

📝 주요 변경 사항

1. mocks 데이터 변경
   : 장소 정보 모달에 띄울 정보를 위해 영업시간 및 영업 정보를 추가함
   기존에 있던 address 하단에 [ reelsUrl, businessHours, holidayNotice, weeklySchedule ] 을 추가함

2. 장소 클릭 시 장소 마커 아이콘 변경
   : 피그마 로고 부분 옆에, 장소 클릭 시 변경되는 로고를 추가해둠
   이에 클릭 시 해당 아이콘으로 변경됨과 동시에 사이즈가 살짝 커지도록 조정

3. src\shared\lib\place-business-hours.ts 파일 추가
   : mocks 데이터에 기반하여 한국 시간을 기준으로 영업 상태(영업 전, 영업 중, 휴무)가 바뀌도록 설정

4. [릴스 확인 버튼]
   : 클릭 시 아무 인스타 url로 일단 연동되도록 mocks 데이터에 설정

5. 캡션 추출 불가 시 검색창에서 직접 장소를 등록하는 경우
   : [릴스 확인 버튼] 없도록 표시

6. 영업 시간을 추출하지 못했을 경우
   : 우선 mocks에 <정보 없음>으로 표시해두었습니다.

👀 리뷰어가 보면 좋은 부분

1. dev가 2개인데, 기존에 dev/SelectOption 에서 해당 바뀐 부분을 확인할 수 있습니다.
   (dev/click_place을 이번에 추가했고 해당 모달 기능은 확인할 수 있는데, 세부 카테고리 부분을 불러오라고 명령했더니, 자동으로 SelectOption에서도 확인될 수 있게 연동된 것 같습니다)

2. 클릭 시 장소 마커를 변경하였습니다.

3. mock 데이터에 장소 정보를 추가하였습니다.

4. 시간에 맞춰서 영업상태가 바뀌도록 하였습니다.

5. 릴스영상 없는 데이터라면 버튼이 출력되지 않습니다.

6. 영업시간이 없다면 <정보 없음>으로 출력됩니다.

7. 여러 상태들을 mock데이터에 추가해봤습니다.

🧪 테스트

방식 (해당하는 것만 체크)

• [O] 로컬 환경에서 확인
• 운영 환경에서 확인
• 단위 / 통합 테스트
• 해당 없음

메모 (시나리오, 커맨드, 스크린샷 링크 등 — 선택)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
udidura	Ready	Preview, Comment	Apr 29, 2026 9:58am

[1000hyehyang]

@rina1201 좋습니다! 😊

lint 에러를 해결하실 때는 npm run lint:fix 명령어를 사용하시면 보다 빠르게 처리하실 수 있습니다!

그리고 현재 모달이 화면의 절반 정도만 차지하도록 구현되어 있는 것 같은데, 위쪽으로 더 확장되도록 조정하는 것도 가능할까요? 화면이 작다 보니 스크롤이 필요해서 UX적으로 불편한 것 같기도 합니다..!! 그리구 교수님께서 릴스 영상 임베드도 하면 좋을 것 같다고 피드백 하셨던 게 기억이 나는데, 영상 임베드도 해당 화면에서 가능하게끔 할까요??(임베드 가능한 것으로 확인했습니다!)

[rina1201]

@1000hyehyang 넵 이해했습니다!
다음에는 그 명령어로 처리하고 올리겠습니다! 감사합니다!

넵 예원님이 UI 디자인해주신대로 일단 만든건데, 아예 영업시간 토글 부분이 화면 안에 한번에 나올 수 있을정도로 모달 사이즈를 확장하면 더 좋을 것 같아요! 그렇게 다시 진행하겠습니다!

그리고 영상 임베드는, 지금은 누르면 인스타 웹페이지로 넘어가게 되어있을텐데, 아예 저희 앱 내에서 켜질 수 있도록 하는거죠? 그럼 아예 저 모달 안에 저희 맨 처음에 구상했던 것처럼 영상을 띄우는건가요? 아니면 그대로 <릴스 확인 버튼>을 누르면 앱 자체 내 새 창에서 영상이 열리는 방향일까요??
모달 안에 띄우려면 아예 모달 사이즈를 많이 확장시키더라도 릴스가 반정도 작게 보여질 것 같긴합니다.

[1000hyehyang]

@rina1201 넵 그 모달 풀 화면이 다 보이도록 하면 좋을 것 같아요! 음... 사실 교수님께서 영상을 볼 수 있게끔 하면 좋다고 하셨을 때 어떻게 보이면 좋을지 자세히 생각을 해보진 않았는데... 모달 안에 넣을까요? 버튼 눌렀을 때 새 창으로 이동하면 임베드의 의미가 없긴 해서.. 이거는 디코에 올려서 이야기해볼까요??

[rina1201]

@1000hyehyang 그럼 아예 클릭시 풀 화면으로 연동되게 하면, 지도 부분은 아예 안보이겠네요. 그래도 뭔가 클릭했을때 지도 부분이 살짝 보이고, 모달로 뜨는게 개인적으로는 편할 것 같은데, 이렇게 되면 말씀 주신 임베드 문제도 생기네요ㅠㅠ

아니면 모달을 한 70%로 두고, 영업 시간 같은 부분은 그대로 토글로 둔 상태에서, 영상을 하단에 넣고 작게 재생이 되게 한 후, <릴스보기> 버튼을 누르면 인스타 창으로 큰 화면으로 넘어가게 하는건 어떨까요??
제가 지금 핸드폰밖에 없어서 대충 이런 느낌으로요!

[rina1201]

@1000hyehyang
아니면 네이버 지도 형식을 좀 참고해서
일단 한번 누르면 모달을 영업시간 부분인 반만 보여주고, 모달을 위로 올리면 아예 전체창으로 이어지게 해서 릴스를 보여주는것도 방법이 될 것 같긴합니다.
(근데 이렇게 되면 사용자가 모달을 위로 올렸을 때 영상이 있다는 걸 모를 수도 있을 것 같네요..)

애매하네요.. 아니면 임베드를 포기하고, 그냥 기존 형식에서 모달 사이즈만 변형시키는 것도 깔끔하긴 할 것 같구요. 근데 저희가 완전 초기 구상했을때는 영상 임베드 형식이었고, 1차 발표도 영상 임베드 UI로 발표를 했어서, 한번 디코에 여쭤봐도 좋을 것 같아요!

[1000hyehyang]

4/29 UX 회의 후 결정된 사안으로 UI 수정

[1000hyehyang]

@rina1201 수고 많으셨습니다!