Fix(web): Ocr Validation 수정 by huniversal · Pull Request #325 · team-kareer/kareer-client

huniversal · 2026-04-10T07:24:44Z

📌 Summary

[Fix] OCR Validation 적용 #314

📚 Tasks

setValue에 shuldValidate 추가
visaStartDate 변경 시 visaEcpiredAt 재검증 트리거 추가

👀 To Reviewer

기존 onboarding form에는 mode: onChange로 설정이 되어 있었습니다.
근데 mode: onChange는 사용자가 input을 직접 타이핑하거나 변경할때 validation이 실행되기 때문에
ocr를 통해 값을 받는 경우에는 사용자의 인터랙션 없이 setValue로 값을 주입하기 때문에 mode: onChange가 동작하지 않았던거 같아요

그래서 shouldValidate: true 옵션을 통해 폼이 값을 주입한 이후에 필드에 등록된 validate를 사용자가 직접 입력한 것처럼 트리거 하도록 처리하였습니당

비자 발급일에 따른 비자 만료일 재검증 로직

기존에는 비자 시작일을 변경하더라도 그에 따른 비자 만료일에서 validation이 동작하지 않는 이슈가 있었고
유저가 값을 직접 지우거나 다시 입력해야만 에러 문구가 떴습니다.

기존 온보딩 form 같은 경우 해당 필드 자체가 변경될 때만 validate를 재실행하기 때문에
useWatch 대신 getValue를 사용하여 비자 시작일이 변경될 때 trigger를 실행하도록 하였습니다.

📸 Screenshot

업로드 데이터

validation 적용

2026-04-10.15.53.03.mov

비자 시작일 변경에 따른 비자 만료일 트리거 적용

2026-04-10.15.57.32.mov

yooncandooit · 2026-04-10T07:32:39Z

...rding/ui/step/identity-visaVerification/ui/visa-info-form-section/visa-info-form-section.tsx

+  useEffect(() => {
+    if (getValues('visaExpiredAt')) {
+      trigger('visaExpiredAt');
+    }
+  }, [visaStartDate, trigger, getValues]);
+


엇 visaStartDate가 바뀔 때도 트리거 해야하는군요??
제가 담당한 부분은 visaType 변경 시 visaExpiredAt의 validate가 트리거 되는 부분인데요

합치는 작업 필요할 거 같아요!
#326

오히려 visaType은 괜찮은지 궁금하네요?! 검증이 된 상태로 visaType이 변경된다면 어떻게 되는지 확인 부탁드릴게요!

현재는 비자타입 변경에 따른 visaExpiredAt 트리거 변경은 없습니다!!

validate가 적용된 상태로 visa 타입이 변경되었을 때 문제가 없는지가 궁금했어요. 그래서 useEffect에 visaType을 넣을 필요도 없는지도요!

2026-04-12.12.45.11.mov

아 useEffect에 visaType를 넣지 않으면 비자 타입이 바뀔때 validation이 적용되지 않습니다!

그러면 visaType을 deps 배열에 넣는게 맞아보이네요???

네 visaType도 배열에 추가할게요!!

jeonghoon11

코맨트만 한번 확인 부탁드려요!

jeonghoon11 · 2026-04-10T09:54:58Z

...rding/ui/step/identity-visaVerification/ui/visa-info-form-section/visa-info-form-section.tsx

-  const { control } = useFormContext<OnboardingForm>();
-  const visaType = useWatch({ control, name: 'visaType' });
+  const { control, getValues, trigger } = useFormContext<OnboardingForm>();
+  // const visaType = useWatch({ control, name: 'visaType' });


주석은 삭제해주세요!

jeonghoon11 · 2026-04-10T09:56:55Z

...rding/ui/step/identity-visaVerification/ui/visa-info-form-section/visa-info-form-section.tsx

+  useEffect(() => {
+    if (getValues('visaExpiredAt')) {
+      trigger('visaExpiredAt');
+    }
+  }, [visaStartDate, trigger, getValues]);
+


오히려 visaType은 괜찮은지 궁금하네요?! 검증이 된 상태로 visaType이 변경된다면 어떻게 되는지 확인 부탁드릴게요!

cloudflare-workers-and-pages · 2026-04-13T03:04:32Z

Deploying kareer-client with Cloudflare Pages

