Merge pull request #63 from wanted-fork-fork/develop

[Release] v0.4.1 유저 메인 페이지 추가
wanted-fork-fork · Nov 13, 2021 · b128422 · b128422
2 parents 3ca77bf + 3ea12d3
commit b128422
Show file tree

Hide file tree

Showing 41 changed files with 1,032 additions and 86 deletions.
diff --git a/src/components/atoms/BottomSection.tsx b/src/components/atoms/BottomSection.tsx
@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import theme, { windowSize } from "@src/styles/theme";
+
+interface BottomProps {
+  height?: string;
+}
+export const BottomSection = styled.div<BottomProps>`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: ${({ height }) => height ?? "68px"};
+  background: #fff;
+  border-top: 1px solid ${theme.color.gray2};
+  z-index: 9999;
+  ${theme.window.tab} {
+    width: ${windowSize.mobile};
+    left: auto;
+    right: auto;
+  }
+`;
+export default {};
diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx
@@ -9,38 +9,52 @@ export interface ButtonStyleProps extends BaseProps {
   filled?: boolean;
   width?: string;
   height?: string;
-  color: "gray" | "primary" | "white";
+  color?: "gray" | "primary" | "white" | string;
+  shape?: "rounded" | "full-rounded";
+  textAlign?: "left" | "center";
 }
 
 export interface InputLikeButtonStyleProps extends ButtonStyleProps {
   selected?: boolean;
 }
 
-const BaseButton = css<ButtonStyleProps>`
+export const BaseButton = css<ButtonStyleProps>`
   ${BaseStyleProps};
 
+  border-radius: ${({ shape }) => {
+    switch (shape) {
+      case "rounded":
+        return "12px";
+      case "full-rounded":
+        return "100px";
+      default:
+        return "12px";
+    }
+  }};
+
+  text-align: ${({ textAlign = "center" }) => textAlign};
+
   border: none;
   height: ${({ height }) => height || "58px"};
-  text-align: center;
   cursor: pointer;
   user-select: none;
 `;
 
 export const Button = styled.button<ButtonStyleProps>`
   ${BaseButton};
 
