diff --git a/package-lock.json b/package-lock.json
index 4cb775c2..5a03c221 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "1-weekly-mission",
       "version": "0.1.0",
       "dependencies": {
+        "@hookform/resolvers": "^5.0.1",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -16,11 +17,13 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-helmet": "^6.1.0",
+        "react-hook-form": "^7.56.3",
         "react-icons": "5.3.0",
         "react-router-dom": "^7.2.0",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.5",
-        "web-vitals": "^4.2.4"
+        "web-vitals": "^4.2.4",
+        "zod": "^3.24.4"
       },
       "devDependencies": {
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
@@ -2396,6 +2399,18 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.0.1.tgz",
+      "integrity": "sha512-u/+Jp83luQNx9AdyW2fIPGY6Y7NG68eN2ZW8FOJYL+M0i4s49+refdJdOp/A9n9HFQtQs3HIDHQvX3ZET2o7YA==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/utils": "^0.3.0"
+      },
+      "peerDependencies": {
+        "react-hook-form": "^7.55.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.11",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
@@ -3374,6 +3389,12 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "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/@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -14900,6 +14921,22 @@
         "react": ">=16.3.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.56.3",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.56.3.tgz",
+      "integrity": "sha512-IK18V6GVbab4TAo1/cz3kqajxbDPGofdF0w7VHdCo0Nt8PrPlOZcuuDq9YYIV1BtjcX78x0XsldbQRQnQXWXmw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
@@ -18132,6 +18169,15 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.24.4",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.4.tgz",
+      "integrity": "sha512-OdqJE9UDRPwWsrHjLN2F8bPxvwJBK22EHLWtanu0LSYr5YqzsaaW3RMgmjwr8Rypg5k+meEJdSPXJZXE/yqOMg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 9d95a658..fcd97dfe 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@hookform/resolvers": "^5.0.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -11,11 +12,13 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
+    "react-hook-form": "^7.56.3",
     "react-icons": "5.3.0",
     "react-router-dom": "^7.2.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
-    "web-vitals": "^4.2.4"
+    "web-vitals": "^4.2.4",
+    "zod": "^3.24.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/api/client/interceptors.ts b/src/api/client/interceptors.ts
index 1b6ff212..807e6b5d 100644
--- a/src/api/client/interceptors.ts
+++ b/src/api/client/interceptors.ts
@@ -3,7 +3,7 @@ import { InternalAxiosRequestConfig, AxiosHeaders } from 'axios';
 export const requestInterceptor = (
   config: InternalAxiosRequestConfig
 ): InternalAxiosRequestConfig => {
-  const tokenString = localStorage.getItem('token');
+  const tokenString = localStorage.getItem('access_token');
   let token = '';
 
   if (tokenString) {
diff --git a/src/api/services/auth.services.ts b/src/api/services/auth.services.ts
new file mode 100644
index 00000000..704f541d
--- /dev/null
+++ b/src/api/services/auth.services.ts
@@ -0,0 +1,59 @@
+import { SignInFormData } from '../../pages/LoginPage';
+import { SignUpFormData } from '../../pages/SignUpPage';
+import { User } from '../../types/types';
+import requestor from '../client/requestor';
+
+interface AuthResponse {
+  accessToken: string;
+  refreshToken: string;
+  user: User;
+}
+
+class AuthService {
+  async signUp(data: SignUpFormData): Promise<AuthResponse> {
+    try {
+      const response = await requestor.post<AuthResponse>('/auth/signUp', data);
+      return response.data;
+    } catch (error: any) {
+      console.error('회원가입 실패:', error);
+      if (error.response && error.response.data) {
+        throw error.response.data;
+      }
+      throw error;
+    }
+  }
+
+  async login(data: SignInFormData) {
+    try {
+      const response = await requestor.post<AuthResponse>('/auth/signIn', data);
+      localStorage.setItem(
+        'access_token',
+        JSON.stringify({ token: response.data.accessToken })
+      );
+      localStorage.setItem(
+        'refresh_token',
+        JSON.stringify({ token: response.data.refreshToken })
+      );
+      localStorage.setItem('user', JSON.stringify(response.data.user));
+
+      return response.data;
+    } catch (error: any) {
+      console.error('로그인 실패:', error);
+      if (error.response && error.response.data) {
+        throw error.response.data;
+      }
+      throw error;
+    }
+  }
+
+  logout() {
+    // 로컬 스토리지에서 인증 관련 데이터 제거
+    localStorage.removeItem('access_token');
+    localStorage.removeItem('refresh_token');
+    localStorage.removeItem('user');
+  }
+}
+
+const authService = new AuthService();
+
+export default authService;
diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx
index 04ccc31d..421dbacf 100644
--- a/src/components/common/Button.tsx
+++ b/src/components/common/Button.tsx
@@ -1,13 +1,14 @@
 import './Button.css';
-import { MouseEvent, ReactNode } from 'react';
+import { ButtonHTMLAttributes, MouseEvent, PropsWithChildren } from 'react';
 
-interface ButtonProps {
-  children?: ReactNode;
-  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
-  disabled?: boolean;
-}
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
 
-function Button({ children, onClick, disabled, ...rest }: ButtonProps) {
+function Button({
+  children,
+  onClick,
+  disabled,
+  ...rest
+}: PropsWithChildren<ButtonProps>) {
   return (
     <button className="button" onClick={onClick} disabled={disabled} {...rest}>
       {children}
diff --git a/src/components/common/ButtonMedium.tsx b/src/components/common/ButtonMedium.tsx
index 31914cd1..1bc3cdbe 100644
--- a/src/components/common/ButtonMedium.tsx
+++ b/src/components/common/ButtonMedium.tsx
@@ -1,9 +1,7 @@
 import './ButtonMedium.css';
-import { MouseEvent, ReactNode } from 'react';
+import { ButtonHTMLAttributes, PropsWithChildren } from 'react';
 
-interface ButtonMediumProps {
-  children: ReactNode;
-  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+interface ButtonMediumProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   imgSrc: string;
   imgAlt: string;
 }
@@ -14,7 +12,7 @@ function ButtonMedium({
   imgSrc,
   imgAlt,
   ...rest
-}: ButtonMediumProps) {
+}: PropsWithChildren<ButtonMediumProps>) {
   return (
     <div className="ButtonMediumContainer">
       <button className="ButtonMedium" onClick={onClick}>
diff --git a/src/components/common/Dropdown.css b/src/components/common/Dropdown.css
index e25d0b8f..dd1dbbb9 100644
--- a/src/components/common/Dropdown.css
+++ b/src/components/common/Dropdown.css
@@ -13,6 +13,7 @@
   font-size: 16px;
   font-weight: 400;
   color: var(--gray-500);
+  white-space: nowrap;
 }
 
 .commentDropdown li {
diff --git a/src/components/common/Dropdown.tsx b/src/components/common/Dropdown.tsx
index c392c91a..3d722fb9 100644
--- a/src/components/common/Dropdown.tsx
+++ b/src/components/common/Dropdown.tsx
@@ -1,25 +1,31 @@
-import { useEffect, useRef } from 'react';
+import { MouseEventHandler, useEffect, useRef } from 'react';
 import './Dropdown.css';
 
 interface DropdownItem {
   label: string;
-  onClick: () => void;
+  onClick: MouseEventHandler;
 }
 
 interface DropdownProps {
   items: DropdownItem[];
   isOpen: boolean;
   onClose: () => void;
+  triggerElementId?: string;
 }
 
-function Dropdown({ items, isOpen, onClose }: DropdownProps) {
-  console.log(isOpen);
+function Dropdown({ items, isOpen, onClose, triggerElementId }: DropdownProps) {
   const dropdownRef = useRef<HTMLUListElement>(null);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Element;
+
+      // 트리거 요소(이미지)를 클릭한 경우 무시
+      if (triggerElementId && target.id === triggerElementId) {
+        return;
+      }
+
       if (
-        isOpen &&
         dropdownRef.current &&
         !dropdownRef.current.contains(event.target as Node)
       ) {
@@ -27,14 +33,12 @@ function Dropdown({ items, isOpen, onClose }: DropdownProps) {
       }
     };
 
-    if (isOpen) {
-      window.addEventListener('mousedown', handleClickOutside);
-    }
+    window.addEventListener('mousedown', handleClickOutside);
 
     return () => {
       window.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [isOpen, onClose]);
+  }, [onClose]);
 
   return (
     <>
diff --git a/src/components/common/FileInput.tsx b/src/components/common/FileInput.tsx
index 8b8ab4e3..e9433239 100644
--- a/src/components/common/FileInput.tsx
+++ b/src/components/common/FileInput.tsx
@@ -3,7 +3,7 @@ import './FileInput.css';
 import PlusIcon from '../../assets/icons/plus-icon.svg';
 
 interface FileInputProps {
-  value: string | null | File | null;
+  value: string | File | null;
   onChange: (name: string, value: File | null) => void;
 }
 
diff --git a/src/components/common/Input.css b/src/components/common/Input.css
index 888f643c..9f281e8e 100644
--- a/src/components/common/Input.css
+++ b/src/components/common/Input.css
@@ -19,3 +19,11 @@
 .inputContainer input:focus {
   outline-color: var(--blue);
 }
+
+.error-message {
+  position: absolute;
+  bottom: -53px;
+  color: red;
+  font-size: 14px;
+  margin-left: 5px;
+}
diff --git a/src/components/common/Input.tsx b/src/components/common/Input.tsx
index f3b8d927..cbb479c6 100644
--- a/src/components/common/Input.tsx
+++ b/src/components/common/Input.tsx
@@ -1,30 +1,29 @@
-import { ChangeEvent, FocusEventHandler, Ref } from 'react';
+import { InputHTMLAttributes, forwardRef } from 'react';
 import './Input.css';
 
-interface InputProps {
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   label: string;
-  id: string;
-  value: string;
-  type: string;
-  placeholder?: string;
-  ref?: Ref<HTMLInputElement>;
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
+  error?: string;
 }
 
-function Input({ label, id, value, onChange, onBlur, ...rest }: InputProps) {
-  return (
-    <div className="inputContainer">
-      <label>{label}</label>
-      <input
-        id={id}
-        value={value}
-        onChange={onChange}
-        onBlur={onBlur}
-        {...rest}
-      />
-    </div>
-  );
-}
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ label, id, value, onChange, onBlur, error, ...rest }, ref) => {
+    return (
+      <div className="inputContainer">
+        <label htmlFor={id}>{label}</label>
+        <input
+          id={id}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          ref={ref}
+          className={error ? 'error' : ''}
+          {...rest}
+        />
+        {error && <p className="error-message">{error}</p>}
+      </div>
+    );
+  }
+);
 
 export default Input;
diff --git a/src/components/common/ButtonLarge.css b/src/components/common/LinkButton.css
similarity index 95%
rename from src/components/common/ButtonLarge.css
rename to src/components/common/LinkButton.css
index 64c78766..d3e1696f 100644
--- a/src/components/common/ButtonLarge.css
+++ b/src/components/common/LinkButton.css
@@ -1,4 +1,4 @@
-.ButtonLarge {
+.LinkButton {
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/components/common/ButtonLarge.tsx b/src/components/common/LinkButton.tsx
similarity index 60%
rename from src/components/common/ButtonLarge.tsx
rename to src/components/common/LinkButton.tsx
index 59ddbce9..06fa599d 100644
--- a/src/components/common/ButtonLarge.tsx
+++ b/src/components/common/LinkButton.tsx
@@ -1,25 +1,24 @@
-import { MouseEvent, ReactNode } from 'react';
-import './ButtonLarge.css';
+import { MouseEvent, PropsWithChildren } from 'react';
+import './LinkButton.css';
 import { Link } from 'react-router-dom';
 
-interface ButtonLargeValue {
-  children: ReactNode;
+interface LinkButtonValue {
   onClick?: (e: MouseEvent) => void;
   imgSrc?: string;
   imgAlt?: string;
   to: string;
 }
 
-function ButtonLarge({
+function LinkButton({
   children,
   onClick,
   imgSrc,
   imgAlt,
   to,
   ...rest
-}: ButtonLargeValue) {
+}: PropsWithChildren<LinkButtonValue>) {
   return (
-    <Link to={to} className="ButtonLarge" onClick={onClick} {...rest}>
+    <Link to={to} className="LinkButton" onClick={onClick} {...rest}>
       {children}
       {imgSrc && (
         <img
@@ -34,4 +33,4 @@ function ButtonLarge({
   );
 }
 
-export default ButtonLarge;
+export default LinkButton;
diff --git a/src/components/common/Navbar.css b/src/components/common/Navbar.css
index fd94436b..010ded79 100644
--- a/src/components/common/Navbar.css
+++ b/src/components/common/Navbar.css
@@ -64,6 +64,11 @@ a {
   border-radius: 8px;
 }
 
+.profile {
+  position: relative;
+  display: flex;
+}
+
 @media (width <= 1199px) {
   .header {
     padding: 0 24px;
diff --git a/src/components/common/Navbar.tsx b/src/components/common/Navbar.tsx
index 9cb17230..c333b407 100644
--- a/src/components/common/Navbar.tsx
+++ b/src/components/common/Navbar.tsx
@@ -1,7 +1,10 @@
 import './Navbar.css';
 import logo from '../../assets/images/logo.png';
 import userIcon from '../../assets/images/user.png';
-import { Link, NavLink } from 'react-router';
+import { Link, NavLink, useNavigate } from 'react-router';
+import { useState } from 'react';
+import authService from '../../api/services/auth.services';
+import Dropdown from './Dropdown';
 
 function getLinkStyle({ isActive }: { isActive: boolean }) {
   return {
@@ -9,7 +12,24 @@ function getLinkStyle({ isActive }: { isActive: boolean }) {
   };
 }
 
-function Navbar({ isLoggedIn }: { isLoggedIn: boolean }) {
+function Navbar() {
+  const isLoggedIn = localStorage.getItem('access_token');
+  const navigate = useNavigate();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownItems = [{ label: '로그아웃', onClick: () => handleLogout() }];
+  const dropdownButton = 'dropdown-button';
+
+  // dropdown 열기/닫기
+  const handleProfileClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  // 로그아웃
+  const handleLogout = () => {
+    authService.logout();
+    navigate('/');
+  };
+
   return (
     <nav>
       <div className="header">
@@ -35,7 +55,22 @@ function Navbar({ isLoggedIn }: { isLoggedIn: boolean }) {
         </div>
 
         {isLoggedIn ? (
-          <img src={userIcon} alt="user icon" width={40}></img>
+          <div className="profile">
+            <img
+              id={dropdownButton} // 고유 ID 적용
+              src={userIcon}
+              alt="user icon"
+              width={40}
+              onClick={handleProfileClick}
+              style={{ cursor: 'pointer' }}
+            />
+            <Dropdown
+              items={dropdownItems}
+              isOpen={isOpen}
+              onClose={() => setIsOpen(false)}
+              triggerElementId={dropdownButton} // 트리거 요소 ID 전달
+            />
+          </div>
         ) : (
           <Link className="login-button" to="/login">
             로그인
diff --git a/src/components/common/Pagination.tsx b/src/components/common/Pagination.tsx
index f24a3f39..1349bada 100644
--- a/src/components/common/Pagination.tsx
+++ b/src/components/common/Pagination.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import './Pagination.css';
 import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';
 
-interface PaginationValue {
+interface PaginationProps {
   currentPage: number;
   totalPages: number;
   onPageChange: (e: number) => void;
@@ -12,7 +12,7 @@ function Pagination({
   currentPage,
   totalPages,
   onPageChange,
-}: PaginationValue) {
+}: PaginationProps) {
   const pageNumbers: number[] = [];
   const pagesPerGroup: number = 5;
 
diff --git a/src/components/common/Select.tsx b/src/components/common/Select.tsx
index b40f39f0..de896e48 100644
--- a/src/components/common/Select.tsx
+++ b/src/components/common/Select.tsx
@@ -3,12 +3,12 @@ import './Select.css';
 import { FaCaretDown, FaSortAmountDown } from 'react-icons/fa';
 import { Label, SelectBoxValue, SortOrder } from '../../types/types';
 
-interface SelectValue {
+interface SelectProps {
   onSelect: (e: SortOrder) => void;
   selectBox: SelectBoxValue[];
 }
 
-function Select({ onSelect, selectBox }: SelectValue) {
+function Select({ onSelect, selectBox }: SelectProps) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [selectedOption, setSelectedOption] = useState<Label>(
     selectBox[0].label
diff --git a/src/components/common/TagsInput.tsx b/src/components/common/TagsInput.tsx
index 3144313b..c0ade45b 100644
--- a/src/components/common/TagsInput.tsx
+++ b/src/components/common/TagsInput.tsx
@@ -1,10 +1,11 @@
 import './TagsInput.css';
 import Tag from './Tag';
 import { ChangeEvent, KeyboardEvent, useState } from 'react';
+import { ProductType } from '../../types/types';
 
 interface TagsProps {
   tags: string[];
-  onChange: (name: string, value: any) => void;
+  onChange: (name: string, value: string[]) => void;
 }
 
 function Tags({ tags, onChange }: TagsProps) {
diff --git a/src/components/domain/message/Comment.tsx b/src/components/domain/message/Comment.tsx
index 37a19531..1146563f 100644
--- a/src/components/domain/message/Comment.tsx
+++ b/src/components/domain/message/Comment.tsx
@@ -28,11 +28,7 @@ function Comment({ comment }: CommentProps) {
   const handleOptionClick = () => {
     setIsOptionsOpen((prev) => !prev);
   };
-  // dropdown 닫기
-  const handleDropdownClose = () => {
-    setIsOptionsOpen(false);
-    console.log('close');
-  };
+
   // comment 수정
   const handleEditClick = () => {
     setIsEditing(true);
@@ -82,13 +78,13 @@ function Comment({ comment }: CommentProps) {
           className="optionsIcon"
           src={OptionsIcon}
           alt="options"
-          onClick={() => handleOptionClick()}
+          onClick={handleOptionClick}
         />
       )}
       <Dropdown
         items={dropdownItems}
         isOpen={isOptionsOpen}
-        onClose={handleDropdownClose}
+        onClose={() => setIsOptionsOpen(false)}
       />
     </div>
   );
diff --git a/src/pages/AddItemPage.tsx b/src/pages/AddItemPage.tsx
index 87a42b2a..3c1611ff 100644
--- a/src/pages/AddItemPage.tsx
+++ b/src/pages/AddItemPage.tsx
@@ -23,7 +23,7 @@ function AddItemPage() {
   const isEnabled =
     formData.name && formData.description && formData.price && formData.tags[0];
 
-  const handleChange = (
+  const handleInputChange = (
     e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
     const { name, value } = e.target;
@@ -33,8 +33,14 @@ function AddItemPage() {
     }));
   };
 
-  const handleInputChange = (name: string, value: any) => {
-    // any말고는 생각나는게 없네요
+  const handleFileInputChange = (name: string, value: File | null) => {
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+
+  const handleTagsInputChange = (name: string, value: string[]) => {
     setFormData((prevData) => ({
       ...prevData,
       [name]: value,
@@ -47,7 +53,7 @@ function AddItemPage() {
 
   return (
     <div>
-      <Navbar isLoggedIn={true} />
+      <Navbar />
       <div className="add-item-container">
         <div className="add-item-header">
           <h1>상품 등록하기</h1>
@@ -59,7 +65,7 @@ function AddItemPage() {
           <div className="product-details">
             <FileInput
               value={formData.images[0]}
-              onChange={handleInputChange}
+              onChange={handleFileInputChange}
             />
             <label htmlFor="name">상품명</label>
             <input
@@ -67,7 +73,7 @@ function AddItemPage() {
               name="name"
               type="text"
               value={formData.name}
-              onChange={handleChange}
+              onChange={handleInputChange}
               placeholder="상품명을 입력해주세요"
             />
             <label htmlFor="description">상품 소개</label>
@@ -75,7 +81,7 @@ function AddItemPage() {
               id="description"
               name="description"
               value={formData.description}
-              onChange={handleChange}
+              onChange={handleInputChange}
               placeholder="상품 소개을 입력해주세요"
             />
             <label htmlFor="price">판매가격</label>
@@ -84,10 +90,10 @@ function AddItemPage() {
               name="price"
               type="number"
               value={formData.price}
-              onChange={handleChange}
+              onChange={handleInputChange}
               placeholder="판매 가격을 입력해주세요"
             />
-            <TagsInput tags={formData.tags} onChange={handleInputChange} />
+            <TagsInput tags={formData.tags} onChange={handleTagsInputChange} />
           </div>
         </form>
       </div>
diff --git a/src/pages/Homepage.tsx b/src/pages/Homepage.tsx
index e8e49202..3378a965 100644
--- a/src/pages/Homepage.tsx
+++ b/src/pages/Homepage.tsx
@@ -6,18 +6,18 @@ import searchImg from '../assets/images/search.png';
 import registerImg from '../assets/images/register.png';
 import Navbar from '../components/common/Navbar';
 import Footer from '../components/common/Footer';
-import ButtonLarge from '../components/common/ButtonLarge';
+import LinkButton from '../components/common/LinkButton';
 
 function Homepage() {
   return (
     <div>
-      <Navbar isLoggedIn={false} />
+      <Navbar />
       <main>
         <section className="hero">
           <div className="banner">
             <div className="hero-text">
               <h1 className="hero-title">일상의 모든 물건을 거래해 보세요</h1>
-              <ButtonLarge to="/items">구경하러 가기</ButtonLarge>
+              <LinkButton to="/items">구경하러 가기</LinkButton>
             </div>
             <img
               className="img-panda"
diff --git a/src/pages/LoginPage.css b/src/pages/LoginPage.css
index 869ac0d7..55dc4b61 100644
--- a/src/pages/LoginPage.css
+++ b/src/pages/LoginPage.css
@@ -49,7 +49,7 @@ a {
   display: flex;
   flex-direction: column;
   width: 100%;
-  gap: 24px;
+  gap: 34px;
 }
 
 .input-box {
@@ -67,12 +67,6 @@ a {
   outline: 1px solid red;
 }
 
-.error-message {
-  color: red;
-  font-size: 14px;
-  margin-left: 16px;
-}
-
 .show-password-icon,
 .hide-password-icon {
   position: absolute;
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index 21f10476..168ef40f 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -1,77 +1,80 @@
-import { ChangeEvent, useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import './LoginPage.css';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import LogoImg from '../assets/images/logo.png';
 import HidePasswordIcon from '../assets/icons/eye-slash.svg';
 import ShowPasswordIcon from '../assets/icons/eye.svg';
 import Input from '../components/common/Input';
 import GoogleLogo from '../assets/social/google.png';
 import KakaoLogo from '../assets/social/kakao.png';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import authService from '../api/services/auth.services';
 
-interface LoginData {
-  email: string;
-  password: string;
-}
+// Zod로 폼 검증 스키마 정의
+const signInSchema = z.object({
+  email: z
+    .string()
+    .nonempty('이메일을 입력해주세요.')
+    .email('잘못된 이메일 형식입니다.'),
+  password: z
+    .string()
+    .nonempty('비밀번호를 입력해주세요.')
+    .min(8, '비밀번호를 8자 이상 입력해주세요.'),
+});
+
+// 타입 정의
+export type SignInFormData = z.infer<typeof signInSchema>;
 
 function LoginPage() {
-  const [inputData, setInputData] = useState<LoginData>({
-    email: '',
-    password: '',
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors, isValid },
+  } = useForm<SignInFormData>({
+    resolver: zodResolver(signInSchema),
+    mode: 'onChange',
   });
-  const [showPassword, setShowPassword] = useState<boolean>(false);
-  const passwordInputRef = useRef<HTMLInputElement>(null);
-  const [emailError, setEmailError] = useState<string | null>();
-  const [passwordError, setPasswordError] = useState<string | null>();
-  const [isButtonEnabled, setIsButtonEnabled] = useState<boolean>(false);
+  const navigate = useNavigate();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
 
   const togglePassword = () => {
     setShowPassword((prev) => !prev);
   };
 
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const { id, value } = e.target;
-    setInputData((prevData) => ({
-      ...prevData,
-      [id]: value,
-    }));
-  };
-
-  const handleEmailBlur = () => {
-    if (!inputData.email) {
-      setEmailError('이메일을 입력해주세요.');
-    } else if (!isValidEmail(inputData.email)) {
-      setEmailError('잘못된 이메일 형식입니다.');
-    } else {
-      setEmailError(null);
-    }
-  };
-
-  const handlePasswordBlur = () => {
-    if (!inputData.password) {
-      setPasswordError('비밀번호를 입력해주세요.');
-    } else if (inputData.password.trim().length < 8) {
-      setPasswordError('비밀번호를 8자 이상 입력해주세요.');
+  const onSubmit = async (formData: SignInFormData) => {
+    setIsSubmitting(true);
+    console.log('로그인 데이터:', formData);
+    // 로그인
+    try {
+      const response = await authService.login(formData);
+      navigate('/items');
+    } catch (error: any) {
+      if (error.details.email) {
+        setError('email', {
+          type: 'manual',
+          message: error.message,
+        });
+      } else {
+        setError('password', {
+          type: 'manual',
+          message: error.message,
+        });
+      }
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
-  // 이메일 유효성 검사
-  const isValidEmail = (email: string): boolean => {
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return emailRegex.test(email);
-  };
-
   useEffect(() => {
-    if (
-      inputData.email &&
-      inputData.password &&
-      !emailError &&
-      !passwordError
-    ) {
-      setIsButtonEnabled(true);
-    } else {
-      setIsButtonEnabled(false);
+    const accessToken = localStorage.getItem('access_token');
+    if (accessToken) {
+      navigate('/'); // 메인 페이지로 리다이렉트
     }
-  }, [inputData, emailError, passwordError]);
+  }, [navigate]);
 
   return (
     <>
@@ -87,33 +90,26 @@ function LoginPage() {
             />
             판다마켓
           </Link>
-          <form id="form">
+          <form id="form" onSubmit={handleSubmit(onSubmit)}>
             <div className="input-box">
               <Input
                 label="이메일"
                 id="email"
-                value={inputData.email}
                 type="email"
                 placeholder="이메일을 입력해주세요"
-                onChange={handleChange}
-                onBlur={handleEmailBlur}
+                error={errors.email?.message}
+                {...register('email')}
               />
-              {emailError && <p className="error-message">{emailError}</p>}
             </div>
             <div className="input-box">
               <Input
                 label="비밀번호"
                 id="password"
-                type={!showPassword ? 'password' : 'text'}
-                value={inputData.password}
+                type={showPassword ? 'text' : 'password'}
                 placeholder="비밀번호를 입력해주세요"
-                onChange={handleChange}
-                ref={passwordInputRef}
-                onBlur={handlePasswordBlur}
+                error={errors.password?.message}
+                {...register('password')}
               />
-              {passwordError && (
-                <p className="error-message">{passwordError}</p>
-              )}
               {!showPassword ? (
                 <img
                   className="hide-password-icon"
@@ -131,9 +127,9 @@ function LoginPage() {
               )}
             </div>
             <button
-              type="button"
+              type="submit"
               className="login-btn"
-              disabled={!isButtonEnabled}
+              disabled={!isValid || isSubmitting}
             >
               로그인
             </button>
diff --git a/src/pages/ProductItemPage.tsx b/src/pages/ProductItemPage.tsx
index 54d71e03..52cbdbe8 100644
--- a/src/pages/ProductItemPage.tsx
+++ b/src/pages/ProductItemPage.tsx
@@ -22,7 +22,7 @@ function ProductItemPage() {
 
   return (
     <div>
-      <Navbar isLoggedIn={true} />
+      <Navbar />
       {!loading && (
         <main className="ProductPage">
           <ProductItem product={product} />
diff --git a/src/pages/ProductListPage.tsx b/src/pages/ProductListPage.tsx
index aac552d1..f6d79556 100644
--- a/src/pages/ProductListPage.tsx
+++ b/src/pages/ProductListPage.tsx
@@ -70,7 +70,7 @@ function ProductListPage() {
 
   return (
     <div>
-      <Navbar isLoggedIn={true} />
+      <Navbar />
       <main className="market">
         <div className="best-container">
           <h2>베스트 상품</h2>
diff --git a/src/pages/SignUpPage.tsx b/src/pages/SignUpPage.tsx
index 6f0ccb08..64011799 100644
--- a/src/pages/SignUpPage.tsx
+++ b/src/pages/SignUpPage.tsx
@@ -1,121 +1,92 @@
 import './SignUpPage.css';
-import { ChangeEvent, useEffect, useRef, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
 import LogoImg from '../assets/images/logo.png';
 import HidePasswordIcon from '../assets/icons/eye-slash.svg';
 import ShowPasswordIcon from '../assets/icons/eye.svg';
-import Input from '../components/common/Input';
 import GoogleLogo from '../assets/social/google.png';
 import KakaoLogo from '../assets/social/kakao.png';
+import Input from '../components/common/Input';
+import authService from '../api/services/auth.services';
 
-interface SignUpData {
-  email: string;
-  username: string;
-  password: string;
-  passwordConfirm: string;
-}
+// Zod로 폼 검증 스키마 정의
+const signUpSchema = z
+  .object({
+    email: z
+      .string()
+      .nonempty('이메일을 입력해주세요.')
+      .email('잘못된 이메일 형식입니다.'),
+    nickname: z.string().nonempty('닉네임을 입력해주세요.'),
+    password: z
+      .string()
+      .nonempty('비밀번호를 입력해주세요.')
+      .min(8, '비밀번호를 8자 이상 입력해주세요.'),
+    passwordConfirmation: z.string().nonempty('비밀번호를 입력해주세요.'),
+  })
+  .refine((data) => data.password === data.passwordConfirmation, {
+    message: '비밀번호가 일치하지 않습니다.',
+    path: ['passwordConfirmation'],
+  });
+
+// 타입 정의
+export type SignUpFormData = z.infer<typeof signUpSchema>;
 
 function SignUpPage() {
-  const [inputData, setInputData] = useState<SignUpData>({
-    email: '',
-    username: '',
-    password: '',
-    passwordConfirm: '',
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors, isValid },
+  } = useForm<SignUpFormData>({
+    resolver: zodResolver(signUpSchema),
+    mode: 'onChange',
   });
-  const [showPassword, setShowPassword] = useState<boolean>(false);
-  const [showPasswordConfirm, setShowPasswordConfirm] =
-    useState<boolean>(false);
-  const passwordInputRef = useRef<HTMLInputElement>(null);
-  const passwordConfirmInputRef = useRef<HTMLInputElement>(null);
-  const [emailError, setEmailError] = useState<string | null>();
-  const [usernameError, setUsernameError] = useState<string | null>();
-  const [passwordError, setPasswordError] = useState<string | null>();
-  const [passwordConfirmError, setPasswordConfirmError] = useState<
-    string | null
-  >();
-  const [isButtonEnabled, setIsButtonEnabled] = useState<boolean>(false);
+  const navigate = useNavigate();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showPasswordConfirm, setShowPasswordConfirm] = useState(false);
 
   const togglePassword = () => {
     setShowPassword((prev) => !prev);
   };
+
   const togglePasswordConfirm = () => {
     setShowPasswordConfirm((prev) => !prev);
   };
 
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const { id, value } = e.target;
-    setInputData((prevData) => ({
-      ...prevData,
-      [id]: value,
-    }));
-  };
-
-  const handleEmailBlur = () => {
-    if (!inputData.email) {
-      setEmailError('이메일을 입력해주세요.');
-    } else if (!isValidEmail(inputData.email)) {
-      setEmailError('잘못된 이메일 형식입니다.');
-    } else {
-      setEmailError(null);
-    }
-  };
-
-  const handleUserNameBlur = () => {
-    if (!inputData.username) {
-      setUsernameError('닉네임을 입력해주세요.');
-    } else {
-      setUsernameError(null);
-    }
-  };
-
-  const handlePasswordBlur = () => {
-    if (!inputData.password) {
-      setPasswordError('비밀번호를 입력해주세요.');
-    } else if (inputData.password.trim().length < 8) {
-      setPasswordError('비밀번호를 8자 이상 입력해주세요.');
-    } else {
-      setPasswordError(null);
-    }
-  };
-
-  const handlePasswordConfirmBlur = () => {
-    if (!inputData.passwordConfirm) {
-      setPasswordConfirmError('비밀번호를 입력해주세요.');
-    } else if (inputData.password.trim() !== inputData.passwordConfirm.trim()) {
-      setPasswordConfirmError('비밀번호가 일치하지 않습니다.');
-    } else {
-      setPasswordConfirmError(null);
+  const onSubmit = async (formData: SignUpFormData) => {
+    setIsSubmitting(true);
+    console.log('회원가입 데이터:', formData);
+    // 회원가입
+    try {
+      const response = await authService.signUp(formData);
+      navigate('/login');
+    } catch (error: any) {
+      if (error.details.email) {
+        setError('email', {
+          type: 'manual',
+          message: error.message,
+        });
+      } else {
+        setError('nickname', {
+          type: 'manual',
+          message: error.message,
+        });
+      }
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
-  // 이메일 유효성 검사
-  const isValidEmail = (email: string): boolean => {
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return emailRegex.test(email);
-  };
-
   useEffect(() => {
-    if (
-      inputData.email &&
-      inputData.password &&
-      inputData.passwordConfirm &&
-      inputData.username &&
-      !emailError &&
-      !usernameError &&
-      !passwordError &&
-      !passwordConfirmError
-    ) {
-      setIsButtonEnabled(true);
-    } else {
-      setIsButtonEnabled(false);
+    const accessToken = localStorage.getItem('access_token');
+    if (accessToken) {
+      navigate('/'); // 메인 페이지로 리다이렉트
     }
-  }, [
-    inputData,
-    emailError,
-    passwordError,
-    usernameError,
-    passwordConfirmError,
-  ]);
+  }, [navigate]);
 
   return (
     <main>
@@ -130,43 +101,38 @@ function SignUpPage() {
           />
           판다마켓
         </Link>
-        <form id="form">
+        <form id="form" onSubmit={handleSubmit(onSubmit)}>
           <div className="input-box">
             <Input
               label="이메일"
               id="email"
-              value={inputData.email}
               type="email"
               placeholder="이메일을 입력해주세요"
-              onChange={handleChange}
-              onBlur={handleEmailBlur}
+              error={errors.email?.message}
+              {...register('email')}
             />
-            {emailError && <p className="error-message">{emailError}</p>}
           </div>
+
           <div className="input-box">
             <Input
               label="닉네임"
-              id="username"
-              value={inputData.username}
+              id="nickname"
               type="text"
               placeholder="닉네임을 입력해주세요"
-              onChange={handleChange}
-              onBlur={handleUserNameBlur}
+              error={errors.nickname?.message}
+              {...register('nickname')}
             />
-            {usernameError && <p className="error-message">{usernameError}</p>}
           </div>
+
           <div className="input-box">
             <Input
               label="비밀번호"
               id="password"
-              type={!showPassword ? 'password' : 'text'}
-              value={inputData.password}
+              type={showPassword ? 'text' : 'password'}
               placeholder="비밀번호를 입력해주세요"
-              onChange={handleChange}
-              ref={passwordInputRef}
-              onBlur={handlePasswordBlur}
+              error={errors.password?.message}
+              {...register('password')}
             />
-            {passwordError && <p className="error-message">{passwordError}</p>}
             {!showPassword ? (
               <img
                 className="hide-password-icon"
@@ -183,20 +149,16 @@ function SignUpPage() {
               />
             )}
           </div>
+
           <div className="input-box">
             <Input
               label="비밀번호 확인"
               id="passwordConfirm"
-              type={!showPassword ? 'password' : 'text'}
-              value={inputData.passwordConfirm}
+              type={showPasswordConfirm ? 'text' : 'password'}
               placeholder="비밀번호를 다시 한번 입력해주세요"
-              onChange={handleChange}
-              ref={passwordConfirmInputRef}
-              onBlur={handlePasswordConfirmBlur}
+              error={errors.passwordConfirmation?.message}
+              {...register('passwordConfirmation')}
             />
-            {passwordConfirmError && (
-              <p className="error-message">{passwordConfirmError}</p>
-            )}
             {!showPasswordConfirm ? (
               <img
                 className="hide-password-icon"
@@ -213,10 +175,11 @@ function SignUpPage() {
               />
             )}
           </div>
+
           <button
-            type="button"
+            type="submit"
             className="login-btn"
-            disabled={!isButtonEnabled}
+            disabled={!isValid || isSubmitting}
           >
             회원가입
           </button>
diff --git a/src/types/types.ts b/src/types/types.ts
index a21daf2d..2eac97cf 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -70,3 +70,10 @@ export interface CommentsResponse {
     nextCursor: number;
   };
 }
+
+// User
+export interface User {
+  id: number;
+  email: string;
+  image: string;
+}