diff --git a/package-lock.json b/package-lock.json
index b550accc..34847e98 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,16 +8,20 @@
       "name": "sprint5",
       "version": "0.0.0",
       "dependencies": {
+        "@hookform/resolvers": "^5.1.1",
+        "clsx": "^2.1.1",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-hook-form": "^7.59.0",
         "react-router-dom": "^7.6.0",
         "sass": "^1.88.0",
         "styled-components": "^6.1.18",
+        "zod": "^4.0.5",
         "zustand": "^5.0.5"
       },
       "devDependencies": {
         "@eslint/js": "^9.25.0",
+        "@types/node": "^24.0.10",
         "@types/react": "^19.1.2",
         "@types/react-dom": "^19.1.2",
         "@vitejs/plugin-react": "^4.4.1",
@@ -31,6 +35,7 @@
         "eslint-plugin-react-refresh": "^0.4.19",
         "globals": "^16.0.0",
         "prettier": "^3.5.3",
+        "typescript": "^5.8.3",
         "vite": "^6.3.5"
       }
     },
@@ -806,6 +811,18 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.1.1.tgz",
+      "integrity": "sha512-J/NVING3LMAEvexJkyTLjruSm7aOFx7QX21pzkiJfMoNG0wl5aFEjLTl7ay7IQb9EWY6AkrBy7tHL2Alijpdcg==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/utils": "^0.3.0"
+      },
+      "peerDependencies": {
+        "react-hook-form": "^7.55.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -1490,6 +1507,12 @@
       "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
       "dev": true
     },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1543,6 +1566,15 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "24.0.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.10.tgz",
+      "integrity": "sha512-ENHwaH+JIRTDIEEbDK6QSQntAYGtbvdDXnMXnZaZ6k13Du1dPMmprkEHIL7ok2Wl2aZevetwTAb5S+7yIF+enA==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~7.8.0"
+      }
+    },
     "node_modules/@types/react": {
       "version": "19.1.4",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.4.tgz",
@@ -2050,6 +2082,14 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -5468,6 +5508,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
@@ -5486,6 +5539,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici-types": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.8.0.tgz",
+      "integrity": "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==",
+      "dev": true
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
@@ -5737,6 +5796,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zod": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.0.5.tgz",
+      "integrity": "sha512-/5UuuRPStvHXu7RS+gmvRf4NXrNxpSllGwDnCBcJZtQsKrviYXm54yDGV2KYNLT5kq0lHGcl7lqWJLgSaG+tgA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/zustand": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.5.tgz",
diff --git a/package.json b/package.json
index c34aa4a2..fa2974a9 100644
--- a/package.json
+++ b/package.json
@@ -12,16 +12,20 @@
     "format": "prettier --write \"src/**/*.{js,jsx,css,json}\""
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.1.1",
+    "clsx": "^2.1.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.59.0",
     "react-router-dom": "^7.6.0",
     "sass": "^1.88.0",
     "styled-components": "^6.1.18",
+    "zod": "^4.0.5",
     "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
+    "@types/node": "^24.0.10",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
@@ -35,6 +39,7 @@
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
     "prettier": "^3.5.3",
+    "typescript": "^5.8.3",
     "vite": "^6.3.5"
   }
 }
diff --git a/src/App.jsx b/src/App.tsx
similarity index 83%
rename from src/App.jsx
rename to src/App.tsx
index d94204d5..35fba58f 100644
--- a/src/App.jsx
+++ b/src/App.tsx
@@ -1,11 +1,11 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Header from './components/Header/Header';
-import AddItem from './pages/AddItem/AddItem';
+import AddItem from './pages/AddItem/AddItem.jsx';
 import Login from './pages/Auth/Login';
 import SignUp from './pages/Auth/SignUp';
 import Home from './pages/Home/Home';
