v1.0.6 업데이트 (#180)

## 💡 이슈
resolve #179

## 🤩 개요
v1.0.6 업데이트

## 🧑‍💻 작업 사항
- 메인페이지 내 정보 불러오기
- ErrorBoundary 버그 수정
- 서비스 소개 컴포넌트 추가
- 500 에러 UI 변경

## 📖 참고 사항
공유할 내용, 레퍼런스, 추가로 발생할 것으로 예상되는 이슈, 스크린샷 등을 넣어 주세요.

src/api/login/index.ts

@@ -27,8 +27,9 @@ export const logout = async () => {
 export const logoutUtil = () => {
   toastSuccess({ message: '로그아웃되었습니다.' });
   deleteAccessToken();
-  queryClient.invalidateQueries(['userInfo']);
-  queryClient.invalidateQueries(queryKey.myInfo);
+  queryClient.removeQueries(['userInfo']);
+  queryClient.removeQueries(queryKey.myInfo);
+  queryClient.removeQueries(['myItemList']);
 };
 
 export const authTest = async () => {

src/components/Main/organisms/Introduction/index.tsx

@@ -0,0 +1,26 @@
+import { Star } from '@atoms/icon';
+import { Bubble } from '@atoms/icon/Bubble';
+import Span from '@atoms/Span';
+
+import $ from './style.module.scss';
+
+function Introduction() {
+  return (
+    <div className={$.introduction}>
+      <Span fontSize={20} className={$.title}>
+        re:Fashion
+      </Span>
+      <Span fontWeight={400} className={$.text}>
+        AI 기반 <Span>추천 알고리즘</Span>을 통해 상하의 코디를 매칭하고 상품
+        판매 시 <Span>AI 이미지 인식</Span>을 통해 의류를 분석하여 알찬 의류
+        정보를 제공해주는 <Span>패션 리세일 마켓</Span>입니다.
+      </Span>
+
+      <Star fill="#b3ff85" size={50} className={$['green-star']} />
+      <Bubble className={$.bubble} />
+      <Star fill="#ff61d7" size={40} className={$['pink-star']} />
+    </div>
+  );
+}
+
+export default Introduction;

src/components/Main/organisms/Introduction/style.module.scss

@@ -0,0 +1,37 @@
+.introduction {
+  position: relative;
+  left: calc(50% - 23px);
+  transform: translateX(-50%);
+  max-width: 432px;
+  padding: 23px 32px;
+  margin: 10px 23px;
+  background: $white;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+
+  .title {
+    margin-bottom: 8px;
+  }
+
+  .text {
+    line-height: 23px;
+  }
+
+  .bubble {
+    position: absolute;
+    top: -13px;
+    right: -15px;
+  }
+
+  .green-star {
+    position: absolute;
+    top: 9px;
+    right: -19px;
+  }
+
+  .pink-star {
+    position: absolute;
+    bottom: 27px;
+    left: -16px;
+  }
+}

src/components/Main/organisms/MainHeader/index.tsx

@@ -0,0 +1,37 @@
+import Link from 'next/link';
+
+import ErrorFallback from '@atoms/ErrorFallback';
+import AsyncBoundary from '@templates/AsyncBoundary';
+
+import UserDropDown from '../UserDropDown';
+import $ from './style.module.scss';
+
+function MainHeader() {
+  const LoginBtn = (
+    <Link href="/login">
+      <button type="button" aria-label="로그인 버튼" className={$.login}>
+        로그인
+      </button>
+    </Link>
+  );
+
+  const UserSkeleton = <div className={$['user-skeleton']} />;
+
+  return (
+    <div className={$['main-header']}>
+      <div className={$['main-header-wrapper']}>
+        <h1 className={$.title}>re:Fashion</h1>
+        <AsyncBoundary
+          suspenseFallback={UserSkeleton}
+          errorFallback={ErrorFallback}
+          otherRenderComponent={LoginBtn}
+          includedStatusCodes={[401, 403]}
+        >
+          <UserDropDown />
+        </AsyncBoundary>
+      </div>
+    </div>
+  );
+}
+
+export default MainHeader;

src/components/Main/molecules/MainHeader/style.module.scss → src/components/Main/organisms/MainHeader/style.module.scss

@@ -31,3 +31,10 @@
     color: $white;
   }
 }
+
+.user-skeleton {
+  width: 54px;
+  height: 32px;
+  border-radius: 19px;
+  @include loading();
+}

src/components/Main/organisms/TodayRecommend/style.module.scss

@@ -1,20 +1,17 @@
 .today-recommend {
   overflow-x: hidden;
   position: relative;
-  left: 50%;
+  left: calc(50% - 23px);
   transform: translateX(-50%);
   max-width: 500px;
   min-height: 300px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin: 71px 0 15px;
+  margin: 97px 23px 15px;
   padding-top: 20px;
   border-radius: 19px;
   background-color: rgba($second, 0.25);
-  @include mobile() {
-    border-radius: 0;
-  }
 }
 
 .circle {

src/components/Main/organisms/UserDropDown/index.tsx

@@ -0,0 +1,61 @@
+import { useRouter } from 'next/router';
+
+import { SelectArrow } from '@atoms/icon';
+import ProfileImg from '@atoms/ProfileImg';
+import Span from '@atoms/Span';
+import { IMAGE_BLUR_DATA_URL } from '@constants/img';
+import DropDown from '@molecules/DropDown';
+import { logoutUtil } from 'src/api/login';
+import { useMyUser } from 'src/hooks/api/profile';
+
+import $ from './style.module.scss';
+
+const initialProfile = {
+  name: '',
+  profileImage: IMAGE_BLUR_DATA_URL,
+  totalCount: '',
+};
+
+function UserDropDown() {
+  const router = useRouter();
+  const { data } = useMyUser();
+  const { profileImage, name } = data?.data || initialProfile;
+  const profileImgView = (
+    <ProfileImg src={profileImage} alt={name} width={28} height={28} />
+  );
+  const profileView = (
+    <div className={$.profile}>
+      {profileImgView}
+      <Span fontSize={14} className={$.name}>
+        {name}
+      </Span>
+    </div>
+  );
+
+  const options = [
+    profileView,
+    { name: '마이페이지', onClick: () => router.push('/mypage') },
+    {
+      name: '계정 정보 수정',
+      onClick: () => router.push('/mypage/setting/user'),
+    },
+    {
+      name: '로그아웃',
+      onClick: () => {
+        logoutUtil();
+        router.replace('/');
+      },
+    },
+  ];
+
+  return (
+    <DropDown options={options} name="my-menu" top="40px" right="0">
+      <div className={$['profile-container']}>
+        {profileImgView}
+        <SelectArrow className={$.arrow} stroke="#fff" />
+      </div>
+    </DropDown>
+  );
+}
+
+export default UserDropDown;

src/components/Main/organisms/UserDropDown/style.module.scss

@@ -0,0 +1,29 @@
+.profile-container {
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2px;
+  background-color: $primary;
+  border-radius: 19px;
+  cursor: pointer;
+  &:hover {
+    background-color: rgba($primary, 0.8);
+  }
+
+  .arrow {
+    width: 10px;
+    height: 8px;
+    margin-right: 6px;
+  }
+}
+
+.profile {
+  display: flex;
+  align-items: center;
+  padding: 4px;
+
+  .name {
+    margin-left: 6px;
+  }
+}

src/components/shared/atoms/ErrorFallback/index.tsx

@@ -1,18 +1,32 @@
 import { StyleProps } from '#types/props';
 import Span from '@atoms/Span';
 import classnames from 'classnames';
+import { ApiError } from 'src/api/core/error';
 
 import $ from './style.module.scss';
 
 type Props = {
-  error: Error;
+  error: Error | ApiError;
   reset: () => void;
+  otherRenderComponent?: React.ReactNode;
+  includedStatusCodes?: number[];
 } & StyleProps;
 
 function ErrorFallback(props: Props) {
   const { error, reset, className } = props;
+  const { otherRenderComponent, includedStatusCodes } = props;
 
-  return (
+  const isIncludeOtherRender = () => {
+    if ('status' in error)
+      return includedStatusCodes?.some((code) => error.status === code);
+    return false;
+  };
+
+  const otherRenderCondition = !!otherRenderComponent && isIncludeOtherRender();
+
+  return otherRenderCondition ? (
+    otherRenderComponent
+  ) : (
     <div className={classnames($['error-fallback'], className)}>
       <div className={$['error-fallback-box']}>
         <Span fontSize={14} className={$['error-msg']}>

src/components/shared/atoms/icon/Bubble.tsx

@@ -0,0 +1,22 @@
+import type { IconProps } from '#types/props';
+
+function Bubble({ className, style }: IconProps) {
+  return (
+    <svg
+      {...{ className, style }}
+      width="161"
+      height="42"
+      viewBox="0 0 161 42"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="161" height="36" rx="18" fill="#936DFF" />
+      <path d="M103 41.5V34H112.5L103 41.5Z" fill="#936DFF" />
+      <path
+        d="M20.0173 22L17.3013 14.468H19.3593L21.6133 20.95H20.6333L22.9853 14.468H24.8333L27.1153 20.95H26.1353L28.4593 14.468H30.3913L27.6613 22H25.5473L23.5453 16.442H24.1893L22.1173 22H20.0173ZM36.2647 14.356C36.862 14.356 37.394 14.4773 37.8607 14.72C38.3367 14.9533 38.71 15.3173 38.9807 15.812C39.2513 16.2973 39.3867 16.9227 39.3867 17.688V22H37.2027V18.024C37.2027 17.4173 37.0673 16.9693 36.7967 16.68C36.5353 16.3907 36.162 16.246 35.6767 16.246C35.3313 16.246 35.0187 16.3207 34.7387 16.47C34.468 16.61 34.2533 16.8293 34.0947 17.128C33.9453 17.4267 33.8707 17.8093 33.8707 18.276V22H31.6867V11.612H33.8707V16.554L33.3807 15.924C33.6513 15.42 34.0387 15.0327 34.5427 14.762C35.0467 14.4913 35.6207 14.356 36.2647 14.356ZM46.2664 22V20.53L46.1264 20.208V17.576C46.1264 17.1093 45.9817 16.7453 45.6924 16.484C45.4124 16.2227 44.9784 16.092 44.3904 16.092C43.989 16.092 43.5924 16.1573 43.2004 16.288C42.8177 16.4093 42.491 16.5773 42.2204 16.792L41.4364 15.266C41.847 14.9767 42.3417 14.7527 42.9204 14.594C43.499 14.4353 44.087 14.356 44.6844 14.356C45.8324 14.356 46.7237 14.6267 47.3584 15.168C47.993 15.7093 48.3104 16.554 48.3104 17.702V22H46.2664ZM43.9704 22.112C43.3824 22.112 42.8784 22.014 42.4584 21.818C42.0384 21.6127 41.7164 21.3373 41.4924 20.992C41.2684 20.6467 41.1564 20.2593 41.1564 19.83C41.1564 19.382 41.2637 18.99 41.4784 18.654C41.7024 18.318 42.0524 18.0567 42.5284 17.87C43.0044 17.674 43.625 17.576 44.3904 17.576H46.3924V18.85H44.6284C44.115 18.85 43.7604 18.934 43.5644 19.102C43.3777 19.27 43.2844 19.48 43.2844 19.732C43.2844 20.012 43.3917 20.236 43.6064 20.404C43.8304 20.5627 44.1337 20.642 44.5164 20.642C44.8804 20.642 45.207 20.558 45.4964 20.39C45.7857 20.2127 45.9957 19.956 46.1264 19.62L46.4624 20.628C46.3037 21.1133 46.0144 21.482 45.5944 21.734C45.1744 21.986 44.633 22.112 43.9704 22.112ZM53.647 22.112C52.7603 22.112 52.0697 21.888 51.575 21.44C51.0803 20.9827 50.833 20.306 50.833 19.41V12.802H53.017V19.382C53.017 19.6993 53.101 19.9467 53.269 20.124C53.437 20.292 53.6657 20.376 53.955 20.376C54.3003 20.376 54.5943 20.2827 54.837 20.096L55.425 21.636C55.201 21.7947 54.9303 21.916 54.613 22C54.305 22.0747 53.983 22.112 53.647 22.112ZM49.671 16.316V14.636H54.893V16.316H49.671ZM61.1758 22V14.468H63.3598V22H61.1758ZM62.2678 13.418C61.8665 13.418 61.5398 13.3013 61.2878 13.068C61.0358 12.8347 60.9098 12.5453 60.9098 12.2C60.9098 11.8547 61.0358 11.5653 61.2878 11.332C61.5398 11.0987 61.8665 10.982 62.2678 10.982C62.6691 10.982 62.9958 11.094 63.2478 11.318C63.4998 11.5327 63.6258 11.8127 63.6258 12.158C63.6258 12.522 63.4998 12.8253 63.2478 13.068C63.0051 13.3013 62.6785 13.418 62.2678 13.418ZM68.2008 22.112C67.5568 22.112 66.9361 22.0373 66.3388 21.888C65.7508 21.7293 65.2841 21.5333 64.9388 21.3L65.6668 19.732C66.0121 19.9467 66.4181 20.124 66.8848 20.264C67.3608 20.3947 67.8274 20.46 68.2848 20.46C68.7888 20.46 69.1434 20.3993 69.3488 20.278C69.5634 20.1567 69.6708 19.9887 69.6708 19.774C69.6708 19.5967 69.5868 19.466 69.4188 19.382C69.2601 19.2887 69.0454 19.2187 68.7748 19.172C68.5041 19.1253 68.2054 19.0787 67.8788 19.032C67.5614 18.9853 67.2394 18.9247 66.9128 18.85C66.5861 18.766 66.2874 18.6447 66.0168 18.486C65.7461 18.3273 65.5268 18.1127 65.3588 17.842C65.2001 17.5713 65.1208 17.2213 65.1208 16.792C65.1208 16.316 65.2561 15.896 65.5268 15.532C65.8068 15.168 66.2081 14.8833 66.7308 14.678C67.2534 14.4633 67.8788 14.356 68.6068 14.356C69.1201 14.356 69.6428 14.412 70.1748 14.524C70.7068 14.636 71.1501 14.7993 71.5048 15.014L70.7768 16.568C70.4128 16.3533 70.0441 16.2087 69.6708 16.134C69.3068 16.05 68.9521 16.008 68.6068 16.008C68.1214 16.008 67.7668 16.0733 67.5428 16.204C67.3188 16.3347 67.2068 16.5027 67.2068 16.708C67.2068 16.8947 67.2861 17.0347 67.4448 17.128C67.6128 17.2213 67.8321 17.296 68.1028 17.352C68.3734 17.408 68.6674 17.4593 68.9848 17.506C69.3114 17.5433 69.6381 17.604 69.9648 17.688C70.2914 17.772 70.5854 17.8933 70.8468 18.052C71.1174 18.2013 71.3368 18.4113 71.5048 18.682C71.6728 18.9433 71.7568 19.2887 71.7568 19.718C71.7568 20.1847 71.6168 20.6 71.3368 20.964C71.0568 21.3187 70.6508 21.5987 70.1188 21.804C69.5961 22.0093 68.9568 22.112 68.2008 22.112ZM77.6291 22V14.468H79.7151V16.596L79.4211 15.98C79.6451 15.448 80.0044 15.0467 80.4991 14.776C80.9938 14.496 81.5958 14.356 82.3051 14.356V16.372C82.2118 16.3627 82.1278 16.358 82.0531 16.358C81.9784 16.3487 81.8991 16.344 81.8151 16.344C81.2178 16.344 80.7324 16.5167 80.3591 16.862C79.9951 17.198 79.8131 17.7253 79.8131 18.444V22H77.6291ZM87.567 22.112C86.7083 22.112 85.9523 21.944 85.299 21.608C84.655 21.272 84.1557 20.8147 83.801 20.236C83.4463 19.648 83.269 18.9807 83.269 18.234C83.269 17.478 83.4417 16.8107 83.787 16.232C84.1417 15.644 84.6223 15.1867 85.229 14.86C85.8357 14.524 86.5217 14.356 87.287 14.356C88.0243 14.356 88.687 14.5147 89.275 14.832C89.8723 15.14 90.3437 15.588 90.689 16.176C91.0343 16.7547 91.207 17.45 91.207 18.262C91.207 18.346 91.2023 18.444 91.193 18.556C91.1837 18.6587 91.1743 18.7567 91.165 18.85H85.047V17.576H90.017L89.177 17.954C89.177 17.562 89.0977 17.2213 88.939 16.932C88.7803 16.6427 88.561 16.4187 88.281 16.26C88.001 16.092 87.6743 16.008 87.301 16.008C86.9277 16.008 86.5963 16.092 86.307 16.26C86.027 16.4187 85.8077 16.6473 85.649 16.946C85.4903 17.2353 85.411 17.5807 85.411 17.982V18.318C85.411 18.7287 85.4997 19.0927 85.677 19.41C85.8637 19.718 86.1203 19.956 86.447 20.124C86.783 20.2827 87.175 20.362 87.623 20.362C88.0243 20.362 88.3743 20.3013 88.673 20.18C88.981 20.0587 89.261 19.8767 89.513 19.634L90.675 20.894C90.3297 21.286 89.8957 21.5893 89.373 21.804C88.8503 22.0093 88.2483 22.112 87.567 22.112ZM93.2071 22V14.3C93.2071 13.4507 93.4591 12.774 93.9631 12.27C94.4671 11.7567 95.1857 11.5 96.1191 11.5C96.4364 11.5 96.7397 11.5327 97.0291 11.598C97.3277 11.6633 97.5797 11.766 97.7851 11.906L97.2111 13.488C97.0897 13.404 96.9544 13.3387 96.8051 13.292C96.6557 13.2453 96.4971 13.222 96.3291 13.222C96.0117 13.222 95.7644 13.3153 95.5871 13.502C95.4191 13.6793 95.3351 13.95 95.3351 14.314V15.014L95.3911 15.952V22H93.2071ZM92.0451 16.316V14.636H97.2671V16.316H92.0451ZM103.118 22V20.53L102.978 20.208V17.576C102.978 17.1093 102.834 16.7453 102.544 16.484C102.264 16.2227 101.83 16.092 101.242 16.092C100.841 16.092 100.444 16.1573 100.052 16.288C99.6697 16.4093 99.3431 16.5773 99.0724 16.792L98.2884 15.266C98.6991 14.9767 99.1937 14.7527 99.7724 14.594C100.351 14.4353 100.939 14.356 101.536 14.356C102.684 14.356 103.576 14.6267 104.21 15.168C104.845 15.7093 105.162 16.554 105.162 17.702V22H103.118ZM100.822 22.112C100.234 22.112 99.7304 22.014 99.3104 21.818C98.8904 21.6127 98.5684 21.3373 98.3444 20.992C98.1204 20.6467 98.0084 20.2593 98.0084 19.83C98.0084 19.382 98.1157 18.99 98.3304 18.654C98.5544 18.318 98.9044 18.0567 99.3804 17.87C99.8564 17.674 100.477 17.576 101.242 17.576H103.244V18.85H101.48C100.967 18.85 100.612 18.934 100.416 19.102C100.23 19.27 100.136 19.48 100.136 19.732C100.136 20.012 100.244 20.236 100.458 20.404C100.682 20.5627 100.986 20.642 101.368 20.642C101.732 20.642 102.059 20.558 102.348 20.39C102.638 20.2127 102.848 19.956 102.978 19.62L103.314 20.628C103.156 21.1133 102.866 21.482 102.446 21.734C102.026 21.986 101.485 22.112 100.822 22.112ZM109.953 22.112C109.309 22.112 108.688 22.0373 108.091 21.888C107.503 21.7293 107.036 21.5333 106.691 21.3L107.419 19.732C107.764 19.9467 108.17 20.124 108.637 20.264C109.113 20.3947 109.58 20.46 110.037 20.46C110.541 20.46 110.896 20.3993 111.101 20.278C111.316 20.1567 111.423 19.9887 111.423 19.774C111.423 19.5967 111.339 19.466 111.171 19.382C111.012 19.2887 110.798 19.2187 110.527 19.172C110.256 19.1253 109.958 19.0787 109.631 19.032C109.314 18.9853 108.992 18.9247 108.665 18.85C108.338 18.766 108.04 18.6447 107.769 18.486C107.498 18.3273 107.279 18.1127 107.111 17.842C106.952 17.5713 106.873 17.2213 106.873 16.792C106.873 16.316 107.008 15.896 107.279 15.532C107.559 15.168 107.96 14.8833 108.483 14.678C109.006 14.4633 109.631 14.356 110.359 14.356C110.872 14.356 111.395 14.412 111.927 14.524C112.459 14.636 112.902 14.7993 113.257 15.014L112.529 16.568C112.165 16.3533 111.796 16.2087 111.423 16.134C111.059 16.05 110.704 16.008 110.359 16.008C109.874 16.008 109.519 16.0733 109.295 16.204C109.071 16.3347 108.959 16.5027 108.959 16.708C108.959 16.8947 109.038 17.0347 109.197 17.128C109.365 17.2213 109.584 17.296 109.855 17.352C110.126 17.408 110.42 17.4593 110.737 17.506C111.064 17.5433 111.39 17.604 111.717 17.688C112.044 17.772 112.338 17.8933 112.599 18.052C112.87 18.2013 113.089 18.4113 113.257 18.682C113.425 18.9433 113.509 19.2887 113.509 19.718C113.509 20.1847 113.369 20.6 113.089 20.964C112.809 21.3187 112.403 21.5987 111.871 21.804C111.348 22.0093 110.709 22.112 109.953 22.112ZM119.715 14.356C120.312 14.356 120.844 14.4773 121.311 14.72C121.787 14.9533 122.16 15.3173 122.431 15.812C122.701 16.2973 122.837 16.9227 122.837 17.688V22H120.653V18.024C120.653 17.4173 120.517 16.9693 120.247 16.68C119.985 16.3907 119.612 16.246 119.127 16.246C118.781 16.246 118.469 16.3207 118.189 16.47C117.918 16.61 117.703 16.8293 117.545 17.128C117.395 17.4267 117.321 17.8093 117.321 18.276V22H115.137V11.612H117.321V16.554L116.831 15.924C117.101 15.42 117.489 15.0327 117.993 14.762C118.497 14.4913 119.071 14.356 119.715 14.356ZM125.096 22V14.468H127.28V22H125.096ZM126.188 13.418C125.787 13.418 125.46 13.3013 125.208 13.068C124.956 12.8347 124.83 12.5453 124.83 12.2C124.83 11.8547 124.956 11.5653 125.208 11.332C125.46 11.0987 125.787 10.982 126.188 10.982C126.59 10.982 126.916 11.094 127.168 11.318C127.42 11.5327 127.546 11.8127 127.546 12.158C127.546 12.522 127.42 12.8253 127.168 13.068C126.926 13.3013 126.599 13.418 126.188 13.418ZM133.171 22.112C132.368 22.112 131.654 21.944 131.029 21.608C130.413 21.272 129.923 20.8147 129.559 20.236C129.204 19.648 129.027 18.9807 129.027 18.234C129.027 17.478 129.204 16.8107 129.559 16.232C129.923 15.644 130.413 15.1867 131.029 14.86C131.654 14.524 132.368 14.356 133.171 14.356C133.964 14.356 134.674 14.524 135.299 14.86C135.924 15.1867 136.414 15.6393 136.769 16.218C137.124 16.7967 137.301 17.4687 137.301 18.234C137.301 18.9807 137.124 19.648 136.769 20.236C136.414 20.8147 135.924 21.272 135.299 21.608C134.674 21.944 133.964 22.112 133.171 22.112ZM133.171 20.32C133.535 20.32 133.862 20.236 134.151 20.068C134.44 19.9 134.669 19.662 134.837 19.354C135.005 19.0367 135.089 18.6633 135.089 18.234C135.089 17.7953 135.005 17.422 134.837 17.114C134.669 16.806 134.44 16.568 134.151 16.4C133.862 16.232 133.535 16.148 133.171 16.148C132.807 16.148 132.48 16.232 132.191 16.4C131.902 16.568 131.668 16.806 131.491 17.114C131.323 17.422 131.239 17.7953 131.239 18.234C131.239 18.6633 131.323 19.0367 131.491 19.354C131.668 19.662 131.902 19.9 132.191 20.068C132.48 20.236 132.807 20.32 133.171 20.32ZM143.619 14.356C144.216 14.356 144.748 14.4773 145.215 14.72C145.691 14.9533 146.064 15.3173 146.335 15.812C146.606 16.2973 146.741 16.9227 146.741 17.688V22H144.557V18.024C144.557 17.4173 144.422 16.9693 144.151 16.68C143.89 16.3907 143.516 16.246 143.031 16.246C142.686 16.246 142.373 16.3207 142.093 16.47C141.822 16.61 141.608 16.8293 141.449 17.128C141.3 17.4267 141.225 17.8093 141.225 18.276V22H139.041V14.468H141.127V16.554L140.735 15.924C141.006 15.42 141.393 15.0327 141.897 14.762C142.401 14.4913 142.975 14.356 143.619 14.356Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+export { Bubble };

src/components/shared/atoms/icon/SelectArrow.tsx

@@ -1,6 +1,6 @@
-import type { StyleProps } from '#types/props';
+import type { IconProps } from '#types/props';
 
-function SelectArrow({ className, style }: StyleProps) {
+function SelectArrow({ className, style, stroke }: IconProps) {
   return (
     <svg
       {...{ className, style }}
@@ -12,7 +12,7 @@ function SelectArrow({ className, style }: StyleProps) {
     >
       <path
         d="M1.92383 1L6.24098 5L10.5581 1"
-        stroke="#303030"
+        stroke={stroke || '#303030'}
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"