Merge branch 'develop' of https://github.com/prgrms-web-devcourse-fin…

…al-project/WEB1_1_J1P5_FE into develop
J1P5 · Dec 7, 2024 · 184ecbd · 184ecbd
2 parents 823aff0 + 3e46f11
commit 184ecbd
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 13 deletions.
diff --git a/src/components/atoms/Icon/AntennaIcon/index.tsx b/src/components/atoms/Icon/AntennaIcon/index.tsx
@@ -0,0 +1,52 @@
+import { type IIconProps, IconWrapper } from "../styled";
+
+/**
+ * 위성 안테나 아이콘 (위치 권한 에러 모달에서 사용)
+ */
+export const AntennaIcon = ({ size = "m" }: IIconProps) => {
+  return (
+    <IconWrapper size={size}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        viewBox="0 0 40 40"
+        fill="none"
+      >
+        <path
+          d="M11.9402 23.9121C13.7935 23.9121 20.1958 28.7399 20.1924 34.691C20.1958 40.6443 3.6891 40.6443 3.68799 34.6899C3.6891 28.7388 10.0869 23.9121 11.9402 23.9121Z"
+          fill="#99AAB5"
+        />
+        <path
+          d="M9.49013 27.9796C19.3112 37.8018 28.7535 33.7162 31.749 30.7229C34.7435 27.7273 31.5735 19.7051 24.6701 12.8018C17.7646 5.89734 9.74124 2.72734 6.7468 5.72179C3.75235 8.71623 -0.33209 18.1585 9.49013 27.9796Z"
+          fill="#CCD6DD"
+        />
+        <path
+          d="M13.8256 23.6418C20.73 30.5462 28.7523 33.7151 31.7478 30.7218C34.7423 27.7262 31.5723 19.704 24.6689 12.8007C17.7645 5.89736 9.74115 2.72736 6.74671 5.7218C3.75226 8.71625 6.92226 16.7396 13.8256 23.6418Z"
+          fill="#66757F"
+        />
+        <path
+          d="M24.669 12.8012C25.1613 13.2945 25.1613 14.0934 24.669 14.5867L16.6324 22.6212C16.139 23.1145 15.3401 23.1145 14.8468 22.6212C14.3535 22.1289 14.3535 21.3289 14.8468 20.8356L22.8824 12.8012C23.3768 12.3078 24.1746 12.3078 24.669 12.8012Z"
+          fill="#CCD6DD"
+        />
+        <path
+          d="M26.4545 11.0162C27.44 12.0018 27.44 13.6018 26.4545 14.5873C25.4678 15.574 23.8689 15.574 22.8822 14.5873C21.8967 13.6018 21.8967 12.0018 22.8822 11.0162C23.8678 10.0284 25.4678 10.0284 26.4545 11.0162Z"
+          fill="#CCD6DD"
+        />
+        <path
+          d="M31.43 14.531L31.3733 14.5299C30.76 14.4999 30.2889 13.9777 30.3189 13.3655C30.32 13.3477 30.3889 10.9688 28.5633 9.14327C26.7433 7.32438 24.3722 7.38882 24.34 7.38771C23.7289 7.42438 23.2056 6.94549 23.1745 6.33438C23.1445 5.72104 23.6156 5.19882 24.2289 5.16882C24.3645 5.15549 27.5933 5.03216 30.1333 7.57216C32.6745 10.1144 32.5445 13.3399 32.5378 13.4766C32.5089 14.0688 32.0178 14.531 31.43 14.531Z"
+          fill="#FFAC33"
+        />
+        <path
+          d="M35.3846 13.9133C35.2635 13.9133 35.139 13.8922 35.0179 13.85C34.439 13.6467 34.1335 13.0133 34.3368 12.4344C34.3746 12.3155 35.329 9.23888 31.8979 5.80888C28.4246 2.33443 25.0913 3.12665 24.9513 3.16221C24.3635 3.31443 23.7546 2.95777 23.6002 2.36777C23.4446 1.77777 23.7913 1.17443 24.379 1.01554C24.5679 0.964432 29.0513 -0.181123 33.469 4.23888C37.9313 8.69888 36.4979 12.99 36.4335 13.1711C36.2735 13.6267 35.8435 13.9133 35.3846 13.9133Z"
+          fill="#FFAC33"
+        />
+        <path
+          d="M12.1269 36.1346C8.90465 36.1346 5.96799 35.4035 3.72021 34.2046C3.71132 34.3668 3.68799 34.5268 3.68799 34.6913C3.6891 40.6457 20.1958 40.6457 20.1924 34.6924C20.1924 34.5924 20.1758 34.4957 20.1724 34.3968C17.9758 35.4813 15.1769 36.1346 12.1269 36.1346Z"
+          fill="#66757F"
+        />
+      </svg>
+    </IconWrapper>
+  );
+};
+
diff --git a/src/components/atoms/Icon/AntennaIcon/stories.ts b/src/components/atoms/Icon/AntennaIcon/stories.ts
@@ -0,0 +1,36 @@
+import { type Meta, StoryObj } from "@storybook/react";
+import { AntennaIcon } from ".";
+import { IconSizes } from "../styled";
+
+const meta: Meta<typeof AntennaIcon> = {
+  title: "Atoms/Icon/AntennaIcon",
+  component: AntennaIcon,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: Object.keys(IconSizes)
+    }
+  }
+};
+
+type Story = StoryObj<typeof meta>;
+
+export const small: Story = {
+  args: {
+    size: "s"
+  }
+};
+export const medium: Story = {
+  args: {
+    size: "m"
+  }
+};
+export const large: Story = {
+  args: {
+    size: "l"
+  }
+};
+
+export default meta;
+
diff --git a/src/components/atoms/Icon/index.ts b/src/components/atoms/Icon/index.ts
@@ -1,4 +1,5 @@
 // components/atoms/Icon
