From 7e627037dabb0a200cdebd4cf4391e0b5456f61c Mon Sep 17 00:00:00 2001 From: Sonseongoh Date: Wed, 6 Nov 2024 02:25:14 +0900 Subject: [PATCH] =?UTF-8?q?design:=EA=B0=80=EC=9D=B4=EB=93=9C=20=EC=B0=BE?= =?UTF-8?q?=EC=95=84=EC=9A=94=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1=20(#1?= =?UTF-8?q?04)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/findGuide/FindGuideCard.tsx | 150 ++++++++++++++++++ src/components/findGuide/FindGuideContent.tsx | 43 +++++ src/components/myPage/MyPageSideMenu.tsx | 4 + src/data/travelFindGuideMockData.ts | 23 +++ src/pages/MyFindGuide.tsx | 11 ++ src/routes/router.tsx | 5 + 6 files changed, 236 insertions(+) create mode 100644 src/components/findGuide/FindGuideCard.tsx create mode 100644 src/components/findGuide/FindGuideContent.tsx create mode 100644 src/data/travelFindGuideMockData.ts create mode 100644 src/pages/MyFindGuide.tsx diff --git a/src/components/findGuide/FindGuideCard.tsx b/src/components/findGuide/FindGuideCard.tsx new file mode 100644 index 0000000..7480136 --- /dev/null +++ b/src/components/findGuide/FindGuideCard.tsx @@ -0,0 +1,150 @@ +import Team from '@/components/Team'; +import styled from '@emotion/styled'; +import { useState } from 'react'; + +interface IFindGuideCardProps { + title: string; + reviews: number; + isDisabled?: boolean; + onEnable?: () => void; +} + +const FindGuideCard: React.FC = ({ + title, + reviews, + isDisabled = false, + onEnable, +}) => { + const [isHovered, setIsHovered] = useState(false); + + return ( + setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > + + + {title} + 댓글 수:{reviews} + + + + + 수정 + + 삭제 + + + {isDisabled && ( + + {isHovered ? '활성화' : '비활성화'} + + )} + + ); +}; + +// 스타일 정의 +const TripCardContainer = styled.div` + position: relative; + border: 1px solid #ddd; + border-radius: 8px; + padding: 18px; + background-color: #fff; + width: 344px; + height: 190px; +`; + +const TripInfo = styled.div<{ isDisabled: boolean }>` + display: flex; + flex-direction: column; + pointer-events: ${(props) => (props.isDisabled ? 'none' : 'auto')}; +`; + +const Overlay = styled.div` + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + border-radius: 8px; + cursor: pointer; +`; + +const DisabledText = styled.p<{ isHovered: boolean }>` + color: white; + font-size: 20px; + font-weight: bold; + cursor: ${(props) => (props.isHovered ? 'pointer' : 'default')}; +`; + +const TitleContainer = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 18px; +`; + +const Title = styled.h3` + font-size: 18px; + font-weight: bold; +`; + +const Comment = styled.span` + font-size: 10px; + color: #888888; + padding-right: 6px; +`; + +const Buttons = styled.div` + display: flex; + justify-content: space-around; + align-items: center; + margin-top: 22px; + gap: 30px; + width: 100%; +`; + +const ManageButtonContainer = styled.div` + position: relative; + display: flex; + align-items: center; + flex-grow: 1; +`; + +const ManageButton = styled.button<{ isDisabled: boolean }>` + background-color: #4a95f2; + color: white; + border: none; + padding: 8px; + height: 30px; + border-radius: 8px; + cursor: pointer; + position: relative; + flex-grow: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: ${(props) => (props.isDisabled ? 'none' : 'auto')}; +`; + +const DeleteButton = styled.button<{ isDisabled: boolean }>` + color: #ff5757; + border: 1px solid #ff5757; + padding: 8px; + border-radius: 8px; + margin-left: 10px; + height: 30px; + cursor: pointer; + flex-grow: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: ${(props) => (props.isDisabled ? 'none' : 'auto')}; +`; + +export default FindGuideCard; diff --git a/src/components/findGuide/FindGuideContent.tsx b/src/components/findGuide/FindGuideContent.tsx new file mode 100644 index 0000000..36a5545 --- /dev/null +++ b/src/components/findGuide/FindGuideContent.tsx @@ -0,0 +1,43 @@ +import FindGuideCard from '@/components/findGuide/FindGuideCard'; +import { travelFindGuideMockData } from '@/data/travelFindGuideMockData'; +import styled from '@emotion/styled'; +import { useState } from 'react'; + +const FindGuideContent = () => { + const [trips, setTrips] = useState(travelFindGuideMockData); + + const handleEnableCard = (index: number) => { + setTrips((prevTrips) => + prevTrips.map((trip, i) => (i === index ? { ...trip, travelActive: true } : trip)), + ); + }; + + return ( + + + {trips.map((trip, index) => ( + handleEnableCard(index)} + /> + ))} + + + ); +}; + +// 스타일 정의 +const ScrollableContainer = styled.div` + max-width: 100%; + overflow-x: auto; +`; + +const MyMadeTripsContainer = styled.div` + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 40px; +`; + +export default FindGuideContent; diff --git a/src/components/myPage/MyPageSideMenu.tsx b/src/components/myPage/MyPageSideMenu.tsx index 77c96a1..9a29d22 100644 --- a/src/components/myPage/MyPageSideMenu.tsx +++ b/src/components/myPage/MyPageSideMenu.tsx @@ -15,6 +15,10 @@ const sideMeunItems = [ name: '작성 후기', to: 'my-reviews', }, + { + name: '가이드 찾아요', + to: 'my-find-guide', + }, ]; const MyPageSideMenu = () => { diff --git a/src/data/travelFindGuideMockData.ts b/src/data/travelFindGuideMockData.ts new file mode 100644 index 0000000..fd4c73a --- /dev/null +++ b/src/data/travelFindGuideMockData.ts @@ -0,0 +1,23 @@ +export const travelFindGuideMockData = [ + { + travelInfo: { + travelTitle: '대한민국 고궁 투어', + travelReviewCount: 23, + travelPrice: '123,000원', + }, + }, + { + travelInfo: { + travelTitle: '부산 국밥 투어', + travelReviewCount: 28, + travelPrice: '50,000원', + }, + }, + { + travelInfo: { + travelTitle: '대한민국 고궁 투어', + travelReviewCount: 23, + updateAt: '2024.01.05', + }, + }, +]; diff --git a/src/pages/MyFindGuide.tsx b/src/pages/MyFindGuide.tsx new file mode 100644 index 0000000..6e88dec --- /dev/null +++ b/src/pages/MyFindGuide.tsx @@ -0,0 +1,11 @@ +import FindGuideContent from '@/components/findGuide/FindGuideContent'; + +const MyFindGuide = () => { + return ( +
+ +
+ ); +}; + +export default MyFindGuide; diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 522caa2..ab99fa4 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -14,6 +14,7 @@ import TravelDetail from '@/pages/TravelDetail'; import Bookmark from '@/pages/Bookmark'; import MyAccount from '@/pages/MyAccount'; import AddForFindGuide from '@/pages/AddForFindGuide'; +import MyFindGuide from '@/pages/MyFindGuide'; const PATH = { HOME: '/', @@ -82,6 +83,10 @@ const router = createBrowserRouter([ path: 'my-reviews', element: , }, + { + path: 'my-find-guide', + element: , + }, { path: 'my-inquiries', element: (