[Feat] 미션 페이지 퍼블리싱

[kinjaebeom]

📝작업 내용

• 홈 페이지
• 미션 탐색 페이지
• 미션 상세 페이지
• 주변 로컬 추천 페이지
• 추가 보상 지역 페이지

📸스크린샷 (선택)

💬리뷰 요구사항(선택)

📌 작업 내용

이번 PR에서는 퀘스팟 미션 플로우 관련 페이지 구현과
공통 페이지 레이아웃 적용 작업을 진행했습니다.

---

✅ 주요 변경 사항

1. 🧱 공통 레이아웃 추가

페이지마다 너비, 높이, 배경색, 스크롤 기준이 달라지는 문제를 해결하기 위해
공통 페이지 레이아웃을 분리했습니다.

src/layouts/QuespotPageLayout.tsx

추가된 공통 컴포넌트는 다음과 같습니다.

QuespotPageLayout
QuespotPageContent
QuespotDivider

앞으로 새 페이지를 만들 때는 아래처럼 import해서 사용하면 됩니다.

import QuespotPageLayout, {
  QuespotDivider,
  QuespotPageContent,
} from "@/layouts/QuespotPageLayout";

사용 예시는 다음과 같습니다.

<QuespotPageLayout>
  <HomeHeader />

  <QuespotDivider />

  <QuespotPageContent>
    {/* 페이지 콘텐츠 */}
  </QuespotPageContent>
</QuespotPageLayout>

이를 통해 모바일 프레임 기준으로
페이지 크기, 배경색, 스크롤 동작을 일관되게 유지할 수 있습니다.

---

2. 🏠 홈 페이지 수정

홈 페이지를 피그마 디자인 기준으로 수정했습니다.

• 공통 QuespotPageLayout 적용
• 상단 Questy.svg 아이콘 적용
• 히어로 영역에 QuestyMain.svg 적용
• 퀘스티 둥둥 / 덤블링 애니메이션 추가
• 검색바를 하늘색 히어로 영역 내부로 이동
• 미션 탐색 버튼 스타일 수정
• 홈 페이지 전체 레이아웃 및 배경 정렬 수정

---

3. 🧭 미션 탐색 페이지 구현

미션 탐색 페이지를 피그마 디자인에 맞춰 구현했습니다.

• 미션 검색 영역 구현
• 카테고리 필터 탭 구현
• 미션 카드 리스트 구현
• 완료 / 진행 가능 / 잠김 상태 UI 적용
• 카드 클릭 시 미션 상세 페이지 이동 처리
• 가로 스크롤바 숨김 처리
• 공통 레이아웃 적용으로 페이지 크기 및 스크롤 기준 통일

---

4. 📍 미션 상세 페이지 구현

미션 상세 페이지를 구현하고,
미션 탐색 페이지에서 선택한 미션 데이터를 상세 페이지에 반영하도록 구성했습니다.

• 선택한 미션 정보 상세 페이지 반영
• 상단 히어로 배경 영역 구현
• 거리 / 보상 포인트 / 예상 시간 카드 구현
• 수행 방법 섹션 구현
• 수행 방법 항목 클릭 시 추후 페이지 연결 가능하도록 구조화
• 주변 로컬 / 보너스 지역 이동 카드 추가
• 미션 완료 및 기록 남기기 UI 구현
• 공통 레이아웃 적용으로 미션 페이지와 크기 통일

---

5. 🍽️ 추가 페이지 구현

미션 상세 페이지에서 이동할 수 있는 하위 페이지를 추가했습니다.

주변 로컬 추천 페이지

• 음식점 / 카페 / 문화시설 필터 구현
• 거리순 버튼 UI 구현
• 로컬 장소 카드 리스트 구현
• 좋아요 상태 토글 구현
• 음식점 아이콘 통일
• 공통 레이아웃 적용

추가 보상 지역 페이지

• 추가 보상 안내 영역 구현
• 보상 구성 카드 구현
• 추가 보상 설명 카드 구현
• 밝은 별 아이콘 UI 구현
• 미션 시작하기 버튼 구현
• 공통 레이아웃 적용

---

6. 🔗 라우터 및 경로 추가

미션 상세 페이지에서 하위 페이지로 이동할 수 있도록
라우터와 경로를 추가했습니다.

MISSION_LOCAL_RECOMMEND: "/mission/local-recommend",
MISSION_BONUS_REGION: "/mission/bonus-region",

추가된 이동 흐름은 다음과 같습니다.

미션 상세 페이지
→ 주변 로컬 클릭
→ /mission/local-recommend

미션 상세 페이지
→ 보너스 지역 클릭
→ /mission/bonus-region

---

🔍 확인 사항

• 홈 페이지 UI 확인
• 미션 탐색 페이지 UI 확인
• 미션 상세 페이지 UI 확인
• 미션 카드 클릭 시 상세 페이지 이동 확인
• 주변 로컬 추천 페이지 이동 확인
• 추가 보상 지역 페이지 이동 확인
• 공통 레이아웃 적용 후 페이지 크기 및 스크롤 동작 확인
• 가로 스크롤바 미노출 확인