From b4f57c85ec00bffe1a83d1e5152098544d742493 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Fri, 12 Jun 2026 05:10:03 +0900
Subject: [PATCH] =?UTF-8?q?refactor(outsourcing):=20=EC=9E=85=EB=A0=A5=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=83=81=EC=88=98=ED=99=94=20+?=
 =?UTF-8?q?=20goNext=20=EB=B0=A9=EC=96=B4=EC=A0=81=20=EC=9E=AC=EA=B2=80?=
 =?UTF-8?q?=EC=A6=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 반복되는 INPUT_STYLE 객체를 파일 상단 상수로 추출하여 5곳에서 재사용
   - textarea (단계③)
   - input[name] (단계④)
   - input[email] (단계④)
   - input[phone] (단계④)
   - button.prev (네비게이션)

2. goNext 함수 첫 줄에 방어적 재검증 추가
   - if (!stepValid(step)) return; 추가
   - step dependency 복원 (useCallback 의존성 배열)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 app/components/OutsourcingRequestForm.tsx | 34 +++++++++--------------
 1 file changed, 13 insertions(+), 21 deletions(-)

diff --git a/app/components/OutsourcingRequestForm.tsx b/app/components/OutsourcingRequestForm.tsx
index ee149aa..574a0c3 100644
--- a/app/components/OutsourcingRequestForm.tsx
+++ b/app/components/OutsourcingRequestForm.tsx
@@ -15,6 +15,12 @@ import { trackEvent } from '@/lib/gtag';
 const KOR_TIGHT = { letterSpacing: '-0.02em' } as const;
 const KOR_BODY = { letterSpacing: '-0.01em' } as const;
 
+const INPUT_STYLE = {
+  background: 'var(--jsm-surface)',
+  border: '1px solid var(--jsm-line)',
+  color: 'var(--jsm-ink)',
+} as const;
+
 const PROJECT_TYPES = [
   '웹 서비스',
   '웹사이트',
@@ -117,9 +123,10 @@ export default function OutsourcingRequestForm() {
   };
 
   const goNext = useCallback(() => {
+    if (!stepValid(step)) return;
     setError('');
     setStep((s) => Math.min(s + 1, STEPS.length));
-  }, []);
+  }, [step]);
 
   const goPrev = useCallback(() => {
     setError('');
@@ -398,9 +405,7 @@ export default function OutsourcingRequestForm() {
               placeholder="만들고 싶은 것, 참고 서비스, 현재 상황을 자유롭게 적어주세요. 기획이 정리되지 않았어도 괜찮습니다."
               className="w-full px-3.5 py-3 rounded-lg text-sm leading-relaxed resize-none outline-none focus-visible:ring-2 focus-visible:ring-[var(--jsm-accent)]"
               style={{
-                background: 'var(--jsm-surface)',
-                border: '1px solid var(--jsm-line)',
-                color: 'var(--jsm-ink)',
+                ...INPUT_STYLE,
                 ...KOR_BODY,
               }}
             />
@@ -450,11 +455,7 @@ export default function OutsourcingRequestForm() {
                   disabled={submitting}
                   placeholder="홍길동"
                   className="w-full px-3.5 py-2.5 rounded-lg text-sm outline-none focus-visible:ring-2 focus-visible:ring-[var(--jsm-accent)]"
-                  style={{
-                    background: 'var(--jsm-surface)',
-                    border: '1px solid var(--jsm-line)',
-                    color: 'var(--jsm-ink)',
-                  }}
+                  style={INPUT_STYLE}
                 />
               </div>
 
@@ -476,11 +477,7 @@ export default function OutsourcingRequestForm() {
                   disabled={submitting}
                   placeholder="example@email.com"
                   className="w-full px-3.5 py-2.5 rounded-lg text-sm outline-none focus-visible:ring-2 focus-visible:ring-[var(--jsm-accent)]"
-                  style={{
-                    background: 'var(--jsm-surface)',
-                    border: '1px solid var(--jsm-line)',
-                    color: 'var(--jsm-ink)',
-                  }}
+                  style={INPUT_STYLE}
                 />
               </div>
 
@@ -501,11 +498,7 @@ export default function OutsourcingRequestForm() {
                   disabled={submitting}
                   placeholder="010-0000-0000 (선택)"
                   className="w-full px-3.5 py-2.5 rounded-lg text-sm outline-none focus-visible:ring-2 focus-visible:ring-[var(--jsm-accent)]"
-                  style={{
-                    background: 'var(--jsm-surface)',
-                    border: '1px solid var(--jsm-line)',
-                    color: 'var(--jsm-ink)',
-                  }}
+                  style={INPUT_STYLE}
                 />
               </div>
             </div>
@@ -537,9 +530,8 @@ export default function OutsourcingRequestForm() {
               disabled={submitting}
               className="px-5 py-3 rounded-lg text-sm font-semibold border transition-colors hover:bg-[var(--jsm-surface-alt)] disabled:opacity-50 disabled:cursor-not-allowed"
               style={{
-                color: 'var(--jsm-ink)',
+                ...INPUT_STYLE,
                 borderColor: 'var(--jsm-line)',
-                background: 'var(--jsm-surface)',
                 ...KOR_BODY,
               }}
             >