feat: MVP v2 (#154)

* feat(web-domains): 온보딩 (#134)

* chore: 이미지, 아이콘 및 image.d.ts추가

* feat: 온보딩 UI 생성

* fix: 타입 에러 수정

* feat: 온보딩 api연동 및 반응형 수정

* feat(web-domains): 유저 정보 수정 (#135)

* fix: 모임원, 모임장 기본 정보 타이틀 수정

* feat: 자기소개 기본정보 수정 UI 및 기능 추가

* fix: 라우트 경로 설정 변경

* refactor(*): 릴레이 질문 시작 지면 [meetingId] Dynamic Routing 대응 (#131)

* refactor: start-relay-question meetingId params 대응

* refactor: select-question meetingId params 대응 및 object-fit cover

* refactor: Share Group 페이지 meetingId params 대응

* fix: share group prefetch myInfo -> activeQuestion

* refactor: share next questioner meetingId params 대응

* fix: 누락된 meetingId 대응

* refactor(web-domains): result 페이지 meetingId를 params로 처리 및 기존 코드 걷어내기 (#136)

* fix: meetingId를 params 처리 및 기존 코드 걷어내기

* feat: statistics 스크린 server side fetching

* fix: meetingId fetching -> params

* chore: meetings fetching 하는 코드 모두 제거

* feat(web-domains, react-utils): about 페이지에서 답변 공개여부 수정 기능 추가 (#125)

* feat: modify 페이지인지 아닌지에 따라 버튼 텍스트 및 이벤트 핸들러 분리 처리

* refactor: Profile 영역 레이아웃 스타일링 리팩터링

* feat: 정보 수정하러 가기 라우팅 버튼 추가 및 연결

* feat: condition을 prop으로 하여 조건부로 렌더링할 수 있는 유틸 추가

* chore: react-utils pkg

* fix: sds 버그 수정

* feat: 수정 페이지에서 checkbox 렌더링

* fix: status api - enabled 조건 추가

* feat: default 체크박스 상태 처리

* fix: 체크박스 id 설정 부분 수정

* feat: 답변 리스트 아이템 숨기기 기능 추가

* fix: idx -> id

* chore: @tanstack/query-devtools

* fix: 수정한 내용이 바로 반영되지 않는 문제 수정

* refactor(web-domains): about 페이지 내 fetching meetingId -> params meetingId (#138)

* refactor: fetching을 meetingId -> params meetingId

* fix: fetching meetingId -> params meetingId

* chore: modify params 처리

* fix: fix routing

* fix(web-domains): 일부 색상 변경 및 스켈레톤 로딩 처리 (QA) (#139)

* fix(web-domains): 다음 질문인 카카오톡 공유하기 오지정 오류 해결 (#120)

* refactor: 다음 질문인 공유 nextTarget field 추가 및 카카오 공유하기에 적용

* refactor: 버튼 디자인 시안에 맞게 large로 적용

* fix: 텍스트 색상 변경

* feat: 스켈레톤 로딩 처리

* fix: 색상 수정

* fix: 색상 수정

* fix: 여백 수정

---------

Co-authored-by: 이세민 <[email protected]>

* 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: 마이프로필

* fix: 유저 질문 답변 목록 에러 수정 (#142)

* fix: error

* fix: 이전 질문 목록 버그 수정

* fix: 모임원 프로필에서는 기본정보 수정 버튼 미노출

* �fix(web-domains): about 페이지 자잘자잘 레이아웃 수정 (#143)

* fix(web-domains): 다음 질문인 카카오톡 공유하기 오지정 오류 해결 (#120)

* refactor: 다음 질문인 공유 nextTarget field 추가 및 카카오 공유하기에 적용

* refactor: 버튼 디자인 시안에 맞게 large로 적용

* feat(web, web-domains): not-found 페이지 추가 (#137)

* chore: not-found 페이지

* fix: 경로 export 수정

Co-authored-by: Doeun Kim <[email protected]>

* fix: Icon 컴포넌트 분리

* fix: Icon 이름 수정

---------

Co-authored-by: Doeun Kim <[email protected]>

* fix: 네비 + 플로팅 버튼 = 180px 하단 여백 확보

* fix: trigger child 영역 maxWidth 부여로 넘치는 것을 방지

* fix: trigger 아이콘이 상단에 붙도록 수정

* fix: 타이틀이 길어져도 # index 부분을 넘어가지 않도록 수정

* fix: 하단 여백 보장

* fix: 손 흔들기 버튼 위치 및 여백 수정

---------

Co-authored-by: 이세민 <[email protected]>
Co-authored-by: leejeongho <[email protected]>

* fix(web-domains): 아직 답변을 하지 않았을 경우 얼리 리턴처리하여 보이지 않도록 처리 (#145)

* fix: 자기소개 수정시 릴레이 질문만 노출되도록 수정 (#146)

* �fix(web-domains): 답변한 질문이 없을 경우 수정완료 시 요청없이 라우팅만 할 수 있도록 수정 (#148)

* fix(web-domains): 답변 페이지 프로필 이미지, 버튼 사이즈 수정 (#144)

* fix: 질문인 프로필 이미지 수정

* fix: 버튼 사이즈 변경

* fix: 페이지 하단 여백 수정

* fix: answers 없을 경우 요청 없이 라우팅만 될 수 있도록 수정

---------

Co-authored-by: leejeongho <[email protected]>

* fix: 모임장 생성시 질문 시작안되도록 변경 (#152)

* fix: 질문 시작하기 버튼 링크

* fix: 모임원 한명일때 진행 안하도록 수정

* feat(web-domains/home): 알림탭에서 알림이 비어 있을 때 EmptyView 및 notification.additionalData null case 대응 (#151)

* refactor: notification 오타 수정

* fix: notification.additionalData가 null인 경우 대응

* feat: 알림탭에서 알림이 없을 경우 Empty Section 구현

* refactor: Empty view text 수정

* fix(web-domains): 질문 선택 버튼 스타일 수정 (#153)

* fix: 현재의 모임 이름 대신 '삼봤드의 모험' 이란 상수값이 들어가있는 오류 해결 (#150)

* fix(web-domains): answers 리스트 페이지에서 프로필 클릭 시 잘못된 링크 수정 (#149)

---------

Co-authored-by: leejeongho <[email protected]>
Co-authored-by: 이세민 <[email protected]>
Co-authored-by: Doeun Kim <[email protected]>
Co-authored-by: semnil5202 <[email protected]>

apps/web/app/[meetingId]/about/[meetingMemberId]/page.tsx

@@ -0,0 +1,11 @@
+import { AboutMeScreen } from '@/about-me';
+
+interface AboutMemberPageParams {
+  params: { meetingId: string; meetingMemberId?: string };
+}
+
+const AboutMemberPage = ({ params }: AboutMemberPageParams) => {
+  return <AboutMeScreen {...params} />;
+};
+
+export default AboutMemberPage;

apps/web/app/[meetingId]/about/me/modify/page.tsx

@@ -0,0 +1,10 @@
+import { AboutMeModifyScreen } from '@/about-me';
+
+interface AboutMeModifyPageParams {
+  params: { meetingId: string };
+}
+
+const AboutMeModifyPage = ({ params }: AboutMeModifyPageParams) => {
+  return <AboutMeModifyScreen {...params} />;
+};
+export default AboutMeModifyPage;

apps/web/app/[meetingId]/about/me/page.tsx

@@ -0,0 +1,11 @@
+import { AboutMeScreen } from '@/about-me';
+
+interface AboutMePageParams {
+  params: { meetingId: string };
+}
+
+const AboutMePage = ({ params }: AboutMePageParams) => {
+  return <AboutMeScreen {...params} />;
+};
+
+export default AboutMePage;

apps/web/app/question-result/[questionId]/answers/most-selected/page.tsx → apps/web/app/[meetingId]/question-result/[questionId]/answers/most-selected/page.tsx

@@ -2,16 +2,15 @@ import { MostSelectedListScreen } from '@sambad/web-domains/result';
 
 interface QuestionResultPageProps {
   params: {
+    meetingId: string;
     questionId: string;
   };
 }
 
 const QuestionResultPage = (props: QuestionResultPageProps) => {
-  const {
-    params: { questionId },
-  } = props;
+  const { params } = props;
 
-  return <MostSelectedListScreen questionId={Number(questionId)} />;
+  return <MostSelectedListScreen {...params} />;
 };
 
 export default QuestionResultPage;

apps/web/app/question-result/[questionId]/answers/page.tsx → apps/web/app/[meetingId]/question-result/[questionId]/answers/page.tsx

@@ -2,16 +2,15 @@ import { AnswerListScreen } from '@sambad/web-domains/result';
 
 interface QuestionResultPageProps {
   params: {
+    meetingId: string;
     questionId: string;
   };
 }
 
 const AnswersPage = (props: QuestionResultPageProps) => {
-  const {
-    params: { questionId },
-  } = props;
+  const { params } = props;
 
-  return <AnswerListScreen questionId={Number(questionId)} />;
+  return <AnswerListScreen {...params} />;
 };
 
 export default AnswersPage;

apps/web/app/question-result/[questionId]/answers/same-selected/page.tsx → apps/web/app/[meetingId]/question-result/[questionId]/answers/same-selected/page.tsx

@@ -2,16 +2,15 @@ import { SelectedSameListScreen } from '@sambad/web-domains/result';
 
 interface QuestionResultPageProps {
   params: {
+    meetingId: string;
     questionId: string;
   };
 }
 
 const QuestionResultPage = (props: QuestionResultPageProps) => {
-  const {
-    params: { questionId },
-  } = props;
+  const { params } = props;
 
-  return <SelectedSameListScreen questionId={Number(questionId)} />;
+  return <SelectedSameListScreen {...params} />;
 };
 
 export default QuestionResultPage;

apps/web/app/question-result/[questionId]/page.tsx → apps/web/app/[meetingId]/question-result/[questionId]/page.tsx

@@ -2,16 +2,15 @@ import { ResultMainScreen } from '@sambad/web-domains/result';
 
 interface QuestionResultPageProps {
   params: {
+    meetingId: string;
     questionId: string;
   };
 }
 
 const QuestionResultPage = (props: QuestionResultPageProps) => {
-  const {
-    params: { questionId },
-  } = props;
+  const { params } = props;
 
-  return <ResultMainScreen questionId={Number(questionId)} />;
+  return <ResultMainScreen {...params} />;
 };
 
 export default QuestionResultPage;

apps/web/app/question-result/[questionId]/statistics/page.tsx → apps/web/app/[meetingId]/question-result/[questionId]/statistics/page.tsx

@@ -2,16 +2,15 @@ import { StatisticsScreen } from '@sambad/web-domains/result';
 
 interface QuestionResultPageProps {
   params: {
+    meetingId: string;
     questionId: string;
   };
 }
 
 const StatisticsPage = (props: QuestionResultPageProps) => {
-  const {
-    params: { questionId },
-  } = props;
+  const { params } = props;
 
-  return <StatisticsScreen questionId={Number(questionId)} />;
+  return <StatisticsScreen {...params} />;
 };
 
 export default StatisticsPage;

apps/web/app/[meetingId]/start-relay-question/page.tsx

@@ -0,0 +1,3 @@
+import { StartRelayQuestionScreen } from '@/relay-question';
+
+export default StartRelayQuestionScreen;

apps/web/app/[meetingId]/user/modify/page.tsx

@@ -0,0 +1,3 @@
+import { ModifyUserInfoScreen } from '@/user';
+
+export default ModifyUserInfoScreen;

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;

apps/web/app/onboarding/page.tsx

@@ -0,0 +1,17 @@
+import { OnBoardingScreen, StepType } from '@/onboarding';
+
+interface OnBoardingPageProps {
+  searchParams: {
+    step: StepType;
+  };
+}
+
+const OnBoardingPage = async (props: OnBoardingPageProps) => {
+  const {
+    searchParams: { step },
+  } = props;
+
+  return <OnBoardingScreen step={step} />;
+};
+
+export default OnBoardingPage;

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/react-utils/src/If.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+interface IfProps {
+  condition: boolean;
+  children?: ReactNode;
+}
+
+export const If = (props: IfProps) => {
+  const { condition, children } = props;
+
+  return condition ? <>{children}</> : null;
+};

packages/core/react-utils/src/index.ts

@@ -1 +1,2 @@
 export { useId } from './useId';
+export { If } from './If';

packages/core/sds/src/components/Accordion/Trigger.tsx

@@ -7,7 +7,7 @@ import { Icon } from '../Icon';
 
 import { arrowIconAttribute } from './constants';
 import { useAccordionContext, useAccordionItemContext } from './context';
-import { triggerCss } from './styles';
+import { triggerChildCss, triggerCss } from './styles';
 
 export interface AccordionTriggerProps extends HTMLAttributes<HTMLDivElement> {}
 
@@ -32,7 +32,7 @@ export const AccordionTrigger = forwardRef<HTMLDivElement, AccordionTriggerProps
       onClick={composeEventHandlers(onClick, handleItemOpen)}
       {...restProps}
     >
-      {children}
+      <span css={triggerChildCss}>{children}</span>
       <Icon name="angle-small-up" color={colors.grey600} {...arrowIconAttribute.attribute} />
     </div>
   );

packages/core/sds/src/components/Accordion/styles.ts

@@ -6,6 +6,7 @@ import { accordionItemStateAttribute, arrowIconAttribute, contentAttribute } fro
 
 export const triggerCss = css({
   display: 'flex',
+  width: '100%',
   alignItems: 'center',
   position: 'relative',
   padding: `${size['4xs']} 0`,
@@ -14,9 +15,15 @@ export const triggerCss = css({
   [`& ${arrowIconAttribute.querySelector}`]: {
     position: 'absolute',
     right: 0,
+    // NOTE: 상단 여백만큼 top 부여하여 정렬에 맞게 상단에 붙도록 top 부여
+    top: size['4xs'],
   },
 });
 
+export const triggerChildCss = css({
+  maxWidth: '93%',
+});
+
 export const itemCss = css({
   overflow: 'hidden',
 

packages/core/sds/src/components/Checkbox/Checkbox.tsx

@@ -16,9 +16,18 @@ export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
-  const { label, checked: checkedFromProps, defaultChecked, onCheckedChange, disabled, ...restProps } = props;
+  const {
+    id: idFromProps,
+    label,
+    checked: checkedFromProps,
+    defaultChecked,
+    onCheckedChange,
+    disabled,
+    style: styleFromProps,
+    ...restProps
+  } = props;
 
-  const id = useId();
+  const id = idFromProps ?? useId();
 
   const [checked = false, setChecked] = useControllableState({
     prop: checkedFromProps,
@@ -28,10 +37,11 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref)
 
   const rootStyle = {
     ...checkedVariants[checked ? 'checked' : 'default'],
+    ...styleFromProps,
   } as CSSProperties;
 
   return (
-    <div css={checkboxRootCss} style={rootStyle}>
+    <div css={checkboxRootCss} style={rootStyle} {...restProps}>
       <input
         ref={ref}
         id={id}
@@ -46,7 +56,6 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref)
         aria-checked={checked}
         aria-disabled={disabled}
         tabIndex={0}
-        {...restProps}
       />
       <span css={indicatorCss} />
       {checked && <Icon css={iconCss} name="check" size={12} color={colors.white} />}

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>
+  );
+};