<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>탄생향 추천</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<style>
body { font-family: 'Inter', sans-serif; }
input[type="number"]:focus {
border-color: #3b82f6; /* Tailwind blue-500 */
box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, .25);
}
</style>
</head>
<body
class="bg-slate-100 flex flex-col items-center justify-center min-h-screen p-4"
>
<div
class="container bg-white p-6 md:p-8 rounded-xl shadow-2xl w-full max-w-md"
>
<h1 class="text-3xl font-bold text-slate-700 text-center mb-8">
탄생향 추천
</h1>
<div>
<label
for="birthMonth"
class="block text-sm font-medium text-slate-600 mb-2"
>태어난 월 (1-12):</label
>
<input
type="number"
id="birthMonth"
name="birthMonth"
min="1"
max="12"
placeholder="예: 3"
class="w-full p-3 border border-slate-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-150 ease-in-out text-slate-700 placeholder-slate-400"
/>
</div>
<div class="mt-6">
<label
for="birthDay"
class="block text-sm font-medium text-slate-600 mb-2"
>태어난 일 (1-31):</label
>
<input
type="number"
id="birthDay"
name="birthDay"
min="1"
max="31"
placeholder="예: 15"
class="w-full p-3 border border-slate-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-150 ease-in-out text-slate-700 placeholder-slate-400"
/>
</div>
<button
onclick="recommendFragrance()"
class="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-150 ease-in-out mt-8 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50"
>
추천받기
</button>
<div
id="error"
class="hidden mt-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg text-center"
></div>
<div
id="recommendation"
class="hidden mt-8 p-6 bg-blue-50 border border-blue-300 rounded-lg shadow-sm"
></div>
</div>
<script>
// 절기별 향수 데이터
const seasonData = {
"인월": { "향 추천": ["시더우드 (Cedarwood)", "편백 (Hinoki Cypress)"] },
"묘월": { "향 추천": ["로즈우드 (Rosewood)", "샌달우드 (Sandalwood)"] },
"진월": { "향 추천": ["오렌지 (Orange)", "그레이프프룻 (Grapefruit)"] },
"사월": { "향 추천": ["제라늄 (Geranium)", "머스크 (Musk)", "피오니 (Peony)", "튜베로즈 (Tuberose)"] },
"오월": { "향 추천": ["네롤리 (Neroli)", "라벤더 (Lavender)", "일랑일랑 (Ylang Ylang)"] },
"미월": { "향 추천": ["버가못 (Bergamot)", "레몬 (Lemon)", "라임 (Lime)"] },
"신월": { "향 추천": ["로즈마리 (Rosemary)", "페퍼민트 (Peppermint)", "유칼립투스 (Eucalyptus)"] },
"유월": { "향 추천": ["페티그레인 (Petitgrain)", "바질 (Basil)"] },
"술월": { "향 추천": ["오렌지 (Orange)", "그레이프프룻 (Grapefruit)"] },
"해월": { "향 추천": ["넛맥 (Nutmeg)", "블랙페퍼 (Black Pepper)", "프랑킨센스 (Frankincense)"] },
"자월": { "향 추천": ["주니퍼베리 (Juniper Berry)", "베티버 (Vetiver)"] },
"축월": { "향 추천": ["버가못 (Bergamot)", "레몬 (Lemon)", "라임 (Lime)"] }
};
// 생년월일로 절기 계산 함수
function getUserSeason(birthMonth, birthDay) {
const seasonRanges = [ // 절기 범위 (월, 일 기준)
{ name: "인월", start: { m: 2, d: 4 }, end: { m: 3, d: 5 } },
{ name: "묘월", start: { m: 3, d: 6 }, end: { m: 4, d: 4 } },
{ name: "진월", start: { m: 4, d: 5 }, end: { m: 5, d: 4 } },
{ name: "사월", start: { m: 5, d: 5 }, end: { m: 6, d: 5 } },
{ name: "오월", start: { m: 6, d: 6 }, end: { m: 7, d: 6 } },
{ name: "미월", start: { m: 7, d: 7 }, end: { m: 8, d: 6 } },
{ name: "신월", start: { m: 8, d: 7 }, end: { m: 9, d: 7 } },
{ name: "유월", start: { m: 9, d: 8 }, end: { m: 10, d: 7 } },
{ name: "술월", start: { m: 10, d: 8 }, end: { m: 11, d: 6 } },
{ name: "해월", start: { m: 11, d: 7 }, end: { m: 12, d: 6 } },
{ name: "자월", start: { m: 12, d: 7 }, end: { m: 1, d: 4 } }, // 12월 ~ 다음 해 1월
{ name: "축월", start: { m: 1, d: 5 }, end: { m: 2, d: 3 } } // 1월 ~ 2월
];
const refYear = 2000; // 기준 연도 (윤년 아닌 해)
const birthDate = new Date(refYear, birthMonth - 1, birthDay);
for (const season of seasonRanges) {
let startDate = new Date(refYear, season.start.m - 1, season.start.d);
let endDate = new Date(refYear, season.end.m - 1, season.end.d);
// 연도가 바뀌는 절기 처리 (예: 자월)
if (season.name === "자월") {
if (birthMonth === 12) endDate.setFullYear(refYear + 1);
else if (birthMonth === 1) startDate.setFullYear(refYear - 1);
}
if (birthDate >= startDate && birthDate <= endDate) return season.name;
}
return "Unknown"; // 해당 절기 없음
}
// 향수 추천 함수
function recommendFragrance() {
const birthMonthInput = document.getElementById("birthMonth");
const birthDayInput = document.getElementById("birthDay");
const errorDiv = document.getElementById("error");
const recommendationDiv = document.getElementById("recommendation");
errorDiv.classList.add("hidden");
errorDiv.textContent = "";
recommendationDiv.classList.add("hidden");
recommendationDiv.innerHTML = "";
const birthMonth = parseInt(birthMonthInput.value);
const birthDay = parseInt(birthDayInput.value);
// 입력값 유효성 검사
if (isNaN(birthMonth) || isNaN(birthDay) || birthMonth < 1 || birthMonth > 12 || birthDay < 1 || birthDay > 31) {
errorDiv.textContent = "유효한 월(1-12)과 일(1-31)을 입력해주세요.";
errorDiv.classList.remove("hidden");
return;
}
const daysInMonth = new Date(2000, birthMonth, 0).getDate(); // 해당 월의 마지막 날짜
if (birthDay > daysInMonth) {
errorDiv.textContent = `해당 월(${birthMonth}월)에는 ${birthDay}일이 없습니다. 유효한 일을 입력해주세요.`;
errorDiv.classList.remove("hidden");
return;
}
const seasonName = getUserSeason(birthMonth, birthDay);
const seasonInfo = seasonData[seasonName];
if (seasonInfo && seasonName !== "Unknown") {
const recommendedFragrances = seasonInfo['향 추천'].join(", ") || '추천 향 없음';
recommendationDiv.innerHTML = `
<h2 class="text-xl font-semibold text-blue-700 mb-3 pb-2 border-b-2 border-blue-300">당신의 탄생향</h2>
<p class="text-slate-700">${recommendedFragrances}</p>
`;
recommendationDiv.classList.remove("hidden");
} else {
errorDiv.textContent = "해당 날짜에 대한 절기 정보를 찾을 수 없습니다. 입력값을 다시 확인해주세요.";
errorDiv.classList.remove("hidden");
}
}
</script>
</body>
</html>
oopy