Skip to content

Commit

Permalink
Merge pull request #78 from wanted-fork-fork/develop
Browse files Browse the repository at this point in the history 
[Release] v0.5.2 하단 내비 선택에 따라 색상 설정
  • Loading branch information
@ooooorobo
ooooorobo authored Nov 14, 2021
2 parents fa674c2 + f42022b commit 06de12a
Show file tree
Hide file tree
Showing 10 changed files with 96 additions and 35 deletions.
24 changes: 16 additions & 8 deletions src/components/icon/CategoryMenu.icon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
function CategoryMenuIcon() {
import { useMemo } from "react";
import theme from "@src/styles/theme";

function CategoryMenuIcon({ selected }) {
const color = useMemo(
() => (selected ? theme.color.point : theme.color.black),
[selected],
);

return (
<svg
width="32"
Expand All @@ -7,13 +15,13 @@ function CategoryMenuIcon() {
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" />
<rect x="4.5" y="3.5" width="23" height="25" rx="0.5" stroke={color} />
<circle cx="9" cy="9" r="1" fill="#FC1150" stroke={color} />
<path d="M12 9H24" stroke={color} strokeLinecap="round" />
<circle cx="23" cy="16" r="1" fill="#FC1150" stroke={color} />
<path d="M8 16H20" stroke={color} strokeLinecap="round" />
<circle cx="9" cy="23" r="1" fill="#FC1150" stroke={color} />
<path d="M12 23H24" stroke={color} strokeLinecap="round" />
</svg>
);
}
Expand Down
19 changes: 15 additions & 4 deletions src/components/icon/Home.icon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,15 @@
function HomeIcon() {
import { useMemo } from "react";
import theme from "@src/styles/theme";

function HomeIcon({ selected }) {
const color = useMemo(
() => (selected ? theme.color.point : theme.color.black),
[selected],
);
const fill = useMemo(
() => (selected ? theme.color.point : "none"),
[selected],
);
return (
<svg
width="32"
Expand All @@ -9,16 +20,16 @@ function HomeIcon() {
>
<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"
stroke={color}
strokeLinecap="round"
/>
<rect
x="12.3569"
y="17.8566"
fill={fill}
width="6.49973"
height="10.6781"
fill="#FA5D66"
stroke="black"
stroke={color}
/>
</svg>
);
Expand Down
20 changes: 14 additions & 6 deletions src/components/icon/MyPage.icon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
function MyPageIcon() {
import { useMemo } from "react";
import theme from "@src/styles/theme";

function MyPageIcon({ selected }) {
const color = useMemo(
() => (selected ? theme.color.point : theme.color.black),
[selected],
);

return (
<svg
width="32"
Expand All @@ -15,27 +23,27 @@ function MyPageIcon() {
/>
<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"
fill={color}
/>
<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"
fill={color}
/>
<path
d="M11.2557 23.9687C11.0052 22.9481 10.88 20.7368 11.2557 18.7523"
stroke="black"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M21.9263 23.9687C21.9263 22.9481 21.9263 20.7368 21.9263 18.7523"
stroke="black"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M16.4727 19.4637V24.6802"
stroke="black"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
/>
Expand Down
14 changes: 11 additions & 3 deletions src/components/icon/StudyManage.icon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
function StudyManageIcon() {
import { useMemo } from "react";
import theme from "@src/styles/theme";

function StudyManageIcon({ selected }) {
const color = useMemo(
() => (selected ? theme.color.point : theme.color.black),
[selected],
);

return (
<svg
width="32"
Expand All @@ -22,7 +30,7 @@ function StudyManageIcon() {
/>
<path
d="M1.92162 11.2948L2.62873 10.5877L1.92162 11.2948ZM3.76487 9.45155L3.05776 10.1587L3.76487 9.45155ZM6.06891 11.7556L5.36181 12.4627L6.06891 13.1698L6.77602 12.4627L6.06891 11.7556ZM6.06895 11.7556L6.77606 11.0484L6.06895 10.3413L5.36184 11.0484L6.06895 11.7556ZM7.23224 11.0759L7.95624 10.3861L7.94789 10.3773L7.93934 10.3688L7.23224 11.0759ZM4.68639 8.53002L5.3935 7.82292L4.68639 8.53002ZM6.52964 6.68678L7.23674 5.97967L6.52964 6.68678ZM8.83368 8.99082L8.12657 9.69793L8.83368 10.405L9.54079 9.69793L8.83368 8.99082ZM8.83372 8.99078L9.54083 8.28368L8.83372 7.57657L8.12661 8.28368L8.83372 8.99078ZM9.75534 8.06916L9.04823 7.36206L8.34113 8.06916L9.04823 8.77627L9.75534 8.06916ZM9.75552 8.06899L10.4626 8.77609L11.1697 8.06899L10.4626 7.36188L9.75552 8.06899ZM7.45147 5.76494L8.15858 5.05783L7.45147 5.76494ZM12.3046 6.93186L11.5865 7.62772L11.592 7.63339L11.5975 7.63896L12.3046 6.93186ZM14.5561 13.7922L13.6354 13.402L13.3647 14.0406L13.8681 14.5179L14.5561 13.7922ZM14.5941 13.8292L13.887 14.5363L14.5941 13.8292ZM25.1927 24.4278L25.8999 23.7207L25.1927 24.4278ZM22.4279 27.1927L23.135 26.4856L22.4279 27.1927ZM11.8292 16.594L11.1221 17.3011L11.8292 16.594ZM11.7924 16.5562L12.518 15.8681L12.0407 15.3648L11.4021 15.6355L11.7924 16.5562ZM4.22567 13.5988L3.51856 14.3059L4.22567 13.5988ZM1.21452 8.74444C0.314993 9.64396 0.314993 11.1024 1.21452 12.0019L2.62873 10.5877C2.51026 10.4692 2.51026 10.2771 2.62873 10.1587L1.21452 8.74444ZM4.47197 8.74444C3.57245 7.84492 2.11404 7.84492 1.21452 8.74444L2.62873 10.1587C2.7472 10.0402 2.93929 10.0402 3.05776 10.1587L4.47197 8.74444ZM6.77602 11.0485L4.47197 8.74444L3.05776 10.1587L5.36181 12.4627L6.77602 11.0485ZM5.36184 11.0484L5.36181 11.0485L6.77602 12.4627L6.77606 12.4627L5.36184 11.0484ZM7.0065 11.2789L6.77606 11.0484L5.36184 12.4627L5.59229 12.6931L7.0065 11.2789ZM6.51391 11.2789C6.64993 11.1429 6.87047 11.1429 7.0065 11.2789L5.59229 12.6931C6.23731 13.3381 7.2831 13.3381 7.92812 12.6931L6.51391 11.2789ZM6.50824 11.7657C6.3779 11.6289 6.37981 11.413 6.51391 11.2789L7.92812 12.6931C8.56362 12.0576 8.57301 11.0334 7.95624 10.3861L6.50824 11.7657ZM3.97928 9.23713L6.52513 11.783L7.93934 10.3688L5.3935 7.82292L3.97928 9.23713ZM3.97928 5.97967C3.07976 6.87919 3.07976 8.33761 3.97928 9.23713L5.3935 7.82292C5.27502 7.70444 5.27502 7.51236 5.3935 7.39388L3.97928 5.97967ZM7.23674 5.97967C6.33722 5.08015 4.87881 5.08015 3.97928 5.97967L5.3935 7.39388C5.51197 7.27541 5.70406 7.27541 5.82253 7.39388L7.23674 5.97967ZM9.54079 8.28372L7.23674 5.97967L5.82253 7.39388L8.12657 9.69793L9.54079 8.28372ZM8.12661 8.28368L8.12657 8.28372L9.54079 9.69793L9.54083 9.69789L8.12661 8.28368ZM9.77127 8.51412L9.54083 8.28368L8.12661 9.69789L8.35705 9.92833L9.77127 8.51412ZM9.27868 8.51412C9.4147 8.37809 9.63524 8.37809 9.77127 8.51412L8.35705 9.92833C9.00208 10.5734 10.0479 10.5734 10.6929 9.92833L9.27868 8.51412ZM9.27868 9.00671C9.14265 8.87069 9.14265 8.65015 9.27868 8.51412L10.6929 9.92833C11.3379 9.28331 11.3379 8.23752 10.6929 7.5925L9.27868 9.00671ZM9.04823 8.77627L9.27868 9.00671L10.6929 7.5925L10.4624 7.36206L9.04823 8.77627ZM9.04841 7.36188L9.04823 7.36206L10.4624 8.77627L10.4626 8.77609L9.04841 7.36188ZM6.74437 6.47205L9.04841 8.77609L10.4626 7.36188L8.15858 5.05783L6.74437 6.47205ZM6.74437 3.21459C5.84484 4.11411 5.84484 5.57253 6.74437 6.47205L8.15858 5.05783C8.04011 4.93936 8.04011 4.74728 8.15858 4.6288L6.74437 3.21459ZM10.0018 3.21459C9.1023 2.31507 7.64389 2.31507 6.74437 3.21459L8.15858 4.6288C8.27705 4.51033 8.46914 4.51033 8.58761 4.6288L10.0018 3.21459ZM12.9971 6.20986L10.0018 3.21459L8.58761 4.6288L11.5829 7.62408L12.9971 6.20986ZM13.0228 6.23599C13.0143 6.22718 13.0057 6.21847 12.9971 6.20986L11.5829 7.62408C11.5841 7.62534 11.5853 7.62655 11.5865 7.62772L13.0228 6.23599ZM14.149 7.36199L13.0118 6.22475L11.5975 7.63896L12.7348 8.77621L14.149 7.36199ZM15.4769 14.1824C16.4348 11.9222 15.9941 9.20715 14.149 7.36199L12.7348 8.77621C13.9841 10.0256 14.2863 11.8662 13.6354 13.402L15.4769 14.1824ZM13.8681 14.5179C13.8744 14.5239 13.8807 14.53 13.887 14.5363L15.3012 13.1221C15.2824 13.1033 15.2634 13.0848 15.2442 13.0665L13.8681 14.5179ZM13.887 14.5363L24.4856 25.1349L25.8999 23.7207L15.3012 13.1221L13.887 14.5363ZM24.4856 25.1349C24.8586 25.5079 24.8586 26.1126 24.4856 26.4856L25.8999 27.8998C27.0539 26.7458 27.0539 24.8747 25.8999 23.7207L24.4856 25.1349ZM24.4856 26.4856C24.1127 26.8585 23.508 26.8585 23.135 26.4856L21.7208 27.8998C22.8748 29.0538 24.7458 29.0538 25.8999 27.8998L24.4856 26.4856ZM23.135 26.4856L12.5363 15.8869L11.1221 17.3011L21.7208 27.8998L23.135 26.4856ZM12.5363 15.8869C12.5301 15.8807 12.524 15.8744 12.518 15.8681L11.0668 17.2443C11.0849 17.2634 11.1034 17.2824 11.1221 17.3011L12.5363 15.8869ZM5.3618 16.1492C7.20707 17.9945 9.92234 18.4351 12.1827 17.4769L11.4021 15.6355C9.86623 16.2865 8.02546 15.9844 6.77602 14.735L5.3618 16.1492ZM4.20979 14.9972L5.3618 16.1492L6.77602 14.735L5.624 13.583L4.20979 14.9972ZM3.51856 14.3059L4.20979 14.9972L5.624 13.583L4.93277 12.8917L3.51856 14.3059ZM1.21452 12.0019L3.51856 14.3059L4.93277 12.8917L2.62873 10.5877L1.21452 12.0019Z"
fill="black"
fill={color}
mask="url(#path-1-inside-1_288_261)"
/>
<mask id="path-3-inside-2_288_261" fill="white">
Expand All @@ -40,7 +48,7 @@ function StudyManageIcon() {
/>
<path
d="M24.428 5.76487L23.7209 5.05776L24.428 5.76487ZM22.1239 8.06891L21.4168 7.36181L20.7097 8.06891L21.4168 8.77602L22.1239 8.06891ZM22.124 8.06895L22.8311 8.77606L23.5382 8.06895L22.8311 7.36184L22.124 8.06895ZM22.8036 9.23224L23.4934 9.95624L23.5022 9.94789L23.5108 9.93934L22.8036 9.23224ZM25.3495 6.68639L26.0566 7.3935L25.3495 6.68639ZM27.1927 8.52964L27.8998 9.23674L27.1927 8.52964ZM24.8887 10.8337L24.1816 10.1266L23.4745 10.8337L24.1816 11.5408L24.8887 10.8337ZM24.8887 10.8337L25.5958 11.5408L26.3029 10.8337L25.5958 10.1266L24.8887 10.8337ZM25.5799 11.9858L24.8728 11.2787L25.5799 11.9858ZM25.8104 11.7553L26.5175 11.0482L25.8104 10.3411L25.1032 11.0482L25.8104 11.7553ZM25.8105 11.7555L25.1034 12.4626L25.8105 13.1697L26.5176 12.4626L25.8105 11.7555ZM29.9578 11.2947L29.2507 10.5876L29.9578 11.2947ZM26.9625 14.29L27.6697 14.9971L26.9625 14.29ZM26.9477 14.3046L26.2518 13.5865L26.2461 13.592L26.2406 13.5975L26.9477 14.3046ZM25.8104 15.4419L25.1033 14.7348L25.8104 15.4419ZM20.0873 16.5561L20.4775 15.6354L19.8389 15.3647L19.3617 15.8681L20.0873 16.5561ZM6.68683 24.4279L5.97973 23.7208L6.68683 24.4279ZM17.2855 13.8292L17.9926 14.5363L17.2855 13.8292ZM17.3233 13.7924L18.0115 14.518L18.5148 14.0407L18.244 13.4021L17.3233 13.7924ZM25.1351 3.21452C24.2356 2.31499 22.7771 2.31499 21.8776 3.21452L23.2918 4.62873C23.4103 4.51026 23.6024 4.51026 23.7209 4.62873L25.1351 3.21452ZM25.1351 6.47197C26.0346 5.57245 26.0346 4.11404 25.1351 3.21452L23.7209 4.62873C23.8393 4.7472 23.8393 4.93929 23.7209 5.05776L25.1351 6.47197ZM22.831 8.77602L25.1351 6.47197L23.7209 5.05776L21.4168 7.36181L22.831 8.77602ZM22.8311 7.36184L22.831 7.36181L21.4168 8.77602L21.4169 8.77606L22.8311 7.36184ZM22.6006 9.0065L22.8311 8.77606L21.4169 7.36184L21.1864 7.59229L22.6006 9.0065ZM22.6006 8.51391C22.7367 8.64993 22.7367 8.87047 22.6006 9.0065L21.1864 7.59229C20.5414 8.23731 20.5414 9.2831 21.1864 9.92812L22.6006 8.51391ZM22.1138 8.50824C22.2506 8.3779 22.4665 8.37981 22.6006 8.51391L21.1864 9.92812C21.8219 10.5636 22.8461 10.573 23.4934 9.95624L22.1138 8.50824ZM24.6424 5.97928L22.0965 8.52513L23.5108 9.93934L26.0566 7.3935L24.6424 5.97928ZM27.8998 5.97928C27.0003 5.07976 25.5419 5.07976 24.6424 5.97928L26.0566 7.3935C26.1751 7.27502 26.3672 7.27502 26.4856 7.3935L27.8998 5.97928ZM27.8998 9.23674C28.7994 8.33722 28.7994 6.87881 27.8998 5.97928L26.4856 7.3935C26.6041 7.51197 26.6041 7.70406 26.4856 7.82253L27.8998 9.23674ZM25.5958 11.5408L27.8998 9.23674L26.4856 7.82253L24.1816 10.1266L25.5958 11.5408ZM25.5958 10.1266L25.5958 10.1266L24.1816 11.5408L24.1816 11.5408L25.5958 10.1266ZM25.3654 11.7713L25.5958 11.5408L24.1816 10.1266L23.9512 10.3571L25.3654 11.7713ZM25.3654 11.2787C25.5014 11.4147 25.5014 11.6352 25.3654 11.7713L23.9512 10.3571C23.3062 11.0021 23.3062 12.0479 23.9512 12.6929L25.3654 11.2787ZM24.8728 11.2787C25.0088 11.1427 25.2294 11.1427 25.3654 11.2787L23.9512 12.6929C24.5962 13.3379 25.642 13.3379 26.287 12.6929L24.8728 11.2787ZM25.1032 11.0482L24.8728 11.2787L26.287 12.6929L26.5175 12.4624L25.1032 11.0482ZM26.5176 11.0484L26.5175 11.0482L25.1032 12.4624L25.1034 12.4626L26.5176 11.0484ZM27.4075 8.74437L25.1034 11.0484L26.5176 12.4626L28.8217 10.1586L27.4075 8.74437ZM30.6649 8.74437C29.7654 7.84484 28.307 7.84484 27.4075 8.74437L28.8217 10.1586C28.9402 10.0401 29.1322 10.0401 29.2507 10.1586L30.6649 8.74437ZM30.6649 12.0018C31.5644 11.1023 31.5644 9.64389 30.6649 8.74437L29.2507 10.1586C29.3692 10.2771 29.3692 10.4691 29.2507 10.5876L30.6649 12.0018ZM27.6697 14.9971L30.6649 12.0018L29.2507 10.5876L26.2554 13.5829L27.6697 14.9971ZM27.6435 15.0228C27.6523 15.0143 27.661 15.0057 27.6697 14.9971L26.2554 13.5829C26.2542 13.5841 26.253 13.5853 26.2518 13.5865L27.6435 15.0228ZM26.5175 16.149L27.6548 15.0118L26.2406 13.5975L25.1033 14.7348L26.5175 16.149ZM19.6971 17.4769C21.9573 18.4348 24.6724 17.9941 26.5175 16.149L25.1033 14.7348C23.8539 15.9841 22.0133 16.2863 20.4775 15.6354L19.6971 17.4769ZM19.3617 15.8681C19.3556 15.8744 19.3495 15.8807 19.3433 15.887L20.7575 17.3012C20.7763 17.2824 20.7948 17.2634 20.813 17.2442L19.3617 15.8681ZM19.3433 15.887L8.74459 26.4856L10.1588 27.8999L20.7575 17.3012L19.3433 15.887ZM8.74459 26.4856C8.37162 26.8586 7.76691 26.8586 7.39394 26.4856L5.97973 27.8999C7.13375 29.0539 9.00479 29.0539 10.1588 27.8999L8.74459 26.4856ZM7.39394 26.4856C7.02097 26.1127 7.02097 25.508 7.39394 25.135L5.97973 23.7208C4.82571 24.8748 4.82571 26.7458 5.97973 27.8999L7.39394 26.4856ZM7.39394 25.135L17.9926 14.5363L16.5784 13.1221L5.97973 23.7208L7.39394 25.135ZM17.9926 14.5363C17.9988 14.5301 18.0051 14.524 18.0115 14.518L16.6352 13.0668C16.6161 13.0849 16.5971 13.1034 16.5784 13.1221L17.9926 14.5363ZM17.7303 7.3618C15.8851 9.20707 15.4445 11.9223 16.4027 14.1827L18.244 13.4021C17.593 11.8662 17.8951 10.0255 19.1445 8.77602L17.7303 7.3618ZM18.8823 6.20979L17.7303 7.3618L19.1445 8.77602L20.2966 7.624L18.8823 6.20979ZM19.5736 5.51856L18.8823 6.20979L20.2966 7.624L20.9878 6.93277L19.5736 5.51856ZM21.8776 3.21452L19.5736 5.51856L20.9878 6.93277L23.2918 4.62873L21.8776 3.21452Z"
fill="black"
fill={color}
mask="url(#path-3-inside-2_288_261)"
/>
</svg>
Expand Down
36 changes: 26 additions & 10 deletions src/components/organs/BottomNavigation.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import MyPageIcon from "@src/components/icon/MyPage.icon";
// styles
import styled from "styled-components";
import { BaseButton, ButtonStyleProps } from "@src/components/atoms/Button";
import { FontSize } from "@src/styles/theme";
import theme, { FontSize } from "@src/styles/theme";
import { NaviType } from "@src/constant/enum.constant";

const NavWrapper = styled.div`
display: flex;
Expand All @@ -26,32 +27,47 @@ const NavButton = styled.a<ButtonStyleProps>`
font-size: ${FontSize.Small};
}
`;
function BottomNavigationComponent() {
interface DesType {
selected: boolean;
}
const Description = styled.p<DesType>`
color: ${({ selected }) =>
selected ? theme.color.point : theme.color.black};
`;
function BottomNavigationComponent({ selected = NaviType.MAIN }) {
return (
<BottomSection height="80px">
<NavWrapper>
<Link href="/">
<NavButton type="button">
<HomeIcon />
<p>메인</p>
<HomeIcon selected={selected === NaviType.MAIN} />
<Description selected={selected === NaviType.MAIN}>
메인
</Description>
</NavButton>
</Link>
<Link href="/search">
<NavButton type="button">
<CategoryMenuIcon />
<p>카테고리</p>
<CategoryMenuIcon selected={selected === NaviType.FILTER} />
<Description selected={selected === NaviType.FILTER}>
카테고리
</Description>
</NavButton>
</Link>
<Link href="/profile/study">
<NavButton type="button">
<StudyManageIcon />
<p>스터디 관리</p>
<StudyManageIcon selected={selected === NaviType.STUDY} />
<Description selected={selected === NaviType.STUDY}>
스터디 관리
</Description>
</NavButton>
</Link>
<Link href="/profile">
<NavButton type="button">
<MyPageIcon />
<p>마이페이지</p>
<MyPageIcon selected={selected === NaviType.PROFILE} />
<Description selected={selected === NaviType.PROFILE}>
마이페이지
</Description>
</NavButton>
</Link>
</NavWrapper>
Expand Down
7 changes: 7 additions & 0 deletions src/constant/enum.constant.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,3 +71,10 @@ export const StudyManageTypeToLabel = {
[StudyManageType.MINE]: "내가 연 스터디",
[StudyManageType.OTHER]: "참여한 스터디",
};

export const NaviType = {
MAIN: "MAIN",
FILTER: "FILTER",
STUDY: "STUDY",
PROFILE: "PROFILE",
};
Loading

0 comments on commit 06de12a

Please sign in to comment.