# 동네 카페 소개 사이트를 만드는 완성 프롬프트 너는 작은 가게의 소개 사이트를 만드는 웹 개발자이자 디자이너다. 아래 가게 정보와 요구사항으로 모바일에서도 편하게 볼 수 있는 카페 소개 사이트를 만들어라. 설명만 하지 말고, 실제로 열어 확인할 수 있는 화면과 코드를 완성해라. ## 1. 가게 정보 - 가게 이름: 모퉁이 카페 - 소개: 동네에서 잠깐 쉬어 갈 수 있는 작은 카페 - 소개 문구: 커피 한 잔의 여유, 우리 동네 모퉁이 - 대표 메뉴: 아메리카노 4,500원 / 카페라테 5,000원 / 바닐라라테 5,500원 / 크루아상 3,800원 - 영업시간: 오전 11시부터 오후 8시까지, 화요일 휴무 - 주소: 아직 입력하지 않음 - 연락처와 지도 링크: 아직 입력하지 않음 - 지금 만드는 것은 학습용 예시다. 가게 이름, 메뉴, 가격과 영업시간은 가상의 정보임을 표시해라. 다른 가게에 사용할 때에는 위 항목을 실제 정보로 바꿔라. 제공하지 않은 주소·연락처·후기·수상 경력은 만들어 넣지 마라. ## 2. 방문자가 할 수 있어야 하는 일 1. 첫 화면에서 어떤 가게인지 바로 이해한다. 2. 대표 메뉴와 가격을 확인한다. 3. 가게 소개와 영업시간을 읽는다. 4. 방문 안내를 확인한다. 회원가입이나 로그인 없이 소개 사이트를 볼 수 있게 해라. 예약·주문·결제 기능은 이번 범위에 포함하지 마라. ## 3. 화면 구성 - 상단: 가게 이름과 '메뉴', '가게 소개', '방문 안내' 메뉴 - 첫 화면: 짧은 소개 문구, 커피 사진, '메뉴 보기'와 '방문 안내' 버튼 - 대표 메뉴: 메뉴 이름, 간단한 설명, 가격을 읽기 쉽게 배치 - 가게 소개: 짧은 소개와 분위기를 설명하는 문장 - 방문 안내: 영업시간, 휴무일과 주소·연락처의 준비 상태 - 하단: 학습용 예시 표시와 사진 출처 '메뉴 보기'와 '방문 안내' 버튼은 해당 영역으로 이동하게 해라. 주소와 연락처를 받지 않았으므로 실제 가게로 연결되는 지도·전화 버튼은 만들지 마라. ## 4. 디자인과 글쓰기 - 아이보리 배경과 짙은 갈색 글자로 차분한 분위기를 만들어라. - 사진과 여백을 활용하고, 긴 설명과 장식은 줄여라. - 휴대폰에서는 사진과 글이 자연스럽게 한 줄로 이어지게 해라. - 메뉴 이름과 가격은 작은 화면에서도 쉽게 읽을 수 있어야 한다. - 누구나 이해할 수 있는 짧은 한국어를 사용해라. - 의미 없는 영어 문구, 과장된 후기와 '최고의 카페' 같은 근거 없는 표현은 쓰지 마라. - 사진은 무료 사용 조건을 확인한 자료를 사용하고 사진가와 원문을 표시해라. ## 5. 구현 조건 - 기존 프로젝트가 있다면 구조를 먼저 확인하고 기존 기능을 재사용해라. - 이 예시에서는 NexiBase의 Next.js 기반 화면으로 구현한다. - 소개 글과 메뉴 정보는 SSR HTML에 포함해라. - 기존 사이트의 회원·관리자·결제 설정은 변경하지 마라. - 메뉴와 가게 정보를 쉽게 바꿀 수 있도록 코드에서 모아 관리해라. - 이미지에는 대체 설명을 넣고, 버튼과 링크는 키보드로 사용할 수 있게 해라. - 작은 화면에서 내용이 가로로 넘치지 않게 해라. - 실제 가게 정보가 들어오기 전에는 학습용 예시 표시를 유지해라. ## 6. 완성 후 확인과 전달 - 데스크톱과 폭 390px의 모바일 화면을 확인해라. - 메뉴와 방문 안내 버튼이 올바른 영역으로 이동하는지 확인해라. - 메뉴 이름, 가격과 영업시간이 SSR HTML에 포함되는지 확인해라. - 제공하지 않은 주소·전화·후기가 표시되지 않는지 확인해라. - 실제로 확인한 결과와 아직 확인하지 못한 내용을 구분해라. - 완성된 화면, 실행 방법, 가게 정보를 바꾸는 위치와 공개 전 확인 목록을 알려줘라. - 실제 서버에 공개하기 전에는 실제 가게 정보, 사진 권한, 도메인과 HTTPS 상태를 확인해라. 이 조건에 맞춰 먼저 사용할 수 있는 소개 사이트를 만들고, 확인 결과를 바탕으로 필요한 부분만 수정해라.