feat#22-realtor-certification-ui

src/features/index.ts

@@ -1,2 +1,3 @@
 export * from './main';
 export * from './login';
+export * from './realtor-certification';

src/features/realtor-certification/components/common/CustomFileUpload.tsx

@@ -0,0 +1,143 @@
+import { useRef } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { cn } from '@/shared';
+
+import { type RealtorCertificationFormData } from '../../model';
+
+interface CustomFileUploadProps {
+  name: keyof RealtorCertificationFormData;
+  label?: string;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+  error?: string;
+}
+
+export const CustomFileUpload = ({
+  name,
+  label,
+  placeholder = '파일을 선택하거나 여기에 드래그하세요',
+  className,
+  disabled,
+  error,
+}: CustomFileUploadProps) => {
+  const form = useFormContext<RealtorCertificationFormData>();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const updateFile = (file: File | null) => {
+    form.setValue(name, file as RealtorCertificationFormData[keyof RealtorCertificationFormData]);
+    form.trigger(name);
+  };
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0] || null;
+    updateFile(file);
+  };
+
+  const handleDragOver = (event: React.DragEvent) => {
+    event.preventDefault();
+    event.currentTarget.classList.add('border-blue-500', 'bg-blue-50');
+  };
+
+  const handleDragLeave = (event: React.DragEvent) => {
+    event.preventDefault();
+    event.currentTarget.classList.remove('border-blue-500', 'bg-blue-50');
+  };
+
+  const handleDrop = (event: React.DragEvent) => {
+    event.preventDefault();
+    event.currentTarget.classList.remove('border-blue-500', 'bg-blue-50');
+
+    const file = event.dataTransfer.files[0] || null;
+    updateFile(file);
+  };
+
+  const handleClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const selectedFile = form.watch(name) as File | null;
+
+  return (
+    <div className={cn('w-full', className)}>
+      {label && <label className='mb-2 block text-lg font-medium text-gray-700'>{label}</label>}
+
+      <div
+        className={cn(
+          'relative flex min-h-[120px] cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-6 transition-colors hover:border-gray-400 hover:bg-gray-100',
+          error && 'border-red-300 bg-red-50',
+          disabled && 'cursor-not-allowed opacity-50',
+        )}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onClick={!disabled ? handleClick : undefined}
+      >
+        <input
+          ref={fileInputRef}
+          type='file'
+          accept='.pdf,.jpg,.jpeg,.png,.webp'
+          onChange={handleInputChange}
+          className='hidden'
+          disabled={disabled}
+        />
+
+        {selectedFile ? (
+          <div className='flex flex-col items-center gap-2 text-center'>
+            <div className='rounded-full bg-green-100 p-3'>
+              <svg
+                className='size-10 text-green-600'
+                fill='none'
+                stroke='currentColor'
+                viewBox='0 0 24 24'
+              >
+                <path
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                  strokeWidth={2}
+                  d='M5 13l4 4L19 7'
+                />
+              </svg>
+            </div>
+            <div>
+              <p className='text-sm font-medium text-gray-700'>{selectedFile.name}</p>
+              <p className='text-sm text-gray-500'>
+                {(selectedFile.size / 1024 / 1024).toFixed(2)} MB
+              </p>
+            </div>
+            <p className='text-sm text-gray-400'>클릭하여 다른 파일 선택</p>
+          </div>
+        ) : (
+          <div className='flex flex-col items-center gap-2 text-center'>
+            <div className='rounded-full bg-gray-200 p-5'>
+              <svg
+                className='size-10 text-gray-600'
+                fill='none'
+                stroke='currentColor'
+                viewBox='0 0 24 24'
+              >
+                <path
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                  strokeWidth={2}
+                  d='M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12'
+                />
+              </svg>
+            </div>
+            <div className='flex flex-col gap-2 py-3'>
+              <p className='text-md flex gap-1 font-medium text-gray-700'>
+                <span className='text-blue-600 hover:text-blue-500'>클릭하여 파일 선택</span>
+                <span className='text-gray-500'>또는 드래그 앤 드롭</span>
+              </p>
+              <p className='text-sm text-gray-500'>{placeholder}</p>
+            </div>
+            <div className='text-sm text-gray-400'>지원 형식: PDF, JPG, PNG, WEBP (최대 10MB)</div>
+          </div>
+        )}
+      </div>
+
+      {error && <p className='mt-2 text-sm text-red-600'>{error}</p>}
+    </div>
+  );
+};

