[Feat] 유저 등록 페이지 구현 (#58)

* rename: JoinProgressBar -> RegisterProgress

* feat: ProfileForm button 제거 및 submitAction prop 추가

* feat: Button type prop 추가

* feat: form hook에서 onsubmit 삭제, form prop으로 받게 변경

* feat: formConfig form hook에서 분리

* feat: PortfolioInput 구현

* feat: profile, portfolio step component 구현

* feat: 유저 등록 페이지 구현

* chore: app router user register page 추가

* refactor: auth 관련 파일들 index 처리

* refactor: register page index 처리

src/app/appRouter.tsx

@@ -6,6 +6,7 @@ import {
   ArchiveListPage,
   WriteGatheringPage,
   WriteArchivePage,
+  RegisterPage,
 } from '@/pages';
 import { Layout } from '@/widgets';
 
@@ -46,6 +47,10 @@ const AppRouter = () => {
           path: '/user',
           element: <>{/** userPage */}</>,
         },
+        {
+          path: '/register',
+          element: <RegisterPage />,
+        },
       ],
     },
   ]);

src/features/auth/form.hook.ts

@@ -6,7 +6,7 @@ import type { FormConfigType } from './form.types';
 import { JOB_CATEGORIES, type FormValues } from './form.types';
 
 interface useProfileFormProps {
-  formConfig: FormConfigType;
+  formConfig: FormConfigType<FormValues>;
 }
 
 export const useProfileForm = ({ formConfig }: useProfileFormProps) => {
@@ -21,7 +21,7 @@ export const useProfileForm = ({ formConfig }: useProfileFormProps) => {
       minorJobGroup: null,
       jobTitle: '',
       division: 'student',
-      url: [{ value: '' }],
+      url: [],
       imageUrl: '',
     },
   });
@@ -57,13 +57,34 @@ export const useProfileForm = ({ formConfig }: useProfileFormProps) => {
     method.setValue('minorJobGroup', null, { shouldValidate: true });
   }, [majorJobGroup, method]);
 
-  const onSubmit = (data: FormValues) => {
-    console.log('폼 데이터:', data);
-  };
-
   return {
     formStructure,
     method,
-    onSubmit,
   };
 };
+
+export const usePortfolioInput = () => {
+  const [portfolioUrl, setPortfolioUrl] = useState<string>('');
+  const [error, setError] = useState<string>('');
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPortfolioUrl(e.target.value);
+    validate(e.target.value);
+  };
+
+  const validate = (value: string) => {
+    if (value.trim() === '') {
+      setError('포트폴리오 URL을 입력해주세요.');
+      return false;
+    }
+
+    if (!(value.startsWith('https://') || value.startsWith('http://'))) {
+      setError('URL 형식이 잘못됬습니다.');
+      return false;
+    }
+
+    setError('');
+    return true;
+  };
+  return { portfolioUrl, error, handleInputChange, validate };
+};

src/features/auth/form.types.ts

@@ -38,9 +38,9 @@ interface FieldSetInfo {
   inputs: InputInfo[];
 }
 
