Merge pull request #804 from sparcs-kaist/#803-taxi-fare-관련-컴포넌트-dev-…

…및-서비스-연결이-되지-않았을-때-보이지-않도록-수정 taxi fare 관련 컴포넌트 백엔드 미동작시 숨김
sparcs-kaist · Aug 20, 2024 · 141ef87 · 141ef87
2 parents bd5bd9f + b31cccb
commit 141ef87
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 28 deletions.
diff --git a/packages/web/src/components/Chat/Header/SideMenu.tsx b/packages/web/src/components/Chat/Header/SideMenu.tsx
@@ -111,7 +111,7 @@ const SideMenu = ({ roomInfo, isOpen, setIsOpen }: SideMenuProps) => {
 
   useEffect(() => {
     getTaxiFare();
-  }, []);
+  }, [roomInfo._id]);
   const isAlone = roomInfo.part.length === 1;
 
   const styleBackground = {
@@ -213,15 +213,19 @@ const SideMenu = ({ roomInfo, isOpen, setIsOpen }: SideMenuProps) => {
             </div>
           </div>
           <DottedLine />
-          <div css={styleInfoSection}>
-            <div css={{ display: "flex", gap: "8px" }}>
-              <WalletRoundedIcon style={styleIcon} />
-              <div css={{ ...styleInfo }}>
-                예상 택시비 : {taxiFare.toLocaleString("ko-KR")}원
+          {taxiFare !== 0 ? (
+            <>
+              <div css={styleInfoSection}>
+                <div css={{ display: "flex", gap: "8px" }}>
+                  <WalletRoundedIcon style={styleIcon} />
+                  <div css={{ ...styleInfo }}>
+                    예상 택시비 : {taxiFare.toLocaleString("ko-KR")}원
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-          <DottedLine />
+              <DottedLine />
+            </>
+          ) : null}
           <SideMenuButton type="share" onClick={onClikcShare} />
           <DottedLine />
           <SideMenuButton type="taxi" onClick={onClickCallTaxi} />

diff --git a/packages/web/src/components/ModalPopup/Body/BodyRoomSelection.tsx b/packages/web/src/components/ModalPopup/Body/BodyRoomSelection.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 
@@ -236,22 +236,24 @@ const BodyRoomSelection = ({ roomInfo }: BodyRoomSelectionProps) => {
             </InfoSection>
           </div>
         </div>
-        <InfoSection title="참여 시 예상 택시비" alignDirection="left">
-          <div css={{ display: "flex", justifyContent: "start" }}>
-            <p css={theme.font14}>{`${taxiFare.toLocaleString("ko-KR")}원 / ${
-              roomInfo?.part?.length +
-              (isAlreadyPart || isDepart || isRoomFull ? 0 : 1)
-            }명`}</p>
-            <p css={theme.font14_bold}>
-              &nbsp;
-              {`= 인당 ${Math.floor(
-                taxiFare /
-                  (roomInfo?.part?.length +
-                    (isAlreadyPart || isDepart || isRoomFull ? 0 : 1))
-              ).toLocaleString("ko-KR")}원`}
-            </p>
-          </div>
-        </InfoSection>
+        {taxiFare !== 0 ? (
+          <InfoSection title="참여 시 예상 택시비" alignDirection="left">
+            <div css={{ display: "flex", justifyContent: "start" }}>
+              <p css={theme.font14}>{`${taxiFare.toLocaleString("ko-KR")}원 / ${
+                roomInfo?.part?.length +
+                (isAlreadyPart || isDepart || isRoomFull ? 0 : 1)
+              }명`}</p>
+              <p css={theme.font14_bold}>
+                &nbsp;
+                {`= 인당 ${Math.floor(
+                  taxiFare /
+                    (roomInfo?.part?.length +
+                      (isAlreadyPart || isDepart || isRoomFull ? 0 : 1))
+                ).toLocaleString("ko-KR")}원`}
+              </p>
+            </div>
+          </InfoSection>
+        ) : null}
       </div>
       {isLogin || isRoomFull || isDepart ? (
         <Button

diff --git a/packages/web/src/pages/Addroom/index.tsx b/packages/web/src/pages/Addroom/index.tsx
@@ -100,7 +100,6 @@ const AddRoom = () => {
   }, [myRooms]); // myOngoingRoom은 infoSection의 sortedMyRoom에서 정렬만 뺀 코드입니다. useMemo로 감싼 형태입니다.
   // item : any 가 좋은 방법인지 모르겠습니다
 
-
   useEffect(() => {
     const expirationDate = new Date();
     expirationDate.setFullYear(expirationDate.getFullYear() + 10);
@@ -221,7 +220,9 @@ const AddRoom = () => {
               />
               <OptionTime value={valueTime} handler={setTime} page="add" />
               <OptionMaxPeople value={valueMaxPeople} handler={setMaxPeople} />
-              <TaxiFare value={taxiFare} roomLength={valueMaxPeople} />
+              {taxiFare !== 0 ? (
+                <TaxiFare value={taxiFare} roomLength={valueMaxPeople} />
+              ) : null}
               <Button
                 type="purple"
                 disabled={validatedMsg ? true : false}