-import Items from './pages/Items/Items';
-import ProductDetail from './pages/ProductDetail/ProductDetail';
+import Items from './pages/Items/Items.jsx';
+import ProductDetail from './pages/ProductDetail/ProductDetail.jsx';
 import './styles/reset.css';
 import './styles/global.css';
 import './App.css';
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.tsx
similarity index 92%
rename from src/components/Header/Header.jsx
rename to src/components/Header/Header.tsx
index 14075edf..742eb0a6 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.tsx
@@ -7,7 +7,7 @@ import HeaderAuth from './HeaderAuth';
 import Navigations from './Navigations';
 
 function Header() {
-  const [isLoggedIn] = useState(sessionStorage.getItem('loggedIn'));
+  const [isLoggedIn] = useState(!!sessionStorage.getItem('loggedIn'));
 
   return (
     <>
diff --git a/src/components/Header/HeaderAuth.jsx b/src/components/Header/HeaderAuth.tsx
similarity index 83%
rename from src/components/Header/HeaderAuth.jsx
rename to src/components/Header/HeaderAuth.tsx
index 9b676607..cef81965 100644
--- a/src/components/Header/HeaderAuth.jsx
+++ b/src/components/Header/HeaderAuth.tsx
@@ -2,7 +2,11 @@ import userImg from '@assets/icon/ic_user.png';
 import styles from '@styles/Header.module.css';
 import { Link } from 'react-router-dom';
 
-function HeaderAuth({ isLoggedIn }) {
+interface Props {
+  isLoggedIn: boolean;
+}
+
+function HeaderAuth({ isLoggedIn }: Props) {
   return (
     <>
       {isLoggedIn ? (
diff --git a/src/components/Header/Navigations.jsx b/src/components/Header/Navigations.tsx
similarity index 77%
rename from src/components/Header/Navigations.jsx
rename to src/components/Header/Navigations.tsx
index e307ae46..787495a8 100644
--- a/src/components/Header/Navigations.jsx
+++ b/src/components/Header/Navigations.tsx
@@ -1,5 +1,6 @@
 import styles from '@styles/Header.module.css';
 import { Link, NavLink, useLocation } from 'react-router-dom';
+import clsx from 'clsx';
 
 function Navigations() {
   const location = useLocation();
@@ -9,10 +10,10 @@ function Navigations() {
 
   return (
     <div className={styles.navCategory}>
-      <Link>자유게시판</Link>
+      <Link to={'/'}>자유게시판</Link>
       <NavLink
         to="/items"
-        className={() => (isMarketLocation ? `${styles.isActive}` : null)}
+        className={clsx({ [styles.isActive]: isMarketLocation })}
       >
         중고마켓
       </NavLink>
diff --git a/src/components/KebabMenu.jsx b/src/components/KebabMenu.jsx
index f529fa84..1f8f515a 100644
--- a/src/components/KebabMenu.jsx
+++ b/src/components/KebabMenu.jsx
@@ -1,5 +1,6 @@
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import kebabIcon from '@assets/icon/ic_kebab.png';
+import useOutsideClick from '../hooks/useOutsideClick';
 import styles from '../styles/KebabMenu.module.css';
 
 function makeHtmlAttr(selector) {
@@ -24,28 +25,22 @@ function KebabMenu({ dropdownList, onSelect = () => {} }) {
     setIsOpen(false);
   }
 
-  useEffect(() => {
-    function closeDropDown(e) {
-      if (!kebabRef.current.contains(e.target)) {
-        setIsOpen(false);
-      }
-    }
-
-    window.addEventListener('click', closeDropDown);
+  function onCloseDropdown() {
+    setIsOpen(false);
+  }
 
-    return () => window.removeEventListener('click', closeDropDown);
-  }, []);
+  useOutsideClick(kebabRef, onCloseDropdown);
 
   return (
-    <div className={styles.kebab}>
-      <button ref={kebabRef} onClick={handleToggleDropDown}>
+    <div className={styles.kebab} ref={kebabRef}>
+      <button onClick={handleToggleDropDown}>
         <img src={kebabIcon} alt="케밥 아이콘" />
       </button>
       {isOpen && (
         <ul role="listbox">
           {dropdownList?.map((selector) => (
             <li
-              key={`${selector}`}
+              key={selector}
               {...makeHtmlAttr(selector)}
               onClick={() => handleClick(selector)}
             >
diff --git a/src/components/SocialLogin.jsx b/src/components/SocialLogin.tsx
similarity index 100%
rename from src/components/SocialLogin.jsx
rename to src/components/SocialLogin.tsx
diff --git a/src/global.d.ts b/src/global.d.ts
new file mode 100644
index 00000000..c588a287
--- /dev/null
+++ b/src/global.d.ts
@@ -0,0 +1,17 @@
+declare module '*.png';
+
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.jsx' {
+  import * as React from 'react';
+  const component: React.FC<any>;
+  export default component;
+}
diff --git a/src/hooks/useOutsideClick.js b/src/hooks/useOutsideClick.js
new file mode 100644
index 00000000..f78b1ac3
--- /dev/null
+++ b/src/hooks/useOutsideClick.js
@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+
+function useOutsideClick(ref, onCloseDropdown) {
+  useEffect(() => {
+    function closeDropdownHandler(e) {
+      if (ref.current && !ref.current.contains(e.target)) {
+        onCloseDropdown();
+      }
+    }
+
+    window.addEventListener('click', closeDropdownHandler);
+
+    return () => window.removeEventListener('click', closeDropdownHandler);
+  }, [ref, onCloseDropdown]);
+}
+
+export default useOutsideClick;
diff --git a/src/hooks/useValidate.js b/src/hooks/useValidate.js
deleted file mode 100644
index 9ec7a193..00000000
--- a/src/hooks/useValidate.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import { useCallback, useReducer } from 'react';
-
-const validRuleObj = {
-  'user-email': {
-    isValid(value) {
-      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
-    },
-    getErrorMessage(value) {
-      return value ? '잘못된 이메일입니다.' : '이메일을 입력해주세요';
-    },
-  },
-  'user-password': {
-    isValid(value) {
-      return value.length >= 8;
-    },
-    getErrorMessage(value) {
-      return value.length == 0
-        ? '비밀번호를 입력해주세요.'
-        : '비밀번호를 8자 이상 입력해주세요.';
-    },
-  },
-  'user-name': {
-    isValid(value) {
-      return value;
-    },
-    getErrorMessage() {
-      return '닉네임을 입력해주세요';
-    },
-  },
-  'user-password-check': {
-    isValid(value, pwValue) {
-      return pwValue === value && value.length !== 0;
-    },
-    getErrorMessage() {
-      return '비밀번호가 일치하지 않습니다.';
-    },
-  },
-};
-
-const initialValidationStates = {
-  //앞으로 해당 인풋들 다 여기에 한번에 저장 키:밸류로
-  values: {},
-  errors: {},
-  errorMessages: {},
-  isValid: {},
-};
-
-function validationReducer(state, action) {
-  //state는 validationStates
-  switch (action.type) {
-    case 'set_validationState': {
-      const { name, value } = action.payload;
-      const validator = validRuleObj[name];
-      const isValid = Boolean(
-        validator.isValid(value, state.values['user-password']),
-      );
-      const errMsg = isValid ? '' : validator.getErrorMessage(value);
-
-      return {
-        //여기서 새로 만들어서 set해주기
-        values: { ...state.values, [name]: value },
-        errors: { ...state.errors, [name]: !isValid },
-        errorMessages: { ...state.errorMessages, [name]: errMsg },
-        isValid: { ...state.isValid, [name]: isValid },
-      };
-    }
-    default:
-      return state;
-  }
-}
-
-export function useValidate() {
-  const [validationStates, dispatch] = useReducer(
-    validationReducer,
-    initialValidationStates,
-  );
-
-  const validate = useCallback((name, value) => {
-    dispatch({ type: 'set_validationState', payload: { name, value } });
-  }, []);
-
-  const getFieldState = useCallback(
-    (name) => {
-      return {
-        value: validationStates.values[name] || '',
-        error: validationStates.errors[name] || false,
-        errorMessage: validationStates.errorMessages[name] || '',
-        isValid: validationStates.isValid[name] || false, //초기에만 false로 주기
-      };
-    },
-    [validationStates],
-  );
-
-  return { getFieldState, validate };
-}
-
-//useCallback으로 해도 어차피 isValid변할 때마다 다시 만들거면
-//  그냥 바깥에 빼는게 나을 것 같음
-export function checkAllValid(...args) {
-  return args.every((item) => item.isValid);
-}
diff --git a/src/hooks/useValidate.ts b/src/hooks/useValidate.ts
new file mode 100644
index 00000000..db8f96af
--- /dev/null
+++ b/src/hooks/useValidate.ts
@@ -0,0 +1,132 @@
+import { useCallback, useReducer } from 'react';
+
+/*
+  리액트 훅 폼 사용 전 폼 관리 할 때 사용하던 커스텀 훅 파일입니다.
+  지금은 사용하지 않는 파일인데
+  너무 파일 변경 사항이 없는 것 같아서 이 파일도 수정해봤습니다.
+*/
+
+type FieldName =
+  | 'user-email'
+  | 'user-password'
+  | 'user-name'
+  | 'user-password-check';
+
+interface FieldState {
+  value: string;
+  error: boolean;
+  errorMessage: string;
+  isValid: boolean;
+}
+
+type FormState = Record<FieldName, FieldState>;
+
+interface Action {
+  type: 'UPDATE_FIELD';
+  payload: { name: FieldName; value: string };
+}
+
+function createInitialFieldState(): FieldState {
+  return {
+    value: '',
+    error: false,
+    errorMessage: '',
+    isValid: false,
+  };
+}
+
+const initialState: FormState = {
+  'user-email': createInitialFieldState(),
+  'user-password': createInitialFieldState(),
+  'user-name': createInitialFieldState(),
+  'user-password-check': createInitialFieldState(),
+};
+
+function validationReducer(state: FormState, action: Action) {
+  //state는 validationStates
+  switch (action.type) {
+    case 'UPDATE_FIELD': {
+      const { name, value } = action.payload;
+      const validator = validRuleObj[name];
+      const isValid = validator.isValid(value, state['user-password'].value); //인자 두개 받는 경우는 passwordCheck밖에 없으니
+      const errMsg = isValid ? '' : validator.getErrorMessage(value);
+
+      return {
+        ...state,
+        [name]: {
+          value,
+          error: !isValid,
+          errorMessage: errMsg,
+          isValid: isValid,
+        },
+      };
+    }
+    default:
+      return state;
+  }
+}
+
+export function useValidate() {
+  const [validationStates, dispatch] = useReducer(
+    validationReducer,
+    initialState,
+  );
+
+  const validate = useCallback((name: FieldName, value: string) => {
+    //name: 추가할 인풋 이름
+    dispatch({ type: 'UPDATE_FIELD', payload: { name, value } });
+  }, []);
+
+  const getFieldState = useCallback(
+    (name: FieldName) => {
+      return validationStates[name];
+    },
+    [validationStates],
+  );
+
+  return { getFieldState, validate };
+}
+
+//  그냥 바깥에 빼는게 나을 것 같음
+export function checkAllValid(...args: FieldState[]) {
+  // 기존에 checkAllValid(getFieldState('user-email'),...)처럼 호출
+  return args.every((item) => item.isValid);
+  //emailState={...,isValid:true}
+}
+
+const validRuleObj = {
+  'user-email': {
+    isValid(value: string) {
+      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+    },
+    getErrorMessage(value: string) {
+      return value ? '잘못된 이메일입니다.' : '이메일을 입력해주세요';
+    },
+  },
+  'user-password': {
+    isValid(value: string) {
+      return value.length >= 8;
+    },
+    getErrorMessage(value: string) {
+      return value.length == 0
+        ? '비밀번호를 입력해주세요.'
+        : '비밀번호를 8자 이상 입력해주세요.';
+    },
+  },
+  'user-name': {
+    isValid(value: string) {
+      return Boolean(value);
+    },
+    getErrorMessage() {
+      return '닉네임을 입력해주세요';
+    },
+  },
+  'user-password-check': {
+    isValid(value: string, pwValue: string) {
+      return pwValue === value && value.length !== 0;
+    },
+    getErrorMessage() {
+      return '비밀번호가 일치하지 않습니다.';
+    },
+  },
+};
diff --git a/src/pages/Auth/EmailField.jsx b/src/pages/Auth/EmailField.tsx
similarity index 100%
rename from src/pages/Auth/EmailField.jsx
rename to src/pages/Auth/EmailField.tsx
diff --git a/src/pages/Auth/FormInput.jsx b/src/pages/Auth/FormInput.jsx
deleted file mode 100644
index e681f635..00000000
--- a/src/pages/Auth/FormInput.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import styles from '@styles/ErrMsg.module.css';
-import { useFormContext, useFormState } from 'react-hook-form';
-
-const validRuleObj = {
-  'user-email': {
-    required: '이메일을 입력해주세요',
-    pattern: {
-      value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
-      message: '이메일 형식에 맞지 않습니다.',
-    },
-  },
-  'user-password': {
-    required: '비밀번호를 입력해주세요.',
-    minLength: {
-      value: 8,
-      message: '비밀번호를 8자 이상 입력해주세요.',
-    },
-  },
-  'user-name': {
-    required: '비밀번호를 입력해주세요.',
-  },
-  'user-password-check': {
-    required: '비밀번호를 다시 입력해주세요.',
-  },
-};
-
-function FormInput(props) {
-  const { placeholder, name, type, id, validatePwCheck } = props;
-  const { register } = useFormContext();
-  const { errors } = useFormState({ name }); //여기서 name으로 따로 골라와야 개별로 감지하는듯...?
-  const error = errors[name];
-
-  return (
-    <>
-      <input
-        {...register(name, {
-          ...validRuleObj[name],
-          validate: validatePwCheck || undefined, //프롭에 validatePwCheck 없으면 undefined로
-        })}
-        className={error && styles.inputErrorBorder}
-        type={type}
-        id={id}
-        name={name}
-        placeholder={placeholder}
-      />
-      <div className={styles.errorMessage}>{error?.message}</div>
-    </>
-  );
-}
-
-export default FormInput;
diff --git a/src/pages/Auth/FormInput.tsx b/src/pages/Auth/FormInput.tsx
new file mode 100644
index 00000000..6ac0538f
--- /dev/null
+++ b/src/pages/Auth/FormInput.tsx
@@ -0,0 +1,69 @@
+import styles from '@styles/ErrMsg.module.css';
+import {
+  useFormContext,
+  useFormState,
+  type FieldErrors,
+  type FieldValues,
+  type Path,
+} from 'react-hook-form';
+import clsx from 'clsx';
+import { z } from 'zod';
+
+export const FormDataSchema = z
+  .object({
+    'user-email': z
+      .string()
+      .min(1, '이메일을 입력해주세요')
+      .email({ message: '이메일 형식에 맞지 않습니다.' }),
+    'user-password': z
+      .string()
+      .min(1, '비밀번호를 입력해주세요')
+      .min(8, '비밀번호를 8자 이상 입력해주세요'),
+    'user-name': z.string().min(1, '이름을 입력해주세요'),
+    'user-password-check': z.string().min(1, '비밀번호를 다시 입력해주세요.'),
+  })
+  .refine(
+    (formData) => formData['user-password'] === formData['user-password-check'],
+    {
+      path: ['user-password-check'], //해당 평가를 적용할 필드(프로퍼티 키로 줘야 함)
+      message: '비밀번호가 일치하지 않습니다.',
+    },
+  );
+
+interface Props<T> {
+  placeholder: string;
+  name: Path<T>;
+  type: string;
+  id: string;
+}
+
+function FormInput<T extends FieldValues>(props: Props<T>) {
+  const { placeholder, name, type, id } = props;
+  const methods = useFormContext();
+  const { errors } = useFormState({ name }); //여기서 name으로 따로 골라와야 개별로 감지
+
+  function getErrorMessage(errors: FieldErrors) {
+    const errMsg = errors[name]?.message;
+    const result = errMsg && typeof errMsg === 'string' ? errMsg : '';
+
+    return result;
+  }
+
+  return (
+    <>
+      <input
+        {...methods.register(name)} //리졸버 등록했으니 2번째 인자로 함수 넣어줄 필요xㄴ
+        className={clsx({ [styles.inputErrorBorder]: getErrorMessage(errors) })}
+        type={type}
+        id={id}
+        name={name}
+        placeholder={placeholder}
+      />
+      <div role="alert" className={styles.errorMessage}>
+        {getErrorMessage(errors)}
+      </div>
+    </>
+  );
+}
+
+export default FormInput;
diff --git a/src/pages/Auth/Login.jsx b/src/pages/Auth/Login.tsx
similarity index 55%
rename from src/pages/Auth/Login.jsx
rename to src/pages/Auth/Login.tsx
index f2b45faf..0f36d239 100644
--- a/src/pages/Auth/Login.jsx
+++ b/src/pages/Auth/Login.tsx
@@ -1,24 +1,37 @@
 import logo from '@assets/images/logo-title.png';
 import SocialLogin from '@components/SocialLogin';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, useForm, type SubmitHandler } from 'react-hook-form';
 import { Link, useNavigate } from 'react-router-dom';
 import EmailField from './EmailField';
 import PasswordField from './PasswordField';
 import styles from './styles/Auth.module.css';
 import SubmitButton from './SubmitButton';
+import { FormDataSchema } from './FormInput';
+import { zodResolver } from '@hookform/resolvers/zod';
+import type z from 'zod';
+
+//기존 유효성 평가 -> VALID_RULES 사용 근데 사라졌으니까
+//리졸버 연결해야하는데 조드 스키마랑 여기 페이지의 필드가 일치해야 해서
+//  스키마를 새로 만들거나 pick해오는 과정이 필요
+const LoginFormSchema = FormDataSchema.pick({
+  'user-email': true,
+  'user-password': true,
+}); //스키마 메서드pick 사용해서 가져오기
+
+type LoginFormData = z.infer<typeof LoginFormSchema>; //스키마를 기반으로 타입으로 다시 만들어줌
 
 function Login() {
   const toItemsNavigation = useNavigate();
-  const methods = useForm({ mode: 'all' }); //change,blur될 때 유효성 평가해줘
+  const methods = useForm<LoginFormData>({
+    resolver: zodResolver(LoginFormSchema),
+    mode: 'all',
+  }); //change,blur될 때 유효성 평가해줘
 
-  function onSubmit(data, e) {
-    if (!methods.isValid) {
-      sessionStorage.setItem('loggedIn', data['user-email']);
-      toItemsNavigation('/items');
-    } else {
-      e.preventDefault();
-    }
-  }
+  const onSubmit: SubmitHandler<LoginFormData> = (data) => {
+    //data는 RHF의 FormValues타입. RHF의 SubmitHandler는 e를 못 받는다
+    sessionStorage.setItem('loggedIn', data['user-email']);
+    toItemsNavigation('/items');
+  };
 
   return (
     <main className={styles.login}>
diff --git a/src/pages/Auth/NameField.jsx b/src/pages/Auth/NameField.tsx
similarity index 100%
rename from src/pages/Auth/NameField.jsx
rename to src/pages/Auth/NameField.tsx
diff --git a/src/pages/Auth/PasswordCheckField.jsx b/src/pages/Auth/PasswordCheckField.tsx
similarity index 77%
rename from src/pages/Auth/PasswordCheckField.jsx
rename to src/pages/Auth/PasswordCheckField.tsx
index a86d7c62..8dbe3cb3 100644
--- a/src/pages/Auth/PasswordCheckField.jsx
+++ b/src/pages/Auth/PasswordCheckField.tsx
@@ -1,26 +1,18 @@
 import { useState } from 'react';
-import { useWatch } from 'react-hook-form';
 import FormInput from './FormInput';
 import styles from './styles/Auth.module.css';
 
 function PasswordCheckField() {
   const [passwordCheckToggle, setPasswordCheckToggle] = useState(false);
-  const passwordValue = useWatch({ name: 'user-password' });
 
   function handlePwCheckToggle() {
     setPasswordCheckToggle(!passwordCheckToggle);
   }
 
-  function validatePwCheck(value) {
-    if (value === passwordValue) return true;
-    else return '비밀번호가 일치하지 않습니다.';
-  }
-
   return (
     <div className={styles.containerRelative}>
       <label htmlFor="user-password">비밀번호 확인</label>
       <FormInput
-        validatePwCheck={validatePwCheck}
         id="user-password-check"
         type={passwordCheckToggle ? 'text' : 'password'}
         name="user-password-check"
diff --git a/src/pages/Auth/PasswordField.jsx b/src/pages/Auth/PasswordField.tsx
similarity index 100%
rename from src/pages/Auth/PasswordField.jsx
rename to src/pages/Auth/PasswordField.tsx
diff --git a/src/pages/Auth/SignUp.jsx b/src/pages/Auth/SignUp.tsx
similarity index 76%
rename from src/pages/Auth/SignUp.jsx
rename to src/pages/Auth/SignUp.tsx
index 5371d7a7..c4694954 100644
--- a/src/pages/Auth/SignUp.jsx
+++ b/src/pages/Auth/SignUp.tsx
@@ -1,6 +1,6 @@
 import logo from '@assets/images/logo-title.png';
 import SocialLogin from '@components/SocialLogin';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, useForm, type SubmitHandler } from 'react-hook-form';
 import { Link, useNavigate } from 'react-router-dom';
 import EmailField from './EmailField';
 import NameField from './NameField';
@@ -8,18 +8,22 @@ import PasswordCheckField from './PasswordCheckField';
 import PasswordField from './PasswordField';
 import styles from './styles/Auth.module.css';
 import SubmitButton from './SubmitButton';
+import { FormDataSchema } from './FormInput';
+import type z from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+type SignUpFormData = z.infer<typeof FormDataSchema>;
 
 function SignUp() {
   const toLoginNavigate = useNavigate();
-  const methods = useForm({ mode: 'all' });
+  const methods = useForm<SignUpFormData>({
+    resolver: zodResolver(FormDataSchema),
+    mode: 'all',
+  });
 
-  function onSubmit(e) {
-    if (!methods.isValid) {
-      toLoginNavigate('/Login');
-    } else {
-      e.preventDefault();
-    }
-  }
+  const onSubmit: SubmitHandler<SignUpFormData> = () => {
+    toLoginNavigate('/Login');
+  };
 
   return (
     <main className={styles.signUp}>
diff --git a/src/pages/Auth/SubmitButton.jsx b/src/pages/Auth/SubmitButton.jsx
deleted file mode 100644
index f354a3aa..00000000
--- a/src/pages/Auth/SubmitButton.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useFormState } from 'react-hook-form';
-import styles from './styles/SubmitButton.module.css';
-
-export default function SubmitButton({ children }) {
-  const { isValid } = useFormState();
-
-  return (
-    <button
-      type="submit"
-      className={`${styles.authBtn} ${!isValid ? styles.inActivateBtn : styles.activateBtn}`}
-    >
-      {children}
-    </button>
-  );
-}
diff --git a/src/pages/Auth/SubmitButton.tsx b/src/pages/Auth/SubmitButton.tsx
new file mode 100644
index 00000000..c670f93a
--- /dev/null
+++ b/src/pages/Auth/SubmitButton.tsx
@@ -0,0 +1,23 @@
+import { useFormState } from 'react-hook-form';
+import styles from './styles/SubmitButton.module.css';
+import clsx from 'clsx';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export default function SubmitButton({ children }: Props) {
+  const { isValid } = useFormState();
+
+  return (
+    <button
+      type="submit"
+      className={clsx(styles.authBtn, {
+        [styles.inActivateBtn]: !isValid,//유효하지 않을 때 true
+        [styles.activateBtn]: isValid,//유효하면 true
+      })}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/src/pages/Home/Footer.jsx b/src/pages/Home/Footer.tsx
similarity index 100%
rename from src/pages/Home/Footer.jsx
rename to src/pages/Home/Footer.tsx
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.tsx
similarity index 100%
rename from src/pages/Home/Home.jsx
rename to src/pages/Home/Home.tsx
diff --git a/src/pages/Home/Main.jsx b/src/pages/Home/Main.tsx
similarity index 100%
rename from src/pages/Home/Main.jsx
rename to src/pages/Home/Main.tsx
diff --git a/src/pages/Home/SnsList.jsx b/src/pages/Home/SnsList.tsx
similarity index 100%
rename from src/pages/Home/SnsList.jsx
rename to src/pages/Home/SnsList.tsx
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 00000000..731daa58
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,43 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "node",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    "esModuleInterop": true, //v
+    "isolatedModules": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "typeRoots": ["./global.d.ts"],
+
+    "baseUrl": "./src",
+    "paths": {
+      "@context/*": ["context/*"],
+      "@components/*": ["components/*"],
+      "@utils/*": ["utils/*"],
+      "@hooks/*": ["hooks/*"],
+      "@styles/*": ["styles/*"],
+      "@assets/*": ["assets/*"],
+      "@pages/*": ["pages/*"],
+      "@service/*": ["service/*"]
+    }
+  },
+  "include": ["src/**/*"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..67d9d9c4
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+  ]
+}
diff --git a/vite.config.js b/vite.config.ts
similarity index 95%
rename from vite.config.js
rename to vite.config.ts
index 17bfb147..6918f45b 100644
--- a/vite.config.js
+++ b/vite.config.ts
@@ -1,7 +1,7 @@
 import path from 'path';
 import { fileURLToPath } from 'url';
 import react from '@vitejs/plugin-react';
-import { defineConfig } from "vite";
+import { defineConfig } from 'vite';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);