@uniai-fe/uds-templates 0.4.19 → 0.4.21

package/dist/styles.css

@@ -946,6 +946,10 @@
   text-align: right;
 }
 
+.auth-find-password-button {
+  text-align: left;
+}
+
 .auth-login-signup {
   display: flex;
   justify-content: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.4.19",
+  "version": "0.4.21",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,

package/src/auth/login/markup/Container.tsx

@@ -24,22 +24,17 @@ export default function AuthLoginContainer({
   onFindPasswordLinkClick,
 }: AuthLoginProps) {
   return (
-    <>
-      <AuthContainer
-        className={clsx("auth-login-container", className)}
-        header={header}
-        footer={footer}
-      >
-        <AuthLoginFormField {...fieldOptions} />
-        {linkOptions && (
-          <AuthLoginLinkButtons
-            hrefFindId={linkOptions.find.id}
-            hrefFindPassword={linkOptions.find.password}
-            hrefSignup={linkOptions.signup}
-            onFindPasswordClick={onFindPasswordLinkClick}
-          />
-        )}
-      </AuthContainer>
-    </>
+    <AuthContainer
+      className={clsx("auth-login-container", className)}
+      header={header}
+      footer={footer}
+    >
+      <AuthLoginFormField {...fieldOptions} />
+      {/* 링크 옵션이 부분적으로만 넘어와도 내부에서 존재하는 항목만 렌더링한다. */}
+      <AuthLoginLinkButtons
+        linkOptions={linkOptions}
+        onFindPasswordClick={onFindPasswordLinkClick}
+      />
+    </AuthContainer>
   );
 }

package/src/auth/login/markup/LinkButtons.tsx

@@ -1,55 +1,76 @@
 import Link from "next/link";
 import { Button, Divider } from "@uniai-fe/uds-primitives";
+import type { AuthLoginLinkOptions } from "../types";
 
+/**
+ * 로그인 링크 버튼 묶음; 전달된 링크만 선택적으로 렌더링한다.
+ * @component
+ * @param {{ linkOptions?: AuthLoginLinkOptions; onFindPasswordClick?: () => void; }} props
+ * @param {AuthLoginLinkOptions} [props.linkOptions] 로그인 링크 옵션
+ * @param {() => void} [props.onFindPasswordClick] 비밀번호 찾기 커스텀 클릭 핸들러
+ */
 export default function AuthLoginLinkButtons({
-  hrefFindId,
-  hrefFindPassword,
-  hrefSignup,
+  linkOptions,
   onFindPasswordClick,
 }: {
-  hrefFindId: string;
-  hrefFindPassword: string;
-  hrefSignup: string;
+  linkOptions?: AuthLoginLinkOptions;
   onFindPasswordClick?: () => void;
 }) {
+  const hrefFindId = linkOptions?.find?.id;
+  const hrefFindPassword = linkOptions?.find?.password;
+  const hrefSignup = linkOptions?.signup;
+
+  if (!hrefFindId && !hrefFindPassword && !hrefSignup) {
+    return null;
+  }
+
   return (
     <div className="auth-login-util-container">
-      <div className="auth-login-find-account">
-        <Link
-          href={hrefFindId}
-          className="auth-login-find-account-button auth-find-id-button"
-        >
-          <span>아이디 찾기</span>
-        </Link>
-        <Divider />
-        {onFindPasswordClick ? (
-          <button
-            type="button"
-            className="auth-login-find-account-button auth-find-password-button"
-            onClick={onFindPasswordClick}
-          >
-            <span>비밀번호 찾기</span>
-          </button>
-        ) : (
-          <Link
-            href={hrefFindPassword}
-            className="auth-login-find-account-button  auth-find-password-button"
+      {(hrefFindId || hrefFindPassword) && (
+        <div className="auth-login-find-account">
+          {hrefFindId && (
+            <Link
+              href={hrefFindId}
+              className="auth-login-find-account-button auth-find-id-button"
+            >
+              <span>아이디 찾기</span>
+            </Link>
+          )}
+          {hrefFindId && hrefFindPassword && <Divider />}
+          {/* 비밀번호 찾기 링크가 있을 때만 버튼/링크를 선택적으로 노출한다. */}
+          {hrefFindPassword &&
+            (onFindPasswordClick ? (
+              <button
+                type="button"
+                className="auth-login-find-account-button auth-find-password-button"
+                onClick={onFindPasswordClick}
+              >
+                <span>비밀번호 찾기</span>
+              </button>
+            ) : (
+              <Link
+                href={hrefFindPassword}
+                className="auth-login-find-account-button auth-find-password-button"
+              >
+                <span>비밀번호 찾기</span>
+              </Link>
+            ))}
+        </div>
+      )}
+      {hrefSignup && (
+        <div className="auth-login-signup">
+          {/* 회원가입 링크가 있을 때만 signup CTA를 유지한다. */}
+          <Button.Rounded
+            as={Link}
+            href={hrefSignup}
+            className="auth-login-signup-button"
+            priority="tertiary"
+            size="small"
           >
-            <span>비밀번호 찾기</span>
-          </Link>
-        )}
-      </div>
-      <div className="auth-login-signup">
-        <Button.Rounded
-          as={Link}
-          href={hrefSignup}
-          className="auth-login-signup-button"
-          priority="tertiary"
-          size="small"
-        >
-          회원가입
-        </Button.Rounded>
-      </div>
+            회원가입
+          </Button.Rounded>
+        </div>
+      )}
     </div>
   );
 }

package/src/auth/login/styles/login.scss

@@ -46,6 +46,10 @@
   text-align: right;
 }
 
