diff --git a/README.md b/README.md
index 5d98b1e5a..dee6ca53f 100644
--- a/README.md
+++ b/README.md
@@ -1,40 +1,46 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+## **기본 요구사항**
 
-## Getting Started
+**공통**
 
-First, run the development server:
+- [x] Github에 위클리 미션 PR을 만들어 주세요.
+- [x] React.js 혹은 Next.js를 사용해 진행합니다.
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+### **프론트엔드 구현 요구사항**
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+**중고마켓 페이지**
 
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+- [ ] 디폴트 이미지로 처리한 이미지를 실제 Product Get API에서 가져온 이미지로 변경해 주세요.
+- [ ] 좋아요 순 정렬 기능을 붙여주세요.
+- [ ] 베스트 상품 기능을 추가해 주세요. 베스트 상품은 가장 많이 좋아요를 받은 순으로 PC 기준 최대 4개까지 조회 가능합니다.
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+**상품 등록하기 페이지**
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+- [ ] 상품 이미지 등록 기능을 구현합니다. 파일을 선택해 이미지를 업로드하고, preview를 볼 수 있도록 구현합니다. 이미지는 최대 3개까지만 등록 가능하도록 구현해 주세요.
+- [ ] 동일하게 상품 이미지 수정 기능도 추가합니다.
+- [ ] 상품 등록 성공 시 중고마켓 페이지로 이동해 주세요.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+## **심화 요구사항**
 
-## Learn More
+**상태코드 (웹 API 관련)**
 
-To learn more about Next.js, take a look at the following resources:
+- [ ] 프론트엔드에서는 서버 응답의 상태코드에 따라 적절한 사용자 피드백을 제공합니다.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+**인증**
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+- [ ] 토큰 기반 방식을 사용할 경우, 만료된 액세스 토큰을 새로 발급하는 리프레시 토큰 발급 기능을 구현합니다.(jwt sliding session 적용)
 
-## Deploy on Vercel
+**OAuth를 활용한 인증**
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+- [ ] 구글 OAuth를 사용하여 회원가입 및 로그인 기능을 구현합니다.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+**프로젝트 구조 변경**
+
+- [ ] 프로젝트의 구조와 복잡성을 관리하기 위해 MVC 패턴이나 Layered Architecture와 같은 설계 방식을 적용해 보세요.
+
+**(생략 가능) 자유게시판 게시물 등록**
+
+- [ ] 프론트엔드를 Next.js로 Migration 했을 경우에만 진행해 주세요.
+  - [ ] 게시물 등록 시 이미지 등록 기능을 구현합니다. 파일을 선택해 이미지를 업로드하고, preview를 볼 수 있도록 구현합니다. 이미지는 최대 3개까지만 등록 가능하도록 구현해 주세요.
+- [ ] 게시물 등록 시 필요한 필드(제목, 내용 등)의 유효성 검증하는 미들웨어를 구현합니다.
+- [ ] `multer` 미들웨어를 사용하여 이미지 업로드 API를 구현해 주세요.
+  - [ ] 업로드된 이미지는 서버에 저장하고, 해당 이미지의 경로를 response 객체에 포함해 반환합니다.
diff --git a/api/api.js b/api/api.js
new file mode 100644
index 000000000..254440ab4
--- /dev/null
+++ b/api/api.js
@@ -0,0 +1,97 @@
+// api.js
+import axiosInstance from "../lib/axios";
+
+// 사용자 정보 가져오기
+export const fetchCurrentUser = async () => {
+  const response = await axiosInstance.get("/users/me");
+  return response.data;
+};
+
+// 상품 목록 가져오기
+export const fetchProducts = async (params) => {
+  const response = await axiosInstance.get("/products", { params });
+  return response.data;
+};
+
+// 상품 등록
+export const createProduct = async (productData) => {
+  const response = await axiosInstance.post("/products", productData);
+  return response.data;
+};
+
+// 상품 상세 정보 가져오기
+export const fetchProductById = async (productId) => {
+  const response = await axiosInstance.get(`/products/${productId}`);
+  return response.data;
+};
+
+// 상품 수정
+export const editProduct = async (productId, productData) => {
+  const response = await axiosInstance.patch(
+    `/products/${productId}`,
+    productData
+  );
+  return response.data;
+};
+
+// 상품 삭제
+export const deleteProduct = async (productId) => {
+  const response = await axiosInstance.delete(`/products/${productId}`);
+  return response.data;
+};
+
+// 상품 댓글 목록 가져오기
+export const fetchProductComments = async (productId, params) => {
+  const response = await axiosInstance.get(`/products/${productId}/comments`, {
+    params,
+  });
+  return response.data;
+};
+
+// 상품 댓글 작성
+export const postProductComment = async ({ productId, content }) => {
+  const response = await axiosInstance.post(`/products/${productId}/comments`, {
+    content,
+  });
+  return response.data;
+};
+
+// 댓글 수정
+export const editComment = async (commentId, content) => {
+  const response = await axiosInstance.patch(`/comments/${commentId}`, {
+    content,
+  });
+  return response.data;
+};
+
+// 댓글 삭제
+export const deleteComment = async (commentId) => {
+  const response = await axiosInstance.delete(`/comments/${commentId}`);
+  return response.data;
+};
+
+// 상품 좋아요 추가
+export const postProductFavorite = async (productId) => {
+  const response = await axiosInstance.post(`/products/${productId}/favorite`);
+  return response.data;
+};
+
+// 상품 좋아요 취소
+export const deleteProductFavorite = async (productId) => {
+  const response = await axiosInstance.delete(
+    `/products/${productId}/favorite`
+  );
+  return response.data;
+};
+
+// 회원가입 요청
+export const signUp = async (userData) => {
+  const response = await axiosInstance.post("/auth/signUp", userData);
+  return response.data;
+};
+
+// 로그인 요청
+export const logIn = async (userData) => {
+  const response = await axiosInstance.post("/auth/signIn", userData);
+  return response.data;
+};
diff --git a/components/ArticleList.js b/components/ArticleList.js
index 719bdc939..5f8d18081 100644
--- a/components/ArticleList.js
+++ b/components/ArticleList.js
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "@/pages/api/axios";
+import axios from "@/lib/axios.js";
 import Article from "./Article";
 import Image from "next/image";
 import Link from "next/link";
diff --git a/components/BestArticleList.js b/components/BestArticleList.js
index d81590d2f..bfb13c777 100644
--- a/components/BestArticleList.js
+++ b/components/BestArticleList.js
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "@/pages/api/axios";
+import axios from "@/lib/axios.js";
 import BestArticleCard from "./BestArticleCard";
 import styles from "./BestArticleList.module.css";
 
diff --git a/components/CommentList.js b/components/CommentList.js
index 9429942a7..79d5ffead 100644
--- a/components/CommentList.js
+++ b/components/CommentList.js
@@ -2,7 +2,7 @@
 import styles from "@/styles/CommentList.module.css";
 import { useState } from "react";
 import Image from "next/image";
