feat: svg icon 추가

src/components/BottomNavigation/BottomNavigation.tsx

@@ -3,6 +3,7 @@ import { useRouter } from "next/navigation";
 import { colors } from "styles/theme";
 import { Route } from "src/constants/Route";
 import styled from "styled-components";
+import Icon from "../Icon";
 
 interface Props {}
 
@@ -12,34 +13,10 @@ const BottomNavigation = ({}: Props) => {
     return (
         <BottomNavigationWrapper>
             <BottomNavigationInner>
-                <div
-                    onClick={() => {
-                        router.push(Route.HOME());
-                    }}
-                >
-                    Hi
-                </div>
-                <div
-                    onClick={() => {
-                        router.push(Route.CHAT());
-                    }}
-                >
-                    Hi
-                </div>
-                <div
-                    onClick={() => {
-                        router.push(Route.MYPAGE());
-                    }}
-                >
-                    Hi
-                </div>
-                <div
-                    onClick={() => {
-                        router.push(Route.FRIEND());
-                    }}
-                >
-                    Hi
-                </div>
+                <Icon icon="Home" />
+                <Icon icon="Chat" />
+                <Icon icon="Mypage" />
+                <Icon icon="Friend" />
             </BottomNavigationInner>
         </BottomNavigationWrapper>
     );

src/components/Icon/Icon.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import * as icons from "src/components/Icon/icons";
+import styled, { css } from "styled-components";
+import { colors } from "styles/theme";
+
+interface Props {
+    icon: string;
+    width?: number;
+    height?: number;
+    margin?: string;
+    style?: any;
+
+    rotate?: number;
+    fill?: string;
+    color?: string;
+
+    onClick?: any;
+    onTouchEnd?: any;
+}
+
+const Icon = ({
+    icon,
+    width,
+    height,
+    margin,
+    style,
+
+    rotate,
+    fill,
+    color,
+
+    onClick,
+    onTouchEnd
+}: Props) => {
+    const IconComponent = icons[icon as keyof typeof icons];
+
+    return (
+        <IconWrapper
+            onClick={onClick}
+            onTouchEnd={onTouchEnd}
+            style={{ width: width, height: height, margin: margin }}
+            rotate={rotate}
+            fill={fill}
+            color={color}
+            styles={style}
+        >
+            <IconComponent />
+        </IconWrapper>
+    );
+};
+
+const IconWrapper = styled.div<{
+    width?: number;
+    height?: number;
+    rotate?: number;
+    fill?: any;
+    color?: any;
+    styles?: any;
+}>`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: ${({ width }) => width}px;
+    height: ${({ height }) => height}px;
+
+    ${({ rotate }) =>
+        rotate && {
+            transform: `rotate(${rotate}deg)`
+        }}
+    svg {
+        width: ${({ width }) => width}px;
+        height: ${({ height }) => height}px;
+
+        path {
+            stroke: ${({ color }) => colors[color]};
+            fill: ${({ fill }) => colors[fill]};
+        }
+    }
+
+    ${({ styles }) => css`
+        ${styles}
+    `}
+`;
+
+export default Icon;

src/components/Icon/icons/Alarm.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const Alarm = () => {
+    return (
+        <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M3 19.6374V18.3407H5.40521V9.50988C5.40521 7.94492 5.88796 6.55918 6.85346 5.35264C7.81898 4.14612 9.07817 3.39561 10.631 3.10109V2.28352C10.631 1.90342 10.7628 1.59448 11.0263 1.35669C11.2898 1.1189 11.6144 1 12 1C12.3856 1 12.7102 1.1189 12.9737 1.35669C13.2372 1.59448 13.369 1.90342 13.369 2.28352V3.10109C14.9218 3.39561 16.184 4.14612 17.1554 5.35264C18.1269 6.55918 18.6127 7.94492 18.6127 9.50988V18.3407H21V19.6374H3ZM12 23C11.4402 23 10.9504 22.8 10.5305 22.4C10.1107 22 9.90076 21.5114 9.90076 20.9341H14.0992C14.0992 21.5114 13.896 22 13.4896 22.4C13.0831 22.8 12.5866 23 12 23ZM6.72279 18.3407H17.2951V9.50988C17.2951 8.05639 16.7848 6.82159 15.7642 5.80547C14.7436 4.78935 13.4948 4.28129 12.0179 4.28129C10.5409 4.28129 9.28918 4.78935 8.26264 5.80547C7.23607 6.82159 6.72279 8.05639 6.72279 9.50988V18.3407Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export default Alarm;

src/components/Icon/icons/bottomNavigation/Chat.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const Chat = () => {
+    return (
+        <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M5.88889 14.3018H13.6082V13.3108H5.88889V14.3018ZM5.88889 10.6982H18.1111V9.70721H5.88889V10.6982ZM5.88889 7.09459H18.1111V6.10361H5.88889V7.09459ZM2 22V3.7117C2 3.23196 2.15687 2.82675 2.47061 2.49605C2.78435 2.16535 3.16879 2 3.62392 2H20.3761C20.8312 2 21.2156 2.16535 21.5294 2.49605C21.8431 2.82675 22 3.23196 22 3.7117V16.6847C22 17.1644 21.8431 17.5696 21.5294 17.9003C21.2156 18.231 20.8312 18.3964 20.3761 18.3964H5.41881L2 22ZM5.00711 17.4054H20.3761C20.547 17.4054 20.7037 17.3303 20.8462 17.1802C20.9886 17.03 21.0598 16.8649 21.0598 16.6847V3.7117C21.0598 3.53151 20.9886 3.36635 20.8462 3.2162C20.7037 3.06606 20.547 2.99099 20.3761 2.99099H3.62392C3.45297 2.99099 3.29628 3.06606 3.15383 3.2162C3.01139 3.36635 2.94017 3.53151 2.94017 3.7117V19.6389L5.00711 17.4054Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export default Chat;

src/components/Icon/icons/bottomNavigation/Friend.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const Friend = () => {
+    return (
+        <svg
+            width="30"
+            height="24"
+            viewBox="0 0 30 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M15.1604 11.1534C15.6828 10.5045 16.0582 9.81879 16.2867 9.09624C16.5151 8.37367 16.6294 7.55629 16.6294 6.6441C16.6294 5.73191 16.5151 4.91678 16.2867 4.19869C16.0582 3.48063 15.6828 2.79717 15.1604 2.1483C16.6052 1.8589 17.8621 2.13436 18.931 2.97467C20 3.81497 20.5345 5.04035 20.5345 6.65083C20.5345 8.26131 20 9.48446 18.931 10.3203C17.8621 11.1561 16.6052 11.4338 15.1604 11.1534ZM22.1251 22V19.3794C22.1251 18.3511 21.894 17.3966 21.432 16.5159C20.9699 15.6353 20.1553 14.9029 18.988 14.3187C22.0207 14.7429 24.1324 15.3738 25.3229 16.2114C26.5134 17.049 27.1086 18.105 27.1086 19.3794V22H22.1251ZM25.2931 12.5716V9.2553H22.1121V7.66462H25.2931V4.34836H26.819V7.66462H30V9.2553H26.819V12.5716H25.2931ZM9.96338 11.3017C8.66469 11.3017 7.59757 10.8639 6.762 9.9883C5.92645 9.11273 5.50868 7.99799 5.50868 6.6441C5.50868 5.29019 5.92645 4.17769 6.762 3.3066C7.59757 2.43553 8.66469 2 9.96338 2C11.2621 2 12.3314 2.43553 13.1712 3.3066C14.0111 4.17769 14.4311 5.29019 14.4311 6.6441C14.4311 7.99799 14.0111 9.11273 13.1712 9.9883C12.3314 10.8639 11.2621 11.3017 9.96338 11.3017ZM3.36024e-05 22V19.3389C3.36024e-05 18.6379 0.1858 17.9949 0.557333 17.4098C0.928889 16.8248 1.43191 16.3822 2.06641 16.082C3.55951 15.3972 4.92201 14.8957 6.1539 14.5775C7.38581 14.2594 8.65564 14.1003 9.96338 14.1003C11.2711 14.1003 12.5354 14.2594 13.7561 14.5775C14.9768 14.8957 16.338 15.3972 17.8397 16.082C18.4656 16.3822 18.9699 16.8248 19.3526 17.4098C19.7354 17.9949 19.9268 18.6379 19.9268 19.3389V22H3.36024e-05ZM9.96986 9.71098C10.8095 9.71098 11.5086 9.41979 12.0673 8.8374C12.6259 8.25503 12.9052 7.52617 12.9052 6.65083C12.9052 5.77549 12.6259 5.04664 12.0673 4.46427C11.5086 3.8819 10.8073 3.59071 9.96338 3.59071C9.11942 3.59071 8.42029 3.8819 7.86597 4.46427C7.31165 5.04664 7.03449 5.77549 7.03449 6.65083C7.03449 7.52617 7.31141 8.25503 7.86523 8.8374C8.41906 9.41979 9.1206 9.71098 9.96986 9.71098ZM1.52585 20.4093H18.4009V19.3389C18.4009 18.9756 18.3027 18.63 18.1061 18.3021C17.9095 17.9742 17.6078 17.7078 17.2009 17.5028C15.8009 16.818 14.5557 16.3448 13.4653 16.0833C12.3749 15.8218 11.2076 15.691 9.96338 15.691C8.71918 15.691 7.55533 15.8218 6.47182 16.0833C5.3883 16.3448 4.13276 16.818 2.70517 17.5028C2.32586 17.6934 2.03448 17.9558 1.83103 18.2901C1.62757 18.6245 1.52585 18.9741 1.52585 19.3389V20.4093Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export default Friend;

src/components/Icon/icons/bottomNavigation/Home.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const Home = () => {
+    return (
+        <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M4.08791 20.9127H9.13186V13.252H14.8681V20.9127H19.9121V9.05107L12 3.06261L4.08791 9.04557V20.9127ZM4.08791 22C3.79779 22 3.54394 21.8913 3.32638 21.6738C3.10879 21.4564 3 21.2027 3 20.9127V9.05107C3 8.88194 3.03541 8.72172 3.10623 8.57041C3.17705 8.4191 3.28725 8.29376 3.43682 8.19438L11.3489 2.20592C11.4526 2.13454 11.5583 2.08237 11.6661 2.04941C11.7739 2.01647 11.8861 2 12.0029 2C12.1197 2 12.2314 2.01647 12.3381 2.04941C12.4449 2.08237 12.5492 2.13454 12.6511 2.20592L20.5632 8.19438C20.7127 8.29376 20.8229 8.4191 20.8938 8.57041C20.9646 8.72172 21 8.88194 21 9.05107V20.9127C21 21.2027 20.8912 21.4564 20.6736 21.6738C20.4561 21.8913 20.2022 22 19.9121 22H13.7802V14.3394H10.2198V22H4.08791Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export default Home;

src/components/Icon/icons/bottomNavigation/Mypage.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const Mypage = () => {
+    return (
+        <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M12 11.0447C10.8214 11.0447 9.83081 10.6581 9.02814 9.88494C8.2255 9.11179 7.82418 8.15465 7.82418 7.0135C7.82418 5.87238 8.2255 4.91818 9.02814 4.15091C9.83081 3.38364 10.8214 3 12 3C13.1786 3 14.1692 3.38364 14.9719 4.15091C15.7745 4.91818 16.1758 5.87238 16.1758 7.0135C16.1758 8.15465 15.7745 9.11179 14.9719 9.88494C14.1692 10.6581 13.1786 11.0447 12 11.0447ZM20.7363 21H3.26371C2.91421 21 2.61621 20.8813 2.36971 20.6438C2.12324 20.4064 2 20.1194 2 19.7827V18.9183C2 18.3243 2.1775 17.7855 2.5325 17.3018C2.8875 16.8181 3.35713 16.4413 3.94139 16.1714C5.33211 15.5639 6.69456 15.1054 8.02875 14.7958C9.36292 14.4862 10.6865 14.3313 11.9994 14.3313C13.3124 14.3313 14.6352 14.487 15.968 14.7984C17.3007 15.1098 18.659 15.5701 20.0431 16.1795C20.6405 16.4464 21.116 16.8211 21.4696 17.3036C21.8232 17.7861 22 18.3243 22 18.9183V19.7827C22 20.1194 21.8768 20.4064 21.6303 20.6438C21.3838 20.8813 21.0858 21 20.7363 21ZM3.20879 19.8356H20.7912V18.9183C20.7912 18.5836 20.6757 18.2637 20.4446 17.9585C20.2135 17.6533 19.8962 17.3987 19.4927 17.1946C18.2436 16.6083 17.0013 16.1786 15.7659 15.9055C14.5305 15.6323 13.2752 15.4957 12 15.4957C10.7248 15.4957 9.4646 15.6323 8.21943 15.9055C6.97424 16.1786 5.73504 16.6083 4.50182 17.1946C4.09827 17.3987 3.78188 17.6533 3.55264 17.9585C3.3234 18.2637 3.20879 18.5836 3.20879 18.9183V19.8356ZM12 9.88033C12.8321 9.88033 13.5347 9.60438 14.1076 9.05248C14.6806 8.50057 14.967 7.82385 14.967 7.02234C14.967 6.22081 14.6806 5.54409 14.1076 4.9922C13.5347 4.4403 12.8321 4.16436 12 4.16436C11.1679 4.16436 10.4653 4.4403 9.89239 4.9922C9.31944 5.54409 9.03296 6.22081 9.03296 7.02234C9.03296 7.82385 9.31944 8.50057 9.89239 9.05248C10.4653 9.60438 11.1679 9.88033 12 9.88033Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export default Mypage;

src/components/Icon/icons/index.ts

@@ -0,0 +1,7 @@
+export { default as Alarm } from "./Alarm";
+
+// bottom navigation
+export { default as Home } from "./bottomNavigation/Home";
+export { default as Chat } from "./bottomNavigation/Chat";
+export { default as Mypage } from "./bottomNavigation/Mypage";
+export { default as Friend } from "./bottomNavigation/Friend";

src/components/Icon/index.ts

@@ -0,0 +1 @@
+export { default } from "./Icon";

src/components/pages/home/HomeTitle.tsx

@@ -6,6 +6,8 @@ import { Route } from "src/constants/Route";
 import { useAppDispatch } from "src/hooks/useReduxHooks";
 import { changeVisibleType } from "src/reducer/slices/bottomSheet/bottomSheetSlice";
 import styled from "styled-components";
+import Icon from "src/components/Icon";
+import Text from "src/components/common/Text";
 
 const HomeTitle = ({}: {}) => {
     const router = useRouter();
@@ -34,15 +36,23 @@ const HomeTitle = ({}: {}) => {
                     />
                 </ImageWrapper>
             </Menu>
-            <div style={{ display: "flex", gap: "24px" }}>
-                <Menu onClick={handleClickCoin}>
-                    <div>코인충전</div>
-                </Menu>
-                <Menu>
-                    <div>질문추천</div>
-                </Menu>
+            <div style={{ display: "flex", margin: "auto 0", gap: "24px" }}>
+                <Text
+                    typo="Caption1b"
+                    color="light_qwhite"
+                    onClick={handleClickCoin}
+                >
+                    코인충전
+                </Text>
+                <Text
+                    typo="Caption1b"
+                    color="light_qwhite"
+                    onClick={handleClickAlarm}
+                >
+                    질문추천
+                </Text>
                 <Menu onClick={handleClickAlarm}>
-                    <div>svg</div>
+                    <Icon icon="Alarm" />
                 </Menu>
             </div>
         </HomeTitleWrapper>

styles/theme/colors.tsx

@@ -6,7 +6,7 @@ const hexToRGBA = (color: string, opacity: number) => {
     return `rgba(${r}, ${g}, ${b}, ${opacity * 0.01})`;
 };
 
-export const colors = {
+export const colors: any = {
     primary_qyellow: "#EEF619",
     primary_qpink: "#FE98CA",
     primary_qorange: "#FF812F",