-  border-radius: 12px;
-
-  background: ${({ color, disabled, filled = true }) => {
+  background: ${({ color = "gray", disabled, filled = true }) => {
     if (disabled) return theme.color.gray2;
     if (!filled) return "#fff";
     switch (color) {
       case "white":
         return "#FFF";
       case "primary":
         return Color.mainGradient;
-      default:
+      case "gray":
         return theme.color.gray2;
+      default:
+        return color;
     }
   }};
   font-weight: ${({ color }) => {

diff --git a/src/components/atoms/CategoryTag.ts b/src/components/atoms/CategoryTag.ts
@@ -0,0 +1,16 @@
+import styled from "styled-components";
+import theme, { FontSize } from "@src/styles/theme";
+import { BaseButton, ButtonStyleProps } from "@src/components/atoms/Button";
+
+export const CategoryTag = styled.button<ButtonStyleProps>`
+  ${BaseButton};
+  height: 32px;
+  background-color: ${theme.color.gray1};
+  font-size: ${FontSize.Small};
+  font-weight: 500;
+  word-break: keep-all;
+  padding: 0 15px;
+  border-radius: 20px;
+`;
+
+export default { CategoryTag };
diff --git a/src/components/atoms/Divider.tsx b/src/components/atoms/Divider.tsx
@@ -0,0 +1,14 @@
+import styled from "styled-components";
+import theme from "@src/styles/theme";
+
+interface DividerProps {
+  my?: string;
+}
+export const BoldDivider = styled.hr<DividerProps>`
+  border: 4px solid ${theme.color.gray1};
+  margin: ${({ my = "0" }) => my} 0;
+`;
+export const LightDivider = styled.hr<DividerProps>`
+  border: 0.5px solid ${theme.color.gray1};
+  margin: ${({ my = "0" }) => my} 0;
+`;
diff --git a/src/components/atoms/Image.tsx b/src/components/atoms/Image.tsx
@@ -0,0 +1,22 @@
+import { ImgHTMLAttributes, useCallback, useState } from "react";
+
+interface Props extends ImgHTMLAttributes<HTMLImageElement> {
+  fallback?: string;
+}
+
+Image.defaultProps = {
+  fallback:
+    "https://cdn.pixabay.com/photo/2021/09/01/16/09/cake-6591719__340.jpg",
+};
+
+function Image({ fallback, src, alt, ...props }: Props) {
+  const [imgSrc, setImgSrc] = useState<string | undefined>(src);
+  const onError = useCallback(() => setImgSrc(fallback), [fallback]);
+
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <img src={imgSrc || fallback} alt={alt} {...props} onError={onError} />
+  );
+}
+
+export default Image;
diff --git a/src/components/atoms/LinkButton.tsx → src/components/atoms/TextButton.tsx b/src/components/atoms/LinkButton.tsx → src/components/atoms/TextButton.tsx
@@ -1,11 +1,14 @@
 import styled from "styled-components";
 import theme from "@src/styles/theme";
+import { BaseProps, BaseStyleProps } from "@src/styles/common";
 
-export type TextButtonStyleProps = {
-  color: "gray" | "primary" | "white" | "black";
-};
+export interface TextButtonStyleProps extends BaseProps {
+  color?: "gray" | "primary" | "white" | "black";
+}
 
 export const TextButton = styled.button<TextButtonStyleProps>`
+  ${BaseStyleProps};
+
   background: transparent;
   border: none;
   width: 100%;

diff --git a/src/components/icon/Cake.icon.tsx b/src/components/icon/Cake.icon.tsx
@@ -0,0 +1,74 @@
+function CakeIcon() {
+  return (
+    <svg
+      width="80"
+      height="87"
+      viewBox="0 0 80 87"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1.49902 44.6918L38.9388 7.39052C40.5479 5.78744 42.8314 5.06991 44.9879 5.7573C53.7365 8.54596 70.6792 16.5191 78.4548 26.9432V40.5733V54.6937V63.3891C78.4548 66.5792 76.3066 69.3616 73.2403 70.143L10.097 86.2347C5.734 87.3466 1.49902 84.0199 1.49902 79.4807V73.8642V59.3025V44.6918Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M44.6995 6.43883C42.9766 5.89657 41.0917 6.44417 39.7164 7.79709L4.731 42.2134C22.8471 38.0211 56.9482 30.1821 76.8324 25.7959C73.0208 21.3284 67.4741 17.3215 61.7461 14.05C55.452 10.4551 49.0396 7.80482 44.6995 6.43883ZM77.7124 27.8885C56.7546 32.5071 19.4423 41.0955 2.2417 45.0821V57.3464L77.7124 39.2103V27.8885ZM77.7124 41.507L2.2417 59.6431V71.8579L77.7124 53.2945V41.507ZM77.7124 55.5942L2.2417 74.1576V78.8837C2.2417 82.6823 5.831 85.4662 9.52884 84.5357L73.2929 68.4908C75.8917 67.8369 77.7124 65.5084 77.7124 62.8388V55.5942ZM38.1411 6.20867C40.0155 4.36474 42.7425 3.48145 45.375 4.30997C49.8695 5.72454 56.4291 8.4395 62.8613 12.1132C69.2783 15.7783 75.6697 20.4545 79.7289 25.8276L79.9541 26.1257V62.8388C79.9541 66.5308 77.4361 69.7511 73.842 70.6554L10.078 86.7003C4.96392 87.9872 0 84.1371 0 78.8837V43.7294L38.1411 6.20867Z"
+        fill="black"
+      />
+      <path
+        d="M1.49902 73.9575V59.3822L78.4548 40.4767V54.6294L1.49902 73.9575Z"
+        fill="#FC1150"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M44.6995 6.43883C42.9766 5.89657 41.0917 6.44417 39.7164 7.79709L4.731 42.2134C22.8471 38.0211 56.9482 30.1821 76.8324 25.7959C73.0208 21.3284 67.4741 17.3215 61.7461 14.05C55.452 10.4551 49.0396 7.80482 44.6995 6.43883ZM77.7124 27.8885C56.7546 32.5071 19.4423 41.0955 2.2417 45.0821V57.3464L77.7124 39.2103V27.8885ZM77.7124 41.507L2.2417 59.6431V71.8579L77.7124 53.2945V41.507ZM77.7124 55.5942L2.2417 74.1576V78.8837C2.2417 82.6823 5.831 85.4662 9.52884 84.5357L73.2929 68.4908C75.8917 67.8369 77.7124 65.5084 77.7124 62.8388V55.5942ZM38.1411 6.20867C40.0155 4.36474 42.7425 3.48145 45.375 4.30997C49.8695 5.72454 56.4291 8.4395 62.8613 12.1132C69.2783 15.7783 75.6697 20.4545 79.7289 25.8276L79.9541 26.1257V62.8388C79.9541 66.5308 77.4361 69.7511 73.842 70.6554L10.078 86.7003C4.96392 87.9872 0 84.1371 0 78.8837V43.7294L38.1411 6.20867Z"
+        fill="black"
+      />
+      <path
+        d="M61.4647 17.6258C61.4647 23.3519 56.6545 25.9851 50.7209 25.9851C44.7872 25.9851 39.9771 23.3519 39.9771 17.6258C39.9771 11.8996 44.7872 0 50.7209 0C56.6545 0 61.4647 11.8996 61.4647 17.6258Z"
+        fill="#FC1150"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M57.1569 22.3411C58.5694 21.3429 59.4659 19.8565 59.4659 17.6258C59.4659 15.165 58.3856 11.0739 56.5458 7.58145C55.6357 5.85377 54.5999 4.39083 53.5288 3.38664C52.448 2.3734 51.5024 1.97982 50.7209 1.97982C49.9393 1.97982 48.9937 2.3734 47.913 3.38664C46.8418 4.39083 45.8061 5.85377 44.896 7.58145C43.0562 11.0739 41.9759 15.165 41.9759 17.6258C41.9759 19.8565 42.8723 21.3429 44.2848 22.3411C45.7822 23.3994 48.0144 24.0053 50.7209 24.0053C53.4274 24.0053 55.6596 23.3994 57.1569 22.3411ZM50.7209 25.9851C56.6545 25.9851 61.4647 23.3519 61.4647 17.6258C61.4647 11.8996 56.6545 0 50.7209 0C44.7872 0 39.9771 11.8996 39.9771 17.6258C39.9771 23.3519 44.7872 25.9851 50.7209 25.9851Z"
+        fill="black"
+      />
+      <path
+        d="M48.1465 9.72941C48.0535 10.4761 47.648 11.0404 47.2407 10.9897C46.8334 10.939 46.5786 10.2925 46.6715 9.54579C46.7645 8.79906 47.17 8.23483 47.5773 8.28554C47.9846 8.33624 48.2395 8.98269 48.1465 9.72941Z"
+        fill="#FFE871"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M48.6162 11.2367C48.363 11.589 47.8505 12.064 47.1183 11.9728C46.3862 11.8817 46.0058 11.2956 45.8467 10.892C45.6719 10.4486 45.6253 9.92868 45.6883 9.42321C45.7512 8.91774 45.9239 8.42507 46.202 8.03813C46.4552 7.68585 46.9676 7.21091 47.6998 7.30206C48.432 7.39321 48.8123 7.97931 48.9714 8.38291C49.1462 8.82623 49.1928 9.3462 49.1299 9.85167C49.0669 10.3571 48.8943 10.8498 48.6162 11.2367ZM47.2407 10.9895C47.6481 11.0402 48.0536 10.476 48.1466 9.72925C48.2395 8.98253 47.9847 8.33608 47.5774 8.28538C47.1701 8.23467 46.7645 8.7989 46.6716 9.54562C46.5786 10.2923 46.8334 10.9388 47.2407 10.9895Z"
+        fill="black"
+      />
+      <path
+        d="M51.4653 13.3497C51.5183 14.1003 51.2293 14.7322 50.8199 14.7611C50.4104 14.79 50.0356 14.205 49.9826 13.4543C49.9297 12.7037 50.2186 12.0718 50.6281 12.0429C51.0375 12.014 51.4123 12.5991 51.4653 13.3497Z"
+        fill="#FFE871"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M52.2168 14.7385C52.0363 15.1331 51.6252 15.698 50.8892 15.75C50.1532 15.8019 49.6669 15.3003 49.4328 14.935C49.1758 14.5337 49.0296 14.0326 48.9938 13.5244C48.9579 13.0163 49.0322 12.4996 49.2304 12.0662C49.4108 11.6717 49.8219 11.1068 50.5579 11.0548C51.2939 11.0029 51.7803 11.5045 52.0143 11.8698C52.2714 12.271 52.4175 12.7722 52.4534 13.2803C52.4892 13.7884 52.4149 14.3052 52.2168 14.7385ZM50.8195 14.7615C51.2289 14.7326 51.5179 14.1007 51.4649 13.3501C51.4119 12.5994 51.0371 12.0144 50.6277 12.0433C50.2182 12.0722 49.9293 12.7041 49.9822 13.4547C50.0352 14.2053 50.4101 14.7904 50.8195 14.7615Z"
+        fill="black"
+      />
+      <path
+        d="M47.1781 17.3354C47.1687 18.0878 46.8283 18.6936 46.4179 18.6885C46.0075 18.6833 45.6824 18.0692 45.6919 17.3167C45.7013 16.5643 46.0417 15.9585 46.4521 15.9637C46.8625 15.9688 47.1876 16.583 47.1781 17.3354Z"
+        fill="#FFE871"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M47.8121 18.7815C47.5996 19.1597 47.1431 19.6886 46.4053 19.6793C45.6675 19.6701 45.2244 19.1298 45.0215 18.7464C44.7986 18.3252 44.6945 17.8137 44.7009 17.3043C44.7073 16.795 44.8242 16.2862 45.0576 15.8708C45.2701 15.4925 45.7266 14.9636 46.4644 14.9729C47.2022 14.9822 47.6453 15.5224 47.8482 15.9058C48.0711 16.327 48.1752 16.8386 48.1688 17.3479C48.1624 17.8572 48.0455 18.366 47.8121 18.7815ZM46.4177 18.6885C46.8282 18.6937 47.1685 18.0879 47.178 17.3354C47.1874 16.583 46.8624 15.9689 46.452 15.9637C46.0416 15.9586 45.7012 16.5643 45.6917 17.3168C45.6823 18.0692 46.0073 18.6833 46.4177 18.6885Z"
+        fill="black"
+      />
+    </svg>
+  );
+}
+
+export default CakeIcon;
diff --git a/src/components/icon/CategoryMenu.icon.tsx b/src/components/icon/CategoryMenu.icon.tsx
@@ -0,0 +1,21 @@
+function CategoryMenuIcon() {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="4.5" y="3.5" width="23" height="25" rx="0.5" stroke="#222222" />
+      <circle cx="9" cy="9" r="1" fill="#FC1150" stroke="#222222" />
+      <path d="M12 9H24" stroke="#222222" strokeLinecap="round" />
+      <circle cx="23" cy="16" r="1" fill="#FC1150" stroke="#222222" />
+      <path d="M8 16H20" stroke="#222222" strokeLinecap="round" />
+      <circle cx="9" cy="23" r="1" fill="#FC1150" stroke="#222222" />
+      <path d="M12 23H24" stroke="#222222" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export default CategoryMenuIcon;
diff --git a/src/components/icon/ColoredCalendar.icon.tsx b/src/components/icon/ColoredCalendar.icon.tsx
@@ -0,0 +1,29 @@
+function ColoredCalendarIcon() {
+  return (
+    <svg
+      width="16"
+      height="15"
+      viewBox="0 0 16 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="0.5"
+        y="2.22223"
+        width="15"
+        height="11.4444"
+        rx="1.5"
+        stroke="#222222"
+      />
+      <path
+        d="M0.5 3.72223C0.5 2.8938 1.17157 2.22223 2 2.22223H14C14.8284 2.22223 15.5 2.8938 15.5 3.72223V5.66667H0.5V3.72223Z"
+        fill="#FC1150"
+        stroke="#222222"
+      />
+      <path d="M4 0.999939V3.99994" stroke="#222222" strokeLinecap="round" />
+      <path d="M12 0.999939V3.99994" stroke="#222222" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export default ColoredCalendarIcon;
diff --git a/src/components/icon/ColoredSearch.icon.tsx b/src/components/icon/ColoredSearch.icon.tsx
@@ -0,0 +1,26 @@
+function ColoredSearchIcon() {
+  return (
+    <svg
+      width="36"
+      height="36"
+      viewBox="0 0 36 36"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="16.3137"
+        cy="16.3137"
+        r="7"
+        transform="rotate(-45 16.3137 16.3137)"
+        stroke="#FC1150"
+        strokeWidth="2"
+      />
+      <path
+        d="M27.0919 26.7488L21.4351 21.0919"
+        stroke="#FC1150"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+}
+export default ColoredSearchIcon;
diff --git a/src/components/icon/Home.icon.tsx b/src/components/icon/Home.icon.tsx
@@ -0,0 +1,27 @@
+function HomeIcon() {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.12033 11.6168L13.9404 4.52616C15.0466 3.63683 16.6247 3.64448 17.7223 4.54448L26.3477 11.6173C27.0426 12.1871 27.4455 13.0384 27.4455 13.9371V25.5347C27.4455 27.1915 26.1023 28.5347 24.4455 28.5347H7C5.34315 28.5347 4 27.1915 4 25.5347V13.9549C4 13.0461 4.412 12.1862 5.12033 11.6168Z"
+        stroke="black"
+        strokeLinecap="round"
+      />
+      <rect
+        x="12.3569"
+        y="17.8566"
+        width="6.49973"
+        height="10.6781"
+        fill="#FA5D66"
+        stroke="black"
+      />
+    </svg>
+  );
+}
+
+export default HomeIcon;
diff --git a/src/components/icon/MyPage.icon.tsx b/src/components/icon/MyPage.icon.tsx
@@ -0,0 +1,46 @@
+function MyPageIcon() {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M21.1777 7.8132C20.2523 6.13604 18.4666 5 16.4156 5C14.3818 5 12.6089 6.11706 11.6769 7.7711C10.9935 7.46127 10.2345 7.28875 9.43523 7.28875C6.43344 7.28875 4 9.72218 4 12.724C4 15.3937 5.92487 17.6139 8.46249 18.0724V25.2579C8.46249 26.083 8.96856 26.8194 9.76303 27.042C12.1572 27.713 17.536 28.7955 23.18 27.0737C23.9725 26.8319 24.4821 26.0813 24.4821 25.2527V18.0725C27.0201 17.6143 28.9452 15.394 28.9452 12.724C28.9452 9.72218 26.5118 7.28875 23.51 7.28875C22.6752 7.28875 21.8844 7.47693 21.1777 7.8132Z"
+        fill="white"
+      />
+      <path
+        d="M21.1777 7.8132L20.7399 8.05476C20.8677 8.28632 21.1537 8.37833 21.3925 8.2647L21.1777 7.8132ZM11.6769 7.7711L11.4705 8.2265C11.7066 8.33352 11.9853 8.24237 12.1126 8.01654L11.6769 7.7711ZM8.46249 18.0724H8.96249C8.96249 17.8306 8.78939 17.6234 8.55139 17.5804L8.46249 18.0724ZM9.76303 27.042L9.6281 27.5235H9.6281L9.76303 27.042ZM23.18 27.0737L23.3259 27.5519L23.18 27.0737ZM24.4821 18.0725L24.3933 17.5805C24.1553 17.6235 23.9821 17.8306 23.9821 18.0725H24.4821ZM21.6155 7.57164C20.6056 5.74149 18.6559 4.5 16.4156 4.5V5.5C18.2772 5.5 19.8989 6.53059 20.7399 8.05476L21.6155 7.57164ZM16.4156 4.5C14.194 4.5 12.2583 5.72076 11.2413 7.52567L12.1126 8.01654C12.9595 6.51336 14.5695 5.5 16.4156 5.5V4.5ZM11.8834 7.31571C11.1363 6.97706 10.3071 6.78875 9.43523 6.78875V7.78875C10.1619 7.78875 10.8506 7.94548 11.4705 8.2265L11.8834 7.31571ZM9.43523 6.78875C6.15729 6.78875 3.5 9.44604 3.5 12.724H4.5C4.5 9.99832 6.70958 7.78875 9.43523 7.78875V6.78875ZM3.5 12.724C3.5 15.6399 5.6022 18.0637 8.37359 18.5644L8.55139 17.5804C6.24753 17.1641 4.5 15.1476 4.5 12.724H3.5ZM7.96249 18.0724V25.2579H8.96249V18.0724H7.96249ZM7.96249 25.2579C7.96249 26.2843 8.59649 27.2344 9.6281 27.5235L9.89796 26.5606C9.34062 26.4044 8.96249 25.8817 8.96249 25.2579H7.96249ZM9.6281 27.5235C12.0613 28.2054 17.5493 29.3142 23.3259 27.5519L23.0341 26.5954C17.5227 28.2768 12.253 27.2206 9.89796 26.5606L9.6281 27.5235ZM23.3259 27.5519C24.3472 27.2404 24.9821 26.2814 24.9821 25.2527H23.9821C23.9821 25.8812 23.5978 26.4235 23.0341 26.5954L23.3259 27.5519ZM24.9821 25.2527V18.0725H23.9821V25.2527H24.9821ZM28.4452 12.724C28.4452 15.1478 26.6974 17.1644 24.3933 17.5805L24.571 18.5646C27.3427 18.0641 29.4452 15.6401 29.4452 12.724H28.4452ZM23.51 7.78875C26.2357 7.78875 28.4452 9.99832 28.4452 12.724H29.4452C29.4452 9.44604 26.7879 6.78875 23.51 6.78875V7.78875ZM21.3925 8.2647C22.0336 7.95969 22.7511 7.78875 23.51 7.78875V6.78875C22.5994 6.78875 21.7353 6.99418 20.9629 7.3617L21.3925 8.2647Z"
+        fill="black"
+      />
+      <path
+        d="M24.3037 22.9556C20.3721 24.4613 16.4569 24.4647 13.5115 24.0851C12.0407 23.8956 10.8181 23.6113 9.96497 23.3751C9.53862 23.257 9.20514 23.1511 8.97977 23.0753C8.8671 23.0374 8.7815 23.007 8.72489 22.9865C8.69658 22.9762 8.67552 22.9684 8.66195 22.9633C8.65517 22.9607 8.65025 22.9588 8.64724 22.9577C8.64574 22.9571 8.64471 22.9567 8.64416 22.9565C8.64388 22.9564 8.64373 22.9563 8.64369 22.9563C8.64368 22.9563 8.64374 22.9563 8.64373 22.9563C8.64383 22.9564 8.64395 22.9564 8.46289 23.4225C8.28183 23.8886 8.28201 23.8886 8.28223 23.8887C8.28234 23.8887 8.28259 23.8888 8.28281 23.8889C8.28326 23.8891 8.28383 23.8893 8.28453 23.8896C8.28591 23.8901 8.28778 23.8908 8.29013 23.8917C8.29482 23.8935 8.30144 23.8961 8.30995 23.8993C8.32697 23.9057 8.35155 23.9148 8.38346 23.9264C8.44727 23.9496 8.54041 23.9826 8.66095 24.0231C8.902 24.1042 9.25284 24.2155 9.69809 24.3388C10.5882 24.5853 11.8579 24.8803 13.3837 25.0769C16.4313 25.4697 20.5259 25.4732 24.6613 23.8894L24.3037 22.9556Z"
+        fill="black"
+      />
+      <path
+        d="M11.2557 23.9687C11.0052 22.9481 10.88 20.7368 11.2557 18.7523"
+        stroke="black"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M21.9263 23.9687C21.9263 22.9481 21.9263 20.7368 21.9263 18.7523"
+        stroke="black"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.4727 19.4637V24.6802"
+        stroke="black"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default MyPageIcon;