feat(#38): 온보딩 약관 동의 퍼널 컴포넌트 생성

Author: wkdtnqls0506

src/app/member/onboarding/_components/AgreeStep/AgreeStep.css.ts

@@ -0,0 +1,30 @@
+import { style } from "@vanilla-extract/css";
+
+import { radius, semantic } from "@/styles";
+
+export const wrapper = style({
+  height: "100%",
+});
+
+export const allAgreeBox = style({
+  backgroundColor: semantic.background.grayLight,
+  padding: "1.4rem 2rem",
+  borderRadius: radius[120],
+});
+
+export const allAgreeCheckIcon = style({
+  width: "2.4rem",
+  height: "2.4rem",
+});
+
+export const individualAgreeBox = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.8rem",
+  paddingLeft: "2rem",
+});
+
+export const agreeList = style({
+  display: "flex",
+  padding: "0.5rem 0",
+});

src/app/member/onboarding/_components/AgreeStep/AgreeStep.tsx

@@ -0,0 +1,119 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+
+import { useUpdateMemberMutation } from "@/app/member/_api";
+import { Button } from "@/components/ui/Button";
+import { CheckBox } from "@/components/ui/CheckBox";
+import { HStack, VStack } from "@/components/ui/Stack";
+import { Text } from "@/components/ui/Text";
+import { QUERY_KEYS } from "@/constants";
+
+import { AGREEMENTS } from "../../_constants/agreement.constants";
+import { OnboardingTitle } from "../OnboardingTitle";
+import * as styles from "./AgreeStep.css";
+
+export const AgreeStep = ({
+  nickname,
+  phoneNumber,
+}: {
+  nickname: string;
+  phoneNumber: string;
+}) => {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const { mutate: updateMember } = useUpdateMemberMutation();
+
+  const { register, handleSubmit, watch, setValue } = useForm<{
+    agreements: string[];
+  }>({
+    defaultValues: { agreements: [] },
+  });
+
+  const checkedIds = watch("agreements");
+
+  const isAllAgreed = checkedIds.length === AGREEMENTS.length;
+  const isAllRequiredAgreed = AGREEMENTS.filter(a => a.required).every(a =>
+    checkedIds.includes(a.id)
+  );
+
+  const handleAllAgree = (checked: boolean) => {
+    setValue("agreements", checked ? AGREEMENTS.map(a => a.id) : []);
+  };
+
+  const handleIndividualAgree = (id: string, checked: boolean) => {
+    setValue(
+      "agreements",
+      checked ? [...checkedIds, id] : checkedIds.filter(item => item !== id)
+    );
+  };
+
+  const onSubmit = () => {
+    updateMember(
+      {
+        nickname: nickname,
+        phoneNumber: phoneNumber,
+        optInMarketing: checkedIds.includes("marketing"),
+      },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries({
+            queryKey: QUERY_KEYS.member,
+          });
+          router.push("/");
+        },
+      }
+    );
+  };
+
+  return (
+    <VStack
+      justify='between'
+      className={styles.wrapper}
+      as='form'
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <VStack gap={44}>
+        <OnboardingTitle>이용약관에 동의해주세요</OnboardingTitle>
+        <VStack gap={20}>
+          <HStack gap={8} align='center' className={styles.allAgreeBox}>
+            <CheckBox
+              width={24}
+              height={24}
+              checked={isAllAgreed}
+              onCheckedChange={handleAllAgree}
+              className={styles.allAgreeCheckIcon}
+            />
+            <Text typo='body1Sb'>모두 동의합니다</Text>
+          </HStack>
+          <ul className={styles.individualAgreeBox}>
+            {AGREEMENTS.map(agreement => (
+              <HStack
+                key={agreement.id}
+                as='li'
+                gap={8}
+                className={styles.agreeList}
+              >
+                <CheckBox
+                  value={agreement.id}
+                  checked={checkedIds.includes(agreement.id)}
+                  onCheckedChange={value =>
+                    handleIndividualAgree(agreement.id, value)
+                  }
+                  hasBackground={false}
+                  {...register("agreements")}
+                />
+                <Text typo='body2Md' color='neutral.50'>
+                  {agreement.label}
+                </Text>
+              </HStack>
+            ))}
+          </ul>
+        </VStack>
+      </VStack>
+      <Button size='fullWidth' type='submit' disabled={!isAllRequiredAgreed}>
+        동의하고 시작하기
+      </Button>
+    </VStack>
+  );
+};

src/app/member/onboarding/_components/AgreeStep/index.ts

@@ -0,0 +1 @@
+export { AgreeStep } from "./AgreeStep";

src/app/member/onboarding/_constants/agreement.constants.ts

@@ -0,0 +1,19 @@
+import { type AgreementConstants } from "../_types";
+
+export const AGREEMENTS: AgreementConstants[] = [
+  {
+    id: "termsOfService",
+    label: "[필수] 개인정보 수집 및 이용",
+    required: true,
+  },
+  {
+    id: "privacyPolicy",
+    label: "[필수] 서비스 이용약관",
+    required: true,
+  },
+  {
+    id: "marketing",
+    label: "[선택] 마케팅 정보 수신 동의",
+    required: false,
+  },
+];