[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Noto_Sans_KR } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { NavigationBar } from "@/components/navigation-bar" const notoSansKr = Noto_Sans_KR({ subsets: ["latin"], weight: ["400", "500", "700"], variable: "--font-noto-sans-kr", }) export const metadata: Metadata = { title: "도시 탐험가 | 인터랙티브 워킹 투어", description: "도시의 숨겨진 명소를 발견하고 퀴즈와 퍼즐을 통해 학습하는 인터랙티브 워킹 투어 게임", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import Link from "next/link" import { Navigation, Compass, Award, Info, Map } from "lucide-react" import { motion } from "framer-motion" import { useTheme } from "next-themes" import { useEffect, useState } from "react" import { cn } from "@/lib/utils" export default function Home() { const { theme } = useTheme() const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.3, }, }, } const item = { hidden: { y: 20, opacity: 0 }, show: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 300, damping: 24 } }, } const isDark = mounted && theme === "dark" return (

도시 탐험가 도시를 탐험하며 배우는 인터랙티브 워킹 투어

도시 탐험을 시작하세요

한국의 아름다운 도시들을 탐험하고 숨겨진 이야기를 발견하세요

} title="내 주변" href="/nearby" isDark={isDark} /> } title="랭킹" href="/leaderboard" isDark={isDark} />

도움말 및 가이드

앱 사용 방법 알아보기

) } interface FeatureCardProps { icon: React.ReactNode title: string href: string isDark: boolean } function FeatureCard({ icon, title, href, isDark }: FeatureCardProps) { return (

{icon}

{title}

살펴보기 ) } [V0_FILE]typescriptreact:file="app/explore/page.tsx" isMerged="true" import { CityExplorer } from "@/components/city-explorer" import { cities } from "@/constants/cities" export default function ExplorePage() { return (

도시 탐험하기

) } [V0_FILE]typescriptreact:file="app/nearby/page.tsx" isMerged="true" import { NearbyLandmarks } from "@/components/nearby-landmarks" export default function NearbyPage() { return (

내 주변 랜드마크

) } [V0_FILE]typescriptreact:file="app/landmark/[id]/page.tsx" isMerged="true" import { LandmarkDetail } from "@/components/landmark-detail" import { getLandmarkById } from "@/lib/landmarks" import { notFound } from "next/navigation" export default function LandmarkPage({ params }: { params: { id: string } }) { const landmark = getLandmarkById(params.id) if (!landmark) { notFound() } return (

) } [V0_FILE]typescriptreact:file="app/quiz/[id]/page.tsx" isMerged="true" import { QuizGame } from "@/components/quiz-game" import { getQuizByLandmarkId } from "@/lib/quizzes" import { notFound } from "next/navigation" export default function QuizPage({ params }: { params: { id: string } }) { const quiz = getQuizByLandmarkId(params.id) if (!quiz) { notFound() } return (

) } [V0_FILE]typescriptreact:file="components/city-explorer.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Button } from "@/components/ui/button" import Link from "next/link" import type { City } from "@/types/city" import Image from "next/image" import { motion, AnimatePresence } from "framer-motion" import { ArrowLeft, MapPin, Clock, Star } from "lucide-react" import { Badge } from "@/components/ui/badge" interface CityExplorerProps { cities: City[] } export function CityExplorer({ cities }: CityExplorerProps) { const [selectedCity, setSelectedCity] = useState(null) const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const item = { hidden: { y: 20, opacity: 0 }, show: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 300, damping: 24 } }, } return ( {!selectedCity ? (

탐험할 도시를 선택하세요

