design:가이드 찾아요 퍼블리싱 (#104)

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<IFindGuideCardProps> = ({
+  title,
+  reviews,
+  isDisabled = false,
+  onEnable,
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <TripCardContainer
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <TripInfo isDisabled={isDisabled}>
+        <TitleContainer>
+          <Title>{title}</Title>
+          <Comment>댓글 수:{reviews}</Comment>
+        </TitleContainer>
+        <Team max={7} mbtiList={['ENFP']} />
+        <Buttons>
+          <ManageButtonContainer>
+            <ManageButton isDisabled={isDisabled}>수정</ManageButton>
+          </ManageButtonContainer>
+          <DeleteButton isDisabled={isDisabled}>삭제</DeleteButton>
+        </Buttons>
+      </TripInfo>
+      {isDisabled && (
+        <Overlay onClick={onEnable}>
+          <DisabledText isHovered={isHovered}>{isHovered ? '활성화' : '비활성화'}</DisabledText>
+        </Overlay>
+      )}
+    </TripCardContainer>
+  );
+};
+
+// 스타일 정의
+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;

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 (
+    <ScrollableContainer>
+      <MyMadeTripsContainer>
+        {trips.map((trip, index) => (
+          <FindGuideCard
+            key={index}
+            title={trip.travelInfo.travelTitle}
+            reviews={trip.travelInfo.travelReviewCount}
+            onEnable={() => handleEnableCard(index)}
+          />
+        ))}
+      </MyMadeTripsContainer>
+    </ScrollableContainer>
+  );
+};
+
+// 스타일 정의
+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;

src/components/myPage/MyPageSideMenu.tsx

@@ -15,6 +15,10 @@ const sideMeunItems = [
     name: '작성 후기',
     to: 'my-reviews',
   },
+  {
+    name: '가이드 찾아요',
+    to: 'my-find-guide',
+  },
 ];
 
 const MyPageSideMenu = () => {

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',
+    },
+  },
+];

src/pages/MyFindGuide.tsx

@@ -0,0 +1,11 @@
+import FindGuideContent from '@/components/findGuide/FindGuideContent';
+
+const MyFindGuide = () => {
+  return (
+    <div>
+      <FindGuideContent />
+    </div>
+  );
+};
+
+export default MyFindGuide;

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: <MyReviews />,
               },
+              {
+                path: 'my-find-guide',
+                element: <MyFindGuide />,
+              },
               {
                 path: 'my-inquiries',
                 element: (