Merge pull request #219 from FinalDoubleTen/dev

Fix: 여정아이템 toLocaleString 적용
WePlanPlans · Jan 22, 2024 · 91a6164 · 91a6164
2 parents 45e93bc + dbb6382
commit 91a6164
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 63 deletions.
diff --git a/src/components/Plan/PlanItemBox.tsx b/src/components/Plan/PlanItemBox.tsx
@@ -122,7 +122,7 @@ const PlanItemBox = ({
                     {item.category}
                   </div>
                   <div className="mt-[15px] text-sm font-bold text-black">
-                    {item.price} 원
+                    {item.price.toLocaleString()} 원
                   </div>
                 </div>
               </div>

diff --git a/src/components/Plan/PlanSchedule.tsx b/src/components/Plan/PlanSchedule.tsx
@@ -20,7 +20,8 @@ const PlanSchedule = () => {
         </div>
       </div>
       <span className="body1 text-gray4">
-        {trip?.startDate} ~ {trip?.endDate}
+        {trip?.startDate?.substring(2).replace(/-/g, '.') || ''} -{' '}
+        {trip?.endDate?.substring(5).replace(/-/g, '.') || ''}
       </span>
     </div>
   );

diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx
@@ -1,4 +1,4 @@
-import TripRealtimeEditor from '@components/Trip/TripRealtimeEditor';
+import TripRealtimeMember from '@components/Trip/TripRealtimeMember';
 import { BackBox } from '@components/common';
 import { useNavigate } from 'react-router-dom';
 import TripBudget from './TripBudget';
@@ -92,7 +92,7 @@ const PlanSectionTop = () => {
           navigate(`/trip/${tripId}/share`);
         }}
       />
-      <TripRealtimeEditor />
+      <TripRealtimeMember />
       <PlanSchedule />
       <TripBudget />
       <Tab

diff --git a/src/components/Plan/TripMap.tsx b/src/components/Plan/TripMap.tsx
@@ -6,12 +6,16 @@ import { getColor } from '@utils/getColor';
 const VITE_KAKAO_MAP_API_KEY = import.meta.env.VITE_KAKAO_MAP_API_KEY;
 
 const TripMap = ({ paths }: { paths: Paths[] }) => {
+  const DEFAULT_LATITUDE = 36.34;
+  const DEFAULT_LONGITUDE = 127.77;
+
   const firstPath = paths[0];
-  const latitude = firstPath?.fromLatitude;
-  const longitude = firstPath?.fromLongitude;
+  const latitude = firstPath ? firstPath.fromLatitude : DEFAULT_LATITUDE;
+  const longitude = firstPath ? firstPath.fromLongitude : DEFAULT_LONGITUDE;
 
   const mapRef = useRef<kakao.maps.Map | null>(null);
   const [selectedMarker, setSelectedMarker] = useState<number | null>(null);
+  const [maplevel, setMapLevel] = useState(4);
 
   const defaultPosition = { lat: Number(latitude), lng: Number(longitude) };
 
@@ -84,7 +88,13 @@ const TripMap = ({ paths }: { paths: Paths[] }) => {
   };
 
   useEffect(() => {
-    setBounds();
+    if (paths.length > 0) {
+      setTimeout(() => {
+        setBounds();
+      }, 100);
+    } else {
+      setMapLevel(15);
+    }
   }, [paths]);
 
   // 마커를 클릭할 때 호출되는 함수
@@ -186,39 +196,40 @@ const TripMap = ({ paths }: { paths: Paths[] }) => {
         key={VITE_KAKAO_MAP_API_KEY}
         center={centerPosition}
         style={MapStyle}
-        level={4}
+        level={maplevel}
         className="relative object-fill"
         ref={mapRef}>
-        {paths.map((path, index) => (
-          <div key={path.toSeqNum}>
-            <MapMarker
-              position={{
-                lat: Number(path.fromLatitude),
-                lng: Number(path.fromLongitude),
-              }}
-              onClick={() => handleMarkerClick(path.toSeqNum)}
-              image={getSequenceIconUrl(path.toSeqNum - 1)}
-            />
-            {/* 마지막 항목인 경우, 목적지 위치에 마커 추가 */}
-            {index === paths.length - 1 && (
+        {paths.length !== 0 &&
+          paths.map((path, index) => (
+            <div key={path.toSeqNum}>
               <MapMarker
                 position={{
-                  lat: Number(path.toLatitude),
-                  lng: Number(path.toLongitude),
+                  lat: Number(path.fromLatitude),
+                  lng: Number(path.fromLongitude),
                 }}
-                onClick={() => handleMarkerClick(path.toSeqNum + 1)}
-                image={getSequenceIconUrl(path.toSeqNum)}
+                onClick={() => handleMarkerClick(path.toSeqNum)}
+                image={getSequenceIconUrl(path.toSeqNum - 1)}
               />
-            )}
-            <Polyline
-              path={polylinePath}
-              strokeWeight={2}
-              strokeColor={'black'}
-              strokeOpacity={0.5}
-              strokeStyle={'longdash'}
-            />
-          </div>
-        ))}
+              {/* 마지막 항목인 경우, 목적지 위치에 마커 추가 */}
+              {index === paths.length - 1 && (
+                <MapMarker
+                  position={{
+                    lat: Number(path.toLatitude),
+                    lng: Number(path.toLongitude),
+                  }}
+                  onClick={() => handleMarkerClick(path.toSeqNum + 1)}
+                  image={getSequenceIconUrl(path.toSeqNum)}
+                />
+              )}
+              <Polyline
+                path={polylinePath}
+                strokeWeight={2}
+                strokeColor={'black'}
+                strokeOpacity={0.5}
+                strokeStyle={'longdash'}
+              />
+            </div>
+          ))}
       </Map>
     </div>
   );

diff --git a/src/components/Trip/EditCodeModal.tsx b/src/components/Trip/EditCodeModal.tsx
@@ -69,7 +69,7 @@ const EditCodeModal = () => {
           {isEditModal && (
             <Dialog.Portal>
               <Dialog.Overlay className="data-[state=open]:animate-overlayShow fixed inset-0 z-10 bg-black opacity-70" />
-              <Dialog.Content className="data-[state=open]:animate-contentShow fixed bottom-0 left-[50%] z-10 flex w-[412px] translate-x-[-50%] flex-col items-center rounded-t-2xl bg-white px-5 pb-8 pt-9">
+              <Dialog.Content className="data-[state=open]:animate-contentShow fixed bottom-0 left-[50%] z-10 flex w-full max-w-[412px] translate-x-[-50%] flex-col items-center rounded-t-2xl bg-white px-5 pb-8 pt-9">
                 <Dialog.Title className="headline2 mr-auto pb-2.5 text-gray7">
                   나의 여정
                 </Dialog.Title>

diff --git a/src/components/Trip/TripPreference.tsx b/src/components/Trip/TripPreference.tsx
@@ -60,11 +60,17 @@ const RatioBar = ({ value, total, color, label1, label2 }: RatioBarParams) => {
     value >= total - value
       ? Math.round((175 * value) / total)
       : Math.round((175 * (total - value)) / total);
+  const isZeroColor =
+    total === 0 && value === 0 ? 'text-gray6' : `text-${color}`;
+  const isZeroWeight = total === 0 && value === 0 ? '' : 'font-bold';
+
   return (
     <div className="mb-1 flex items-center text-sm">
       {value >= total - value ? (
         <>
-          <div className={`w-[65px] font-bold text-${color}`}>{label1}</div>
+          <div className={`w-[65px] ${isZeroWeight} ${isZeroColor}`}>
+            {label1}
+          </div>
           <div className="flex h-[10px] w-[175px] rounded-full bg-gray2">
             <div style={{ width }} className={`rounded-full bg-${color}`}></div>
           </div>
@@ -85,27 +91,33 @@ const RatioBar = ({ value, total, color, label1, label2 }: RatioBarParams) => {
   );
 };
 
-const Percentage = ({ value, total, color }: PercentageParams) => (
-  <div className="flex justify-between text-gray6">
-    {value >= total - value ? (
-      <>
-        <div className={`font-bold text-${color}`}>
-          {calculatePercentage(value, total)}%
-        </div>
-        <div className="text-gray6">
-          {calculatePercentageRemain(value, total)}%
-        </div>
-      </>
-    ) : (
-      <>
-        <div className="text-gray6">{calculatePercentage(value, total)}%</div>
-        <div className={`font-bold text-${color}`}>
-          {calculatePercentageRemain(value, total)}%
-        </div>
-      </>
-    )}
-  </div>
-);
+const Percentage = ({ value, total, color }: PercentageParams) => {
+  const isZeroColor =
+    total === 0 && value === 0 ? 'text-gray6' : `text-${color}`;
+  const isZeroWeight = total === 0 && value === 0 ? '' : 'font-bold';
+
+  return (
+    <div className="flex justify-between text-gray6">
+      {value >= total - value ? (
+        <>
+          <div className={`${isZeroWeight} ${isZeroColor}`}>
+            {calculatePercentage(value, total)}%
+          </div>
+          <div className="text-gray6">
+            {calculatePercentageRemain(value, total)}%
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="text-gray6">{calculatePercentage(value, total)}%</div>
+          <div className={`font-bold text-${color}`}>
+            {calculatePercentageRemain(value, total)}%
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
 
 const TripPreference: React.FC = () => {
   const { tripId } = useGetTripsAuthority();
@@ -143,6 +155,7 @@ const TripPreference: React.FC = () => {
 
   useEffect(() => {
     if (tripPreference) {
+      console.log('tripPreference', tripPreference);
       setA([
         tripPreference?.data?.data?.planningCount,
         tripPreference?.data?.data?.planningTotalCount,

diff --git a/src/components/Trip/TripRealtimeEditor.tsx → src/components/Trip/TripRealtimeMember.tsx b/src/components/Trip/TripRealtimeEditor.tsx → src/components/Trip/TripRealtimeMember.tsx
@@ -4,7 +4,7 @@ import { UserIcon } from '@components/common/icons/Icons';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Navigation } from 'swiper/modules';
 
-const TripRealtimeEditor = () => {
+const TripRealtimeMember = () => {
   const { tripMember } = useContext(socketContext);
 
   const tripMemberData = tripMember?.data;
@@ -60,4 +60,4 @@ const TripRealtimeEditor = () => {
   );
 };
 
-export default TripRealtimeEditor;
+export default TripRealtimeMember;
diff --git a/src/components/common/tab/Tab.tsx b/src/components/common/tab/Tab.tsx
@@ -29,7 +29,7 @@ const Tab = ({ lists, contents }: TabProps) => {
       defaultValue="tab0"
       onValueChange={handleTabChange}>
       <Tabs.List
-        className="border-b-1 no-scrollbar flex shrink-0 overflow-x-scroll"
+        className="border-b-1 no-scrollbar flex shrink-0"
         aria-label="Manage your account">
         {lists.map((list, index) => {
           return (

diff --git a/src/utils/calculatePercentage.ts b/src/utils/calculatePercentage.ts
@@ -1,6 +1,9 @@
-// utils.ts
 export const calculatePercentage = (count: number, totalCount: number) =>
-  ((count / totalCount) * 100).toFixed(0);
+  totalCount === 0 && count === 0
+    ? '0'
+    : ((count / totalCount) * 100).toFixed(0);
 
 export const calculatePercentageRemain = (count: number, totalCount: number) =>
-  (((totalCount - count) / totalCount) * 100).toFixed(0);
+  totalCount === 0 && count === 0
+    ? '0'
+    : (((totalCount - count) / totalCount) * 100).toFixed(0);