{cities.map((city) => ( setSelectedCity(city)} >

{city.name}

{city.description}

랜드마크 {city.landmarkCount}개

{city.difficulty}

))}

) : (

{selectedCity.name}

{selectedCity.description}

{selectedCity.landmarkCount}개 랜드마크

{selectedCity.estimatedTime}

도시 소개

{selectedCity.longDescription}

주요 랜드마크

{selectedCity.landmarks?.slice(0, 3).map((landmark, index) => (

{landmark}

))}

)} ) } [V0_FILE]typescriptreact:file="components/quiz-game.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Progress } from "@/components/ui/progress" import { Award, CheckCircle, XCircle, ArrowRight, ArrowLeft } from "lucide-react" import Link from "next/link" import type { Quiz } from "@/types/quiz" import { saveQuizResult } from "@/lib/user-progress" import { motion, AnimatePresence } from "framer-motion" import confetti from "canvas-confetti" interface QuizGameProps { quiz: Quiz landmarkId: string } export function QuizGame({ quiz, landmarkId }: QuizGameProps) { const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0) const [selectedAnswer, setSelectedAnswer] = useState(null) const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false) const [score, setScore] = useState(0) const [isCompleted, setIsCompleted] = useState(false) const currentQuestion = quiz.questions[currentQuestionIndex] const totalQuestions = quiz.questions.length const progress = (currentQuestionIndex / totalQuestions) * 100 const handleAnswerSelect = (answer: string) => { if (!isAnswerSubmitted) { setSelectedAnswer(answer) } } const handleSubmitAnswer = () => { if (selectedAnswer === null) return setIsAnswerSubmitted(true) if (selectedAnswer === currentQuestion.correctAnswer) { setScore(score + 1) triggerConfetti() } } const handleNextQuestion = () => { if (currentQuestionIndex < totalQuestions - 1) { setCurrentQuestionIndex(currentQuestionIndex + 1) setSelectedAnswer(null) setIsAnswerSubmitted(false) } else { setIsCompleted(true) saveQuizResult(landmarkId, score, totalQuestions) // 80% 이상 맞췄을 때 축하 효과 if (score / totalQuestions >= 0.8) { triggerConfetti() } } } const triggerConfetti = () => { const colors = ["#3b82f6", "#6366f1", "#8b5cf6", "#ec4899"] confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 }, colors: colors, }) } const isCorrect = selectedAnswer === currentQuestion.correctAnswer return (

