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

…into refactor/SAMBAD-293

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

packages/web-domains/src/onboarding/common/constants/steps.ts

@@ -0,0 +1,8 @@
+export const STEPS = {
+  QUESTION: 'question',
+  RESULT: 'result',
+  FRIENDSHIP: 'friendship',
+  ABOUT_ME: 'about-me',
+} as const;
+
+export type StepType = (typeof STEPS)[keyof typeof STEPS];

packages/web-domains/src/onboarding/features/components/BackGroundImage/BackGroundImage.tsx

@@ -0,0 +1,30 @@
+import { css } from '@emotion/react';
+import Image, { StaticImageData } from 'next/image';
+
+interface BackGroundProps {
+  imageUrl?: string | StaticImageData;
+}
+
+export const BackGroundImage = (props: BackGroundProps) => {
+  const { imageUrl } = props;
+
+  if (!imageUrl) {
+    return null;
+  }
+
+  return (
+    <div css={backGroundContainerCss}>
+      <Image src={imageUrl} alt="background-img" fill priority style={{ objectFit: 'contain' }} />
+    </div>
+  );
+};
+
+const backGroundContainerCss = css({
+  position: 'absolute',
+  top: '0',
+  left: '50%',
+  transform: 'translate(-50%, 0)',
+  width: '100%',
+  height: 'calc(100% - 116px)',
+  zIndex: '-1',
+});

packages/web-domains/src/onboarding/features/components/Button/NextButton.tsx

@@ -0,0 +1,26 @@
+import { Button } from '@sds/components';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+import { StepType, STEPS } from '@/onboarding/common/constants/steps';
+
+const stepOrder: StepType[] = [STEPS.QUESTION, STEPS.RESULT, STEPS.FRIENDSHIP, STEPS.ABOUT_ME];
+
+export const NextButton = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const currentStep = searchParams.get('step') as StepType;
+
+  const currentStepIndex = stepOrder.indexOf(currentStep);
+  const nextStep = stepOrder[currentStepIndex + 1] || stepOrder[0];
+
+  const handleGoToNextPage = () => {
+    router.push(`?step=${nextStep}`);
+  };
+
+  return (
+    <Button size="large" onClick={handleGoToNextPage}>
+      다음
+    </Button>
+  );
+};

packages/web-domains/src/onboarding/features/components/Button/StartButton.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { Button } from '@sds/components';
+import { colors } from '@sds/theme';
+import { useRouter } from 'next/navigation';
+
+import { useOnBoardingCompleteMutation } from '@/onboarding/common/apis/mutations/useOnBoardingMutation';
+
+interface StartButtonProps {
+  redirectUrl?: string;
+}
+
+export const StartButton = (props: StartButtonProps) => {
+  const { redirectUrl } = props;
+  const router = useRouter();
+  const { mutateAsync: onBoardingComplete } = useOnBoardingCompleteMutation();
+
+  const handleOnBoardingComplete = async () => {
+    if (redirectUrl) {
+      router.push(redirectUrl);
+    }
+
+    const data = await onBoardingComplete();
+
+    // 만약 가입된 모임이 없다면
+    if (data?.isNotEnteredAnyMeeting) {
+      router.push('/user');
+    }
+    // 만약 가입된 모임이 있다면
+    else {
+      router.push('/home');
+    }
+  };
+
+  return (
+    <Button size="large" color={colors.black} onClick={handleOnBoardingComplete}>
+      시작하기
+    </Button>
+  );
+};

packages/web-domains/src/onboarding/features/components/Header/Header.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { Txt } from '@sds/components';
+import { colors, size } from '@sds/theme';
+import { ReactNode } from 'react';
+
+interface HeaderProps {
+  title: string;
+  subTitle: string;
+  Icon: ReactNode | (() => JSX.Element);
+}
+export const Header = (props: HeaderProps) => {
+  const { title, subTitle, Icon } = props;
+  return (
+    <header
+      css={{
+        position: 'relative',
+        zIndex: '100',
+        padding: `${size.xs} ${size['2xs']}`,
+        textAlign: 'center',
+      }}
+    >
+      {typeof Icon === 'function' ? Icon() : Icon}
+      <Txt
+        as="h1"
+        typography="heading1"
+        color={colors.black}
+        css={{ '& span': { display: 'block' }, marginTop: '12px' }}
+      >
+        {title}
+        <span>{subTitle}</span>
+      </Txt>
+    </header>
+  );
+};

packages/web-domains/src/onboarding/features/components/Layout/OnBoardingLayout.tsx

@@ -0,0 +1,36 @@
+import { colors } from '@sds/theme';
+import { CSSProperties, PropsWithChildren } from 'react';
+
+import { STEPS, StepType } from '@/onboarding/common/constants/steps';
+
+interface OnBoardingLayoutProps {
+  step: StepType;
+}
+
+export const OnBoardingLayout = ({ children, step }: PropsWithChildren<OnBoardingLayoutProps>) => {
+  const backgroundColor = layoutStyles[step] || 'none';
+  return (
+    <main
+      style={{
+        ...layoutStyle,
+        backgroundColor,
+      }}
+    >
+      {children}
+    </main>
+  );
+};
+
+const layoutStyle: CSSProperties = {
+  position: 'relative',
+  height: '100dvh',
+  display: 'flex',
+  flexDirection: 'column',
+};
+
+const layoutStyles: Record<StepType, string> = {
+  [STEPS.QUESTION]: colors.primary300,
+  [STEPS.RESULT]: colors.tertiary300,
+  [STEPS.FRIENDSHIP]: colors.secondary400,
+  [STEPS.ABOUT_ME]: colors.quaternary300,
+};

packages/web-domains/src/onboarding/features/components/OnBoardingContent/OnBoardingContent.tsx

@@ -0,0 +1,39 @@
+import Image, { StaticImageData } from 'next/image';
+
+import { BackGroundImage } from '../BackGroundImage/BackGroundImage';
+
+interface OnBoardingContentProps {
+  imageUrl?: string | StaticImageData;
+  bgImageUrl?: string | StaticImageData;
+}
+export const OnBoardingContent = (props: OnBoardingContentProps) => {
+  const { imageUrl, bgImageUrl } = props;
+
+  if (!imageUrl) {
+    return null;
+  }
+
+  return (
+    <div
+      css={{
+        position: 'relative',
+        flexGrow: 1,
+        zIndex: '10',
+      }}
+    >
+      <div
+        css={{
+          position: 'relative',
+          width: '90%',
+          maxWidth: '400px',
+          height: '100%',
+          left: '50%',
+          transform: 'translate(-50%, 0)',
+        }}
+      >
+        <Image src={imageUrl} alt="on-boarding-img" fill priority style={{ objectFit: 'contain' }} />
+      </div>
+      <BackGroundImage imageUrl={bgImageUrl} />
+    </div>
+  );
+};