Feat: #159 닉네임 중복 확인 API 및 회원가입 기능 구현

src/components/common/ValidationInput.tsx

@@ -15,6 +15,7 @@ import { RiEyeFill, RiEyeOffFill } from 'react-icons/ri';
  * @params {string} [placeholder] - 입력 필드의 placeholder 텍스트
  * @params {boolean} [isButtonInput] - 버튼이 포함된 입력 필드인지 여부. 기본값은 'false'
  * @params {React.ReactNode} [buttonLabel] - 버튼에 표시할 텍스트 또는 아이콘
+ * @params {boolean} [buttonDisabled] - 버튼의 비활성화 여부
  * @params {() => void} [onButtonClick] - 버튼 클릭 시 호출할 함수
  *
  * 예시) 
@@ -39,6 +40,7 @@ type ValidationInputProps = {
   placeholder?: string;
   isButtonInput?: boolean;
   buttonLabel?: React.ReactNode;
+  buttonDisabled?: boolean;
   onButtonClick?: () => void;
 };
 
@@ -52,6 +54,7 @@ export default function ValidationInput({
   placeholder,
   isButtonInput = false,
   buttonLabel,
+  buttonDisabled = false,
   onButtonClick,
 }: ValidationInputProps) {
   const [showPassword, setShowPassword] = useState(false);
@@ -91,7 +94,12 @@ export default function ValidationInput({
           </div>
         )}
         {isButtonInput && (
-          <button type="button" className="h-18 w-75 rounded bg-sub px-8 font-bold" onClick={onButtonClick}>
+          <button
+            type="button"
+            className={`h-18 w-75 rounded ${buttonDisabled ? 'bg-disable' : 'bg-sub'} px-8 font-bold`}
+            onClick={onButtonClick}
+            disabled={buttonDisabled}
+          >
             {buttonLabel}
           </button>
         )}

src/components/user/auth-form/LinkContainer.tsx

@@ -49,23 +49,27 @@ export default function LinkContainer({ initialLinks }: LinkContainerProps) {
         링크
       </label>
       <div className="space-y-4">
-        {links.map((linkItem) => (
-          <div key={linkItem} className="flex h-25 items-center space-x-8 rounded-lg border border-input px-6 text-sm">
-            <div className="grow overflow-hidden">
-              <a href={`https://${linkItem}`} target="_blank" rel="noopener noreferrer">
-                {linkItem}
-              </a>
-            </div>
-            <button
-              type="button"
-              onClick={() => handleRemoveLink(linkItem)}
-              className="flex size-18 items-center justify-center rounded-lg bg-sub"
-              aria-label="삭제"
+        {links &&
+          links.map((linkItem) => (
+            <div
+              key={linkItem}
+              className="flex h-25 items-center space-x-8 rounded-lg border border-input px-6 text-sm"
             >
-              <FaMinus className="size-8" />
-            </button>
-          </div>
-        ))}
+              <div className="grow overflow-hidden">
+                <a href={`https://${linkItem}`} target="_blank" rel="noopener noreferrer">
+                  {linkItem}
+                </a>
+              </div>
+              <button
+                type="button"
+                onClick={() => handleRemoveLink(linkItem)}
+                className="flex size-18 items-center justify-center rounded-lg bg-sub"
+                aria-label="삭제"
+              >
+                <FaMinus className="size-8" />
+              </button>
+            </div>
+          ))}
         <div
           className={`flex h-25 items-center space-x-8 rounded-lg border border-input px-6 text-sm ${isFocused ? 'bg-white' : 'bg-disable'}`}
         >

src/hooks/useEmailVerification.ts

@@ -25,9 +25,9 @@ export default function useEmailVerification() {
   };
 
   // 인증 코드 만료
-  const expireVerificationCode = () => {
+  const expireVerificationCode = (showMessage = true) => {
     setIsVerificationRequested(false);
-    toastError('인증 시간이 만료되었습니다. 다시 시도해 주세요.');
+    if (showMessage) toastError('인증 시간이 만료되었습니다. 다시 시도해 주세요.');
   };
 
   return {

src/layouts/page/SettingLayout.tsx

@@ -1,7 +1,7 @@
 import { Outlet, useLocation } from 'react-router-dom';
 import ListSidebar from '@components/sidebar/ListSidebar';
 import ListSetting from '@components/sidebar/ListSetting';
-import { USER_INFO_DUMMY } from '@mocks/mockData';
+import useStore from '@stores/useStore';
 
 const navList = [
   {
@@ -20,6 +20,7 @@ const navList = [
 
 export default function SettingLayout() {
   const location = useLocation();
+  const { userInfo } = useStore();
 
   const getTitle = () => {
     const currentPath = location.pathname.split('/')[2];
@@ -30,7 +31,7 @@ export default function SettingLayout() {
 
   return (
     <section className="flex h-full gap-10 p-15">
-      <ListSidebar title={`${USER_INFO_DUMMY.nickname} 님의 정보`}>
+      <ListSidebar title={`${userInfo.nickname} 님의 정보`}>
         <ListSetting navList={navList} />
       </ListSidebar>
       <section className="flex grow flex-col border border-list bg-contents-box">