+.auth-find-password-button {
+  text-align: left;
+}
+
 .auth-login-signup {
   display: flex;
   justify-content: center;

package/src/auth/login/types/props.ts

@@ -244,31 +244,31 @@ export interface AuthLoginFieldOptions {
 
 /**
  * 로그인 화면 링크 옵션; 찾기/회원가입 링크를 묶는다.
- * @property {{ id: string; password: string }} find 계정찾기 링크
- * @property {string} find.id 아이디 찾기 링크
- * @property {string} find.password 비밀번호 찾기 링크
- * @property {string} signup 회원가입 링크
+ * @property {{ id?: string; password?: string }} [find] 계정찾기 링크
+ * @property {string} [find.id] 아이디 찾기 링크
+ * @property {string} [find.password] 비밀번호 찾기 링크
+ * @property {string} [signup] 회원가입 링크
  */
 export interface AuthLoginLinkOptions {
   /**
    * 아이디/비밀번호 찾기 링크
-   * @property {string} id 아이디 찾기 링크
-   * @property {string} password 비밀번호 찾기 링크
+   * @property {string} [id] 아이디 찾기 링크
+   * @property {string} [password] 비밀번호 찾기 링크
    */
-  find: {
+  find?: {
     /**
      * 아이디 찾기 링크
      */
-    id: string;
+    id?: string;
     /**
      * 비밀번호 찾기 링크
      */
-    password: string;
+    password?: string;
   };
   /**
    * 회원가입 링크
    */
-  signup: string;
+  signup?: string;
 }
 
 /**
@@ -279,7 +279,7 @@ export interface AuthLoginLinkOptions {
  * @property {ReactNode} [footer] 하단 콘텐츠
  * @property {AuthLoginFieldOptions} [fieldOptions] 입력 필드 옵션
  * @property {AuthLoginLinkOptions} [linkOptions] 계정관련 링크 옵션
- * @property {() => void} onFindPasswordLinkClick 비밀번호 찾기 링크버튼 클릭 콜백 이벤트
+ * @property {() => void} [onFindPasswordLinkClick] 비밀번호 찾기 링크버튼 클릭 콜백 이벤트
  */
 export interface AuthLoginProps extends Omit<AuthContainerProps, "children"> {
   /**