feat: Home MVP v.2 (#140)

* feat: 진행중인 질문 영역

* feat: 홈 이전 질문

* feat: 멤버 프로필

* feat: 홈 지면 SSR 적용

* chore: eslint fix

* feat: 이전 질문 UI

* feat: 홈 지면 마크업

* refactor: 리뷰 반영

* feat: api 연동

* refactor: home 공통 컴포넌트 components 밑으로 이동

* chore: gitignore 수정

* feat: 홈 지면 api 연동

* chore: tsconfig

* feat: dialog 마크업

* chore: api 쿠키 셋 제거

* feat: api 연동 구체화

* feat: 알림 기능 구현

* feat: 질문 답변 지면 (#75)

* feat: 답변 오프닝 UI

* feat: 답변 클로징 UI

* fix: type error fix

* fix: 디자인 수정건 반영

* chore: temp

* feat: 질문 답변 페이지

* chore: 릴레이 질문 CTA 버튼 노출 조건 수정

* fix: type error

* feat: 질문 답변 영역

* feat: 홈지면 라우팅 연결

* chore: console 제거

* feat: 질문 답변 api 연동

* chore: eslint

* fix: 버튼 Link 위계 변경

* fix: fix common name

* chore: 환경 변수 변경

* fix: 릴레이 질문 도착 모달 버튼 수정

* feat: 질문 답변 기능

* feat: root 접근시 auth 로 Redirect

* chore: tsconfig

* feat: 홈지면 prefetch

* feat: 질문 답변 지면 prefetch

* feat: 질문 결과 라우팅 수정

* feat: 질문 답변후 invalidate

* fix: 답변완료 비율 최대 100으로 한정

* feat: StaleTime 0 설정

* feat: 카톡 공유하기

* fix: 폴링 invalidate 제거

* feat: 답변완료시 답변페이지로 이동버튼 제거

* fix: meetings 스키마 변경

* fix: 질문 등록 버튼 노출 의존성 변경

* feat: home 네비게이터 아이콘 추가

* feat: 홈 내비게이션 탭 구현

* feat: 모임원 목록 검색 기능

* feat: 카카오톡 초대 모달

* feat: 마이 탭 화면

* feat: 알림탭 UI

* feat: 모임 이름 선택 UI 추가

* feat: 홈, 알림, 질문, 마이 탭 UI

* feat: 바텀싯

* chore: type error fix

* feat: 서로 꼭찌르기 여부 조건 추가

* refactor: home Atoms namespace 정의

* fix: 서로 인사하기 이슈 수정

* fix: bottomsheet 하단 padding 추가

* feat: 모임원 목록 초대링크 공유 기능

* feat: 멀티 meeting ID

* feat: 미팅 변경 대응

* feat: 알림 탭

* fix: 알림, 플로팅 버튼 버그 픽스

* refactor: 알림 탭 네이밍 변경

* fix: 질문 종료 공유 링크 수정

* fix: 질문 시작 meetingId params 추가

* fix: 유저 프로필 링크 변경

* fix: relative path about start question

* fix: fix link question result

* chore: lodash -> lodash-es

* feat: 마이프로필

apps/web/app/home/me/modify/page.tsx

@@ -0,0 +1,8 @@
+import HomeMeScreen from '../page';
+
+export const dynamic = 'force-dynamic';
+
+const HomeMeModifyPage = () => {
+  return <HomeMeScreen />;
+};
+export default HomeMeModifyPage;

apps/web/app/home/me/page.tsx

@@ -0,0 +1,5 @@
+import { HomeMeScreen } from '@/home';
+
+export const dynamic = 'force-dynamic';
+
+export default HomeMeScreen;

apps/web/app/home/notification/page.tsx

@@ -0,0 +1,5 @@
+import { AlarmScreen } from '@/home';
+
+export const dynamic = 'force-dynamic';
+
+export default AlarmScreen;

apps/web/app/home/question/page.tsx

@@ -0,0 +1,5 @@
+import { QuestionScreen } from '@sambad/web-domains/home';
+
+export const dynamic = 'force-dynamic';
+
+export default QuestionScreen;

package.json

@@ -18,12 +18,14 @@
     "@tanstack/react-query": "^5.50.1",
     "dayjs": "^1.11.12",
     "jotai": "^2.9.1",
+    "lodash-es": "^4.17.21",
     "next": "14.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@turbo/gen": "^1.12.4",
+    "@types/lodash-es": "^4.17.12",
     "cspell": "^8.10.0",
     "husky": "^9.0.11",
     "prettier": "^3.2.5",

packages/core/sds/src/components/Icon/assets/AddMeeting.tsx

@@ -0,0 +1,21 @@
+import { IconAssetProps } from '../types';
+
+export const AddMeeting = (props: IconAssetProps) => {
+  const { size } = props;
+
+  return (
+    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_5317_18341)">
+        <path
+          d="M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433286 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C19.9971 7.34872 18.9426 4.80684 17.0679 2.9321C15.1932 1.05736 12.6513 0.00286757 10 0V0ZM10 18.3333C8.35183 18.3333 6.74066 17.8446 5.37025 16.9289C3.99984 16.0132 2.93174 14.7117 2.30101 13.189C1.67028 11.6663 1.50525 9.99076 1.82679 8.37425C2.14834 6.75774 2.94201 5.27288 4.10745 4.10744C5.27289 2.94201 6.75774 2.14833 8.37425 1.82679C9.99076 1.50525 11.6663 1.67027 13.189 2.301C14.7118 2.93173 16.0132 3.99984 16.9289 5.37025C17.8446 6.74066 18.3333 8.35182 18.3333 10C18.3309 12.2094 17.4522 14.3276 15.8899 15.8899C14.3276 17.4522 12.2094 18.3309 10 18.3333ZM14.1667 10C14.1667 10.221 14.0789 10.433 13.9226 10.5893C13.7663 10.7455 13.5544 10.8333 13.3333 10.8333H10.8333V13.3333C10.8333 13.5543 10.7455 13.7663 10.5893 13.9226C10.433 14.0789 10.221 14.1667 10 14.1667C9.77899 14.1667 9.56703 14.0789 9.41075 13.9226C9.25447 13.7663 9.16667 13.5543 9.16667 13.3333V10.8333H6.66667C6.44566 10.8333 6.2337 10.7455 6.07742 10.5893C5.92113 10.433 5.83334 10.221 5.83334 10C5.83334 9.77899 5.92113 9.56703 6.07742 9.41074C6.2337 9.25447 6.44566 9.16667 6.66667 9.16667H9.16667V6.66667C9.16667 6.44565 9.25447 6.23369 9.41075 6.07741C9.56703 5.92113 9.77899 5.83333 10 5.83333C10.221 5.83333 10.433 5.92113 10.5893 6.07741C10.7455 6.23369 10.8333 6.44565 10.8333 6.66667V9.16667H13.3333C13.5544 9.16667 13.7663 9.25447 13.9226 9.41074C14.0789 9.56703 14.1667 9.77899 14.1667 10Z"
+          fill="black"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5317_18341">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

packages/core/sds/src/components/Icon/assets/AddUser.tsx

@@ -0,0 +1,29 @@
+import { IconAssetProps } from '../types';
+
+export const AddUser = (props: IconAssetProps) => {
+  const { size } = props;
+
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_4950_43154)">
+        <path
+          d="M22.9997 11H20.9997V9C20.9997 8.73478 20.8944 8.48043 20.7069 8.29289C20.5193 8.10536 20.265 8 19.9997 8C19.7345 8 19.4802 8.10536 19.2926 8.29289C19.1051 8.48043 18.9998 8.73478 18.9998 9V11H16.9998C16.7345 11 16.4802 11.1054 16.2926 11.2929C16.1051 11.4804 15.9998 11.7348 15.9998 12C15.9998 12.2652 16.1051 12.5196 16.2926 12.7071C16.4802 12.8946 16.7345 13 16.9998 13H18.9998V15C18.9998 15.2652 19.1051 15.5196 19.2926 15.7071C19.4802 15.8946 19.7345 16 19.9997 16C20.265 16 20.5193 15.8946 20.7069 15.7071C20.8944 15.5196 20.9997 15.2652 20.9997 15V13H22.9997C23.265 13 23.5193 12.8946 23.7068 12.7071C23.8944 12.5196 23.9997 12.2652 23.9997 12C23.9997 11.7348 23.8944 11.4804 23.7068 11.2929C23.5193 11.1054 23.265 11 22.9997 11Z"
+          fill="#374957"
+        />
+        <path
+          d="M9 12C10.1867 12 11.3467 11.6481 12.3334 10.9888C13.3201 10.3295 14.0892 9.39246 14.5433 8.2961C14.9974 7.19975 15.1162 5.99335 14.8847 4.82946C14.6532 3.66558 14.0818 2.59648 13.2426 1.75736C12.4035 0.918247 11.3344 0.346802 10.1705 0.115291C9.00666 -0.11622 7.80026 0.00259972 6.7039 0.456726C5.60754 0.910851 4.67047 1.67989 4.01118 2.66658C3.35189 3.65328 3 4.81331 3 6C3.00159 7.59081 3.63424 9.11602 4.75911 10.2409C5.88399 11.3658 7.40919 11.9984 9 12ZM9 2C9.79113 2 10.5645 2.2346 11.2223 2.67412C11.8801 3.11365 12.3928 3.73836 12.6955 4.46927C12.9983 5.20017 13.0775 6.00444 12.9231 6.78036C12.7688 7.55629 12.3878 8.26902 11.8284 8.82843C11.269 9.38784 10.5563 9.7688 9.78036 9.92314C9.00444 10.0775 8.20017 9.99827 7.46927 9.69552C6.73836 9.39277 6.11365 8.88008 5.67412 8.22228C5.2346 7.56449 5 6.79113 5 6C5 4.93914 5.42143 3.92172 6.17157 3.17158C6.92172 2.42143 7.93913 2 9 2Z"
+          fill="#374957"
+        />
+        <path
+          d="M9 14C6.61386 14.0026 4.32622 14.9517 2.63896 16.639C0.951708 18.3262 0.00264685 20.6139 0 23C0 23.2652 0.105357 23.5196 0.292893 23.7071C0.48043 23.8946 0.734784 24 1 24C1.26522 24 1.51957 23.8946 1.70711 23.7071C1.89464 23.5196 2 23.2652 2 23C2 21.1435 2.7375 19.363 4.05025 18.0503C5.36301 16.7375 7.14348 16 9 16C10.8565 16 12.637 16.7375 13.9497 18.0503C15.2625 19.363 16 21.1435 16 23C16 23.2652 16.1054 23.5196 16.2929 23.7071C16.4804 23.8946 16.7348 24 17 24C17.2652 24 17.5196 23.8946 17.7071 23.7071C17.8946 23.5196 18 23.2652 18 23C17.9974 20.6139 17.0483 18.3262 15.361 16.639C13.6738 14.9517 11.3861 14.0026 9 14Z"
+          fill="#374957"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4950_43154">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

packages/core/sds/src/components/Icon/assets/BellIcon.tsx

@@ -0,0 +1,43 @@
+import { IconAssetProps } from '../types';
+
+export const BellIcon = (props: IconAssetProps) => {
+  const { color = 'white', size = 24 } = props;
+
+  if (color === 'black') {
+    return (
+      <svg width={size} height={size} viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clipPath="url(#clip0_4776_40944)">
+          <path
+            d="M8.29883 21C8.68649 21.8914 9.32606 22.6502 10.139 23.1831C10.9519 23.716 11.9028 23.9999 12.8748 23.9999C13.8469 23.9999 14.7978 23.716 15.6107 23.1831C16.4236 22.6502 17.0632 21.8914 17.4508 21H8.29883Z"
+            fill="black"
+          />
+          <path
+            d="M23.2668 12.5497L21.5308 6.82666C20.9749 4.82501 19.7662 3.06644 18.0967 1.83016C16.4272 0.593891 14.3925 -0.0492201 12.3157 0.00294028C10.239 0.0551007 8.23913 0.799543 6.63378 2.11807C5.02842 3.43659 3.90955 5.25362 3.45481 7.28066L2.10681 12.8177C1.92764 13.5534 1.91793 14.3203 2.07842 15.0603C2.2389 15.8004 2.56539 16.4943 3.03323 17.0897C3.50107 17.6852 4.09806 18.1666 4.77912 18.4976C5.46019 18.8287 6.20755 19.0007 6.96481 19.0007H18.4818C19.2625 19.0007 20.0324 18.8179 20.7298 18.4669C21.4272 18.1159 22.0327 17.6065 22.4978 16.9794C22.963 16.3523 23.2748 15.6251 23.4083 14.8558C23.5418 14.0866 23.4934 13.2968 23.2668 12.5497Z"
+            fill="black"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_4776_40944">
+            <rect width={size} height={size} fill="white" transform="translate(0.875)" />
+          </clipPath>
+        </defs>
+      </svg>
+    );
+  }
+
+  return (
+    <svg width={size} height={size} viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_4773_9114)">
+        <path
+          d="M23.4305 13.6617L21.5305 6.82569C20.9736 4.82302 19.7632 3.06398 18.0918 1.82816C16.4204 0.592343 14.3839 -0.0493232 12.3059 0.00515695C10.228 0.0596371 8.22788 0.807137 6.62353 2.12884C5.01919 3.45054 3.90267 5.27059 3.45147 7.29969L1.98047 13.9147C1.81799 14.6456 1.82174 15.4037 1.99146 16.133C2.16118 16.8623 2.49253 17.5442 2.96105 18.1282C3.42957 18.7123 4.02329 19.1837 4.69838 19.5076C5.37347 19.8316 6.11269 19.9997 6.86147 19.9997H7.97547C8.20499 21.13 8.8182 22.1462 9.71121 22.8761C10.6042 23.606 11.7221 24.0047 12.8755 24.0047C14.0288 24.0047 15.1467 23.606 16.0397 22.8761C16.9327 22.1462 17.546 21.13 17.7755 19.9997H18.6135C19.3843 19.9997 20.1447 19.8216 20.8352 19.4791C21.5258 19.1367 22.1278 18.6392 22.5943 18.0256C23.0608 17.4119 23.379 16.6987 23.5243 15.9417C23.6695 15.1847 23.6377 14.4044 23.4315 13.6617H23.4305ZM12.8755 21.9997C12.2572 21.9971 11.6548 21.8036 11.1508 21.4456C10.6467 21.0876 10.2656 20.5826 10.0595 19.9997H15.6915C15.4854 20.5826 15.1042 21.0876 14.6002 21.4456C14.0961 21.8036 13.4937 21.9971 12.8755 21.9997ZM21.0015 16.8147C20.7228 17.1844 20.3618 17.4839 19.9471 17.6897C19.5324 17.8954 19.0754 18.0015 18.6125 17.9997H6.86147C6.41225 17.9996 5.96879 17.8987 5.56381 17.7043C5.15883 17.5099 4.80268 17.227 4.52163 16.8766C4.24059 16.5261 4.04183 16.1171 3.94003 15.6795C3.83823 15.242 3.83599 14.7872 3.93347 14.3487L5.40347 7.73269C5.75782 6.1389 6.63478 4.70929 7.89493 3.67114C9.15508 2.63298 10.7261 2.04586 12.3582 2.0031C13.9904 1.96035 15.59 2.46441 16.9028 3.43516C18.2156 4.40591 19.1662 5.78764 19.6035 7.36069L21.5035 14.1967C21.629 14.6421 21.649 15.1106 21.5619 15.565C21.4747 16.0195 21.2829 16.4473 21.0015 16.8147Z"
+          fill="black"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4773_9114">
+          <rect width={size} height={size} fill={color} transform="translate(0.875)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

packages/core/sds/src/components/Icon/assets/CheckIcon.tsx

@@ -0,0 +1,16 @@
+import { IconAssetProps } from '../types';
+
+export const CheckIconMeet = (props: IconAssetProps) => {
+  const { size } = props;
+
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19.3565 6.93587C19.7814 7.28876 19.8397 7.91923 19.4868 8.34407L12.9524 16.2108C11.8035 17.5938 9.70442 17.6627 8.46745 16.3578L4.55746 12.2331C4.17751 11.8323 4.19442 11.1993 4.59524 10.8194C4.99606 10.4394 5.62899 10.4563 6.00895 10.8571L9.91894 14.9818C10.3313 15.4168 11.031 15.3939 11.4139 14.9328L17.9483 7.06614C18.3012 6.6413 18.9317 6.58298 19.3565 6.93587Z"
+        fill="#FF7664"
+      />
+    </svg>
+  );
+};

packages/core/sds/src/components/Icon/assets/CloseIcon.tsx

@@ -0,0 +1,14 @@
+import { IconAssetProps } from '../types';
+
+export const CloseIcon = (props: IconAssetProps) => {
+  const { size } = props;
+
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M17.9998 5.99982C17.8123 5.81235 17.558 5.70703 17.2928 5.70703C17.0277 5.70703 16.7733 5.81235 16.5858 5.99982L11.9998 10.5858L7.41382 5.99982C7.22629 5.81235 6.97198 5.70703 6.70682 5.70703C6.44165 5.70703 6.18735 5.81235 5.99982 5.99982C5.81235 6.18735 5.70703 6.44165 5.70703 6.70682C5.70703 6.97198 5.81235 7.22629 5.99982 7.41382L10.5858 11.9998L5.99982 16.5858C5.81235 16.7733 5.70703 17.0277 5.70703 17.2928C5.70703 17.558 5.81235 17.8123 5.99982 17.9998C6.18735 18.1873 6.44165 18.2926 6.70682 18.2926C6.97198 18.2926 7.22629 18.1873 7.41382 17.9998L11.9998 13.4138L16.5858 17.9998C16.7733 18.1873 17.0277 18.2926 17.2928 18.2926C17.558 18.2926 17.8123 18.1873 17.9998 17.9998C18.1873 17.8123 18.2926 17.558 18.2926 17.2928C18.2926 17.0277 18.1873 16.7733 17.9998 16.5858L13.4138 11.9998L17.9998 7.41382C18.1873 7.22629 18.2926 6.97198 18.2926 6.70682C18.2926 6.44165 18.1873 6.18735 17.9998 5.99982Z"
+        fill="black"
+      />
+    </svg>
+  );
+};

packages/core/sds/src/components/Icon/assets/ConnectStar.tsx

@@ -0,0 +1,15 @@
+import { IconAssetProps } from '../types';
+
+export const ConnectStar = (props: IconAssetProps) => {
+  const { size = 20 } = props;
+
+  return (
+    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="10" cy="10" r="10" fill="#FF7664" />
+      <path
+        d="M5.55129 10.1656L7.03462 11.249L6.47129 12.9935C6.38025 13.2641 6.3791 13.5569 6.468 13.8282C6.5569 14.0995 6.7311 14.3347 6.96462 14.499C7.19414 14.6685 7.47229 14.7593 7.7576 14.7578C8.04292 14.7564 8.32014 14.6628 8.54796 14.491L9.99837 13.4235L11.4492 14.4898C11.6783 14.6583 11.955 14.7499 12.2394 14.7512C12.5238 14.7526 12.8013 14.6638 13.032 14.4975C13.2628 14.3312 13.4348 14.0961 13.5235 13.8258C13.6122 13.5556 13.6128 13.2642 13.5255 12.9935L12.9621 11.249L14.4455 10.1656C14.6743 9.99834 14.8444 9.76303 14.9314 9.49329C15.0185 9.22356 15.0181 8.93321 14.9303 8.66371C14.8425 8.39421 14.6718 8.15935 14.4425 7.99267C14.2133 7.826 13.9372 7.73603 13.6538 7.73563H11.8317L11.2788 6.0123C11.1918 5.74103 11.021 5.50439 10.7909 5.33649C10.5607 5.1686 10.2832 5.07812 9.99837 5.07812C9.71351 5.07812 9.43601 5.1686 9.20588 5.33649C8.97576 5.50439 8.8049 5.74103 8.71796 6.0123L8.16504 7.73563H6.34462C6.06118 7.73603 5.78512 7.826 5.55586 7.99267C5.32661 8.15935 5.15589 8.39421 5.06809 8.66371C4.98029 8.93321 4.9799 9.22356 5.06698 9.49329C5.15406 9.76303 5.32415 9.99834 5.55295 10.1656H5.55129Z"
+        fill="white"
+      />
+    </svg>
+  );
+};

packages/core/sds/src/components/Icon/assets/HandShaving.tsx

@@ -0,0 +1,14 @@
+import { IconAssetProps } from '../types';
+
+export const HandShaving = (props: IconAssetProps) => {
+  const { size } = props;
+
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2.30353 13.3752C2.57016 14.4265 3.25478 15.358 4.25187 15.9169C4.46583 16.0368 4.73376 16.1469 5.26962 16.3672L5.63022 16.5155C5.9204 16.6347 6.06549 16.6944 6.19088 16.7379C8.46552 17.527 10.97 16.4817 12.0088 14.3098C12.0634 14.1956 12.1201 14.0584 12.2287 13.7944C12.2332 13.7844 12.2375 13.7743 12.2417 13.764L14.8186 7.49556C15.0294 6.98278 14.7846 6.3962 14.2718 6.18541C13.759 5.97462 13.1724 6.21943 12.9616 6.73221L12.1044 8.81745C12.0554 8.93675 11.8909 8.95211 11.8148 8.84801C11.7814 8.80241 11.7734 8.74271 11.7948 8.69045L13.3593 4.88464C13.6053 4.28639 13.3196 3.60205 12.7214 3.35613C12.1231 3.1102 11.4388 3.39581 11.1929 3.99406L9.90317 7.13145C9.86796 7.21711 9.78781 7.26522 9.70224 7.22978C9.61734 7.19462 9.55844 7.08994 9.59338 7.00495L11.3973 2.61677C11.6432 2.01852 11.3576 1.33419 10.7593 1.08826C10.1611 0.842335 9.47675 1.12795 9.23082 1.72619L7.24244 6.56318C7.21857 6.62125 7.16273 6.65976 7.10005 6.66341C6.97833 6.6705 6.88665 6.54857 6.93301 6.4358L8.15052 3.47406C8.39644 2.87582 8.11083 2.19148 7.51258 1.94555C6.91434 1.69963 6.23 1.98524 5.98407 2.58349L3.79141 7.91742C3.7766 7.95344 3.72184 7.95416 3.70887 7.91744L3.14571 6.32187C2.90473 5.63911 2.15781 5.28633 1.47742 5.5339C0.797024 5.78147 0.440809 6.53565 0.681789 7.21841L2.30353 13.3752ZM2.30353 13.3752C1.3863 9.75844 0.881907 7.97404 0.866578 7.91994C0.791659 7.65553 0.918158 8.05751 0.833911 7.79592C0.816674 7.7424 2.00098 12.2266 2.30353 13.3752Z"
+        stroke="white"
+      />
+    </svg>
+  );
+};

packages/core/sds/src/components/Icon/assets/HomeIcon.tsx

@@ -0,0 +1,47 @@
+import { IconAssetProps } from '../types';
+
+export const HomeIcon = (props: IconAssetProps) => {
+  const { color = 'white', size = 24 } = props;
+
+  if (color === 'black') {
+    return (
+      <svg width={size} height={size} viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clipPath="url(#clip0_4775_37619)">
+          <path
+            d="M12.375 14.9922C10.7182 14.9922 9.375 16.3353 9.375 17.9922V23.9922H15.375V17.9922C15.375 16.3353 14.0318 14.9922 12.375 14.9922Z"
+            fill="black"
+          />
+          <path
+            d="M17.375 17.9929V23.9929H21.375C23.0318 23.9929 24.375 22.6497 24.375 20.9929V11.8719C24.3752 11.3524 24.1733 10.8532 23.812 10.4799L15.314 1.29285C13.8146 -0.329491 11.2839 -0.4291 9.66155 1.07034C9.58449 1.14159 9.51023 1.21579 9.43903 1.29285L0.956016 10.4769C0.583734 10.8517 0.374859 11.3586 0.375 11.8869V20.9929C0.375 22.6497 1.71816 23.9929 3.375 23.9929H7.37498V17.9929C7.39369 15.2661 9.59527 13.0393 12.2534 12.9752C15.0005 12.9089 17.3541 15.1736 17.375 17.9929Z"
+            fill="black"
+          />
+          <path
+            d="M12.375 14.9922C10.7182 14.9922 9.375 16.3353 9.375 17.9922V23.9922H15.375V17.9922C15.375 16.3353 14.0318 14.9922 12.375 14.9922Z"
+            fill="black"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_4775_37619">
+            <rect width={size} height={size} fill="white" transform="translate(0.375)" />
+          </clipPath>
+        </defs>
+      </svg>
+    );
+  }
+
+  return (
+    <svg width={size} height={size} viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_4773_2372)">
+        <path
+          d="M23.496 9.06911L15.911 1.48311C14.9723 0.5471 13.7007 0.0214844 12.375 0.0214844C11.0494 0.0214844 9.77777 0.5471 8.83901 1.48311L1.25401 9.06911C0.974438 9.3469 0.752782 9.67741 0.601895 10.0415C0.451007 10.4056 0.37389 10.796 0.375012 11.1901V21.0071C0.375012 21.8028 0.691083 22.5658 1.25369 23.1284C1.8163 23.691 2.57936 24.0071 3.37501 24.0071H21.375C22.1707 24.0071 22.9337 23.691 23.4963 23.1284C24.0589 22.5658 24.375 21.8028 24.375 21.0071V11.1901C24.3761 10.796 24.299 10.4056 24.1481 10.0415C23.9972 9.67741 23.7756 9.3469 23.496 9.06911ZM15.375 22.0071H9.37501V18.0731C9.37501 17.2775 9.69108 16.5144 10.2537 15.9518C10.8163 15.3892 11.5794 15.0731 12.375 15.0731C13.1707 15.0731 13.9337 15.3892 14.4963 15.9518C15.0589 16.5144 15.375 17.2775 15.375 18.0731V22.0071ZM22.375 21.0071C22.375 21.2723 22.2697 21.5267 22.0821 21.7142C21.8946 21.9018 21.6402 22.0071 21.375 22.0071H17.375V18.0731C17.375 16.747 16.8482 15.4753 15.9105 14.5376C14.9729 13.5999 13.7011 13.0731 12.375 13.0731C11.0489 13.0731 9.77716 13.5999 8.83948 14.5376C7.9018 15.4753 7.37501 16.747 7.37501 18.0731V22.0071H3.37501C3.1098 22.0071 2.85544 21.9018 2.66791 21.7142C2.48037 21.5267 2.37501 21.2723 2.37501 21.0071V11.1901C2.37594 10.9251 2.4812 10.6711 2.66801 10.4831L10.253 2.90011C10.8167 2.33904 11.5797 2.02405 12.375 2.02405C13.1703 2.02405 13.9333 2.33904 14.497 2.90011L22.082 10.4861C22.2681 10.6734 22.3733 10.9261 22.375 11.1901V21.0071Z"
+          fill="black"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4773_2372">
+          <rect width="24" height="24" fill={color} transform="translate(0.375)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};