diff --git a/package-lock.json b/package-lock.json
index d3bc1c272..4a90cf87b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,13 @@
       "name": "12-sprint-mission",
       "version": "0.1.0",
       "dependencies": {
+        "@hookform/resolvers": "^3.10.0",
+        "dayjs": "^1.11.13",
         "next": "15.1.4",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "react-hook-form": "^7.54.2",
+        "zod": "^3.24.1"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -160,6 +164,15 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.10.0.tgz",
+      "integrity": "sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1648,6 +1661,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@@ -3950,6 +3969,22 @@
         "react": "^19.0.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.54.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.2.tgz",
+      "integrity": "sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==",
+      "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-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -4880,6 +4915,15 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.1.tgz",
+      "integrity": "sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index e60f08d27..8bb6f1050 100644
--- a/package.json
+++ b/package.json
@@ -9,17 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.10.0",
+    "dayjs": "^1.11.13",
+    "next": "15.1.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "15.1.4"
+    "react-hook-form": "^7.54.2",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "15.1.4",
-    "@eslint/eslintrc": "^3"
+    "typescript": "^5"
   }
 }
diff --git a/src/components/ArticleItemCard.tsx b/src/components/ArticleItemCard.tsx
index 20d562961..4843bdbae 100644
--- a/src/components/ArticleItemCard.tsx
+++ b/src/components/ArticleItemCard.tsx
@@ -5,9 +5,18 @@ import heartIcon from "@/assets/icons/heart.svg";
 import Image from "next/image";
 import { formatDate } from "@/utils/formattedDate";
 import Link from "next/link";
+import { useMemo } from "react";
 
