feat: Ocr test중

Kernel360 · Apr 5, 2024 · 82de25d · 82de25d
1 parent 877fd65
commit 82de25d
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 20 deletions.
diff --git a/public/assets/OcrTest.png b/public/assets/OcrTest.png
diff --git a/src/app/(auth)/change-password/page.tsx b/src/app/(auth)/change-password/page.tsx
@@ -17,22 +17,29 @@ import Spacing from '@shared/spacing/Spacing';
 import TextField from '@shared/text-field/TextField';
 import Title from '@shared/title/Title';
 
-const FixedBottomButton = dynamic(() => { return import('@shared/fixedBottomButton/FixedBottomButton'); }, {
-  ssr: false,
-});
+const FixedBottomButton = dynamic(
+  () => {
+    return import('@shared/fixedBottomButton/FixedBottomButton');
+  },
+  {
+    ssr: false,
+  },
+);
 
 type ChangePasswordType = {
-  confirmPassword: string
+  confirmPassword: string;
 } & ChangePassword;
 
 function ChangePasswordPage() {
   const {
-    register, handleSubmit, watch,
+    register,
+    handleSubmit,
+    watch,
     formState: { isValid, errors, isDirty },
   } = useForm<ChangePasswordType>({
     mode: 'onBlur',
   });
-
+  console.log(isDirty);
   const { mutate } = useChangePassword();
 
   const onSubmit = (data: ChangePasswordType) => {
@@ -45,7 +52,12 @@ function ChangePasswordPage() {
       <Header />
       <Spacing size={16} />
       <main className="mainContainer">
-        <Title title="비밀번호 변경" description="사용하실 새 비밀번호를 입력해주세요." size={4} descriptionColor="gray400" />
+        <Title
+          title="비밀번호 변경"
+          description="사용하실 새 비밀번호를 입력해주세요."
+          size={4}
+          descriptionColor="gray400"
+        />
         <Spacing size={40} />
         <TextField
           label="새 비밀번호"
@@ -66,17 +78,15 @@ function ChangePasswordPage() {
           isPasswordType
           {...register('confirmPassword', {
             required: true,
-            validate: (value) => { return value === watch('password') || false; },
+            validate: (value) => {
+              return value === watch('password') || false;
+            },
           })}
           hasError={!!errors.confirmPassword}
           helpMessage={VALIDATION_MESSAGE_MAP.confirmPassword.message}
         />
         <div>
-          <FixedBottomButton
-            disabled={!isValid || !isDirty}
-            onClick={handleSubmit(onSubmit)}
-            size="medium"
-          >
+          <FixedBottomButton disabled={!isValid || !isDirty} onClick={handleSubmit(onSubmit)} size="medium">
             다음
           </FixedBottomButton>
         </div>

diff --git a/src/app/(auth)/required-password/page.tsx b/src/app/(auth)/required-password/page.tsx
@@ -1,7 +1,9 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
+/* eslint-disable @typescript-eslint/no-unused-vars */
 
 'use client';
 
+// import { useEffect } from 'react';
 import { FieldValues, useForm } from 'react-hook-form';
 
 import { useRouter } from 'next/navigation';
@@ -15,7 +17,11 @@ import Title from '@shared/title/Title';
 
 function RequiredPasswordPage() {
   const router = useRouter();
-  const { register, handleSubmit, formState: { dirtyFields } } = useForm();
+  const {
+    register,
+    handleSubmit,
+    formState: { dirtyFields },
+  } = useForm();
 
   const onSubmit = (data: FieldValues) => {
     const { password } = data;
@@ -32,7 +38,12 @@ function RequiredPasswordPage() {
       <Header />
       <Spacing size={30} />
       <form onSubmit={handleSubmit(onSubmit)} className="mainContainer">
-        <Title title="비밀번호 입력" description="탈퇴하시려면 비밀번호를 입력해주세요." size={7} descriptionColor="gray400" />
+        <Title
+          title="비밀번호 입력"
+          description="탈퇴하시려면 비밀번호를 입력해주세요."
+          size={7}
+          descriptionColor="gray400"
+        />
         <Spacing size={30} />
         <TextField
           label="비밀번호"
@@ -42,7 +53,12 @@ function RequiredPasswordPage() {
           helpMessage={VALIDATION_MESSAGE_MAP.confirmPassword.message}
         />
         <Spacing size={40} />
-        <Button type="submit" disabled={!dirtyFields.password} size="medium" full>
+        <Button
+          type="submit"
+          disabled={!dirtyFields.password}
+          size="medium"
+          full
+        >
           확인
         </Button>
       </form>

diff --git a/src/components/icons/Caption.tsx b/src/components/icons/Caption.tsx
@@ -0,0 +1,40 @@
+interface BackProps {
+  width?: number;
+  height?: number;
+}
+
+function Caption({ width = 20, height = 20 }: BackProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="caption">
+        <g id="Group 54490">
+          <path
+            id="Vector"
+            d="M17.9998 9.99992C17.9998 5.58168 14.4181 2 9.99992 2C5.58168 2 2 5.58168 2 9.99992C2 14.4181 5.58168 17.9998 9.99992 17.9998C14.4181 17.9998 17.9998 14.4181 17.9998 9.99992Z"
+            fill="#B4B5BF"
+          />
+          <path
+            id="Vector_2"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M9.61689 7.06986C8.95466 7.25254 8.59994 7.6919 8.59994 8.18656H6.59996C6.59996 6.5265 7.84153 5.48493 9.08506 5.14189C10.3133 4.80308 11.8949 5.0392 12.8274 6.28681C13.2114 6.7872 13.4141 7.40286 13.3991 8.03429C13.3841 8.66883 13.1501 9.27706 12.7393 9.76002L12.718 9.78506L12.6951 9.80866C12.3104 10.205 11.7933 10.4562 11.4805 10.6081C11.4268 10.6342 11.3791 10.6574 11.3391 10.6779C11.0118 10.8455 10.9134 10.9395 10.8645 11.0307L10.8642 11.0337V11.6001H8.86426V11.0256C8.86546 10.7539 8.9213 10.4858 9.02802 10.2365L9.03402 10.2224L9.0405 10.2085C9.38737 9.4625 10.0136 9.10971 10.4273 8.89779C10.5307 8.84475 10.6207 8.79971 10.6998 8.76019C10.9783 8.62067 11.1203 8.54955 11.2365 8.43899C11.3397 8.30703 11.3958 8.14859 11.3997 7.98673C11.4038 7.81445 11.3485 7.64366 11.2392 7.50224L11.2334 7.49475L11.2278 7.48714C10.9218 7.07533 10.292 6.88364 9.61689 7.06986Z"
+            fill="white"
+          />
+          <path
+            id="Vector_3"
+            d="M10 15.0882C10.6627 15.0882 11.2 14.551 11.2 13.8883C11.2 13.2255 10.6627 12.6883 10 12.6883C9.33729 12.6883 8.80002 13.2255 8.80002 13.8883C8.80002 14.551 9.33729 15.0882 10 15.0882Z"
+            fill="white"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default Caption;
diff --git a/src/components/shared/ocr/Ocr.tsx b/src/components/shared/ocr/Ocr.tsx
@@ -5,12 +5,10 @@ import { createWorker } from 'tesseract.js';
 
 const Ocr = async () => {
   const worker = await createWorker('eng+kor', 1, {});
-  const Img = async () => {
+  const Img = async ({ file }: { file: File }) => {
     const {
       data: { text },
-    } = await worker.recognize(
-      'https://tesseract.projectnaptha.com/img/eng_bw.png',
-    );
+    } = await worker.recognize(file);
 
     // console.log(text);
     await worker.terminate();