Merge pull request #282 from prgrms-web-devcourse-final-project/chore/#…

…279 chore: CategoryGrid 디자인 적용
J1P5 · Dec 7, 2024 · a6c7144 · a6c7144
2 parents b4b0516 + bd4d93f
commit a6c7144
Show file tree

Hide file tree

Showing 35 changed files with 366 additions and 78 deletions.
diff --git a/src/assets/LoginButton/kakao.svg b/src/assets/LoginButton/kakao.svg
diff --git a/src/assets/Map/default_marker.svg b/src/assets/Map/default_marker.svg
diff --git a/src/assets/Map/my_marker.svg b/src/assets/Map/my_marker.svg
diff --git a/src/assets/ProfileRegistrationForm/profile_upload.svg b/src/assets/ProfileRegistrationForm/profile_upload.svg
diff --git a/src/components/atoms/Icon/ChatIcon/index.tsx b/src/components/atoms/Icon/ChatIcon/index.tsx
@@ -1,13 +1,58 @@
 import { type IIconProps, IconWrapper } from "../styled";
-import { FiMessageSquare } from "react-icons/fi";
 
 /**
  * 채팅 아이콘
  */
-export const ChatIcon = ({ size = "m" }: IIconProps) => {
+export const ChatIcon = ({ size = "m", color }: IIconProps) => {
   return (
     <IconWrapper size={size}>
-      <FiMessageSquare />
+      {/* fill 옵션만 줘서 1개로 사용하고 싶었는데 svg 형태 자체가 좋은 형태가 아니라서 fill 준 경우 이상하게 나와 svg 2개 사용했습니다. */}
+      {color ? (
+        <svg
+          width="30"
+          height="30"
+          viewBox="0 0 30 30"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M25.2923 19.5445C25.9067 18.1547 26.2479 16.6172 26.2479 15C26.2479 8.7868 21.2115 3.75 14.9989 3.75C8.78632 3.75 3.75 8.7868 3.75 15C3.75 21.2132 8.78632 26.25 14.9989 26.25C16.9991 26.25 18.8774 25.7279 20.5049 24.8125L26.25 26.2489L25.2923 19.5445Z"
+            fill="#344FFF"
+          />
+          <path
+            d="M9.37447 15.1057V15M14.9989 15.1057V15M20.6234 15.1057V15M26.2479 15C26.2479 16.6172 25.9067 18.1547 25.2923 19.5445L26.25 26.2489L20.5049 24.8125C18.8774 25.7279 16.9991 26.25 14.9989 26.25C8.78632 26.25 3.75 21.2132 3.75 15C3.75 8.7868 8.78632 3.75 14.9989 3.75C21.2115 3.75 26.2479 8.7868 26.2479 15Z"
+            stroke="#344FFF"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M9.37451 15.1057V15M14.999 15.1057V15M20.6234 15.1057V15"
+            stroke="white"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      ) : (
+        <svg
+          width="30"
+          height="30"
+          viewBox="0 0 30 30"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M9.37447 15.1057V15M14.9989 15.1057V15M20.6234 15.1057V15M26.2479 15C26.2479 16.6172 25.9067 18.1547 25.2923 19.5445L26.25 26.2489L20.5049 24.8125C18.8774 25.7279 16.9991 26.25 14.9989 26.25C8.78632 26.25 3.75 21.2132 3.75 15C3.75 8.7868 8.78632 3.75 14.9989 3.75C21.2115 3.75 26.2479 8.7868 26.2479 15Z"
+            stroke="#9B9FBC"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      )}
+
+      {/* <FiMessageSquare /> */}
     </IconWrapper>
   );
 };
diff --git a/src/components/atoms/Icon/HomeIcon/index.tsx b/src/components/atoms/Icon/HomeIcon/index.tsx
@@ -1,13 +1,25 @@
 import { type IIconProps, IconWrapper } from "../styled";
-import { FiHome } from "react-icons/fi";
 
 /**
  * Home 아이콘
  */
-export const HomeIcon = ({ size = "m" }: IIconProps) => {
+export const HomeIcon = ({ size = "m", color }: IIconProps) => {
   return (
     <IconWrapper size={size}>
-      <FiHome />
+      {/* <FiHome /> */}
+      <svg
+        width="30"
+        height="30"
+        viewBox="0 0 30 30"
+        fill={color ? "#344FFF" : "none"}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M3.75 11.7701C3.75 11.3083 3.98502 10.8751 4.38071 10.6075L14.1307 4.01396C14.6512 3.66201 15.3488 3.66201 15.8693 4.01397L25.6193 10.6075C26.015 10.8751 26.25 11.3083 26.25 11.7701V24.1103C26.25 25.292 25.2426 26.25 24 26.25H6C4.75736 26.25 3.75 25.292 3.75 24.1103V11.7701Z"
+          stroke={color ? "#344FFF" : "#9B9FBC"}
+          strokeWidth="1.40625"
+        />
+      </svg>
     </IconWrapper>
   );
 };
diff --git a/src/components/atoms/Icon/MarketPriceIcon/index.tsx b/src/components/atoms/Icon/MarketPriceIcon/index.tsx
@@ -1,13 +1,27 @@
 import { type IIconProps, IconWrapper } from "../styled";
-import { FiDollarSign } from "react-icons/fi";
 
 /**
  * 시세조회 아이콘
  */
-export const MarketPriceIcon = ({ size = "m" }: IIconProps) => {
+export const MarketPriceIcon = ({ size = "m", color }: IIconProps) => {
   return (
     <IconWrapper size={size}>
-      <FiDollarSign />
+      {/* <FiDollarSign /> */}
+      <svg
+        width="30"
+        height="30"
+        viewBox="0 0 30 30"
+        fill={color ? "#344FFF" : "none"}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.749 4.97103C14.2537 3.73914 16.1774 3 18.2738 3C23.0937 3 27.0011 6.90733 27.0011 11.7273C27.0011 13.8227 26.2626 15.7456 25.0317 17.25M20.4536 18.2727C20.4536 23.0927 16.5462 27 11.7263 27C6.90636 27 2.99902 23.0927 2.99902 18.2727C2.99902 13.4528 6.90636 9.54545 11.7263 9.54545C16.5462 9.54545 20.4536 13.4528 20.4536 18.2727Z"
+          stroke={color ? "#344FFF" : "#9B9FBC"}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
     </IconWrapper>
   );
 };
diff --git a/src/components/atoms/Icon/MyPageIcon/index.tsx b/src/components/atoms/Icon/MyPageIcon/index.tsx
@@ -1,13 +1,58 @@
 import { type IIconProps, IconWrapper } from "../styled";
-import { FiUser } from "react-icons/fi";
 
 /**
  * 마이페이지 아이콘
  */
-export const MyPageIcon = ({ size = "m" }: IIconProps) => {
+export const MyPageIcon = ({ size = "m", color }: IIconProps) => {
   return (
     <IconWrapper size={size}>
-      <FiUser />
+      {/* <FiUser /> */}
+      {/* fill 옵션만 줘서 1개로 사용하고 싶었는데 svg 형태 자체가 좋은 형태가 아니라서 fill 준 경우 이상하게 나와 svg 2개 사용했습니다. */}
+      {color ? (
+        <svg
+          width="30"
+          height="30"
+          viewBox="0 0 30 30"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M15 27C21.6274 27 27 21.6274 27 15C27 8.37258 21.6274 3 15 3C8.37258 3 3 8.37258 3 15C3 21.6274 8.37258 27 15 27Z"
+            fill="#344FFF"
+            stroke="#9B9FBC"
+            strokeWidth="1.5"
+          />
+          <path
+            d="M11.4276 28.3316L8.29683 27.4108C6.31735 26.8286 5.84934 24.238 7.5 23C9.44985 21.3751 11.864 20.4091 14.3965 20.2402L15.1808 20.1879C17.0211 20.0653 18.8577 20.4765 20.4699 21.3722L21.4848 21.936C22.152 22.3066 22.7209 22.8313 23.1442 23.4663L23.2684 23.6526C23.4221 23.8832 23.5444 24.1332 23.632 24.3961C24.305 26.4151 22.8023 28.5 20.6741 28.5H12.5967C12.2009 28.5 11.8072 28.4433 11.4276 28.3316Z"
+            fill="white"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M19.2985 10.9099C19.2985 8.62056 17.3659 6.75 15.0004 6.75C12.6349 6.75 10.7022 8.62056 10.7022 10.9099C10.7022 13.1993 12.6349 15.0699 15.0004 15.0699C17.3658 15.0699 19.2985 13.1993 19.2985 10.9099Z"
+            fill="white"
+          />
+          <path
+            d="M5.75 25C6.32646 24.3544 10.0263 20.3833 10.8175 20.3833H15.0003H19.183C20.3295 20.3833 23.67 23.8461 24.25 24.7142M19.2985 10.9099C19.2985 8.62056 17.3659 6.75 15.0004 6.75C12.6349 6.75 10.7022 8.62056 10.7022 10.9099C10.7022 13.1993 12.6349 15.0699 15.0004 15.0699C17.3658 15.0699 19.2985 13.1993 19.2985 10.9099Z"
+            stroke="white"
+            strokeWidth="1.5"
+          />
+        </svg>
+      ) : (
+        <svg
+          width="30"
+          height="30"
+          viewBox="0 0 30 30"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.75 24C7.32646 23.3544 10.0263 20.3833 10.8175 20.3833H19.183C20.3295 20.3833 22.67 22.8461 23.25 23.7142M27 15C27 21.6274 21.6274 27 15 27C8.37258 27 3 21.6274 3 15C3 8.37258 8.37258 3 15 3C21.6274 3 27 8.37258 27 15ZM19.2985 10.9099C19.2985 8.62056 17.3659 6.75 15.0004 6.75C12.6349 6.75 10.7022 8.62056 10.7022 10.9099C10.7022 13.1993 12.6349 15.0699 15.0004 15.0699C17.3658 15.0699 19.2985 13.1993 19.2985 10.9099Z"
+            stroke="#9B9FBC"
+            strokeWidth="1.5"
+          />
+        </svg>
+      )}
     </IconWrapper>
   );
 };
diff --git a/src/components/atoms/Icon/SendIcon/index.tsx b/src/components/atoms/Icon/SendIcon/index.tsx
@@ -20,8 +20,8 @@ export const SendIcon = ({ size = "m" }: IIconProps) => {
         <path
           d="M18.9476 3.23545L9.17225 13.0108M2.63151 8.09899L17.8536 2.81787C18.791 2.49264 19.6904 3.39201 19.3651 4.32942L14.084 19.5515C13.7222 20.5943 12.2579 20.6229 11.8556 19.595L9.43848 13.4178C9.31776 13.1093 9.07368 12.8652 8.76517 12.7445L2.588 10.3274C1.56011 9.92515 1.5887 8.46079 2.63151 8.09899Z"
           stroke="white"
-          stroke-width="1.5"
-          stroke-linecap="round"
+          strokeWidth="1.5"
+          strokeLinecap="round"
         />
       </svg>
     </IconWrapper>

diff --git a/src/components/atoms/Icon/styled.ts b/src/components/atoms/Icon/styled.ts
@@ -3,6 +3,7 @@ import styled from "@emotion/styled";
 export interface IIconProps {
   /** 아이콘의 사이즈 */
   size?: "s" | "m" | "l";
+  color?: string;
 }
 
 export const IconSizes = {
@@ -14,8 +15,9 @@ export const IconSizes = {
 /**
  * 아이콘 공통 스타일
  */
-export const IconWrapper: ReturnType<typeof styled.i<IIconProps>> =
-  styled.i<IIconProps>`
-    line-height: 0;
-    font-size: ${(props) => IconSizes[props.size!]};
-  `;
+export const IconWrapper: ReturnType<
+  typeof styled.i<IIconProps>
+> = styled.i<IIconProps>`
+  line-height: 0;
+  font-size: ${(props) => IconSizes[props.size!]};
+`;