AdeDeepFishing/trip-itinerary-page

여행 일정 페이지

일별 여행 계획을 단일 HTML 파일로 변환합니다: 일별 고정 탭, 카운트다운 배너, 타임라인 스타일의 활동 카드(무료 / 예약 필요 / 가격 / 교통 / 혼자 여행 / 하이라이트 태그 포함), 준비 체크리스트, 필수 정보 패널. 빌드 단계나 의존성 없음 — 하나의 파일로, 휴대폰에서도 작동하며, 어디든 쉽게 재배포 가능합니다(Vercel, Netlify, GitHub Pages, 또는 로컬에서 바로 열기).

assets/template.html에서 시작하세요. 처음부터 새로 만들지 마세요 — 템플릿에는 가장 까다로운 두 부분(네비게이션 자동 스크롤 및 아래의 카운트다운/날짜 로직)에 대한 테스트된 JS가 이미 포함되어 있으며, 이를 다시 구현하면 이미 수정된 버그가 다시 발생할 수 있습니다.

워크플로우

1. 필요한 정보 수집 (대화에 이미 없다면 물어보기)

• 여행하는 사람, 호스트(있는 경우) — 이름만으로 충분
• 목적지 및 날짜 범위
• 정확한 도착 및 출발 날짜+시간, 그리고 해당 시간대. 이것이 가장 흔한 오류 원인입니다 — 아래 함정을 읽고 하드코딩하기 전에 확인하세요.
• 이미 논의된 일별 계획 — 다시 묻지 말고 대화에서 가져오기
• 페이지에 표시될 홈 베이스, 개인 주소, 또는 만남 장소
• 테마 선호도 (아래 테마 참조) — 사용자가 신경 쓰지 않으면 기본값 kawaii-pink를 사용하세요. 가장 많이 테스트되었습니다.

모든 세부 정보가 없어도 작업을 막지 마세요. 누락된 항목은 자리 표시자([fill in])로 초안을 작성하고 답변에서 명확히 표시하여, 하나의 미지수 때문에 전체 페이지를 지연시키지 마세요.

2. 개인정보 보호 패스 — 주소를 작성하기 전에 반드시 수행

여행자가 호텔, 에어비앤비 또는 기타 지정 숙소에 머무는 경우에는 속성 이름과 동네를 평범하게 작성해도 괜찮습니다 — 이미 공개된 사업장이며, 이름을 명시하는 것이 실제로 유용합니다(라이드셰어 기사나 만나러 오는 친구에게). 객실/호수 번호만 빼주세요.

여행자가 누군가의 개인 주택(친구나 가족의 집)에 머무는 경우에는 파일에 실제 주소, 정확한 건물 이름, 또는 정확한 주거 동네를 절대 작성하지 마세요 — 사용자가 채팅에서 직접 알려줬더라도, 페이지가 스크린샷, 공유, 추측 가능한 URL에서 호스팅, 또는 공개될 가능성이 있다면요.

개인 주택의 경우 잘 작동하는 패턴: 특정 위치를 "제가 보낸 주소" 또는 "우리 단골 장소"와 같은 표현으로 바꾸세요 — 실제 정보가 필요한 사람들 사이에서는 자연스러운 내부 농담처럼 읽히며, 외부 독자에게는 아무것도 드러내지 않습니다. 지하철 노선명과 일반 지역("X선 역 근처")은 그대로 유지하세요 — 실제로 유용하면서 자체로는 식별 정보가 아닙니다.

이 규칙을 일관되게 적용하세요: 특정 장소 이름이 여러 곳에 나타나는 경우(예: "필수 정보" 카드와 경로 설명 "X까지 기차를 타고" 모두에 주거 동네가 언급된 경우) — 모두 같은 방식으로 정리하세요. 하나의 수정된 카드 옆에 실제 이름이 세 번 casually 언급되면 목적을 상실합니다.

3. 테마 선택

