@farmzone/fz-template-react 1.0.6 → 1.0.8

package/template/src/pages/login/index.tsx

@@ -1,317 +1,317 @@
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { debounce } from "es-toolkit";
-import Cookies from "js-cookie";
-import { Clock, Eye, EyeOff, Phone, X } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
-import { Controller, FormProvider, useForm, useFormContext } from "react-hook-form";
-import { useNavigate } from "react-router";
-import { z } from "zod";
-
-import { usePostLogin } from "@/app/api/queries";
-import { clearUserToken } from "@/app/api/token";
-import { useUserStore } from "@/app/store";
-import { Button, Checkbox, Modal, ModalHeader } from "@farmzone/fz-react-ui";
-
-dayjs.extend(utc);
-
-const REMEMBERED_ID_KEY = "rememberedId";
-const FORM_ID = "login-form";
-
-const INPUT_CLASS =
-  "w-full px-4 py-2 bg-white/90 border border-gray-200 rounded-md text-base placeholder:text-gray-400 focus:border-neutral-300 focus:outline-none";
-
-const loginSchema = z.object({
-  userId: z.string().min(1, "아이디를 입력해 주세요."),
-  password: z.string().min(1, "비밀번호를 입력해 주세요."),
-  rememberId: z.boolean(),
-});
-
-type LoginFormData = z.infer<typeof loginSchema>;
-
-function LoginFormFields({ isLoginPending }: { isLoginPending: boolean }) {
-  const { control, reset, watch } = useFormContext<LoginFormData>();
-  const [showPassword, setShowPassword] = useState(false);
-  const [isLoginDebouncing, setIsLoginDebouncing] = useState(false);
-
-  const userId = watch("userId");
-  const password = watch("password");
-
-  useEffect(() => {
-    const savedId = localStorage.getItem(REMEMBERED_ID_KEY);
-    if (savedId) {
-      reset({ userId: savedId, password: "", rememberId: true });
-    }
-  }, [reset]);
-
-  const debouncedLoginClick = useMemo(
-    () =>
-      debounce(() => {
-        setIsLoginDebouncing(false);
-        (document.getElementById(FORM_ID) as HTMLFormElement | null)?.requestSubmit();
-      }, 500),
-    [],
-  );
-
-  useEffect(() => {
-    return () => {
-      debouncedLoginClick.cancel();
-      setIsLoginDebouncing(false);
-    };
-  }, [debouncedLoginClick]);
-
-  const canSubmit = Boolean(String(userId ?? "").trim() && String(password ?? "").trim());
-
-  const handleLoginButtonClick = () => {
-    if (!canSubmit) return;
-    setIsLoginDebouncing(true);
-    debouncedLoginClick();
-  };
-
-  return (
-    <div className="space-y-4.5">
-      <Controller
-        name="userId"
-        control={control}
-        render={({ field }) => (
-          <div className="space-y-2">
-            <label htmlFor="login-userId" className="block text-sm font-semibold text-gray-700">
-              아이디
-            </label>
-            <input
-              id="login-userId"
-              name={field.name}
-              ref={field.ref}
-              value={String(field.value ?? "")}
-              onChange={field.onChange}
-              onBlur={field.onBlur}
-              placeholder="아이디를 입력하세요"
-              className={INPUT_CLASS}
-              maxLength={20}
-              autoComplete="username"
-              onKeyDown={(e) => {
-                if (e.key === "Enter") handleLoginButtonClick();
-              }}
-            />
-          </div>
-        )}
-      />
-
-      <Controller
-        name="password"
-        control={control}
-        render={({ field }) => {
-          const passwordValue = String(field.value ?? "");
-          return (
-            <div className="space-y-2">
-              <label htmlFor="login-password" className="block text-sm font-semibold text-gray-700">
-                비밀번호
-              </label>
-              <div className="relative">
-                <input
-                  id="login-password"
-                  name={field.name}
-                  ref={field.ref}
-                  type={showPassword ? "text" : "password"}
-                  value={passwordValue}
-                  onChange={field.onChange}
-                  onBlur={field.onBlur}
-                  placeholder="비밀번호를 입력하세요"
-                  className={INPUT_CLASS}
-                  maxLength={20}
-                  autoComplete="current-password"
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") handleLoginButtonClick();
-                  }}
-                />
-                <button
-                  type="button"
-                  className="absolute right-8 top-1/2 -translate-y-1/2 rounded-md p-1 text-gray-400 transition-colors duration-200 hover:bg-gray-100 hover:text-gray-600"
-                  onClick={() => field.onChange("")}
-                  aria-label="비밀번호 지우기"
-                >
-                  {passwordValue.length > 0 ? <X size={18} /> : null}
-                </button>
-                <button
-                  type="button"
-                  className="absolute right-2 top-1/2 -translate-y-1/2 rounded-md p-1 text-gray-400 transition-colors duration-200 hover:bg-gray-100 hover:text-gray-600"
-                  onClick={() => setShowPassword((v) => !v)}
-                  aria-label={showPassword ? "비밀번호 숨기기" : "비밀번호 표시"}
-                >
-                  {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
-                </button>
-              </div>
-            </div>
-          );
-        }}
-      />
-
-      <div className="py-2">
-        <Controller
-          name="rememberId"
-          control={control}
-          render={({ field }) => (
-            <Checkbox
-              label="아이디 기억하기"
-              checked={Boolean(field.value)}
-              onChange={(checked) => field.onChange(checked)}
-              wrapperClassName="justify-start"
-            />
-          )}
-        />
-      </div>
-
-      <Button
-        type="button"
-        variant="save"
-        disabled={!canSubmit || isLoginPending}
-        aria-busy={isLoginDebouncing}
-        onClick={handleLoginButtonClick}
-        className={`relative h-12 w-full overflow-hidden rounded-md border-none py-3 text-lg font-semibold text-white outline-none transition-all duration-150 disabled:bg-gray-100 ${
-          isLoginDebouncing || isLoginPending ? "opacity-50" : ""
-        } ${!canSubmit ? "cursor-not-allowed text-gray-400" : "hover:border-blue-600"}`}
-      >
-        로그인
-      </Button>
-    </div>
-  );
-}
-
-export default function LoginPage() {
-  const navigate = useNavigate();
-  const { mutateAsync: postLogin, isPending: isLoginPending } = usePostLogin();
-  const setUser = useUserStore((s) => s.setUser);
-  const [isCustomerCenterOpen, setIsCustomerCenterOpen] = useState(false);
-
-  const methods = useForm<LoginFormData>({
-    resolver: zodResolver(loginSchema),
-    defaultValues: { userId: "", password: "", rememberId: false },
-    mode: "onSubmit",
-  });
-
-  useEffect(() => {
-    const accessToken = Cookies.get("AccessToken");
-    if (accessToken) {
-      navigate("/", { replace: true });
-    } else {
-      clearUserToken();
-    }
-  }, [navigate]);
-
-  const handleSubmit = methods.handleSubmit(async (data) => {
-    try {
-      const res = await postLogin({ userId: data.userId.trim(), password: data.password.trim() });
-
-      const accessExpiry = dayjs.utc(res.accessTokenExpiresAt, "YYYY-MM-DD HH:mm:ss");
-      const refreshExpiry = dayjs.utc(res.refreshTokenExpiresAt, "YYYY-MM-DD HH:mm:ss");
-
-      Cookies.set("AccessToken", res.accessToken, { expires: accessExpiry.toDate() });
-      Cookies.set("RefreshToken", res.refreshToken, { expires: refreshExpiry.toDate() });
-      localStorage.setItem("currentId", res.id);
-
-      if (data.rememberId) {
-        localStorage.setItem(REMEMBERED_ID_KEY, data.userId.trim());
-      } else {
-        localStorage.removeItem(REMEMBERED_ID_KEY);
-      }
-
-      setUser({ id: res.id, userId: res.userId, name: res.name, role: res.role });
-      navigate("/", { replace: true });
-    } catch (error) {
-      console.error(error);
-    }
-  });
-
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-linear-to-br from-blue-50 via-white to-purple-50 p-4">
-      <div className="w-full max-w-md shrink-0">
-        {/* 카드 */}
-        <div className="rounded-2xl border border-white/40 bg-white/80 px-8 py-10 shadow-2xl backdrop-blur-xl">
-          {/* 로고 / 타이틀 */}
-          <div className="mb-6 text-center">
-            <div className="inline-flex items-center justify-center rounded-2xl bg-white">
-              <img src="/favicon.ico" alt="logo" className="h-15 w-56 object-contain" />
-            </div>
-          </div>
-
-          <FormProvider {...methods}>
-            <form id={FORM_ID} onSubmit={handleSubmit} noValidate>
-              <LoginFormFields isLoginPending={isLoginPending} />
-            </form>
-          </FormProvider>
-        </div>
-
-        {/* 고객센터 링크 */}
-        <div className="mt-6 text-center">
-          <p className="text-sm text-gray-600">
-            문의사항이 있으시면
-            <button
-              type="button"
-              className="ml-1 cursor-pointer font-medium text-main transition-colors hover:underline"
-              onClick={() => setIsCustomerCenterOpen(true)}
-            >
-              고객센터
-            </button>
-            로 연락 주세요
-          </p>
-        </div>
-      </div>
-
-      {/* 고객센터 모달 */}
-      <Modal
-        isOpen={isCustomerCenterOpen}
-        onClose={() => setIsCustomerCenterOpen(false)}
-        overlayClassName="min-h-dvh w-screen"
-        contentClassName="max-w-md overflow-auto rounded-3xl bg-white"
-      >
-        <ModalHeader className="border-b border-blue-100 bg-linear-to-r from-blue-50 to-indigo-50 px-6 py-5 text-left">
-          <div className="flex items-center gap-3">
-            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-100">
-              <Phone size={20} className="text-main" />
-            </div>
-            <h2 className="text-lg font-bold text-gray-900">고객센터</h2>
-          </div>
-        </ModalHeader>
-
-        <div className="flex flex-col gap-6 px-6 pb-6 pt-4">
-          <div className="flex flex-col gap-2">
-            <div className="flex items-center gap-4 rounded-xl bg-blue-50 px-4 py-4">
-              <div className="flex shrink-0 rounded-full bg-blue-100 p-2">
-                <Phone size={17} className="text-blue-600" />
-              </div>
-              <div>
-                <p className="text-xs font-medium text-gray-500">전화 문의</p>
-                <a
-                  href="tel:1588-0000"
-                  className="text-xl font-bold tracking-wider text-blue-600 transition-colors hover:text-blue-700"
-                >
-                  1588-0000
-                </a>
-              </div>
-            </div>
-
-            <div className="flex items-center gap-4 rounded-xl bg-gray-50 px-4 py-4">
-              <div className="flex shrink-0 rounded-full bg-gray-100 p-2">
-                <Clock size={17} className="text-gray-500" />
-              </div>
-              <div>
-                <p className="text-xs font-medium text-gray-500">운영 시간</p>
-                <p className="mt-0.5 text-sm font-semibold text-gray-700">평일 09:00 ~ 18:00</p>
-                <p className="text-xs text-gray-400">토·일·공휴일 휴무</p>
-              </div>
-            </div>
-          </div>
-
-          <Button
-            type="button"
-            onClick={() => setIsCustomerCenterOpen(false)}
-            className="relative min-h-10 w-full overflow-hidden rounded-md border-none bg-sub-darkblue/85 py-3 text-lg font-semibold text-white outline-none transition-all duration-150 hover:bg-sub-darkblue/90 hover:text-white"
-          >
-            닫기
-          </Button>
-        </div>
-      </Modal>
-    </div>
-  );
-}
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { debounce } from "es-toolkit";
+import Cookies from "js-cookie";
+import { Clock, Eye, EyeOff, Phone, X } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { Controller, FormProvider, useForm, useFormContext } from "react-hook-form";
+import { useNavigate } from "react-router";
+import { z } from "zod";
+
+import { usePostLogin } from "@/app/api/queries";
+import { clearUserToken } from "@/app/api/token";
+import { useUserStore } from "@/app/store";
+import { Button, Checkbox, Modal, ModalHeader } from "@farmzone/fz-react-ui";
+
+dayjs.extend(utc);
+
+const REMEMBERED_ID_KEY = "rememberedId";
+const FORM_ID = "login-form";
+
+const INPUT_CLASS =
+  "w-full px-4 py-2 bg-white/90 border border-gray-200 rounded-md text-base placeholder:text-gray-400 focus:border-neutral-300 focus:outline-none";
+
+const loginSchema = z.object({
+  userId: z.string().min(1, "아이디를 입력해 주세요."),
+  password: z.string().min(1, "비밀번호를 입력해 주세요."),
+  rememberId: z.boolean(),
+});
+
+type LoginFormData = z.infer<typeof loginSchema>;
+
+function LoginFormFields({ isLoginPending }: { isLoginPending: boolean }) {
+  const { control, reset, watch } = useFormContext<LoginFormData>();
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoginDebouncing, setIsLoginDebouncing] = useState(false);
+
+  const userId = watch("userId");
+  const password = watch("password");
+
+  useEffect(() => {
+    const savedId = localStorage.getItem(REMEMBERED_ID_KEY);
+    if (savedId) {
+      reset({ userId: savedId, password: "", rememberId: true });
+    }
+  }, [reset]);
+
+  const debouncedLoginClick = useMemo(
+    () =>
+      debounce(() => {
+        setIsLoginDebouncing(false);
+        (document.getElementById(FORM_ID) as HTMLFormElement | null)?.requestSubmit();
+      }, 500),
+    [],
+  );
+
+  useEffect(() => {
+    return () => {
+      debouncedLoginClick.cancel();
+      setIsLoginDebouncing(false);
+    };
+  }, [debouncedLoginClick]);
+
+  const canSubmit = Boolean(String(userId ?? "").trim() && String(password ?? "").trim());
+
+  const handleLoginButtonClick = () => {
+    if (!canSubmit) return;
+    setIsLoginDebouncing(true);
+    debouncedLoginClick();
+  };
+
+  return (
+    <div className="space-y-4.5">
+      <Controller
+        name="userId"
+        control={control}
+        render={({ field }) => (
+          <div className="space-y-2">
+            <label htmlFor="login-userId" className="block text-sm font-semibold text-gray-700">
+              아이디
+            </label>
+            <input
+              id="login-userId"
+              name={field.name}
+              ref={field.ref}
+              value={String(field.value ?? "")}
+              onChange={field.onChange}
+              onBlur={field.onBlur}
+              placeholder="아이디를 입력하세요"
+              className={INPUT_CLASS}
+              maxLength={20}
+              autoComplete="username"
+              onKeyDown={(e) => {
+                if (e.key === "Enter") handleLoginButtonClick();
+              }}
+            />
+          </div>
+        )}
+      />
+
+      <Controller
+        name="password"
+        control={control}
+        render={({ field }) => {
+          const passwordValue = String(field.value ?? "");
+          return (
+            <div className="space-y-2">
+              <label htmlFor="login-password" className="block text-sm font-semibold text-gray-700">
+                비밀번호
+              </label>
+              <div className="relative">
+                <input
+                  id="login-password"
+                  name={field.name}
+                  ref={field.ref}
+                  type={showPassword ? "text" : "password"}
+                  value={passwordValue}
+                  onChange={field.onChange}
+                  onBlur={field.onBlur}
+                  placeholder="비밀번호를 입력하세요"
+                  className={INPUT_CLASS}
+                  maxLength={20}
+                  autoComplete="current-password"
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") handleLoginButtonClick();
+                  }}
+                />
+                <button
+                  type="button"
+                  className="absolute right-8 top-1/2 -translate-y-1/2 rounded-md p-1 text-gray-400 transition-colors duration-200 hover:bg-gray-100 hover:text-gray-600"
+                  onClick={() => field.onChange("")}
+                  aria-label="비밀번호 지우기"
+                >
+                  {passwordValue.length > 0 ? <X size={18} /> : null}
+                </button>
+                <button
+                  type="button"
+                  className="absolute right-2 top-1/2 -translate-y-1/2 rounded-md p-1 text-gray-400 transition-colors duration-200 hover:bg-gray-100 hover:text-gray-600"
+                  onClick={() => setShowPassword((v) => !v)}
+                  aria-label={showPassword ? "비밀번호 숨기기" : "비밀번호 표시"}
+                >
+                  {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                </button>
+              </div>
+            </div>
+          );
+        }}
+      />
+
+      <div className="py-2">
+        <Controller
+          name="rememberId"
+          control={control}
+          render={({ field }) => (
+            <Checkbox
+              label="아이디 기억하기"
+              checked={Boolean(field.value)}
+              onChange={(checked) => field.onChange(checked)}
+              wrapperClassName="justify-start"
+            />
+          )}
+        />
+      </div>
+
+      <Button
+        type="button"
+        variant="save"
+        disabled={!canSubmit || isLoginPending}
+        aria-busy={isLoginDebouncing}
+        onClick={handleLoginButtonClick}
+        className={`relative h-12 w-full overflow-hidden rounded-md border-none py-3 text-lg font-semibold text-white outline-none transition-all duration-150 disabled:bg-gray-100 ${
+          isLoginDebouncing || isLoginPending ? "opacity-50" : ""
+        } ${!canSubmit ? "cursor-not-allowed text-gray-400" : "hover:border-blue-600"}`}
+      >
+        로그인
+      </Button>
+    </div>
+  );
+}
+
+export default function LoginPage() {
+  const navigate = useNavigate();
+  const { mutateAsync: postLogin, isPending: isLoginPending } = usePostLogin();
+  const setUser = useUserStore((s) => s.setUser);
+  const [isCustomerCenterOpen, setIsCustomerCenterOpen] = useState(false);
+
+  const methods = useForm<LoginFormData>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: { userId: "", password: "", rememberId: false },
+    mode: "onSubmit",
+  });
+
+  useEffect(() => {
+    const accessToken = Cookies.get("AccessToken");
+    if (accessToken) {
+      navigate("/", { replace: true });
+    } else {
+      clearUserToken();
+    }
+  }, [navigate]);
+
+  const handleSubmit = methods.handleSubmit(async (data) => {
+    try {
+      const res = await postLogin({ userId: data.userId.trim(), password: data.password.trim() });
+
+      const accessExpiry = dayjs.utc(res.accessTokenExpiresAt, "YYYY-MM-DD HH:mm:ss");
+      const refreshExpiry = dayjs.utc(res.refreshTokenExpiresAt, "YYYY-MM-DD HH:mm:ss");
+
+      Cookies.set("AccessToken", res.accessToken, { expires: accessExpiry.toDate() });
+      Cookies.set("RefreshToken", res.refreshToken, { expires: refreshExpiry.toDate() });
+      localStorage.setItem("currentId", res.id);
+
+      if (data.rememberId) {
+        localStorage.setItem(REMEMBERED_ID_KEY, data.userId.trim());
+      } else {
+        localStorage.removeItem(REMEMBERED_ID_KEY);
+      }
+
+      setUser({ id: res.id, userId: res.userId, name: res.name, role: res.role });
+      navigate("/", { replace: true });
+    } catch (error) {
+      console.error(error);
+    }
+  });
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-linear-to-br from-blue-50 via-white to-purple-50 p-4">
+      <div className="w-full max-w-md shrink-0">
+        {/* 카드 */}
+        <div className="rounded-2xl border border-white/40 bg-white/80 px-8 py-10 shadow-2xl backdrop-blur-xl">
+          {/* 로고 / 타이틀 */}
+          <div className="mb-6 text-center">
+            <div className="inline-flex items-center justify-center rounded-2xl bg-white">
+              <img src="/favicon.ico" alt="logo" className="h-15 w-56 object-contain" />
+            </div>
+          </div>
+
+          <FormProvider {...methods}>
+            <form id={FORM_ID} onSubmit={handleSubmit} noValidate>
+              <LoginFormFields isLoginPending={isLoginPending} />
+            </form>
+          </FormProvider>
+        </div>
+
+        {/* 고객센터 링크 */}
+        <div className="mt-6 text-center">
+          <p className="text-sm text-gray-600">
+            문의사항이 있으시면
+            <button
+              type="button"
+              className="ml-1 cursor-pointer font-medium text-main transition-colors hover:underline"
+              onClick={() => setIsCustomerCenterOpen(true)}
+            >
+              고객센터
+            </button>
+            로 연락 주세요
+          </p>
+        </div>
+      </div>
+
+      {/* 고객센터 모달 */}
+      <Modal
+        isOpen={isCustomerCenterOpen}
+        onClose={() => setIsCustomerCenterOpen(false)}
+        overlayClassName="min-h-dvh w-screen"
+        contentClassName="max-w-md overflow-auto rounded-3xl bg-white"
+      >
+        <ModalHeader className="border-b border-blue-100 bg-linear-to-r from-blue-50 to-indigo-50 px-6 py-5 text-left">
+          <div className="flex items-center gap-3">
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-100">
+              <Phone size={20} className="text-main" />
+            </div>
+            <h2 className="text-lg font-bold text-gray-900">고객센터</h2>
+          </div>
+        </ModalHeader>
+
+        <div className="flex flex-col gap-6 px-6 pb-6 pt-4">
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-4 rounded-xl bg-blue-50 px-4 py-4">
+              <div className="flex shrink-0 rounded-full bg-blue-100 p-2">
+                <Phone size={17} className="text-blue-600" />
+              </div>
+              <div>
+                <p className="text-xs font-medium text-gray-500">전화 문의</p>
+                <a
+                  href="tel:1588-0000"
+                  className="text-xl font-bold tracking-wider text-blue-600 transition-colors hover:text-blue-700"
+                >
+                  1588-0000
+                </a>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-4 rounded-xl bg-gray-50 px-4 py-4">
+              <div className="flex shrink-0 rounded-full bg-gray-100 p-2">
+                <Clock size={17} className="text-gray-500" />
+              </div>
+              <div>
+                <p className="text-xs font-medium text-gray-500">운영 시간</p>
+                <p className="mt-0.5 text-sm font-semibold text-gray-700">평일 09:00 ~ 18:00</p>
+                <p className="text-xs text-gray-400">토·일·공휴일 휴무</p>
+              </div>
+            </div>
+          </div>
+
+          <Button
+            type="button"
+            onClick={() => setIsCustomerCenterOpen(false)}
+            className="relative min-h-10 w-full overflow-hidden rounded-md border-none bg-sub-darkblue/85 py-3 text-lg font-semibold text-white outline-none transition-all duration-150 hover:bg-sub-darkblue/90 hover:text-white"
+          >
+            닫기
+          </Button>
+        </div>
+      </Modal>
+    </div>
+  );
+}