Web4ai/o2o-site-AEO
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
c366361513
o2o-site-AEO/solution/site/scripts/mockup/build4/index.html
Mina Choi 872d00f3c4 [feat] solution: 미니 블로그·이용후기·예약요청 추가, /s/stay 목업·발행 사이트 UI 다수 수정 
인앱 미니 블로그(AI 자동 포스트, 이메일 승인)·이용후기(즉시 게시)·예약 요청(메일 발송)을
새로 붙였고, 병행해서 /s/stay 목업과 발행 사이트 공통 렌더러(UnitsSection·FestivalSection·
LocalGuideSection·WeatherSection 등)의 UI 버그를 다수 고쳤다. 범위가 넓지만 한 주 분량
작업을 한 커밋으로 묶어 달라는 요청에 따라 하나로 묶는다.

- solution/backend: post/review/booking_request 라우터·서비스·CRUD 추가, 스케줄러에
  블로그 초안 생성(새벽 4:10)·발송(아침 9:00) cron 등록, 마이그레이션 4건 추가
- solution/frontend, admin/frontend: 생성된 API 클라이언트 갱신, 리뷰 모더레이션·
  블로그 글 관리 페이지 추가
- solution/site/src: 객실 상세+실시간예약(날짜선택·연락처 폼)을 모달로 통합, 축제·
  주변안내 카드 클릭 시 모달 전환, 후기 목록 카드 UI, 공용 Modal 컴포넌트 신설,
  날씨 문구 동기화 버그 수정(하늘줄·기온줄 한 타이머로), 시설·편의 가능/불가 아이콘
  색상 하이라이트, 헤더 메뉴 순서를 실제 섹션 순서에 맞춤, 하단 탭바 아이콘 정렬 버그
  (line-height) 수정, 추천일정 점선 연결+데스크톱 자동펼침/모바일 축소, 채널 라벨에
  크롤링 원문("NOL")이 새던 것을 bookingLabel() 로 교체
- solution/site/scripts/mockup: /s/stay 패치 스크립트·주입 CSS·JS 다수 수정, stay4~6
  빌드 스크립트 추가(다른 세션 작업)

테스트: solution/site `npx tsc --noEmit` 통과, `npx vitest run` 93 passed,
solution/backend `pytest tests/test_booking_request.py` 6 passed(로컬 DB 대상).
예약 요청 메일은 실제 발송까지 확인(place 66894a1b 소유자 이메일 누락을 DB에서 보정).
2026-09-18 09:03:18 +09:00

