diff --git a/src/commons/Input.tsx b/src/commons/Input.tsx
index 7b4bd176..8bf9bebe 100644
--- a/src/commons/Input.tsx
+++ b/src/commons/Input.tsx
@@ -8,11 +8,13 @@ const Input = ({
   onChange,
   autocomplete,
   defaultValue,
+  dataInputType,
 }: InputGroupProps) => {
   return (
     <input
       className="border-2 rounded-md border-gray-300 p-2"
       id={id}
+      data-input-type={dataInputType}
       name={name}
       type={type}
       placeholder={placeholder}
diff --git a/src/commons/InputGroup.tsx b/src/commons/InputGroup.tsx
index fa286913..c36cde88 100644
--- a/src/commons/InputGroup.tsx
+++ b/src/commons/InputGroup.tsx
@@ -8,6 +8,7 @@ export interface InputGroupProps
   type: string;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   autocomplete?: string;
+  dataInputType?: string;
 }
 
 const InputGroup = ({
@@ -18,6 +19,7 @@ const InputGroup = ({
   onChange,
   autocomplete,
   defaultValue,
+  dataInputType,
 }: InputGroupProps) => {
   return (
     <Container className={'flex flex-col gap-1'}>
@@ -26,6 +28,7 @@ const InputGroup = ({
       </label>
       <Input
         id={id}
+        dataInputType={dataInputType}
         name={name}
         type={type}
         placeholder={placeholder}
diff --git a/src/commons/UserDropdownBox.tsx b/src/commons/UserDropdownBox.tsx
index dc75a38f..4a5bacea 100644
--- a/src/commons/UserDropdownBox.tsx
+++ b/src/commons/UserDropdownBox.tsx
@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 import { useState } from 'react';
-import { getCookie, removeCookie, setCookie } from './cookie/cookie';
+import { getCookie, removeToken, setCookie } from './cookie/cookie';
 
 // 로그인 되었을 때 상태를 보여주는 SelectBox 제작
 const UserDropdownBox = () => {
@@ -15,11 +15,6 @@ const UserDropdownBox = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
 
-  const removeToken = () => {
-    removeCookie('loginToken');
-    removeCookie('userAccountInfo');
-  };
-
   const handleOptionClick = (option: string) => {
     switch (option) {
       case 'My 정보 변경':
diff --git a/src/commons/UserToggleBox.tsx b/src/commons/UserToggleBox.tsx
index 867a155d..e4358a8f 100644
--- a/src/commons/UserToggleBox.tsx
+++ b/src/commons/UserToggleBox.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { getCookie, removeCookie, setCookie } from './cookie/cookie';
+import { getCookie, removeToken, setCookie } from './cookie/cookie';
 
 const UserToggleBox = () => {
   const token = getCookie('loginToken');
@@ -13,11 +13,6 @@ const UserToggleBox = () => {
     setTabVisible(!isTabVisible);
   };
 
-  const removeToken = () => {
-    removeCookie('loginToken');
-    removeCookie('userAccountInfo');
-  };
-
   const handleOptionClick = (option: string) => {
     switch (option) {
       case 'My 정보 변경':
diff --git a/src/commons/cookie/cookie.ts b/src/commons/cookie/cookie.ts
index 9dc430b8..5e09d48f 100644
--- a/src/commons/cookie/cookie.ts
+++ b/src/commons/cookie/cookie.ts
@@ -2,7 +2,16 @@ import { Cookies } from 'react-cookie';
 
 const cookies = new Cookies();
 
-export const setCookie = (name: string, value: string, option?: any) => {
+type CookieSetOptions = {
+  expires?: Date;
+  maxAge?: number;
+};
+
+export const setCookie = (
+  name: string,
+  value: string,
+  option?: CookieSetOptions,
+) => {
   return cookies.set(name, value, { ...option });
 };
 
@@ -14,3 +23,8 @@ export const getCookie = (name: string) => {
 export const removeCookie = (name: string) => {
   return cookies.remove(name);
 };
+
+export const removeToken = () => {
+  removeCookie('loginToken');
+  removeCookie('userAccountInfo');
+};
diff --git a/src/commons/modals/LoginGuideModal.tsx b/src/commons/modals/LoginGuideModal.tsx
index 8da0cc54..178e8a7c 100644
--- a/src/commons/modals/LoginGuideModal.tsx
+++ b/src/commons/modals/LoginGuideModal.tsx
@@ -34,7 +34,7 @@ const LoginGuideModal = () => {
           <button
             className="bg-brand-color text-white rounded-md px-4 py-1 transition duration-300 hover:bg-white hover:text-brand-color"
             onClick={() => {
-              setCookie('userAccountInfo', 'Not Login');
+              setCookie('userAccountInfo', 'Not Login', { maxAge: 60000 * 30 }); // 30분
               setIsLogined(true);
             }}
           >
diff --git a/src/layouts/ValidateCheckLayout.tsx b/src/layouts/ValidateCheckLayout.tsx
index 101d136b..ef0cad9f 100644
--- a/src/layouts/ValidateCheckLayout.tsx
+++ b/src/layouts/ValidateCheckLayout.tsx
@@ -14,8 +14,10 @@ const ValidateCheckLayout: React.FC<LayoutProps> = ({ children }) => {
   const loginToken = getCookie('loginToken');
   const userAccount = getCookie('userAccountInfo');
 
+  // userAccount에 대한 정책 수정이 필요
+  // Layout 먹이는 방식 수정
   useEffect(() => {
-    if (!loginToken && !userAccount) {
+    if (!loginToken && userAccount) {
       // loginToken이 없으면 모달 열기
       setIsLogined(false);
     }
diff --git a/src/pages/editProfile/EditAddressInputGroup.tsx b/src/pages/editProfile/EditAddressInputGroup.tsx
index eae9e4db..50e914cd 100644
--- a/src/pages/editProfile/EditAddressInputGroup.tsx
+++ b/src/pages/editProfile/EditAddressInputGroup.tsx
@@ -1,4 +1,4 @@
-import VAddressInputGroup from 'pages/signUp/VAddressInputGroup';
+import VAddressInputGroup from 'pages/signUp/components/VAddressInputGroup';
 import { useRecoilState } from 'recoil';
 import { shelterSignupState } from 'recoil/shelterState';
 
diff --git a/src/pages/login/LoginInputForm.tsx b/src/pages/login/LoginInputForm.tsx
index 47a83dd3..f540652e 100644
--- a/src/pages/login/LoginInputForm.tsx
+++ b/src/pages/login/LoginInputForm.tsx
@@ -3,6 +3,7 @@ import { useRecoilState } from 'recoil';
 import { useNavigate } from 'react-router-dom';
 import { ShelterLoginType, shelterLoginState } from 'recoil/shelterState';
 import * as Yup from 'yup';
+import { useMutation } from '@tanstack/react-query';
 import VLoginInputForm from './VLoginInputForm';
 import { setCookie } from '../../commons/cookie/cookie';
 
@@ -20,9 +21,8 @@ const LoginInputForm = () => {
     password: Yup.string().required('비밀번호를 입력해주세요.'),
   });
 
-  const userfetch = () => {
-    let token: string;
-    fetch(`${process.env.REACT_APP_URI}/account/login`, {
+  const userFetch = async () => {
+    const res = await fetch(`${process.env.REACT_APP_URI}/account/login`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -32,38 +32,19 @@ const LoginInputForm = () => {
         email: userInfo.email,
         password: userInfo.password,
       }),
-    }).then(async (res) => {
-      const jwtToken = res.headers.get('Authorization');
-      if (jwtToken) {
-        // eslint-disable-next-line prefer-destructuring
-        token = jwtToken.split(' ')[1];
-      } else {
-        console.log('로그인 실패로 token이 Null');
-      }
-      const data = await res.json();
-      if (data.success && token) {
-        const { accountInfo, tokenExpirationDateTime } = data.response;
-        const { id, role } = accountInfo;
-        const tokenExpirationDate = new Date(tokenExpirationDateTime);
-        const timeDifferenceseconds = Math.floor(
-          (Number(tokenExpirationDate) - Number(currentDate)) / 1000,
-        );
-
-        setCookie('accountInfo', `${role} ${id}`, {
-          expires: tokenExpirationDate,
-          maxAge: timeDifferenceseconds,
-        });
-        setCookie('loginToken', token, {
-          expires: tokenExpirationDate,
-          maxAge: timeDifferenceseconds,
-        });
-        navigate('/');
-      } else {
-        // 형식은 맞지만 입력된 값이 가입되지 않은 계정일 때
-        alert(data.error.message);
-      }
-      setIsLoading(false);
     });
+
+    if (!res.ok) {
+      // error 발생 시 처리는 status 값에 따라 하는 것으로 변경 필요
+      const errorData = await res.json();
+      console.error('userFetchError: ', errorData);
+    }
+
+    const response = await res.json();
+    const jwtToken = res.headers.get('Authorization');
+    const token = jwtToken ? jwtToken.split(' ')[1] : '';
+
+    return { response, token };
   };
 
   const validateCheck = () => {
@@ -83,11 +64,32 @@ const LoginInputForm = () => {
       });
   };
 
+  const mutation = useMutation(userFetch, {
+    onSuccess: (data) => {
+      const { accountInfo, tokenExpirationDateTime } = data.response.response;
+      const { id, role } = accountInfo;
+      const tokenExpirationDate = new Date(tokenExpirationDateTime);
+      const timeDifferenceseconds = Math.floor(
+        (Number(tokenExpirationDate) - Number(currentDate)) / 1000,
+      );
+
+      setCookie('accountInfo', `${role} ${id}`, {
+        expires: tokenExpirationDate,
+        maxAge: timeDifferenceseconds,
+      });
+      setCookie('loginToken', data.token, {
+        expires: tokenExpirationDate,
+        maxAge: timeDifferenceseconds,
+      });
+      navigate('/');
+    },
+  });
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
     validateCheck();
-    userfetch();
+    mutation.mutate();
   };
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/src/pages/map/TestMap.tsx b/src/pages/map/TestMap.tsx
deleted file mode 100644
index bbc8a89c..00000000
--- a/src/pages/map/TestMap.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import {
-  useState,
-  useEffect,
-  Dispatch,
-  SetStateAction,
-  useRef,
-  RefObject,
-} from 'react';
-import { Map, MapMarker } from 'react-kakao-maps-sdk';
-
-type Coordinate = {
-  lat: number;
-  lng: number;
-};
-
-type PlaceType = {
-  address_name: string;
-  category_group_code: string;
-  category_group_name: string;
-  category_name: string;
-  distance: string;
-  id: string;
-  place_name: string;
-  place_url: string;
-  road_address_name: string;
-  x: string;
-  y: string;
-};
-
-type FilteredPlaceType = {
-  address_name: string;
-  place_name: string;
-  lat: string;
-  lng: string;
-};
-
-const TestMap = () => {
-  const [currentPosition, setCurrentPosition] = useState<Coordinate>({
-    lat: 35.1759293,
-    lng: 126.9149701,
-  });
-  const [markers, setMarkers] = useState<Array<PlaceType>>([]);
-  const [searchedPlaces, setSearchedPlaces] = useState<Array<PlaceType>>([]);
-  const [isExecuted, setIsExecuted] = useState<boolean>(false);
-  const mapRef = useRef<any>();
-  const markerRef = useRef<any>();
-
-  // 보호소 키워드로 검색한 후 저장
-  const searchKeywordPlace = (
-    state: PlaceType[],
-    setState: React.Dispatch<React.SetStateAction<PlaceType[]>>,
-  ) => {
-    const ps = new kakao.maps.services.Places();
-
-    ps.keywordSearch(
-      '동물 보호소',
-      (data: any, status: kakao.maps.services.Status) => {
-        if (status === kakao.maps.services.Status.OK && data) {
-          setState(data);
-          setIsExecuted(true);
-        } else if (status === kakao.maps.services.Status.ERROR) {
-          // 검색 결과가 없을 때 -> 이 부분은 나중에 어떻게 표현할지 회의 필요
-          alert('검색 결과가 없습니다.');
-          setIsExecuted(false);
-        }
-      },
-    );
-  };
-
-  // 필요한 값만 새로운 객체로 저장
-  useEffect(() => {
-    if (!isExecuted) searchKeywordPlace(searchedPlaces, setSearchedPlaces);
-    console.log('filteredPlaces: ', searchedPlaces);
-    console.log('MapRef: ', mapRef.current);
-  }, [searchedPlaces]);
-
-  return (
-    <div className="flex">
-      <Map
-        id="map"
-        center={currentPosition}
-        className="w-[500px] h-[500px]"
-        level={3}
-        ref={mapRef}
-      >
-        {/* <MapMarker
-          position={currentPosition}
-          image={{
-            src: 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png', // 마커이미지의 주소입니다
-            size: {
-              width: 24,
-              height: 35,
-            }, // 마커이미지의 크기입니다
-          }}
-          title="현재 위치"
-          ref={markerRef}
-        /> */}
-        {/* Marker 표시 */}
-        {searchedPlaces.map((searchedPlace) => {
-          console.log('마커 작동여부 확인');
-          return (
-            <MapMarker
-              key={`${searchedPlace.id}-${searchedPlace.place_name}`}
-              position={{
-                x: Number(searchedPlace.x),
-                y: Number(searchedPlace.y),
-              }} // 마커를 표시할 위치
-              image={{
-                src: 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png', // 마커이미지의 주소입니다
-                size: {
-                  width: 24,
-                  height: 35,
-                }, // 마커이미지의 크기입니다
-              }}
-              title={searchedPlace.place_name} // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
-            ></MapMarker>
-          );
-        })}
-      </Map>
-      <div className="list flex flex-col justify-center">
-        {isExecuted && searchedPlaces.length > 0 ? (
-          searchedPlaces.map((searchedPlace, index) => (
-            <span key={index} className=" border-gray-200 ">
-              <span className="">{searchedPlace.place_name}</span>
-              <span className="">{searchedPlace.address_name}</span>
-            </span>
-          ))
-        ) : (
-          <div className="border-gray-200">검색 결과가 없습니다.</div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default TestMap;
diff --git a/src/pages/map/useMap.ts b/src/pages/map/useMap.ts
index 5886eea8..09315632 100644
--- a/src/pages/map/useMap.ts
+++ b/src/pages/map/useMap.ts
@@ -6,6 +6,7 @@ import displayMarker from './displayMarker';
 function useMap<T>(
   containerRef: RefObject<T extends HTMLElement ? T : HTMLElement>,
 ) {
+  const { kakao } = window;
   const [map, setMap] = useState<any>();
   const [searchedPlace, setSearchedPlace] = useState<any>([]);
   const boundRef = useRef<any>();
diff --git "a/src/pages/signUp/\bsignupType.d.ts" "b/src/pages/signUp/\bsignupType.d.ts"
new file mode 100644
index 00000000..cecf203e
--- /dev/null
+++ "b/src/pages/signUp/\bsignupType.d.ts"
@@ -0,0 +1,38 @@
+import { ShelterSignupType } from 'recoil/shelterState';
+
+export interface EmailConfirmProps {
+  isValid: boolean;
+  checked: boolean;
+}
+
+export interface LoadingProps {
+  submitIsLoading: boolean;
+  duplicateCheckIsLoading: boolean;
+}
+
+export interface EmailValidationProps {
+  validText: string;
+  inValidText: string;
+  emailConfirmObj: EmailConfirmProps;
+}
+
+export interface AddressInputProps {
+  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  shelterInfo: ShelterSignupType;
+}
+
+export interface VSignupInputProps {
+  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+  duplicateCheck: () => void;
+  emailValidText: string;
+  emailInValidText: string;
+  passwordConfirm: boolean;
+  errors: Partial<ShelterSignupType>;
+  isLoading: LoadingProps;
+}
+
+export interface ValidationProps {
+  text?: string;
+  className: string;
+}
diff --git a/src/pages/signUp/VSignupPage.tsx b/src/pages/signUp/VSignupPage.tsx
index 7dac9828..df8f5a1d 100644
--- a/src/pages/signUp/VSignupPage.tsx
+++ b/src/pages/signUp/VSignupPage.tsx
@@ -1,6 +1,6 @@
 import Banner from 'commons/Banner';
 import LogoButton from 'commons/LogoButton';
-import SignupInputForm from 'pages/signUp/SignupInputForm';
+import SignupInputForm from 'pages/signUp/components/SignupInputForm';
 
 type Props = {
   redirectLoginPage: () => void;
diff --git a/src/pages/signUp/AddressInputGroup.tsx b/src/pages/signUp/components/AddressInputGroup.tsx
similarity index 96%
rename from src/pages/signUp/AddressInputGroup.tsx
rename to src/pages/signUp/components/AddressInputGroup.tsx
index 1dfe37dd..8b63b6c5 100644
--- a/src/pages/signUp/AddressInputGroup.tsx
+++ b/src/pages/signUp/components/AddressInputGroup.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useRecoilState } from 'recoil';
 import { shelterSignupState } from 'recoil/shelterState';
 import VAddressInputGroup from './VAddressInputGroup';
diff --git a/src/pages/signUp/SignupInputForm.tsx b/src/pages/signUp/components/SignupInputForm.tsx
similarity index 74%
rename from src/pages/signUp/SignupInputForm.tsx
rename to src/pages/signUp/components/SignupInputForm.tsx
index 10b04e02..4093ce9a 100644
--- a/src/pages/signUp/SignupInputForm.tsx
+++ b/src/pages/signUp/components/SignupInputForm.tsx
@@ -1,28 +1,19 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
-import { ShelterSignupType, shelterSignupState } from 'recoil/shelterState';
 import * as Yup from 'yup';
+import { ShelterSignupType, shelterSignupState } from 'recoil/shelterState';
+import {
+  EmailConfirmProps,
+  EmailValidationProps,
+  LoadingProps,
+} from '../signupType';
 import VSignupInputForm from './VSignupInputForm';
 
-export interface EmailConfirmProps {
-  isValid: boolean;
-  checked: boolean;
-}
-
-interface EmailValidProps {
-  validText: string;
-  inValidText: string;
-  emailConfirmObj: EmailConfirmProps;
-}
-
 const SignupInputForm = () => {
   const [shelterInfo, setShelterInfo] = useRecoilState(shelterSignupState);
-  // confirm state의 경우, 일치하지 않을 때 false
-  // isValid: 중복검사 통과했는가?
-  // checked: 이메일 중복 검사를 했는가?
   const [emailConfirm, setEmailConfirm] = useState<EmailConfirmProps>({
-    isValid: true,
+    isValid: false,
     checked: false,
   });
   const [passwordConfirm, setPasswordConfirm] = useState(true);
@@ -30,7 +21,10 @@ const SignupInputForm = () => {
   const [emailInValidText, setEmailInValidText] = useState('');
 
   const [errors, setErrors] = useState<Partial<ShelterSignupType>>({});
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<LoadingProps>({
+    submitIsLoading: false,
+    duplicateCheckIsLoading: false,
+  });
 
   const navigate = useNavigate();
 
@@ -66,19 +60,27 @@ const SignupInputForm = () => {
     ),
   });
 
+  /** 회원가입 전 이메일 중복 검사를 완료했는지 / 검사 결과 적합했는지 확인
+   * @param {string} validText : 적합한 경우 화면에 나타날 Text
+   * @param {string} inValidText : 부적합한 경우 화면에 나타날 Text
+   * @param {object} emailConfirmObj : 중복 검사 시행 확인 / 적합, 부적합을 판단하는 객체
+   * @param {boolean} emailConfirmObj.isValid 적합(true), 부적합(false)을 판단
+   * @param {boolean} emailConfirmObj.checked 중복 검사 시행(true) 확인
+   */
   const getEmailValidText = ({
     validText,
     inValidText,
     emailConfirmObj,
-  }: EmailValidProps) => {
+  }: EmailValidationProps) => {
     setEmailValidText(validText);
     setEmailInValidText(inValidText);
     setEmailConfirm(emailConfirmObj);
   };
 
-  const duplicateCheck = () => {
-    // shelterInfo.email
-    fetch(`${process.env.REACT_APP_URI}/account/email`, {
+  // 이메일 중복 검사 api
+  const duplicateCheck = async () => {
+    setIsLoading((prev) => ({ ...prev, duplicateCheckIsLoading: true }));
+    const response = await fetch(`${process.env.REACT_APP_URI}/account/email`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -121,13 +123,14 @@ const SignupInputForm = () => {
           });
         }
       });
+    setIsLoading((prev) => ({ ...prev, duplicateCheckIsLoading: false }));
   };
 
-  const userfetch = () => {
+  const userFetch = () => {
     // 중복 확인이 되지 않았을 때
     if (!emailConfirm.checked) {
       alert('이메일 중복을 확인해주세요');
-      setIsLoading(false);
+      setIsLoading((prev) => ({ ...prev, submitIsLoading: false }));
     }
     // 제대로 확인되었을 때
     if (emailConfirm.isValid && emailConfirm.checked) {
@@ -156,25 +159,16 @@ const SignupInputForm = () => {
             navigate('/login');
           }
         });
-      setIsLoading(false);
+      setIsLoading((prev) => ({ ...prev, submitIsLoading: false }));
     }
   };
 
+  // input에 들어가는 value에 따라 recoilState인 shelterInfo의 값 갱신
+  // 비밀번호 일치하지 않는 경우 에러 텍스트 표시
+  // 나머지 case의 경우, input value를 저장하는 용도로만 사용하기 때문에 default로 설정
   const getInputValue = (target: HTMLInputElement) => {
-    switch (target.id) {
-      case 'email':
-        setShelterInfo((prev) => ({ ...prev, email: target.value }));
-        break;
-      case 'password':
-        setShelterInfo((prev) => ({ ...prev, password: target.value }));
-        break;
-      case 'shelter':
-        setShelterInfo((prev) => ({ ...prev, name: target.value }));
-        break;
-      case 'shelter-contact':
-        setShelterInfo((prev) => ({ ...prev, contact: target.value }));
-        break;
-      // 비밀번호 일치하지 않는 경우, 표시하기 위해 해당 부분 구현
+    const inputKey = target.dataset.inputType as string;
+    switch (inputKey) {
       case 'password-confirm':
         if (target.value !== shelterInfo.password) {
           setPasswordConfirm(false);
@@ -183,10 +177,12 @@ const SignupInputForm = () => {
         }
         break;
       default:
+        setShelterInfo((prev) => ({ ...prev, [inputKey]: target.value }));
         break;
     }
   };
 
+  // yup을 통해 input value의 validation check 후 errorText를 errors state에 저장
   const validationCheck = () => {
     validationSchema
       .validate(shelterInfo, { abortEarly: false })
@@ -219,11 +215,15 @@ const SignupInputForm = () => {
     getInputValue(target);
   };
 
+  /** 회원가입 버튼 onSubmit handler
+   * 유효성 검사 시행
+   * userFetch가 동작하는 동안 Loader를 보여주기 위해 isLoading state 사용
+   */
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     validationCheck();
-    setIsLoading(true);
-    userfetch();
+    setIsLoading((prev) => ({ ...prev, submitIsLoading: true }));
+    userFetch();
   };
 
   const SignupInputFormProps = {
diff --git a/src/pages/signUp/VAddressInputGroup.tsx b/src/pages/signUp/components/VAddressInputGroup.tsx
similarity index 89%
rename from src/pages/signUp/VAddressInputGroup.tsx
rename to src/pages/signUp/components/VAddressInputGroup.tsx
index 47df9220..f0f2244d 100644
--- a/src/pages/signUp/VAddressInputGroup.tsx
+++ b/src/pages/signUp/components/VAddressInputGroup.tsx
@@ -1,13 +1,11 @@
 import Container from 'commons/Container';
 import Postcode from 'commons/PostCode';
-import { ShelterSignupType } from 'recoil/shelterState';
+import { AddressInputProps } from '../signupType';
 
-interface Props {
-  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  shelterInfo: ShelterSignupType;
-}
-
-const VAddressInputGroup = ({ handleChange, shelterInfo }: Props) => {
+const VAddressInputGroup = ({
+  handleChange,
+  shelterInfo,
+}: AddressInputProps) => {
   return (
     <Container className="flex flex-col gap-4 w-full">
       <div className="flex flex-col gap-2">
diff --git a/src/pages/signUp/VSignupInputForm.tsx b/src/pages/signUp/components/VSignupInputForm.tsx
similarity index 79%
rename from src/pages/signUp/VSignupInputForm.tsx
rename to src/pages/signUp/components/VSignupInputForm.tsx
index 45ffa5c8..9cf484a1 100644
--- a/src/pages/signUp/VSignupInputForm.tsx
+++ b/src/pages/signUp/components/VSignupInputForm.tsx
@@ -1,24 +1,7 @@
-import AddressInputGroup from 'pages/signUp/AddressInputGroup';
+import AddressInputGroup from 'pages/signUp/components/AddressInputGroup';
 import InputGroup from 'commons/InputGroup';
-import React from 'react';
 import { ClipLoader } from 'react-spinners';
-import { ShelterSignupType } from 'recoil/shelterState';
-
-interface VSignupInputProps {
-  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
-  duplicateCheck: () => void;
-  emailValidText: string;
-  emailInValidText: string;
-  passwordConfirm: boolean;
-  errors: Partial<ShelterSignupType>;
-  isLoading: boolean;
-}
-
-interface ValidationProps {
-  text?: string;
-  className: string;
-}
+import { VSignupInputProps, ValidationProps } from '../signupType';
 
 const ValidateText = ({ text, className }: ValidationProps) => {
   return text ? <div className={className}>{text}</div> : null;
@@ -42,6 +25,7 @@ const VSignupInputForm = ({
       <div className="email-confirm flex place-items-end justify-center">
         <InputGroup
           id="email"
+          dataInputType="email"
           name="이메일"
           type="text"
           placeholder="이메일을 입력해주세요."
@@ -53,7 +37,15 @@ const VSignupInputForm = ({
           className="bg-brand-color text-white rounded min-w-[100px] min-h-[44px]"
           onClick={duplicateCheck}
         >
-          중복 확인
+          {isLoading.duplicateCheckIsLoading ? (
+            <ClipLoader
+              size={20}
+              color="#fff"
+              loading={isLoading.duplicateCheckIsLoading}
+            />
+          ) : (
+            '중복 확인'
+          )}
         </button>
       </div>
       <ValidateText text={emailValidText} className={'text-green-500'} />
@@ -61,6 +53,7 @@ const VSignupInputForm = ({
       <ValidateText text={errors.email} className={'text-red-500'} />
       <InputGroup
         id="password"
+        dataInputType="password"
         name="비밀번호"
         type="password"
         placeholder="비밀번호를 입력해주세요."
@@ -70,6 +63,7 @@ const VSignupInputForm = ({
       <ValidateText text={errors.password} className={'text-red-500'} />
       <InputGroup
         id="password-confirm"
+        dataInputType="password-confirm"
         name="비밀번호 확인"
         type="password"
         placeholder="비밀번호를 한번 더 입력해주세요."
@@ -81,6 +75,7 @@ const VSignupInputForm = ({
       )}
       <InputGroup
         id="shelter"
+        dataInputType="name"
         name="보호소 이름"
         type="text"
         placeholder="보호소 이름을 입력해주세요."
@@ -90,6 +85,7 @@ const VSignupInputForm = ({
       <ValidateText text={errors.name} className={'text-red-500'} />
       <InputGroup
         id="shelter-contact"
+        dataInputType="contact"
         name="보호소 연락처"
         type="text"
         placeholder="보호소에 연락 가능한 연락처를 입력해주세요."
@@ -99,8 +95,12 @@ const VSignupInputForm = ({
       <ValidateText text={errors.contact} className={'text-red-500'} />
       <AddressInputGroup />
       <button className="bg-brand-color text-white w-full rounded-md p-2">
-        {isLoading ? (
-          <ClipLoader size={20} color="#fff" loading={isLoading} />
+        {isLoading.submitIsLoading ? (
+          <ClipLoader
+            size={20}
+            color="#fff"
+            loading={isLoading.submitIsLoading}
+          />
         ) : (
           '회원가입'
         )}