feat: 약관 화면 추가 (#143)

* feat: CheckBox 추가

* feat: 약관 링크 추가

Author: wibaek

package-lock.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@next/third-parties": "^14.2.4",
+    "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-progress": "^1.1.2",
     "@react-google-maps/api": "^2.19.2",

package.json

@@ -0,0 +1,72 @@
+"use client";
+
+import { useState } from "react";
+
+import BlockBtn from "@/components/button/BlockBtn";
+import { Checkbox } from "@/components/ui/checkbox";
+
+interface SignupPolicyScreenProps {
+  toNextStage: () => void;
+}
+
+const SignupPolicyScreen = ({ toNextStage }: SignupPolicyScreenProps) => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  return (
+    <div className="mb-40 mt-[-56px]">
+      <div className="border-b border-[#bgbgbg]">
+        <div className="h-[375px] pl-5">
+          <div className="mt-[149px]">
+            <svg xmlns="http://www.w3.org/2000/svg" width="46" height="30" viewBox="0 0 46 30" fill="none">
+              <path
+                d="M35.033 7.24056C34.8945 7.24056 34.7535 7.24056 34.6125 7.2493C33.282 4.95166 31.3474 3.06247 29.0188 1.78689C26.6902 0.511304 24.0566 -0.101918 21.404 0.013814C18.7514 0.129546 16.1813 0.969807 13.9726 2.44335C11.764 3.91689 10.0012 5.9674 8.87585 8.37219C7.28625 8.6738 5.78364 9.3252 4.47687 10.2792C3.17009 11.2332 2.09188 12.4659 1.32032 13.8881C0.548772 15.3102 0.103204 16.8862 0.0158961 18.5018C-0.0714116 20.1174 0.201727 21.7322 0.815527 23.2292C1.42933 24.7262 2.36842 26.0679 3.56477 27.1572C4.76113 28.2465 6.18479 29.056 7.73262 29.5272C9.28046 29.9983 10.9137 30.1193 12.5141 29.8814C14.1144 29.6434 15.6418 29.0524 16.9856 28.1513C18.6002 28.7508 20.3089 29.0571 22.0311 29.0559C22.3031 29.0559 22.5864 29.0471 22.8771 29.0309H34.3231C34.5863 29.0471 34.8109 29.0559 35.028 29.0559C35.2451 29.0559 35.4697 29.0471 35.7329 29.0309H36.8795V28.8987C39.5687 28.4316 41.9851 26.9734 43.6518 24.812C45.3186 22.6506 46.1145 19.9429 45.8827 17.2233C45.6508 14.5037 44.4079 11.9699 42.3994 10.1218C40.3908 8.2737 37.7624 7.24567 35.033 7.24056ZM34.1322 20.3073C33.9685 19.7219 33.6931 19.1736 33.3212 18.6928C32.8446 18.0952 32.2357 17.6947 31.4597 17.419C32.1902 17.1835 32.8374 16.7426 33.3237 16.1488C33.6963 15.6657 33.9717 15.1149 34.1347 14.5269C34.2977 15.1146 34.5727 15.6653 34.9444 16.1488C35.4298 16.7436 36.0766 17.1855 36.8072 17.4214C36.0299 17.6997 35.421 18.0977 34.9444 18.6953C34.5726 19.1764 34.2969 19.7245 34.1322 20.3098V20.3073ZM10.9257 10.4882C12.6691 10.4866 14.3718 11.0147 15.8083 12.0025C17.2448 12.9904 18.3472 14.3914 18.9696 16.0199C19.5919 17.6484 19.7048 19.4276 19.2932 21.1216C18.8817 22.8157 17.9651 24.3448 16.665 25.5063C13.9783 24.1939 11.866 21.9419 10.7283 19.1767C9.59061 16.4115 9.50637 13.3251 10.4916 10.5019C10.6363 10.4945 10.7785 10.4907 10.9208 10.4907L10.9257 10.4882ZM10.9257 27.7059C8.90689 27.7046 6.95269 26.9938 5.40475 25.6978C3.85681 24.4018 2.81359 22.6029 2.45744 20.6157C2.1013 18.6285 2.45488 16.5794 3.45638 14.8264C4.45789 13.0735 6.0436 11.7283 7.93636 11.026C7.19007 14.0278 7.4215 17.1896 8.59696 20.0508C9.77242 22.912 11.8305 25.3233 14.4716 26.9336C13.3567 27.4412 12.1458 27.7033 10.9208 27.7021L10.9257 27.7059ZM22.8184 26.7365H22.7835C22.534 26.7514 22.2844 26.7589 22.0411 26.7589C21.0285 26.759 20.0197 26.6333 19.038 26.3846C20.4105 24.8586 21.3244 22.9762 21.6747 20.9539C22.025 18.9316 21.7974 16.8514 21.0182 14.9527C20.239 13.0539 18.9397 11.4137 17.2698 10.2204C15.5998 9.0272 13.6271 8.32948 11.5783 8.2075C12.7061 6.34344 14.3116 4.81459 16.2285 3.77914C18.1454 2.74368 20.3042 2.23924 22.4815 2.31799C24.6587 2.39674 26.7754 3.05583 28.6126 4.22706C30.4497 5.39829 31.9405 7.03913 32.9307 8.9798L33.2925 9.68722H33.3062C33.1378 12.714 32.8908 14.3634 32.1833 15.2455C31.3736 16.2611 29.7504 16.4695 26.2383 16.7003V18.1476C29.7504 18.3797 31.3736 18.5868 32.1833 19.6024C32.9931 20.6179 33.2014 22.6878 33.3798 26.739L22.8184 26.7365ZM35.6556 26.7365H35.6119C35.3923 26.7514 35.2089 26.7577 35.038 26.7577H34.8845C35.0629 22.6916 35.2588 20.6267 36.081 19.5999C36.9032 18.573 38.5152 18.3772 42.0261 18.1451V16.6978C38.5152 16.467 36.8907 16.2586 36.081 15.243C35.3661 14.3485 35.1241 12.6616 34.9581 9.54748H35.0417C37.2574 9.56811 39.3799 10.4423 40.9674 11.9881C42.5549 13.534 43.4853 15.6324 43.5648 17.8468C43.6444 20.0612 42.8671 22.221 41.3946 23.8768C39.9221 25.5326 37.8678 26.5569 35.6593 26.7365H35.6556Z"
+                fill="#040000"
+              />
+            </svg>
+          </div>
+          <div className="mt-4">
+            <span className="text-2xl">
+              가입을
+              <br /> 환영합니다!
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col py-5 pl-4 pr-5">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Checkbox className="" checked={isChecked} onClick={() => setIsChecked(!isChecked)} />
+            <div>
+              <span className="text-sm text-gray-400">이용 약관 동의 </span>
+              <span className="text-xs text-gray-400">(필수)</span>
+            </div>
+          </div>
+          <div>
+            <a
+              href="https://solid-connection.notion.site/1b5ac2cda9b28017a801d0cacf236ec7?pvs=4"
+              target="_blank"
+              className="text-xs text-gray-400 underline"
+            >
+              전문보기
+            </a>
+          </div>
+        </div>
+      </div>
+      <div className="fixed bottom-14 w-full max-w-[600px] bg-white">
+        <div className="px-5">
+          <BlockBtn
+            className="mt-5"
+            disabled={!isChecked}
+            onClick={toNextStage}
+            style={{ backgroundColor: isChecked ? "#5950f6" : "#c4c4c4" }}
+          >
+            다음
+          </BlockBtn>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SignupPolicyScreen;

src/components/login/signup/SignupPolicyScreen.tsx

@@ -7,6 +7,7 @@ import { signUpApi } from "@/services/auth";
 import { uploadProfileImageFilePublicApi } from "@/services/file";
 import { saveAccessToken, saveRefreshToken } from "@/utils/localStorage";
 
+import SignupPolicyScreen from "./SignupPolicyScreen";
 import SignupPrepareScreen from "./SignupPrepareScreen";
 import SignupProfileScreen from "./SignupProfileScreen";
 import SignupRegionScreen from "./SignupRegionScreen";
@@ -119,28 +120,36 @@ const SignupSurvey = ({ signUpToken, baseNickname, baseEmail, baseProfileImageUr
   const renderCurrentSurvey = () => {
     switch (curStage) {
       case 1:
+        return (
+          <SignupPolicyScreen
+            toNextStage={() => {
+              setCurStage(2);
+            }}
+          />
+        );
+      case 2:
         return (
           <SignupPrepareScreen
             preparation={curPreparation}
             setPreparation={setCurPreparation}
             toNextStage={() => {
-              setCurStage(2);
+              setCurStage(3);
             }}
           />
         );
-      case 2:
+      case 3:
         return (
           <SignupRegionScreen
             curRegion={region}
             setCurRegion={setRegion}
             curCountries={countries}
             setCurCountries={setCountries}
             toNextStage={() => {
-              setCurStage(3);
+              setCurStage(4);
             }}
           />
         );
-      case 3:
+      case 4:
         return (
           <SignupProfileScreen
             toNextStage={submitRegisterRequest}

src/components/login/signup/SignupSurvey.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };