Feat/signup

package.json

@@ -9,12 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.9.0",
     "@vanilla-extract/css": "^1.15.3",
     "@vanilla-extract/sprinkles": "^1.6.3",
     "classnames": "^2.5.1",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.53.1",
+    "zod": "^3.23.8",
     "zustand": "^4.5.5"
   },
   "devDependencies": {

src/app/auth/signup/page.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { flexSprinklesFc } from "@/app/components/common/utils/flex";
+import { signupContainer, signupWrapper } from "./signup.css";
+import { inputStyle } from "@/app/styles/common/input.css";
+import { caption, heading2, regular, semiBold } from "@/app/styles/font.css";
+import { paddingSprinkles } from "@/app/styles/padding.css";
+import { colors, pink80 } from "@/app/styles/colors.css";
+import Image from "next/image";
+import { pointer } from "@/app/styles/global.css";
+import { useRouter } from "next/navigation";
+import Button from "@/app/components/common/Button";
+import { Form, useForm } from "react-hook-form";
+import { signupSchema } from "@/app/types/signupSchema";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
+import Popup from "@/app/components/common/Popup";
+
+const page = () => {
+  const router = useRouter();
+  const [submit, setSubmit] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<z.infer<typeof signupSchema>>({
+    resolver: zodResolver(signupSchema),
+    mode: "onChange",
+    defaultValues: {
+      id: "",
+      password: "",
+      confirmPassword: "",
+      nickname: "",
+    },
+  });
+
+  const onSubmit = (data: z.infer<typeof signupSchema>) => {
+    if (data) {
+      setSubmit(true);
+      localStorage.setItem("auth", JSON.stringify(data));
+    }
+  };
+
+  return (
+    <>
+      {submit && (
+        <Popup text="회원가입이 완료되었습니다.">
+          <Button
+            width="115px"
+            text="확인"
+            onClick={() => {
+              router.push("/");
+            }}
+            color={colors.white}
+            background={colors.primary}
+          />
+        </Popup>
+      )}
+      <section className={signupWrapper}>
+        <article className={signupContainer}>
+          <div>
+            <div className={`${paddingSprinkles({ paddingBottom: "s32" })} ${pointer}`}>
+              <Image
+                src="/svgs/prev.svg"
+                alt="back"
+                width={17}
+                height={21}
+                onClick={() => {
+                  router.push("/");
+                }}
+              />
+            </div>
+
+            <div className={paddingSprinkles({ paddingBottom: "s32" })}>
+              <h3 className={`${semiBold} ${heading2}`}>
+                회원가입을
+                <br /> 시작 할까요?
+              </h3>
+            </div>
+          </div>
+
+          <form
+            onSubmit={handleSubmit(onSubmit)}
+            className={flexSprinklesFc({ flexDirection: "column", gap: "32px" })}
+          >
+            <div className={flexSprinklesFc({ flexDirection: "column", gap: "8px" })}>
+              <div>
+                <p className={`${caption} ${regular} ${paddingSprinkles({ paddingBottom: "s4" })}`}>
+                  아이디<span className={`${pink80}`}>*</span>
+                </p>
+                <input placeholder="아이디" className={inputStyle} {...register("id")} maxLength={10} />
+
+                <p className={`${paddingSprinkles({ paddingTop: "s4" })} ${caption} ${pink80}`}>
+                  {errors.id?.message}
+                </p>
+              </div>
+
+              <div>
+                <p className={`${caption} ${regular} ${paddingSprinkles({ paddingBottom: "s4" })}`}>
+                  비밀번호<span className={`${pink80}`}>*</span>
+                </p>
+                <input
+                  type="password"
+                  placeholder="비밀번호"
+                  className={inputStyle}
+                  {...register("password")}
+                  maxLength={12}
+                />
+
+                <p className={`${paddingSprinkles({ paddingTop: "s4" })} ${caption} ${pink80}`}>
+                  {errors.password?.message}
+                </p>
+              </div>
+
+              <div>
+                <p className={`${caption} ${regular} ${paddingSprinkles({ paddingBottom: "s4" })}`}>
+                  비밀번호 확인<span className={`${pink80}`}>*</span>
+                </p>
+                <input
+                  type="password"
+                  placeholder="비밀번호 확인"
+                  className={inputStyle}
+                  {...register("confirmPassword")}
+                  maxLength={12}
+                />
+
+                <p className={`${paddingSprinkles({ paddingTop: "s4" })} ${caption} ${pink80}`}>
+                  {errors.confirmPassword?.message}
+                </p>
+              </div>
+
+              <div>
+                <p className={`${caption} ${regular} ${paddingSprinkles({ paddingBottom: "s4" })}`}>
+                  닉네임<span className={`${pink80}`}>*</span>
+                </p>
+                <input placeholder="닉네임" className={inputStyle} {...register("nickname")} />
+
+                <p className={`${paddingSprinkles({ paddingTop: "s4" })} ${caption} ${pink80}`}>
+                  {errors.nickname?.message}
+                </p>
+              </div>
+            </div>
+
+            <div>
+              <Button
+                text="가입하기"
+                width="100%"
+                background={isValid ? colors.point : colors.gray200}
+                color={colors.white}
+                fontSize="12px"
+                disabled={!isValid}
+              />
+            </div>
+          </form>
+        </article>
+      </section>
+    </>
+  );
+};
+
+export default page;

src/app/auth/signup/signup.css.ts

@@ -0,0 +1,19 @@
+import { style } from "@vanilla-extract/css";
+
+export const signupWrapper = style([
+  {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    height: "100vh",
+    padding: "85px 36px 104px 36px",
+  },
+]);
+
+export const signupContainer = style({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  height: "100%",
+});

src/app/components/common/Button.tsx

@@ -5,6 +5,7 @@ import { pointer } from "@/app/styles/global.css";
 interface ButtonProps extends ButtonSprinkles {
   text: string;
   onClick?: () => void;
+  disabled?: boolean;
 }
 
 const Button = ({
@@ -15,6 +16,7 @@ const Button = ({
   fontSize = "16px",
   background = colors.white30,
   borderRadius = "5px",
+  disabled = false,
   onClick,
 }: ButtonProps) => {
   const buttonClass = buttonSprinkles({
@@ -26,9 +28,9 @@ const Button = ({
     borderRadius,
   });
   return (
-    <div className={`${buttonClass} ${buttonWrapper} ${pointer}`} onClick={onClick}>
+    <button className={`${buttonClass} ${buttonWrapper} ${pointer}`} onClick={onClick} disabled={disabled}>
       {text}
-    </div>
+    </button>
   );
 };
 

src/app/components/record/DateCircle.tsx

@@ -1,4 +1,4 @@
-import { circle } from "@/app/styles/record/record.css";
+import { circle } from "@/app/record/record.css";
 
 const DateCircle = ({ date }: { date: string }) => {
   return <div className={circle}>{date}</div>;

src/app/info/detail/page.tsx

@@ -5,8 +5,8 @@ import Memo from "@/app/components/common/Memo";
 import { flexSprinklesFc } from "@/app/components/common/utils/flex";
 import { gray300, colors } from "@/app/styles/colors.css";
 import { semiBold, heading2, caption } from "@/app/styles/font.css";
-import { infoContainer } from "@/app/styles/info/common.css";
 import { useRouter } from "next/navigation";
+import { infoContainer } from "../common.css";
 
 const page = () => {
   const router = useRouter();

src/app/info/layout.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { infoWrapper } from "../styles/info/common.css";
 import Image from "next/image";
 import { pointer } from "../styles/global.css";
 import { paddingSprinkles } from "../styles/padding.css";
+import { infoWrapper } from "./common.css";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   const router = useRouter();

src/app/info/shape/page.tsx

@@ -4,11 +4,10 @@ import Button from "@/app/components/common/Button";
 import { flexSprinklesFc } from "@/app/components/common/utils/flex";
 import { colors, gray300, primary, white } from "@/app/styles/colors.css";
 import { heading2, semiBold } from "@/app/styles/font.css";
-import { infoBox } from "@/app/styles/info/common.css";
-import { shapeContentBox, shapeContentBoxWrapper, shapeContentBoxText } from "@/app/styles/info/shape.css";
 import { paddingSprinkles } from "@/app/styles/padding.css";
 import Image, { ImageProps } from "next/image";
 import { useRouter } from "next/navigation";
+import { shapeContentBoxWrapper, shapeContentBox, shapeContentBoxText } from "./shape.css";
 
 type ContentBoxProps = {
   src: string;
@@ -33,7 +32,7 @@ const page = () => {
   const router = useRouter();
 
   return (
-    <article className={infoBox}>
+    <article>
       <div className={`${flexSprinklesFc({ flexDirection: "column", gap: "16px" })} `}>
         <h3 className={`${semiBold} ${heading2} ${paddingSprinkles({ paddingBottom: "s60" })}`}>
           묽기 및 모양을

src/app/styles/info/shape.css.ts → src/app/info/shape/shape.css.ts

@@ -1,6 +1,6 @@
+import { colors } from "@/app/styles/colors.css";
+import { regular, caption } from "@/app/styles/font.css";
 import { style } from "@vanilla-extract/css";
-import { colors } from "../colors.css";
-import { caption, regular } from "../font.css";
 
 export const shapeContent = style({
   display: "flex",

src/app/info/time/page.tsx

@@ -4,8 +4,8 @@ import Button from "@/app/components/common/Button";
 import { flexSprinklesFc } from "@/app/components/common/utils/flex";
 import { colors, gray300 } from "@/app/styles/colors.css";
 import { caption, heading2, semiBold } from "@/app/styles/font.css";
-import { infoContainer } from "@/app/styles/info/common.css";
 import { useRouter } from "next/navigation";
+import { infoContainer } from "../common.css";
 
 const page = () => {
   const router = useRouter();