Merge pull request #207 from FinalDoubleTen/FE-77--feat/Trips

Feat: 맵 마커 적용
WePlanPlans · Jan 21, 2024 · ccf36c1 · ccf36c1
2 parents f9909aa + 2743ba8
commit ccf36c1
Show file tree

Hide file tree

Showing 18 changed files with 214 additions and 164 deletions.
diff --git a/src/assets/images/FifthMarker.png b/src/assets/images/FifthMarker.png
diff --git a/src/assets/images/FifthSelectedMarker.png b/src/assets/images/FifthSelectedMarker.png
diff --git a/src/assets/images/FirstMarker.png b/src/assets/images/FirstMarker.png
diff --git a/src/assets/images/FirstSelectedMarker.png b/src/assets/images/FirstSelectedMarker.png
diff --git a/src/assets/images/FourthMarker.png b/src/assets/images/FourthMarker.png
diff --git a/src/assets/images/FourthSelectedMarker.png b/src/assets/images/FourthSelectedMarker.png
diff --git a/src/assets/images/SecondMarker.png b/src/assets/images/SecondMarker.png
diff --git a/src/assets/images/SecondSelectedMarker.png b/src/assets/images/SecondSelectedMarker.png
diff --git a/src/assets/images/ThirdMarker.png b/src/assets/images/ThirdMarker.png
diff --git a/src/assets/images/ThirdSelectedMarker.png b/src/assets/images/ThirdSelectedMarker.png
diff --git a/src/components/Plan/PlanSchedule.tsx b/src/components/Plan/PlanSchedule.tsx
@@ -0,0 +1,29 @@
+import { UserIcon } from '@components/common/icons/Icons';
+import { socketContext } from '@hooks/useSocket';
+import { useContext } from 'react';
+
+const PlanSchedule = () => {
+  const { tripInfo } = useContext(socketContext);
+  const trip = tripInfo?.data;
+
+  return (
+    <div className="my-5">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center">
+          <div className="title1 mb-[10px] mr-1">{trip?.tripName}</div>
+          <div className="flex items-center pb-[10px]">
+            <UserIcon size={20} fill="#888" color="#888" />
+            <span className="body4 pt-[1px] text-gray4">
+              {trip?.numberOfPeople}
+            </span>
+          </div>
+        </div>
+      </div>
+      <span className="body1 text-gray4">
+        {trip?.startDate} ~ {trip?.endDate}
+      </span>
+    </div>
+  );
+};
+
+export default PlanSchedule;
diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx
@@ -12,8 +12,7 @@ import { useRecoilValue, useRecoilState } from 'recoil';
 import { dayState, dateState } from '@recoil/plan';
 import { tripIdState, memberIdState } from '@recoil/socket';
 import { calculateDayAndDate } from '@utils/utils';
-import { TripSchedule } from '@components/Trip/TripSchedule';
-import { getItem } from '@utils/localStorageFun';
+import PlanSchedule from './PlanSchedule';
 
 const PlanSectionTop = () => {
   const navigate = useNavigate();
@@ -58,7 +57,7 @@ const PlanSectionTop = () => {
         }}
       />
       <TripRealtimeEditor />
-      <TripSchedule />
+      <PlanSchedule />
       <TripBudget />
       <Tab
         lists={DayArr}

diff --git a/src/components/Plan/TripBudget.tsx b/src/components/Plan/TripBudget.tsx
@@ -1,13 +1,15 @@
 import { pubUpdateBudget } from '@api/socket';
 import Alert from '@components/common/alert/Alert';
 import { CloseIcon, SettingIcons } from '@components/common/icons/Icons';
