Merge branch 'develop' of https://github.com/depromeet/15th-team3-FE …

…into feat/about-edit

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/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;

packages/web-domains/package.json

@@ -11,7 +11,8 @@
     "./user": "./src/user/index.ts",
     "./participate-meeting": "./src/participate-meeting/index.ts",
     "./common": "./src/common/index.ts",
-    "./relay-question": "./src/relay-question/index.ts"
+    "./relay-question": "./src/relay-question/index.ts",
+    "./onboarding": "./src/onboarding/index.ts"
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",

packages/web-domains/src/relay-question/features/select-relay-question/components/ToolTip/ToolTip.tsx → packages/web-domains/src/common/components/ToolTip/ToolTip.tsx

@@ -3,8 +3,7 @@ import { Txt } from '@sambad/sds/components';
 import { colors } from '@sambad/sds/theme';
 import { PropsWithChildren } from 'react';
 
-import { RelayToolTipPolygon } from '../../../../assets/RelayToolTipPolygon';
-
+import { RelayToolTipPolygon } from './RelayToolTipPolygon';
 import { textWrapperCss, wrapperCss } from './ToolTip.styles';
 
 export const ToolTip = ({ children }: PropsWithChildren) => {

packages/web-domains/src/home/features/progressing-question/components/QuestionInfo/ActiveQuestion.tsx

@@ -2,6 +2,8 @@ import { Txt } from '@sambad/sds/components';
 import { borderRadiusVariants, colors, size } from '@sambad/sds/theme';
 import Link from 'next/link';
 
+import { ToolTip } from '@/common/components/ToolTip/ToolTip';
+
 import { ArrowIcon } from '../../../../../common/asset/arrow';
 import { ProgressingQuestionType } from '../../../../common/apis/schema/useGetProgressingQuestionQuery.type';
 import { Avatar } from '../../../../common/components/Avatar/Avatar';
@@ -22,7 +24,12 @@ export const ActiveQuestion = ({ question }: ActiveQuestionProps) => {
   } = question;
 
   return (
-    <div css={{ backgroundColor: colors.white, padding: '20px', borderRadius: '16px' }}>
+    <div css={{ backgroundColor: colors.white, padding: '20px', borderRadius: '16px', position: 'relative' }}>
+      {!isAnswered && (
+        <span css={{ position: 'absolute', top: 16, right: 72 }}>
+          <ToolTip>답변을 아직 안했어요!</ToolTip>
+        </span>
+      )}
       <div css={{ display: 'flex', justifyContent: 'space-between' }}>
         <Txt
           typography="title4"

packages/web-domains/src/new-meeting/features/get-meeting-info/components/Checkbox/Checkbox.tsx

@@ -1,31 +1,35 @@
 import { Txt } from '@sambad/sds/components';
 import { colors } from '@sambad/sds/theme';
-import { forwardRef, InputHTMLAttributes, useId } from 'react';
+import { forwardRef, InputHTMLAttributes, ReactNode, useId } from 'react';
 
 import { CheckboxGroupImpl, useCheckboxContext } from './CheckboxGroupImpl';
+import { CheckboxLabel } from './CheckboxLabel';
 import { checkboxCss } from './styles';
 
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
   value: string | number;
-  label: string;
+  label: string | ((isChecked?: boolean) => ReactNode);
   required?: boolean;
 }
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
-  const { children, label, value, required, ...restProps } = props;
+  const { label, value, required, ...restProps } = props;
 
   const checkboxCtx = useCheckboxContext();
 
   const isChecked = checkboxCtx.value?.includes(value);
 
-  const checkboxId = `${useId()}-${label}`;
+  const checkboxId = useId();
 
   return (
     <label htmlFor={checkboxId} css={[checkboxCss.base, isChecked ? checkboxCss.selected : checkboxCss.default]}>
-      <Txt typography="subTitle2" color={isChecked ? colors.primary500 : colors.black}>
-        {label}
-      </Txt>
-      {children}
+      {typeof label === 'string' ? (
+        <Txt typography="body3" color={isChecked ? colors.primary500 : colors.black}>
+          {label}
+        </Txt>
+      ) : (
+        label(isChecked)
+      )}
       <input
         id={checkboxId}
         ref={ref}
@@ -52,4 +56,5 @@ Checkbox.displayName = 'CheckboxGroup.item';
 
 export const CheckboxGroup = Object.assign(CheckboxGroupImpl, {
   Item: Checkbox,
+  Label: CheckboxLabel,
 });

packages/web-domains/src/new-meeting/features/get-meeting-info/components/Checkbox/CheckboxLabel.tsx

@@ -0,0 +1,24 @@
+import { Txt } from '@sds/components';
+import { colors } from '@sds/theme';
+
+import { itemCss } from './styles';
+
+export interface CheckboxLabelProps {
+  title: string;
+  isChecked?: boolean;
+}
+
+export const CheckboxLabel = (props: CheckboxLabelProps) => {
+  const { title, isChecked } = props;
+
+  const [emoji, text] = title.split(' ');
+
+  return (
+    <span css={itemCss}>
+      <Txt typography="title3">{emoji}</Txt>
+      <Txt typography="body3" color={isChecked ? colors.primary500 : colors.black}>
+        {text}
+      </Txt>
+    </span>
+  );
+};

packages/web-domains/src/new-meeting/features/get-meeting-info/components/Checkbox/styles.ts

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { borderRadiusVariants, colors } from '@sambad/sds/theme';
+import { borderRadiusVariants, colors, size } from '@sambad/sds/theme';
 
 export const checkboxCss = {
   base: css({
@@ -20,3 +20,9 @@ export const checkboxCss = {
     borderColor: colors.primary500,
   },
 };
+
+export const itemCss = css({
+  '& > * + *': {
+    paddingLeft: size['6xs'],
+  },
+});

packages/web-domains/src/new-meeting/features/get-meeting-info/components/GetMeetingInfo/GetMeetingInfo.tsx

@@ -57,9 +57,9 @@ export const GetMeetingInfo = (props: GetMeetingInfoProps) => {
           <Label title="#01" subTitle="모임의 이름은 무엇인가요?" />
           <TextField
             {...register('meetingName', {
-              required: '이름은 필수 입력 사항입니다.',
-              minLength: { value: 2, message: '2자 이상 입력해주세요.' },
-              maxLength: { value: 10, message: '10자 이하로 입력해주세요.' },
+              required: '이름은 필수 입력 사항입니다',
+              minLength: { value: 2, message: '2자 이상 입력해주세요' },
+              maxLength: { value: 10, message: '10자 이하로 입력해주세요' },
             })}
             errorMessage="2자 이상, 10자 이하로 입력해주세요"
             placeholder="모임의 이름을 입력해주세요"
@@ -73,19 +73,23 @@ export const GetMeetingInfo = (props: GetMeetingInfoProps) => {
               name="meetingTypeIds"
               control={control}
               rules={{
-                validate: (value) => value.length <= 2 || '최대 2개까지 선택해주세요.',
+                validate: (value) => value.length <= 2 || '최대 2개까지 선택해주세요',
               }}
               render={({ field: { value, onChange } }) => (
                 <CheckboxGroup value={value} onValueChange={onChange}>
                   {meetingTypes?.map((type, idx) => (
-                    <CheckboxGroup.Item key={idx} label={type.content} value={type.meetingTypeId} />
+                    <CheckboxGroup.Item
+                      key={idx}
+                      value={type.meetingTypeId}
+                      label={(isChecked) => <CheckboxGroup.Label title={type.content} isChecked={isChecked} />}
+                    />
                   ))}
                 </CheckboxGroup>
               )}
             />
           </div>
-          <Txt as="p" typography="body4" color={colors.grey500} css={{ marginTop: size['7xs'] }}>
-            최대 2개까지만 선택해주세요.
+          <Txt as="p" typography="body4" color={colors.grey600} css={{ marginTop: size['7xs'] }}>
+            최대 2개까지만 선택해주세요
           </Txt>
         </div>
         <div css={buttonWrapperCss}>

packages/web-domains/src/onboarding/common/apis/mutations/useOnBoardingMutation.ts

@@ -0,0 +1,33 @@
+import { UseMutationOptions, useMutation } from '@tanstack/react-query';
+import { isAxiosError } from 'axios';
+
+import { Http } from '@/common/apis/base.api';
+
+interface OnBoardingCompleteResponse {
+  isNotEnteredAnyMeeting: boolean;
+}
+
+interface Args {
+  options?: UseMutationOptions<OnBoardingCompleteResponse | undefined, unknown>;
+}
+
+export const useOnBoardingCompleteMutation = ({ options }: Args = {}) => {
+  return useMutation({
+    mutationFn: async () => {
+      try {
+        const data = await onBoardingComplete();
+        return data;
+      } catch (error) {
+        if (isAxiosError(error)) {
+          console.error(error);
+        }
+      }
+    },
+    ...options,
+  });
+};
+
+export async function onBoardingComplete(): Promise<OnBoardingCompleteResponse> {
+  const data = await Http.PATCH<unknown, OnBoardingCompleteResponse>(`/v1/users/onboarding/complete`);
+  return data;
+}

packages/web-domains/src/onboarding/common/assets/icons/HandIcon.tsx

@@ -0,0 +1,10 @@
+export const HandIcon = () => (
+  <svg width={29} height={30} fill="none">
+    <path
+      fill="#92CA00"
+      fillRule="evenodd"
+      d="M17.578 5.164a1.733 1.733 0 1 1 3.205 1.318l-2.669 6.494c-.052.125.035.28.161.332.127.053.245-.018.297-.145l1.909-4.643a1.733 1.733 0 1 1 3.206 1.318l-2.315 5.632a.24.24 0 0 0 .03.233c.112.154.355.131.428-.045l1.268-3.086a1.485 1.485 0 0 1 2.748 1.13l-3.813 9.275-.02.045c-.16.391-.244.594-.325.763a7 7 0 0 1-8.609 3.593c-.186-.064-.4-.153-.83-.33l-.533-.218c-.793-.326-1.19-.49-1.506-.667a5.996 5.996 0 0 1-2.883-3.761 4662.42 4662.42 0 0 0-2.059-8.108c-.11-.391.063.183-.062-.204-.025-.079 1.98 5.604 1.178 3.33l-1.457-4.129A1.963 1.963 0 0 1 6.104 10.8a1.917 1.917 0 0 1 2.469 1.166l.833 2.36c.02.055.1.054.122 0l3.245-7.892a1.733 1.733 0 0 1 3.206 1.318l-1.802 4.382c-.068.167.067.348.247.337a.242.242 0 0 0 .211-.148l2.943-7.158Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

packages/web-domains/src/onboarding/common/assets/icons/HumanIcon.tsx

@@ -0,0 +1,12 @@
+export const HumanIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="19" height="24" viewBox="0 0 19 24" fill="none">
+    <path
+      d="M9.5 12C12.8137 12 15.5 9.31371 15.5 6C15.5 2.68629 12.8137 0 9.5 0C6.18629 0 3.5 2.68629 3.5 6C3.5 9.31371 6.18629 12 9.5 12Z"
+      fill="#FFCF1F"
+    />
+    <path
+      d="M9.5 13.999C4.53172 14.0046 0.505531 18.0307 0.5 22.999C0.5 23.5513 0.947703 23.999 1.49998 23.999H17.5C18.0522 23.999 18.5 23.5513 18.5 22.999C18.4945 18.0307 14.4683 14.0045 9.5 13.999Z"
+      fill="#FFCF1F"
+    />
+  </svg>
+);

packages/web-domains/src/onboarding/common/assets/icons/QuestionIcon.tsx

@@ -0,0 +1,28 @@
+import { IconAssetProps } from '@sds/components/Icon/types';
+import { colors } from '@sds/theme';
+
+export const QuestionIcon = (props: IconAssetProps) => {
+  const { color = colors.primary500 } = props;
+
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none">
+      <g clipPath="url(#a)">
+        <path
+          fill={color}
+          fillRule="evenodd"
+          d="M15.833.466a11.936 11.936 0 0 1 4.322 2.292 12.043 12.043 0 0 1 4.325 8.488V19a5.006 5.006 0 0 1-5 5h-6.982A12 12 0 0 1 10.954.1a11.936 11.936 0 0 1 4.879.366Z"
+          clipRule="evenodd"
+        />
+        <path
+          fill="#fff"
+          d="M12.484 6c1.537 0 2.736.687 3.598 2.062a3.28 3.28 0 0 1 .418 1.584v.18c0 1.404-.803 2.52-2.41 3.346l-.578.15v1.016c-.091.638-.423.956-.996.956h-.032c-.455 0-.777-.229-.964-.687l-.032-.18v-1.912c0-.503.31-.822.932-.956.996 0 1.66-.449 1.992-1.345l.064-.478c0-.882-.503-1.48-1.51-1.793l-.482-.06c-.921 0-1.564.478-1.928 1.434 0 .897-.342 1.345-1.028 1.345H9.4c-.407 0-.707-.259-.9-.777v-.269c0-1.315.728-2.39 2.185-3.227A4.741 4.741 0 0 1 12.484 6Zm0 11.117c.584 0 .926.329 1.028.986-.118.598-.439.897-.964.897h-.096c-.546 0-.868-.309-.964-.926v-.06c0-.458.332-.757.996-.897Z"
+        />
+      </g>
+      <defs>
+        <clipPath id="a">
+          <path fill="#fff" d="M.5 0h24v24H.5z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};