diff --git a/public/assets/icons/map/SelectMap_CampingChip.svg b/public/assets/icons/map/SelectMap_CampingChip.svg new file mode 100644 index 0000000..37064f3 --- /dev/null +++ b/public/assets/icons/map/SelectMap_CampingChip.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/icons/map/SelectMap_CampingChip_Selected.svg b/public/assets/icons/map/SelectMap_CampingChip_Selected.svg new file mode 100644 index 0000000..caed2e1 --- /dev/null +++ b/public/assets/icons/map/SelectMap_CampingChip_Selected.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/icons/map/SelectMap_FestivalChip.svg b/public/assets/icons/map/SelectMap_FestivalChip.svg new file mode 100644 index 0000000..61190fc --- /dev/null +++ b/public/assets/icons/map/SelectMap_FestivalChip.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/icons/map/SelectMap_FestivalChip_Selected.svg b/public/assets/icons/map/SelectMap_FestivalChip_Selected.svg new file mode 100644 index 0000000..6e5faf1 --- /dev/null +++ b/public/assets/icons/map/SelectMap_FestivalChip_Selected.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/icons/map/SelectMap_LeisureChip.svg b/public/assets/icons/map/SelectMap_LeisureChip.svg new file mode 100644 index 0000000..a210401 --- /dev/null +++ b/public/assets/icons/map/SelectMap_LeisureChip.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/icons/map/SelectMap_LeisureChip_Selected.svg b/public/assets/icons/map/SelectMap_LeisureChip_Selected.svg new file mode 100644 index 0000000..7d28e53 --- /dev/null +++ b/public/assets/icons/map/SelectMap_LeisureChip_Selected.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/icons/map/SelectMap_LikeChip.svg b/public/assets/icons/map/SelectMap_LikeChip.svg new file mode 100644 index 0000000..311549a --- /dev/null +++ b/public/assets/icons/map/SelectMap_LikeChip.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/icons/map/SelectMap_LikeChip_Selected.svg b/public/assets/icons/map/SelectMap_LikeChip_Selected.svg new file mode 100644 index 0000000..6055a92 --- /dev/null +++ b/public/assets/icons/map/SelectMap_LikeChip_Selected.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/icons/map/SelectMap_ResortChip.svg b/public/assets/icons/map/SelectMap_ResortChip.svg new file mode 100644 index 0000000..e87b37c --- /dev/null +++ b/public/assets/icons/map/SelectMap_ResortChip.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/icons/map/SelectMap_ResortChip_Selected.svg b/public/assets/icons/map/SelectMap_ResortChip_Selected.svg new file mode 100644 index 0000000..8b91af0 --- /dev/null +++ b/public/assets/icons/map/SelectMap_ResortChip_Selected.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/icons/map/SelectMap_WorkationChip.svg b/public/assets/icons/map/SelectMap_WorkationChip.svg new file mode 100644 index 0000000..9930d2d --- /dev/null +++ b/public/assets/icons/map/SelectMap_WorkationChip.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/icons/map/SelectMap_WorkationChip_Selected.svg b/public/assets/icons/map/SelectMap_WorkationChip_Selected.svg new file mode 100644 index 0000000..388b976 --- /dev/null +++ b/public/assets/icons/map/SelectMap_WorkationChip_Selected.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/map/Cheorwon.svg b/public/assets/images/map/Cheorwon.svg new file mode 100644 index 0000000..675e1b1 --- /dev/null +++ b/public/assets/images/map/Cheorwon.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/map/Chuncheon.svg b/public/assets/images/map/Chuncheon.svg new file mode 100644 index 0000000..a26eea7 --- /dev/null +++ b/public/assets/images/map/Chuncheon.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/map/Donghae.svg b/public/assets/images/map/Donghae.svg new file mode 100644 index 0000000..d64a4a1 --- /dev/null +++ b/public/assets/images/map/Donghae.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/map/Gangneung.svg b/public/assets/images/map/Gangneung.svg new file mode 100644 index 0000000..95595c6 --- /dev/null +++ b/public/assets/images/map/Gangneung.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/map/Goseong.svg b/public/assets/images/map/Goseong.svg new file mode 100644 index 0000000..7717d60 --- /dev/null +++ b/public/assets/images/map/Goseong.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/map/Hoengseong.svg b/public/assets/images/map/Hoengseong.svg new file mode 100644 index 0000000..4509149 --- /dev/null +++ b/public/assets/images/map/Hoengseong.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/map/Hongcheon.svg b/public/assets/images/map/Hongcheon.svg new file mode 100644 index 0000000..030696c --- /dev/null +++ b/public/assets/images/map/Hongcheon.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/map/Hwacheon.svg b/public/assets/images/map/Hwacheon.svg new file mode 100644 index 0000000..f3e21c8 --- /dev/null +++ b/public/assets/images/map/Hwacheon.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/map/Inje.svg b/public/assets/images/map/Inje.svg new file mode 100644 index 0000000..4fe3aeb --- /dev/null +++ b/public/assets/images/map/Inje.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/map/Jeongseon.svg b/public/assets/images/map/Jeongseon.svg new file mode 100644 index 0000000..6b79db0 --- /dev/null +++ b/public/assets/images/map/Jeongseon.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/map/Pyeongchang.svg b/public/assets/images/map/Pyeongchang.svg new file mode 100644 index 0000000..1d51cba --- /dev/null +++ b/public/assets/images/map/Pyeongchang.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/map/Samcheok.svg b/public/assets/images/map/Samcheok.svg new file mode 100644 index 0000000..f4a2db2 --- /dev/null +++ b/public/assets/images/map/Samcheok.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/map/Sokcho.svg b/public/assets/images/map/Sokcho.svg new file mode 100644 index 0000000..a94465e --- /dev/null +++ b/public/assets/images/map/Sokcho.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/map/Taebaek.svg b/public/assets/images/map/Taebaek.svg new file mode 100644 index 0000000..2ae3702 --- /dev/null +++ b/public/assets/images/map/Taebaek.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/map/Wonju.svg b/public/assets/images/map/Wonju.svg new file mode 100644 index 0000000..2f92644 --- /dev/null +++ b/public/assets/images/map/Wonju.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/map/Yanggu.svg b/public/assets/images/map/Yanggu.svg new file mode 100644 index 0000000..135fabe --- /dev/null +++ b/public/assets/images/map/Yanggu.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/map/Yangyang.svg b/public/assets/images/map/Yangyang.svg new file mode 100644 index 0000000..93ac36a --- /dev/null +++ b/public/assets/images/map/Yangyang.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/map/Yeongwol.svg b/public/assets/images/map/Yeongwol.svg new file mode 100644 index 0000000..cc72a81 --- /dev/null +++ b/public/assets/images/map/Yeongwol.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/mypage/alert/page.tsx b/src/app/mypage/alert/page.tsx index c58c857..f402bc8 100644 --- a/src/app/mypage/alert/page.tsx +++ b/src/app/mypage/alert/page.tsx @@ -5,11 +5,9 @@ import CategoryTitle from "@/components/common/CategoryTitle"; export default function Alert() { return (
-
- -
- -
+
+ +
알림함
diff --git a/src/app/mypage/like/page.tsx b/src/app/mypage/like/page.tsx index 05e6567..4a53e9f 100644 --- a/src/app/mypage/like/page.tsx +++ b/src/app/mypage/like/page.tsx @@ -10,12 +10,10 @@ const LikeList = [ export default function Like() { return (
-
- -
- +
+ +
나의 찜
-
{LikeList.length === 0 ? ( diff --git a/src/app/mypage/notice/page.tsx b/src/app/mypage/notice/page.tsx index aa48d79..a992fb2 100644 --- a/src/app/mypage/notice/page.tsx +++ b/src/app/mypage/notice/page.tsx @@ -5,11 +5,9 @@ import CategoryTitle from "@/components/common/CategoryTitle"; export default function Notice() { return (
-
- -
- -
+
+ +
공지사항
diff --git a/src/app/select-map/page.tsx b/src/app/select-map/page.tsx new file mode 100644 index 0000000..3dd2f21 --- /dev/null +++ b/src/app/select-map/page.tsx @@ -0,0 +1,21 @@ +'use client' +import { GrPrevious } from "react-icons/gr"; +import Map from "@/components/Map"; +import SelectMapBottomSheet from "@/components/SelectMapBottomSheet"; +import { useState } from 'react'; +import "@/components/sliders/SmallInnerTitleItem"; + + +export default function SelectMap() { + const [selectedLoc, setSelectedLoc] = useState("평창"); + return ( +
+
+ +
지도선택
+
+ + +
+ ); +} diff --git a/src/components/Map.tsx b/src/components/Map.tsx new file mode 100644 index 0000000..bb99470 --- /dev/null +++ b/src/components/Map.tsx @@ -0,0 +1,197 @@ +'use client' +import { useState, useEffect } from 'react'; + +interface MapProps{ + changeLoc: (location:string) => void; +} + +type LocationKey = + | "Pyeongchang" + | "Cheorwon" + | "Goseong" + | "Hwacheon" + | "Yanggu" + | "Inje" + | "Chuncheon" + | "Sokcho" + | "Hongcheon" + | "Yangyang" + | "Gangneung" + | "Hoengseong" + | "Wonju" + | "Yeongwol" + | "Jeongseon" + | "Donghae" + | "Taebaek" + | "Samcheok"; + +const locationNames: Record = { + Pyeongchang: "평창", + Cheorwon: "철원", + Goseong: "고성", + Hwacheon: "화천", + Yanggu: "양구", + Inje: "인제", + Chuncheon: "춘천", + Sokcho: "속초", + Hongcheon: "홍천", + Yangyang: "양양", + Gangneung: "강릉", + Hoengseong: "횡성", + Wonju: "원주", + Yeongwol: "영월", + Jeongseon: "정선", + Donghae: "동해", + Taebaek: "태백", + Samcheok: "삼척", +}; + +export default function Map({changeLoc}: MapProps) { + const [selectedLoc, setSelectedLoc] = useState("Pyeongchang"); + const koreanName = locationNames[selectedLoc as LocationKey]; + + useEffect(() => { + changeLoc(koreanName); + }, [selectedLoc, koreanName, changeLoc]); + + return ( +
+
+
+ { koreanName } +
+
+
+
+
+
setSelectedLoc("Cheorwon")}>
+
+
+
+
setSelectedLoc("Cheorwon")}>
+
+
setSelectedLoc("Goseong")}>
+
+
+
+
+
setSelectedLoc("Hwacheon")}>
+
setSelectedLoc("Yanggu")}>
+
setSelectedLoc("Inje")}>
+
setSelectedLoc("Goseong")}>
+
+
+
+
+
setSelectedLoc("Chuncheon")}>
+
setSelectedLoc("Hwacheon")}>
+
setSelectedLoc("Yanggu")}>
+
setSelectedLoc("Inje")}>
+
setSelectedLoc("Goseong")}>
+
+
+
+
+
setSelectedLoc("Chuncheon")}>
+
setSelectedLoc("Inje")}>
+
setSelectedLoc("Sokcho")}>
+
+
+
+
+
setSelectedLoc("Chuncheon")}>
+
setSelectedLoc("Hongcheon")}>
+
setSelectedLoc("Inje")}>
+
setSelectedLoc("Yangyang")}>
+
+
+
+
+
setSelectedLoc("Hongcheon")}>
+
setSelectedLoc("Yangyang")}>
+
+
+
+
+
setSelectedLoc("Hongcheon")}>
+
setSelectedLoc("Gangneung")}>
+
+
+
+
+
setSelectedLoc("Hoengseong")}>
+
setSelectedLoc("Hongcheon")}>
+
setSelectedLoc("Gangneung")}>
+
+
+
+
+
setSelectedLoc("Hoengseong")}>
+
setSelectedLoc("Pyeongchang")}>
+
setSelectedLoc("Gangneung")}>
+
+
+
+
+
setSelectedLoc("Wonju")}>
+
setSelectedLoc("Hoengseong")}>
+
setSelectedLoc("Pyeongchang")}>
+
setSelectedLoc("Gangneung")}>
+
+
+
+
+
setSelectedLoc("Wonju")}>
+
setSelectedLoc("Hoengseong")}>
+
setSelectedLoc("Pyeongchang")}>
+
setSelectedLoc("Gangneung")}>
+
+
+
+
+
setSelectedLoc("Wonju")}>
+
setSelectedLoc("Yeongwol")}>
+
setSelectedLoc("Pyeongchang")}>
+
setSelectedLoc("Jeongseon")}>
+
setSelectedLoc("Donghae")}>
+
+
+
+
+
setSelectedLoc("Yeongwol")}>
+
setSelectedLoc("Jeongseon")}>
+
setSelectedLoc("Donghae")}>
+
+
+
+
+
setSelectedLoc("Yeongwol")}>
+
setSelectedLoc("Jeongseon")}>
+
setSelectedLoc("Taebaek")}>
+
setSelectedLoc("Samcheok")}>
+
+
+
+
+
setSelectedLoc("Yeongwol")}>
+
setSelectedLoc("Taebaek")}>
+
setSelectedLoc("Samcheok")}>
+
+
+
+
setSelectedLoc("Samcheok")}>
+
+
+
+ +
+ ); +} diff --git a/src/components/SelectMapBottomSheet.tsx b/src/components/SelectMapBottomSheet.tsx new file mode 100644 index 0000000..63b5743 --- /dev/null +++ b/src/components/SelectMapBottomSheet.tsx @@ -0,0 +1,112 @@ +"use client"; + +import React, { useState } from "react"; +import { motion } from "framer-motion"; +import Image from "next/image"; +import HandleBar from "../../public/assets/icons/HandleBar.svg"; +import MapSmallInnerTitleSlider from "@/components/sliders/MapSmallInnerTitleSlider"; + +interface Chip { + id: number; + defaultSrc: string; + selectedSrc: string; + width: number; + } + +const chips: Chip[] = [ + { id: 0, defaultSrc: "/assets/icons/map/SelectMap_LikeChip.svg", selectedSrc: "/assets/icons/map/SelectMap_LikeChip_Selected.svg", width: 97 }, + { id: 1, defaultSrc: "/assets/icons/map/SelectMap_WorkationChip.svg", selectedSrc: "/assets/icons/map/SelectMap_WorkationChip_Selected.svg", width: 102 }, + { id: 2, defaultSrc: "/assets/icons/map/SelectMap_CampingChip.svg", selectedSrc: "/assets/icons/map/SelectMap_CampingChip_Selected.svg", width: 86 }, + { id: 3, defaultSrc: "/assets/icons/map/SelectMap_ResortChip.svg", selectedSrc: "/assets/icons/map/SelectMap_ResortChip_Selected.svg", width: 86 }, + { id: 4, defaultSrc: "/assets/icons/map/SelectMap_LeisureChip.svg", selectedSrc: "/assets/icons/map/SelectMap_LeisureChip_Selected.svg", width: 86 }, + { id: 5, defaultSrc: "/assets/icons/map/SelectMap_FestivalChip.svg", selectedSrc: "/assets/icons/map/SelectMap_FestivalChip_Selected.svg", width: 102 }, +]; + +type SelectMapSheetProps = { + location:string; + }; + +const SelectMapBottomSheet = ({location} : SelectMapSheetProps) => { + const [isOpen, setIsOpen] = useState(false); + + const handleToggle = () => { + setIsOpen(!isOpen); + }; + + const handleDragEnd = ( + _: any, + info: { offset: { y: number }; velocity: { y: number } } + ) => { + // 드래그 동작을 분석하여 시트를 열거나 닫음 + if (info.offset.y > 100 || info.velocity.y > 500) { + setIsOpen(false); + } else if (info.offset.y < -100 || info.velocity.y < -500) { + setIsOpen(true); + } + }; + + // 칩 상태 관리 + const [selectedChipIds, setSelectedChipIds] = useState([]); + + const handleChipClick = (id: number) => { + setSelectedChipIds((prev) => + prev.includes(id) ? prev.filter((chipId) => chipId !== id) : [...prev, id] + ); + }; + + + return ( + + {/* 클릭 영역 */} +
+ {/* 클릭으로 열기/닫기 */} +
+ handlebar +
+
+
+ {chips.map((chip) => ( + {`chip-${chip.id}`} handleChipClick(chip.id)} + /> + ))} +
+
+
+ {isOpen && ( +
+
+
+ {selectedChipIds.includes(0) && } + {selectedChipIds.includes(1) && } + {selectedChipIds.includes(2) && } + {selectedChipIds.includes(3) && } + {selectedChipIds.includes(4) && } + {selectedChipIds.includes(5) && } +
+
+
+ )} + + ); +}; + +export default SelectMapBottomSheet; diff --git a/src/components/sliders/MapSmallInnerTitleSlider.tsx b/src/components/sliders/MapSmallInnerTitleSlider.tsx new file mode 100644 index 0000000..ecce32e --- /dev/null +++ b/src/components/sliders/MapSmallInnerTitleSlider.tsx @@ -0,0 +1,94 @@ +import SmallInnerTitleItem from "./SmallInnerTitleItem"; + +interface MapSmallInnerTitleSliderProps { + id: number; + location: string; +} + +const MapSmallInnerTitleSlider = ({ id, location }: MapSmallInnerTitleSliderProps) => { + const locationDescription = (location: string) => { + switch (location) { + case "철원": + return "황금빛"; + case "화천": + return "평화로운"; + case "양구": + return "시원한"; + case "인제": + return "아름다운"; + case "고성": + return "조화로운"; + case "속초": + return "근사한"; + case "양양": + return "평온한"; + case "홍천": + return "따스한"; + case "춘천": + return "고요한"; + case "횡성": + return "매혹적인"; + case "원주": + return "활기찬"; + case "평창": + return "푸른"; + case "강릉": + return "그림같은"; + case "정선": + return "상쾌한"; + case "영월": + return "신나는"; + case "태백": + return "고요한"; + case "삼척": + return "청정한"; + case "동해": + return "자연 그대로의"; + default: + return ""; + } + }; + + const Description = locationDescription(location); + + const renderDescription = (category: string) => ( +
+
+

{Description} {location}

+

{category}

+
+
더보기 {'>'}
+
+ ); + + return ( +
+ {id === 0 && ( +
+
+

내가 선택한

+

찜

+
+
더보기 {'>'}
+
+ )} + {id === 1 && renderDescription("에서 워케이션!")} + {id === 2 && renderDescription("에서 캠핑!")} + {id === 3 && renderDescription("에서 휴양!")} + {id === 4 && renderDescription("에서 레저!")} + {id === 5 && renderDescription("에서 지역축제!")} + +
+ + + + + + +
+
+
+ ); +}; + +export default MapSmallInnerTitleSlider;