-export interface FormConfigType {
+export interface FormConfigType<T extends object> {
   structure: FieldSetInfo[];
-  validation: ObjectSchema<FormValues>;
+  validation: ObjectSchema<T>;
 }
 
 export const JOB_CATEGORIES = [

src/features/auth/form.utils.ts

@@ -1,6 +1,6 @@
 import * as yup from 'yup';
 
-import type { FormConfigType } from './form.types';
+import type { FormConfigType, FormValues } from './form.types';
 import { JOB_CATEGORIES, JOB_DIVISION } from './form.types';
 
 export const formValidation = yup.object({
@@ -36,10 +36,10 @@ export const formValidation = yup.object({
     )
     .max(5, 'URL은 최대 5개 까지 작성 가능합니다.')
     .defined(),
-  imageUrl: yup.string().required('프로필 이미지를 등록해주세요.'),
+  imageUrl: yup.string().defined(), //.required('프로필 이미지를 등록해주세요.'),
 });
 
-export const formConfig: FormConfigType = {
+export const formConfig: FormConfigType<FormValues> = {
   structure: [
     {
       title: '기본 정보',

src/features/auth/index.ts

@@ -1 +1,5 @@
-export { GoogleLogin } from './ui/GoogleLogin';
+export * from './ui';
+export * from './form.hook';
+export * from './form.types';
+export * from './form.utils';
+export * from './progress.type';

src/features/auth/ui/PortfolioInput.module.scss

@@ -0,0 +1,14 @@
+.portfolioInput {
+  width: 100%;
+  max-width: 446px;
+
+  & > .errorMessage {
+    display: inline-block;
+    width: 100%;
+    padding-top: 0.25rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: $red;
+    text-align: center;
+  }
+}

src/features/auth/ui/PortfolioInput.tsx

@@ -0,0 +1,18 @@
+import styles from './PortfolioInput.module.scss';
+
+import { Input } from '@/shared/ui';
+
+interface PortfolioInputProps {
+  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  error: string;
+  value: string;
+}
+
+export const PortfolioInput = ({ handleInputChange, error, value }: PortfolioInputProps) => {
+  return (
+    <div className={styles.portfolioInput}>
+      <Input onChange={handleInputChange} placeholder='https://' value={value} />
+      {error && <span className={styles.errorMessage}>{error}</span>}
+    </div>
+  );
+};

src/features/auth/ui/ProfileForm.module.scss

@@ -31,14 +31,3 @@
     font-weight: bold;
   }
 }
-
-.submitBtnWrapper {
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-  padding: 1rem 0;
-
-  & > button {
-    padding: 0.625rem 2rem;
-  }
-}

src/features/auth/ui/ProfileForm.tsx

@@ -3,16 +3,23 @@ import { FormProvider } from 'react-hook-form';
 import { FormField } from './FormField';
 import styles from './ProfileForm.module.scss';
 import { useProfileForm } from '../form.hook';
-import { formConfig } from '../form.utils';
+import type { FormConfigType, FormValues } from '../form.types';
 
-import { Button } from '@/shared/ui';
+interface ProfileFormProps {
+  formConfig: FormConfigType<FormValues>;
+  onSubmit: (data: FormValues) => void;
+}
 
-export const ProfileForm = () => {
-  const { method, formStructure, onSubmit } = useProfileForm({ formConfig });
+export const ProfileForm = ({ onSubmit, formConfig }: ProfileFormProps) => {
+  const { method, formStructure } = useProfileForm({ formConfig });
 
   return (
     <FormProvider {...method}>
-      <form className={styles.profileForm} onSubmit={method.handleSubmit(onSubmit)}>
+      <form
+        className={styles.profileForm}
+        id='profile-form'
+        onSubmit={method.handleSubmit(onSubmit)}
+      >
         {formStructure.map(section => (
           <fieldset className={styles.formSection} key={section.title}>
             <legend>{section.title}</legend>
@@ -21,9 +28,6 @@ export const ProfileForm = () => {
             })}
           </fieldset>
         ))}
-        <div className={styles.submitBtnWrapper}>
-          <Button type='submit'>다음</Button>
-        </div>
       </form>
     </FormProvider>
   );

src/features/auth/ui/JoinProgressBar.module.scss → src/features/auth/ui/RegisterProgress.module.scss

@@ -2,13 +2,13 @@
   display: flex;
   column-gap: 0.5rem;
   align-items: center;
-  padding: 1rem;
 }
 
-.progressDot {
+.progressStep {
   display: flex;
   flex-direction: column;
   align-items: center;
+  min-width: 7.5rem;
 
   & > i {
     display: flex;

src/features/auth/ui/JoinProgressBar.tsx → src/features/auth/ui/RegisterProgress.tsx

@@ -1,7 +1,7 @@
 import cn from 'classnames';
 import React from 'react';
 
-import styles from './JoinProgressBar.module.scss';
+import styles from './RegisterProgress.module.scss';
 import type { JoinProgressStage } from '../progress.type';
 
 interface ProgressBarProps {
@@ -14,14 +14,14 @@ interface JoinProgressBarProps {
   joinStages: JoinProgressStage[];
 }
 
-const ProgressDot = ({
+const ProgressStep = ({
   currentStage,
   stage,
   name,
 }: JoinProgressStage & { currentStage: number }) => {
   return (
     <div
-      className={cn(styles.progressDot, {
+      className={cn(styles.progressStep, {
         [styles.active]: currentStage > stage,
         [styles.doing]: stage === currentStage,
       })}
@@ -42,12 +42,12 @@ const ProgressBar = ({ currentStage, prevStage }: ProgressBarProps) => {
   );
 };
 
-export const JoinProgressbar = ({ currentStage, joinStages }: JoinProgressBarProps) => {
+export const RegisterProgress = ({ currentStage, joinStages }: JoinProgressBarProps) => {
   return (
     <div className={styles.progressWrapper}>
       {joinStages.map((stage, idx) => (
         <React.Fragment key={stage.name}>
-          <ProgressDot currentStage={currentStage} name={stage.name} stage={stage.stage} />
+          <ProgressStep currentStage={currentStage} name={stage.name} stage={stage.stage} />
           {idx !== joinStages.length - 1 && (
             <ProgressBar currentStage={currentStage} prevStage={stage.stage} />
           )}

src/features/auth/ui/index.ts

@@ -0,0 +1,6 @@
+export * from './FormField';
+export * from './FormInputs';
+export * from './GoogleLogin';
+export * from './PortfolioInput';
+export * from './ProfileForm';
+export * from './RegisterProgress';

src/pages/RegisterPage/RegisterPage.module.scss

@@ -0,0 +1,32 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 2rem 7.5rem;
+}
+
+.sectionHeader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 1024px;
+
+  & > h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+  }
+
+  & > div {
+    min-width: 90%;
+    padding: 2rem 0;
+  }
+}
+
+.sectionContent {
+  flex: 1;
+  width: 100%;
+  max-width: 1024px;
+}

src/pages/RegisterPage/RegisterPage.tsx

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+
+import styles from './RegisterPage.module.scss';
+
+import { RegisterProgress, JOIN_STAGES } from '@/features/auth';
+import { ProfileStep, PortfolioStep } from '@/widgets/RegisterUser';
+
+const StepComponentList = [ProfileStep, PortfolioStep];
+
+export const RegisterPage = () => {
+  const [stage, setStage] = useState<number>(1);
+
+  const StepComponent = StepComponentList[stage - 1];
+
+  return (
+    <section className={styles.container}>
+      <header className={styles.sectionHeader}>
+        <h2>회원가입</h2>
+        <RegisterProgress currentStage={stage} joinStages={JOIN_STAGES} />
+      </header>
+
+      <div className={styles.sectionContent}>{<StepComponent setStage={setStage} />}</div>
+    </section>
+  );
+};

src/pages/index.ts

@@ -1,5 +1,6 @@
 export * from './GatheringListPage';
 export { WriteArchivePage } from './WriteArchivePage/WriteArchivePage';
 export { DetailArchivePage } from './DetailArchivePage/DetailArchivePage';
+export { RegisterPage } from './RegisterPage/RegisterPage';
 export { WriteGatheringPage } from './WriteGatheringPage/WriteGatheringPage';
-export { ArchiveListPage } from './ArchiveListPage/ArchiveListPage';
+export { ArchiveListPage } from './ArchiveListPage/ArchiveListPage';

src/shared/ui/Button/Button.tsx

@@ -15,11 +15,18 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
   skin?: ButtonSkins;
   className?: string;
+  type?: 'submit' | 'reset' | 'button';
 }
 
-export const Button = ({ children, skin = 'primary', className, ...restProps }: Props) => {
+export const Button = ({
+  children,
+  type = 'button',
+  skin = 'primary',
+  className,
+  ...restProps
+}: Props) => {
   return (
-    <button className={cn(styles.btn, styles[skin], className)} {...restProps}>
+    <button className={cn(styles.btn, styles[skin], className)} type={type} {...restProps}>
       {children}
     </button>
   );