depromeet · LeeJeongHooo · Aug 25, 2024 · Aug 16, 2024 · Aug 16, 2024 · Aug 16, 2024
@@ -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;
@@ -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",

@@ -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;
+}
@@ -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>
+);
@@ -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>
+);
@@ -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>
+  );
+};
@@ -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];
@@ -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',
+});
@@ -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>
+  );
+};
@@ -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>
+  );
+};
@@ -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>
+  );
+};
@@ -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,
+};
@@ -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>
+  );
+};
@@ -0,0 +1,45 @@
+import { colors } from '@sds/theme';
+import { HTMLAttributes, PropsWithChildren, forwardRef } from 'react';
+
+import { progressIndicatorCss, stepCss } from './styles';
+
+export interface ProgressIndicatorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {
+  mode?: 'horizontal' | 'vertical';
+  totalStep: number;
+  currentStep: number;
+}
+
+export const ProgressIndicator = forwardRef<HTMLDivElement, PropsWithChildren<ProgressIndicatorProps>>(
+  ({ mode = 'horizontal', totalStep, currentStep, children, ...rest }, ref) => {
+    const flexDirection = mode === 'horizontal' ? 'row' : 'column';
+    const currentStepIndex = Math.min(totalStep, currentStep) - 1;
+    const basis = 100 / totalStep;
+
+    return (
+      <div ref={ref} {...rest} css={progressIndicatorCss({ flexDirection })}>
+        {Array.from({ length: totalStep }).map((_, index) => (
+          <ProgressIndicator.Step key={index} isCurrent={index <= currentStepIndex} basis={basis} />
+        ))}
+        {children}
+      </div>
+    );
+  },
+) as React.ForwardRefExoticComponent<ProgressIndicatorProps> & { Step: typeof Step };
+
+export interface StepProps extends HTMLAttributes<HTMLSpanElement> {
+  basis: number;
+  isCurrent: boolean;
+}
+
+const Step = ({ isCurrent, basis, ...rest }: StepProps) => {
+  let color = '#FFFFFF4D';
+
+  if (isCurrent) {
+    color = colors.white;
+  }
+
+  return <span {...rest} css={stepCss({ basis, color })} />;
+};
+
+ProgressIndicator.displayName = 'ProgressIndicator';
+ProgressIndicator.Step = Step;
@@ -0,0 +1,16 @@
+import { css } from '@emotion/react';
+
+import { ProgressIndicatorCssArgs, StepCssArgs } from './type';
+
+export const progressIndicatorCss = ({ flexDirection }: ProgressIndicatorCssArgs) =>
+  css({ width: '100%', display: 'flex', flexWrap: 'nowrap', flexDirection });
+
+export const stepCss = ({ basis, color }: StepCssArgs) =>
+  css({
+    boxSizing: 'border-box',
+    flex: `${basis}% 1 1`,
+    height: '4px',
+    backgroundColor: color,
+    borderRadius: '8px',
+    margin: '2px',
+  });