템플릿에는 하나의 속성으로 전환되는 두 가지 전체 테마가 포함되어 있습니다:

<html data-theme="kawaii-pink">   <!-- 또는 -->
<html data-theme="neutral-modern">

글꼴, 색상, 장식용 헤더 모양 등 나머지 모든 것은 이 하나의 값에서 자동으로 따라옵니다 — 테마를 전환하기 위해 나머지 CSS를 건드릴 필요가 없습니다. 세 번째 테마를 추가하려면 파일 상단 근처의 CSS 블록 중 [data-theme="..."] 블록을 복사하고 이름을 바꾼 다음 변수를 조정하세요 — examples/demo-lisbon-trip.html에서 작업 예제(이 방식으로 구축된 사용자 정의 lisbon-tile 테마, 두 기본값 대신 아줄레주 블루 + 테라코타)를 참조하세요.

헤더에는 이미 부드러운 도트 텍스처의 그라데이션 배경, 아래 페이지로 이어지는 웨이브 모양 분할선, 통계 "칩" 행, 선택적 장식 모서리 악센트(.corner-orb) 및 각 테마가 켜거나 끌 수 있는 작은 아이콘(kawaii-pink의 .bow 등)이 포함되어 있습니다 — 이 중 어떤 것도 다시 빌드할 필요 없이, 칩 텍스트만 채우고 새 테마에 대해 어떤 장식 요소를 표시할지 전환하세요(.bow/.tile-ornament/.corner-orb가 CSS 상단 근처의 data-theme별로 어떻게 범위 지정되는지 참조).

4. 일별 카드 작성

각 일별 카드는 <section class="day">이며, data-date(ISO 형식, 네비게이션 빌더 스크립트에서 사용)와 data-title(탭에 표시되는 짧은 레이블) 속성을 가집니다. 내부에는 색상 배지가 있는 헤더, 그 다음 .timeline에 .item 블록들: 시간, 굵은 제목, 한두 문장, 선택적 태그.

기본 제공 태그: free(무료), book(사전 예약 필요), price(태그 텍스트에 실제 비용 입력, 예: "¥500" 또는 "$12" — 통화는 여행에 따라 다름), transit(언급할 가치가 있는 교통 정보), solo(혼자 해도 좋음 / 혼자 여행에 적합한 시간), highlight(여행의 개인적인 터치를 위한 일반 악센트 태그 — 팬덤, 내부 농담, "꼭 봐야 함" 플래그). 이 범주에 포함되지 않는 여행 카테고리가 필요하면 같은 방식으로 새 태그 클래스를 추가하세요.

설명 텍스트는 항목당 한두 문장으로 유지하세요 — 이는 훑어보기 좋은 휴대폰 참고 자료이지 블로그 게시물이 아닙니다.

5. 카운트다운 연결 — 날짜를 설정하기 전에 읽으세요

파일 하단 근처:

var arrive = new Date('2026-07-18T15:05:00+09:00');
var depart = new Date('2026-07-25T18:00:00+09:00');

헤더에는 여행 시작 전까지 실시간으로 틱하는 일/시간/분/초 카운트다운이 표시되고, 여행 중에는 자동으로 "여행 N일차"로 전환되며, 그 후에는 "여행 완료"로 전환됩니다 — 이는 매초 실행되는 tick() 함수가 처리하므로 직접 구축할 필요가 없습니다.

적극적으로 확인해야 할 일반적인 실수: 예약 확인서의 출발 날짜는 여행자가 출발 도시를 떠나는 날짜이지, 도착하는 날짜가 아닙니다. 장거리 또는 야간 비행의 경우 현지 도착 시간은 목적지에서 다음 날짜인 경우가 매우 많습니다 — 일정표에는 도착 시간 옆에 작은 "+1일"로 표시되어 있어 놓치기 쉽습니다. 도착 타임스탬프를 하드코딩하기 전에 명시적으로 확인하세요: 출발 날짜 + 비행 시간, 목적지 시간대 오프셋과 대조하여, 작성하려는 날짜에 실제로 도착하는지 확인하세요. 이것을 잘못 설정하면 전체 카운트다운(및 일별 네비게이션의 "오늘" 강조 표시)이 하루 차이로 어긋나며, 보통 출발하지 않은 비행을 기다리는 사람이 공항에 있을 때 발견됩니다.