-import axios from "@/pages/api/axios";
+import axios from "@/lib/axios.js";
 
 export default function Comment({ comment }) {
   const [isOpen, setIsOpen] = useState(false);
diff --git a/components/CommentOptions.js b/components/CommentOptions.js
new file mode 100644
index 000000000..c2726d421
--- /dev/null
+++ b/components/CommentOptions.js
@@ -0,0 +1,101 @@
+// components/CommentOptions.js
+
+import React, { useState } from "react";
+import Image from "next/image";
+import styles from "./CommentOptions.module.css";
+
+const CommentOptions = ({ comments, onEdit, onDelete }) => {
+  const [editingCommentId, setEditingCommentId] = useState(null);
+  const [editedContent, setEditedContent] = useState("");
+
+  const handleEditClick = (comment) => {
+    setEditingCommentId(comment.id);
+    setEditedContent(comment.content);
+  };
+
+  const handleSaveClick = (commentId) => {
+    onEdit(commentId, editedContent);
+    setEditingCommentId(null);
+  };
+
+  const handleCancelClick = () => {
+    setEditingCommentId(null);
+    setEditedContent("");
+  };
+
+  const [showOptions, setShowOptions] = useState(null);
+
+  const handleCommentOptions = (commentId) => {
+    setShowOptions((prev) => (prev === commentId ? null : commentId));
+  };
+
+  return (
+    <div className={styles.comments}>
+      {comments.map((comment) => (
+        <div key={comment.id} className={styles.comment}>
+          <div className={styles.profileImageContainer}>
+            <Image
+              src="/ic_profile.png"
+              alt="프로필"
+              width={40}
+              height={40}
+              className={styles.profileImage}
+            />
+          </div>
+          <div className={styles.commentContentWrapper}>
+            {editingCommentId === comment.id ? (
+              // 인라인 편집 폼
+              <div className={styles.editForm}>
+                <textarea
+                  className={styles.editTextarea}
+                  value={editedContent}
+                  onChange={(e) => setEditedContent(e.target.value)}
+                />
+                <div className={styles.editActions}>
+                  <button onClick={() => handleSaveClick(comment.id)}>
+                    저장
+                  </button>
+                  <button onClick={handleCancelClick}>취소</button>
+                </div>
+              </div>
+            ) : (
+              // 댓글 내용 표시
+              <>
+                <p className={styles.commentContent}>{comment.content}</p>
+                <p className={styles.commentMeta}>
+                  {comment.writer.nickname} -{" "}
+                  {new Date(comment.createdAt).toLocaleString()}
+                  <div className={styles.commentActions}>
+                    <button
+                      onClick={() => handleCommentOptions(comment.id)}
+                      className={styles.commentOptionsButton}
+                    >
+                      <Image
+                        src="/ic_kebab.png"
+                        alt="옵션"
+                        width={20}
+                        height={20}
+                      />
+                    </button>
+                    {showOptions === comment.id && (
+                      <div className={styles.optionsPopup}>
+                        <button onClick={() => handleEditClick(comment)}>
+                          수정하기
+                        </button>
+                        <button onClick={() => onDelete(comment.id)}>
+                          삭제하기
+                        </button>
+                      </div>
+                    )}
+                  </div>
+                </p>
+              </>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default CommentOptions;
diff --git a/components/CommentOptions.module.css b/components/CommentOptions.module.css
new file mode 100644
index 000000000..15fce1d45
--- /dev/null
+++ b/components/CommentOptions.module.css
@@ -0,0 +1,93 @@
+/* components/CommentOptions.module.css */
+
+.comments {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 1200px; /* 전체 container 사이즈를 1200으로 설정 */
+  height: 100px; /* 전체 container 사이즈를 100으로 설정 */
+}
+
+.comment {
+  display: flex;
+  align-items: flex-start;
+  border-bottom: 1px solid #eee;
+  padding: 10px 0;
+}
+
+.profileImageContainer {
+  margin-right: 15px;
+}
+
+.profileImage {
+  border-radius: 50%;
+}
+
+.commentContentWrapper {
+  flex-grow: 1;
+}
+
+.commentContent {
+  margin-bottom: 5px;
+}
+
+.commentMeta {
+  font-size: 12px;
+  color: #666;
+  display: flex;
+  align-items: center;
+}
+
+.commentActions {
+  position: relative;
+  margin-left: auto; /* 오른쪽 끝에 위치시키기 위해 auto 사용 */
+}
+
+.commentOptionsButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  position: absolute; /* 절대 위치로 변경 */
+  right: 35px; /* 오른쪽 끝에서 20px 왼쪽으로 이동 */
+  bottom: 10px; /* 위쪽으로 10px 이동 */
+}
+
+.optionsPopup {
+  position: absolute;
+  top: 25px;
+  right: 0;
+  width: 139px;
+  background-color: white;
+  border: 1px solid #ddd;
+  z-index: 1000;
+}
+
+.optionsPopup button {
+  width: 100%;
+  padding: 10px 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.optionsPopup button:hover {
+  background-color: #f0f0f0;
+}
+
+/* 인라인 편집 폼 스타일 */
+.editForm {
+  display: flex;
+  flex-direction: column;
+}
+
+.editTextarea {
+  width: 100%;
+  height: 80px;
+  resize: vertical;
+  margin-bottom: 10px;
+}
+
+.editActions button {
+  margin-right: 5px;
+}
diff --git a/components/DeleteConfirmModal.js b/components/DeleteConfirmModal.js
new file mode 100644
index 000000000..21bf018be
--- /dev/null
+++ b/components/DeleteConfirmModal.js
@@ -0,0 +1,25 @@
+import React from "react";
+import Image from "next/image";
+import styles from "./DeleteConfirmModal.module.css";
+import checkIcon from "../public/ic_check.png";
+
+const DeleteConfirmModal = ({ onConfirm, onCancel }) => {
+  return (
+    <div className={styles.modalOverlay}>
+      <div className={styles.modalContent}>
+        <Image src={checkIcon} alt="확인" width={40} height={40} />
+        <p className={styles.modalText}>정말로 상품을 삭제하시겠어요?</p>
+        <div className={styles.buttonContainer}>
+          <button className={styles.cancelButton} onClick={onCancel}>
+            취소
+          </button>
+          <button className={styles.confirmButton} onClick={onConfirm}>
+            네
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DeleteConfirmModal;
diff --git a/components/DeleteConfirmModal.module.css b/components/DeleteConfirmModal.module.css
new file mode 100644
index 000000000..ba60c595a
--- /dev/null
+++ b/components/DeleteConfirmModal.module.css
@@ -0,0 +1,57 @@
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modalContent {
+  background-color: white;
+  width: 298px;
+  height: 202px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+}
+
+.modalText {
+  font-size: 16px;
+  text-align: center;
+  margin: 10px 0;
+}
+
+.buttonContainer {
+  display: flex;
+  justify-content: center; /* 중앙 정렬로 변경 */
+  width: 100%;
+  gap: 8px; /* 버튼 사이의 간격을 8px로 설정 */
+}
+
+.cancelButton,
+.confirmButton {
+  width: 88px;
+  height: 48px;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.cancelButton {
+  background-color: #f0f0f0;
+  color: #333;
+}
+
+.confirmButton {
+  background-color: #ff5a5f;
+  color: white;
+}
diff --git a/components/Footer.js b/components/Footer.js
index 480d9ae57..ac9bbeb11 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -1,56 +1,68 @@
 // components/Footer.js
 import React from "react";
 import Image from "next/image"; // Next.js의 Image 컴포넌트 사용
+import Link from "next/link"; // Next.js의 Link 컴포넌트 사용
 import styles from "./Footer.module.css"; // CSS Module을 사용하여 스타일링
 
 const Footer = () => {
   return (
     <footer className={styles.footer}>
-      <div>©codeit - 2024</div>
-      <div className={styles.footerMenu}>
-        <a href="/privacy">Privacy Policy</a>{" "}
-        {/* Next.js의 라우팅 시스템에 맞게 수정 */}
-        <a href="/faq">FAQ</a> {/* Next.js의 라우팅 시스템에 맞게 수정 */}
-      </div>
-      <div className={styles.socialMedia}>
-        <a
-          href="https://www.facebook.com/"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            src="facebook-logo.svg"
-            alt="페이스북"
-            width={20}
-            height={20}
-          />
-        </a>
-        <a
-          href="https://twitter.com/"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image src="twitter-logo.svg" alt="트위터" width={20} height={20} />
-        </a>
-        <a
-          href="https://www.youtube.com/"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image src="youtube-logo.svg" alt="유튜브" width={20} height={20} />
-        </a>
-        <a
-          href="https://www.instagram.com/"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            src="instagram-logo.svg"
-            alt="인스타그램"
-            width={20}
-            height={20}
-          />
-        </a>
+      <div className={styles.footerContent}>
+        <div>©codeit - 2024</div>
+        <div className={styles.footerMenu}>
+          <Link href="/privacy">Privacy Policy</Link>
+          <Link href="/faq">FAQ</Link>
+        </div>
+        <div className={styles.socialMedia}>
+          <a
+            href="https://www.facebook.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              src="/facebook-logo.svg"
+              alt="페이스북"
+              width={20}
+              height={20}
+            />
+          </a>
+          <a
+            href="https://twitter.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              src="/twitter-logo.svg"
+              alt="트위터"
+              width={20}
+              height={20}
+            />
+          </a>
+          <a
+            href="https://www.youtube.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              src="/youtube-logo.svg"
+              alt="유튜브"
+              width={20}
+              height={20}
+            />
+          </a>
+          <a
+            href="https://www.instagram.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              src="/instagram-logo.svg"
+              alt="인스타그램"
+              width={20}
+              height={20}
+            />
+          </a>
+        </div>
       </div>
     </footer>
   );
diff --git a/components/Footer.module.css b/components/Footer.module.css
index add6f31c7..e0bde0eea 100644
--- a/components/Footer.module.css
+++ b/components/Footer.module.css
@@ -3,20 +3,35 @@
 .footer {
   background-color: #111827;
   color: #9ca3af;
+  width: 100%; /* Fixed */
+  height: 160px; /* Fixed */
+  padding: 32px 200px;
+  font-size: 16px;
+  position: absolute;
+  top: 1628px;
+}
+
+.footerContent {
+  width: 1520px; /* Fill */
+  height: 20px; /* Hug */
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 3.2rem 20rem 10.8rem 20rem;
-  font-size: 1.6rem;
+  margin: 0 auto;
 }
 
 .footerMenu {
   display: flex;
-  gap: 3rem;
-  color: var(--gray-200);
+  gap: 10px;
+  color: white;
+}
+
+.footerMenu a {
+  text-decoration: none;
+  color: white;
 }
 
 .socialMedia {
   display: flex;
-  gap: 1.2rem;
+  gap: 10px;
 }
diff --git a/components/Modal.js b/components/Modal.js
new file mode 100644
index 000000000..bdaf481f0
--- /dev/null
+++ b/components/Modal.js
@@ -0,0 +1,19 @@
+import React from "react";
+import styles from "./Modal.module.css";
+
+const Modal = ({ isOpen, onClose, children }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className={styles.modalOverlay}>
+      <div className={styles.modalContent}>
+        {children}
+        <button className={styles.closeButton} onClick={onClose}>
+          확인
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;
diff --git a/components/Modal.module.css b/components/Modal.module.css
new file mode 100644
index 000000000..ea8e82733
--- /dev/null
+++ b/components/Modal.module.css
@@ -0,0 +1,36 @@
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modalContent {
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  width: 540px;
+  height: 250px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.closeButton {
+  margin-top: 20px;
+  padding: 10px 20px;
+  background-color: #4a90e2;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+}
diff --git a/components/Nav.js b/components/Nav.js
index 357c41aa8..f838d4d19 100644
--- a/components/Nav.js
+++ b/components/Nav.js
@@ -1,9 +1,46 @@
-// Nav.jsx
+// Nav.js
+import React from "react";
 import Image from "next/image";
 import styles from "./Nav.module.css";
 import Link from "next/link";
+import { useRouter } from "next/router";
+import { useQuery } from "@tanstack/react-query"; // useQuery를 사용하기 위해 추가
+import { fetchCurrentUser } from "../api/api"; // 사용자 정보를 가져오는 함수 import
 
 export default function Nav() {
+  const router = useRouter();
+
+  // useQuery를 사용하여 사용자 정보 가져오기
+  const {
+    data: user,
+    error,
+    isLoading,
+  } = useQuery({
+    queryKey: ["currentUser"],
+    queryFn: fetchCurrentUser,
+    retry: false, // 에러 발생 시 재시도 하지 않음
+  });
+
+  const handleLogout = () => {
+    localStorage.removeItem("accessToken");
+    if (typeof window !== "undefined") {
+      router.push("/login");
+    }
+  };
+
+  if (isLoading) return <div>로딩 중...</div>;
+
+  if (error) {
+    // 에러가 인증 오류인 경우 로그인 페이지로 리다이렉트
+    if (error.response && error.response.status === 401) {
+      if (typeof window !== "undefined") {
+        router.push("/login");
+      }
+      return null;
+    }
+    return <div>에러 발생: {error.message}</div>;
+  }
+
   return (
     <div className={styles.header}>
       <div className={styles.headerContent}>
@@ -18,11 +55,35 @@ export default function Nav() {
             />
           </Link>
           <div className={styles.linkContainer}>
-            <div className={styles.link}>자유게시판</div>
-            <div className={styles.link}>중고마켓</div>
+            <Link href="/board" className={styles.link}>
+              자유게시판
+            </Link>
+            <Link href="/items" className={styles.link}>
+              중고마켓
+            </Link>
           </div>
         </div>
-        <div className={styles.loginButton}>로그인</div>
+        <div className={styles.profileContainer}>
+          {user ? (
+            <div className={styles.userInfo}>
+              <Image
+                src="/ic_profile.png"
+                width={32}
+                height={32}
+                alt="프로필 이미지"
+                className={styles.profileImage}
+              />
+              <span>{user.nickname}</span>
+              <button onClick={handleLogout} className={styles.logoutButton}>
+                로그아웃
+              </button>
+            </div>
+          ) : (
+            <Link href="/login" className={styles.loginButton}>
+              로그인
+            </Link>
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/components/Nav.module.css b/components/Nav.module.css
index 275cb91e3..f6a4f3cb8 100644
--- a/components/Nav.module.css
+++ b/components/Nav.module.css
@@ -7,6 +7,7 @@
   border-bottom: 1px solid #dfdfdf;
   position: fixed;
   top: 0;
+  padding: 32px 300px;
   background-color: white;
   z-index: 1; /* 다른 요소들보다 위에 표시 */
 }
@@ -16,8 +17,6 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 20px; /* 좌우 패딩을 줄여 단순화 */
-  max-width: 1200px; /* 최대 너비를 1200px로 설정 */
   margin: 0 auto;
   height: 100%;
 }
@@ -50,12 +49,48 @@
   cursor: pointer;
   transition: color 0.3s; /* 호버 시 부드러운 색상 전환 */
   color: #1f2937;
+  text-decoration: none; /* 밑줄 제거 */
 }
 
 .link:hover {
   color: #3b82f6; /* 호버 시 색상 변경 */
 }
 
+/* 프로필 컨테이너 */
+.profileContainer {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+/* 유저 정보 스타일 */
+.userInfo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 로그아웃 버튼 스타일 */
+.logoutButton {
+  background-color: var(--brand-blue); /* 브랜드 블루 색상 */
+  width: 88px;
+  height: 42px;
+  border-radius: 8px; /* 모서리를 둥글게 */
+  color: white;
+  font-weight: 600;
+  line-height: 19.09px;
+  text-align: center;
+  padding: 11.5px;
+  cursor: pointer;
+  border: none; /* 테두리 제거 */
+  transition: background-color 0.3s; /* 호버 시 부드러운 배경색 전환 */
+  text-decoration: none; /* 밑줄 제거 */
+}
+
+.logoutButton:hover {
+  background-color: #2563eb; /* 호버 시 더 어두운 파란색 */
+}
+
 /* 로그인 버튼 스타일 */
 .loginButton {
   background-color: var(--brand-blue); /* 브랜드 블루 색상 */
@@ -95,3 +130,9 @@
     margin-top: 10px;
   }
 }
+
+/* 프로필 이미지 스타일 */
+.profileImage {
+  border-radius: 50%;
+  margin-right: 8px;
+}
diff --git a/components/ProductOptions.js b/components/ProductOptions.js
new file mode 100644
index 000000000..40ca16949
--- /dev/null
+++ b/components/ProductOptions.js
@@ -0,0 +1,106 @@
+// components/ProductOptions.js
+
+import React, { useState } from "react";
+import Image from "next/image";
+import styles from "./ProductOptions.module.css";
+
+const ProductOptions = ({ product, onEdit, onDelete }) => {
+  const [showOptions, setShowOptions] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedProduct, setEditedProduct] = useState({
+    name: product.name,
+    price: product.price,
+    description: product.description,
+    tags: product.tags.join(", "),
+  });
+
+  const handleOptionsToggle = () => {
+    setShowOptions((prev) => !prev);
+  };
+
+  const handleEditClick = () => {
+    setIsEditing(true);
+    setShowOptions(false);
+  };
+
+  const handleSaveClick = () => {
+    const updatedProduct = {
+      ...editedProduct,
+      tags: editedProduct.tags.split(",").map((tag) => tag.trim()),
+    };
+    onEdit(product.id, updatedProduct);
+    setIsEditing(false);
+  };
+
+  const handleCancelClick = () => {
+    setIsEditing(false);
+    setEditedProduct({
+      name: product.name,
+      price: product.price,
+      description: product.description,
+      tags: product.tags.join(", "),
+    });
+  };
+
+  return (
+    <div className={styles.productOptions}>
+      <button onClick={handleOptionsToggle} className={styles.optionsButton}>
+        <Image src="/ic_kebab.png" alt="옵션" width={20} height={20} />
+      </button>
+      {showOptions && (
+        <div className={styles.optionsPopup}>
+          <button onClick={handleEditClick}>수정하기</button>
+          <button onClick={() => onDelete()}>삭제하기</button>
+        </div>
+      )}
+
+      {isEditing && (
+        <div className={styles.editForm}>
+          <input
+            type="text"
+            value={editedProduct.name}
+            onChange={(e) =>
+              setEditedProduct({ ...editedProduct, name: e.target.value })
+            }
+            placeholder="상품 이름"
+          />
+          <input
+            type="number"
+            value={editedProduct.price}
+            onChange={(e) =>
+              setEditedProduct({
+                ...editedProduct,
+                price: Number(e.target.value),
+              })
+            }
+            placeholder="가격"
+          />
+          <textarea
+            value={editedProduct.description}
+            onChange={(e) =>
+              setEditedProduct({
+                ...editedProduct,
+                description: e.target.value,
+              })
+            }
+            placeholder="상품 설명"
+          />
+          <input
+            type="text"
+            value={editedProduct.tags}
+            onChange={(e) =>
+              setEditedProduct({ ...editedProduct, tags: e.target.value })
+            }
+            placeholder="태그 (쉼표로 구분)"
+          />
+          <div className={styles.editActions}>
+            <button onClick={handleSaveClick}>저장</button>
+            <button onClick={handleCancelClick}>취소</button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProductOptions;
diff --git a/components/ProductOptions.module.css b/components/ProductOptions.module.css
new file mode 100644
index 000000000..e671848de
--- /dev/null
+++ b/components/ProductOptions.module.css
@@ -0,0 +1,50 @@
+/* components/ProductOptions.module.css */
+
+.productOptions {
+  position: relative;
+}
+
+.optionsButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
+.optionsPopup {
+  position: absolute;
+  top: 25px;
+  right: 0;
+  width: 139px;
+  background-color: white;
+  border: 1px solid #ddd;
+  z-index: 1000;
+}
+
+.optionsPopup button {
+  width: 100%;
+  padding: 10px 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.optionsPopup button:hover {
+  background-color: #f0f0f0;
+}
+
+.editForm {
+  margin-top: 20px;
+}
+
+.editForm input,
+.editForm textarea {
+  width: 100%;
+  margin-bottom: 10px;
+  padding: 8px;
+  box-sizing: border-box;
+}
+
+.editActions button {
+  margin-right: 5px;
+}
diff --git a/components/SignupCompleteModal.js b/components/SignupCompleteModal.js
new file mode 100644
index 000000000..9bcd7cd42
--- /dev/null
+++ b/components/SignupCompleteModal.js
@@ -0,0 +1,19 @@
+import React from "react";
+import styles from "./SignupCompleteModal.module.css";
+
+const SignupCompleteModal = ({ isOpen, onClose }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className={styles.modalOverlay}>
+      <div className={styles.modalContent}>
+        <p className={styles.modalText}>가입 완료되었습니다.</p>
+        <button className={styles.confirmButton} onClick={onClose}>
+          확인
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SignupCompleteModal;
diff --git a/components/SignupCompleteModal.module.css b/components/SignupCompleteModal.module.css
new file mode 100644
index 000000000..53fce3cf7
--- /dev/null
+++ b/components/SignupCompleteModal.module.css
@@ -0,0 +1,44 @@
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7); /* 짙은 회색 배경 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modalContent {
+  width: 540px;
+  height: 250px;
+  background-color: white;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.modalText {
+  font-size: 18px;
+  margin-bottom: 20px;
+}
+
+.confirmButton {
+  width: 165px;
+  height: 48px;
+  background-color: var(--brand-blue);
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s ease;
+}
+
+.confirmButton:hover {
+  background-color: darken(var(--brand-blue), 10%);
+}
diff --git a/lib/axios.js b/lib/axios.js
new file mode 100644
index 000000000..db758a179
--- /dev/null
+++ b/lib/axios.js
@@ -0,0 +1,23 @@
+import axios from "axios";
+
+export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL;
+
+const axiosInstance = axios.create({
+  baseURL: API_BASE_URL,
+});
+
+// 요청 인터셉터
+if (typeof window !== "undefined") {
+  axiosInstance.interceptors.request.use(
+    (config) => {
+      const token = localStorage.getItem("accessToken");
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+      return config;
+    },
+    (error) => Promise.reject(error)
+  );
+}
+
+export default axiosInstance;
diff --git a/next.config.mjs b/next.config.mjs
index d5456a15d..4498dd105 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,6 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**",
+      },
+    ],
+  },
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index bead265ad..bd62f1810 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,20 +1,24 @@
 {
-  "name": "1-sprint-mission-fe",
+  "name": "mission8",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "1-sprint-mission-fe",
+      "name": "mission8",
       "version": "0.1.0",
       "dependencies": {
-        "next": "14.2.8",
+        "@tanstack/react-query": "^5.56.2",
+        "@tanstack/react-query-devtools": "^5.56.2",
+        "axios": "^1.7.7",
+        "next": "14.2.7",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "react-hook-form": "^7.53.0"
       },
       "devDependencies": {
         "eslint": "^8",
-        "eslint-config-next": "14.2.8"
+        "eslint-config-next": "14.2.7"
       }
     },
     "node_modules/@eslint-community/eslint-utils": {
@@ -134,9 +138,9 @@
       }
     },
     "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -163,15 +167,15 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.2.8",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.8.tgz",
-      "integrity": "sha512-L44a+ynqkolyNBnYfF8VoCiSrjSZWgEHYKkKLGcs/a80qh7AkfVUD/MduVPgdsWZ31tgROR+yJRA0PZjSVBXWQ==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.7.tgz",
+      "integrity": "sha512-OTx9y6I3xE/eih+qtthppwLytmpJVPM5PPoJxChFsbjIEFXIayG0h/xLzefHGJviAa3Q5+Fd+9uYojKkHDKxoQ==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
-      "version": "14.2.8",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.8.tgz",
-      "integrity": "sha512-ue5vcq9Fjk3asACRDrzYjcGMEN7pMMDQ5zUD+FenkqvlPCVUD1x7PxBNOLfPYDZOrk/Vnl4GHmjj2mZDqPW8TQ==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.7.tgz",
+      "integrity": "sha512-+7xh142AdhZGjY9/L0iFo7mqRBMJHe+q+uOL+hto1Lfo9DeWCGcR6no4StlFbVSVcA6fQLKEX6y6qhMsSKbgNQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -179,9 +183,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.8",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.8.tgz",
-      "integrity": "sha512-1VrQlG8OzdyvvGZhGJFnaNE2P10Jjy/2FopnqbY0nSa/gr8If3iINxvOEW3cmVeoAYkmW0RsBazQecA2dBFOSw==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.7.tgz",
+      "integrity": "sha512-UhZGcOyI9LE/tZL3h9rs/2wMZaaJKwnpAyegUVDGZqwsla6hMfeSj9ssBWQS9yA4UXun3pPhrFLVnw5KXZs3vw==",
       "cpu": [
         "arm64"
       ],
@@ -195,9 +199,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.8",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.8.tgz",
-      "integrity": "sha512-87t3I86rNRSOJB1gXIUzaQWWSWrkWPDyZGsR0Z7JAPtLeX3uUOW2fHxl7dNWD2BZvbvftctTQjgtfpp7nMtmWg==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.7.tgz",
+      "integrity": "sha512-ys2cUgZYRc+CbyDeLAaAdZgS7N1Kpyy+wo0b/gAj+SeOeaj0Lw/q+G1hp+DuDiDAVyxLBCJXEY/AkhDmtihUTA==",
       "cpu": [
         "x64"
       ],
@@ -211,9 +215,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.8",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.8.tgz",
-      "integrity": "sha512-ta2sfVzbOpTbgBrF9HM5m+U58dv6QPuwU4n5EX4LLyCJGKc433Z0D9h9gay/HSOjLEXJ2fJYrMP5JYYbHdxhtw==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.7.tgz",
+      "integrity": "sha512-2xoWtE13sUJ3qrC1lwE/HjbDPm+kBQYFkkiVECJWctRASAHQ+NwjMzgrfqqMYHfMxFb5Wws3w9PqzZJqKFdWcQ==",
       "cpu": [
         "arm64"
       ],
@@ -227,9 +231,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.8",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.8.tgz",
-      "integrity": "sha512-+IoLTPK6Z5uIgDhgeWnQF5/o5GBN7+zyUNrs4Bes1W3g9++YELb8y0unFybS8s87ntAKMDl6jeQ+mD7oNwp/Ng==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.7.tgz",
+      "integrity": "sha512-+zJ1gJdl35BSAGpkCbfyiY6iRTaPrt3KTl4SF/B1NyELkqqnrNX6cp4IjjjxKpd64/7enI0kf6b9O1Uf3cL0pw==",
       "cpu": [
         "arm64"
       ],
@@ -243,9 +247,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.8",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.8.tgz",
-      "integrity": "sha512-pO+hVXC+mvzUOQJJRG4RX4wJsRJ5BkURSf6dD6EjUXAX4Ml9es1WsEfkaZ4lcpmFzFvY47IkDaffks/GdCn9ag==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.7.tgz",
+      "integrity": "sha512-m6EBqrskeMUzykBrv0fDX/28lWIBGhMzOYaStp0ihkjzIYJiKUOzVYD1gULHc8XDf5EMSqoH/0/TRAgXqpQwmw==",
       "cpu": [
         "x64"
       ],
@@ -259,9 +263,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.8",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.8.tgz",
-      "integrity": "sha512-bCat9izctychCtf3uL1nqHq31N5e1VxvdyNcBQflkudPMLbxVnlrw45Vi87K+lt1CwrtVayHqzo4ie0Szcpwzg==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.7.tgz",
+      "integrity": "sha512-gUu0viOMvMlzFRz1r1eQ7Ql4OE+hPOmA7smfZAhn8vC4+0swMZaZxa9CSIozTYavi+bJNDZ3tgiSdMjmMzRJlQ==",
       "cpu": [
         "x64"
       ],
@@ -275,9 +279,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.8",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.8.tgz",
-      "integrity": "sha512-gbxfUaSPV7EyUobpavida2Hwi62GhSJaSg7iBjmBWoxkxlmETOD7U4tWt763cGIsyE6jM7IoNavq0BXqwdW2QA==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.7.tgz",
+      "integrity": "sha512-PGbONHIVIuzWlYmLvuFKcj+8jXnLbx4WrlESYlVnEzDsa3+Q2hI1YHoXaSmbq0k4ZwZ7J6sWNV4UZfx1OeOlbQ==",
       "cpu": [
         "arm64"
       ],
@@ -291,9 +295,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.8",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.8.tgz",
-      "integrity": "sha512-PUXzEzjTTlUh3b5VAn1nlpwvujTnuCMMwbiCnaTazoVlN1nA3kWjlmp42IfURA2N/nyrlVEw7pURa/o4Qxj1cw==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.7.tgz",
+      "integrity": "sha512-BiSY5umlx9ed5RQDoHcdbuKTUkuFORDqzYKPHlLeS+STUWQKWziVOn3Ic41LuTBvqE0TRJPKpio9GSIblNR+0w==",
       "cpu": [
         "ia32"
       ],
@@ -307,9 +311,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.2.8",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.8.tgz",
-      "integrity": "sha512-EnPKv0ttq02E9/1KZ/8Dn7kuutv6hy1CKc0HlNcvzOQcm4/SQtvfws5gY0zrG9tuupd3HfC2L/zcTrnBhpjTuQ==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.7.tgz",
+      "integrity": "sha512-pxsI23gKWRt/SPHFkDEsP+w+Nd7gK37Hpv0ngc5HpWy2e7cKx9zR/+Q2ptAUqICNTecAaGWvmhway7pj/JLEWA==",
       "cpu": [
         "x64"
       ],
@@ -411,63 +415,66 @@
         "tslib": "^2.4.0"
       }
     },
-    "node_modules/@types/json-schema": {
-      "version": "7.0.15",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
-      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@types/json5": {
-      "version": "0.0.29",
-      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
-      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
-      "dev": true,
-      "license": "MIT"
+    "node_modules/@tanstack/query-core": {
+      "version": "5.56.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.56.2.tgz",
+      "integrity": "sha512-gor0RI3/R5rVV3gXfddh1MM+hgl0Z4G7tj6Xxpq6p2I03NGPaJ8dITY9Gz05zYYb/EJq9vPas/T4wn9EaDPd4Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
     },
-    "node_modules/@types/semver": {
-      "version": "7.5.8",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
-      "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
-      "dev": true,
-      "license": "MIT"
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.58.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.58.0.tgz",
+      "integrity": "sha512-iFdQEFXaYYxqgrv63ots+65FGI+tNp5ZS5PdMU1DWisxk3fez5HG3FyVlbUva+RdYS5hSLbxZ9aw3yEs97GNTw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
     },
-    "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.2.0.tgz",
-      "integrity": "sha512-mdekAHOqS9UjlmyF/LSs6AIEvfceV749GFxoBAjwAv0nkevfKHWQFDMcBZWUiIC5ft6ePWivXoS36aKQ0Cy3sw==",
-      "dev": true,
+    "node_modules/@tanstack/react-query": {
+      "version": "5.56.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.56.2.tgz",
+      "integrity": "sha512-SR0GzHVo6yzhN72pnRhkEFRAHMsUo5ZPzAxfTMvUxFIDVS6W9LYUp6nXW3fcHVdg0ZJl8opSH85jqahvm6DSVg==",
       "license": "MIT",
       "dependencies": {
-        "@eslint-community/regexpp": "^4.5.1",
-        "@typescript-eslint/scope-manager": "7.2.0",
-        "@typescript-eslint/type-utils": "7.2.0",
-        "@typescript-eslint/utils": "7.2.0",
-        "@typescript-eslint/visitor-keys": "7.2.0",
-        "debug": "^4.3.4",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.2.4",
-        "natural-compare": "^1.4.0",
-        "semver": "^7.5.4",
-        "ts-api-utils": "^1.0.1"
-      },
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "@tanstack/query-core": "5.56.2"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^7.0.0",
-        "eslint": "^8.56.0"
+        "react": "^18 || ^19"
+      }
+    },
+    "node_modules/@tanstack/react-query-devtools": {
+      "version": "5.58.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.58.0.tgz",
+      "integrity": "sha512-qF0xCyBeVuNLygTO1sAl1X4Gv52w52SeaDdbjYQmtTOooUJ3aAVlBEtiRJFfJblWQ9p/UQG8NIcC/65RjX8Jkw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.58.0"
       },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.56.2",
+        "react": "^18 || ^19"
       }
     },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/parser": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz",
@@ -515,34 +522,6 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@typescript-eslint/type-utils": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.2.0.tgz",
-      "integrity": "sha512-xHi51adBHo9O9330J8GQYQwrKBqbIPJGZZVQTHHmy200hvkLZFWJIFtAG/7IYTWUyun6DE6w5InDReePJYJlJA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/typescript-estree": "7.2.0",
-        "@typescript-eslint/utils": "7.2.0",
-        "debug": "^4.3.4",
-        "ts-api-utils": "^1.0.1"
-      },
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.56.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@typescript-eslint/types": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.2.0.tgz",
@@ -612,32 +591,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/@typescript-eslint/utils": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.2.0.tgz",
-      "integrity": "sha512-YfHpnMAGb1Eekpm3XRK8hcMwGLGsnT6L+7b2XyRv6ouDuJU1tZir1GS2i0+VXRatMwSI1/UfcyPe53ADkU+IuA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.4.0",
-        "@types/json-schema": "^7.0.12",
-        "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "7.2.0",
-        "@typescript-eslint/types": "7.2.0",
-        "@typescript-eslint/typescript-estree": "7.2.0",
-        "semver": "^7.5.4"
-      },
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.56.0"
-      }
-    },
     "node_modules/@typescript-eslint/visitor-keys": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.2.0.tgz",
@@ -921,6 +874,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -947,6 +906,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -1092,6 +1062,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1269,6 +1251,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -1580,15 +1571,14 @@
       }
     },
     "node_modules/eslint-config-next": {
-      "version": "14.2.8",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.2.8.tgz",
-      "integrity": "sha512-gRqxHkSuCrQro6xqXnmXphcq8rdiw7FI+nLXpWmIlp/AfUzHCgXNQE7mOK+oco+SRaJbhqCg/68uRln1qjkF+Q==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.2.7.tgz",
+      "integrity": "sha512-ppmy+QdQ7qkuCHGDlPjWaoSbJvjGpWSBD4zEW8f1eWlxYXYpZK7QzBOer1EcHKT3uKhlY1JjUus9g7Kvv712rw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@next/eslint-plugin-next": "14.2.8",
+        "@next/eslint-plugin-next": "14.2.7",
         "@rushstack/eslint-patch": "^1.3.3",
-        "@typescript-eslint/eslint-plugin": "^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0",
         "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0",
         "eslint-import-resolver-node": "^0.3.6",
         "eslint-import-resolver-typescript": "^3.5.2",
@@ -2097,6 +2087,26 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2124,6 +2134,20 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3160,6 +3184,27 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3226,12 +3271,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "14.2.8",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.2.8.tgz",
-      "integrity": "sha512-EyEyJZ89r8C5FPlS/401AiF3O8jeMtHIE+bLom9MwcdWJJFBgRl+MR/2VgO0v5bI6tQORNY0a0DR5sjpFNrjbg==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.7.tgz",
+      "integrity": "sha512-4Qy2aK0LwH4eQiSvQWyKuC7JXE13bIopEQesWE0c/P3uuNRnZCQanI0vsrMLmUQJLAto+A+/8+sve2hd+BQuOQ==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "14.2.8",
+        "@next/env": "14.2.7",
         "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
@@ -3246,15 +3291,15 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.2.8",
-        "@next/swc-darwin-x64": "14.2.8",
-        "@next/swc-linux-arm64-gnu": "14.2.8",
-        "@next/swc-linux-arm64-musl": "14.2.8",
-        "@next/swc-linux-x64-gnu": "14.2.8",
-        "@next/swc-linux-x64-musl": "14.2.8",
-        "@next/swc-win32-arm64-msvc": "14.2.8",
-        "@next/swc-win32-ia32-msvc": "14.2.8",
-        "@next/swc-win32-x64-msvc": "14.2.8"
+        "@next/swc-darwin-arm64": "14.2.7",
+        "@next/swc-darwin-x64": "14.2.7",
+        "@next/swc-linux-arm64-gnu": "14.2.7",
+        "@next/swc-linux-arm64-musl": "14.2.7",
+        "@next/swc-linux-x64-gnu": "14.2.7",
+        "@next/swc-linux-x64-musl": "14.2.7",
+        "@next/swc-win32-arm64-msvc": "14.2.7",
+        "@next/swc-win32-ia32-msvc": "14.2.7",
+        "@next/swc-win32-x64-msvc": "14.2.7"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -3627,6 +3672,12 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3683,6 +3734,22 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.53.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.0.tgz",
+      "integrity": "sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==",
+      "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",
@@ -4073,9 +4140,9 @@
       "license": "MIT"
     },
     "node_modules/string-width/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4467,9 +4534,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
-      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
+      "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
       "dev": true,
       "license": "Apache-2.0",
       "peer": true,
@@ -4676,9 +4743,9 @@
       }
     },
     "node_modules/wrap-ansi/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
       "dev": true,
       "license": "MIT",
       "engines": {
diff --git a/package.json b/package.json
index 1e763f971..b1c1d055e 100644
--- a/package.json
+++ b/package.json
@@ -9,10 +9,13 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.56.2",
+    "@tanstack/react-query-devtools": "^5.56.2",
     "axios": "^1.7.7",
     "next": "14.2.7",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-hook-form": "^7.53.0"
   },
   "devDependencies": {
     "eslint": "^8",
diff --git a/pages/_app.js b/pages/_app.js
index e4ad40346..4cb738761 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,14 +1,17 @@
-import Head from "next/head";
-import Nav from "@/components/Nav";
-import Footer from "@/components/Footer";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import "@/styles/global.css";
+import { useState } from "react";
+
+function MyApp({ Component, pageProps }) {
+  const [queryClient] = useState(() => new QueryClient());
 
-export default function App({ Component, pageProps }) {
   return (
-    <>
-      <Nav />
+    <QueryClientProvider client={queryClient}>
       <Component {...pageProps} />
-      <Footer />
-    </>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
   );
 }
+
+export default MyApp;
diff --git a/pages/api/axios.js b/pages/api/axios.js
deleted file mode 100644
index d976c7996..000000000
--- a/pages/api/axios.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import axios from "axios";
-
-const instance = axios.create({
-  baseURL: "http://localhost:3000/", // 모든 요청의 기본 URL 설정
-});
-
-export default instance;
diff --git a/pages/folder/folder.js b/pages/folder/folder.js
new file mode 100644
index 000000000..5fdfbf74b
--- /dev/null
+++ b/pages/folder/folder.js
@@ -0,0 +1,5 @@
+function Folder() {
+  return <div>folder</div>;
+}
+
+export default Folder;
diff --git a/pages/items/[itemId].js b/pages/items/[itemId].js
new file mode 100644
index 000000000..acd14ab96
--- /dev/null
+++ b/pages/items/[itemId].js
@@ -0,0 +1,307 @@
+import React, { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import styles from "../../styles/ItemDetail.module.css";
+import Nav from "../../components/Nav";
+import Footer from "../../components/Footer";
+import CommentOptions from "../../components/CommentOptions";
+import ProductOptions from "../../components/ProductOptions";
+import {
+  fetchProductById,
+  fetchProductComments,
+  fetchCurrentUser,
+  postProductComment,
+  deleteComment,
+  editComment,
+  editProduct,
+  deleteProduct,
+  postProductFavorite,
+  deleteProductFavorite,
+} from "../../api/api";
+import DeleteConfirmModal from "../../components/DeleteConfirmModal";
+
+const ItemDetail = () => {
+  const router = useRouter();
+  const { itemId } = router.query;
+  const [newComment, setNewComment] = useState("");
+  const [cursor, setCursor] = useState(null);
+  const COMMENTS_PER_PAGE = 10;
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+  const queryClient = useQueryClient();
+
+  const {
+    data: itemData,
+    error: itemError,
+    isLoading: itemLoading,
+  } = useQuery({
+    queryKey: ["product", itemId],
+    queryFn: () => fetchProductById(itemId),
+    enabled: !!itemId,
+  });
+
+  const {
+    data: commentsData,
+    error: commentsError,
+    isLoading: commentsLoading,
+  } = useQuery({
+    queryKey: ["productComments", itemId, { limit: COMMENTS_PER_PAGE, cursor }],
+    queryFn: () =>
+      fetchProductComments(itemId, {
+        limit: COMMENTS_PER_PAGE,
+        cursor,
+      }),
+    enabled: !!itemId,
+  });
+
+  const {
+    data: currentUser,
+    error: userError,
+    isLoading: userLoading,
+  } = useQuery({
+    queryKey: ["currentUser"],
+    queryFn: fetchCurrentUser,
+  });
+
+  const postCommentMutation = useMutation({
+    mutationFn: ({ productId, content }) =>
+      postProductComment({ productId, content }),
+    onSuccess: () => {
+      setNewComment("");
+      queryClient.invalidateQueries(["productComments", itemId]);
+    },
+  });
+
+  const deleteCommentMutation = useMutation({
+    mutationFn: (commentId) => deleteComment(commentId),
+    onSuccess: () => {
+      queryClient.invalidateQueries(["productComments", itemId]);
+    },
+  });
+
+  const editCommentMutation = useMutation({
+    mutationFn: ({ commentId, newContent }) =>
+      editComment(commentId, newContent),
+    onSuccess: () => {
+      queryClient.invalidateQueries(["productComments", itemId]);
+    },
+  });
+
+  const editProductMutation = useMutation({
+    mutationFn: ({ productId, productData }) =>
+      editProduct(productId, productData),
+    onSuccess: () => {
+      queryClient.invalidateQueries(["product", itemId]);
+    },
+  });
+
+  const deleteProductMutation = useMutation({
+    mutationFn: (productId) => deleteProduct(productId),
+    onSuccess: () => {
+      router.push("/items");
+    },
+  });
+
+  const favoriteMutation = useMutation({
+    mutationFn: () =>
+      itemData.isFavorite
+        ? deleteProductFavorite(itemId)
+        : postProductFavorite(itemId),
+    onSuccess: () => {
+      queryClient.invalidateQueries(["product", itemId]);
+    },
+  });
+
+  const handleCommentSubmit = (e) => {
+    e.preventDefault();
+    postCommentMutation.mutate({
+      productId: itemId,
+      content: newComment,
+    });
+  };
+
+  const handleCommentDelete = (commentId) => {
+    deleteCommentMutation.mutate(commentId);
+  };
+
+  const handleCommentEdit = (commentId, newContent) => {
+    if (newContent) {
+      editCommentMutation.mutate({ commentId, newContent });
+    }
+  };
+
+  const handleProductEdit = (productId, productData) => {
+    editProductMutation.mutate({ productId, productData });
+  };
+
+  const handleProductDelete = () => {
+    setShowDeleteModal(true);
+  };
+
+  const confirmDelete = () => {
+    deleteProductMutation.mutate(itemId);
+    setShowDeleteModal(false);
+  };
+
+  const cancelDelete = () => {
+    setShowDeleteModal(false);
+  };
+
+  const handleFavorite = () => {
+    favoriteMutation.mutate();
+  };
+
+  const loadMoreComments = () => {
+    if (commentsData && commentsData.nextCursor) {
+      setCursor(commentsData.nextCursor);
+    }
+  };
+
+  useEffect(() => {
+    if (itemData) {
+      console.log("상품명:", itemData.name);
+      console.log("판매가격:", itemData.price);
+      console.log("상품소개:", itemData.description);
+      console.log("태그:", itemData.tags);
+      console.log("외부 이미지 URL:", itemData.images);
+    }
+  }, [itemData]);
+
+  if (itemLoading || commentsLoading || userLoading)
+    return <div>로딩 중...</div>;
+  if (itemError || commentsError || userError)
+    return (
+      <div>에러 발생: {(itemError || commentsError || userError).message}</div>
+    );
+  if (!itemData) return <div>상품을 찾을 수 없습니다.</div>;
+
+  return (
+    <div>
+      <Nav />
+      <div className={styles.container}>
+        <div className={styles.contentWrapper}>
+          <div className={styles.imageGallery}>
+            {/* 이미지가 있을 때만 렌더링 */}
+            {itemData.images.length > 0 && (
+              <img
+                src={itemData.images[0]}
+                alt={itemData.name}
+                width="486"
+                height="486"
+                className={styles.mainImage}
+              />
+            )}
+          </div>
+
+          <div className={styles.itemInfo}>
+            <div className={styles.itemHeader}>
+              <h1 className={styles.itemName}>{itemData.name}</h1>
+              <div className={styles.productOptions}>
+                <ProductOptions
+                  product={itemData}
+                  currentUser={currentUser}
+                  onEdit={handleProductEdit}
+                  onDelete={handleProductDelete}
+                />
+              </div>
+            </div>
+
+            <p className={styles.itemPrice}>
+              {itemData.price.toLocaleString()}원
+            </p>
+            <button
+              onClick={handleFavorite}
+              className={`${styles.favoriteButton} ${
+                itemData.isFavorite ? styles.favoriteButtonActive : ""
+              }`}
+            >
+              <img
+                src={
+                  itemData.isFavorite ? "/product_reply.svg" : "/ic_heart.png"
+                }
+                alt="좋아요"
+                width="26.8"
+                height="23.3"
+                className={styles.favoriteIcon}
+              />
+              {itemData.favoriteCount}
+            </button>
+            <h3 className={styles.sectionTitle}>상품 소개</h3>
+            <p className={styles.itemDescription}>{itemData.description}</p>
+            <h3 className={styles.sectionTitle}>상품 태그</h3>
+            <div className={styles.itemTags}>
+              {itemData.tags.map((tag, index) => (
+                <span key={index} className={styles.tag}>
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className={styles.commentSection}>
+          <h3>문의하기</h3>
+          <form onSubmit={handleCommentSubmit} className={styles.commentForm}>
+            <textarea
+              value={newComment}
+              onChange={(e) => setNewComment(e.target.value)}
+              placeholder="댓글을 입력하세요"
+              className={styles.commentInput}
+            />
+            <button type="submit" className={styles.commentSubmit}>
+              등록
+            </button>
+          </form>
+          {commentsData && commentsData.list.length === 0 ? (
+            <div className={styles.emptyComments}>
+              <img
+                src="/Img_inquiry_empty.png"
+                alt="댓글 없음"
+                width="200"
+                height="200"
+              />
+              <p>아직 댓글이 없습니다.</p>
+            </div>
+          ) : (
+            <div className={styles.CommentOptions}>
+              <CommentOptions
+                comments={commentsData.list}
+                currentUser={currentUser}
+                onEdit={handleCommentEdit}
+                onDelete={handleCommentDelete}
+              />
+            </div>
+          )}
+          {commentsData && commentsData.nextCursor && (
+            <button
+              onClick={loadMoreComments}
+              className={styles.loadMoreButton}
+            >
+              더 보기
+            </button>
+          )}
+        </div>
+        <button
+          onClick={() => router.push("/items")}
+          className={styles.backToListButton}
+        >
+          <img
+            src="/btn_medium.png"
+            alt="목록으로 돌아가기"
+            width="240"
+            height="48"
+          />
+        </button>
+        {showDeleteModal && (
+          <DeleteConfirmModal
+            onConfirm={confirmDelete}
+            onCancel={cancelDelete}
+          />
+        )}
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default ItemDetail;
diff --git a/pages/items/create.js b/pages/items/create.js
new file mode 100644
index 000000000..3eb6e6dcf
--- /dev/null
+++ b/pages/items/create.js
@@ -0,0 +1,170 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import Nav from "../../components/Nav";
+import Footer from "../../components/Footer";
+import styles from "../../styles/CreateItem.module.css";
+import { createProduct } from "../../api/api";
+
+export default function CreateItem() {
+  const router = useRouter();
+
+  // 기존의 상태 변수들
+  const [formData, setFormData] = useState({
+    name: "",
+    price: "",
+    description: "",
+    tags: [],
+    images: [], // 이미지 배열 추가
+  });
+
+  // 이미지 URL 입력을 위한 상태 변수 추가
+  const [imageUrl, setImageUrl] = useState("");
+
+  // 입력 필드 변경 핸들러
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+    console.log(`${name} 필드 입력값: ${value}`);
+  };
+
+  // 태그 입력 처리 함수
+  const handleTagChange = (e) => {
+    const tags = e.target.value.split(",").map((tag) => tag.trim());
+    setFormData((prev) => ({ ...prev, tags }));
+    console.log("태그 입력값:", tags);
+  };
+
+  // 이미지 URL 입력 처리 함수
+  const handleImageUrlChange = (e) => {
+    setImageUrl(e.target.value);
+    console.log("외부 이미지 URL 입력값:", e.target.value);
+  };
+
+  // 이미지 URL 추가 함수
+  const handleImageUrlAdd = () => {
+    if (imageUrl.trim() !== "") {
+      setFormData((prev) => ({
+        ...prev,
+        images: [...prev.images, imageUrl.trim()],
+      }));
+      console.log("추가된 이미지 URL:", imageUrl.trim());
+      setImageUrl("");
+    }
+  };
+
+  // 폼 제출 핸들러
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    // price를 숫자로 변환
+    const price = parseFloat(formData.price);
+
+    // 상품 데이터 생성
+    const productData = {
+      name: formData.name.trim(),
+      description: formData.description.trim(),
+      price,
+      tags: formData.tags,
+      images: formData.images, // 이미지 배열을 전송
+    };
+
+    console.log("전송할 데이터:", productData); // 실제 전송할 데이터 출력
+
+    try {
+      const response = await createProduct(productData);
+      console.log("상품 등록 성공:", response);
+      router.push("/items");
+    } catch (error) {
+      console.error(
+        "상품 등록 실패:",
+        error.response ? error.response.data : error.message
+      );
+      // 에러 시 백엔드에서 받은 에러 메시지 혹은 기본 에러 메시지 출력
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <Nav />
+      <main className={styles.main}>
+        <h1 className={styles.title}>상품 등록하기</h1>
+        <form onSubmit={handleSubmit} className={styles.form}>
+          {/* 상품명 입력 필드 */}
+          <div className={styles.formGroup}>
+            <label htmlFor="name">상품명</label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              value={formData.name}
+              onChange={handleChange}
+              required
+            />
+          </div>
+
+          {/* 판매가격 입력 필드 */}
+          <div className={styles.formGroup}>
+            <label htmlFor="price">판매가격</label>
+            <input
+              type="number"
+              id="price"
+              name="price"
+              value={formData.price}
+              onChange={handleChange}
+              required
+            />
+          </div>
+
+          {/* 상품 소개 입력 필드 */}
+          <div className={styles.formGroup}>
+            <label htmlFor="description">상품 소개</label>
+            <textarea
+              id="description"
+              name="description"
+              value={formData.description}
+              onChange={handleChange}
+              required
+            />
+          </div>
+
+          {/* 태그 입력 필드 */}
+          <div className={styles.formGroup}>
+            <label htmlFor="tags">태그</label>
+            <input
+              type="text"
+              id="tags"
+              name="tags"
+              value={formData.tags.join(", ")}
+              onChange={handleTagChange}
+              placeholder="쉼표로 구분하여 입력"
+            />
+          </div>
+
+          {/* 이미지 URL 입력 필드 추가 */}
+          <div className={styles.formGroup}>
+            <label htmlFor="imageUrl">외부 이미지 URL</label>
+            <div className={styles.imageUrlInput}>
+              <input
+                type="text"
+                id="imageUrl"
+                name="imageUrl"
+                value={imageUrl}
+                onChange={handleImageUrlChange}
+                placeholder="https://pbs.twimg.com/profile_images/1597309336350380033/ub7VkPLo_400x400.jpg "
+              />
+              <button type="button" onClick={handleImageUrlAdd}>
+                추가
+              </button>
+            </div>
+          </div>
+
+          {/* 등록 버튼 */}
+          <button type="submit" className={styles.submitButton}>
+            등록
+          </button>
+        </form>
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/pages/items/index.js b/pages/items/index.js
new file mode 100644
index 000000000..67359a4df
--- /dev/null
+++ b/pages/items/index.js
@@ -0,0 +1,161 @@
+// pages/items/index.js
+
+import React, { useState, useEffect } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import styles from "../../styles/Products.module.css";
+import Nav from "../../components/Nav";
+import Footer from "../../components/Footer";
+import { fetchProducts, fetchProductById } from "../../api/api";
+
+const ItemsPage = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const [sortOption, setSortOption] = useState("recent");
+  const router = useRouter();
+  const itemsPerPage = 10; // 한 페이지에 10개 상품 표시
+
+  const params = {
+    page: currentPage,
+    pageSize: itemsPerPage,
+    orderBy: sortOption,
+    keyword: searchKeyword,
+  };
+
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["products", params],
+    queryFn: () => fetchProducts(params),
+    keepPreviousData: true,
+    refetchInterval: 5000, // 5초마다 자동으로 데이터 갱신
+  });
+
+  const totalPages = data ? Math.ceil(data.totalCount / itemsPerPage) : 1;
+
+  if (error) return <div>에러 발생: {error.message}</div>;
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    setCurrentPage(1);
+  };
+
+  const renderPagination = () => {
+    const pageNumbers = [];
+    const maxPageButtons = 5;
+    let startPage =
+      Math.floor((currentPage - 1) / maxPageButtons) * maxPageButtons + 1;
+    let endPage = Math.min(startPage + maxPageButtons - 1, totalPages);
+
+    for (let i = startPage; i <= endPage; i++) {
+      pageNumbers.push(i);
+    }
+
+    return (
+      <div className={styles.pagination}>
+        {startPage > 1 && (
+          <button onClick={() => setCurrentPage(startPage - 1)}>&lt;</button>
+        )}
+        {pageNumbers.map((number) => (
+          <button
+            key={number}
+            onClick={() => setCurrentPage(number)}
+            className={number === currentPage ? styles.active : ""}
+          >
+            {number}
+          </button>
+        ))}
+        {endPage < totalPages && (
+          <button onClick={() => setCurrentPage(endPage + 1)}>&gt;</button>
+        )}
+      </div>
+    );
+  };
+
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    if (data && data.list) {
+      data.list.forEach((product) => {
+        queryClient.prefetchQuery(["product", product.id], () =>
+          fetchProductById(product.id)
+        );
+      });
+    }
+  }, [data, queryClient]);
+
+  return (
+    <div className={styles.pageContainer}>
+      <Nav />
+      <div className={styles.contentContainer}>
+        <h1 className={styles.title}>판매 중인 상품</h1>
+        <div className={styles.topBar}>
+          <form onSubmit={handleSearch} className={styles.searchForm}>
+            <input
+              type="text"
+              value={searchKeyword}
+              onChange={(e) => setSearchKeyword(e.target.value)}
+              placeholder="검색할 상품을 입력해주세요"
+              className={styles.searchInput}
+            />
+            <button type="submit" className={styles.searchButton}>
+              검색
+            </button>
+          </form>
+          <button
+            onClick={() => router.push("/items/create")}
+            className={styles.createButton}
+          >
+            상품 등록하기
+          </button>
+          <select
+            value={sortOption}
+            onChange={(e) => setSortOption(e.target.value)}
+            className={styles.sortSelect}
+          >
+            <option value="recent">최신순</option>
+            <option value="favorite">인기순</option>
+            <option value="priceAsc">가격낮은순</option>
+            <option value="priceDesc">가격높은순</option>
+          </select>
+        </div>
+        {isLoading ? (
+          <p>로딩 중...</p>
+        ) : (
+          <div className={styles.productGrid}>
+            {data.list.map((item) => (
+              <Link
+                href={`/items/${item.id}`}
+                key={item.id}
+                className={styles.productItem}
+              >
+                <div className={styles.imageContainer}>
+                  <Image
+                    src={item.images[0]}
+                    alt={item.name}
+                    width={220}
+                    height={220}
+                    objectFit="cover"
+                    unoptimized
+                    onError={(e) => {
+                      e.target.onerror = null; // 무한 루프 방지
+                    }}
+                  />
+                </div>
+                <h2 className={styles.productName}>{item.name}</h2>
+                <p className={styles.productPrice}>
+                  {item.price.toLocaleString()}원
+                </p>
+                <p className={styles.favoriteCount}>♥ {item.favoriteCount}</p>
+              </Link>
+            ))}
+          </div>
+        )}
+        {!isLoading && renderPagination()}
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default ItemsPage;
diff --git a/pages/login.js b/pages/login.js
new file mode 100644
index 000000000..40e88f082
--- /dev/null
+++ b/pages/login.js
@@ -0,0 +1,186 @@
+// Login.js
+
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import styles from "../styles/login.module.css";
+import Image from "next/image";
+import Link from "next/link";
+import { logIn } from "../api/api"; // api.js에서 logIn 함수 import
+import { useRouter } from "next/router";
+import Modal from "../components/Modal";
+import { useMutation } from "@tanstack/react-query"; // useMutation import
+
+const Login = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+    setError,
+  } = useForm({ mode: "onChange" });
+
+  const [showPassword, setShowPassword] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalMessage, setModalMessage] = useState("");
+  const router = useRouter();
+
+  // 로그인 페이지 접근 시 토큰 여부를 체크하고 리다이렉트
+  // useEffect(() => {
+  //   const token = localStorage.getItem("accessToken");
+  //   if (token) {
+  //     router.push("/folder");
+  //   }
+  // }, []);
+
+  // useMutation 훅 사용
+  const mutation = useMutation({
+    mutationFn: logIn,
+    onSuccess: (data) => {
+      localStorage.setItem("accessToken", data.accessToken);
+      router.push("/items");
+    },
+    onError: (error) => {
+      console.error("로그인 실패:", error);
+      setError("email", { type: "manual", message: "이메일을 확인해 주세요." });
+      setError("password", {
+        type: "manual",
+        message: "비밀번호를 확인해 주세요.",
+      });
+    },
+  });
+
+  const onSubmit = (data) => {
+    mutation.mutate(data); // useMutation을 통해 로그인 요청 실행
+  };
+
+  const togglePasswordVisibility = () => setShowPassword(!showPassword);
+
+  const handleKeyPress = (event) => {
+    if (event.key === "Enter" && isValid) {
+      handleSubmit(onSubmit)();
+    }
+  };
+
+  return (
+    <div className="page-container">
+      <div className="content-container">
+        <div className={styles.container}>
+          <div className={styles.logoContainer}>
+            <h1 className={styles.title}>
+              <Image src="/logo.png" alt="판다마켓" width={396} height={132} />
+            </h1>
+          </div>
+          <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+            <div className={styles.inputContainer}>
+              <label className={styles.label}>이메일</label>
+              <input
+                {...register("email", { required: "이메일은 필수입니다." })}
+                className={`${styles.input} ${
+                  errors.email ? styles.error : ""
+                }`}
+                placeholder="이메일을 입력해주세요."
+                onKeyPress={handleKeyPress}
+              />
+              {errors.email && (
+                <span className={styles.errorMessage}>
+                  {errors.email.message}
+                </span>
+              )}
+            </div>
+
+            <div className={styles.inputContainer}>
+              <label className={styles.label}>비밀번호</label>
+              <div
+                className={`${styles.passwordContainer} ${
+                  errors.password ? styles.error : ""
+                }`}
+              >
+                <input
+                  type={showPassword ? "text" : "password"}
+                  {...register("password", {
+                    required: "비밀번호는 필수입니다.",
+                  })}
+                  className={styles.input}
+                  placeholder="비밀번호를 입력해주세요."
+                  onKeyPress={handleKeyPress}
+                />
+                <button
+                  type="button"
+                  onClick={togglePasswordVisibility}
+                  className={styles.passwordToggle}
+                >
+                  {showPassword ? (
+                    <Image
+                      src="/eye.png"
+                      alt="Show password"
+                      width={20.39}
+                      height={14}
+                    />
+                  ) : (
+                    <Image
+                      src="/eye2.png"
+                      alt="Hide password"
+                      width={20.47}
+                      height={18.07}
+                    />
+                  )}
+                </button>
+              </div>
+              {errors.password && (
+                <span className={styles.errorMessage}>
+                  {errors.password.message}
+                </span>
+              )}
+            </div>
+
+            <button
+              type="submit"
+              className={styles.submitButton}
+              disabled={!isValid || mutation.isLoading}
+            >
+              {mutation.isLoading ? "로그인 중..." : "로그인"}
+            </button>
+          </form>
+          <div className={styles.socialLoginContainer}>
+            <span className={styles.loginText}>간편 로그인하기</span>
+            <div className={styles.loginButtons}>
+              <Link
+                href="https://www.google.com"
+                className={styles.loginButton}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Image
+                  src="/google-logo.png"
+                  alt="Google 로그인"
+                  width={42}
+                  height={42}
+                />
+              </Link>
+              <Link
+                href="https://www.kakaocorp.com/page"
+                className={styles.loginButton}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Image
+                  src="/kakao-logo.png"
+                  alt="Kakao 로그인"
+                  width={42}
+                  height={42}
+                />
+              </Link>
+            </div>
+          </div>
+          <Link href="/signup" className={styles.signupLink}>
+            판다마켓이 처음이신가요? <span>회원가입</span>
+          </Link>
+          <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+            <p>{modalMessage}</p>
+          </Modal>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;
diff --git a/pages/market.js b/pages/market.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/pages/registArticle.js b/pages/registArticle.js
index 0c576c6aa..a9ef79d4a 100644
--- a/pages/registArticle.js
+++ b/pages/registArticle.js
@@ -1,6 +1,6 @@
 import styles from "@/styles/registPage.module.css";
 import { useState, useEffect } from "react";
-import axios from "@/pages/api/axios";
+import axios from "@/lib/axios.js";
 import { useRouter } from "next/router";
 
 export default function RegisterArticle() {
diff --git a/pages/signup.js b/pages/signup.js
new file mode 100644
index 000000000..fbad418d4
--- /dev/null
+++ b/pages/signup.js
@@ -0,0 +1,262 @@
+// Signup.js
+
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import styles from "../styles/signup.module.css";
+import Image from "next/image";
+import Link from "next/link";
+import { signUp } from "../api/api"; // api.js에서 signUp 함수 import
+import { useRouter } from "next/router";
+import { useMutation } from "@tanstack/react-query"; // useMutation import
+import SignupCompleteModal from "../components/SignupCompleteModal"; // 모달 컴포넌트 import
+
+const Signup = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+    watch,
+  } = useForm({ mode: "onChange" });
+
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const router = useRouter();
+  const [isModalOpen, setIsModalOpen] = useState(false); // 모달 상태 추가
+  const [modalMessage, setModalMessage] = useState("");
+
+  const password = watch("password");
+
+  // useMutation 훅 사용
+  const mutation = useMutation({
+    mutationFn: signUp,
+    onSuccess: (data) => {
+      localStorage.setItem("accessToken", data.accessToken);
+      setModalMessage("가입 완료되었습니다.");
+      setIsModalOpen(true); // 회원가입 성공 시 모달 열기
+    },
+    onError: (error) => {
+      console.error("회원가입 실패:", error);
+      setModalMessage("회원가입에 실패했습니다. 입력한 정보를 확인해 주세요.");
+      setIsModalOpen(true);
+    },
+  });
+
+  const onSubmit = (data) => {
+    const signUpData = {
+      email: data.email,
+      nickname: data.nickname,
+      password: data.password,
+      passwordConfirmation: data.confirmPassword,
+    };
+
+    mutation.mutate(signUpData); // useMutation을 통해 회원가입 요청 실행
+  };
+
+  const togglePasswordVisibility = () => setShowPassword(!showPassword);
+  const toggleConfirmPasswordVisibility = () =>
+    setShowConfirmPassword(!showConfirmPassword);
+
+  const handleKeyPress = (event) => {
+    if (event.key === "Enter" && isValid) {
+      handleSubmit(onSubmit)();
+    }
+  };
+
+  const handleModalClose = () => {
+    setIsModalOpen(false);
+    router.push("/items"); // 확인 버튼 클릭 시 /items 페이지로 이동
+  };
+
+  return (
+    <div className="page-container">
+      <div className="content-container">
+        <div className={styles.container}>
+          <div className={styles.logoContainer}>
+            <h1 className={styles.title}>
+              <Image src="/logo.png" alt="판다마켓" width={396} height={132} />
+            </h1>
+          </div>
+          <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+            <div className={styles.inputContainer}>
+              <label className={styles.label}>이메일</label>
+              <input
+                {...register("email", { required: "이메일은 필수입니다." })}
+                className={`${styles.input} ${
+                  errors.email ? styles.error : ""
+                }`}
+                placeholder="이메일을 입력해주세요."
+                onKeyPress={handleKeyPress}
+              />
+              {errors.email && (
+                <span className={styles.errorMessage}>
+                  {errors.email.message}
+                </span>
+              )}
+            </div>
+
+            <div className={styles.inputContainer}>
+              <label className={styles.label}>닉네임</label>
+              <input
+                {...register("nickname", { required: "닉네임은 필수입니다." })}
+                className={`${styles.input} ${
+                  errors.nickname ? styles.error : ""
+                }`}
+                placeholder="닉네임을 입력해주세요."
+                onKeyPress={handleKeyPress}
+              />
+              {errors.nickname && (
+                <span className={styles.errorMessage}>
+                  {errors.nickname.message}
+                </span>
+              )}
+            </div>
+
+            <div className={styles.inputContainer}>
+              <label className={styles.label}>비밀번호</label>
+              <div
+                className={`${styles.passwordContainer} ${
+                  errors.password ? styles.error : ""
+                }`}
+              >
+                <input
+                  type={showPassword ? "text" : "password"}
+                  {...register("password", {
+                    required: "비밀번호는 필수입니다.",
+                    minLength: {
+                      value: 8,
+                      message: "비밀번호는 8자 이상이어야 합니다.",
+                    },
+                  })}
+                  className={styles.input}
+                  placeholder="비밀번호를 입력해주세요."
+                  onKeyPress={handleKeyPress}
+                />
+                <button
+                  type="button"
+                  onClick={togglePasswordVisibility}
+                  className={styles.passwordToggle}
+                >
+                  {showPassword ? (
+                    <Image
+                      src="/eye.png"
+                      alt="Show password"
+                      width={20.39}
+                      height={14}
+                    />
+                  ) : (
+                    <Image
+                      src="/eye2.png"
+                      alt="Hide password"
+                      width={20.47}
+                      height={18.07}
+                    />
+                  )}
+                </button>
+              </div>
+              {errors.password && (
+                <span className={styles.errorMessage}>
+                  {errors.password.message}
+                </span>
+              )}
+            </div>
+
+            <div className={styles.inputContainer}>
+              <label className={styles.label}>비밀번호 확인</label>
+              <div
+                className={`${styles.passwordContainer} ${
+                  errors.confirmPassword ? styles.error : ""
+                }`}
+              >
+                <input
+                  type={showConfirmPassword ? "text" : "password"}
+                  {...register("confirmPassword", {
+                    required: "비밀번호 확인은 필수입니다.",
+                    validate: (value) =>
+                      value === password || "비밀번호가 일치하지 않아요.",
+                  })}
+                  className={styles.input}
+                  placeholder="비밀번호를 다시 한 번 입력해주세요."
+                  onKeyPress={handleKeyPress}
+                />
+                <button
+                  type="button"
+                  onClick={toggleConfirmPasswordVisibility}
+                  className={styles.passwordToggle}
+                >
+                  {showPassword ? (
+                    <Image
+                      src="/eye.png"
+                      alt="Show password"
+                      width={20.39}
+                      height={14}
+                    />
+                  ) : (
+                    <Image
+                      src="/eye2.png"
+                      alt="Hide password"
+                      width={20.47}
+                      height={18.07}
+                    />
+                  )}
+                </button>
+              </div>
+              {errors.confirmPassword && (
+                <span className={styles.errorMessage}>
+                  {errors.confirmPassword.message}
+                </span>
+              )}
+            </div>
+
+            <button
+              type="submit"
+              className={styles.submitButton}
+              disabled={!isValid || mutation.isLoading}
+            >
+              {mutation.isLoading ? "회원가입 중..." : "회원가입"}
+            </button>
+          </form>
+          <div className={styles.socialLoginContainer}>
+            <span className={styles.loginText}>간편 로그인하기</span>
+            <div className={styles.loginButtons}>
+              <Link
+                href="https://www.google.com"
+                className={styles.loginButton}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Image
+                  src="/google-logo.png"
+                  alt="Google 로그인"
+                  width={42}
+                  height={42}
+                />
+              </Link>
+              <Link
+                href="https://www.kakaocorp.com/page"
+                className={styles.loginButton}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Image
+                  src="/kakao-logo.png"
+                  alt="Kakao 로그인"
+                  width={42}
+                  height={42}
+                />
+              </Link>
+            </div>
+          </div>
+          <Link href="/login" className={styles.loginLink}>
+            이미 회원이신가요? <span>로그인</span>
+          </Link>
+          <SignupCompleteModal
+            isOpen={isModalOpen}
+            onClose={handleModalClose}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Signup;
diff --git a/public/Img_inquiry_empty.png b/public/Img_inquiry_empty.png
new file mode 100644
index 000000000..b16ae8711
Binary files /dev/null and b/public/Img_inquiry_empty.png differ
diff --git a/public/btn-heart.png b/public/btn-heart.png
deleted file mode 100644
index 4cd5eea3f..000000000
Binary files a/public/btn-heart.png and /dev/null differ
diff --git a/public/eye.png b/public/eye.png
new file mode 100644
index 000000000..9920a1ef7
Binary files /dev/null and b/public/eye.png differ
diff --git a/public/eye2.png b/public/eye2.png
new file mode 100644
index 000000000..7bd786074
Binary files /dev/null and b/public/eye2.png differ
diff --git a/public/heart_filled.svg b/public/heart_filled.svg
new file mode 100644
index 000000000..e69de29bb
diff --git a/public/ic_check.png b/public/ic_check.png
new file mode 100644
index 000000000..b8aeb78d1
Binary files /dev/null and b/public/ic_check.png differ
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 000000000..ae95855c9
Binary files /dev/null and b/public/logo.png differ
diff --git a/public/placeholder-image.jpg b/public/placeholder-image.jpg
new file mode 100644
index 000000000..b74dec821
Binary files /dev/null and b/public/placeholder-image.jpg differ
diff --git a/public/product_reply.svg b/public/product_reply.svg
new file mode 100644
index 000000000..39ef7a07a
--- /dev/null
+++ b/public/product_reply.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="24" viewBox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.05406 14.2232C4.03495 14.2063 4.01689 14.1904 3.99984 14.1753V14.0686L3.76552 13.8343C2.30711 12.3759 1.4665 10.4428 1.4665 8.4V8.14577C1.59299 4.18597 4.96682 0.933333 8.93317 0.933333C9.57088 0.933333 10.3743 1.15125 11.1539 1.57104C11.9043 1.9751 12.5753 2.53553 13.0226 3.17784C13.4574 4.15492 14.8557 4.14051 15.2621 3.13462C15.6412 2.45729 16.2982 1.87138 17.0562 1.44869C17.8352 1.01422 18.6349 0.8 19.1998 0.8C23.2833 0.8 26.5398 4.03647 26.6665 8.14539V8.4C26.6665 10.5893 25.8175 12.5041 24.3926 13.8103L24.1332 14.0481V14.1452C24.108 14.1662 24.0817 14.1883 24.0545 14.2113C23.8471 14.3862 23.5653 14.629 23.2291 14.9213C22.5559 15.5066 21.654 16.3 20.6709 17.1665C20.3559 17.4441 20.0326 17.7292 19.7056 18.0176C17.9914 19.5292 16.1782 21.1282 14.9496 22.1894C14.4478 22.6035 13.6852 22.6035 13.1834 22.1894C11.7183 20.924 9.39008 18.8951 7.40962 17.1643C6.41822 16.2979 5.51451 15.5066 4.85049 14.9238C4.51841 14.6323 4.24669 14.3933 4.05406 14.2232Z" fill="#FF68CC" stroke="#FF68CC" stroke-width="1.6"/>
+</svg>
\ No newline at end of file
diff --git a/styles/CreateItem.module.css b/styles/CreateItem.module.css
new file mode 100644
index 000000000..76812bf58
--- /dev/null
+++ b/styles/CreateItem.module.css
@@ -0,0 +1,63 @@
+/* styles/registItem.module.css */
+
+.container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* 가로 중앙 정렬 추가 */
+  justify-content: center; /* 세로 중앙 정렬 추가 */
+}
+
+.main {
+  flex: 1;
+  padding: 2rem;
+  width: 100%; /* 전체 너비 사용 */
+  max-width: 1200px; /* 최대 너비를 1200px로 변경 */
+  margin: 0 auto; /* 중앙 정렬 */
+}
+
+.title {
+  font-size: 2rem;
+  margin-bottom: 2rem;
+  text-align: left; /* 왼쪽 정렬로 변경 */
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.formGroup {
+  display: flex;
+  flex-direction: column;
+}
+
+.formGroup label {
+  margin-bottom: 0.5rem;
+}
+
+.formGroup input,
+.formGroup textarea {
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 100%; /* 전체 너비 사용으로 변경 */
+  max-width: 1200px; /* 최대 너비를 1200px로 변경 */
+  margin: 0 auto; /* 가로 중앙 정렬 추가 */
+  background-color: #f3f4f6;
+}
+
+.submitButton {
+  background-color: #0070f3;
+  color: white;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.submitButton:hover {
+  background-color: #0051bb;
+}
diff --git a/styles/ItemDetail.module.css b/styles/ItemDetail.module.css
new file mode 100644
index 000000000..37b2981b1
--- /dev/null
+++ b/styles/ItemDetail.module.css
@@ -0,0 +1,220 @@
+/* ItemDetail.module.css */
+
+.container {
+  max-width: 1200px;
+  margin: 70px auto 0;
+  padding: 20px;
+}
+
+.contentWrapper {
+  display: flex;
+  gap: 40px;
+}
+
+.imageGallery {
+  flex: 1;
+}
+
+.mainImage {
+  width: 486px;
+  height: 486px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.itemInfo {
+  flex: 1;
+  position: relative; /* 추가 */
+}
+
+/* 새로 추가된 스타일 */
+.itemHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.itemName {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  padding-right: 100px; /* 추가: ProductOptions를 위한 공간 확보 */
+}
+
+.productOptions {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.itemPrice {
+  font-size: 28px;
+  font-weight: bold;
+  color: #000;
+  margin-bottom: 20px;
+}
+
+.favoriteButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  margin-bottom: 20px;
+}
+
+.favoriteIcon {
+  margin-right: 5px;
+}
+
+.sectionTitle {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  color: #333;
+}
+
+.itemDescription {
+  margin: 10px 0 20px;
+  line-height: 1.6;
+}
+
+.itemTags {
+  margin-bottom: 20px;
+}
+
+.tag {
+  background-color: #f0f0f0;
+  padding: 5px 10px;
+  margin-right: 5px;
+  border-radius: 20px;
+  font-size: 14px;
+}
+
+.commentSection {
+  margin-top: 40px;
+}
+
+.commentForm {
+  width: 1200px;
+  height: 104px;
+  display: flex;
+  margin: 20px 0; /* 위아래 여백 추가 */
+}
+
+.commentInput {
+  flex-grow: 1;
+  height: 40px;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: #f3f4f6;
+}
+
+.commentSubmit {
+  margin-left: 10px;
+  padding: 0 20px;
+  height: 40px;
+  background-color: #9ca3af;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.commentSubmit:hover {
+  background-color: #3692ff;
+}
+
+.comment {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  border-bottom: 1px solid #eee;
+  padding: 10px 0;
+  position: relative;
+}
+
+.commentContent {
+  flex-grow: 1;
+  padding-right: 30px; /* CommentOptions 버튼을 위한 공간 */
+}
+
+.commentOptions {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+/* CommentOptions 컴포넌트 내부의 버튼 스타일 */
+.commentOptions {
+  display: flex;
+  justify-content: flex-end; /* 오른쪽 끝으로 정렬 */
+}
+
+.commentOptions button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 5px;
+}
+
+.commentActions {
+  position: relative;
+}
+
+.kebabButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.actionMenu {
+  position: absolute;
+  right: 0;
+  background-color: white;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  display: none;
+}
+
+.actionMenu.active {
+  display: block;
+}
+
+.actionMenuItem {
+  padding: 10px;
+  cursor: pointer;
+}
+
+.actionMenuItem:hover {
+  background-color: #f3f4f6;
+}
+
+.emptyComments {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.backToListButton {
+  display: block;
+  margin: 20px auto;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+@media (max-width: 768px) {
+  .contentWrapper {
+    flex-direction: column;
+  }
+
+  .imageGallery,
+  .itemInfo {
+    width: 100%;
+  }
+}
diff --git a/styles/Products.module.css b/styles/Products.module.css
new file mode 100644
index 000000000..055f1812d
--- /dev/null
+++ b/styles/Products.module.css
@@ -0,0 +1,130 @@
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.title {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+.topBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.searchForm {
+  display: flex;
+  flex-grow: 1;
+  margin-right: 20px;
+}
+
+.searchInput {
+  flex-grow: 1;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px 0 0 4px;
+}
+
+.searchButton {
+  padding: 10px 20px;
+  background-color: #2196f3;
+  color: white;
+  border: none;
+  border-radius: 0 4px 4px 0;
+  cursor: pointer;
+}
+
+.createButton {
+  padding: 10px 20px;
+  background-color: #2196f3;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.sortSelect {
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.productGrid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr); /* 5개 열로 고정 */
+  gap: 20px;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.productItem {
+  text-decoration: none;
+  color: inherit;
+  display: flex;
+  flex-direction: column; /* 세로 방향으로 정렬 */
+  align-items: center; /* 중앙 정렬 */
+}
+
+.imageContainer {
+  position: relative;
+  width: 100%;
+  overflow: hidden; /* 이미지가 컨테이너를 넘지 않도록 설정 */
+}
+
+.productName {
+  font-size: 16px;
+  margin-bottom: 5px; /* 세로 간격 5px 추가 */
+}
+
+.productPrice {
+  font-weight: bold;
+  margin-bottom: 5px; /* 세로 간격 5px 추가 */
+}
+
+.favoriteCount {
+  color: #ff4081;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.pagination button {
+  margin: 0 5px;
+  padding: 5px 10px;
+  border: 1px solid #ddd;
+  background-color: white;
+  cursor: pointer;
+}
+
+.pagination button.active {
+  background-color: #2196f3;
+  color: white;
+}
+
+.pageContainer {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.contentContainer {
+  flex: 1;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+/* 페이지네이션이 3페이지 이상일 때 이미지 크기 조정 */
+@media (max-width: 1199px) {
+  .productGrid {
+    grid-template-columns: repeat(3, 1fr); /* 3개 열로 변경 */
+  }
+}
diff --git a/styles/global.css b/styles/global.css
index 11d7d5e66..52778472c 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -4,6 +4,12 @@
   --font-family: Pretendard;
   --brand-blue: #3692ff;
   --main-white: #ffffff;
+  --desktop-width: 1920px;
+  --desktop-height: 1080px;
+  --tablet-width: 744px;
+  --tablet-height: 1133px;
+  --mobile-width: 375px;
+  --mobile-height: 812px;
 }
 
 * {
@@ -26,3 +32,57 @@ html {
   overflow-x: hidden;
   width: 100%;
 }
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+.page-container {
+  position: relative;
+  width: 1200px; /* Fixed */
+  height: 827px; /* Fixed */
+  margin: 94px auto 0; /* Top: 94px, Center horizontally */
+  background-color: #f5f5f5;
+}
+
+.content-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  max-width: var(--desktop-width);
+  height: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* PC 레이아웃 (1200px 상) */
+@media (min-width: 1200px) {
+  .content-container {
+    max-width: 1200px;
+  }
+}
+
+/* 태블릿 레이아웃 (744px 이상 ~ 1199px 이하) */
+@media (min-width: 744px) and (max-width: 1199px) {
+  .page-container {
+    width: 100%;
+    height: 100vh;
+  }
+
+  .content-container {
+    width: 100%;
+    max-width: 744px;
+  }
+}
+
+/* 모바일 레이아웃 (375px 이상 ~ 743px 이하) */
+@media (min-width: 375px) and (max-width: 743px) {
+  .content-container {
+    width: 100%;
+    max-width: 375px;
+  }
+}
diff --git a/styles/login.module.css b/styles/login.module.css
new file mode 100644
index 000000000..7b5622633
--- /dev/null
+++ b/styles/login.module.css
@@ -0,0 +1,188 @@
+.container {
+  width: 100%;
+  max-width: 640px;
+  padding: 40px;
+  background-color: var(--main-white);
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.logoContainer {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 30px;
+}
+
+.title {
+  margin: 0;
+  line-height: 0;
+  color: #4a90e2;
+}
+
+.form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.inputContainer {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 15px;
+}
+
+.label {
+  font-size: 14px;
+  font-weight: 700;
+  margin-bottom: 16px;
+  color: #333;
+}
+
+.input {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+.submitButton {
+  padding: 12px;
+  background-color: var(--brand-blue);
+  color: white;
+  border: none;
+  border-radius: 25px;
+  cursor: pointer;
+  font-size: 18px;
+  margin-top: 10px;
+  transition: background-color 0.3s ease;
+}
+
+.submitButton:disabled {
+  background-color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.socialLoginContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 10px 15px;
+  background-color: #f0f0f0;
+  border-radius: 5px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.loginText {
+  font-size: 14px;
+  color: #333;
+}
+
+.loginButtons {
+  display: flex;
+  gap: 10px;
+}
+
+.loginButton {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  background-color: white;
+  padding: 0;
+}
+
+.loginButton:last-child {
+  background-color: #fee500;
+}
+
+.loginButton img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 80%;
+  height: 80%;
+  transform: translate(-50%, -50%);
+  object-fit: contain;
+}
+
+.signupLink {
+  display: block;
+  text-align: center;
+  margin-top: 20px;
+  color: #000;
+  text-decoration: none;
+}
+
+.signupLink span {
+  color: var(--brand-blue);
+  text-decoration: underline; /* 링크에 밑줄 추가 */
+}
+
+.passwordContainer {
+  position: relative;
+  width: 100%;
+}
+
+.passwordContainer .input {
+  padding-right: 40px;
+}
+
+.passwordToggle {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 20px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.input.error,
+.passwordContainer.error .input {
+  border-color: #ff0000;
+}
+
+.errorMessage {
+  color: #ff0000;
+  font-size: 14px;
+  margin-top: 5px;
+}
+
+/* 반응형 스타일 */
+@media (min-width: 1200px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 744px) and (max-width: 1199px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 375px) and (max-width: 743px) {
+  .container {
+    max-width: 100%;
+    padding: 20px;
+  }
+}
+
+.modalText {
+  font-size: 18px;
+  color: #333;
+}
diff --git a/styles/signup.module.css b/styles/signup.module.css
new file mode 100644
index 000000000..bb413bc71
--- /dev/null
+++ b/styles/signup.module.css
@@ -0,0 +1,202 @@
+.container {
+  width: 100%;
+  max-width: 640px;
+  padding: 40px;
+  background-color: var(--main-white);
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.logoContainer {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 30px;
+}
+
+.logoContainer img {
+  margin-right: 10px; /* 로고와 텍스트 이미지 사이의 간격 */
+}
+
+.title {
+  margin: 0;
+  line-height: 0; /* 이미지 아래 불필요한 공간 제거 */
+  color: #4a90e2;
+}
+
+.form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.inputContainer {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 15px; /* 각 입력 필드 컨테이너 사이의 간격 */
+}
+
+.label {
+  font-size: 14px;
+  font-weight: 700; /* 볼드체로 변경 */
+  margin-bottom: 16px; /* 라벨과 입력 필드 사이의 간격을 16px로 설정 */
+  color: #333;
+}
+
+.input {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+.submitButton {
+  padding: 12px;
+  background-color: var(--brand-blue);
+  color: white;
+  border: none;
+  border-radius: 25px;
+  cursor: pointer;
+  font-size: 18px;
+  margin-top: 10px;
+  transition: background-color 0.3s ease;
+}
+
+.submitButton:disabled {
+  background-color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.socialLoginContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 10px 15px;
+  background-color: #f0f0f0;
+  border-radius: 5px;
+  margin-top: 20px;
+  margin-bottom: 20px; /* 간편 로그인하기와 로그인 링크 사이의 간격 추가 */
+}
+
+.loginText {
+  font-size: 14px;
+  color: #333;
+}
+
+.loginButtons {
+  display: flex;
+  gap: 10px;
+}
+
+.loginButton {
+  position: relative; /* Image 컴포넌트가 절대 위치로 버튼을 채우도록 설정 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  background-color: white;
+  padding: 0;
+}
+
+.loginButton:last-child {
+  background-color: #fee500;
+}
+
+.loginButton img {
+  position: absolute; /* 절대 위치로 설정 */
+  top: 50%;
+  left: 50%;
+  width: 80%; /* 버튼 크기에 맞게 이미지 크기 조정 (필요에 따라 조정 가능) */
+  height: 80%;
+  transform: translate(-50%, -50%); /* 중앙에 정렬 */
+  object-fit: contain;
+}
+
+.loginLink {
+  display: block; /* 블록 레벨 요소로 변경 */
+  text-align: center; /* 텍스트 중앙 정렬 */
+  margin-top: 20px; /* 위쪽 여백 추가 */
+  text-decoration: none; /* 밑줄 제거 */
+  color: #000;
+}
+
+.loginLink span {
+  color: var(--brand-blue); /* "로그인" 텍스트 색상 변경 */
+  text-decoration: underline;
+}
+
+/* PC (1200px 이상) */
+@media (min-width: 1200px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+/* 태블릿 (744px 이상 ~ 1199px 이하) */
+@media (min-width: 744px) and (max-width: 1199px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+/* 모바일 (375px 이상 ~ 743px 이하) */
+@media (min-width: 375px) and (max-width: 743px) {
+  .container {
+    max-width: 100%;
+    padding: 20px;
+  }
+}
+
+.passwordContainer {
+  position: relative;
+  width: 100%;
+}
+
+.passwordContainer .input {
+  padding-right: 40px; /* 눈 아이콘을 위한 공간 확보 */
+}
+
+.passwordToggle {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 20px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.input.error {
+  border-color: #ff0000;
+}
+
+.passwordContainer.error .input {
+  border-color: #ff0000;
+}
+
+.errorMessage {
+  color: #ff0000;
+  font-size: 14px;
+  margin-top: 5px;
+}
+
+.input.error,
+.passwordContainer.error .input {
+  border-color: #ff0000;
+}
+
+.modalText {
+  font-size: 18px;
+  color: #333;
+}