Merge pull request #182 from FinalDoubleTen/FE-89--feat/Trips/TripsMap

Feat: 지도 위치 재설정
WePlanPlans · Jan 17, 2024 · 5542d9e · 5542d9e
2 parents 77f84b3 + ff99bed
commit 5542d9e
Show file tree

Hide file tree

Showing 13 changed files with 228 additions and 141 deletions.
diff --git a/src/components/DatePicker/Calendar.tsx b/src/components/DatePicker/Calendar.tsx
@@ -98,7 +98,7 @@ const Calendar: React.FC<{
     let afterClass = '';
 
     if (isStart) {
-      dayClass = 'rounded-full w-[40px] bg-main2 text-white z-10';
+      dayClass = 'rounded-full size-[40px] bg-main2 text-white z-10';
       afterClass = endDate
         ? 'after:content-[""] after:absolute after:left-[50%] after:top-[4px] after:w-[32px] after:h-[40px] after:bg-[#DAFBFF] after:z-[1]'
         : '';
@@ -107,7 +107,7 @@ const Calendar: React.FC<{
       beforeClass =
         'before:content-[""] before:absolute before:right-[50%] before:top-[4px] before:w-[32px] before:h-[40px] before:bg-[#DAFBFF] before:z-[1]';
     } else if (isMiddle) {
-      dayClass = 'bg-[#DAFBFF]';
+      dayClass = 'bg-[#DAFBFF]  w-full';
     }
 
     const onClick = () => handleDateClick(date);
@@ -118,7 +118,7 @@ const Calendar: React.FC<{
         className={`relative flex h-[48px] cursor-pointer items-center justify-center ${beforeClass} ${afterClass}`}
         onClick={onClick}>
         <div
-          className={`flex h-[40px] w-full items-center justify-center ${dayClass}`}>
+          className={`flex h-[40px] items-center justify-center ${dayClass}`}>
           {day}
         </div>
       </div>
@@ -145,7 +145,7 @@ const Calendar: React.FC<{
     }
 
     return (
-      <div className="my-4">
+      <div className="mb-4">
         <div className="headline1 text-left">
           {format(monthDate, 'yyyy년 MM월', { locale: ko })}
         </div>
@@ -159,16 +159,18 @@ const Calendar: React.FC<{
 
   return (
     <>
-      <div className="title1 mb-7">
-        {startDate && endDate
-          ? `${format(startDate, 'MM.dd', { locale: ko })} - ${format(
-              endDate,
-              'MM.dd',
-              { locale: ko },
-            )} (${differenceInDays(endDate, startDate)}박 ${
-              differenceInDays(endDate, startDate) + 1
-            }일)`
-          : '날짜를 선택해주세요.'}
+      <div className="title2 mb-7">
+        {startDate && !endDate
+          ? `${format(startDate, 'MM.dd', { locale: ko })}`
+          : startDate && endDate
+            ? `${format(startDate, 'MM.dd', { locale: ko })} - ${format(
+                endDate,
+                'MM.dd',
+                { locale: ko },
+              )} (${differenceInDays(endDate, startDate)}박 ${
+                differenceInDays(endDate, startDate) + 1
+              }일)`
+            : '날짜를 선택해주세요.'}
       </div>
 
       <div ref={calendarRef} className="h-screen overflow-auto scrollbar-hide">

diff --git a/src/components/Plan/TripBudget.tsx b/src/components/Plan/TripBudget.tsx
@@ -10,7 +10,13 @@ const TripBudget = () => {
   const [targetBudget, setTargetBudget] = useState(0); // 예시 목표 경비
   const [currentSpending, setCurrentSpending] = useState(0); // 초기 사용 경비
 
-  // 프로그레스 바 값 계산
+  useEffect(() => {
+    if (budget) {
+      setTargetBudget(budget.budget || 0);
+      setCurrentSpending(budget.calculatedPrice || 0);
+    }
+  }, [budget]);
+
   // 프로그레스 바 값 계산
   const progress = Math.min(
     currentSpending && targetBudget
@@ -19,19 +25,6 @@ const TripBudget = () => {
     100,
   );
 
-  useEffect(() => {
-    // 경비 수정 모달 추가 예정
-    const timer = setTimeout(() => setCurrentSpending(3000), 300);
-    return () => clearTimeout(timer);
-  }, []);
-
-  useEffect(() => {
-    if (budget) {
-      setTargetBudget(budget.budget || 0);
-      setCurrentSpending(budget.calculatedPrice || 0);
-    }
-  }, [budget]);
-
   // 목표 경비 설정 함수
   const handleSetTargetBudget = (newTargetBudget: number) => {
     setTargetBudget(newTargetBudget);
@@ -54,8 +47,12 @@ const TripBudget = () => {
         }}
         value={progress}>
         <Progress.Indicator
-          className="ease-[cubic-bezier(0.65, 0, 0.35, 1)] h-full w-full bg-main2 transition-transform duration-[660ms]"
-          style={{ transform: `translateX(-${100 - progress}%)` }}
+          className={`ease-[cubic-bezier(0.65, 0, 0.35, 1)] h-full w-full ${
+            progress >= 100 ? 'bg-sub2' : 'bg-main2'
+          } transition-transform duration-[660ms]`}
+          style={{
+            transform: `translateX(${progress >= 100 ? 0 : -100 + progress}%)`,
+          }}
         />
       </Progress.Root>
 

diff --git a/src/components/Plan/TripMap.tsx b/src/components/Plan/TripMap.tsx
@@ -1,4 +1,5 @@
 import { Paths } from '@/@types/service';
+import { useEffect, useRef } from 'react';
 import { Map, MapMarker, Polyline, useKakaoLoader } from 'react-kakao-maps-sdk';
 
 const VITE_KAKAO_MAP_API_KEY = import.meta.env.VITE_KAKAO_MAP_API_KEY;
@@ -8,6 +9,11 @@ const TripMap = ({ paths }: { paths: Paths[] }) => {
   const latitude = firstPath?.fromLatitude;
   const longitude = firstPath?.fromLongitude;
 
+  // Kakao Maps SDK 로드 상태
+  const [_] = useKakaoLoader({
+    appkey: VITE_KAKAO_MAP_API_KEY,
+  });
+
   const defaultPosition = { lat: Number(latitude), lng: Number(longitude) };
 
   const getCenterPosition = () => {
@@ -31,10 +37,6 @@ const TripMap = ({ paths }: { paths: Paths[] }) => {
 
   const centerPosition = getCenterPosition();
 
-  const [_] = useKakaoLoader({
-    appkey: VITE_KAKAO_MAP_API_KEY,
-  });
-
   const MapStyle = {
     width: '100%',
     height: '180px',
@@ -58,14 +60,43 @@ const TripMap = ({ paths }: { paths: Paths[] }) => {
     });
   }
 
+  const mapRef = useRef<kakao.maps.Map | null>(null);
+
+  // 지도 범위 재설정 함수
+  const setBounds = () => {
+    if (mapRef.current) {
+      const bounds = new kakao.maps.LatLngBounds();
+      paths.forEach((path) => {
+        bounds.extend(
+          new kakao.maps.LatLng(
+            Number(path.fromLatitude),
+            Number(path.fromLongitude),
+          ),
+        );
+        bounds.extend(
+          new kakao.maps.LatLng(
+            Number(path.toLatitude),
+            Number(path.toLongitude),
+          ),
+        );
+      });
+      mapRef.current.setBounds(bounds);
+    }
+  };
+
+  useEffect(() => {
+    setBounds();
+  }, [paths]);
+
   return (
-    <div className="flex justify-center">
+    <div className="flex flex-col justify-center">
       <Map
         key={VITE_KAKAO_MAP_API_KEY}
         center={centerPosition}
         style={MapStyle}
         level={10}
-        className="relative rounded-lg object-fill">
+        className="relative rounded-lg object-fill"
+        ref={mapRef}>
         {paths.map((path, index) => (
           <div key={index}>
             <MapMarker

diff --git a/src/components/Tours/CreateTripButton.tsx b/src/components/Tours/CreateTripButton.tsx
@@ -1,18 +1,64 @@
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import Alert from '@components/common/alert/Alert';
+import { getMember } from '@api/member';
 
 const CreateTripButton = () => {
   const navigate = useNavigate();
+  const [isLogin, setIsLogin] = useState<boolean>(false);
+  const [, setShowAlert] = useState<boolean>(false);
+  const [checked, setChecked] = useState<boolean>(false);
 
+  useEffect(() => {
+    const checkLoginStatus = async () => {
+      try {
+        const res = await getMember();
+        if (res.data.status === 200) {
+          setIsLogin(true);
+        }
+      } catch (err) {
+        console.error(err);
+        setIsLogin(false);
+      } finally {
+        setChecked(true);
+      }
+    };
+
+    checkLoginStatus();
+  }, []);
+
+  const handleCreateTrip = () => {
+    if (isLogin) {
+      navigate('/create');
+    } else {
+      setShowAlert(true);
+    }
+  };
+
+  const handleConfirm = () => {
+    navigate('/login');
+  };
   return (
-    <div className="sticky bottom-20 z-[100] ml-auto mr-2 flex h-12 w-[119px] items-center justify-center gap-2 rounded-[30px] bg-[#28d8ff] p-2 shadow-[2px_2px_5px_0_rgba(0,0,0,0.2)]">
-      <button
-        className="headline1 pt-[2px] text-white"
-        onClick={() => {
-          navigate('/create');
-        }}>
-        여행 계획하기
-      </button>
-    </div>
+    <>
+      {checked && (
+        <Alert
+          title={'로그인'}
+          message={
+            <>
+              로그인이 필요한 기능입니다.
+              <br />
+              로그인 하시겠습니까?
+            </>
+          }
+          onConfirm={handleConfirm}>
+          <button
+            className="headline1 sticky bottom-20 z-[100] ml-auto mr-2 flex h-12 w-[119px] items-center justify-center gap-2 rounded-[30px] bg-[#28d8ff] p-2 pt-[10px] text-white shadow-[2px_2px_5px_0_rgba(0,0,0,0.2)]"
+            onClick={handleCreateTrip}>
+            여행 계획하기
+          </button>
+        </Alert>
+      )}
+    </>
   );
 };
 

diff --git a/src/components/Tours/ToursCategoryItem.tsx b/src/components/Tours/ToursCategoryItem.tsx
@@ -13,7 +13,7 @@ const ToursCategoryItem = ({
     <button
       type="button"
       onClick={() => onSelect(name)}
-      className={`body4 flex items-center justify-center whitespace-nowrap rounded-[30px] border border-solid bg-[#28D8FF] px-[16px] py-[7px] leading-normal ${buttonStyle}`}>
+      className={`body4 mr-[5px] flex items-center justify-center whitespace-nowrap rounded-[30px] border border-solid bg-[#28D8FF] px-[16px] py-[7px] leading-normal ${buttonStyle}`}>
       {name}
     </button>
   );

diff --git a/src/components/Trip/LikedToursList.tsx b/src/components/Trip/LikedToursList.tsx
@@ -0,0 +1,3 @@
+export const LikedToursList = () => {
+  return <div>LikedToursList</div>;
+};
diff --git a/src/components/Trip/TripSectionTop.tsx b/src/components/Trip/TripSectionTop.tsx
@@ -4,6 +4,7 @@ import TripInfo from './TripInfo';
 import { BackBox } from '@components/common';
 import { useNavigate } from 'react-router-dom';
 import PlanTripButton from './PlanTripButton';
+import { LikedToursList } from './LikedToursList';
 
 const TripSectionTop = () => {
   const navigate = useNavigate();
@@ -21,7 +22,7 @@ const TripSectionTop = () => {
       <PlanTripButton />
       <Tab
         lists={['우리의 여행취향', '우리의 관심목록']}
-        contents={[<TripPreference />, <div>우리의 관심목록</div>]}
+        contents={[<TripPreference />, <LikedToursList />]}
       />
     </div>
   );

diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx
@@ -483,30 +483,19 @@ export const PlusIcon: React.FC<IconProps> = ({
       xmlns="http://www.w3.org/2000/svg"
       width={size}
       height={size}
-      viewBox="0 0 21 21"
+      viewBox="0 0 14 14"
       fill={fill}>
-      <rect
-        x="2.42017"
-        y="2.60938"
-        width="16.6667"
-        height="16.6667"
-        rx="8.33333"
-        stroke={color}
-        strokeWidth="1.5"
-      />
       <path
-        d="M6.98962 10.9434L14.5176 10.9434"
-        stroke={color}
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.00073 0.31644C7.34591 0.31644 7.62573 0.596262 7.62573 0.94144V12.6805C7.62573 13.0257 7.34591 13.3055 7.00073 13.3055C6.65555 13.3055 6.37573 13.0257 6.37573 12.6805V0.94144C6.37573 0.596262 6.65555 0.31644 7.00073 0.31644Z"
+        fill={color}
       />
       <path
-        d="M10.7534 7.17908L10.7534 14.707"
-        stroke={color}
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.4953 6.81091C13.4953 7.15609 13.2154 7.43591 12.8703 7.43591L1.13121 7.43591C0.786037 7.43591 0.506215 7.15609 0.506215 6.81091C0.506215 6.46573 0.786037 6.18591 1.13121 6.18591L12.8703 6.18591C13.2154 6.18591 13.4953 6.46574 13.4953 6.81091Z"
+        fill={color}
       />
     </svg>
   );
@@ -1123,7 +1112,7 @@ export const ShareIcon: React.FC<ChackIconProps> = ({
 };
 
 export const PlanIcon: React.FC<IconProps> = ({
-  size = 20,
+  size = 24,
   color = 'black',
   fill = 'none',
 }) => {
@@ -1261,3 +1250,50 @@ export const CheckboxIcon: React.FC<IconProps> = ({
     </svg>
   );
 };
+
+export const CounterIcon: React.FC<
+  IconProps & { plus?: boolean; minus?: boolean }
+> = ({ size = 12, fill = '#D7D7D7', plus, minus }) => {
+  return (
+    <>
+      {plus && (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={size}
+          viewBox="0 0 13 12"
+          fill={fill}>
+          <path
+            d="M1.58229 6.00781H11.5823"
+            stroke="#D7D7D7"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M6.58229 1.00781V11.0078"
+            stroke="#D7D7D7"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      )}
+      {minus && (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={size}
+          height={size / 6.5}
+          viewBox="0 0 13 2"
+          fill="none">
+          <path
+            d="M1.5359 1.00781H11.5359"
+            stroke="#D7D7D7"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      )}
+    </>
+  );
+};