{!isCompleted ? (

문제 {currentQuestionIndex + 1}/{totalQuestions} 점수: {score}

{currentQuestion.question} {currentQuestion.hint && {currentQuestion.hint}} {currentQuestion.answers.map((answer, index) => ( handleAnswerSelect(answer)} whileHover={!isAnswerSubmitted ? { scale: 1.02 } : {}} whileTap={!isAnswerSubmitted ? { scale: 0.98 } : {}} > {answer} {isAnswerSubmitted && answer === currentQuestion.correctAnswer && ( )} {isAnswerSubmitted && answer === selectedAnswer && answer !== currentQuestion.correctAnswer && ( )} ))} {isAnswerSubmitted && currentQuestion.explanation && (

{currentQuestion.explanation}

)} {!isAnswerSubmitted ? ( ) : ( )} ) : ( 퀴즈 완료! {quiz.title} 퀴즈를 완료했습니다.

{score}/{totalQuestions}

{score === totalQuestions ? "완벽해요! 모든 문제를 맞혔습니다." : score / totalQuestions >= 0.8 ? "훌륭해요! 대부분의 문제를 맞혔습니다." : score / totalQuestions >= 0.6 ? "좋아요! 많은 문제를 맞혔습니다." : "다음에는 더 잘할 수 있을 거예요!"}

{quiz.reward && score / totalQuestions >= 0.6 && (

획득한 보상

{quiz.reward}

)}

) } [V0_FILE]typescriptreact:file="hooks/use-geolocation.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" interface GeolocationPosition { latitude: number longitude: number accuracy: number } interface UseGeolocationReturn { location: GeolocationPosition | null error: string | null loading: boolean } export function useGeoLocation(): UseGeolocationReturn { const [location, setLocation] = useState(null) const [error, setError] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { if (!navigator.geolocation) { setError("Geolocation is not supported by your browser") setLoading(false) return } const successHandler = (position: GeolocationPosition) => { setLocation({ latitude: position.coords.latitude, longitude: position.coords.longitude, accuracy: position.coords.accuracy, }) setLoading(false) setError(null) } const errorHandler = (error: GeolocationPositionError) => { setError(error.message) setLoading(false) } const watchId = navigator.geolocation.watchPosition(successHandler as unknown as PositionCallback, errorHandler, { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000, }) return () => { navigator.geolocation.clearWatch(watchId) } }, []) return { location, error, loading } } [V0_FILE]typescriptreact:file="lib/geo-utils.ts" isEdit="true" isMerged="true" /** * 두 지점 간의 거리를 계산합니다 (하버사인 공식 사용) * @param lat1 첫 번째 지점의 위도 * @param lon1 첫 번째 지점의 경도 * @param lat2 두 번째 지점의 위도 * @param lon2 두 번째 지점의 경도 * @returns 미터 단위의 거리 */ export function calculateDistance(lat1: number, lon1: number, lat2: number, lon2: number): number { const R = 6371e3 // 지구 반경 (미터) const φ1 = (lat1 * Math.PI) / 180 const φ2 = (lat2 * Math.PI) / 180 const Δφ = ((lat2 - lat1) * Math.PI) / 180 const Δλ = ((lon2 - lon1) * Math.PI) / 180 const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) + Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2) const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)) const distance = R * c return Math.round(distance) } /** * 현재 위치에서 목적지까지의 방향을 계산합니다 * @param currentLat 현재 위치의 위도 * @param currentLon 현재 위치의 경도 * @param destLat 목적지의 위도 * @param destLon 목적지의 경도 * @returns 방향 (0-359도, 북쪽이 0도) */ export function calculateBearing(currentLat: number, currentLon: number, destLat: number, destLon: number): number { const φ1 = (currentLat * Math.PI) / 180 const φ2 = (destLat * Math.PI) / 180 const Δλ = ((destLon - currentLon) * Math.PI) / 180 const y = Math.sin(Δλ) * Math.cos(φ2) const x = Math.cos(φ1) * Math.sin(φ2) - Math.sin(φ1) * Math.cos(φ2) * Math.cos(Δλ) const θ = Math.atan2(y, x) const bearing = ((θ * 180) / Math.PI + 360) % 360 return Math.round(bearing) } /** * 방향을 텍스트로 변환합니다 * @param bearing 방향 (0-359도) * @returns 방향 텍스트 (북, 북동, 동, 남동, 남, 남서, 서, 북서) */ export function bearingToDirection(bearing: number): string { const directions = ["북", "북동", "동", "남동", "남", "남서", "서", "북서"] const index = Math.round(bearing / 45) % 8 return directions[index] } [V0_FILE]typescriptreact:file="lib/user-progress.ts" isEdit="true" isMerged="true" // 실제 구현에서는 데이터베이스나 API를 사용하여 사용자 진행 상황을 저장합니다 // 이 예제에서는 localStorage를 사용합니다 interface QuizResult { landmarkId: string score: number totalQuestions: number completedAt: string } /** * 퀴즈 결과를 저장합니다 */ export function saveQuizResult(landmarkId: string, score: number, totalQuestions: number): void { if (typeof window === "undefined") return const result: QuizResult = { landmarkId, score, totalQuestions, completedAt: new Date().toISOString(), } // 기존 결과 가져오기 const resultsJson = localStorage.getItem("quizResults") const results: QuizResult[] = resultsJson ? JSON.parse(resultsJson) : [] // 새 결과 추가 results.push(result) // 저장 localStorage.setItem("quizResults", JSON.stringify(results)) // 완료한 랜드마크 목록 업데이트 const completedLandmarksJson = localStorage.getItem("completedLandmarks") const completedLandmarks: string[] = completedLandmarksJson ? JSON.parse(completedLandmarksJson) : [] if (!completedLandmarks.includes(landmarkId)) { completedLandmarks.push(landmarkId) localStorage.setItem("completedLandmarks", JSON.stringify(completedLandmarks)) } } /** * 사용자가 완료한 랜드마크 ID 목록을 가져옵니다 */ export function getCompletedLandmarks(): string[] { if (typeof window === "undefined") return [] const completedLandmarksJson = localStorage.getItem("completedLandmarks") return completedLandmarksJson ? JSON.parse(completedLandmarksJson) : [] } /** * 사용자의 퀴즈 결과 목록을 가져옵니다 */ export function getQuizResults(): QuizResult[] { if (typeof window === "undefined") return [] const resultsJson = localStorage.getItem("quizResults") return resultsJson ? JSON.parse(resultsJson) : [] } /** * 사용자의 총 점수를 계산합니다 */ export function getTotalScore(): number { const results = getQuizResults() return results.reduce((total, result) => total + result.score, 0) } /** * 사용자의 완료율을 계산합니다 (완료한 랜드마크 / 전체 랜드마크) */ export function getCompletionRate(totalLandmarks: number): number { const completedLandmarks = getCompletedLandmarks() return (completedLandmarks.length / totalLandmarks) * 100 } [V0_FILE]typescriptreact:file="types/city.ts" isEdit="true" isMerged="true" export interface City { id: string name: string description: string longDescription: string imageUrl?: string landmarkCount: number difficulty: string estimatedTime: string landmarks?: string[] } [V0_FILE]typescriptreact:file="types/landmark.ts" isEdit="true" isMerged="true" export interface Landmark { id: string name: string category: string cityId: string shortDescription: string description: string imageUrl?: string latitude: number longitude: number distance?: number // 현재 위치에서의 거리 (미터) difficulty?: string historicalFacts?: string[] tips?: string[] openingHours?: string entryFee?: string bestSeason?: string } [V0_FILE]typescriptreact:file="types/quiz.ts" isEdit="true" isMerged="true" export interface QuizQuestion { question: string answers: string[] correctAnswer: string explanation?: string hint?: string } export interface Quiz { id: string title: string landmarkId: string questions: QuizQuestion[] reward?: string } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; } } /* font-sans 클래스 정의를 Noto Sans KR로 변경합니다 */ .font-sans { font-family: var(--font-noto-sans-kr), ui-sans-serif, system-ui, sans-serif; } [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/navigation-bar.tsx" isMerged="true" "use client" import { Home, Map, Compass, User } from "lucide-react" import Link from "next/link" import { usePathname } from "next/navigation" import { motion } from "framer-motion" import { cn } from "@/lib/utils" export function NavigationBar() { const pathname = usePathname() const navItems = [ { name: "홈", href: "/", icon: Home, }, { name: "탐험", href: "/explore", icon: Map, }, { name: "주변", href: "/nearby", icon: Compass, }, { name: "프로필", href: "/profile", icon: User, }, ] return (

) } [V0_FILE]typescriptreact:file="app/city/[id]/page.tsx" isMerged="true" import { CityDetail } from "@/components/city-detail" import { getCityById } from "@/lib/cities" import { notFound } from "next/navigation" export default function CityPage({ params }: { params: { id: string } }) { const city = getCityById(params.id) if (!city) { notFound() } return (

) } [V0_FILE]typescriptreact:file="components/city-detail.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ArrowLeft, MapPin, Clock, Navigation, Info } from "lucide-react" import Link from "next/link" import Image from "next/image" import type { City } from "@/types/city" import { motion } from "framer-motion" import { getLandmarksByCity } from "@/lib/landmarks" import type { Landmark } from "@/types/landmark" interface CityDetailProps { city: City } export function CityDetail({ city }: CityDetailProps) { const [landmarks, setLandmarks] = useState(() => getLandmarksByCity(city.id)) return (