271 lines
26 KiB
HTML
Raw Blame History

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>스테이,머뭄 · 전북 군산시 독채 펜션</title>
<meta name="description" content="1920년대 적산가옥을 고쳐 지은 독채 두 동, 매일 세탁·살균하는 침구" />
<link rel="canonical" href="https://web4ai.o2osolution.ai/s/stay4" />
<meta property="og:title" content="스테이,머뭄 · 전북 군산시 독채 펜션" />
<meta property="og:description" content="1920년대 적산가옥을 고쳐 지은 독채 두 동, 매일 세탁·살균하는 침구" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://web4ai.o2osolution.ai/s/stay4" />
<meta property="og:image" content="https://web4ai.o2osolution.ai/s/stay/img/mirror/ddc9f804f4ef83b5.jpg" />
<meta name="theme-color" content="#ffffff" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap" />
<link rel="stylesheet" href="/s/stay4/assets/css/main.css" />
<link rel="stylesheet" href="/s/stay4/assets/css/meomoom.css" />
<noscript><link rel="stylesheet" href="/s/stay4/assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<header id="topbar">
<a class="brand" href="/s/stay4">스테이,머뭄</a>
<nav><a href="/s/stay4" class="on">소개</a><a href="/s/stay4/gunsan">군산</a><a href="/s/stay4/booking">예약·후기</a></nav>
</header>
<div id="wrapper" class="divided">
<section class="cover tall">
<img class="bg" src="/s/stay/img/mirror/ddc9f804f4ef83b5.jpg" alt="목재 서까래 천장과 미닫이창, 테이블이 있는 거실 공간" />
<div class="veil"></div>
<div class="inner">
<p class="kicker">군산시</p>
<h1 class="serif">스테이,머뭄</h1>
<p class="lead">히로쓰 가옥 담 너머, 백 년 된 집 한 채</p>
<ul class="actions stacked"><li><a href="#about" class="button large ghost">스테이,머뭄 소개</a></li></ul>
</div>
<span class="scrollhint" aria-hidden="true"></span>
</section>
<section class="cover mid chapter">
<img class="bg" src="/s/stay/img/h-01.jpg" alt="기와 지붕 아래로 넓은 우드 데크와 정원이 이어지는 외관" loading="lazy" />
<div class="veil"></div>
<div class="inner">
<h2 class="serif">스테이,머뭄 소개</h2>
<p>스테이,머뭄은 전북특별자치도 군산시 신흥동 절골길에 있는 독채 펜션입니다. 1920년대에 지어진 백 년 고택으로, 국가등록문화유산인 군산 신흥동 일본식 가옥(히로쓰 가옥) 후문 바로 옆 — 걸어서 13m 거리입니다. 사장님은 이 집이 히로쓰 가옥 관리인이 살던 집이라고 전합니다. 2024년 5월에 리모델링을 마치고 문을 열었고, A동과 B동 두 동을 각각 한 팀만 씁니다. 기준 2인 · 최대 4인까지 묵을 수 있습니다.</p>
</div>
</section>
<section class="wrapper style1 align-center ivory" id="about">
<div class="inner"><p class="prose">A동은 편안한 일본집에 와 있는 듯한 느낌의 공간이고, B동은 아늑하고 깔끔한 현대식 모던 스타일 공간입니다. 두 동 모두 독립된 아담한 정원과 창고형 CAFÉ 공간이 딸려 있어, 마당과 거실에서 새소리를 들으며 쉴 수 있습니다.</p><img class="wideshot" src="/s/stay/img/a-05.jpg" alt="붉은 벽돌 벽에 벤치와 색색 의자를 둔 창고형 카페 공간" loading="lazy" /><p class="prose">인테리어와 가구, 소품, 침구를 하나하나 준비해 두었습니다. 특히 침구류는 매일 세탁·살균하고 건조해 쓰시는 분이 바뀔 때마다 새것처럼 나갑니다.</p></div>
</section>
<section class="wrapper style1 align-center" id="units">
<div class="inner"><h2 class="serif">객실 안내</h2><div class="units">
<article class="unit">
<a class="shot" href="/s/stay4/booking#a">
<img src="/s/stay/img/mirror/6d0c447b6a0c32af.jpg" alt="소파와 탁자, 벽난로 조명이 있는 서까래 천장의 거실" loading="lazy" />
</a>
<div class="body">
<h3>A동</h3>
<p class="sub">일본식 가정집 느낌으로 디딤돌마당과 예쁜정원</p>
<ul class="chips"><li>기준 2명</li><li>최대 4명</li><li>퀸 침대 1개</li><li>52 m²</li></ul>
<p class="price">주중 1박 <b>198,000원</b></p>
<a class="button fit" href="/s/stay4/booking#a">A동 보기</a>
</div>
</article>
<article class="unit">
<a class="shot" href="/s/stay4/booking#b">
<img src="/s/stay/img/h-05.jpg" alt="문 사이로 보이는 흰 앤티크 침대와 검은 서랍장" loading="lazy" />
</a>
<div class="body">
<h3>B동</h3>
<p class="sub">모던한 현대식 컨셉으로 꾸며진 따뜻한 공간</p>
<ul class="chips"><li>기준 2명</li><li>최대 4명</li><li>킹 침대 1개</li></ul>
<p class="price">주중 1박 <b>198,000원</b></p>
<a class="button fit" href="/s/stay4/booking#b">B동 보기</a>
</div>
</article></div><ul class="actions"><li><a class="button primary" href="/s/stay4/booking">이용안내 및 예약</a></li></ul></div>
</section>
<section class="wrapper style1 align-center ivory" id="gallery">
<div class="inner"><h2 class="serif">사진 갤러리</h2><div class="gallery style2 medium lightbox onscroll-fade-in"><article><a href="/s/stay/img/mirror/ddc9f804f4ef83b5.jpg" class="image"><img src="/s/stay/img/mirror/ddc9f804f4ef83b5.jpg" alt="목재 서까래 천장과 미닫이창, 테이블이 있는 거실 공간" loading="lazy" /></a><div class="caption"><p>거실</p></div></article><article><a href="/s/stay/img/mirror/6d0c447b6a0c32af.jpg" class="image"><img src="/s/stay/img/mirror/6d0c447b6a0c32af.jpg" alt="소파와 탁자, 벽난로 조명이 있는 서까래 천장의 거실" loading="lazy" /></a><div class="caption"><p>거실</p></div></article><article><a href="/s/stay/img/mirror/2d94158a48480fcd.jpg" class="image"><img src="/s/stay/img/mirror/2d94158a48480fcd.jpg" alt="싱크대와 냉장고, 전자레인지가 구비된 실내 주방 공간" loading="lazy" /></a><div class="caption"><p>주방</p></div></article><article><a href="/s/stay/img/mirror/d364f605223524bd.jpg" class="image"><img src="/s/stay/img/mirror/d364f605223524bd.jpg" alt="주방 싱크대 앞에서 포즈를 취하고 있는 여성의 모습" loading="lazy" /></a><div class="caption"><p>주방</p></div></article><article><a href="/s/stay/img/mirror/e0ed8d1a27e09320.jpg" class="image"><img src="/s/stay/img/mirror/e0ed8d1a27e09320.jpg" alt="벽면에 설치된 그림 화면과 벽난로 조명 장식" loading="lazy" /></a><div class="caption"><p>거실</p></div></article><article><a href="/s/stay/img/mirror/aa69a633f8e3a631.jpg" class="image"><img src="/s/stay/img/mirror/aa69a633f8e3a631.jpg" alt="창밖으로 조명을 비춘 정원 나무와 석등이 보이는 풍경" loading="lazy" /></a><div class="caption"><p>전망</p></div></article><article><a href="/s/stay/img/mirror/7095220ca156e25e.jpg" class="image"><img src="/s/stay/img/mirror/7095220ca156e25e.jpg" alt="목재 서까래 천장에 설치된 조형적인 디자인의 조명 기구" loading="lazy" /></a><div class="caption"><p>거실</p></div></article><article><a href="/s/stay/img/mirror/caa5e076e7d56ec2.jpg" class="image"><img src="/s/stay/img/mirror/caa5e076e7d56ec2.jpg" alt="실내 벽면 홈 공간에 놓인 흰색 화병과 식물 장식" loading="lazy" /></a><div class="caption"><p>거실</p></div></article><article><a href="/s/stay/img/mirror/8e2ec99c433b6fe8.jpg" class="image"><img src="/s/stay/img/mirror/8e2ec99c433b6fe8.jpg" alt="실내 창문을 통해 바라본 푸른 하늘과 푸른 나무 풍경" loading="lazy" /></a><div class="caption"><p>전망</p></div></article><article><a href="/s/stay/img/h-01.jpg" class="image"><img src="/s/stay/img/h-01.jpg" alt="기와 지붕 아래로 넓은 우드 데크와 정원이 이어지는 외관" loading="lazy" /></a><div class="caption"><p>외관</p></div></article><article><a href="/s/stay/img/h-02.jpg" class="image"><img src="/s/stay/img/h-02.jpg" alt="동백이 핀 마당과 우드 파사드 현관으로 이어지는 데크" loading="lazy" /></a><div class="caption"><p>외관</p></div></article><article><a href="/s/stay/img/h-03.jpg" class="image"><img src="/s/stay/img/h-03.jpg" alt="흰 벽과 밝은 바닥에 올리브색 소파와 긴 벽난로를 둔 거실" loading="lazy" /></a><div class="caption"><p>거실</p></div></article></div><details class="more"><summary>나머지 25장 보기</summary><div class="gallery style2 medium lightbox onscroll-fade-in"><article><a href="/s/stay/img/h-04.jpg" class="image"><img src="/s/stay/img/h-04.jpg" alt="옛 서까래를 드러낸 천장에 라탄 조명이 걸린 거실" loading="lazy" /></a><div class="caption"><p>거실</p></div></article><article><a href="/s/stay/img/h-05.jpg" class="image"><img src="/s/stay/img/h-05.jpg" alt="문 사이로 보이는 흰 앤티크 침대와 검은 서랍장" loading="lazy" /></a><div class="caption"><p>침실</p></div></article><article><a href="/s/stay/img/h-06.jpg" class="image"><img src="/s/stay/img/h-06.jpg" alt="캡슐 커피머신과 레트로 전자레인지가 놓인 주방 어메니티" loading="lazy" /></a><div class="caption"><p>주방</p></div></article><article><a href="/s/stay/img/a-01.jpg" class="image"><img src="/s/stay/img/a-01.jpg" alt="긴 벽난로와 벽걸이 TV, 좌식 스툴을 둔 거실" loading="lazy" /></a><div class="caption"><p>거실</p></div></article><article><a href="/s/stay/img/a-02.jpg" class="image"><img src="/s/stay/img/a-02.jpg" alt="베이지 소파와 원형 원목 테이블, 장지문 창이 있는 거실" loading="lazy" /></a><div class="caption"><p>거실</p></div></article><article><a href="/s/stay/img/a-03.jpg" class="image"><img src="/s/stay/img/a-03.jpg" alt="옛 서까래 천장에 라탄 조명이 걸린 거실과 벽난로" loading="lazy" /></a><div class="caption"><p>거실</p></div></article><article><a href="/s/stay/img/a-04.jpg" class="image"><img src="/s/stay/img/a-04.jpg" alt="어두운 원목 하부장에 냉장고와 전자레인지를 둔 주방" loading="lazy" /></a><div class="caption"><p>주방</p></div></article><article><a href="/s/stay/img/a-05.jpg" class="image"><img src="/s/stay/img/a-05.jpg" alt="붉은 벽돌 벽에 벤치와 색색 의자를 둔 창고형 카페 공간" loading="lazy" /></a><div class="caption"><p>카페</p></div></article><article><a href="/s/stay/img/a-06.jpg" class="image"><img src="/s/stay/img/a-06.jpg" alt="석재 담과 소나무가 둘러싼 마당의 야외 티테이블" loading="lazy" /></a><div class="caption"><p>외관</p></div></article><article><a href="/s/stay/img/a-07.jpg" class="image"><img src="/s/stay/img/a-07.jpg" alt="원목 벽과 바닥을 지나 침실로 이어지는 복도" loading="lazy" /></a><div class="caption"><p>실내</p></div></article><article><a href="/s/stay/img/a-08.jpg" class="image"><img src="/s/stay/img/a-08.jpg" alt="장지문 창 옆에 흰 침구를 깐 침대가 놓인 침실" loading="lazy" /></a><div class="caption"><p>침실</p></div></article><article><a href="/s/stay/img/a-09.jpg" class="image"><img src="/s/stay/img/a-09.jpg" alt="정원이 보이는 큰 장지문 창과 벽걸이 TV" loading="lazy" /></a><div class="caption"><p>거실</p></div></article><article><a href="/s/stay/img/a-10.jpg" class="image"><img src="/s/stay/img/a-10.jpg" alt="원형 거울과 욕조, 어메니티를 둔 욕실" loading="lazy" /></a><div class="caption"><p>욕실</p></div></article><article><a href="/s/stay/img/a-11.jpg" class="image"><img src="/s/stay/img/a-11.jpg" alt="우드 외벽 건물과 담 사이 마당에 놓인 야외 테이블" loading="lazy" /></a><div class="caption"><p>외관</p></div></article><article><a href="/s/stay/img/a-12.jpg" class="image"><img src="/s/stay/img/a-12.jpg" alt="흰 벽돌 벽과 우드 담에 걸린 스테이 머뭄 간판" loading="lazy" /></a><div class="caption"><p>외관</p></div></article><article><a href="/s/stay/img/b-01.jpg" class="image"><img src="/s/stay/img/b-01.jpg" alt="초가 파라솔을 세운 데크와 검은 현관문이 있는 외관" loading="lazy" /></a><div class="caption"><p>외관</p></div></article><article><a href="/s/stay/img/b-02.jpg" class="image"><img src="/s/stay/img/b-02.jpg" alt="유리문을 열어 둔 카페 공간과 데크의 파라솔 테이블" loading="lazy" /></a><div class="caption"><p>외관</p></div></article><article><a href="/s/stay/img/b-03.jpg" class="image"><img src="/s/stay/img/b-03.jpg" alt="큰 창으로 빛이 드는 거실의 다크그린 소파와 샹들리에" loading="lazy" /></a><div class="caption"><p>거실</p></div></article><article><a href="/s/stay/img/b-04.jpg" class="image"><img src="/s/stay/img/b-04.jpg" alt="흰 타일 벽에 민트색 냉장고와 토스터를 둔 주방" loading="lazy" /></a><div class="caption"><p>주방</p></div></article><article><a href="/s/stay/img/b-05.jpg" class="image"><img src="/s/stay/img/b-05.jpg" alt="흰 앤티크 침대와 꽃 모양 조명이 있는 침실" loading="lazy" /></a><div class="caption"><p>침실</p></div></article><article><a href="/s/stay/img/b-06.jpg" class="image"><img src="/s/stay/img/b-06.jpg" alt="초록 서랍장과 거울, 유리문이 있는 침실 앞 공간" loading="lazy" /></a><div class="caption"><p>실내</p></div></article><article><a href="/s/stay/img/b-07.jpg" class="image"><img src="/s/stay/img/b-07.jpg" alt="커피 레터링 벽과 빨간 스툴을 둔 카페 공간" loading="lazy" /></a><div class="caption"><p>카페</p></div></article><article><a href="/s/stay/img/b-08.jpg" class="image"><img src="/s/stay/img/b-08.jpg" alt="욕조와 세면대, 블라인드 창이 있는 욕실" loading="lazy" /></a><div class="caption"><p>욕실</p></div></article><article><a href="/s/stay/img/b-09.jpg" class="image"><img src="/s/stay/img/b-09.jpg" alt="흰 벽돌 아치 현관에 우편함이 걸린 대문" loading="lazy" /></a><div class="caption"><p>외관</p></div></article><article><a href="/s/stay/img/b-10.jpg" class="image"><img src="/s/stay/img/b-10.jpg" alt="흰 벽돌 벽을 따라 디딤돌이 놓인 통로" loading="lazy" /></a><div class="caption"><p>외관</p></div></article></div></details></div>
</section>
<section class="wrapper style1 align-center" id="video">
<div class="inner"><h2 class="serif">ADO2 영상 보기</h2><p class="sectionlead">ADO2로 만든 홍보 영상입니다.</p><div class="vids"><a class="vid" href="https://youtube.com/shorts/c2ZdwhaB7S4" target="_blank" rel="noopener noreferrer"><img src="https://img.youtube.com/vi/c2ZdwhaB7S4/hqdefault.jpg" alt="머뭄의 하루" loading="lazy" /><span class="play" aria-hidden="true"></span><b>머뭄의 하루</b></a><a class="vid" href="https://youtube.com/shorts/_bbo3dVgOXs" target="_blank" rel="noopener noreferrer"><img src="https://img.youtube.com/vi/_bbo3dVgOXs/hqdefault.jpg" alt="마당과 창고형 카페 공간" loading="lazy" /><span class="play" aria-hidden="true"></span><b>마당과 창고형 카페 공간</b></a><a class="vid" href="https://youtube.com/shorts/qrCG4rOeJvs" target="_blank" rel="noopener noreferrer"><img src="https://img.youtube.com/vi/qrCG4rOeJvs/hqdefault.jpg" alt="밤의 머뭄" loading="lazy" /><span class="play" aria-hidden="true"></span><b>밤의 머뭄</b></a></div></div>
</section>
<section class="wrapper style1 align-center ivory" id="weather">
<div class="inner"><h2 class="serif">오늘의 날씨</h2><p class="weather"><span class="tag">구름많음 27.9&deg;</span>빛이 부드러운 날입니다. 골목 사진이 제일 잘 나오는 빛입니다.</p></div>
</section>
<section class="wrapper style1 align-center" id="location">
<div class="inner"><h2 class="serif">오시는 길</h2><p class="sectionlead">주소와 주요 거점까지의 이동 시간을 안내합니다.</p>
<p class="addr big">전북 군산시 절골길 18</p>
<iframe class="mapframe" loading="lazy" title="스테이,머뭄 위치"
src="https://www.openstreetmap.org/export/embed.html?bbox=126.7021254%2C35.9844175%2C126.71012540000001%2C35.988417500000004&amp;layer=mapnik&amp;marker=35.9864175%2C126.7061254"></iframe><ul class="actions"><li><a class="button primary" href="https://map.naver.com/p/search/전북 군산시 절골길 18" target="_blank" rel="noopener noreferrer">길찾기</a></li></ul></div>
</section>
<section class="wrapper style1 align-center" id="postcard">
<div class="inner">
<h2 class="serif">엽서 쓰기</h2>
<p class="sectionlead">스테이,머뭄에서 보내는 한 장을 직접 써 봅니다. 사진을 고르고 한 마디를
적으면 그 자리에서 엽서가 되고, 그대로 공유하거나 저장할 수 있습니다.</p>
<div class="pc">
<canvas id="pcCanvas" width="1080" height="1350" aria-label="엽서 미리보기"></canvas>
<div class="pcside">
<div class="picks" id="pcPicks"><button type="button" data-src="/s/stay/img/mirror/ddc9f804f4ef83b5.jpg" aria-label="목재 서까래 천장과 미닫이창, 테이블이 있는 거실 공간"><img src="/s/stay/img/mirror/ddc9f804f4ef83b5.jpg" alt="" loading="lazy" /></button><button type="button" data-src="/s/stay/img/mirror/6d0c447b6a0c32af.jpg" aria-label="소파와 탁자, 벽난로 조명이 있는 서까래 천장의 거실"><img src="/s/stay/img/mirror/6d0c447b6a0c32af.jpg" alt="" loading="lazy" /></button><button type="button" data-src="/s/stay/img/mirror/2d94158a48480fcd.jpg" aria-label="싱크대와 냉장고, 전자레인지가 구비된 실내 주방 공간"><img src="/s/stay/img/mirror/2d94158a48480fcd.jpg" alt="" loading="lazy" /></button><button type="button" data-src="/s/stay/img/mirror/d364f605223524bd.jpg" aria-label="주방 싱크대 앞에서 포즈를 취하고 있는 여성의 모습"><img src="/s/stay/img/mirror/d364f605223524bd.jpg" alt="" loading="lazy" /></button><button type="button" data-src="/s/stay/img/mirror/e0ed8d1a27e09320.jpg" aria-label="벽면에 설치된 그림 화면과 벽난로 조명 장식"><img src="/s/stay/img/mirror/e0ed8d1a27e09320.jpg" alt="" loading="lazy" /></button><button type="button" data-src="/s/stay/img/mirror/aa69a633f8e3a631.jpg" aria-label="창밖으로 조명을 비춘 정원 나무와 석등이 보이는 풍경"><img src="/s/stay/img/mirror/aa69a633f8e3a631.jpg" alt="" loading="lazy" /></button><button type="button" data-src="/s/stay/img/mirror/7095220ca156e25e.jpg" aria-label="목재 서까래 천장에 설치된 조형적인 디자인의 조명 기구"><img src="/s/stay/img/mirror/7095220ca156e25e.jpg" alt="" loading="lazy" /></button><button type="button" data-src="/s/stay/img/mirror/caa5e076e7d56ec2.jpg" aria-label="실내 벽면 홈 공간에 놓인 흰색 화병과 식물 장식"><img src="/s/stay/img/mirror/caa5e076e7d56ec2.jpg" alt="" loading="lazy" /></button><button type="button" data-src="/s/stay/img/mirror/8e2ec99c433b6fe8.jpg" aria-label="실내 창문을 통해 바라본 푸른 하늘과 푸른 나무 풍경"><img src="/s/stay/img/mirror/8e2ec99c433b6fe8.jpg" alt="" loading="lazy" /></button><button type="button" data-src="/s/stay/img/h-01.jpg" aria-label="기와 지붕 아래로 넓은 우드 데크와 정원이 이어지는 외관"><img src="/s/stay/img/h-01.jpg" alt="" loading="lazy" /></button></div>
<textarea id="pcText" rows="3" maxlength="60"
placeholder="여기에 적으면 엽서에 바로 나타납니다"></textarea>
<p class="hint">네 줄까지 · <span id="pcCount">0</span>/60</p>
<ul class="actions stacked">
<li><button type="button" id="pcShare" class="button primary fit">카카오톡 등으로 공유</button></li>
<li><button type="button" id="pcSave" class="button fit">이미지로 저장</button></li>
</ul>
<p class="hint" id="pcStatus"></p>
</div>
</div>
</div>
</section>
<section class="wrapper style1 align-center pad-s"><div class="inner"><div class="nextnav"><a class="nextcard" href="/s/stay4/gunsan"><img src="/s/stay/img/mirror/f27b7440e2f1183f.jpg" alt="" loading="lazy" /><span><small>군산</small><b>군산 이야기</b></span></a><a class="nextcard" href="/s/stay4/booking"><img src="/s/stay/img/mirror/2d94158a48480fcd.jpg" alt="" loading="lazy" /><span><small>예약</small><b>이용안내 및 예약</b></span></a></div></div></section>
<footer class="wrapper style1 invert align-center" id="footer">
<div class="inner">
<h2 class="serif">스테이,머뭄</h2>
<p class="addr">전북 군산시 절골길 18<br /><a href="tel:0507-1497-0983">0507-1497-0983</a></p>
<ul class="actions stacked">
<li><a href="https://m.place.naver.com/place/1133638931/home" class="button primary fit" target="_blank" rel="noopener noreferrer">네이버 예약</a></li>
<li><a href="tel:0507-1497-0983" class="button fit ghost">전화 걸기</a></li>
<li><a href="https://www.instagram.com/staymeomoom" class="button fit" target="_blank" rel="noopener noreferrer">인스타그램</a></li>
</ul>
<p class="tiny">상호 스테이,머뭄 · 전북 군산시 절골길 18 · 최종 업데이트 2026-09-17<br />
레이아웃은 <a href="https://html5up.net/story">Story by HTML5 UP</a>(CC BY 3.0)를 고쳐 썼습니다.<br />
AI O2O의 Web4Ai로 만든 시안입니다.</p>
</div>
</footer>
</div>
<div id="bookbar">
<span class="price"><b>198,000원</b><small>주중 1박 기준 · 2인</small></span>
<a class="button primary" href="https://m.place.naver.com/place/1133638931/home" target="_blank" rel="noopener noreferrer">예약하기</a>
</div>
<script src="/s/stay4/assets/js/jquery.min.js"></script>
<script src="/s/stay4/assets/js/jquery.scrollex.min.js"></script>
<script src="/s/stay4/assets/js/jquery.scrolly.min.js"></script>
<script src="/s/stay4/assets/js/browser.min.js"></script>
<script src="/s/stay4/assets/js/breakpoints.min.js"></script>
<script src="/s/stay4/assets/js/util.js"></script>
<script src="/s/stay4/assets/js/main.js"></script>
<script>
(function () {
var canvas = document.getElementById('pcCanvas');
if (!canvas) return;
var ctx = canvas.getContext('2d');
var area = document.getElementById('pcText');
var count = document.getElementById('pcCount');
var saveBtn = document.getElementById('pcSave');
var shareBtn = document.getElementById('pcShare');
var status = document.getElementById('pcStatus');
var thumbs = [].slice.call(document.querySelectorAll('#pcPicks button'));
var W = 1080, H = 1350, PHOTO_H = 880;
var img = new Image();
var current = thumbs.length ? thumbs[0].getAttribute('data-src') : null;
var ready = false;
function wrap(text, maxWidth) {
var out = [];
text.split(/\n/).forEach(function (para) {
if (!para) { out.push(''); return; }
var line = '';
for (var i = 0; i < para.length; i++) {
var test = line + para[i];
if (ctx.measureText(test).width > maxWidth && line) { out.push(line); line = para[i]; }
else { line = test; }
}
out.push(line);
});
return out.slice(0, 4);
}
function draw() {
ctx.fillStyle = '#f7f5f1';
ctx.fillRect(0, 0, W, H);
if (ready) {
var r = Math.max(W / img.width, PHOTO_H / img.height);
var w = img.width * r, h = img.height * r;
ctx.drawImage(img, (W - w) / 2, (PHOTO_H - h) / 2, w, h);
} else {
ctx.fillStyle = '#e6e3dd';
ctx.fillRect(0, 0, W, PHOTO_H);
}
ctx.fillStyle = '#1f4a3f';
ctx.fillRect(0, PHOTO_H, W, 4);
var text = (area.value || '').trim();
ctx.fillStyle = '#15181a';
ctx.textBaseline = 'top';
ctx.font = '400 46px "Gowun Batang", serif';
var lines = text ? wrap(text, W - 160) : ['여기에 적으면 엽서에 바로 나타납니다'];
if (!text) ctx.fillStyle = '#9aa0a5';
lines.forEach(function (line, i) { ctx.fillText(line, 80, PHOTO_H + 70 + i * 72); });
ctx.fillStyle = '#767d84';
ctx.font = '500 28px Pretendard, sans-serif';
ctx.fillText('스테이,머뭄 · 전북 군산시 절골길 18', 80, H - 76);
}
function load(src) {
ready = false;
img = new Image();
img.onload = function () { ready = true; draw(); };
img.onerror = function () { ready = false; draw(); };
img.src = src;
}
thumbs.forEach(function (t) {
t.addEventListener('click', function () {
thumbs.forEach(function (x) { x.classList.remove('on'); });
t.classList.add('on');
current = t.getAttribute('data-src');
load(current);
});
});
if (thumbs.length) thumbs[0].classList.add('on');
area.addEventListener('input', function () {
if (area.value.length > 60) area.value = area.value.slice(0, 60);
count.textContent = area.value.length;
draw();
});
function withBlob(fn) {
canvas.toBlob(function (blob) {
if (!blob) { status.textContent = '지금은 만들지 못했습니다.'; return; }
fn(blob);
}, 'image/png');
}
saveBtn.addEventListener('click', function () {
withBlob(function (blob) {
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url; a.download = '스테이머뭄-엽서.png';
document.body.appendChild(a); a.click(); a.remove();
setTimeout(function () { URL.revokeObjectURL(url); }, 2000);
status.textContent = '이미지로 저장했습니다.';
});
});
shareBtn.addEventListener('click', function () {
withBlob(function (blob) {
var file = new File([blob], 'meomoom-postcard.png', {type: 'image/png'});
if (navigator.canShare && navigator.canShare({files: [file]})) {
navigator.share({files: [file], title: '스테이,머뭄'})
.then(function () { status.textContent = ''; })
.catch(function () { status.textContent = ''; });
} else {
status.textContent = '이 브라우저에서는 공유가 안 됩니다. 이미지로 저장해 주세요.';
}
});
});
if (document.fonts && document.fonts.ready) document.fonts.ready.then(draw);
if (current) load(current); else draw();
})();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink