홈페이지 색상변경

[serendipity1004]

더 화려한 색으로 색상변경

[serendipity1004]

@claude 어떻게 작업하면 좋을지 알려줘

[claude]

Claude finished @serendipity1004's task —— View job

---

홈페이지 색상 변경 작업 가이드

Todo List:

• 현재 홈페이지 색상 체계 분석
• 더 화려한 색상 옵션 제안
• 구체적인 구현 방법 가이드 제공

현재 색상 체계 분석

현재 K-NOMAD 홈페이지는 매우 차분하고 모노크롬적인 색상 체계를 사용하고 있습니다:

🎨 현재 색상 특징:

• 배경: 주로 회색조 (OKLCH 기반의 무채색)
• 메인 액센트: 파란색 계열 (blue-600, blue-50)
• 필터 아이콘: 4가지 색상 (파랑, 초록, 보라, 주황) 사용
• 도시 카드: 파란색 그라디언트 (from-blue-400 to-blue-600)
• 전체적으로: 안전하고 차분하지만 밋밋한 느낌

🌈 더 화려한 색상 제안

1. 메인 배경 그라디언트 변경

/* 현재: from-blue-50/50 to-background */
/* 제안: */
from-purple-100 via-pink-50 to-orange-50
from-cyan-100 via-blue-100 to-purple-100
from-emerald-100 via-teal-50 to-cyan-100

2. 도시 카드 다양한 색상
현재 모든 카드가 파란색인데, 도시별로 다른 색상 적용:

/* 서울/인천: */ from-purple-500 to-pink-600
/* 부산/울산: */ from-cyan-500 to-blue-600  
/* 제주: */ from-emerald-500 to-teal-600
/* 강릉/속초: */ from-orange-500 to-red-600
/* 전주/대전: */ from-violet-500 to-purple-600

3. 버튼과 액센트 색상 강화

/* 검색 버튼 그라디언트 */
from-gradient-to-r from-pink-500 via-purple-500 to-indigo-600
/* 필터 호버 효과 */
hover:from-emerald-400 hover:to-cyan-500

🛠️ 구체적인 구현 방법

단계 1: HeroSection 배경 변경 (src/components/home/HeroSection.tsx:35)

// 현재
className="relative py-20 px-4 bg-gradient-to-b from-blue-50/50 to-background"

// 화려한 옵션
className="relative py-20 px-4 bg-gradient-to-br from-purple-100 via-pink-50 to-orange-50"

단계 2: 검색 버튼 그라디언트 강화 (src/components/home/HeroSection.tsx:144)

// 현재
className="... bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800"

// 화려한 옵션
className="... bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-600 hover:from-pink-600 hover:via-purple-600 hover:to-indigo-700"

단계 3: 도시 카드 색상 다양화 (src/components/cities/CityCard.tsx:77)
지역별 또는 도시별로 다른 그라디언트 적용:

const getGradientByRegion = (region: string) => {
  const gradients = {
    '수도권': 'from-purple-500 to-pink-600',
    '경상도': 'from-cyan-500 to-blue-600',
    '제주도': 'from-emerald-500 to-teal-600',
    '강원도': 'from-orange-500 to-red-600',
    '전라도': 'from-violet-500 to-purple-600',
    '충청도': 'from-indigo-500 to-blue-600'
  };
  return gradients[region] || 'from-blue-400 to-blue-600';
};

단계 4: 필터 아이콘 색상 더 생동감 있게
현재도 좋지만 더 선명하게:

• 파랑 → text-blue-500에서 text-blue-600로
• 초록 → text-green-500에서 text-emerald-600로
• 보라 → text-purple-500에서 text-violet-600로
• 주황 → text-orange-500에서 text-orange-600로

🎯 추천 시작점:

1. HeroSection 배경부터 시작 (가장 임팩트 큰 변화)
2. 도시 카드 색상 다양화 (재미있는 시각적 효과)
3. 버튼 그라디언트 강화 (인터랙션 요소 개선)

⚠️ 주의사항:

• 다크모드 호환성 확인 필요
• 접근성 고려 (대비율 체크)
• 전체적인 브랜드 통일성 유지

구현하고 싶은 특정 부분이 있으시면 말씀해 주세요! 🎨

---