{city.difficulty}

{city.name}

{city.description}

{city.landmarkCount}개 랜드마크

{city.estimatedTime}

도시 소개

{city.longDescription}

탐험할 랜드마크

{landmarks.map((landmark) => (

{landmark.category}

{landmark.name}

{landmark.shortDescription}

))}

) } [V0_FILE]typescriptreact:file="lib/cities.ts" isMerged="true" import type { City } from "@/types/city" import { cities } from "@/constants/cities" /** * 모든 도시 목록을 가져옵니다 */ export function getAllCities(): City[] { return cities } /** * 특정 ID의 도시를 가져옵니다 */ export function getCityById(id: string): City | undefined { return cities.find((city) => city.id === id) } [V0_FILE]typescriptreact:file="app/leaderboard/page.tsx" isMerged="true" import { Leaderboard } from "@/components/leaderboard" export default function LeaderboardPage() { return (

랭킹

) } [V0_FILE]typescriptreact:file="components/leaderboard.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Award, Trophy, Medal, Star, User } from "lucide-react" import { motion } from "framer-motion" import { getTotalScore, getCompletedLandmarks } from "@/lib/user-progress" import { getAllLandmarks } from "@/lib/landmarks" interface LeaderboardUser { id: string name: string avatar: string score: number landmarks: number badges: number } export function Leaderboard() { const [userScore, setUserScore] = useState(0) const [userLandmarks, setUserLandmarks] = useState(0) const [totalLandmarks, setTotalLandmarks] = useState(0) const [leaderboardUsers, setLeaderboardUsers] = useState([]) useEffect(() => { // 사용자 점수 및 완료한 랜드마크 수 가져오기 const score = getTotalScore() const completedLandmarks = getCompletedLandmarks() const landmarks = getAllLandmarks() setUserScore(score) setUserLandmarks(completedLandmarks.length) setTotalLandmarks(landmarks.length) // 더미 리더보드 데이터 생성 const dummyUsers: LeaderboardUser[] = [ { id: "1", name: "김탐험", avatar: "/placeholder.svg?height=40&width=40", score: 450, landmarks: 15, badges: 12, }, { id: "2", name: "이여행", avatar: "/placeholder.svg?height=40&width=40", score: 380, landmarks: 12, badges: 10, }, { id: "3", name: "박역사", avatar: "/placeholder.svg?height=40&width=40", score: 320, landmarks: 10, badges: 8, }, { id: "4", name: "최문화", avatar: "/placeholder.svg?height=40&width=40", score: 280, landmarks: 9, badges: 7, }, { id: "5", name: "정도시", avatar: "/placeholder.svg?height=40&width=40", score: 240, landmarks: 8, badges: 6, }, ] // 사용자 점수에 따라 리더보드에 삽입 const userRank: LeaderboardUser = { id: "user", name: "나", avatar: "/placeholder.svg?height=40&width=40", score: score, landmarks: completedLandmarks.length, badges: Math.floor(completedLandmarks.length * 0.8), } const allUsers = [...dummyUsers, userRank].sort((a, b) => b.score - a.score) setLeaderboardUsers(allUsers) }, []) const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 300, damping: 24 } }, } return (