또한 ISO 문자열의 UTC 오프셋이 여행자의 홈 시간대가 아닌 목적지 시간대와 일치하는지 다시 확인하세요.

6. 고정 일별 네비게이션

이것은 존재하는 .day 섹션에서 자동으로 빌드됩니다 — 직접 작성할 필요가 없습니다. 알아야 할 두 가지 동작이 이미 구현되어 있습니다:

• 활성 탭은 스크롤 위치에 따라 결정되며 사용자가 스크롤할 때 강조 표시됩니다
• 탭 스트립은 수평으로 자동 스크롤되어 활성 탭이 보이도록 유지됩니다. 이 기능이 없으면 6일 또는 7일을 지나 스크롤하는 사용자는 해당 탭이 네비게이션 바의 보이는 가장자리 밖으로 스크롤되어 수동으로 스크롤해야 합니다 — 이것은 이전 버전에서 실제 버그였으며, 수정 사항은 syncActive() 내부의 scrollTo 블록입니다. 커스터마이징할 때 제거하지 마세요.

7. 체크리스트 및 필수 정보 패널 작성

• 체크리스트(#checklist): 예약 및 준비 작업, 각각 체크박스. UI 복사본에 체크박스는 새로고침 시 재설정된다는 점(백엔드 없음)을 명시하세요 — 사용자가 지속적이라고 생각하지 않도록 하세요.
• 필수 정보: 숙소 위치(위의 개인정보 보호 패스에서 호텔 대 개인 주택 표현 참조), 분리 시 만남 장소, 목적지 국가의 비상 연락처(한 국가의 번호를 기본값으로 사용하지 마세요), 날씨/더위 또는 추위 계획, 현금/결제 관행, 그리고 약간의 혼란(지연된 기차, 방전된 휴대폰) 상황에서 진정으로 유용한 기타 사항. 이 패널은 짧게 유지하세요 — 5~6개의 카드, 전체 가이드북이 아닙니다.

8. 전달 전 확인

• 도착/출발 날짜 및 시간대가 올바른지(5단계 다시 읽기)
• 경로 설명을 포함하여 파일 어디에도 실제 홈 주소나 정확한 개인 위치가 없는지(필수 정보 카드뿐만 아니라)
• 테마 속성이 사용자가 요청한 것과 일치하는지
• 스크립트를 수정한 경우 네비게이션 자동 스크롤이 여전히 작동하는지
• 체크박스가 체크될 때 레이블이 시각적으로 취소선 처리되는지
• 출력/전달 위치에 저장하고 사용자에게 파일을 제시(이 환경에서 사용 가능한 파일 전달 도구를 사용하고, 없으면 사용자에게 파일 경로를 직접 알려주기)

9. 계속 편집할 것을 예상

여행 계획은 끊임없이 변합니다 — 지연된 항공편, 악천후, 만석인 레스토랑, 날짜 변경. 사용자가 변경 사항을 가지고 돌아오면, 전체 파일을 재생성하지 말고 특정 섹션을 대상으로 편집하세요. 사용자는 다른 곳에서 이미 사본을 커스터마이징했을 수 있으며, 전체 재작성은 조용히 폐기됩니다. 재배포(호스팅된 경우)는 동일한 파일을 다시 업로드하는 것뿐입니다 — 편집 후 사용자에게 이 작업을 상기시키세요(Vercel이나 Netlify와 같은 호스트를 언급한 경우, 여기서 편집한 내용이 자동으로 푸시되지 않으므로).

이 스킬의 파일

• assets/template.html — 시작점. 복사한 후 위 단계를 따르세요.