+import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
 import { socketContext } from '@hooks/useSocket';
 import * as Progress from '@radix-ui/react-progress';
 import { tripIdState } from '@recoil/socket';
 import { useContext, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 const TripBudget = () => {
+  const { tripAuthority } = useGetTripsAuthority();
   const { tripBudget } = useContext(socketContext);
   const tripId = useRecoilValue(tripIdState);
 
@@ -71,63 +73,67 @@ const TripBudget = () => {
         <div className="caption2 flex items-center justify-between pt-1">
           <div className="flex items-center">
             <span className="body5 mr-[4px] text-gray5">목표 경비</span>
-            <Alert
-              title={'비용을 입력해주세요'}
-              message={''}
-              onConfirm={() => handleSetTargetBudget(inputBudget)}
-              closeOnConfirm={true}
-              children={
-                <button className="text-gray3">
-                  <SettingIcons color="#D9D9D9" />
-                  {!budget?.budget && (
-                    <div className="h-[31.2px] w-[141px]">
-                      <div className="h-[27.16px] w-[141px]">
-                        <div className="relative left-[-80px] top-8 flex h-[27.16px] w-[141px] items-center justify-center gap-[0.8043220639228821px] rounded-lg bg-[#062139] px-3 py-[7px]">
-                          <div className="h-3.5 w-[129.36px]">
-                            <span className="caption1 w-[129.36px] text-center text-white">
-                              목표 경비를 입력해보세요!
-                            </span>
+            {tripAuthority == 'WRITE' && (
+              <Alert
+                title={'비용을 입력해주세요'}
+                message={''}
+                onConfirm={() => handleSetTargetBudget(inputBudget)}
+                closeOnConfirm={true}
+                children={
+                  <button className="text-gray3">
+                    <SettingIcons color="#D9D9D9" />
+                    {!budget?.budget && (
+                      <div className="h-[31.2px] w-[141px]">
+                        <div className="h-[27.16px] w-[141px]">
+                          <div className="relative left-[-80px] top-8 flex h-[27.16px] w-[141px] items-center justify-center gap-[0.8043220639228821px] rounded-lg bg-[#062139] px-3 py-[7px]">
+                            <div className="h-3.5 w-[129.36px]">
+                              <span className="caption1 w-[129.36px] text-center text-white">
+                                목표 경비를 입력해보세요!
+                              </span>
+                            </div>
                           </div>
                         </div>
+                        <svg
+                          width={12}
+                          height={7}
+                          viewBox="0 0 12 7"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="relative left-[-15.8px] top-0"
+                          preserveAspectRatio="xMidYMid meet">
+                          <path
+                            d="M5.94048 0.136719L11.4521 6.20375L0.428827 6.20375L5.94048 0.136719Z"
+                            fill="#062139"
+                          />
+                        </svg>
+                      </div>
+                    )}
+                  </button>
+                }
+                content={
+                  <div className="mb-6 mt-8 flex w-[80%] items-center justify-between border-b-[1px] border-solid border-gray4">
+                    <div className="flex w-full items-center justify-between">
+                      <input
+                        type="number"
+                        className="title3 text-gray6 placeholder:text-gray4 focus:outline-none"
+                        placeholder="금액"
+                        value={inputBudget}
+                        onChange={(e) => setInputBudget(e.target.value)}
+                      />
+                      <div
+                        className="cursor-pointer"
+                        onClick={() => setInputBudget('')}>
+                        {showCloseIcon && (
+                          <CloseIcon size={16} fill="#D7D7D7" />
+                        )}
                       </div>
-                      <svg
-                        width={12}
-                        height={7}
-                        viewBox="0 0 12 7"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                        className="relative left-[-15.8px] top-0"
-                        preserveAspectRatio="xMidYMid meet">
-                        <path
-                          d="M5.94048 0.136719L11.4521 6.20375L0.428827 6.20375L5.94048 0.136719Z"
-                          fill="#062139"
-                        />
-                      </svg>
-                    </div>
-                  )}
-                </button>
-              }
-              content={
-                <div className="mb-6 mt-8 flex w-[80%] items-center justify-between border-b-[1px] border-solid border-gray4">
-                  <div className="flex w-full items-center justify-between">
-                    <input
-                      type="number"
-                      className="title3 text-gray6 placeholder:text-gray4 focus:outline-none"
-                      placeholder="금액"
-                      value={inputBudget}
-                      onChange={(e) => setInputBudget(e.target.value)}
-                    />
-                    <div
-                      className="cursor-pointer"
-                      onClick={() => setInputBudget('')}>
-                      {showCloseIcon && <CloseIcon size={16} fill="#D7D7D7" />}
                     </div>
-                  </div>
 
-                  <span className="title3 pl-[4.5px] text-gray4">원</span>
-                </div>
-              }
-            />
+                    <span className="title3 pl-[4.5px] text-gray4">원</span>
+                  </div>
+                }
+              />
+            )}
           </div>
           <div>
             <span>{budget?.budget.toLocaleString() ?? '- '}</span>