+export { AntennaIcon } from "./AntennaIcon";
 export { BackIcon } from "./BackIcon";
 export { NextIcon } from "./NextIcon";
 export { LocationIcon } from "./LocationIcon";

diff --git a/src/components/organisms/Modal/styled.ts b/src/components/organisms/Modal/styled.ts
@@ -41,6 +41,7 @@ export const ModalButtonContainerWrapper: ReturnType<
   gap: 0.25rem;
   ${TextButtonWrapper} {
     flex: ${({ direction }) => (direction === "horizontal" ? "1" : "auto")};
+    margin: 0;
   }
 `;
 
@@ -49,7 +50,7 @@ export const ModalContainerWrapper: ReturnType<typeof styled.div> = styled.div`
   width: calc(100% - 2rem); // 100% - 양 옆 1rem(16px)씩
   max-width: 500px;
   background-color: white;
-  border-radius: 0.5rem;
+  border-radius: 1rem;
   position: relative;
 `;
 
@@ -68,7 +69,8 @@ export const ModalRootWrapper: ReturnType<
   left: 50%;
   translate: -50%;
   z-index: 9999;
-  max-width: 375px;
+  max-width: 400px;
+  // max-width: 375px;
   width: calc(100% - 2rem);
   height: 100%;
   // 자식 요소 배치

diff --git a/src/hooks/useLocationErrorEvent.tsx b/src/hooks/useLocationErrorEvent.tsx
@@ -2,6 +2,7 @@ import { useCallback } from "react";
 import { Text } from "components/atoms";
 import { Modal } from "components/organisms";
 import { useModalStore } from "stores";
+import { AntennaIcon } from "components/atoms/Icon";
 
 export const useLocationErrorEvent = () => {
   const { openModal, closeModal } = useModalStore((state) => state.actions);
@@ -11,7 +12,36 @@ export const useLocationErrorEvent = () => {
       openModal(
         <>
           <Modal.Body>
-            <Text content={message} />
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                gap: "20px",
+                alignSelf: "stretch"
+              }}
+            >
+              <AntennaIcon size="l" />
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: "2px",
+                  alignSelf: "stretch",
+                  color: "#2D2D39"
+                }}
+              >
+                <Text content={message} variant="title_bold" />
+                {/* // TODO: 에러마다 바뀔 것 같아서, 나중에 prop으로 처리 */}
+                <div style={{ color: "#707192" }}>
+                  <Text
+                    content={"위치 권한 허용 후 다시 시도해 주세요!"}
+                    variant="explan_regular"
+                  />
+                </div>
+              </div>
+            </div>
           </Modal.Body>
           <Modal.ButtonContainer
             buttons={[
@@ -29,4 +59,3 @@ export const useLocationErrorEvent = () => {
     [openModal, closeModal]
   );
 };
-
diff --git a/src/hooks/useMap.ts b/src/hooks/useMap.ts
@@ -44,9 +44,7 @@ export const useMap = ({
     /**
      * TODO: 권한 요청을 했는데, 그냥 취소 누른 경우 실행되는 부분
      */
-    locationErrorEvent?.(
-      "위치를 불러오는데 실패했어요. 잠시 후에 다시 실행해주세요."
-    );
+    locationErrorEvent?.("위치를 불러오는데 실패했어요.");
   }, [locationErrorEvent]);
 
   const handlePermission = useCallback(
@@ -61,9 +59,7 @@ export const useMap = ({
           type === "getMyLocation" ||
           (type === "init" && !coord && !isCenterMarkerExist)
         ) {
-          locationErrorEvent?.(
-            "위치 권한이 거부되었습니다. 권한을 허용해주세요."
-          );
+          locationErrorEvent?.("지금은 위치를 불러올 수 없어요.");
         }
       }
     },
@@ -84,9 +80,7 @@ export const useMap = ({
          * 만일의 경우를 대비한 처리. 실제로 사용될 일은 드물 것으로 예상됨
          * TODO: 추후에 개발 후 처분 결정
          */
-        locationErrorEvent?.(
-          "브라우저가 위치 정보를 지원하지 않습니다. 위치 권한을 허용해주세요."
-        );
+        locationErrorEvent?.("브라우저가 위치 정보를 지원하지 않아요.");
 
         myMarker.setPosition(defaultCenter);
         myMarker.setVisible(!coord && !isCenterMarkerExist);