내 점수 지금까지의 탐험 성과

{userScore}

총 점수

{userLandmarks}

방문 랜드마크

{Math.floor(userLandmarks * 0.8)}

획득 배지

랜드마크 탐험 진행률: {totalLandmarks > 0 ? Math.round((userLandmarks / totalLandmarks) * 100) : 0}%

0 ? (userLandmarks / totalLandmarks) * 100 : 0}%` }} >

점수 랜드마크 배지 점수 랭킹 퀴즈 점수 기준 상위 랭킹 {leaderboardUsers.map((user, index) => (

{index + 1}

{user.id === "user" ? ( ) : (

)}

{user.name}

{user.score}

))} 랜드마크 랭킹 방문한 랜드마크 수 기준 상위 랭킹 {leaderboardUsers .sort((a, b) => b.landmarks - a.landmarks) .map((user, index) => (

{index + 1}

{user.id === "user" ? ( ) : (

)}

{user.name}

{user.landmarks}

))} 배지 랭킹 획득한 배지 수 기준 상위 랭킹 {leaderboardUsers .sort((a, b) => b.badges - a.badges) .map((user, index) => (

{index + 1}

{user.id === "user" ? ( ) : (

)}

{user.name}

{user.badges}

))}

) } [V0_FILE]typescriptreact:file="app/help/page.tsx" isMerged="true" import { HelpGuide } from "@/components/help-guide" export default function HelpPage() { return (

도움말 및 가이드

) } [V0_FILE]typescriptreact:file="components/help-guide.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { Award, Map, Compass } from "lucide-react" import { motion } from "framer-motion" export function HelpGuide() { const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 300, damping: 24 } }, } return ( 이용 가이드 자주 묻는 질문 앱 소개 도시 탐험하기 다양한 도시를 탐험하는 방법

도시 탐험가 앱은 한국의 다양한 도시를 탐험하며 역사와 문화를 배울 수 있는 인터랙티브한 경험을 제공합니다.

메인 화면에서 탐험 시작하기 버튼을 클릭합니다.
탐험하고 싶은 도시를 선택합니다.
도시 정보를 확인하고 이 도시 탐험하기 버튼을 클릭합니다.
도시 내 다양한 랜드마크를 확인하고 방문할 수 있습니다.

내 주변 랜드마크 현재 위치 주변의 랜드마크 찾기

GPS를 활용하여 현재 위치 주변의 랜드마크를 찾고 방문할 수 있습니다.

하단 네비게이션 바에서 주변 메뉴를 선택합니다.
위치 정보 액세스를 허용합니다.
현재 위치 주변의 랜드마크 목록이 표시됩니다.
관심 있는 랜드마크를 선택하여 자세한 정보를 확인합니다.
길 안내 버튼을 클릭하여 해당 랜드마크로 이동할 수 있습니다.

퀴즈 풀기 랜드마크에서 퀴즈를 풀고 배지 획득하기

랜드마크를 방문하면 해당 장소에 관한 퀴즈를 풀고 배지를 획득할 수 있습니다.

랜드마크 상세 페이지에서 퀴즈 풀기 버튼을 클릭합니다.
퀴즈는 랜드마크에서 100m 이내에 있을 때만 풀 수 있습니다.
문제를 읽고 정답을 선택한 후 정답 확인 버튼을 클릭합니다.
모든 문제를 풀면 결과와 함께 배지를 획득합니다.
획득한 배지와 점수는 랭킹 페이지에서 확인할 수 있습니다.

자주 묻는 질문 도시 탐험가 앱 사용 중 자주 묻는 질문과 답변 위치 정보를 허용해야 하나요? 네, 내 주변 랜드마크 기능과 퀴즈 풀기 기능을 사용하려면 위치 정보 액세스를 허용해야 합니다. 위치 정보는 현재 위치 주변의 랜드마크를 찾고, 랜드마크 방문 여부를 확인하는 데 사용됩니다. 퀴즈를 풀 수 없는 이유는 무엇인가요? 퀴즈는 해당 랜드마크에서 100m 이내에 있을 때만 풀 수 있습니다. 위치 정보가 정확하지 않거나, 랜드마크에서 너무 멀리 떨어져 있을 경우 퀴즈 풀기 버튼이 비활성화됩니다. 랜드마크에 더 가까이 이동한 후 다시 시도해보세요. 획득한 배지는 어디서 확인할 수 있나요? 획득한 배지와 점수는 하단 네비게이션 바의 '랭킹' 메뉴에서 확인할 수 있습니다. 랭킹 페이지에서는 총 점수, 방문한 랜드마크 수, 획득한 배지 수를 확인할 수 있으며, 다른 사용자들과의 순위도 볼 수 있습니다. 오프라인에서도 앱을 사용할 수 있나요? 기본적인 도시 및 랜드마크 정보는 오프라인에서도 볼 수 있지만, 내 주변 랜드마크 찾기, 퀴즈 풀기 등의 기능은 인터넷 연결이 필요합니다. 여행 전에 방문할 도시 정보를 미리 확인해두는 것을 권장합니다. 앱에 새로운 도시나 랜드마크가 추가되나요? 네, 정기적으로 새로운 도시와 랜드마크가 추가될 예정입니다. 앱 업데이트를 통해 더 많은 지역을 탐험하고 다양한 퀴즈를 풀 수 있게 될 것입니다. 추가되었으면 하는 도시나 랜드마크가 있다면 피드백을 통해 알려주세요. 도시 탐험가 앱 소개 인터랙티브 워킹 투어 게임

도시 탐험가는 한국의 다양한 도시와 랜드마크를 탐험하며 역사와 문화를 배울 수 있는 인터랙티브 워킹 투어 게임입니다. GPS 기반 기술을 활용하여 실제 위치에서 랜드마크를 방문하고 퀴즈를 풀며 배지를 획득할 수 있습니다.

주요 기능

다양한 한국 도시 탐험
GPS 기반 주변 랜드마크 찾기
랜드마크 방문 시 퀴즈 풀기
배지 획득 및 점수 랭킹
랜드마크 역사 및 문화 정보 제공

개발 정보

도시 탐험가 앱은 Next.js와 React를 기반으로 개발되었으며, Framer Motion을 활용한 애니메이션과 Tailwind CSS를 통한 반응형 디자인을 적용했습니다. 지속적인 업데이트를 통해 더 많은 도시와 기능이 추가될 예정입니다.

버전: 1.0.0

) } [V0_FILE]typescriptreact:file="app/profile/page.tsx" isMerged="true" import { UserProfile } from "@/components/user-profile" export default function ProfilePage() { return (

내 프로필

) } [V0_FILE]typescriptreact:file="components/user-profile.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Award, MapPin, Star, User, Settings, LogOut } from "lucide-react" import { motion } from "framer-motion" import { getTotalScore, getCompletedLandmarks, getQuizResults } from "@/lib/user-progress" import { getLandmarkById } from "@/lib/landmarks" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { useTheme } from "next-themes" export function UserProfile() { const [userScore, setUserScore] = useState(0) const [completedLandmarks, setCompletedLandmarks] = useState([]) const [quizResults, setQuizResults] = useState([]) const { theme, setTheme } = useTheme() useEffect(() => { // 사용자 점수 및 완료한 랜드마크 가져오기 const score = getTotalScore() const landmarks = getCompletedLandmarks() const results = getQuizResults() setUserScore(score) setCompletedLandmarks(landmarks) setQuizResults(results) }, []) const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 300, damping: 24 } }, } return (

사용자 도시 탐험가

Lv. {Math.floor(userScore / 100) + 1}

{userScore}

총 점수

{completedLandmarks.length}

방문 랜드마크

{Math.floor(completedLandmarks.length * 0.8)}

획득 배지

방문 기록 설정 방문 기록 방문한 랜드마크와 퀴즈 결과 {completedLandmarks.length > 0 ? ( {quizResults.map((result, index) => { const landmark = getLandmarkById(result.landmarkId) if (!landmark) return null return (

{landmark.name}

{new Date(result.completedAt).toLocaleDateString()}

{result.score}/{result.totalQuestions}

) })} ) : (

아직 방문한 랜드마크가 없습니다.

도시를 탐험하고 랜드마크를 방문해보세요!

)} 설정

다크 모드

어두운 테마로 전환합니다

setTheme(checked ? "dark" : "light")} />

알림

앱 알림을 활성화합니다

위치 서비스

GPS 위치 서비스를 활성화합니다

) } [V0_FILE]typescriptreact:file="components/landmark-detail.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardFooter } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { MapPin, Navigation, Award, HelpCircle, ArrowLeft, Clock, Calendar, Info, Bug } from "lucide-react" import Link from "next/link" import Image from "next/image" import type { Landmark } from "@/types/landmark" import { useGeoLocation } from "@/hooks/use-geolocation" import { calculateDistance } from "@/lib/geo-utils" import { motion, AnimatePresence } from "framer-motion" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" interface LandmarkDetailProps { landmark: Landmark } export function LandmarkDetail({ landmark }: LandmarkDetailProps) { const { location } = useGeoLocation() const [showFullDescription, setShowFullDescription] = useState(false) const [devMode, setDevMode] = useState(false) const isNearby = devMode || (location && calculateDistance(location.latitude, location.longitude, landmark.latitude, landmark.longitude) <= 100) // 100m 이내에 있는지 확인 return (

{landmark.category}

{landmark.name}

{landmark.shortDescription}

정보 역사 방문 팁

{landmark.description}

{landmark.description && landmark.description.length > 150 && ( )}

{landmark.openingHours && (

개장 시간

{landmark.openingHours}

)} {landmark.entryFee && (

입장료

{landmark.entryFee}

)} {landmark.bestSeason && (

방문 추천 시기

{landmark.bestSeason}

)}

{landmark.historicalFacts && landmark.historicalFacts.length > 0 ? (

역사적 사실

{index + 1}

{fact}

) : (

역사적 정보가 없습니다.

)} {landmark.tips && landmark.tips.length > 0 ? (

방문 팁

•

{tip}

) : (

방문 팁 정보가 없습니다.

)} {/* 개발 모드 토글 스위치 */}

개발 모드

) } [V0_FILE]typescriptreact:file="components/nearby-landmarks.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Skeleton } from "@/components/ui/skeleton" import { MapPin, Navigation, Info, Bug } from "lucide-react" import Link from "next/link" import { useGeoLocation } from "@/hooks/use-geolocation" import { getNearbyLandmarks, getAllLandmarks } from "@/lib/landmarks" import type { Landmark } from "@/types/landmark" import Image from "next/image" import { motion, AnimatePresence } from "framer-motion" import { Badge } from "@/components/ui/badge" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" export function NearbyLandmarks() { const { location, error, loading } = useGeoLocation() const [landmarks, setLandmarks] = useState([]) const [loadingLandmarks, setLoadingLandmarks] = useState(false) const [devMode, setDevMode] = useState(false) useEffect(() => { if (location) { setLoadingLandmarks(true) // 실제 구현에서는 API 호출을 통해 근처 랜드마크를 가져옵니다 getNearbyLandmarks(location.latitude, location.longitude) .then((nearbyLandmarks) => { setLandmarks(nearbyLandmarks) setLoadingLandmarks(false) }) .catch((err) => { console.error("Failed to fetch nearby landmarks:", err) setLoadingLandmarks(false) }) } else if (devMode) { // 개발 모드에서는 모든 랜드마크를 가져옵니다 setLoadingLandmarks(true) const allLandmarks = getAllLandmarks().map((landmark) => ({ ...landmark, distance: 50, // 개발 모드에서는 모든 랜드마크를 50m 거리로 설정 })) setLandmarks(allLandmarks) setLoadingLandmarks(false) } }, [location, devMode]) const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const item = { hidden: { y: 20, opacity: 0 }, show: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 300, damping: 24 } }, } if (loading && !devMode) { return (

현재 위치를 확인하는 중...

) } if (error && !devMode) { return ( 위치 정보를 가져올 수 없습니다

위치 정보 액세스를 허용해주세요. 이 기능은 현재 위치 주변의 랜드마크를 찾기 위해 필요합니다.

개발 모드

) } if (loadingLandmarks) { return (

주변 랜드마크를 찾는 중...

) } if (landmarks.length === 0 && !devMode) { return ( 주변에 랜드마크가 없습니다

현재 위치 주변에서 탐험할 수 있는 랜드마크를 찾을 수 없습니다. 다른 지역으로 이동하거나 도시 탐험 메뉴에서 도시를 선택해보세요.

개발 모드

) } return (

{devMode ? "개발 모드: 모든 랜드마크 표시 중" : `현재 위치에서 ${landmarks.length}개의 랜드마크를 찾았습니다`}

{landmarks.map((landmark) => (

{landmark.distance}m

{landmark.name}

{landmark.category}

{landmark.shortDescription}

))}

) } function LocationLoadingSkeleton() { return (

) } function LandmarksLoadingSkeleton() { return (

{[1, 2, 3].map((i) => ( ))}

) } [V0_FILE]typescriptreact:file="app/landmark-info/[id]/page.tsx" isMerged="true" import { LandmarkInfo } from "@/components/landmark-info" import { getLandmarkById } from "@/lib/landmarks" import { notFound } from "next/navigation" export default function LandmarkInfoPage({ params }: { params: { id: string } }) { const landmark = getLandmarkById(params.id) if (!landmark) { notFound() } return (

) } [V0_FILE]typescriptreact:file="components/landmark-info.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ArrowLeft, MapPin, Phone, Globe, Clock, CreditCard, Calendar, AlertCircle } from "lucide-react" import Link from "next/link" import type { Landmark } from "@/types/landmark" import { motion } from "framer-motion" interface LandmarkInfoProps { landmark: Landmark } export function LandmarkInfo({ landmark }: LandmarkInfoProps) { // 랜드마크 추가 정보 (실제 구현에서는 API에서 가져오거나 데이터베이스에 저장) const additionalInfo = { phone: "02-1234-5678", website: "https://www.example.com", facilities: ["화장실", "주차장", "카페", "기념품 상점"], accessibility: ["휠체어 접근 가능", "점자 안내판", "오디오 가이드"], emergencyInfo: "비상시 연락처: 02-9876-5432", } return (

{landmark.name} 정보

연락처 정보

전화번호

{additionalInfo.phone}

웹사이트

{additionalInfo.website}

방문 정보

개장 시간

{landmark.openingHours || "정보 없음"}

입장료

{landmark.entryFee || "무료"}

방문 추천 시기

{landmark.bestSeason || "사계절 모두 좋음"}

시설 정보

{facility}

접근성

{item}

{additionalInfo.emergencyInfo}

) } [V0_FILE]typescriptreact:file="components/kakao-map-script.tsx" isEdit="true" isMerged="true" export function KakaoMapScript() { // NEXT_PUBLIC_ 접두사 없이 환경 변수 사용 return (

About

Tags

Share

About

Tags

Share

More from bokeumeom

More Templates Like This

About

Tags

Share

About

Tags

Share

More from bokeumeom

More Templates Like This