Feat/markup/signup/DEVING-25 회원가입 페이지 개발

src/app/login/components/LoginForm.tsx

@@ -2,12 +2,19 @@
 
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
-import { useLoginForm } from '@/hooks/useLoginForm';
+import useLoginForm from '@/hooks/useLoginForm';
+import {
+  loginEmailValidation,
+  loginPasswordValidation,
+} from '@/util/validation';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 
 const LoginForm = () => {
+  const router = useRouter();
   const { register, handleSubmit, onSubmit, errors, setFocusedField } =
     useLoginForm();
+
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
@@ -23,13 +30,7 @@ const LoginForm = () => {
             id="email"
             className="mb-[20px] mt-[8px]"
             placeholder="이메일을 입력해주세요."
-            {...register('email', {
-              required: '이메일을 입력해주세요.',
-              pattern: {
-                value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
-                message: '올바른 이메일 형식이 아닙니다.',
-              },
-            })}
+            {...register('email', loginEmailValidation)}
             errorMessage={errors.email?.message}
             onFocus={() => setFocusedField('email')}
           />
@@ -41,17 +42,7 @@ const LoginForm = () => {
             type="password"
             className="mb-[20px] mt-[8px]"
             placeholder="비밀번호를 입력해주세요."
-            {...register('password', {
-              required: '비밀번호를 입력해주세요.',
-              minLength: {
-                value: 6,
-                message: '비밀번호는 최소 6자 이상이어야 합니다.',
-              },
-              pattern: {
-                value: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/,
-                message: '비밀번호는 영문과 숫자를 포함해야 합니다.',
-              },
-            })}
+            {...register('password', loginPasswordValidation)}
             errorMessage={errors.password?.message}
             onFocus={() => setFocusedField('password')}
           />
@@ -68,7 +59,12 @@ const LoginForm = () => {
         <Button type="submit" className="w-full">
           로그인
         </Button>
-        <Button type="button" className="w-full" variant={'outline'}>
+        <Button
+          type="button"
+          className="w-full"
+          variant={'outline'}
+          onClick={() => router.push('/signup')}
+        >
           회원가입
         </Button>
       </div>

src/app/preview/chip/page.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import Chip from '@/components/ui/Chip';
+import React, { useState } from 'react';
+
+export default function ChipPreview() {
+  const [position, setPosition] = useState('');
+
+  return (
+    <div className="flex flex-col gap-8 bg-gray-50 p-8 pb-32">
+      <Chip>All</Chip>
+      <Chip isActive>All</Chip>
+      <div className="w-[544px] p-[40px]">
+        <div className="flex w-full">
+          <Chip
+            className={`flex-1 hover:cursor-pointer`}
+            isActive={position === 'Frontend'}
+            onClick={() => setPosition('Frontend')}
+          >
+            프론트엔드
+          </Chip>
+          <Chip
+            className={`flex-1 hover:cursor-pointer`}
+            isActive={position === 'Backend'}
+            onClick={() => setPosition('Backend')}
+          >
+            백엔드
+          </Chip>
+          <Chip
+            className={`flex-1 hover:cursor-pointer`}
+            isActive={position === 'Designer'}
+            onClick={() => setPosition('Designer')}
+          >
+            디자이너
+          </Chip>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/signup/components/ChipContainer.tsx

@@ -0,0 +1,35 @@
+import Chip from '@/components/ui/Chip';
+
+export const ChipContainer = ({
+  position,
+  setPosition,
+}: {
+  position: string;
+  setPosition: (value: string) => void;
+}) => {
+  return (
+    <div className="flex w-full gap-[8px]">
+      <Chip
+        className={`flex-1 hover:cursor-pointer`}
+        isActive={position === 'Frontend'}
+        onClick={() => setPosition('Frontend')}
+      >
+        프론트엔드
+      </Chip>
+      <Chip
+        className={`flex-1 hover:cursor-pointer`}
+        isActive={position === 'Backend'}
+        onClick={() => setPosition('Backend')}
+      >
+        백엔드
+      </Chip>
+      <Chip
+        className={`flex-1 hover:cursor-pointer`}
+        isActive={position === 'Designer'}
+        onClick={() => setPosition('Designer')}
+      >
+        디자이너
+      </Chip>
+    </div>
+  );
+};

src/app/signup/components/SignupForm.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import useSignUpForm from '@/hooks/useSignupForm';
+import {
+  emailValidation,
+  nameValidation,
+  passwordCheckValidation,
+  passwordValidation,
+  positionValidation,
+} from '@/util/validation';
+import Link from 'next/link';
+
+import { ChipContainer } from './ChipContainer';
+
+const SignupForm = () => {
+  const {
+    handleSubmit,
+    onSubmit,
+    register,
+    errors,
+    isNameCheck,
+    handleNameCheck,
+    isEmailCheck,
+    handleEmailCheck,
+    watch,
+    handleClickPosition,
+    dirtyFields,
+    setFocusedField,
+  } = useSignUpForm();
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="flex w-[544px] flex-col rounded-[16px] bg-BG_2 p-[40px]"
+    >
+      <div>
+        <h2 className="typo-head2 mb-[40px] text-center text-white">
+          회원가입
+        </h2>
+        <div className="flex flex-col gap-[24px]">
+          <div className="flex flex-col gap-[8px]">
+            <label htmlFor="name" className="typo-head3 text-Cgray700">
+              닉네임
+            </label>
+            <div className="flex flex-row  gap-[8px]">
+              <Input
+                id="name"
+                className="h-full"
+                placeholder="닉네임을 입력해주세요."
+                {...register('name', nameValidation)}
+                errorMessage={errors.name?.message}
+                state={isNameCheck ? 'success' : 'default'}
+                onFocus={() => setFocusedField('name')}
+              />
+              <Button
+                disabled={isNameCheck}
+                variant={'outline'}
+                size={'sm'}
+                className="h-[50px]"
+                type="button"
+                onClick={handleNameCheck}
+              >
+                중복확인
+              </Button>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-[8px]">
+            <label htmlFor="id" className="typo-head3 text-Cgray700">
+              이메일
+            </label>
+            <div className="flex flex-row  gap-[8px]">
+              <Input
+                id="email"
+                className=" h-full"
+                placeholder="이메일을 입력해주세요."
+                {...register('email', emailValidation)}
+                state={isEmailCheck ? 'success' : 'default'}
+                errorMessage={errors.email?.message}
+                onFocus={() => setFocusedField('email')}
+              />
+              <Button
+                disabled={isEmailCheck}
+                variant={'outline'}
+                size={'sm'}
+                className="h-[50px]"
+                onClick={handleEmailCheck}
+                type="button"
+              >
+                중복확인
+              </Button>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-[8px]">
+            <label htmlFor="id" className="typo-head3 text-Cgray700">
+              포지션
+            </label>
+            <ChipContainer
+              position={watch('position')}
+              setPosition={handleClickPosition}
+            />
+            {errors.position?.message && (
+              <p className="typo-caption1 mt-[10px] px-[10px] text-warning">
+                {errors.position?.message}
+              </p>
+            )}
+            <input
+              type="hidden"
+              {...register('position', positionValidation)}
+            />
+          </div>
+
+          <div className="flex flex-col gap-[8px]">
+            <label htmlFor="password" className="typo-head3 text-Cgray700">
+              비밀번호
+            </label>
+            <Input
+              id="password"
+              type="password"
+              placeholder="비밀번호를 입력해주세요."
+              {...register('password', passwordValidation)}
+              state={dirtyFields.password ? 'success' : 'default'}
+              errorMessage={errors.password?.message}
+              onFocus={() => setFocusedField('password')}
+            />
+          </div>
+
+          <div className="flex flex-col gap-[8px]">
+            <label htmlFor="pw" className="typo-head3 text-Cgray700">
+              비밀번호 확인
+            </label>
+            <Input
+              id="passwordCheck"
+              type="password"
+              placeholder="비밀번호를 입력해주세요."
+              {...register(
+                'passwordCheck',
+                passwordCheckValidation(watch('password')),
+              )}
+              state={dirtyFields.passwordCheck ? 'success' : 'default'}
+              errorMessage={errors.passwordCheck?.message}
+              onFocus={() => setFocusedField('passwordCheck')}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="mb-[20px] mt-[48px] flex flex-col">
+        <Button type="submit" className="w-full">
+          회원가입
+        </Button>
+      </div>
+      <div className="flex justify-between">
+        <p className="text-Cgray700">이미 회원이신가요?</p>
+        <Link href="/login" className="text-main underline">
+          로그인
+        </Link>
+      </div>
+    </form>
+  );
+};
+
+export default SignupForm;