전체적인 리팩토링

features/settings/components/KisProfileForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useTransition } from "react";
+import { useEffect, useState, useTransition } from "react";
 import { useShallow } from "zustand/react/shallow";
 import {
   CreditCard,
@@ -13,8 +13,15 @@ import {
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
 import { InlineSpinner } from "@/components/ui/loading-spinner";
 import { validateKisProfile } from "@/features/settings/apis/kis-auth.api";
+import {
+  getRememberedKisValue,
+  isKisRememberEnabled,
+  setKisRememberEnabled,
+  setRememberedKisValue,
+} from "@/features/settings/lib/kis-remember-storage";
 import { useKisRuntimeStore } from "@/features/settings/store/use-kis-runtime-store";
 import { SettingsCard } from "./SettingsCard";
 
@@ -28,6 +35,7 @@ export function KisProfileForm() {
   const {
     kisAccountNoInput,
     verifiedCredentials,
+    hasHydrated,
     isKisVerified,
     isKisProfileVerified,
     verifiedAccountNo,
@@ -38,6 +46,7 @@ export function KisProfileForm() {
     useShallow((state) => ({
       kisAccountNoInput: state.kisAccountNoInput,
       verifiedCredentials: state.verifiedCredentials,
+      hasHydrated: state._hasHydrated,
       isKisVerified: state.isKisVerified,
       isKisProfileVerified: state.isKisProfileVerified,
       verifiedAccountNo: state.verifiedAccountNo,
@@ -50,6 +59,40 @@ export function KisProfileForm() {
   const [statusMessage, setStatusMessage] = useState<string | null>(null);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [isValidating, startValidateTransition] = useTransition();
+  // [State] 계좌번호 입력값을 브라우저 재접속 후 자동 복원할지 여부
+  const [rememberAccountNo, setRememberAccountNo] = useState(() =>
+    isKisRememberEnabled("accountNo"),
+  );
+
+  useEffect(() => {
+    if (!hasHydrated || kisAccountNoInput.trim()) {
+      return;
+    }
+
+    // [Step 1] 세션 입력값이 비어 있을 때만 저장된 계좌번호를 복원합니다.
+    const rememberedAccountNo = getRememberedKisValue("accountNo");
+    if (rememberedAccountNo) {
+      setKisAccountNoInput(rememberedAccountNo);
+    }
+  }, [hasHydrated, kisAccountNoInput, setKisAccountNoInput]);
+
+  useEffect(() => {
+    if (!hasHydrated) {
+      return;
+    }
+
+    // [Step 2] 계좌 기억하기 체크 상태를 저장/해제합니다.
+    setKisRememberEnabled("accountNo", rememberAccountNo);
+  }, [hasHydrated, rememberAccountNo]);
+
+  useEffect(() => {
+    if (!hasHydrated || !rememberAccountNo) {
+      return;
+    }
+
+    // [Step 2] 계좌번호 입력값이 바뀔 때 기억하기가 켜져 있으면 값을 갱신합니다.
+    setRememberedKisValue("accountNo", kisAccountNoInput);
+  }, [hasHydrated, rememberAccountNo, kisAccountNoInput]);
 
   /**
    * @description 계좌번호 인증을 해제하고 입력값을 비웁니다.
@@ -220,6 +263,21 @@ export function KisProfileForm() {
               autoComplete="off"
             />
           </div>
+          <div className="flex items-center gap-2 pl-1 pt-0.5">
+            <Checkbox
+              id="remember-kis-account-no"
+              checked={rememberAccountNo}
+              onCheckedChange={(checked) =>
+                setRememberAccountNo(checked === true)
+              }
+            />
+            <Label
+              htmlFor="remember-kis-account-no"
+              className="cursor-pointer text-xs font-medium text-zinc-500 dark:text-zinc-300"
+            >
+              계좌번호 기억하기
+            </Label>
+          </div>
         </div>
       </div>
     </SettingsCard>