회원가입 UI 변경

client/src/app/login/components/LoginForm/index.tsx

@@ -1,23 +1,20 @@
 'use client';
 
-import { useState, useCallback } from 'react';
+import { useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 
 //redux
 import { useDispatch, useSelector } from 'react-redux';
 import { logIn } from '@/lib/redux/features/auth/authSlice';
 
 //components
-import { Tooltip } from '@/components';
+import { Tooltip, Form as CustomForm } from '@/components';
 
 //hooks
 import useModal from '@/hooks/modal/useModal';
 
-//icons
-import { EyeOnIcon, EyeOffIcon } from '@/assets/Icon';
-
 //formik
-import { Formik, Form, Field, ErrorMessage } from 'formik';
+import { Formik, Form } from 'formik';
 import * as Yup from 'yup';
 
 //services
@@ -45,8 +42,6 @@ interface ILogin {
 }
 
 export default function LoginForm() {
-  const [viewPassword, setViewPassword] = useState(false);
-
   const dispatch = useDispatch();
 
   const router = useRouter();
@@ -92,73 +87,45 @@ export default function LoginForm() {
       {({ errors, touched, isSubmitting }) => (
         <Form>
           <div className="flex flex-col gap-5">
-            <div className="relative flex flex-col gap-3.5">
-              <label className="text-body3" htmlFor="user-id-input">
+            <CustomForm.FieldWrapper>
+              <CustomForm.FormLabel htmlFor="user-id-input">
                 아이디
-              </label>
-              <Field
+              </CustomForm.FormLabel>
+              <CustomForm.FormInput
                 type="text"
                 name="userId"
                 id="user-id-input"
                 placeholder="아이디를 입력하세요."
-                className={`${
-                  touched.userId && errors.userId && 'border-red-scale-600'
-                } border border-blue-gray-scale-50 py-[7px] px-4 text-body3 text-gray-scale-600 focus:outline-none`}
-              />
-              <ErrorMessage
-                name="userId"
-                component="span"
-                className="absolute -bottom-4 left-2 text-caption1 text-red-scale-600"
+                touchedTarget={touched.userId}
+                errorsTarget={errors.userId}
               />
-            </div>
-            <div className="relative flex flex-col gap-3.5">
-              <label className="text-body3" htmlFor="password-input">
+              <CustomForm.FormErrorMessage name="userId" />
+            </CustomForm.FieldWrapper>
+            <CustomForm.FieldWrapper>
+              <CustomForm.FormLabel htmlFor="password-input">
                 비밀번호
-              </label>
-              <div className="relative flex">
-                <Field
-                  type={viewPassword ? 'text' : 'password'}
-                  name="password"
-                  id="password-input"
-                  placeholder="비밀번호를 입력하세요."
-                  autoComplete="on"
-                  className={`${
-                    touched.password &&
-                    errors.password &&
-                    'border-red-scale-600'
-                  } flex-grow border border-blue-gray-scale-50 py-[7px] px-4 text-body3 text-gray-scale-600 focus:outline-none`}
-                />
-                <div
-                  className="absolute right-2 top-2 hover:cursor-pointer"
-                  onClick={() => setViewPassword((prev) => !prev)}
-                >
-                  {viewPassword ? <EyeOnIcon /> : <EyeOffIcon />}
-                </div>
-              </div>
-              <ErrorMessage
+              </CustomForm.FormLabel>
+              <CustomForm.FormInput
                 name="password"
-                component="span"
-                className="absolute -bottom-4 left-2 text-caption1 text-red-scale-600"
+                type="password"
+                id="password-input"
+                placeholder="비밀번호를 입력하세요."
+                autoComplete="on"
+                touchedTarget={touched.password}
+                errorsTarget={errors.password}
               />
-            </div>
+              <CustomForm.FormErrorMessage name="password" />
+            </CustomForm.FieldWrapper>
           </div>
           <div className="flex justify-between my-6">
             <Tooltip tooltipText="현재 로그인 유지만 지원합니다">
-              <div className="flex items-center gap-2">
-                <input
-                  type="checkbox"
-                  id="keep-logged-check"
-                  className="border appearance-none size-[18px] border-gray-scale-500 checked:bg-black checked:bg-[url('/images/check.png')] checked:bg-no-repeat checked:bg-center hover:cursor-not-allowed"
-                  checked={true}
-                  disabled={true}
-                />
-                <label
-                  className="text-body3 text-gray-scale-600 hover:cursor-not-allowed"
-                  htmlFor="keep-logged-check"
-                >
-                  로그인 상태유지
-                </label>
-              </div>
+              <CustomForm.FormCheckBox
+                id="keep-logged-check"
+                checked={true}
+                disabled={true}
+              >
+                로그인 상태유지
+              </CustomForm.FormCheckBox>
             </Tooltip>
             <span
               className="underline text-body3 text-blue-gray-scale-500 underline-offset-3 hover:cursor-pointer"
@@ -172,15 +139,9 @@ export default function LoginForm() {
               비밀번호 찾기
             </span>
           </div>
-          <div className="grid pt-2 pb-6 text-center">
-            <button
-              className="p-3 text-black bg-yellow-scale-400 hover:bg-yellow-scale-500 active:bg-yellow-scale-500 disabled:bg-yellow-scale-100 disabled:text-gray-scale-700"
-              type="submit"
-              disabled={isSubmitting}
-            >
-              <span className="font-bold text-body2">로그인</span>
-            </button>
-          </div>
+          <CustomForm.FormButton type="submit" disabled={isSubmitting}>
+            로그인
+          </CustomForm.FormButton>
         </Form>
       )}
     </Formik>

client/src/app/profile/components/EditProfile/index.tsx

@@ -203,7 +203,7 @@ export default function EditProfile({
     >
       {({ values, errors, touched, isSubmitting }) => (
         <Form className="flex flex-col flex-1 gap-6 p-4 bg-white border sm:p-8">
-          <CustomForm.FormContainer>
+          {/* <CustomForm.FormContainer>
             <CustomForm.FormLabel name="아이디" />
             <span>{userId}</span>
           </CustomForm.FormContainer>
@@ -457,7 +457,7 @@ export default function EditProfile({
             <CustomForm.FormButton type="button" onClick={handleWithdrawal}>
               회원탈퇴
             </CustomForm.FormButton>
-          </div>
+          </div> */}
         </Form>
       )}
     </Formik>

client/src/app/signup/addInfo/page.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useState } from 'react';
+
+// components
+import AddFormProgress from '../components/AddFormProgress';
+import WorkingForm from '../components/WorkingForm';
+import InformationForm from '../components/InfomationForm';
+
+export default function AddInfo() {
+  const [isLast, setIsLast] = useState(false);
+  return (
+    <>
+      <AddFormProgress widthPercent={isLast ? 'w-[100%]' : 'w-[50%]'} />
+      {isLast ? (
+        <InformationForm />
+      ) : (
+        <WorkingForm goNext={() => setIsLast(true)} />
+      )}
+    </>
+  );
+}

client/src/app/signup/components/AddFormProgress/index.tsx

@@ -0,0 +1,14 @@
+export default function AddFormProgress({
+  widthPercent,
+}: {
+  widthPercent: string;
+}) {
+  return (
+    <div className="relative w-full h-4 pt-2 pb-8">
+      <div className="absolute left-0 w-full h-2 rounded top-2 bg-yellow-scale-50" />
+      <div
+        className={`absolute left-0 rounded top-2 bg-yellow-scale-500 ${widthPercent} h-2 transition-[width]`}
+      />
+    </div>
+  );
+}

client/src/app/signup/components/GithubSignUpButton/index.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { Icon } from '@iconify/react';
+
+//hooks
+import useModal from '@/hooks/modal/useModal';
+
+//constant
+import { errorMessage, ModalType } from '@/constants/constant';
+
+export default function GithubSignUpButton() {
+  const { openModal } = useModal();
+
+  return (
+    <div className="grid py-4">
+      <button
+        onClick={() =>
+          openModal({
+            type: ModalType.ERROR,
+            message: errorMessage.notComplete,
+          })
+        }
+        className="relative p-3 border border-gray-900 hover:bg-blue-gray-scale-100 active:bg-blue-gary-scale-100 disabled:bg-gray-scale-50 disabled:border-gray-800 disabled:text-blue-gray-600"
+      >
+        <Icon
+          className="absolute top-2 left-2"
+          icon="mdi:github"
+          fontSize={34}
+        />
+        <span>깃허브로 회원가입</span>
+      </button>
+    </div>
+  );
+}

client/src/app/signup/components/GoogleSignUpButton/index.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { Icon } from '@iconify/react';
+
+//hooks
+import useModal from '@/hooks/modal/useModal';
+
+//constant
+import { errorMessage, ModalType } from '@/constants/constant';
+
+export default function GoogleSignUpButton() {
+  const { openModal } = useModal();
+
+  return (
+    <div className="grid py-4">
+      <button
+        onClick={() =>
+          openModal({
+            type: ModalType.ERROR,
+            message: errorMessage.notComplete,
+          })
+        }
+        className="relative p-3 border border-gray-900 hover:bg-blue-gray-scale-100 active:bg-blue-gary-scale-100 disabled:bg-gray-scale-50 disabled:border-gray-800 disabled:text-blue-gray-600"
+      >
+        <Icon
+          className="absolute top-2 left-2"
+          icon="devicon:google"
+          fontSize={34}
+        />
+        <span>구글로 회원가입</span>
+      </button>
+    </div>
+  );
+}