src/features/realtor-certification/components/common/index.ts

@@ -0,0 +1 @@
+export * from './CustomFileUpload';

src/features/realtor-certification/components/features/FileUploadField.tsx

@@ -0,0 +1,28 @@
+import { useFormContext } from 'react-hook-form';
+
+import { FormField, FormItem, FormMessage } from '@/shared';
+
+import { type RealtorCertificationFormData } from '../../model';
+import { CustomFileUpload } from '../common';
+
+export const FileUploadField = () => {
+  const form = useFormContext<RealtorCertificationFormData>();
+
+  return (
+    <FormField
+      control={form.control}
+      name='certificateFile'
+      render={({ fieldState: { error } }) => (
+        <FormItem>
+          <CustomFileUpload
+            name='certificateFile'
+            label='인증서 등록'
+            placeholder='공인중개사 인증서 파일을 업로드하세요'
+            error={error?.message}
+          />
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};

src/features/realtor-certification/components/features/index.ts

@@ -0,0 +1 @@
+export * from './FileUploadField';

src/features/realtor-certification/components/index.ts

@@ -0,0 +1,2 @@
+export * from './common';
+export * from './features';

src/features/realtor-certification/constants/certification-file.ts

@@ -0,0 +1,11 @@
+// 파일 크기 제한 (10MB)
+export const MAX_FILE_SIZE_10MB = 10 * 1024 * 1024;
+
+// 허용되는 파일 타입
+export const ACCEPTED_FILE_TYPES = [
+  'application/pdf',
+  'image/jpeg',
+  'image/jpg',
+  'image/png',
+  'image/webp',
+];

src/features/realtor-certification/constants/index.ts

@@ -0,0 +1 @@
+export * from './certification-file';

src/features/realtor-certification/index.ts

@@ -0,0 +1 @@
+export * from './ui';

src/features/realtor-certification/model/index.ts

@@ -0,0 +1 @@
+export * from './schema';

src/features/realtor-certification/model/schema/index.ts

@@ -0,0 +1 @@
+export * from './realtor-certification.schema';

src/features/realtor-certification/model/schema/realtor-certification.schema.ts

@@ -0,0 +1,16 @@
+import { z } from 'zod';
+
+import { ACCEPTED_FILE_TYPES, MAX_FILE_SIZE_10MB } from '../../constants';
+
+export const realtorCertificationSchema = z.object({
+  certificateFile: z
+    .instanceof(File, { message: '인증서 파일을 업로드해주세요.' })
+    .refine((file) => file.size <= MAX_FILE_SIZE_10MB, '파일 크기는 10MB 이하여야 합니다.')
+    .refine(
+      (file) => ACCEPTED_FILE_TYPES.includes(file.type),
+      'PDF, JPG, PNG, WEBP 파일만 업로드 가능합니다.',
+    )
+    .refine((file) => file.name.trim().length > 0, '파일명이 비어있습니다.'),
+});
+
+export type RealtorCertificationFormData = z.infer<typeof realtorCertificationSchema>;

src/features/realtor-certification/ui/CertificationForm.tsx

@@ -0,0 +1,55 @@
+import { useForm } from 'react-hook-form';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import { Button, Form } from '@/shared';
+
+import { FileUploadField } from '../components';
+import { type RealtorCertificationFormData, realtorCertificationSchema } from '../model';
+
+type props = {
+  onSuccess?: () => void;
+};
+
+export const CertificationForm = ({ onSuccess }: props) => {
+  const form = useForm<RealtorCertificationFormData>({
+    resolver: zodResolver(realtorCertificationSchema),
+    defaultValues: {
+      certificateFile: undefined,
+    },
+  });
+
+  const onSubmit = async (data: RealtorCertificationFormData) => {
+    try {
+      // TODO: API 호출 로직 구현
+      console.log('제출할 데이터:', data);
+
+      // API 호출 시뮬레이션
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      // 제출 성공 시 상태 변경
+      onSuccess?.();
+    } catch (error) {
+      console.error('제출 실패:', error);
+      // TODO: 에러 처리 로직
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={(e) => e.preventDefault()}>
+        <div className='space-y-6'>
+          <FileUploadField />
+          <Button
+            onClick={form.handleSubmit(onSubmit)}
+            type='submit'
+            className='h-12 w-full rounded-md text-lg'
+            disabled={!form.formState.isValid}
+          >
+            제출하기
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};

src/features/realtor-certification/ui/SubmitSuccessSection.tsx

@@ -0,0 +1,20 @@
+import { useNavigate } from 'react-router-dom';
+
+import { Button, ROUTER_PATH } from '@/shared';
+
+export const SubmitSuccessSection = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className='flex flex-col items-center justify-center gap-8 text-center'>
+      <div className='flex flex-col items-center justify-center gap-2 text-center'>
+        <h1 className='text-2xl font-semibold'>공인중개사 인증서가 제출되었습니다!</h1>
+        <p className='text-lg text-gray-500'>빠른 내부 심사 후 중개사 자격을 드릴게요!</p>
+      </div>
+
+      <Button className='h-12 w-2/3 rounded-md text-lg' onClick={() => navigate(ROUTER_PATH.MAIN)}>
+        메인 화면으로 돌아가기
+      </Button>
+    </div>
+  );
+};

src/features/realtor-certification/ui/TitleSection.tsx

@@ -0,0 +1,8 @@
+export const TitleSection = () => {
+  return (
+    <h1 className='flex flex-col items-center text-[28px] font-semibold'>
+      <span>공인중개사 인증하고</span>
+      <span>간편하고 투명하게 계약해요!</span>
+    </h1>
+  );
+};

src/features/realtor-certification/ui/index.ts

@@ -0,0 +1,3 @@
+export * from './CertificationForm';
+export * from './TitleSection';
+export * from './SubmitSuccessSection';

src/pages/realtor/certification/RealtorCertificationPage.tsx

@@ -1,3 +1,22 @@
+import { useState } from 'react';
+
+import { CertificationForm, SubmitSuccessSection, TitleSection } from '@/features';
+import { AuthLogoSection } from '@/shared';
+
 export default function RealtorCertificationPage() {
-  return <div>RealtorCertificationPage</div>;
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  return (
+    <div className='flex h-screen flex-col items-center justify-center'>
+      <div className='flex flex-col items-center gap-12'>
+        <AuthLogoSection />
+        {!isSubmitted && <TitleSection />}
+        {isSubmitted ? (
+          <SubmitSuccessSection />
+        ) : (
+          <CertificationForm onSuccess={() => setIsSubmitted(true)} />
+        )}
+      </div>
+    </div>
+  );
 }

src/shared/components/features/layout/index.ts

@@ -1,2 +1 @@
 export * from './Header';
-export * from './Footer';

src/shared/types/layout.type.ts

@@ -5,8 +5,3 @@ export type LayoutType = {
 };
 
 export type HeaderType = LayoutType[keyof LayoutType];
-export type FooterType = Exclude<HeaderType, 'Realtor'>;
-
-export type LayoutToFooterMap = {
-  [K in keyof LayoutType]: K extends 'Realtor' ? 'Main' : LayoutType[K];
-};