-export function ArticleItemCard({ id, title, content, image, likeCount, writer, updatedAt }: Article) {
-  const formattedDate = formatDate(updatedAt);
+interface ArticleItemCardProps {
+  article: Article;
+}
+
+export function ArticleItemCard({ article }: ArticleItemCardProps) {
+  const { id, title, content, image, likeCount, writer, updatedAt } = article;
+
+  const formattedDate = useMemo<string>(() => {
+    return formatDate(updatedAt);
+  }, [updatedAt]);
 
   return (
     <div className={style.container}>
diff --git a/src/components/ArticleList.tsx b/src/components/ArticleList.tsx
index dcbbd30a7..ad6cda1f4 100644
--- a/src/components/ArticleList.tsx
+++ b/src/components/ArticleList.tsx
@@ -14,17 +14,12 @@ interface ArticleListProps {
 
 export default function ArticleList({ initialArticles, initialOrder }: ArticleListProps) {
   const [isOpen, setIsOpen] = useState(false);
-  const [selectedLabel, setSelectedLabel] = useState(initialOrder === "like" ? "인기순" : "최신순");
   const [orderBy, setOrderBy] = useState<"recent" | "like">(initialOrder);
 
-  const handleToggle = () => {
-    setIsOpen((prev) => !prev);
-  };
+  const selectedLabel = orderBy === "like" ? "인기순" : "최신순";
 
-  const handleSelect = (label: string, value: string) => {
-    setSelectedLabel(label);
-    const newOrder = value === "like" ? "like" : "recent";
-    setOrderBy(newOrder);
+  const handleSelect = (label: "최신순" | "인기순", value: "recent" | "like") => {
+    setOrderBy(value);
 
     // 정렬이 바뀌면 page/게시글 초기화
     setPage(1);
@@ -34,6 +29,10 @@ export default function ArticleList({ initialArticles, initialOrder }: ArticleLi
     setIsOpen(false);
   };
 
+  const handleToggle = () => {
+    setIsOpen((prev) => !prev);
+  };
+
   // 검색어 (keyword)
   const [keyword, setKeyword] = useState("");
 
@@ -132,7 +131,7 @@ export default function ArticleList({ initialArticles, initialOrder }: ArticleLi
 
       <div className={style.all_section}>
         {articles.map((article) => (
-          <ArticleItemCard key={article.id} {...article} />
+          <ArticleItemCard key={article.id} article={article} />
         ))}
       </div>
 
diff --git a/src/components/BestItemCard.tsx b/src/components/BestItemCard.tsx
index bb49829e9..fc9ef1394 100644
--- a/src/components/BestItemCard.tsx
+++ b/src/components/BestItemCard.tsx
@@ -5,9 +5,18 @@ import badge from "@/assets/images/img_badge.svg";
 import heart from "@/assets/icons/heart.svg";
 import { formatDate } from "@/utils/formattedDate";
 import Link from "next/link";
+import { useMemo } from "react";
 
-export default function BestItemCard({ id, content, updatedAt, likeCount, writer, image, title }: Article) {
-  const formattedDate = formatDate(updatedAt);
+interface BestItemCardProps {
+  article: Article;
+}
+
+export default function BestItemCard({ article }: BestItemCardProps) {
+  const { id, title, content, image, updatedAt, writer, likeCount } = article;
+
+  const formattedDate = useMemo<string>(() => {
+    return formatDate(updatedAt);
+  }, [updatedAt]);
 
   return (
     <Link href={`boards/${id}`} className={style.link}>
diff --git a/src/components/CommentCard.tsx b/src/components/CommentCard.tsx
index 5167d4c6e..08597c066 100644
--- a/src/components/CommentCard.tsx
+++ b/src/components/CommentCard.tsx
@@ -3,13 +3,16 @@ import ProfileImg from "@/assets/images/profile.svg";
 import { Comment } from "@/types";
 import { formatRelativeTime } from "@/utils/formatRelativeTime";
 import Image from "next/image";
+import { useMemo } from "react";
 
 interface CommentProps {
   comment: Comment;
 }
 
 export default function CommentCard({ comment }: CommentProps) {
-  const formatDate = formatRelativeTime(comment.updatedAt);
+  const formatDate = useMemo<string>(() => {
+    return formatRelativeTime(comment.updatedAt);
+  }, [comment.updatedAt]);
 
   return (
     <div className={style.container}>
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index 7f571a37c..54694a258 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -6,7 +6,7 @@ interface DropdownProps {
   isOpen: boolean;
   selectedLabel: string;
   onToggle: () => void;
-  onSelect: (label: string, value: string) => void;
+  onSelect: (label: "최신순" | "인기순", value: "recent" | "like") => void;
 }
 
 export default function Dropdown({ isOpen, selectedLabel, onToggle, onSelect }: DropdownProps) {
diff --git a/src/components/LoginForm.module.css b/src/components/LoginForm.module.css
index d4bbf5a81..6ddcc2b34 100644
--- a/src/components/LoginForm.module.css
+++ b/src/components/LoginForm.module.css
@@ -115,4 +115,14 @@
   color: #3692ff;
   text-decoration: underline;
   cursor: pointer;
+}
+
+.errorInput {
+  border-color: #f74747;
+}
+
+.errorMessage {
+  color: #f74747;
+  font-size: 14px;
+  margin-top: 0.20rem;
 }
\ No newline at end of file
diff --git a/src/components/LoginForm.tsx b/src/components/LoginForm.tsx
index 607c4ef03..de895905e 100644
--- a/src/components/LoginForm.tsx
+++ b/src/components/LoginForm.tsx
@@ -2,37 +2,51 @@ import styles from "./LoginForm.module.css";
 import { useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
+import { loginSchema, LoginRequest } from "@/types";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
 
 interface LoginFormProps {
-  onSubmit: (formData: { email: string; password: string }) => Promise<void>;
+  onSubmit: (request: LoginRequest) => Promise<void>;
 }
 
 export default function LoginForm({ onSubmit }: LoginFormProps) {
   const [showPassword, setShowPassword] = useState(false);
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm<LoginRequest>({
+    resolver: zodResolver(loginSchema),
+  });
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    await onSubmit({ email, password });
+  const onFormSubmit: SubmitHandler<LoginRequest> = async (data) => {
+    try {
+      await onSubmit(data);
+      reset();
+    } catch (err) {
+      console.error("서버오류", err);
+      alert("로그인 중 오류가 발생했습니다. 다시 시도해주세요.");
+    }
   };
 
   return (
-    <form onSubmit={handleSubmit}>
+    <form onSubmit={handleSubmit(onFormSubmit)}>
       <div className={styles.formGroup}>
         <label className={styles.label} htmlFor="email">
           이메일
         </label>
         <div className={styles.inputContainer}>
           <input
+            {...register("email")}
             type="email"
             id="email"
             placeholder="이메일을 입력해주세요"
-            className={styles.inputField}
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
+            className={`${styles.inputField} ${errors.email ? styles.errorInput : ""}`}
           />
         </div>
+        {errors.email && <p className={styles.errorMessage}>{errors.email.message}</p>}
       </div>
 
       <div className={styles.formGroup}>
@@ -41,17 +55,17 @@ export default function LoginForm({ onSubmit }: LoginFormProps) {
         </label>
         <div className={styles.inputContainer}>
           <input
+            {...register("password")}
             type={showPassword ? "text" : "password"}
             id="password"
             placeholder="비밀번호를 입력해주세요"
-            className={styles.inputField}
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
+            className={`${styles.inputField} ${errors.password ? styles.errorInput : ""}`}
           />
           <button type="button" onClick={() => setShowPassword(!showPassword)} className={styles.toggleButton}>
             {showPassword ? "O" : "X"}
           </button>
         </div>
+        {errors.password && <p className={styles.errorMessage}>{errors.password.message}</p>}
       </div>
 
       <button type="submit" className={styles.button}>
diff --git a/src/components/SignUpForm.module.css b/src/components/SignUpForm.module.css
index d4bbf5a81..6ddcc2b34 100644
--- a/src/components/SignUpForm.module.css
+++ b/src/components/SignUpForm.module.css
@@ -115,4 +115,14 @@
   color: #3692ff;
   text-decoration: underline;
   cursor: pointer;
+}
+
+.errorInput {
+  border-color: #f74747;
+}
+
+.errorMessage {
+  color: #f74747;
+  font-size: 14px;
+  margin-top: 0.20rem;
 }
\ No newline at end of file
diff --git a/src/components/SignUpForm.tsx b/src/components/SignUpForm.tsx
index c60bd9498..0719b07b4 100644
--- a/src/components/SignUpForm.tsx
+++ b/src/components/SignUpForm.tsx
@@ -2,52 +2,53 @@ import { useState } from "react";
 import styles from "./SignUpForm.module.css";
 import Image from "next/image";
 import Link from "next/link";
+import { signupSchema, SignupRequest } from "@/types";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
 
 interface SignUpFormProps {
-  onSubmit: (formData: {
-    email: string;
-    nickname: string;
-    password: string;
-    passwordConfirmation: string;
-  }) => Promise<void>;
+  onSubmit: (request: SignupRequest) => Promise<void>;
 }
 
 export default function SignUpForm({ onSubmit }: SignUpFormProps) {
-  const [email, setEmail] = useState("");
-  const [nickname, setNickname] = useState("");
-  const [password, setPassword] = useState("");
-  const [passwordConfirmation, setPasswordConfirmation] = useState("");
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm<SignupRequest>({
+    resolver: zodResolver(signupSchema),
+  });
 
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    await onSubmit({
-      email,
-      nickname,
-      password,
-      passwordConfirmation,
-    });
+  const onFormSubmit: SubmitHandler<SignupRequest> = async (data) => {
+    try {
+      await onSubmit(data);
+      reset();
+    } catch (error) {
+      console.error("서버 오류:", error);
+      alert("회원가입 중 오류가 발생했습니다. 다시 시도해주세요.");
+    }
   };
 
   return (
-    <form onSubmit={handleSubmit}>
+    <form onSubmit={handleSubmit(onFormSubmit)}>
       <div className={styles.formGroup}>
         <label className={styles.label} htmlFor="email">
           이메일
         </label>
         <div className={styles.inputContainer}>
           <input
-            value={email}
+            {...register("email")}
             type="email"
             id="email"
             placeholder="이메일을 입력해주세요"
-            className={styles.inputField}
-            onChange={(e) => setEmail(e.target.value)}
+            className={`${styles.inputField} ${errors.email ? styles.errorInput : ""}`}
           />
         </div>
+        {errors.email && <p className={styles.errorMessage}>{errors.email.message}</p>}
       </div>
 
       <div className={styles.formGroup}>
@@ -56,14 +57,14 @@ export default function SignUpForm({ onSubmit }: SignUpFormProps) {
         </label>
         <div className={styles.inputContainer}>
           <input
-            value={nickname}
+            {...register("nickname")}
             type="text"
             id="nickname"
             placeholder="닉네임을 입력해주세요"
-            className={styles.inputField}
-            onChange={(e) => setNickname(e.target.value)}
+            className={`${styles.inputField} ${errors.nickname ? styles.errorInput : ""}`}
           />
         </div>
+        {errors.nickname && <p className={styles.errorMessage}>{errors.nickname.message}</p>}
       </div>
 
       <div className={styles.formGroup}>
@@ -72,31 +73,30 @@ export default function SignUpForm({ onSubmit }: SignUpFormProps) {
         </label>
         <div className={styles.inputContainer}>
           <input
+            {...register("password")}
             type={showPassword ? "text" : "password"}
             id="password"
             placeholder="비밀번호를 입력해주세요"
-            className={styles.inputField}
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
+            className={`${styles.inputField} ${errors.password ? styles.errorInput : ""}`}
           />
           <button type="button" onClick={() => setShowPassword(!showPassword)} className={styles.toggleButton}>
             {showPassword ? "O" : "X"}
           </button>
         </div>
+        {errors.password && <p className={styles.errorMessage}>{errors.password.message}</p>}
       </div>
 
       <div className={styles.formGroup}>
-        <label className={styles.label} htmlFor="confirmPassword">
+        <label className={styles.label} htmlFor="passwordConfirmation">
           비밀번호 확인
         </label>
         <div className={styles.inputContainer}>
           <input
+            {...register("passwordConfirmation")}
             type={showConfirmPassword ? "text" : "password"}
-            id="confirmPassword"
+            id="passwordConfirmation"
             placeholder="비밀번호를 다시 한 번 입력해주세요"
-            className={styles.inputField}
-            value={passwordConfirmation}
-            onChange={(e) => setPasswordConfirmation(e.target.value)}
+            className={`${styles.inputField} ${errors.passwordConfirmation ? styles.errorInput : ""}`}
           />
           <button
             type="button"
@@ -106,6 +106,7 @@ export default function SignUpForm({ onSubmit }: SignUpFormProps) {
             {showConfirmPassword ? "O" : "X"}
           </button>
         </div>
+        {errors.passwordConfirmation && <p className={styles.errorMessage}>{errors.passwordConfirmation.message}</p>}
       </div>
 
       <button type="submit" className={styles.button}>
diff --git a/src/pages/boards/[id].tsx b/src/pages/boards/[id].tsx
index af4861566..37143a150 100644
--- a/src/pages/boards/[id].tsx
+++ b/src/pages/boards/[id].tsx
@@ -4,7 +4,7 @@ import { ArticleDetailResponse, FetchCommentsResponse } from "@/types";
 import { GetServerSideProps, GetServerSidePropsContext } from "next";
 import { formatDate } from "@/utils/formattedDate";
 import { addComment } from "@/services/commentService";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import CommentCard from "@/components/CommentCard";
 import Image from "next/image";
 import style from "./[id].module.css";
@@ -17,7 +17,9 @@ interface DetailPageProps {
 }
 
 export default function Page({ article, comments }: DetailPageProps) {
-  const formattedDate = formatDate(article.updatedAt);
+  const formattedDate = useMemo<string>(() => {
+    return formatDate(article.updatedAt);
+  }, [article.updatedAt]);
   const [commentContent, setCommentContent] = useState("");
 
   const handleCommentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
diff --git a/src/pages/boards/index.tsx b/src/pages/boards/index.tsx
index 9d79d8eca..314c1920f 100644
--- a/src/pages/boards/index.tsx
+++ b/src/pages/boards/index.tsx
@@ -19,7 +19,7 @@ export default function Page({ bestArticles, initialArticles, initialOrder }: Bo
         <h3 className={style.title}>베스트 게시글</h3>
         <div className={style.best_section}>
           {bestArticles.list.map((article: Article) => (
-            <BestItemCard key={article.id} {...article} />
+            <BestItemCard key={article.id} article={article} />
           ))}
         </div>
       </div>
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 6de054f3f..53523bda6 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -5,13 +5,24 @@ import LoginForm from "@/components/LoginForm";
 import { useRouter } from "next/router";
 import { saveTokens } from "@/utils/tokenHandler";
 import { login } from "@/services/authService";
+import { LoginRequest } from "@/types";
+import { useEffect } from "react";
 
 export default function LoginPage() {
   const router = useRouter();
 
-  const handleLogin = async (formData: { email: string; password: string }) => {
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const accessToken = localStorage.getItem("ACCESS_TOKEN_KEY");
+      if (accessToken) {
+        router.replace("/");
+      }
+    }
+  }, [router]);
+
+  const handleLogin = async (loginRequest: LoginRequest) => {
     try {
-      const { accessToken, refreshToken } = await login(formData);
+      const { accessToken, refreshToken } = await login(loginRequest);
       saveTokens(accessToken, refreshToken);
       alert("로그인 성공!");
       router.push("/boards");
diff --git a/src/pages/signup.tsx b/src/pages/signup.tsx
index 5f7eea79f..87742a191 100644
--- a/src/pages/signup.tsx
+++ b/src/pages/signup.tsx
@@ -5,26 +5,32 @@ import SignUpForm from "@/components/SignUpForm";
 import { useRouter } from "next/router";
 import { signup } from "@/services/authService";
 import { saveTokens } from "@/utils/tokenHandler";
+import { SignupRequest } from "@/types";
+import { useEffect } from "react";
 
 export default function SignupPage() {
   const router = useRouter();
 
-  const handleSignup = async (formData: {
-    email: string;
-    nickname: string;
-    password: string;
-    passwordConfirmation: string;
-  }) => {
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const accessToken = localStorage.getItem("ACCESS_TOKEN_KEY");
+      if (accessToken) {
+        router.replace("/");
+      }
+    }
+  }, [router]);
+
+  const handleSignup = async (signupRequest: SignupRequest) => {
     try {
       // 1) 회원가입 요청
-      const { accessToken, refreshToken } = await signup(formData);
+      const { accessToken, refreshToken } = await signup(signupRequest);
 
       // 2) 응답 받은 토큰 저장
       saveTokens(accessToken, refreshToken);
 
       // 3) 이후 페이지 이동
       alert("회원가입 성공");
-      router.push("/boards");
+      router.push("/login");
     } catch (err: unknown) {
       if (err instanceof Error) {
         alert(err.message || "회원가입 오류");
diff --git a/src/services/authService.ts b/src/services/authService.ts
index c3d7f5b1c..b071e7d3a 100644
--- a/src/services/authService.ts
+++ b/src/services/authService.ts
@@ -1,16 +1,7 @@
-interface SignupPayload {
-  email: string;
-  nickname: string;
-  password: string;
-  passwordConfirmation: string;
-}
-
-interface LoginPayload {
-  email: string;
-  password: string;
-}
+import { LoginRequest, LoginResponse, SignupRequest, SignupResponse } from "@/types";
+import { clearTokens, getRefreshToken, saveTokens } from "@/utils/tokenHandler";
 
-export async function signup(payload: SignupPayload) {
+export async function signup(payload: SignupRequest): Promise<SignupResponse> {
   const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
   if (!baseUrl) {
     throw new Error("BASE_URL 환경변수가 설정되지 않았습니다.");
@@ -39,7 +30,7 @@ export async function signup(payload: SignupPayload) {
   }
 }
 
-export async function login(payload: LoginPayload) {
+export async function login(payload: LoginRequest): Promise<LoginResponse> {
   const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
   if (!baseUrl) {
     throw new Error("BASE_URL 환경변수가 설정되지 않았습니다.");
@@ -68,3 +59,38 @@ export async function login(payload: LoginPayload) {
     throw err;
   }
 }
+
+export async function refreshAccessToken(): Promise<void> {
+  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
+  if (!baseUrl) {
+    throw new Error("BASE_URL 환경변수가 설정되지 않았습니다.");
+  }
+
+  const refreshToken = getRefreshToken();
+  if (!refreshToken) {
+    clearTokens();
+    throw new Error("리프레시 토큰을 찾을 수 없습니다");
+  }
+  const url = new URL(`${baseUrl}/auth/refresh-token`);
+  try {
+    const response = await fetch(url.toString(), {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ refreshToken }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(errorData.message || "토큰 갱신 실패");
+    }
+
+    const result = await response.json();
+    saveTokens(result.accessToken, result.refreshToken);
+  } catch (err) {
+    console.error("토큰 갱신 오류:", err);
+    clearTokens();
+    throw err;
+  }
+}
diff --git a/src/services/commentService.ts b/src/services/commentService.ts
index a6bacc99f..9f5f8cc89 100644
--- a/src/services/commentService.ts
+++ b/src/services/commentService.ts
@@ -1,4 +1,4 @@
-import { getAccessToken } from "@/utils/tokenHandler";
+import { authenticatedFetch } from "@/utils/requestHandler";
 
 interface CommentPayload {
   articleId: number;
@@ -6,29 +6,27 @@ interface CommentPayload {
 }
 
 export async function addComment(payload: CommentPayload) {
-  const accessToken = getAccessToken();
   const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
 
   if (!baseUrl) {
     throw new Error("BASE_URL 환경변수가 설정되지 않았습니다.");
   }
-  if (!accessToken) {
-    throw new Error("로그인이 필요합니다");
-  }
-  const url = new URL(`${baseUrl}/articles/${payload.articleId}/comments`);
-  const response = await fetch(url, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${accessToken}`,
-    },
-    body: JSON.stringify({ content: payload.content }),
-  });
 
-  if (!response.ok) {
-    const errorText = await response.text();
-    console.error("댓글 등록 실패:", errorText);
-  }
+  const url = new URL(`${baseUrl}/articles/${payload.articleId}/comments`).toString();
+  try {
+    const response = await authenticatedFetch(url, {
+      method: "POST",
+      body: JSON.stringify({ content: payload.content }),
+    });
 
-  return response.json();
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(errorData.message || "댓글 작성 실패");
+    }
+
+    return response.json();
+  } catch (error) {
+    console.error("댓글 작성 오류:", error);
+    throw error;
+  }
 }
diff --git a/src/services/imageService.ts b/src/services/imageService.ts
index 15678c2b1..940e17c93 100644
--- a/src/services/imageService.ts
+++ b/src/services/imageService.ts
@@ -1,35 +1,35 @@
+import { authenticatedFetch } from "@/utils/requestHandler";
 import { getAccessToken } from "@/utils/tokenHandler";
 
 export async function uploadImage(image: File): Promise<string> {
-  const accessToken = getAccessToken();
   const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
   if (!baseUrl) {
     throw new Error("BASE_URL 환경변수가 설정되지 않았습니다.");
   }
-  const url = new URL(`${baseUrl}/images/upload`);
-
-  if (!accessToken) {
-    throw new Error("로그인이 필요합니다.");
-  }
+  const url = new URL(`${baseUrl}/images/upload`).toString();
 
   const formData = new FormData();
   formData.append("image", image);
 
-  const response = await fetch(url, {
-    method: "POST",
-    headers: {
-      Authorization: `Bearer ${accessToken}`,
-      Accept: "application/json",
-    },
-    body: formData,
-  });
+  try {
+    const response = await authenticatedFetch(url, {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+      },
+      body: formData,
+    });
 
-  if (!response.ok) {
-    const errorText = await response.text();
-    console.error("이미지 업로드 실패:", errorText);
-    throw new Error("이미지 업로드에 실패했습니다.");
-  }
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error("이미지 업로드 실패:", errorText);
+      throw new Error("이미지 업로드에 실패했습니다.");
+    }
 
-  const result = await response.json();
-  return result.url;
+    const result = await response.json();
+    return result.url;
+  } catch (err) {
+    console.error("이미지 업로드 오류:", err);
+    throw err;
+  }
 }
diff --git a/src/services/postService.ts b/src/services/postService.ts
index e6e7e1eda..eb362dabb 100644
--- a/src/services/postService.ts
+++ b/src/services/postService.ts
@@ -1,49 +1,40 @@
 import { getAccessToken } from "@/utils/tokenHandler";
 import { uploadImage } from "./imageService";
-
-interface PostPayload {
-  title: string;
-  content: string;
-  image?: File | null;
-}
+import { PostPayload } from "@/types";
+import { authenticatedFetch } from "@/utils/requestHandler";
 
 export async function createPost(payload: PostPayload) {
-  const accessToken = getAccessToken();
   const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
 
   if (!baseUrl) {
     throw new Error("BASE_URL 환경변수가 설정되지 않았습니다.");
   }
 
-  if (!accessToken) {
-    throw new Error("로그인이 필요합니다");
-  }
-  const url = new URL(`${baseUrl}/articles`);
+  const url = new URL(`${baseUrl}/articles`).toString();
 
   let imageUrl = null;
   if (payload.image) {
     imageUrl = await uploadImage(payload.image);
   }
 
-  const response = await fetch(url, {
-    method: "POST",
-    headers: {
-      Authorization: `Bearer ${accessToken}`,
-      Accept: "application/json",
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      title: payload.title,
-      content: payload.content,
-      ...(imageUrl && { image: imageUrl }),
-    }),
-  });
-
-  if (!response.ok) {
-    const errorText = await response.text();
-    console.error("게시물 등록 실패:", errorText);
-    throw new Error("게시물 등록에 실패했습니다.");
+  try {
+    const response = await authenticatedFetch(url, {
+      method: "POST",
+      body: JSON.stringify({
+        title: payload.title,
+        content: payload.content,
+        ...(imageUrl && { image: imageUrl }),
+      }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(errorData.message || "게시물 등록 실패");
+    }
+
+    return response.json();
+  } catch (err) {
+    console.error("게시물 등록 오류:", err);
+    throw err;
   }
-
-  return response.json();
 }
diff --git a/src/types.ts b/src/types.ts
index c6520f55e..31dc75870 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,3 +1,5 @@
+import { z } from "zod";
+
 export interface Writer {
   nickname: string;
   id: number;
@@ -36,3 +38,58 @@ export interface FetchCommentsResponse {
   nextCursor: number;
   list: Comment[];
 }
+
+export interface PostPayload {
+  title: string;
+  content: string;
+  image?: File | null;
+}
+
+export interface SignupResponse {
+  user: {
+    id: number;
+    email: string;
+    image: null;
+    nickname: string;
+    updatedAt: string;
+    createdAt: string;
+  };
+  accessToken: string;
+  refreshToken: string;
+}
+
+export interface LoginResponse {
+  user: {
+    id: number;
+    email: string;
+    image: null;
+    nickname: string;
+    updatedAt: string;
+    createdAt: string;
+  };
+  accessToken: string;
+  refreshToken: string;
+}
+
+export const signupSchema = z
+  .object({
+    email: z.string().email("유효한 이메일 형식이 아닙니다").nonempty("이메일은 필수입니다"),
+    nickname: z.string().min(1, "닉네임은 필수입니다"),
+    password: z
+      .string()
+      .min(8, "비밀번호는 최소 8자 이상이어야 합니다")
+      .regex(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/, "비밀번호는 최소 하나의 문자와 숫자를 포함해야 합니다"),
+    passwordConfirmation: z.string(),
+  })
+  .refine((data) => data.password === data.passwordConfirmation, {
+    message: "비밀번호가 일치하지 않습니다",
+    path: ["passwordConfirmation"],
+  });
+
+export const loginSchema = z.object({
+  email: z.string().email("유효한 이메일 형식이 아닙니다").nonempty("이메일은 필수입니다"),
+  password: z.string().min(8, "비밀번호는 최소 8자 이상이어야 합니다").nonempty("비밀번호는 필수입니다"),
+});
+
+export type SignupRequest = z.infer<typeof signupSchema>;
+export type LoginRequest = z.infer<typeof loginSchema>;
diff --git a/src/utils/formatRelativeTime.ts b/src/utils/formatRelativeTime.ts
index 00a203400..16e69bbe3 100644
--- a/src/utils/formatRelativeTime.ts
+++ b/src/utils/formatRelativeTime.ts
@@ -1,32 +1,16 @@
-export function formatRelativeTime(dateString: string): string {
-  const now = new Date();
-  const past = new Date(dateString);
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import "dayjs/locale/ko";
 
-  if (isNaN(past.getTime())) {
-    throw new Error("유효하지 않은 날짜 형식입니다.");
-  }
-
-  const diffInSeconds: number = Math.floor((now.getTime() - past.getTime()) / 1000);
+dayjs.extend(relativeTime);
+dayjs.locale("ko");
 
-  if (diffInSeconds < 0) {
-    return "방금 전";
-  }
-
-  const intervals = [
-    { label: "년", seconds: 365 * 24 * 60 * 60 },
-    { label: "개월", seconds: 30 * 24 * 60 * 60 },
-    { label: "일", seconds: 24 * 60 * 60 },
-    { label: "시간", seconds: 60 * 60 },
-    { label: "분", seconds: 60 },
-    { label: "초", seconds: 1 },
-  ];
+export function formatRelativeTime(dateInput: string | number | Date): string {
+  const date = dayjs(dateInput);
 
-  for (const interval of intervals) {
-    const count: number = Math.floor(diffInSeconds / interval.seconds);
-    if (count >= 1) {
-      return `${count}${interval.label} 전`;
-    }
+  if (!date.isValid()) {
+    throw new Error("유효하지 않은 날짜 형식입니다.");
   }
 
-  return "방금 전";
+  return date.fromNow();
 }
diff --git a/src/utils/formattedDate.ts b/src/utils/formattedDate.ts
index 468beab55..106259c03 100644
--- a/src/utils/formattedDate.ts
+++ b/src/utils/formattedDate.ts
@@ -1,10 +1,7 @@
-export const formatDate = (dateString: string): string => {
-  const date = new Date(dateString);
-  return date
-    .toLocaleDateString("ko-KR", {
-      year: "numeric",
-      month: "2-digit",
-      day: "2-digit",
-    })
-    .replace(/\./g, ". ");
+import dayjs from "dayjs";
+
+const DATE_FORMAT = "YYYY.MM.DD";
+
+export const formatDate = (dateInput: string | number | Date): string => {
+  return dayjs(dateInput).format(DATE_FORMAT);
 };
diff --git a/src/utils/requestHandler.ts b/src/utils/requestHandler.ts
new file mode 100644
index 000000000..7606f5235
--- /dev/null
+++ b/src/utils/requestHandler.ts
@@ -0,0 +1,53 @@
+import { refreshAccessToken } from "@/services/authService";
+import { clearTokens, getAccessToken, isAccessTokenExpired } from "./tokenHandler";
+
+/**
+ * 공통 API 요청 함수
+ * Access Token의 만료 여부를 확인하고, 만료 시 Refresh Token을 사용하여 토큰을 갱신한 후 요청을 재시도합니다.
+ *
+ * @param input - 요청 URL 또는 Request 객체
+ * @param init - 요청 초기화 옵션
+ * @returns 응답 객체
+ */
+export async function authenticatedFetch(input: RequestInfo, init?: RequestInit): Promise<Response> {
+  if (isAccessTokenExpired()) {
+    await refreshAccessToken();
+  }
+
+  let accessToken = getAccessToken();
+
+  const authInit: RequestInit = {
+    ...init,
+    headers: {
+      "Content-Type": "application/json",
+      ...(init?.headers || {}),
+      ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
+    },
+  };
+
+  let response = await fetch(input, authInit);
+
+  if (response.status === 401) {
+    try {
+      await refreshAccessToken();
+      accessToken = getAccessToken();
+
+      const retryInit: RequestInit = {
+        ...init,
+        headers: {
+          "Content-Type": "application/json",
+          ...(init?.headers || {}),
+          Authorization: `Bearer ${accessToken}`,
+        },
+      };
+
+      response = await fetch(input, retryInit);
+    } catch (err) {
+      clearTokens();
+      window.location.href = "/login";
+      throw new Error("토큰 갱신 실패. 다시 로그인해주세요.");
+    }
+  }
+
+  return response;
+}
diff --git a/src/utils/tokenHandler.ts b/src/utils/tokenHandler.ts
index 55a0efec3..68aab5b10 100644
--- a/src/utils/tokenHandler.ts
+++ b/src/utils/tokenHandler.ts
@@ -1,5 +1,5 @@
-const ACCESS_TOKEN_KEY = "accessToken";
-const REFRESH_TOKEN_KEY = "refreshToken";
+const ACCESS_TOKEN_KEY = "ACCESS_TOKEN_KEY" as const;
+const REFRESH_TOKEN_KEY = "REFRESH_TOKEN_KEY" as const;
 
 export function saveTokens(accessToken: string, refreshToken: string) {
   localStorage.setItem(ACCESS_TOKEN_KEY, accessToken);
@@ -18,3 +18,17 @@ export function clearTokens() {
   localStorage.removeItem(ACCESS_TOKEN_KEY);
   localStorage.removeItem(REFRESH_TOKEN_KEY);
 }
+
+export function isAccessTokenExpired(): boolean {
+  const accessToken = getAccessToken();
+  if (!accessToken) return true;
+
+  try {
+    const payload = JSON.parse(atob(accessToken.split(".")[1]));
+    const currentTime = Math.floor(Date.now() / 1000);
+    return payload.exp < currentTime;
+  } catch (error) {
+    console.error("Access Token 파싱 오류:", error);
+    return true;
+  }
+}