Latest commit:	`d64b681`
Status:	✅ Deploy successful!
Preview URL:	https://ce93c4e9.kareer-client.pages.dev
Branch Preview URL:	https://fix-ocr-validation--314.kareer-client.pages.dev

View logs

jeonghoon11 · 2026-04-13T03:53:59Z

apps/web/src/widgets/onboarding/ui/step/identity-visaVerification/identity-visaVerification.tsx

-      setValue('birthDate', data.data?.birthDate ?? '', {
-        shouldValidate: true,
-      });
+      setValue('name', data.data?.fullName ?? '');


헷갈리는데 PR에 작성하신것 처럼

shouldValidate: true 옵션을 통해 폼이 값을 주입한 이후에 필드에 등록된 validate를 사용자가 직접 입력한 것처럼 트리거 하도록 처리하였습니당

이 내용은 다시 필요 없어진건가요??

이번 이슈에서 총 2가지의 작업을 진행했어요!

OCR로 받은 데이터값에 Validation이 적용되지 않는 이슈

비자 타입 및 비자 시작일이 변경되는 경우 비자 만료일에 Validation이 바로 적용되지 않는 이슈

shouldValidate옵션은 1번쨰 이슈를 해결하기 위해 OCR값이 채워질때 유효성에 걸리는 순간 필드 자체를 즉시 검증하는 역할을 수행합니다.

트리거를 걸어둔 부분은 기존의 비자 타입, 비자 시작&만료일 input을 전부 채워둔 상태에서 비자 타입 및 비자 시작일이 변경되는 경우 유효성을 바로 검증하기 위한 작업을 진행하였어요

그래서 shouldValidate의 옵션도 필요합니다!!

passport에서 제거하신 이유가 궁금한거였어요! visa에서만 해당 옵션이 필요한건가요??

네! passport에는 필드 자체가 독립적이라 필요하지 않다고 생각했어요
visa에서만 의존관계이기 때문에 해당 옵션이 필요한 구조인거 같아요

passport ocr에도 shouldValidate 옵션을 추가하였습니다!

jeonghoon11

고생해쓰용~~

huniversal added 5 commits April 9, 2026 15:21

fix: shouldValidate 옵션 추가

ece23a5

fix: getValue를 통해 validation 실행 타이밍에 값 읽도록 변경

2f22826

fix: 비자 발급일 변경에 따른 비자 만료일 trigger 설정

3a41dcb

fix: useEffect 참조 추가

fc3d05e

Merge branch 'develop' into fix/ocr-validation/#314

66f19ca

huniversal linked an issue Apr 10, 2026 that may be closed by this pull request

[Fix] OCR Validation 적용 #314

Open

1 task

huniversal requested a review from a team as a code owner April 10, 2026 07:24

github-project-automation bot added this to Kareer-Client-Backlog Apr 10, 2026

github-project-automation bot moved this to Todo in Kareer-Client-Backlog Apr 10, 2026

github-actions bot added the 🐛 FIX 문제 해결 작업 label Apr 10, 2026

github-actions bot assigned huniversal Apr 10, 2026

github-actions bot added the 🦍 훈진 label Apr 10, 2026

yooncandooit reviewed Apr 10, 2026

View reviewed changes

jeonghoon11 reviewed Apr 10, 2026

View reviewed changes

huniversal added 3 commits April 12, 2026 12:44

fix: 충돌 해결

2ec4517

fix: visaType 추가

7299098

Merge branch 'develop' into fix/ocr-validation/#314

b162cdf

jeonghoon11 reviewed Apr 13, 2026

View reviewed changes

fix: passport ocr shouldValidate 적용

93dee19

jeonghoon11 approved these changes Apr 13, 2026

View reviewed changes

fix: 충돌 해결

d64b681

Conversation

huniversal commented Apr 10, 2026

📌 Summary

📚 Tasks

👀 To Reviewer

비자 발급일에 따른 비자 만료일 재검증 로직

📸 Screenshot

validation 적용

비자 시작일 변경에 따른 비자 만료일 트리거 적용

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jeonghoon11 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cloudflare-workers-and-pages bot commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying kareer-client with Cloudflare Pages

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jeonghoon11 left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

cloudflare-workers-and-pages bot commented Apr 13, 2026 •

edited

Loading