diff --git a/components/AddItemForm.tsx b/components/AddItemForm.tsx
new file mode 100644
index 000000000..2b92c5da1
--- /dev/null
+++ b/components/AddItemForm.tsx
@@ -0,0 +1,188 @@
+import { useState } from "react";
+import ImgInput from "@/components/ImageInput";
+import resetImg from "@/public/svgs/ic_X.svg";
+import { useRouter } from "next/router";
+import { AddItemFormProps } from "@/types/commontypes";
+import Image from "next/image";
+import styles from "@/styles/additem.module.css";
+
+const INITIAL_VALUE = {
+  name: "",
+  favoriteCount: 0,
+  description: "",
+  price: 0,
+  images: null,
+  tags: [],
+};
+
+export default function AddItemForm({
+  initialValues = INITIAL_VALUE,
+  initialPreview,
+  onSubmit,
+  onSubmitSuccess,
+}: AddItemFormProps) {
+  const router = useRouter();
+  const [values, setValues] = useState(initialValues);
+  const [submittingError, setSubmittingError] = useState<Error | null>(null);
+  const [tagInput, setTagInput] = useState("");
+
+  // 유효성 검사
+  const isValidForm =
+    values.name?.trim() !== "" &&
+    values.description?.trim() !== "" &&
+    values.price > 0 &&
+    values.tags.length > 0;
+
+  const handleChange = (name: string, value: any) => {
+    setValues((initialValues) => ({
+      ...initialValues,
+      [name]: value,
+    }));
+  };
+
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    handleChange(name, value);
+  };
+
+  const handleFileChange = (name: string, file: File | null) => {
+    handleChange(name, file);
+  };
+
+  const handleTagInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setTagInput(e.target.value);
+  };
+
+  const handleTagAdd = () => {
+    if (tagInput.trim() && !values.tags.includes(tagInput.trim())) {
+      handleChange("tags", [...values.tags, tagInput.trim()]);
+      setTagInput("");
+    }
+  };
+
+  const handleTagKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleTagAdd();
+    }
+  };
+
+  const handleTagRemove = (tagToRemove: string) => {
+    handleChange(
+      "tags",
+      values.tags.filter((tag) => tag !== tagToRemove)
+    );
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const formData = new FormData();
+    formData.append("name", values.name);
+    formData.append("favorite", values.favoriteCount.toString());
+    formData.append("description", values.description);
+    formData.append("price", values.price.toString());
+    if (values.images) {
+      values.images.forEach((image, index) => {
+        formData.append(`images[${index}]`, image);
+      });
+    }
+    formData.append("tags", JSON.stringify(values.tags));
+
+    const result = await onSubmit(formData);
+    if (!result) return;
+
+    const { review } = result;
+    setValues(INITIAL_VALUE);
+    onSubmitSuccess(review);
+
+    router.push("/items");
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className={styles.add_item_form_total_container}
+    >
+      <div className={styles.add_item_form_header}>
+        <div className={styles.add_item_form_title}>상품 등록하기</div>
+        <button
+          type="submit"
+          className={styles.add_item_submit_button}
+          disabled={!isValidForm || !!submittingError}
+        >
+          등록
+        </button>
+      </div>
+      <div className={styles.add_item_form_container}>
+        <div className={styles.add_item_img_container}>
+          <div className={styles.add_item_img_title}>상품 이미지</div>
+          <ImgInput
+            className={styles.add_item_img_preview}
+            name="imgFile"
+            value={values.images ? values.images[0] : null}
+            initialPreview={initialPreview}
+            onChange={handleFileChange}
+          />
+        </div>
+        <div className={styles.add_item_name_container}>
+          <div className={styles.add_item_name_title}>상품명</div>
+          <input
+            className={styles.add_item_name_input}
+            name="name"
+            value={values.name}
+            onChange={handleInputChange}
+            placeholder="상품명을 입력해주세요"
+          />
+        </div>
+        <div className={styles.add_item_content_container}>
+          <div className={styles.add_item_content_title}>상품 소개</div>
+          <textarea
+            className={styles.add_item_content_textarea}
+            name="description"
+            value={values.description}
+            onChange={handleInputChange}
+            placeholder="상품 소개를 입력해주세요"
+          />
+        </div>
+        <div className={styles.add_item_price_container}>
+          <div className={styles.add_item_price_title}>판매가격</div>
+          <input
+            className={styles.add_item_price_input}
+            type="number"
+            name="price"
+            value={values.price}
+            onChange={handleInputChange}
+            placeholder="판매 가격을 입력해주세요"
+          />
+        </div>
+        <div className={styles.add_item_tags_container}>
+          <div className={styles.add_item_tags_title}>태그</div>
+          <input
+            className={styles.add_item_tag_input}
+            type="text"
+            value={tagInput}
+            onChange={handleTagInputChange}
+            onKeyDown={handleTagKeyDown}
+            placeholder="태그를 입력해주세요"
+          />
+          <div className={styles.add_item_tags_list}>
+            {values.tags.map((tag) => (
+              <div key={tag} className={styles.add_item_tag}>
+                #{tag}
+                <button
+                  type="button"
+                  className={styles.add_item_tag_remove_button}
+                  onClick={() => handleTagRemove(tag)}
+                >
+                  <Image src={resetImg} alt="제거" />
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/components/AllArticles.tsx b/components/AllArticles.tsx
index 945d7d4ad..9d503cfd5 100644
--- a/components/AllArticles.tsx
+++ b/components/AllArticles.tsx
@@ -8,6 +8,7 @@ import heart from "@/public/svgs/ic_heart (1).svg";
 import defaultImage from "@/public/pngs/noImage.png";
 import searchIcon from "@/public/svgs/ic_search.svg";
 import { getArticles } from "@/lib/api";
+import debounce from "@/lib/utils/debounce";
 
 export default function AllArticles() {
   const [articles, setArticles] = useState<Article[]>([]);
@@ -25,9 +26,9 @@ export default function AllArticles() {
 
       const data = await getArticles({
         orderBy: sortOrder,
-        page: page,
+        page,
         pageSize: 10,
-        keyword: keyword,
+        keyword,
       });
 
       if (page === 1) {
@@ -57,24 +58,22 @@ export default function AllArticles() {
   }, [page]);
 
   useEffect(() => {
-    let debounceTimer: NodeJS.Timeout;
-
-    const handleScroll = () => {
-      clearTimeout(debounceTimer);
-      debounceTimer = setTimeout(() => {
-        if (
-          window.innerHeight + document.documentElement.scrollTop >=
-            document.documentElement.offsetHeight - 50 &&
-          !isFetching &&
-          hasMore
-        ) {
-          setPage((prev) => prev + 1);
-        }
-      }, 200);
-    };
+    const handleScroll = debounce(() => {
+      if (
+        window.innerHeight + document.documentElement.scrollTop >=
+          document.documentElement.offsetHeight - 50 &&
+        !isFetching &&
+        hasMore
+      ) {
+        setPage((prev) => prev + 1);
+      }
+    }, 200);
 
     window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
   }, [isFetching, hasMore]);
 
   const toggleDropdown = () => {
diff --git a/components/AllItem.tsx b/components/AllItem.tsx
index 4758eac17..ce34ab53a 100644
--- a/components/AllItem.tsx
+++ b/components/AllItem.tsx
@@ -6,18 +6,7 @@ import { Product } from "@/types/commontypes";
 import styles from "@/styles/items.module.css";
 import searchIcon from "@/public/svgs/ic_search.svg";
 import Image from "next/image";
-
-const getPageSize = () => {
-  if (typeof window === "undefined") return 10;
-  const width = window.innerWidth;
-  if (width < 768) {
-    return 4;
-  } else if (width < 1280) {
-    return 6;
-  } else {
-    return 10;
-  }
-};
+import getPageSize from "@/lib/utils/getPageSize";
 
 function AllItems() {
   const [orderBy, setOrderBy] = useState<string>("recent");
@@ -26,34 +15,45 @@ function AllItems() {
   const [items, setItems] = useState<Product[]>([]);
   const [isDropdown, setIsDropdown] = useState<boolean>(false);
   const [totalPageNum, setTotalPageNum] = useState<number>(0);
+  const [keyword, setKeyword] = useState<string>("");
 
-  useEffect(() => {
-    const handleFixSize = () => {
-      setPageSize(getPageSize());
-    };
-
-    const fetchProducts = async ({
+  const fetchProducts = async () => {
+    const products = await getProducts({
       orderBy,
       page,
       pageSize,
-    }: {
-      orderBy: string;
-      page: number;
-      pageSize: number;
-    }) => {
-      const products = await getProducts({ orderBy, page, pageSize });
-      setItems(products.list);
-      setTotalPageNum(Math.ceil(products.totalCount / pageSize));
+      keyword: keyword.trim(),
+    });
+
+    setItems(products.list);
+    setTotalPageNum(Math.ceil(products.totalCount / pageSize));
+  };
+
+  useEffect(() => {
+    const handleFixSize = () => {
+      setPageSize(getPageSize());
     };
 
     window.addEventListener("resize", handleFixSize);
-    fetchProducts({ orderBy, page, pageSize });
+
+    fetchProducts();
 
     return () => {
       window.removeEventListener("resize", handleFixSize);
     };
   }, [orderBy, page, pageSize]);
 
+  const handleSearchSubmit = () => {
+    setPage(1);
+    fetchProducts();
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      handleSearchSubmit();
+    }
+  };
+
   const handleNextPage = (newPage: number) => {
     setPage(newPage);
   };
@@ -68,6 +68,12 @@ function AllItems() {
     setIsDropdown(false);
   };
 
+  const handleSearchInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setKeyword(event.target.value);
+  };
+
   return (
     <div className={styles.all_item_container}>
       <div className={styles.all_item_content}>
@@ -75,16 +81,24 @@ function AllItems() {
           <div className={styles.all_item_header_front}>
             <div className={styles.all_item_title}>전체 상품</div>
             <div className={styles.all_item_search_container}>
-              <Image
-                className={styles.all_item_search_icon}
-                src={searchIcon}
-                alt="돋보기 아이콘"
-                width={24}
-                height={24}
-              />
+              <button
+                onClick={handleSearchSubmit}
+                className={styles.search_button}
+              >
+                <Image
+                  className={styles.all_item_search_icon}
+                  src={searchIcon}
+                  alt="돋보기 아이콘"
+                  width={24}
+                  height={24}
+                />
+              </button>
               <input
                 className={styles.all_item_search_input}
                 placeholder="검색할 상품을 입력해주세요"
+                value={keyword}
+                onChange={handleSearchInputChange}
+                onKeyDown={handleKeyDown}
               />
             </div>
           </div>
diff --git a/components/BestArticles.tsx b/components/BestArticles.tsx
index 9bab3eccd..b5cce3e5e 100644
--- a/components/BestArticles.tsx
+++ b/components/BestArticles.tsx
@@ -7,18 +7,11 @@ import heart from "@/public/svgs/ic_heart (1).svg";
 import defaultImage from "@/public/pngs/noImage.png";
 import { getArticles } from "@/lib/api";
 import Link from "next/link";
-
-const getPageSize = () => {
-  if (typeof window === "undefined") return 3;
-  const width = window.innerWidth;
-  if (width < 768) return 1;
-  if (width < 1280) return 2;
-  return 3;
-};
+import getPageSize from "@/lib/utils/getPageSize";
 
 export default function BestArticles() {
   const [articles, setArticles] = useState<Article[]>([]);
-  const [pageSize, setPageSize] = useState<number>(getPageSize);
+  const [pageSize, setPageSize] = useState<number>(getPageSize("article"));
 
   useEffect(() => {
     const fetchArticles = async ({
@@ -40,7 +33,8 @@ export default function BestArticles() {
     };
 
     const handleResize = () => {
-      setPageSize(getPageSize());
+      // 화면 크기가 바뀔 때마다 최신 pageSize를 업데이트
+      setPageSize(getPageSize("article"));
     };
 
     window.addEventListener("resize", handleResize);
diff --git a/components/BestItem.tsx b/components/BestItem.tsx
index 7886cf7b3..947ece863 100644
--- a/components/BestItem.tsx
+++ b/components/BestItem.tsx
@@ -3,32 +3,12 @@ import { getProducts } from "@/lib/api";
 import { Product, GetProductsResponse } from "@/types/commontypes";
 import styles from "@/styles/items.module.css";
 import BestItemCard from "./BestItemCard";
-
-const getPageSize = () => {
-  if (typeof window === "undefined") return 4;
-  const width = window.innerWidth;
-  if (width < 768) {
-    return 1;
-  } else if (width < 1280) {
-    return 2;
-  } else {
-    return 4;
-  }
-};
-
-const debounce = (func: (...args: any[]) => void, delay: number) => {
-  let timeoutId: NodeJS.Timeout;
-  return (...args: any[]) => {
-    if (timeoutId) clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => {
-      func(...args);
-    }, delay);
-  };
-};
+import getPageSize from "@/lib/utils/getPageSize";
+import debounce from "@/lib/utils/debounce";
 
 function BestItem() {
   const [items, setItems] = useState<Product[]>([]);
-  const [pageSize, setPageSize] = useState<number>(getPageSize);
+  const [pageSize, setPageSize] = useState<number>(getPageSize("item"));
 
   const fetchProducts = async ({
     orderBy,
@@ -46,7 +26,7 @@ function BestItem() {
 
   useEffect(() => {
     const handleFixSize = debounce(() => {
-      setPageSize(getPageSize());
+      setPageSize(getPageSize("item"));
     }, 300); // 300ms 딜레이로 debounce 적용
 
     window.addEventListener("resize", handleFixSize);
diff --git a/components/BestItemCard.tsx b/components/BestItemCard.tsx
index e7c3dbb2f..341db3482 100644
--- a/components/BestItemCard.tsx
+++ b/components/BestItemCard.tsx
@@ -8,10 +8,12 @@ function BestItemCard({ item }: AllItemCardProps) {
   return (
     <Link href={`/items/${item.id}`} className={styles.link}>
       <div className={styles.item_card}>
-        <img
+        <Image
           src={item.images[0]}
           alt={item.name}
           className={styles.item_card_img}
+          width={282}
+          height={282}
         />
 
         <div className={styles.item_description}>
diff --git a/components/ItemCard.tsx b/components/ItemCard.tsx
index 7b36ba474..b50e7df26 100644
--- a/components/ItemCard.tsx
+++ b/components/ItemCard.tsx
@@ -16,9 +16,11 @@ export default function AllItemCard({ item }: AllItemCardProps) {
   return (
     <Link href={`/items/${item.id}`} className={styles.link}>
       <div className={styles.item_card}>
-        <img
+        <Image
           src={imageSrc}
           alt={item.name}
+          width={221}
+          height={221}
           className={styles.all_item_card_img}
           onError={handleImageError}
         />
diff --git a/components/MainNav.tsx b/components/MainNav.tsx
new file mode 100644
index 000000000..8109ed422
--- /dev/null
+++ b/components/MainNav.tsx
@@ -0,0 +1,76 @@
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import { useState, useEffect } from "react";
+
+export default function MainNav() {
+  const router = useRouter();
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
+  const [showLogout, setShowLogout] = useState<boolean>(false);
+
+  useEffect(() => {
+    const accessToken = localStorage.getItem("accessToken");
+    setIsLoggedIn(!!accessToken);
+  }, []);
+
+  const logout = () => {
+    localStorage.removeItem("accessToken");
+    setIsLoggedIn(false);
+    setShowLogout(false);
+    router.push("/");
+  };
+
+  const handleProfileClick = () => {
+    setShowLogout((prev) => !prev);
+  };
+
+  return (
+    <nav className="nav-container">
+      <div className="nav-bar">
+        <div className="nav-front">
+          <Link href="/" className="nav-logo">
+            <Image
+              src="/svgs/판다 얼굴.svg"
+              alt="판다얼굴"
+              width={40}
+              height={40}
+            />
+            <Image
+              src="/svgs/판다마켓.svg"
+              alt="판다마켓 로고"
+              width={100}
+              height={50}
+            />
+          </Link>
+        </div>
+
+        {isLoggedIn ? (
+          <div className="profile-container">
+            <button
+              className="nav-icon"
+              onClick={handleProfileClick}
+              style={{ background: "none", border: "none" }}
+            >
+              <Image
+                src="/svgs/Frame 2609463.svg"
+                alt="프로필 아이콘"
+                width={40}
+                height={40}
+                className="profile-icon"
+              />
+            </button>
+            {showLogout && (
+              <button className="logout-button" onClick={logout}>
+                로그아웃
+              </button>
+            )}
+          </div>
+        ) : (
+          <Link href="/login" className="login-button">
+            로그인
+          </Link>
+        )}
+      </div>
+    </nav>
+  );
+}
diff --git a/lib/api.ts b/lib/api.ts
new file mode 100644
index 000000000..2f6863359
--- /dev/null
+++ b/lib/api.ts
@@ -0,0 +1,232 @@
+import axiosInstance from "@/lib/axiosInstance";
+import {
+  GetProductCommentsParams,
+  GetProductsParams,
+  GetProductsResponse,
+  ProductDetail,
+  GetCommentsResponse,
+  GetArticlesResponse,
+  GetArticlesParams,
+  Article,
+  GetArticlesCommentResponse,
+  Product,
+} from "@/types/commontypes";
+
+export async function getProducts(
+  params: GetProductsParams = {}
+): Promise<GetProductsResponse> {
+  try {
+    const { data } = await axiosInstance.get<GetProductsResponse>("/products", {
+      params,
+    });
+    return data;
+  } catch (error) {
+    throw new Error("정보를 불러오는데 실패했습니다.");
+  }
+}
+
+/**
+ * 특정 상품의 상세 정보를 가져옵니다.
+ * @param {string} productId - 상품의 ID
+ * @returns {Promise<Object>} 상품 상세 정보를 반환합니다.
+ * @throws {Error} 상품 상세 정보 불러오기 실패 시 에러를 발생시킵니다.
+ */
+export async function getProductDetail(
+  productId: string
+): Promise<ProductDetail> {
+  try {
+    const { data } = await axiosInstance.get<ProductDetail>(
+      `/products/${productId}`
+    );
+    return data;
+  } catch (error) {
+    throw new Error("상품 상세 정보를 불러오는데 실패했습니다.");
+  }
+}
+
+/**
+ * 특정 상품의 댓글 목록을 가져옵니다.
+ * @param {string} productId - 상품의 ID
+ * @param {number} [limit=10] - 가져올 댓글의 개수 (기본값: 10)
+ * @param {string|null} [cursor=null] - 페이지네이션을 위한 커서 (기본값: null)
+ * @returns {Promise<Object>} 댓글 데이터를 반환합니다.
+ * @throws {Error} 댓글 정보 불러오기 실패 시 에러를 발생시킵니다.
+ */
+export async function getProductComments(
+  productId: string,
+  limit: number = 9999,
+  cursor: string | null = null
+): Promise<GetCommentsResponse> {
+  try {
+    const params: GetProductCommentsParams = { limit };
+
+    if (cursor) {
+      params.cursor = cursor;
+    }
+
+    const { data } = await axiosInstance.get<GetCommentsResponse>(
+      `/products/${productId}/comments`,
+      {
+        params,
+      }
+    );
+    return data;
+  } catch (error) {
+    throw new Error("댓글 정보를 불러오는데 실패했습니다.");
+  }
+}
+
+export async function getArticles(
+  params: GetArticlesParams = {}
+): Promise<GetArticlesResponse> {
+  try {
+    const { orderBy = "recent", pageSize, page, keyword } = params;
+
+    const { data } = await axiosInstance.get<GetArticlesResponse>("/articles", {
+      params: { orderBy, pageSize, page, keyword },
+    });
+
+    return data;
+  } catch (error) {
+    throw new Error("게시물을 불러오는데 실패했습니다.");
+  }
+}
+
+export async function getArticleById(id: number): Promise<Article> {
+  const response = await axiosInstance.get(`/articles/${id}`);
+  return response.data;
+}
+
+export async function getArticleComment(
+  id: number,
+  cursor: number | null = null,
+  limit: number = 1000
+): Promise<GetArticlesCommentResponse> {
+  try {
+    const { data } = await axiosInstance.get<GetArticlesCommentResponse>(
+      `/articles/${id}/comments`,
+      {
+        params: { cursor, limit },
+      }
+    );
+    return data;
+  } catch (error) {
+    throw new Error("댓글 데이터를 불러오는 데 실패했습니다.");
+  }
+}
+
+/**
+ * 회원가입 요청을 보냅니다.
+ * @param {Object} params - 회원가입 요청에 필요한 데이터
+ * @param {string} params.email - 이메일
+ * @param {string} params.nickname - 닉네임
+ * @param {string} params.password - 비밀번호
+ * @param {string} params.passwordConfirmation - 비밀번호 확인
+ * @returns {Promise<Object>} 회원가입 성공 시 서버의 응답 데이터를 반환합니다.
+ * @throws {Error} 회원가입 실패 시 에러를 발생시킵니다.
+ */
+export async function signUp(params: {
+  email: string;
+  nickname: string;
+  password: string;
+  passwordConfirmation: string;
+}): Promise<{ accessToken: string }> {
+  try {
+    const { data } = await axiosInstance.post("/auth/signUp", params);
+    return data; // 서버 응답에서 accessToken 반환
+  } catch (error: any) {
+    if (error.response) {
+      throw new Error(
+        error.response.data.message || "회원가입에 실패했습니다."
+      );
+    }
+    throw new Error("회원가입 요청 중 문제가 발생했습니다.");
+  }
+}
+
+/**
+ * 로그인 요청을 보냅니다.
+ * @param {Object} params - 로그인 요청에 필요한 데이터
+ * @param {string} params.email - 이메일
+ * @param {string} params.password - 비밀번호
+ * @returns {Promise<Object>} 로그인 성공 시 서버의 응답 데이터를 반환합니다.
+ * @throws {Error} 로그인 실패 시 에러를 발생시킵니다.
+ */
+export async function signIn(params: {
+  email: string;
+  password: string;
+}): Promise<{ accessToken: string; refreshToken: string }> {
+  try {
+    // 서버로 로그인 요청
+    const { data } = await axiosInstance.post("/auth/signIn", params);
+
+    // accessToken과 refreshToken 반환
+    return {
+      accessToken: data.accessToken,
+      refreshToken: data.refreshToken,
+    };
+  } catch (error: any) {
+    // 서버에서 반환된 에러 메시지 처리
+    if (error.response) {
+      throw new Error(error.response.data.message || "로그인에 실패했습니다.");
+    }
+    throw new Error("로그인 요청 중 문제가 발생했습니다.");
+  }
+}
+
+/**
+ * Refresh Token을 사용해 새로운 Access Token을 요청합니다.
+ * @param {string} refreshToken - 사용자의 Refresh Token
+ * @returns {Promise<string>} 새로운 Access Token을 반환합니다.
+ * @throws {Error} 요청 실패 시 에러를 발생시킵니다.
+ */
+export async function refreshAccessToken(
+  refreshToken: string
+): Promise<string> {
+  try {
+    // Refresh Token 요청
+    const { data } = await axiosInstance.post("/auth/refresh-token", {
+      refreshToken,
+    });
+
+    // 새로운 Access Token 반환
+    return data.accessToken;
+  } catch (error: any) {
+    if (error.response) {
+      throw new Error(
+        error.response.data.message || "토큰 갱신에 실패했습니다."
+      );
+    }
+    throw new Error("토큰 갱신 요청 중 문제가 발생했습니다.");
+  }
+}
+
+/**
+ * 상품 등록 요청을 보냅니다.
+ * @param {Object} itemData - 상품 등록에 필요한 데이터 (JSON 형식)
+ * @returns {Promise<Product>} 등록된 상품 데이터를 반환합니다.
+ * @throws {Error} 상품 등록 실패 시 에러를 발생시킵니다.
+ */
+export async function addItem(itemData: {
+  name: string;
+  description: string;
+  price: number;
+  images: string[]; // 서버에서 파일 경로나 이름을 요구한다고 가정
+  tags: string[];
+}): Promise<Product> {
+  try {
+    const { data } = await axiosInstance.post<Product>("/products", itemData, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    return data;
+  } catch (error: any) {
+    if (error.response) {
+      throw new Error(
+        error.response.data.message || "상품 등록에 실패했습니다."
+      );
+    }
+    throw new Error("상품 등록 요청 중 문제가 발생했습니다.");
+  }
+}
diff --git a/lib/api.tsx b/lib/api.tsx
deleted file mode 100644
index 6a28e9402..000000000
--- a/lib/api.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import axiosInstance from "@/lib/axiosInstance";
-import {
-  GetProductCommentsParams,
-  GetProductsParams,
-  GetProductsResponse,
-  ProductDetail,
-  GetCommentsResponse,
-  GetArticlesResponse,
-  GetArticlesParams,
-  Article,
-  GetArticlesCommentResponse,
-} from "@/types/commontypes";
-
-export async function getProducts(
-  params: GetProductsParams = {}
-): Promise<GetProductsResponse> {
-  try {
-    const { data } = await axiosInstance.get<GetProductsResponse>("/products", {
-      params,
-    });
-    return data;
-  } catch (error) {
-    throw new Error("정보를 불러오는데 실패했습니다.");
-  }
-}
-
-/**
- * 특정 상품의 상세 정보를 가져옵니다.
- * @param {string} productId - 상품의 ID
- * @returns {Promise<Object>} 상품 상세 정보를 반환합니다.
- * @throws {Error} 상품 상세 정보 불러오기 실패 시 에러를 발생시킵니다.
- */
-export async function getProductDetail(
-  productId: string
-): Promise<ProductDetail> {
-  try {
-    const { data } = await axiosInstance.get<ProductDetail>(
-      `/products/${productId}`
-    );
-    return data;
-  } catch (error) {
-    throw new Error("상품 상세 정보를 불러오는데 실패했습니다.");
-  }
-}
-
-/**
- * 특정 상품의 댓글 목록을 가져옵니다.
- * @param {string} productId - 상품의 ID
- * @param {number} [limit=10] - 가져올 댓글의 개수 (기본값: 10)
- * @param {string|null} [cursor=null] - 페이지네이션을 위한 커서 (기본값: null)
- * @returns {Promise<Object>} 댓글 데이터를 반환합니다.
- * @throws {Error} 댓글 정보 불러오기 실패 시 에러를 발생시킵니다.
- */
-export async function getProductComments(
-  productId: string,
-  limit: number = 9999,
-  cursor: string | null = null
-): Promise<GetCommentsResponse> {
-  try {
-    const params: GetProductCommentsParams = { limit };
-
-    if (cursor) {
-      params.cursor = cursor;
-    }
-
-    const { data } = await axiosInstance.get<GetCommentsResponse>(
-      `/products/${productId}/comments`,
-      {
-        params,
-      }
-    );
-    return data;
-  } catch (error) {
-    throw new Error("댓글 정보를 불러오는데 실패했습니다.");
-  }
-}
-
-export async function getArticles(
-  params: GetArticlesParams = {}
-): Promise<GetArticlesResponse> {
-  try {
-    const { orderBy = "recent", pageSize, page, keyword } = params;
-
-    const { data } = await axiosInstance.get<GetArticlesResponse>("/articles", {
-      params: { orderBy, pageSize, page, keyword },
-    });
-
-    return data;
-  } catch (error) {
-    throw new Error("게시물을 불러오는데 실패했습니다.");
-  }
-}
-
-export async function getArticleById(id: number): Promise<Article> {
-  const response = await axiosInstance.get(`/articles/${id}`);
-  return response.data;
-}
-
-export async function getArticleComment(
-  id: number,
-  cursor: number | null = null,
-  limit: number = 1000
-): Promise<GetArticlesCommentResponse> {
-  try {
-    const { data } = await axiosInstance.get<GetArticlesCommentResponse>(
-      `/articles/${id}/comments`,
-      {
-        params: { cursor, limit },
-      }
-    );
-    return data;
-  } catch (error) {
-    throw new Error("댓글 데이터를 불러오는 데 실패했습니다.");
-  }
-}
diff --git a/lib/axiosInstance.ts b/lib/axiosInstance.ts
new file mode 100644
index 000000000..dc9a5cc75
--- /dev/null
+++ b/lib/axiosInstance.ts
@@ -0,0 +1,21 @@
+import axios from "axios";
+
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
+
+const instance = axios.create({
+  baseURL: BASE_URL,
+});
+
+// 요청 인터셉터를 통해 인증 토큰 추가
+instance.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem("accessToken"); // 로컬 스토리지에서 토큰 가져오기
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+
+export default instance;
diff --git a/lib/axiosInstance.tsx b/lib/axiosInstance.tsx
deleted file mode 100644
index db43eb894..000000000
--- a/lib/axiosInstance.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import axios from "axios";
-
-const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
-
-const instance = axios.create({
-  baseURL: BASE_URL,
-});
-
-export default instance;
diff --git a/lib/utils/debounce.ts b/lib/utils/debounce.ts
new file mode 100644
index 000000000..2a45d644a
--- /dev/null
+++ b/lib/utils/debounce.ts
@@ -0,0 +1,12 @@
+export default function debounce(
+  func: (...args: any[]) => void,
+  delay: number
+) {
+  let timeoutId: NodeJS.Timeout;
+  return (...args: any[]) => {
+    if (timeoutId) clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      func(...args);
+    }, delay);
+  };
+}
diff --git a/lib/utils/getPageSize.ts b/lib/utils/getPageSize.ts
new file mode 100644
index 000000000..fd09794f1
--- /dev/null
+++ b/lib/utils/getPageSize.ts
@@ -0,0 +1,21 @@
+export default function getPageSize(context = "default") {
+  if (typeof window === "undefined") return context === "default" ? 3 : 10;
+
+  const width = window.innerWidth;
+
+  if (context === "article") {
+    if (width < 768) return 1;
+    if (width < 1280) return 2;
+    return 3;
+  }
+
+  if (context === "item") {
+    if (width < 768) return 1;
+    if (width < 1280) return 2;
+    return 4;
+  }
+
+  if (width < 768) return 4;
+  if (width < 1280) return 6;
+  return 10;
+}
diff --git a/lib/utils/logout.ts b/lib/utils/logout.ts
new file mode 100644
index 000000000..043137243
--- /dev/null
+++ b/lib/utils/logout.ts
@@ -0,0 +1,9 @@
+import { useRouter } from "next/router";
+
+export function Logout() {
+  localStorage.removeItem("accessToken");
+  localStorage.removeItem("refreshToken");
+
+  const router = useRouter();
+  router.push("/login");
+}
diff --git a/next.config.js b/next.config.js
index 6b27c6e74..168a8d222 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,6 +2,12 @@
 const nextConfig = {
   reactStrictMode: false,
   images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**",
+      },
+    ],
     domains: [
       "sprint-fe-project.s3.ap-northeast-2.amazonaws.com",
       "another-bucket.s3.amazonaws.com",
@@ -11,7 +17,13 @@ const nextConfig = {
       "youtube.com",
       "www.shutterstock.com",
       "image.hanatour.com",
+      "mblogthumb-phinf.pstatic.net",
+      "ibb.co",
+      "i.imgur.com",
+      "*",
+      "pbs.twimg.com",
     ],
+    formats: ["image/avif", "image/webp"],
   },
 };
 
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 2df382f9c..409613ec6 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,17 +1,35 @@
-import Nav from "@/components/Nav";
+import { ReactNode } from "react";
 import type { AppProps } from "next/app";
+import type { NextPage } from "next";
+import Nav from "@/components/Nav";
 import "@/styles/Nav.css";
 import "@/styles/globals.css";
 import Head from "next/head";
 
-export default function App({ Component, pageProps }: AppProps) {
+export type NextPageWithLayout = NextPage & {
+  getLayout?: (page: ReactNode) => ReactNode;
+};
+
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};
+
+export default function App({ Component, pageProps }: AppPropsWithLayout) {
+  const getLayout =
+    Component.getLayout ||
+    ((page: ReactNode) => (
+      <>
+        <Nav />
+        {page}
+      </>
+    ));
+
   return (
     <div>
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
-      <Nav />
-      <Component {...pageProps} />;
+      {getLayout(<Component {...pageProps} />)}
     </div>
   );
 }
diff --git a/pages/addboard.tsx b/pages/addboard.tsx
index 5bb5afe94..bda5774dd 100644
--- a/pages/addboard.tsx
+++ b/pages/addboard.tsx
@@ -34,7 +34,6 @@ export default function AddBoard() {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    console.log("Form submitted:", values);
 
     setValues(INITIAL_VALUES);
   };
diff --git a/pages/additem.tsx b/pages/additem.tsx
index e69de29bb..ca2b67174 100644
--- a/pages/additem.tsx
+++ b/pages/additem.tsx
@@ -0,0 +1,45 @@
+import AddItemForm from "@/components/AddItemForm";
+import { addItem } from "@/lib/api"; // addItem 함수 가져오기
+import { Product } from "@/types/commontypes";
+import styles from "@/styles/additem.module.css";
+
+export default function AddItem() {
+  // FormData를 JSON으로 변환하고 API 요청을 보내는 함수
+  const handleSubmit = async (
+    formData: FormData
+  ): Promise<{ review: Product } | null> => {
+    try {
+      // FormData를 JSON으로 변환
+      const itemData = {
+        name: formData.get("name") as string,
+        description: formData.get("description") as string,
+        price: parseFloat(formData.get("price") as string) || 0,
+        images: formData
+          .getAll("images")
+          .map((file) =>
+            typeof file === "string" ? file : (file as File).name
+          ), // 파일 이름 전달
+        tags: JSON.parse(formData.get("tags") as string),
+      };
+
+      // API 요청
+      const item = await addItem(itemData); // addItem 함수 호출
+      return { review: item }; // 등록된 상품 데이터 반환
+    } catch (error) {
+      console.error("Failed to submit product:", error);
+      return null;
+    }
+  };
+
+  // 성공적으로 상품 등록 후 처리
+  const handleSuccess = (item: Product) => {
+    console.log("Product submitted successfully:", item);
+    // 필요한 추가 동작을 수행 (예: 페이지 리디렉션 또는 UI 업데이트)
+  };
+
+  return (
+    <div className={styles.add_item_form}>
+      <AddItemForm onSubmit={handleSubmit} onSubmitSuccess={handleSuccess} />
+    </div>
+  );
+}
diff --git a/pages/api/hello.ts b/pages/api/hello.ts
deleted file mode 100644
index f8bcc7e5c..000000000
--- a/pages/api/hello.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-type Data = {
-  name: string
-}
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  res.status(200).json({ name: 'John Doe' })
-}
diff --git a/pages/index.tsx b/pages/index.tsx
index c58254d18..eb8428e1b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,10 +1,177 @@
 import Link from "next/link";
+import styles from "@/styles/index.module.css";
+import topImg from "@/public/svgs/Img_home_top.svg";
+import Image from "next/image";
+import hotImg from "@/public/pngs/Img_home_01.png";
+import searchImg from "@/public/pngs/Img_home_02.png";
+import registerImg from "@/public/pngs/Img_home_03.png";
+import bottomImg from "@/public/pngs/Img_home_bottom.png";
+import facebook from "@/public/svgs/ic_facebook.svg";
+import twitter from "@/public/svgs/ic_twitter.svg";
+import youtube from "@/public/svgs/ic_youtube.svg";
+import instagram from "@/public/svgs/ic_instagram.svg";
+import MainNav from "@/components/MainNav";
 
-export default function Home() {
+Home.getLayout = function (page: React.ReactNode) {
   return (
-    <div>
-      <h1>판다마켓</h1>
-      <Link href="/boards">자유게시판</Link>
+    <>
+      <MainNav />
+      {page}
+    </>
+  );
+};
+
+export default function Home<NextPageWithLayout>() {
+  return (
+    <div className={styles.body}>
+      <div className={styles.body1}>
+        <section className={styles.header}>
+          <div className={styles.header_container}>
+            <div className={styles.header_banner}>
+              <p className={styles.header_description}>
+                일상의 모든 물건을
+                <br />
+                거래해 보세요
+              </p>
+              <Link href={"/items"} className={styles.link}>
+                <button className={styles.btn_catalog}>구경하러 가기</button>
+              </Link>
+            </div>
+            <Image
+              className={styles.header_image}
+              src={topImg}
+              alt="상단 배너 이미지"
+            />
+          </div>
+        </section>
+        <section className={styles.section_container}>
+          <div className={styles.section_hotitem}>
+            <div className={styles.section_banner}>
+              <Image
+                className={styles.section_hotitem_image}
+                src={hotImg}
+                alt="hot item 이미지"
+              />
+              <div className={styles.section_hotitem_container}>
+                <div className={styles.section_title}>Hot item</div>
+                <div className={styles.section_hotitem_description}>
+                  <p className={styles.section_hotitem_description_Bold}>
+                    인기 상품을 확인해 보세요
+                  </p>
+                  <p className={styles.section_hotitem_description_regular}>
+                    가장 HOT한 중고거래 물품을
+                    <br />
+                    판다 마켓에서 확인해보세요
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className={styles.section_search}>
+            <div className={styles.section_banner}>
+              <div className={styles.section_search_container}>
+                <div className={styles.section_title}>Search</div>
+                <div className={styles.section_search_description}>
+                  <p className={styles.section_search_description_Bold}>
+                    구매를 원하는 상품을 검색하세요
+                  </p>
+                  <p className={styles.section_search_description_regular}>
+                    구매하고 싶은 물품은 검색해서
+                    <br />
+                    쉽게 찾아보세요
+                  </p>
+                </div>
+              </div>
+              <Image
+                className={styles.section_search_image}
+                src={searchImg}
+                alt="search 이미지"
+              />
+            </div>
+          </div>
+          <div className={styles.section_register}>
+            <div className={styles.section_banner}>
+              <Image
+                className={styles.section_register_image}
+                src={registerImg}
+                alt="register 이미지"
+              />
+              <div className={styles.section_register_container}>
+                <div className={styles.section_title}>Register</div>
+                <div className={styles.section_register_description}>
+                  <p className={styles.section_register_description_Bold}>
+                    판매를 원하는 상품을 등록하세요
+                  </p>
+                  <p className={styles.section_register_description_regular}>
+                    어떤 물건이든 판매하고 싶은 상품을
+                    <br />
+                    쉽게 등록하세요
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+        <section className={styles.bottom}>
+          <div className={styles.bottom_container}>
+            <div className={styles.bottom_banner}>
+              <p className={styles.bottom_description}>
+                믿을 수 있는
+                <br />
+                판다마켓 중고 거래
+              </p>
+            </div>
+            <Image
+              className={styles.bottom_image}
+              src={bottomImg}
+              alt="하단 배너 이미지"
+            />
+          </div>
+        </section>
+        <footer className={styles.footer}>
+          <div className={styles.footer_container}>
+            <p className={styles.footer_codeit}>©codeit - 2024</p>
+            <div className={styles.footer_Privacy_FAQ}>
+              <Link className={styles.footer_privacy} href="privacy.html">
+                Privacy Policy
+              </Link>
+              <Link className={styles.footer_FAQ} href="faq.html">
+                FAQ
+              </Link>
+            </div>
+            <div className={styles.footer_sns}>
+              <Link href="https://www.facebook.com/" target="_blank">
+                <Image
+                  className={styles.facebook}
+                  src={facebook}
+                  alt="페이스북 링크"
+                />
+              </Link>
+              <Link href="https://x.com/" target="_blank">
+                <Image
+                  className={styles.twitter}
+                  src={twitter}
+                  alt="트위터 링크"
+                />
+              </Link>
+              <Link href="https://www.youtube.com/" target="_blank">
+                <Image
+                  className={styles.youtube}
+                  src={youtube}
+                  alt="유튜브 링크"
+                />
+              </Link>
+              <Link href="https://www.instagram.com/" target="_blank">
+                <Image
+                  className={styles.instagram}
+                  src={instagram}
+                  alt="인스타그램 링크"
+                />
+              </Link>
+            </div>
+          </div>
+        </footer>
+      </div>
     </div>
   );
 }
diff --git a/pages/items/[productId].tsx b/pages/items/[productId].tsx
index b8f9672d2..a1d464d40 100644
--- a/pages/items/[productId].tsx
+++ b/pages/items/[productId].tsx
@@ -9,6 +9,7 @@ import plusBtn from "@/public/svgs/Group 33735 (1).svg";
 import backIcon from "@/public/svgs/ic_back.svg";
 import Image from "next/image";
 import styles from "@/styles/itemdetail.module.css";
+import defaultImg from "@/public/svgs/Group 33735 (1).svg";
 
 export default function ItemDetailForm() {
   const router = useRouter();
@@ -68,7 +69,7 @@ export default function ItemDetailForm() {
                 item.images.map((image, index) => (
                   <Image
                     key={index}
-                    src={image}
+                    src={image ? image : defaultImg.src}
                     alt={`상품 이미지 ${index + 1}`}
                     width={486}
                     height={486}
diff --git a/pages/login.tsx b/pages/login.tsx
new file mode 100644
index 000000000..8049c7768
--- /dev/null
+++ b/pages/login.tsx
@@ -0,0 +1,202 @@
+import React, { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import styles from "@/styles/login.module.css";
+import Image from "next/image";
+import logoLarge from "@/public/pngs/logo.png";
+import btnOn from "@/public/svgs/btn_visibility_on_24px.svg";
+import btnOff from "@/public/svgs/btn_visibility_off_24px.svg";
+import kakao from "@/public/pngs/Component 3.png";
+import google from "@/public/pngs/Component 2.png";
+import Link from "next/link";
+import { signIn } from "@/lib/api";
+
+export default function Login() {
+  const router = useRouter();
+
+  const [email, setEmail] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+  const [emailError, setEmailError] = useState<string | null>(null);
+  const [passwordError, setPasswordError] = useState<string | null>(null);
+  const [serverError, setServerError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const accessToken = localStorage.getItem("accessToken");
+    if (accessToken) {
+      router.push("/"); // 토큰이 있는 경우 홈으로 리디렉션
+    }
+  }, [router]);
+
+  // 이메일 유효성 검증 함수
+  const validateEmail = (email: string): boolean => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  // 로그인 버튼 활성화 여부 판단
+  const isLoginEnabled = (): boolean => {
+    return validateEmail(email) && password.length >= 8;
+  };
+
+  // 이메일 입력 핸들러
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+    setEmailError(null); // 에러 초기화
+  };
+
+  // 비밀번호 입력 핸들러
+  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPassword(e.target.value);
+    setPasswordError(null); // 에러 초기화
+  };
+
+  // 이메일 입력 필드 포커스 아웃 핸들러
+  const handleEmailBlur = () => {
+    if (!email) {
+      setEmailError("이메일을 입력해주세요.");
+    } else if (!validateEmail(email)) {
+      setEmailError("잘못된 이메일 형식입니다.");
+    }
+  };
+
+  // 비밀번호 입력 필드 포커스 아웃 핸들러
+  const handlePasswordBlur = () => {
+    if (!password) {
+      setPasswordError("비밀번호를 입력해주세요.");
+    } else if (password.length < 8) {
+      setPasswordError("비밀번호를 8자 이상 입력해주세요.");
+    }
+  };
+
+  // 로그인 버튼 클릭 핸들러
+  const handleLogin = async () => {
+    if (isLoginEnabled()) {
+      try {
+        // 서버로 로그인 요청
+        const response = await signIn({ email, password });
+
+        // accessToken 저장
+        localStorage.setItem("accessToken", response.accessToken);
+
+        // 메인 페이지로 리디렉션
+        router.push("/");
+      } catch (error: any) {
+        // 서버 에러 처리
+        setServerError(error.message || "로그인에 실패했습니다.");
+      }
+    }
+  };
+
+  // 비밀번호 보기 토글 핸들러
+  const togglePasswordVisibility = () => {
+    setShowPassword((prev) => !prev);
+  };
+
+  return (
+    <div className={styles.body}>
+      <div className={styles.section_container}>
+        <Link href="/">
+          <Image
+            className={styles.big_logo}
+            src={logoLarge}
+            alt="판다마켓 큰 로고"
+          />
+        </Link>
+        <div className={styles.login_total_container}>
+          <div className={styles.login_main}>
+            <form
+              className={styles.login_main_input}
+              onSubmit={(e) => e.preventDefault()}
+            >
+              <div className={styles.login_main_input_email}>
+                <label htmlFor="email-input">이메일</label>
+                <input
+                  className={`${styles.email_input} ${
+                    emailError ? styles.input_error : ""
+                  }`}
+                  type="text"
+                  placeholder="이메일을 입력해주세요."
+                  value={email}
+                  onChange={handleEmailChange}
+                  onBlur={handleEmailBlur}
+                />
+                {emailError && (
+                  <p className={styles.error_message}>{emailError}</p>
+                )}
+              </div>
+              <div className={styles.login_main_input_password}>
+                <label className={styles.password}>비밀번호</label>
+                <div className={styles.login_main_input_password_container}>
+                  <input
+                    className={`${styles.password_input} ${
+                      passwordError ? styles.input_error : ""
+                    }`}
+                    type={showPassword ? "text" : "password"}
+                    placeholder="비밀번호를 입력해주세요."
+                    value={password}
+                    onChange={handlePasswordChange}
+                    onBlur={handlePasswordBlur}
+                  />
+                  <span
+                    id="toggle-password"
+                    className={styles.eye_icon}
+                    onClick={togglePasswordVisibility}
+                  >
+                    <Image
+                      id="eye-icon"
+                      src={showPassword ? btnOn : btnOff}
+                      alt="비밀번호 보기"
+                    />
+                  </span>
+                </div>
+                {passwordError && (
+                  <p className={styles.error_message}>{passwordError}</p>
+                )}
+              </div>
+            </form>
+            <button
+              className={`${styles.login_main_button} ${
+                isLoginEnabled() ? styles.active : ""
+              }`}
+              disabled={!isLoginEnabled()}
+              onClick={handleLogin}
+            >
+              로그인
+            </button>
+          </div>
+          <div className={styles.login_simple_login}>
+            <div className={styles.login_simple_login_container}>
+              <p className={styles.login_simple_login_description}>
+                간편 로그인하기
+              </p>
+              <div className={styles.login_simple_login_link}>
+                <a href="https://www.google.com/">
+                  <Image
+                    className={styles.google}
+                    src={google}
+                    alt="구글 로그인"
+                  />
+                </a>
+                <a href="https://www.kakaocorp.com/page/">
+                  <Image
+                    className={styles.kakao}
+                    src={kakao}
+                    alt="카카오 로그인"
+                  />
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className={styles.login_first}>
+            <p className={styles.login_signup_question}>
+              판다마켓이 처음이신가요?
+            </p>
+            <Link className={styles.login_signup_link} href="/signup">
+              회원가입
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/pages/signup.tsx b/pages/signup.tsx
new file mode 100644
index 000000000..312bc82d3
--- /dev/null
+++ b/pages/signup.tsx
@@ -0,0 +1,274 @@
+import React, { useState, useEffect } from "react";
+import styles from "@/styles/signup.module.css";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import logoLarge from "@/public/pngs/logo.png";
+import btnOn from "@/public/svgs/btn_visibility_on_24px.svg";
+import btnOff from "@/public/svgs/btn_visibility_off_24px.svg";
+import kakao from "@/public/pngs/Component 3.png";
+import google from "@/public/pngs/Component 2.png";
+import { signUp } from "@/lib/api";
+
+Signup.getLayout = function (page: React.ReactNode) {
+  return <>{page}</>;
+};
+
+export default function Signup() {
+  const router = useRouter();
+
+  const [email, setEmail] = useState<string>("");
+  const [nickname, setNickname] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
+  const [passwordAgain, setPasswordAgain] = useState<string>("");
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+  const [showPasswordAgain, setShowPasswordAgain] = useState<boolean>(false);
+  const [emailError, setEmailError] = useState<string | null>(null);
+  const [nicknameError, setNicknameError] = useState<string | null>(null);
+  const [passwordError, setPasswordError] = useState<string | null>(null);
+  const [passwordAgainError, setPasswordAgainError] = useState<string | null>(
+    null
+  );
+
+  const [serverError, setServerError] = useState<string | null>(null);
+
+  // 이메일 유효성 검사
+  const validateEmail = (email: string): boolean => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  // 회원가입 버튼 활성화 여부
+  const isSignupEnabled = (): boolean => {
+    return (
+      validateEmail(email) &&
+      nickname.length > 0 &&
+      password.length >= 8 &&
+      password === passwordAgain
+    );
+  };
+
+  // 이메일 입력 핸들러
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+    setEmailError(null);
+  };
+
+  // 닉네임 입력 핸들러
+  const handleNicknameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setNickname(e.target.value);
+    setNicknameError(null);
+  };
+
+  // 비밀번호 입력 핸들러
+  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPassword(e.target.value);
+    setPasswordError(null);
+  };
+
+  // 비밀번호 확인 입력 핸들러
+  const handlePasswordAgainChange = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setPasswordAgain(e.target.value);
+    setPasswordAgainError(null);
+  };
+
+  // 이메일 포커스 아웃 핸들러
+  const handleEmailBlur = () => {
+    if (!email) {
+      setEmailError("이메일을 입력해주세요.");
+    } else if (!validateEmail(email)) {
+      setEmailError("잘못된 이메일 형식입니다.");
+    }
+  };
+
+  // 닉네임 포커스 아웃 핸들러
+  const handleNicknameBlur = () => {
+    if (!nickname) {
+      setNicknameError("닉네임을 입력해주세요.");
+    }
+  };
+
+  // 비밀번호 포커스 아웃 핸들러
+  const handlePasswordBlur = () => {
+    if (!password) {
+      setPasswordError("비밀번호를 입력해주세요.");
+    } else if (password.length < 8) {
+      setPasswordError("비밀번호를 8자 이상 입력해주세요.");
+    }
+  };
+
+  // 비밀번호 확인 포커스 아웃 핸들러
+  const handlePasswordAgainBlur = () => {
+    if (password !== passwordAgain) {
+      setPasswordAgainError("비밀번호가 일치하지 않습니다.");
+    }
+  };
+
+  // 비밀번호 보기 토글
+  const togglePasswordVisibility = () => {
+    setShowPassword((prev) => !prev);
+  };
+
+  // 비밀번호 확인 보기 토글
+  const togglePasswordAgainVisibility = () => {
+    setShowPasswordAgain((prev) => !prev);
+  };
+
+  // 회원가입 버튼 클릭 핸들러
+  const handleSignup = async () => {
+    if (isSignupEnabled()) {
+      try {
+        // 서버로 회원가입 요청
+        const response = await signUp({
+          email,
+          nickname,
+          password,
+          passwordConfirmation: passwordAgain,
+        });
+
+        // accessToken 저장
+        localStorage.setItem("accessToken", response.accessToken);
+
+        // 메인 페이지로 리디렉션
+        router.push("/");
+      } catch (error: any) {
+        setServerError(error.message);
+      }
+    }
+  };
+
+  return (
+    <div className={styles.body_1}>
+      <div className={styles.section_container}>
+        <Link href="/">
+          <Image src={logoLarge} alt="판다마켓 큰 로고" />
+        </Link>
+        <div className={styles.signup_total_container}>
+          <div className={styles.signup_main}>
+            <form
+              className={styles.signup_main_input}
+              onSubmit={(e) => e.preventDefault()}
+            >
+              <div className={styles.signup_main_input_email}>
+                <label className={styles.email}>이메일</label>
+                <input
+                  className={`${styles.email_input} ${
+                    emailError ? styles.input_error : ""
+                  }`}
+                  type="text"
+                  placeholder="이메일을 입력해주세요."
+                  value={email}
+                  onChange={handleEmailChange}
+                  onBlur={handleEmailBlur}
+                />
+                {emailError && (
+                  <p className={styles.error_message}>{emailError}</p>
+                )}
+              </div>
+              <div className={styles.signup_main_input_nickname}>
+                <label className={styles.nickname}>닉네임</label>
+                <input
+                  className={`${styles.nickname_input} ${
+                    nicknameError ? styles.input_error : ""
+                  }`}
+                  type="text"
+                  placeholder="닉네임을 입력해주세요."
+                  value={nickname}
+                  onChange={handleNicknameChange}
+                  onBlur={handleNicknameBlur}
+                />
+                {nicknameError && (
+                  <p className={styles.error_message}>{nicknameError}</p>
+                )}
+              </div>
+              <div className={styles.signup_main_input_password}>
+                <label className={styles.password}>비밀번호</label>
+                <div className={styles.signup_main_input_password_container}>
+                  <input
+                    className={`${styles.password_input} ${
+                      passwordError ? styles.input_error : ""
+                    }`}
+                    type={showPassword ? "text" : "password"}
+                    placeholder="비밀번호를 입력해주세요."
+                    value={password}
+                    onChange={handlePasswordChange}
+                    onBlur={handlePasswordBlur}
+                  />
+                  <span
+                    className={styles.eye_icon}
+                    onClick={togglePasswordVisibility}
+                  >
+                    <Image
+                      src={showPassword ? btnOn : btnOff}
+                      alt="비밀번호 보기"
+                    />
+                  </span>
+                </div>
+                {passwordError && (
+                  <p className={styles.error_message}>{passwordError}</p>
+                )}
+              </div>
+              <div className={styles.signup_main_input_password_again}>
+                <label className={styles.password_again}>비밀번호 확인</label>
+                <div className={styles.signup_main_input_password_container}>
+                  <input
+                    className={`${styles.password_again_input} ${
+                      passwordAgainError ? styles.input_error : ""
+                    }`}
+                    type={showPasswordAgain ? "text" : "password"}
+                    placeholder="비밀번호를 다시 한 번 입력해주세요."
+                    value={passwordAgain}
+                    onChange={handlePasswordAgainChange}
+                    onBlur={handlePasswordAgainBlur}
+                  />
+                  <span
+                    className={styles.eye_icon}
+                    onClick={togglePasswordAgainVisibility}
+                  >
+                    <Image
+                      src={showPasswordAgain ? btnOn : btnOff}
+                      alt="비밀번호 보기"
+                    />
+                  </span>
+                </div>
+                {passwordAgainError && (
+                  <p className={styles.error_message}>{passwordAgainError}</p>
+                )}
+              </div>
+            </form>
+            <button
+              className={`${styles.signup_main_button} ${
+                isSignupEnabled() ? styles.active : ""
+              }`}
+              disabled={!isSignupEnabled()}
+              onClick={handleSignup}
+            >
+              회원가입
+            </button>
+          </div>
+          <div className={styles.signup_simple_login}>
+            <p className={styles.signup_simple_login_description}>
+              간편 로그인하기
+            </p>
+            <div className={styles.signup_simple_login_link}>
+              <Link href="https://www.google.com/">
+                <Image src={google} alt="구글 로그인" width={40} height={40} />
+              </Link>
+              <Link href="https://www.kakaocorp.com/page/">
+                <Image src={kakao} alt="카카오 로그인" width={40} height={40} />
+              </Link>
+            </div>
+          </div>
+          <div className={styles.signup_already}>
+            <p className={styles.signup_already_question}>이미 회원이신가요?</p>
+            <Link className={styles.signup_login_link} href="/login">
+              로그인
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/public/pngs/Component 2.png b/public/pngs/Component 2.png
new file mode 100644
index 000000000..f75dc7616
Binary files /dev/null and b/public/pngs/Component 2.png differ
diff --git a/public/pngs/Component 3.png b/public/pngs/Component 3.png
new file mode 100644
index 000000000..bd7678005
Binary files /dev/null and b/public/pngs/Component 3.png differ
diff --git a/public/pngs/Img_home_01.png b/public/pngs/Img_home_01.png
new file mode 100644
index 000000000..dab42ab23
Binary files /dev/null and b/public/pngs/Img_home_01.png differ
diff --git a/public/pngs/Img_home_02.png b/public/pngs/Img_home_02.png
new file mode 100644
index 000000000..84d8629f1
Binary files /dev/null and b/public/pngs/Img_home_02.png differ
diff --git a/public/pngs/Img_home_03.png b/public/pngs/Img_home_03.png
new file mode 100644
index 000000000..381a2999b
Binary files /dev/null and b/public/pngs/Img_home_03.png differ
diff --git a/public/pngs/Img_home_bottom.png b/public/pngs/Img_home_bottom.png
new file mode 100644
index 000000000..55c7196aa
Binary files /dev/null and b/public/pngs/Img_home_bottom.png differ
diff --git a/public/pngs/logo.png b/public/pngs/logo.png
new file mode 100644
index 000000000..8248f602a
Binary files /dev/null and b/public/pngs/logo.png differ
diff --git a/public/svgs/Img_home_top.svg b/public/svgs/Img_home_top.svg
new file mode 100644
index 000000000..a36011a43
--- /dev/null
+++ b/public/svgs/Img_home_top.svg
@@ -0,0 +1,78 @@
+<svg width="746" height="340" viewBox="0 0 746 340" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_53792_10821)">
+<rect width="102.494" height="189.553" rx="8" transform="matrix(0.967453 -0.25305 0.24992 0.968267 58.3755 94.041)" fill="#FFE7D1"/>
+<path d="M174.536 160.439C173.432 156.16 176.002 151.786 180.277 150.668L222.373 139.657C226.648 138.539 231.008 141.101 232.112 145.379L256.085 238.257L198.509 253.316L174.536 160.439Z" fill="#FFE7D1"/>
+<path d="M20.0755 187.089C18.9713 182.811 21.5413 178.436 25.8158 177.318L75.1091 164.425C79.3835 163.307 83.7438 165.869 84.848 170.147L112.145 275.904L47.3727 292.847L20.0755 187.089Z" fill="#FFE7D1"/>
+<rect width="16.5313" height="19.1216" rx="4" transform="matrix(0.967453 -0.25305 0.24992 0.968267 80.1226 105.538)" fill="#F5C498"/>
+<rect width="16.5313" height="19.1216" rx="4" transform="matrix(0.967453 -0.25305 0.24992 0.968267 104.113 99.2637)" fill="#F5C498"/>
+<rect width="16.5313" height="19.1216" rx="4" transform="matrix(0.967453 -0.25305 0.24992 0.968267 128.103 92.9883)" fill="#F5C498"/>
+<rect width="16.5313" height="19.1216" rx="4" transform="matrix(0.967453 -0.25305 0.24992 0.968267 87.3945 133.713)" fill="#F5C498"/>
+<rect width="16.5313" height="19.1216" rx="4" transform="matrix(0.967453 -0.25305 0.24992 0.968267 111.385 127.437)" fill="#F5C498"/>
+<rect width="16.5313" height="19.1216" rx="4" transform="matrix(0.967453 -0.25305 0.24992 0.968267 33.3906 187.528)" fill="#F5C498"/>
+<rect width="16.5313" height="19.1216" rx="4" transform="matrix(0.967453 -0.25305 0.24992 0.968267 57.3804 181.254)" fill="#F5C498"/>
+<rect width="16.5313" height="19.1216" rx="4" transform="matrix(0.967453 -0.25305 0.24992 0.968267 184.449 162.465)" fill="#F5C498"/>
+<rect width="16.5313" height="19.1216" rx="4" transform="matrix(0.967453 -0.25305 0.24992 0.968267 208.439 156.19)" fill="#F5C498"/>
+<rect width="16.5313" height="19.1216" rx="4" transform="matrix(0.967453 -0.25305 0.24992 0.968267 135.375 121.164)" fill="#F5C498"/>
+<ellipse cx="373" cy="349.862" rx="373" ry="146.383" fill="#D7A37E"/>
+<ellipse cx="373" cy="349.862" rx="373" ry="146.383" fill="url(#paint0_linear_53792_10821)"/>
+<path d="M316.937 150.284C319.934 167.09 339.589 169.137 349.578 168.598L372.586 201.456C372.23 205.047 360.126 220.524 315.607 204.149C264.773 185.452 272.576 140.281 286.437 134.124C304.63 126.045 313.192 129.276 316.937 150.284Z" fill="#222327"/>
+<path d="M484.252 117.253C484.252 159.695 443.351 175.471 387.558 175.471C331.765 175.471 291.788 159.695 291.788 117.253C291.788 67.8849 331.765 24.1055 387.558 24.1055C443.351 24.1055 484.252 64.159 484.252 117.253Z" fill="white"/>
+<path d="M336.736 224.821C336.736 206.734 343.248 179.443 349.043 168.059H429.841C435.465 178.16 440.941 203.655 440.532 224.821C440.02 251.278 412.921 253.202 387.867 254.164C362.813 255.126 336.736 247.43 336.736 224.821Z" fill="white"/>
+<path d="M346.696 259.428C341.551 249.935 336.736 244.549 336.736 221.387L370.911 231.34C376.302 231.252 387.375 233.214 388.538 241.775C389.99 252.475 385.12 265.718 382.787 267.299C380.92 268.564 374.481 268.285 371.495 267.987L360.032 265.808C355.831 267.742 351.342 267.999 346.696 259.428Z" fill="white"/>
+<path d="M430.499 259.428C435.644 249.935 440.46 244.549 440.46 221.387L406.285 231.34C400.893 231.252 389.82 233.214 388.658 241.775C387.206 252.475 392.076 265.718 394.409 267.299C396.276 268.564 402.715 268.285 405.701 267.987L417.164 265.808C421.365 267.742 425.854 267.999 430.499 259.428Z" fill="white"/>
+<path d="M349.317 172.369L346.106 171.83L343.431 178.833L343.966 182.603L349.317 172.369Z" fill="#222327"/>
+<path d="M383.824 266.543C383.824 271.364 379.608 273.636 366.487 273.636C353.366 273.636 345.297 271.91 345.297 267.089C345.297 262.267 346.154 256.938 364.025 256.938C377.147 256.938 383.824 261.722 383.824 266.543Z" fill="white"/>
+<path d="M394.525 266.543C394.525 271.364 398.741 273.636 411.862 273.636C424.983 273.636 433.051 271.91 433.051 267.089C433.051 262.267 432.195 256.938 414.323 256.938C401.202 256.938 394.525 261.722 394.525 266.543Z" fill="white"/>
+<rect width="38.5609" height="49.3747" rx="19.2804" transform="matrix(0.92957 -0.368645 0.364428 0.931231 413.189 175.224)" fill="#222327"/>
+<path d="M384.872 26.1177C388.435 38.4686 379.015 52.0782 368.218 55.234C357.422 58.3897 342.671 51.8446 339.109 39.4936C335.546 27.1427 343.025 10.0296 353.822 6.87386C368.218 2.66586 381.31 13.7667 384.872 26.1177Z" fill="#222327"/>
+<path d="M390.807 26.1177C387.245 38.4686 396.664 52.0782 407.461 55.234C418.258 58.3897 433.008 51.8446 436.571 39.4936C440.133 27.1427 432.655 10.0296 421.858 6.87386C407.461 2.66586 394.369 13.7667 390.807 26.1177Z" fill="#222327"/>
+<path d="M456.493 116.538C456.493 147.618 426.406 159.171 385.366 159.171C344.326 159.171 314.92 147.618 314.92 116.538C314.92 80.3852 344.326 48.3252 385.366 48.3252C426.406 48.3252 456.493 77.6567 456.493 116.538Z" fill="#F3D6DD"/>
+<path d="M371.223 110.147C371.223 120.436 364.64 131.723 355.442 131.723C346.243 131.723 331.384 123.339 331.384 107.97C331.384 93.532 347.436 88.3971 364.024 91.0337C374.191 92.6497 371.223 99.8579 371.223 110.147Z" fill="#222327"/>
+<path d="M363.527 109.106C363.527 110.649 363.064 111.9 360.751 111.9C358.438 111.9 357.975 110.649 357.975 109.106C357.975 107.563 358.9 106.312 360.751 106.312C362.602 106.312 363.527 107.563 363.527 109.106Z" fill="white"/>
+<path d="M399.207 110.147C399.207 120.436 405.79 131.723 414.988 131.723C424.187 131.723 439.046 123.339 439.046 107.97C439.046 93.532 422.994 88.3971 406.406 91.0337C396.239 92.6497 399.207 99.8579 399.207 110.147Z" fill="#222327"/>
+<path d="M406.904 109.106C406.904 110.649 407.366 111.9 409.68 111.9C411.993 111.9 412.456 110.649 412.456 109.106C412.456 107.563 411.53 106.312 409.68 106.312C407.829 106.312 406.904 107.563 406.904 109.106Z" fill="white"/>
+<path d="M374.725 124.95C374.12 124.064 372.911 123.836 372.025 124.441C371.139 125.046 370.911 126.255 371.516 127.141L374.725 124.95ZM384.893 122.813L386.731 122.186C386.463 121.399 385.724 120.871 384.893 120.871C384.061 120.871 383.322 121.399 383.054 122.186L384.893 122.813ZM398.269 127.141C398.874 126.255 398.646 125.046 397.76 124.441C396.874 123.836 395.665 124.064 395.06 124.95L398.269 127.141ZM371.516 127.141C372.022 127.882 372.936 128.868 374.159 129.683C375.395 130.505 377.052 131.22 379.007 131.22V127.334C378.018 127.334 377.1 126.972 376.312 126.448C375.513 125.916 374.955 125.286 374.725 124.95L371.516 127.141ZM379.007 131.22C381.441 131.22 383.234 129.481 384.331 128.02C385.494 126.471 386.315 124.66 386.731 123.441L383.054 122.186C382.734 123.121 382.083 124.542 381.224 125.686C380.298 126.919 379.515 127.334 379.007 127.334V131.22ZM383.054 123.441C383.47 124.66 384.291 126.471 385.454 128.02C386.551 129.481 388.344 131.22 390.778 131.22V127.334C390.27 127.334 389.488 126.919 388.561 125.686C387.702 124.542 387.051 123.121 386.731 122.186L383.054 123.441ZM390.778 131.22C392.733 131.22 394.39 130.505 395.626 129.683C396.849 128.868 397.763 127.882 398.269 127.141L395.06 124.95C394.83 125.286 394.272 125.916 393.473 126.448C392.685 126.972 391.767 127.334 390.778 127.334V131.22Z" fill="#222327"/>
+<path d="M394.692 121.153C394.692 122.636 388.094 124.521 385.773 125.139C385.248 125.278 384.705 125.278 384.18 125.139C381.859 124.521 375.261 122.636 375.261 121.153C375.261 119.352 380.633 117.427 384.976 117.427C389.32 117.427 394.692 119.352 394.692 121.153Z" fill="#222327"/>
+<path d="M383.822 73.2575C356.823 73.2575 346.901 63.7413 345.296 58.1752L358.138 44.1702L385.963 39.3223L424.489 58.1752C422.17 62.6639 410.851 73.2575 383.822 73.2575Z" fill="#222327"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M387.558 175.604C443.351 175.604 484.252 159.828 484.252 117.386C484.252 64.2918 443.351 24.2383 387.558 24.2383C331.765 24.2383 291.788 68.0178 291.788 117.386C291.788 159.828 331.765 175.604 387.558 175.604ZM385.367 159.302C426.407 159.302 456.493 147.749 456.493 116.669C456.493 77.7875 426.407 48.456 385.367 48.456C344.327 48.456 314.921 80.5161 314.921 116.669C314.921 147.749 344.327 159.302 385.367 159.302Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M431.252 172.367C418.319 175.216 403.55 176.512 387.558 176.512C372.948 176.512 359.422 175.43 347.415 173.071C342.094 185.882 336.736 209.862 336.736 226.269C336.736 248.878 362.813 256.574 387.867 255.612C412.921 254.65 440.02 252.726 440.532 226.269C440.906 206.882 436.344 183.862 431.252 172.367Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M336.736 220.887C347.703 224.845 364.527 228.037 388.528 227.312C409.246 226.687 426.789 224.101 440.428 221.07C440.153 202.637 435.876 181.981 431.141 171.292C418.208 174.141 403.439 175.437 387.447 175.437C372.836 175.437 359.311 174.355 347.304 171.996C342.432 183.726 337.529 204.817 336.736 220.887Z" fill="#222327"/>
+<path d="M410.578 202.533C413.031 180.353 424.226 174.085 434.749 171.032C439.03 169.791 445.986 169.955 449.731 171.571C454.266 173.527 459.363 177.496 463.109 186.653C466.854 195.81 471.578 209.536 473.718 223.541L473.747 223.728C475.889 237.736 479.154 259.092 436.537 259.092C401.424 259.092 408.346 222.722 410.578 202.533Z" fill="#3786E2"/>
+<path d="M429.012 216.844C418.831 211.178 415.125 198.306 420.733 188.094L421.241 187.17C425.923 178.646 435.811 174.464 445.173 177.049C458.205 180.648 464.566 195.472 458.207 207.424L456.765 210.133C451.618 219.505 439.871 222.888 430.527 217.688L429.012 216.844Z" fill="#222327"/>
+<path d="M343.431 188.528C341.719 190.683 339.329 204.508 338.08 210.613C337.545 210.613 334.335 209.715 333.8 209.536C333.264 203.072 338.08 188.528 343.431 188.528Z" fill="#1A1A1C"/>
+<rect x="370.721" y="180.988" width="5.35087" height="16.1596" rx="2.67543" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M370.721 193.916V194.473C370.721 195.951 371.919 197.149 373.397 197.149C374.874 197.149 376.072 195.951 376.072 194.473V193.916H370.721Z" fill="#256FC5"/>
+<rect x="397.475" y="180.988" width="5.35087" height="16.1596" rx="2.67543" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M397.475 193.916V194.473C397.475 195.951 398.673 197.149 400.151 197.149C401.628 197.149 402.826 195.951 402.826 194.473V193.916H397.475Z" fill="#256FC5"/>
+<path d="M387.843 257.477C386.238 269.866 381.957 272.021 377.676 272.559L379.282 262.325C381.422 259.452 388.673 251.067 387.843 257.477Z" fill="white"/>
+<path d="M388.98 257.679C390.585 270.068 395.335 273.367 404.967 273.367L397.541 262.527C395.401 259.654 388.15 251.269 388.98 257.679Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M452.44 233.268C453.74 234.76 454.481 236.755 454.666 239.113C455.026 243.702 450.709 245.762 444.636 246.246C438.564 246.729 434.079 245.369 433.719 240.78C433.549 238.623 433.939 236.597 434.932 234.913C434.732 234.684 434.569 234.42 434.457 234.124C433.891 232.617 434.657 230.406 435.975 229.904C437.387 229.367 438.791 230.074 439.582 231.155C440.687 230.742 441.954 230.466 443.388 230.351C444.783 230.24 446.048 230.29 447.185 230.486C447.735 229.17 449.088 228.088 450.674 228.417C452.053 228.704 453.154 230.767 452.831 232.344C452.761 232.682 452.625 232.992 452.44 233.268Z" fill="#2D68AE"/>
+<path d="M442.628 238.688C442.732 240.019 442.029 241.545 440.885 241.636C439.742 241.727 437.81 240.789 437.653 238.801C437.507 236.933 439.45 236.109 441.539 236.286C442.819 236.395 442.523 237.357 442.628 238.688Z" fill="#3475C2"/>
+<path d="M440.473 238.659C440.494 238.92 440.588 239.125 440.979 239.094C441.37 239.063 441.432 238.845 441.411 238.584C441.391 238.324 441.218 238.125 440.905 238.15C440.592 238.175 440.453 238.398 440.473 238.659Z" fill="white"/>
+<path d="M445.542 238.456C445.647 239.787 446.58 241.182 447.723 241.091C448.867 241 450.628 239.769 450.472 237.78C450.326 235.912 448.278 235.406 446.243 235.912C444.995 236.221 445.438 237.125 445.542 238.456Z" fill="#3475C2"/>
+<path d="M447.665 238.088C447.686 238.349 447.624 238.566 447.234 238.597C446.843 238.628 446.748 238.423 446.728 238.163C446.707 237.902 446.847 237.678 447.159 237.653C447.472 237.628 447.645 237.827 447.665 238.088Z" fill="white"/>
+<rect width="23.965" height="44.0725" rx="6" transform="matrix(0.984609 0.174771 -0.172533 0.985004 550.974 187.466)" fill="#DC9759"/>
+<ellipse cx="38.0135" cy="38.2516" rx="38.0135" ry="38.2516" transform="matrix(0.984609 0.174771 -0.172533 0.985004 535.076 129.748)" fill="#54B858"/>
+<ellipse cx="38.0135" cy="38.2516" rx="38.0135" ry="38.2516" transform="matrix(0.984609 0.174771 -0.172533 0.985004 535.076 129.748)" fill="url(#paint1_linear_53792_10821)"/>
+<rect width="23.9789" height="44.0472" rx="6" transform="matrix(0.938958 0.344031 -0.340018 0.940419 648.901 211.826)" fill="#DC9759"/>
+<ellipse cx="38.0355" cy="38.2296" rx="38.0355" ry="38.2296" transform="matrix(0.938958 0.344031 -0.340018 0.940419 643.202 152.206)" fill="#54B858"/>
+<ellipse cx="38.0355" cy="38.2296" rx="38.0355" ry="38.2296" transform="matrix(0.938958 0.344031 -0.340018 0.940419 643.202 152.206)" fill="url(#paint2_linear_53792_10821)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_53792_10821" x1="373" y1="203.479" x2="373" y2="496.245" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E18745"/>
+<stop offset="1" stop-color="#D7A37E" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_53792_10821" x1="38.0135" y1="0" x2="38.0135" y2="76.5031" gradientUnits="userSpaceOnUse">
+<stop stop-color="#32A737"/>
+<stop offset="1" stop-color="#54B858" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_53792_10821" x1="38.0355" y1="0" x2="38.0355" y2="76.4593" gradientUnits="userSpaceOnUse">
+<stop stop-color="#32A737"/>
+<stop offset="1" stop-color="#54B858" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_53792_10821">
+<rect width="746" height="340" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/svgs/btn_visibility_off_24px.svg b/public/svgs/btn_visibility_off_24px.svg
new file mode 100644
index 000000000..c0304b883
--- /dev/null
+++ b/public/svgs/btn_visibility_off_24px.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7726 12.9731L14.6496 11.85C14.8201 10.9603 14.5861 10.2013 13.9477 9.57309C13.3092 8.94489 12.5432 8.70386 11.6496 8.85001L10.5265 7.72696C10.7586 7.61926 10.9974 7.5417 11.2429 7.49426C11.4884 7.44683 11.7406 7.42311 11.9996 7.42311C13.1342 7.42311 14.0973 7.81895 14.889 8.61061C15.6807 9.40228 16.0765 10.3654 16.0765 11.5C16.0765 11.759 16.0544 12.0112 16.0101 12.2567C15.9659 12.5022 15.8867 12.741 15.7726 12.9731ZM18.9534 16.0846L17.8496 15.05C18.4829 14.5667 19.0496 14.0292 19.5496 13.4375C20.0496 12.8458 20.4663 12.2 20.7996 11.5C19.9663 9.81668 18.7621 8.47918 17.1871 7.48751C15.6121 6.49585 13.8829 6.00001 11.9996 6.00001C11.5163 6.00001 11.0454 6.03335 10.5871 6.10001C10.1288 6.16668 9.66625 6.26668 9.19959 6.40001L8.03424 5.23466C8.67012 4.98338 9.31851 4.79812 9.97941 4.67889C10.6403 4.55965 11.3137 4.50004 11.9996 4.50004C14.1483 4.50004 16.122 5.05837 17.9207 6.17504C19.7194 7.2917 21.1028 8.8026 22.0707 10.7077C22.1374 10.8346 22.1858 10.9625 22.2159 11.0914C22.246 11.2202 22.2611 11.3564 22.2611 11.5C22.2611 11.6436 22.2486 11.7798 22.2236 11.9087C22.1986 12.0375 22.1528 12.1654 22.0861 12.2923C21.7322 13.0449 21.288 13.7397 20.7534 14.3769C20.2188 15.0141 19.6188 15.5833 18.9534 16.0846ZM11.9996 18.5C9.89447 18.5 7.96499 17.9375 6.21116 16.8125C4.45731 15.6875 3.06308 14.2058 2.02846 12.3673C1.94513 12.2404 1.88424 12.1026 1.84579 11.9539C1.80732 11.8051 1.78809 11.6539 1.78809 11.5C1.78809 11.3462 1.80475 11.1974 1.83809 11.0539C1.87142 10.9103 1.92975 10.7699 2.01309 10.6327C2.38489 9.95323 2.80604 9.30611 3.27656 8.69136C3.74708 8.07661 4.2881 7.52565 4.89964 7.03849L2.64194 4.76539C2.50347 4.61667 2.4352 4.44007 2.43714 4.23559C2.43905 4.0311 2.51244 3.85643 2.65731 3.71156C2.80218 3.56669 2.97782 3.49426 3.18424 3.49426C3.39064 3.49426 3.56627 3.56669 3.71114 3.71156L20.288 20.2885C20.4265 20.4269 20.4999 20.5984 20.5082 20.8029C20.5165 21.0073 20.4432 21.1872 20.288 21.3423C20.1432 21.4872 19.9675 21.5596 19.7611 21.5596C19.5547 21.5596 19.3791 21.4872 19.2342 21.3423L15.715 17.8538C15.1252 18.082 14.5191 18.2468 13.8967 18.3481C13.2743 18.4493 12.6419 18.5 11.9996 18.5ZM5.95346 8.09229C5.36756 8.54485 4.84095 9.05672 4.37364 9.62789C3.90632 10.199 3.51497 10.8231 3.19959 11.5C4.03292 13.1833 5.23709 14.5208 6.81209 15.5125C8.38709 16.5042 10.1163 17 11.9996 17C12.4291 17 12.8519 16.9712 13.2679 16.9135C13.6839 16.8558 14.0971 16.7667 14.5073 16.6462L13.2419 15.35C13.0393 15.4384 12.8371 15.4984 12.6352 15.5298C12.4332 15.5612 12.2214 15.5769 11.9996 15.5769C10.865 15.5769 9.90185 15.1811 9.11019 14.3894C8.31852 13.5977 7.92269 12.6346 7.92269 11.5C7.92269 11.2782 7.93999 11.0664 7.97461 10.8644C8.00923 10.6625 8.06756 10.4603 8.14961 10.2577L5.95346 8.09229Z" fill="#9FA6B2"/>
+</svg>
diff --git a/public/svgs/btn_visibility_on_24px.svg b/public/svgs/btn_visibility_on_24px.svg
new file mode 100644
index 000000000..c1f833ed0
--- /dev/null
+++ b/public/svgs/btn_visibility_on_24px.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0021 15.5769C13.1352 15.5769 14.0976 15.1803 14.8892 14.3871C15.6809 13.5939 16.0767 12.6308 16.0767 11.4977C16.0767 10.3646 15.6802 9.40224 14.887 8.61058C14.0938 7.81891 13.1307 7.42308 11.9976 7.42308C10.8645 7.42308 9.9021 7.81966 9.11044 8.61282C8.31877 9.40601 7.92294 10.3692 7.92294 11.5023C7.92294 12.6353 8.31952 13.5977 9.11269 14.3894C9.90587 15.181 10.869 15.5769 12.0021 15.5769ZM11.9998 14.2C11.2498 14.2 10.6123 13.9375 10.0873 13.4125C9.56234 12.8875 9.29984 12.25 9.29984 11.5C9.29984 10.75 9.56234 10.1125 10.0873 9.58748C10.6123 9.06248 11.2498 8.79998 11.9998 8.79998C12.7498 8.79998 13.3873 9.06248 13.9123 9.58748C14.4373 10.1125 14.6998 10.75 14.6998 11.5C14.6998 12.25 14.4373 12.8875 13.9123 13.4125C13.3873 13.9375 12.7498 14.2 11.9998 14.2ZM11.9998 18.5C9.89472 18.5 7.96941 17.9384 6.22391 16.8153C4.47839 15.6923 3.08513 14.2147 2.04411 12.3827C1.96078 12.2391 1.89988 12.0944 1.86141 11.9485C1.82294 11.8027 1.80371 11.653 1.80371 11.4995C1.80371 11.346 1.82294 11.1965 1.86141 11.051C1.89988 10.9054 1.96078 10.7609 2.04411 10.6173C3.08513 8.78525 4.47839 7.30769 6.22391 6.18463C7.96941 5.06154 9.89472 4.5 11.9998 4.5C14.105 4.5 16.0303 5.06154 17.7758 6.18463C19.5213 7.30769 20.9145 8.78525 21.9556 10.6173C22.0389 10.7609 22.0998 10.9056 22.1383 11.0514C22.1767 11.1973 22.196 11.347 22.196 11.5005C22.196 11.654 22.1767 11.8035 22.1383 11.949C22.0998 12.0945 22.0389 12.2391 21.9556 12.3827C20.9145 14.2147 19.5213 15.6923 17.7758 16.8153C16.0303 17.9384 14.105 18.5 11.9998 18.5ZM11.9998 17C13.8832 17 15.6123 16.5041 17.1873 15.5125C18.7623 14.5208 19.9665 13.1833 20.7998 11.5C19.9665 9.81664 18.7623 8.47914 17.1873 7.48748C15.6123 6.49581 13.8832 5.99998 11.9998 5.99998C10.1165 5.99998 8.38734 6.49581 6.81234 7.48748C5.23734 8.47914 4.03317 9.81664 3.19984 11.5C4.03317 13.1833 5.23734 14.5208 6.81234 15.5125C8.38734 16.5041 10.1165 17 11.9998 17Z" fill="#9FA6B2"/>
+</svg>
diff --git a/public/svgs/ic_facebook.svg b/public/svgs/ic_facebook.svg
new file mode 100644
index 000000000..b9c9d4939
--- /dev/null
+++ b/public/svgs/ic_facebook.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 9.90328C1 14.3778 4.24975 18.0985 8.5 18.853V12.3528H6.25V9.85303H8.5V7.85278C8.5 5.60278 9.94975 4.35328 12.0002 4.35328C12.6497 4.35328 13.3503 4.45303 13.9998 4.55278V6.85303H12.85C11.7498 6.85303 11.5 7.40278 11.5 8.10328V9.85303H13.9L13.5002 12.3528H11.5V18.853C15.7502 18.0985 19 14.3785 19 9.90328C19 4.92553 14.95 0.853027 10 0.853027C5.05 0.853027 1 4.92553 1 9.90328Z" fill="white"/>
+</svg>
diff --git a/public/svgs/ic_instagram.svg b/public/svgs/ic_instagram.svg
new file mode 100644
index 000000000..0b9337b07
--- /dev/null
+++ b/public/svgs/ic_instagram.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.49787 7.51849C7.93707 7.51849 6.66333 8.79222 6.66333 10.353C6.66333 11.9138 7.93707 13.1876 9.49787 13.1876C11.0587 13.1876 12.3324 11.9138 12.3324 10.353C12.3324 8.79222 11.0587 7.51849 9.49787 7.51849ZM17.9994 10.353C17.9994 9.17923 18.01 8.01607 17.9441 6.84441C17.8782 5.48349 17.5677 4.27567 16.5725 3.2805C15.5752 2.2832 14.3695 1.97487 13.0086 1.90895C11.8348 1.84303 10.6717 1.85366 9.5 1.85366C8.32621 1.85366 7.16305 1.84303 5.99138 1.90895C4.63046 1.97487 3.42264 2.28533 2.42747 3.2805C1.43017 4.2778 1.12184 5.48349 1.05592 6.84441C0.99 8.0182 1.00063 9.18136 1.00063 10.353C1.00063 11.5247 0.99 12.69 1.05592 13.8616C1.12184 15.2226 1.4323 16.4304 2.42747 17.4256C3.42477 18.4229 4.63046 18.7312 5.99138 18.7971C7.16517 18.863 8.32833 18.8524 9.5 18.8524C10.6738 18.8524 11.837 18.863 13.0086 18.7971C14.3695 18.7312 15.5774 18.4207 16.5725 17.4256C17.5698 16.4283 17.8782 15.2226 17.9441 13.8616C18.0121 12.69 17.9994 11.5268 17.9994 10.353ZM9.49787 14.7143C7.08437 14.7143 5.13655 12.7665 5.13655 10.353C5.13655 7.93952 7.08437 5.99171 9.49787 5.99171C11.9114 5.99171 13.8592 7.93952 13.8592 10.353C13.8592 12.7665 11.9114 14.7143 9.49787 14.7143ZM14.0378 6.83165C13.4743 6.83165 13.0193 6.37659 13.0193 5.81308C13.0193 5.24958 13.4743 4.79452 14.0378 4.79452C14.6013 4.79452 15.0564 5.24958 15.0564 5.81308C15.0565 5.94689 15.0303 6.07942 14.9792 6.20307C14.9281 6.32672 14.853 6.43908 14.7584 6.53369C14.6638 6.62831 14.5515 6.70333 14.4278 6.75446C14.3041 6.80558 14.1716 6.83182 14.0378 6.83165Z" fill="white"/>
+</svg>
diff --git a/public/svgs/ic_twitter.svg b/public/svgs/ic_twitter.svg
new file mode 100644
index 000000000..14a6069a1
--- /dev/null
+++ b/public/svgs/ic_twitter.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.7029 4.11415C19.0071 4.42248 18.2596 4.63082 17.4737 4.72498C18.2846 4.23981 18.8912 3.4762 19.1804 2.57665C18.4186 3.02914 17.5849 3.34765 16.7154 3.51832C16.1307 2.89404 15.3563 2.48025 14.5124 2.34121C13.6684 2.20217 12.8022 2.34564 12.0481 2.74936C11.2941 3.15308 10.6944 3.79445 10.3422 4.5739C9.99003 5.35335 9.90503 6.22727 10.1004 7.05998C8.55682 6.98248 7.04677 6.58127 5.66827 5.8824C4.28977 5.18353 3.07362 4.20262 2.09875 3.00332C1.76542 3.57832 1.57375 4.24498 1.57375 4.95498C1.57338 5.59415 1.73078 6.22352 2.03198 6.78726C2.33319 7.351 2.76888 7.83168 3.30042 8.18665C2.68398 8.16704 2.08114 8.00047 1.54208 7.70082V7.75082C1.54202 8.64727 1.85211 9.51613 2.41974 10.21C2.98736 10.9038 3.77756 11.3799 4.65625 11.5575C4.0844 11.7122 3.48486 11.735 2.90292 11.6242C3.15083 12.3955 3.63375 13.07 4.28406 13.5533C4.93437 14.0365 5.71951 14.3043 6.52958 14.3192C5.15444 15.3987 3.45616 15.9842 1.70792 15.9816C1.39823 15.9817 1.08881 15.9636 0.78125 15.9275C2.55581 17.0685 4.62153 17.674 6.73125 17.6716C13.8729 17.6716 17.7771 11.7566 17.7771 6.62665C17.7771 6.45998 17.7729 6.29165 17.7654 6.12498C18.5248 5.57579 19.1803 4.89573 19.7013 4.11665L19.7029 4.11415Z" fill="white"/>
+</svg>
diff --git a/public/svgs/ic_youtube.svg b/public/svgs/ic_youtube.svg
new file mode 100644
index 000000000..895e50776
--- /dev/null
+++ b/public/svgs/ic_youtube.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_28783_16854)">
+<path d="M19.5829 5.4224C19.4696 5.01843 19.249 4.65269 18.9445 4.36407C18.6314 4.06657 18.2477 3.85376 17.8295 3.74573C16.2645 3.33323 9.99454 3.33323 9.99454 3.33323C7.38065 3.30349 4.7674 3.4343 2.16954 3.7249C1.75136 3.84091 1.36834 4.05847 1.05454 4.35823C0.746204 4.6549 0.522871 5.02073 0.406204 5.42157C0.125949 6.93135 -0.0102189 8.46435 -0.000462243 9.9999C-0.0104622 11.5341 0.125371 13.0666 0.406204 14.5782C0.520371 14.9774 0.742871 15.3416 1.05204 15.6357C1.3612 15.9299 1.7462 16.1424 2.16954 16.2549C3.75537 16.6666 9.99454 16.6666 9.99454 16.6666C12.6118 16.6963 15.2283 16.5655 17.8295 16.2749C18.2477 16.1669 18.6314 15.9541 18.9445 15.6566C19.2489 15.368 19.4693 15.0022 19.582 14.5982C19.8696 13.089 20.0094 11.5554 19.9995 10.0191C20.0212 8.47624 19.8815 6.93537 19.5829 5.42157V5.4224ZM8.0012 12.8532V7.1474L13.2179 10.0007L8.0012 12.8532Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_28783_16854">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/styles/Nav.css b/styles/Nav.css
index 42732a13a..8dca29be4 100644
--- a/styles/Nav.css
+++ b/styles/Nav.css
@@ -1,5 +1,5 @@
 .nav-container {
-  border-bottom: 1px solid #dfdfdf;
+  border-bottom: 1px solid var(--border);
 }
 
 .nav-bar {
@@ -16,6 +16,8 @@
 }
 
 .nav-logo {
+  width: 153px;
+  height: 51px;
   display: flex;
   align-items: center;
   gap: 9px;
@@ -30,12 +32,12 @@
 }
 
 .nav-board a {
-  color: #4b5563;
+  color: var(--gray600);
   text-decoration: none;
 }
 
 .nav-board-used-market.active {
-  color: #3692ff;
+  color: var(--blue);
 }
 
 .nav-icon {
@@ -44,11 +46,49 @@
   height: 40px;
 }
 
+.login-button {
+  background-color: var(--blue);
+  color: var(--gray100);
+  padding: 12px 32px;
+  border-radius: 8px;
+  font-size: 16px;
+  text-decoration: none;
+}
+
+.login-button:hover {
+  background-color: var(--darkblue);
+}
+
+.profile-icon {
+  position: relative;
+}
+
+.logout-button {
+  position: absolute;
+  top: 60px;
+  background-color: var(--white);
+  border: 1px solid var(--gray200);
+  color: var(--gray500);
+  padding: 14px 30px;
+  border-radius: 8px;
+  font-size: 16px;
+  min-width: 120px;
+}
+
+.logout-button:hover,
+.profile-icon:hover {
+  cursor: pointer;
+}
+
 @media (max-width: 1279px) {
   .nav-bar {
     padding-left: 24px;
     padding-right: 24px;
   }
+
+  .logout-button {
+    right: 20px;
+  }
 }
 
 @media (max-width: 767px) {
@@ -58,7 +98,7 @@
   }
 
   .nav-front {
-    gap: 12px;
+    gap: 8px;
   }
 
   .nav-logo {
@@ -70,8 +110,4 @@
     gap: 8px;
     font-size: 16px;
   }
-
-  .nav-logo img:first-child {
-    display: none;
-  }
 }
diff --git a/styles/additem.module.css b/styles/additem.module.css
new file mode 100644
index 000000000..520055942
--- /dev/null
+++ b/styles/additem.module.css
@@ -0,0 +1,158 @@
+.add_item_form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 24px;
+}
+
+.add_item_form_total_container {
+  display: flex;
+  flex-direction: column;
+  width: 1200px;
+  gap: 24px;
+}
+
+.add_item_form_header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.add_item_form_title {
+  font-size: 20px;
+  line-height: 32px;
+  font-weight: 700;
+  color: var(--gray800);
+}
+
+.add_item_submit_button {
+  width: 74px;
+  height: 42px;
+  border-radius: 8px;
+  background-color: var(--gray400);
+  border-style: none;
+  color: var(--gray100);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+  cursor: not-allowed;
+}
+
+.add_item_submit_button:enabled {
+  background-color: var(--blue);
+  cursor: pointer;
+}
+
+.add_item_submit_button:enabled:hover {
+  background-color: var(--darkblue);
+}
+
+.add_item_form_container {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.add_item_img_container,
+.add_item_name_container,
+.add_item_content_container,
+.add_item_price_container,
+.add_item_tags_container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.add_item_img_title,
+.add_item_name_title,
+.add_item_content_title,
+.add_item_price_title,
+.add_item_tags_title {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 26px;
+  color: var(--gray800);
+}
+
+.add_item_img_preview {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.add_item_name_input,
+.add_item_price_input,
+.add_item_tag_input {
+  background-color: var(--gray100);
+  border: 1px solid var(--gray100);
+  border-radius: 12px;
+  padding: 16px 24px;
+}
+
+.add_item_content_container textarea {
+  background-color: var(--gray100);
+  border: 1px solid var(--gray100);
+  border-radius: 12px;
+  padding: 16px 24px 240px 24px;
+}
+
+.add_item_name_input:focus,
+.add_item_price_input:focus,
+.add_item_tag_input:focus,
+.add_item_content_textarea:focus {
+  border-color: var(--blue);
+  outline: none;
+}
+
+.add_item_name_input::placeholder,
+.add_item_price_input::placeholder,
+.add_item_tag_input::placeholder,
+.add_item_content_textarea::placeholder {
+  color: var(--gray400);
+  font-size: 16px;
+  line-height: 26px;
+}
+
+.add_item_tags_list {
+  display: flex;
+  gap: 12px;
+}
+
+.add_item_tag {
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--gray100);
+  border-radius: 26px;
+  padding: 8px 16px;
+  font-size: 16px;
+  color: var(--gray800);
+  line-height: 26px;
+}
+
+.add_item_tag_remove_button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 8;
+  padding-right: 0;
+}
+
+.add_item_tag_remove_button img {
+  width: 20px;
+  height: 20px;
+}
+
+@media (max-width: 1279px) {
+  .add_item_form_total_container {
+    display: flex;
+    flex-direction: column;
+    width: 90%;
+    gap: 24px;
+  }
+
+  .add_item_form_container {
+    gap: 24px;
+  }
+}
diff --git a/styles/articleId.module.css b/styles/articleId.module.css
index 45571f025..20170661b 100644
--- a/styles/articleId.module.css
+++ b/styles/articleId.module.css
@@ -17,7 +17,7 @@
 
 .article_title {
   font-size: 20px;
-  color: #1f2937;
+  color: var(--gray800);
   margin-bottom: 16px;
 }
 
@@ -26,25 +26,25 @@
   align-items: center;
   margin-bottom: 24px;
   padding-bottom: 16px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--gray200);
 }
 
 .article_profile_front {
   display: flex;
   align-items: center;
-  border-right: 1px solid #e5e7eb;
+  border-right: 1px solid var(--gray200);
 }
 
 .article_writer {
   font-size: 14px;
-  color: #4b5563;
+  color: var(--gray600);
   margin-left: 16px;
   margin-right: 8px;
 }
 
 .article_date {
   font-size: 14px;
-  color: #9ca3af;
+  color: var(--gray400);
   margin-right: 32px;
 }
 
@@ -52,9 +52,9 @@
   display: flex;
   align-items: center;
   font-size: 16px;
-  color: #6b7280;
+  color: var(--gray500);
   gap: 3px;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--gray200);
   border-radius: 35px;
   padding: 4px 12px;
   margin-left: 32px;
@@ -62,7 +62,7 @@
 
 .article_content {
   font-size: 18px;
-  color: #1f2937;
+  color: var(--gray800);
 }
 
 .article_leave_comment {
@@ -75,11 +75,11 @@
 .article_comment_title {
   font-weight: 700;
   font-size: 16px;
-  color: #111827;
+  color: var(--gray900);
 }
 
 .article_comment_input {
-  background-color: #f3f4f6;
+  background-color: var(--gray100);
   border-radius: 12px;
   border: none;
   padding: 16px 24px;
@@ -89,20 +89,20 @@
 }
 
 .article_comment_input::placeholder {
-  color: #9ca3af;
+  color: var(--gray400);
   font-size: 16px;
 }
 
 .article_comment_input:focus {
-  outline: 1px solid #3692ff;
+  outline: 1px solid var(--blue);
 }
 
 .btn {
-  background-color: #9ca3af;
+  background-color: var(--gray400);
   padding: 12px 23px;
   border: none;
   border-radius: 8px;
-  color: #f3f4f6;
+  color: var(--gray100);
   font-size: 16px;
   width: 74px;
   align-self: flex-end;
@@ -119,7 +119,7 @@
 }
 
 .btn_enabled:hover {
-  background-color: #2e7ae4;
+  background-color: var(--darkblue);
   cursor: pointer;
 }
 
@@ -137,26 +137,26 @@
 
 .content {
   font-size: 14px;
-  color: #1f2937;
+  color: var(--gray800);
   margin-bottom: 24px;
 }
 
 .profile {
   display: flex;
   gap: 8px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--gray200);
   padding-bottom: 12px;
 }
 
 .writer_nickname {
   font-size: 12px;
-  color: #4b5563;
+  color: var(--gray600);
   margin-bottom: 4px;
 }
 
 .comment_date {
   font-size: 12px;
-  color: #9ca3af;
+  color: var(--gray400);
 }
 
 .back_btn {
@@ -165,7 +165,7 @@
   border-radius: 40px;
   padding: 12px 64px;
   font-size: 18px;
-  color: #f3f4f6;
+  color: var(--gray100);
   display: flex;
   align-items: center;
   margin-top: 32px;
diff --git a/styles/bestitem.module.css b/styles/bestitem.module.css
index 2e65e566c..0a988c9fe 100644
--- a/styles/bestitem.module.css
+++ b/styles/bestitem.module.css
@@ -39,7 +39,7 @@
   display: flex;
   gap: 4px;
   font-size: 12px;
-  color: #4b5563;
+  color: var(--gray600);
 }
 
 @media (max-width: 1279px) {
diff --git a/styles/board.module.css b/styles/board.module.css
index 658597a37..53207e625 100644
--- a/styles/board.module.css
+++ b/styles/board.module.css
@@ -24,14 +24,14 @@
 }
 
 .container {
-  background-color: #f9fafb;
+  background-color: var(--gray50);
   padding: 0 24px;
 }
 
 .clip {
-  background-color: #3692ff;
-  font-size: #3692ff;
-  color: #ffffff;
+  background-color: var(--blue);
+  font-size: var(--blue);
+  color: var(--white);
   width: 60px;
   padding: 7px 24px;
   border-bottom-left-radius: 16px;
@@ -51,7 +51,7 @@
 .image_container {
   width: 72px;
   height: 72px;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--gray200);
   border-radius: 6px;
   display: flex;
   justify-content: center;
@@ -62,7 +62,7 @@
   font-size: 20px;
   font-weight: 600;
   line-height: 32px;
-  color: #1f2937;
+  color: var(--gray800);
 }
 
 .best_article_bottom {
@@ -78,7 +78,7 @@
 .best_article_author {
   font-size: 14px;
   font-weight: 400;
-  color: #4b5563;
+  color: var(--gray600);
   margin-right: 8px;
 }
 
@@ -86,12 +86,12 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  color: #6b7280;
+  color: var(--gray500);
 }
 
 .best_article_date {
   font-size: 14px;
-  color: #9ca3af;
+  color: var(--gray400);
 }
 
 .h1,
@@ -99,7 +99,7 @@
   font-size: 20px;
   font-weight: 600;
   line-height: 32px;
-  color: #1f2937;
+  color: var(--gray800);
 }
 
 .article_container {
@@ -116,16 +116,16 @@
 }
 
 .button {
-  background-color: #3692ff;
+  background-color: var(--blue);
   border: none;
-  color: #ffffff;
+  color: var(--white);
   padding: 12px 23px;
   border-radius: 8px;
 }
 
 .button:hover {
   cursor: pointer;
-  background-color: #2e7ae4;
+  background-color: var(--darkblue);
 }
 
 .article_controls {
@@ -136,8 +136,8 @@
 }
 
 .article_search {
-  background-color: #f3f4f6;
-  border: 1px solid #f3f4f6;
+  background-color: var(--gray100);
+  border: 1px solid var(--gray100);
   border-radius: 12px;
   padding: 0 20px;
   width: 100%;
@@ -148,7 +148,7 @@
 
 .search_button {
   border: none;
-  background-color: #f3f4f6;
+  background-color: var(--gray100);
   padding: 0;
 }
 
@@ -162,20 +162,20 @@
 
 .search_input {
   border: none;
-  background-color: #f3f4f6;
-  color: #9ca3af;
+  background-color: var(--gray100);
+  color: var(--gray400);
   outline: none;
   width: 100%;
 }
 
 .search_input::placeholder {
   font-size: 16px;
-  color: #9ca3af;
+  color: var(--gray400);
 }
 
 .dropdown_button {
-  border: 1px solid #e5e7eb;
-  background-color: #ffffff;
+  border: 1px solid var(--gray200);
+  background-color: var(--white);
   border-radius: 12px;
   padding: 12px 20px;
   font-size: 16px;
@@ -194,7 +194,7 @@
 
 .article_title {
   font-size: 20px;
-  color: #1f2937;
+  color: var(--gray800);
   font-weight: 600;
 }
 
@@ -202,7 +202,7 @@
   display: flex;
   justify-content: space-between;
   padding-bottom: 24px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--gray200);
   margin-bottom: 24px;
 }
 
@@ -214,12 +214,12 @@
 
 .article_author {
   font-size: 14px;
-  color: #4b5563;
+  color: var(--gray600);
 }
 
 .article_date {
   font-size: 14px;
-  color: #9ca3af;
+  color: var(--gray400);
 }
 
 .article_like {
@@ -227,7 +227,7 @@
   gap: 8px;
   align-items: center;
   font-size: 16px;
-  color: #6b7280;
+  color: var(--gray500);
   font-weight: 400;
 }
 
@@ -245,8 +245,8 @@
   position: absolute;
   top: 120%;
   text-align: center;
-  background-color: #ffffff;
-  border: 1px solid #e5e7eb;
+  background-color: var(--white);
+  border: 1px solid var(--gray200);
   border-radius: 8px;
   z-index: 1000;
   width: 130px;
@@ -256,11 +256,11 @@
   padding: 12px 16px;
   border-bottom: 1px solid #f0f0f0;
   cursor: pointer;
-  color: #1f2937;
+  color: var(--gray800);
 }
 
 .dropdown_options div:hover {
-  background-color: #f3f4f6;
+  background-color: var(--gray100);
 }
 
 @media (max-width: 1279px) {
diff --git a/styles/globals.css b/styles/globals.css
index ee5d89655..d9bbe88bb 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -10,3 +10,20 @@
   font-family: "Pretendard-Regular";
   margin: 0;
 }
+
+:root {
+  --gray900: #111827;
+  --gray800: #1f2937;
+  --gray700: #374151;
+  --gray600: #4b5563;
+  --gray500: #6b7280;
+  --gray400: #9ca3af;
+  --gray200: #e5e7eb;
+  --gray100: #f3f4f6;
+  --gray50: #f9fafb;
+  --blue: #3692ff;
+  --darkblue: #2e7ae4;
+  --border: #dfdfdf;
+  --white: #ffffff;
+  --red: #f74747;
+}
diff --git a/styles/index.module.css b/styles/index.module.css
new file mode 100644
index 000000000..b1519249c
--- /dev/null
+++ b/styles/index.module.css
@@ -0,0 +1,450 @@
+.btn_login:hover,
+.btn_catalog:hover {
+  background-color: var(--darkblue);
+  cursor: pointer;
+}
+
+.body_1 {
+  padding-top: 70px;
+}
+
+.header {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: flex-end;
+  background-color: #cfe5ff;
+  align-items: center;
+  height: 540px;
+}
+
+.header_container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 7px;
+}
+
+.header_banner {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  padding: 0px 0px 60px 0px;
+}
+
+.header_description {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+  color: var(--gray700);
+}
+
+.btn_catalog {
+  background-color: var(--blue);
+  border: 1px solid #cfe5ff;
+  border-radius: 40px;
+  padding: 16px 124px 16px 124px;
+  color: var(--gray100);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.section_container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+}
+
+.section_hotitem,
+.section_search,
+.section_register {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: var(--white);
+  padding: 138px 0 138px 0;
+  justify-content: center;
+  align-items: center;
+}
+
+.section_banner {
+  display: flex;
+  gap: 64px;
+}
+
+.section_hotitem_image,
+.section_search_image,
+.section_register_image {
+  width: 579px;
+  height: 444px;
+}
+
+.section_hotitem_container,
+.section_register_container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  justify-content: center;
+}
+
+.section_hotitem_description,
+.section_search_description,
+.section_register_description {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.section_search_container {
+  text-align: right;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  justify-content: center;
+}
+
+.section_title {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 26px;
+  color: var(--blue);
+}
+
+.section_hotitem_description_Bold,
+.section_search_description_Bold,
+.section_register_description_Bold {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+}
+
+.section_hotitem_description_Bold {
+  width: 222px;
+  word-break: keep-all;
+}
+
+.section_search_description_Bold,
+.section_register_description_Bold {
+  width: 293px;
+  word-break: keep-all;
+}
+
+.section_hotitem_description_regular,
+.section_search_description_regular,
+.section_register_description_regular {
+  font-size: 24px;
+  line-height: 32px;
+}
+
+.bottom {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: flex-end;
+  background-color: #cfe5ff;
+  align-items: center;
+  height: 540px;
+}
+
+.bottom_container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 69px;
+}
+
+.bottom_banner {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0px 0px 60px 0px;
+}
+
+.bottom_description {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+  color: var(--gray700);
+}
+
+.footer {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: var(--gray900);
+  padding: 32px 400px 32px 400px;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer_container {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.footer_codeit {
+  color: var(--gray400);
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.footer_Privacy_FAQ {
+  display: flex;
+  gap: 30px;
+  text-decoration: none;
+  color: var(--gray200);
+}
+
+.footer_sns {
+  display: flex;
+  gap: 12px;
+}
+
+.footer_privacy,
+.footer_FAQ,
+.link {
+  text-decoration: none;
+  color: inherit;
+}
+
+/* 모바일 미디어쿼리 */
+@media (max-width: 767px) {
+  .top {
+    padding: 0 16px;
+  }
+
+  .header {
+    padding-top: 48px;
+  }
+
+  .header_container {
+    flex-direction: column;
+    gap: 132px;
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  .header_banner {
+    padding-bottom: 0;
+  }
+
+  .header_description {
+    text-align: center;
+    font-size: 32px;
+    line-height: 44.8px;
+  }
+
+  .btn_catalog {
+    width: 240px;
+    height: 48px;
+    padding: 12px 71px 12px 71px;
+    font-size: 18px;
+    white-space: nowrap;
+  }
+
+  .header_image {
+    height: auto;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .section_container {
+    padding: 52px 15px 83px 15px;
+    gap: 40px;
+    box-sizing: border-box;
+  }
+
+  .section_hotitem,
+  .section_search,
+  .section_register {
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .section_banner {
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  .section_hotitem_image,
+  .section_search_image,
+  .section_register_image {
+    height: auto;
+    width: 100%;
+  }
+
+  .section_hotitem_container,
+  .section_register_container {
+    gap: 8px;
+  }
+
+  .section_search_container {
+    order: 2;
+  }
+
+  .section_search_image {
+    order: 1;
+  }
+
+  .section_hotitem_description,
+  .section_search_description,
+  .section_register_description {
+    gap: 16px;
+  }
+
+  .section_title {
+    font-size: 16px;
+    line-height: 26px;
+  }
+
+  .section_hotitem_description_Bold,
+  .section_search_description_Bold,
+  .section_register_description_Bold {
+    font-size: 24px;
+    line-height: 32px;
+    width: auto;
+  }
+
+  .section_hotitem_description_regular,
+  .section_search_description_regular,
+  .section_register_description_regular {
+    font-size: 16px;
+    line-height: 26px;
+  }
+
+  .bottom_image {
+    height: auto;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .bottom_container {
+    flex-direction: column;
+  }
+
+  .bottom_description {
+    font-size: 32px;
+    line-height: 44.8px;
+    text-align: center;
+  }
+
+  .footer {
+    padding: 32px 0 32px 0;
+  }
+
+  .footer_container {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    width: 311px;
+    gap: 32px;
+  }
+
+  .footer_codeit {
+    order: 2;
+  }
+}
+
+/* 태블릿 미디어쿼리 */
+@media (min-width: 768px) and (max-width: 1199px) {
+  .btn_catalog {
+    width: 357px;
+    height: 56px;
+    padding: 16px 124px 16px 124px;
+    font-size: 20px;
+    white-space: nowrap;
+  }
+
+  .header_image {
+    width: 744px;
+    height: 340px;
+  }
+
+  .section_container {
+    padding: 24px 0 56px 0;
+    gap: 52px;
+  }
+
+  .section_hotitem,
+  .section_search,
+  .section_register {
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .section_banner {
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  .section_hotitem_image,
+  .section_search_image,
+  .section_register_image {
+    width: 696px;
+    height: 524px;
+  }
+
+  .section_hotitem_container,
+  .section_register_container {
+    gap: 16px;
+  }
+
+  .section_hotitem_description {
+    gap: 24px;
+  }
+
+  .section_title {
+    font-size: 18px;
+  }
+
+  .section_hotitem_description_Bold,
+  .section_search_description_Bold,
+  .section_register_description_Bold {
+    font-size: 32px;
+    line-height: 42px;
+    width: auto;
+  }
+
+  .section_hotitem_description_regular,
+  .section_search_description_regular,
+  .section_register_description_regular {
+    font-size: 18px;
+  }
+
+  .section_search_container {
+    order: 2;
+  }
+
+  .section_search_image {
+    order: 1;
+  }
+
+  .bottom {
+    height: 927px;
+  }
+
+  .bottom_image {
+    width: 744px;
+    height: 397px;
+  }
+
+  .bottom_container {
+    flex-direction: column;
+    gap: 150px;
+  }
+
+  .bottom_description {
+    font-size: 40px;
+    line-height: 56px;
+    text-align: center;
+  }
+
+  .footer {
+    padding: 32px 104px 108px 104px;
+  }
+}
diff --git a/styles/itemcomment.module.css b/styles/itemcomment.module.css
index 725e9895f..54fa0424c 100644
--- a/styles/itemcomment.module.css
+++ b/styles/itemcomment.module.css
@@ -6,14 +6,14 @@
 }
 
 .item_inquiry_input {
-  background-color: #f3f4f6;
-  border: 1px solid #f3f4f6;
+  background-color: var(--gray100);
+  border: 1px solid var(--gray100);
   border-radius: 12px;
   padding: 16px 24px 70px 24px;
 }
 
 .item_inquiry_input:focus {
-  outline: 1px solid #3692ff;
+  outline: 1px solid var(--blue);
 }
 
 .item_inquiry_button_container {
@@ -23,23 +23,23 @@
 }
 
 .item_inquiry_button {
-  background-color: #9ca3af;
+  background-color: var(--gray400);
   border-style: none;
   border-radius: 8px;
   padding: 8px 23px;
-  color: #f3f4f6;
+  color: var(--gray100);
   font-size: 16px;
   line-height: 26px;
   cursor: not-allowed;
 }
 
 .item_inquiry_button:enabled {
-  background-color: #3692ff;
+  background-color: var(--blue);
   cursor: pointer;
 }
 
 .item_inquiry_button:enabled:hover {
-  background-color: #2e7ae4;
+  background-color: var(--darkblue);
 }
 
 .item_comments_section {
@@ -53,7 +53,7 @@
   display: flex;
   flex-direction: column;
   gap: 24px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--gray200);
   padding-bottom: 12px;
 }
 
@@ -70,7 +70,7 @@
   word-wrap: break-word;
   font-size: 14px;
   line-height: 24px;
-  color: #1f2937;
+  color: var(--gray800);
 }
 
 .comment_actions {
@@ -79,7 +79,7 @@
   width: 140px;
   display: flex;
   flex-direction: column;
-  background-color: #ffffff;
+  background-color: var(--white);
   border: 1px solid #d1d5db;
   border-radius: 8px;
   right: 0;
@@ -94,7 +94,7 @@
   font-size: 16px;
   line-height: 26px;
   padding: 10px 41.5px;
-  color: #6b7280;
+  color: var(--gray500);
 }
 
 .item_detail_more {
@@ -121,13 +121,13 @@
 .comment_author_nickname {
   font-size: 12px;
   line-height: 18px;
-  color: #4b5563;
+  color: var(--gray600);
 }
 
 .comment_updated_at {
   font-size: 12px;
   line-height: 18px;
-  color: #9ca3af;
+  color: var(--gray400);
 }
 
 @media (max-width: 1279px) {
diff --git a/styles/itemdetail.module.css b/styles/itemdetail.module.css
index 1676ec016..ea7cd791e 100644
--- a/styles/itemdetail.module.css
+++ b/styles/itemdetail.module.css
@@ -20,7 +20,7 @@
   flex-direction: row;
   gap: 24px;
   padding-bottom: 40px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--gray200);
 }
 
 .item_detail_image {
@@ -50,7 +50,7 @@
   flex-direction: column;
   gap: 16px;
   padding-bottom: 16px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--gray200);
 }
 
 .item_detail_name_container {
@@ -61,7 +61,7 @@
 .item_detail_name {
   font-size: 24px;
   font-weight: 600;
-  color: #1f2937;
+  color: var(--gray800);
   line-height: 32px;
 }
 
@@ -82,13 +82,13 @@
   font-size: 16px;
   font-weight: 600;
   line-height: 26px;
-  color: #4b5563;
+  color: var(--gray600);
 }
 
 .item_detail_description {
   font-size: 16px;
   line-height: 26px;
-  color: #1f2937;
+  color: var(--gray800);
 }
 
 .item_detail_info_bottom {
@@ -110,9 +110,9 @@
 }
 
 .item_detail_tag {
-  background-color: #f3f4f6;
+  background-color: var(--gray100);
   border-radius: 26px;
-  color: #1f2937;
+  color: var(--gray800);
   font-size: 16px;
   line-height: 26px;
   padding: 6px 16px;
@@ -136,18 +136,18 @@
 .item_detail_author_nickname {
   font-size: 14px;
   line-height: 24px;
-  color: #4b5563;
+  color: var(--gray600);
 }
 
 .item_detail_createdAt {
   font-size: 14px;
   line-height: 24px;
-  color: #9ca3af;
+  color: var(--gray400);
 }
 
 .item_detail_favorite {
-  background-color: #ffffff;
-  border: 1px solid #e5e7eb;
+  background-color: var(--white);
+  border: 1px solid var(--gray200);
   border-radius: 35px;
   display: flex;
   height: 30px;
@@ -166,7 +166,7 @@
   font-size: 16px;
   font-weight: 500;
   line-height: 26px;
-  color: #6b7280;
+  color: var(--gray500);
 }
 
 .item_detail_bottom_container {
@@ -192,15 +192,15 @@
   gap: 8px;
   font-size: 18px;
   line-height: 26px;
-  color: #f3f4f6;
-  background-color: #3692ff;
+  color: var(--gray100);
+  background-color: var(--blue);
   border-radius: 40px;
   padding: 12px 40px;
   border-style: none;
 }
 
 .item_detail_back_button:hover {
-  background-color: #2e7ae4;
+  background-color: var(--darkblue);
   cursor: pointer;
 }
 
diff --git a/styles/items.module.css b/styles/items.module.css
index 5c6a98692..8a3ec1653 100644
--- a/styles/items.module.css
+++ b/styles/items.module.css
@@ -47,7 +47,21 @@
   width: 325px;
   height: 42px;
   border-radius: 12px;
-  background-color: #f3f4f6;
+  background-color: var(--gray100);
+}
+
+.search_button {
+  border: none;
+  background-color: var(--gray100);
+  padding: 0;
+}
+
+.search_button:hover {
+  cursor: pointer;
+}
+
+.search_button > img {
+  display: flex;
 }
 
 .all_item_search_icon {
@@ -65,7 +79,7 @@
   font-size: 16px;
   font-weight: 400;
   line-height: 26px;
-  color: #9ca3af;
+  color: var(--gray400);
 }
 
 .all_item_register_button {
@@ -74,26 +88,26 @@
   width: 133px;
   border-radius: 8px;
   text-align: center;
-  background-color: #3692ff;
+  background-color: var(--blue);
   font-size: 16px;
   line-height: 26px;
-  color: #f3f4f6;
+  color: var(--gray100);
 }
 
 .all_item_register_button:hover {
-  background-color: #2e7ae4;
+  background-color: var(--darkblue);
   cursor: pointer;
 }
 
 .all_item_sort_button {
   width: 130px;
   height: 42px;
-  border: 1px solid #e5e7eb;
-  background-color: #fff;
+  border: 1px solid var(--gray200);
+  background-color: var(--white);
   border-radius: 12px;
   font-size: 16px;
   line-height: 26px;
-  color: #1f2937;
+  color: var(--gray800);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -110,8 +124,8 @@
   position: absolute;
   top: 100%;
   right: 0;
-  background-color: #fff;
-  border: 1px solid #e5e7eb;
+  background-color: var(--white);
+  border: 1px solid var(--gray200);
   border-radius: 12px;
   margin-top: 8px;
   z-index: 1000;
@@ -124,11 +138,11 @@
   padding: 10px 0;
   text-align: center;
   cursor: pointer;
-  color: #1f2937;
+  color: var(--gray800);
 }
 
 .all_item_sort_options div + div {
-  border-top: 1px solid #e5e7eb;
+  border-top: 1px solid var(--gray200);
 }
 
 .all_item_card_container {
@@ -228,6 +242,8 @@
   font-size: 14px;
   line-height: 24px;
   font-weight: 500;
+  inline-size: 220px;
+  overflow-wrap: break-word;
 }
 
 .item_price {
@@ -240,7 +256,7 @@
   display: flex;
   gap: 4px;
   font-size: 12px;
-  color: #4b5563;
+  color: var(--gray600);
 }
 
 @media (max-width: 1279px) {
diff --git a/styles/login.module.css b/styles/login.module.css
new file mode 100644
index 000000000..7a240c249
--- /dev/null
+++ b/styles/login.module.css
@@ -0,0 +1,204 @@
+.body {
+  display: flex;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+  align-items: center;
+}
+
+.section_container {
+  display: flex;
+  flex-direction: column;
+  width: 640px;
+  gap: 40px;
+  align-items: center;
+}
+
+.login_simple_login_description,
+.login_signup_question {
+  color: var(--gray800);
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0;
+}
+
+.password {
+  color: var(--gray800);
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0;
+}
+
+.login_total_container {
+  display: flex;
+  flex-direction: column;
+  width: 640px;
+  gap: 24px;
+}
+
+.login_main {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.login_main_input {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.login_main_input_email,
+.login_main_input_password {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.login_main_input_password_container {
+  display: flex;
+  height: 22px;
+  border: 1px solid var(--gray100);
+  background-color: var(--gray100);
+  border-radius: 12px;
+  padding: 16px 24px;
+}
+
+.login_main_input_password_container:focus-within {
+  border-color: var(--blue);
+}
+
+.email_input {
+  border: 1px solid var(--gray100);
+  height: 22px;
+  background-color: var(--gray100);
+  border-radius: 12px;
+  padding: 16px 24px;
+}
+
+.password_input {
+  border-style: none;
+  background-color: var(--gray100);
+  padding: 0;
+  width: 100%;
+}
+
+#eye_icon:hover {
+  cursor: pointer;
+}
+
+.email_input::placeholder,
+.password_input::placeholder {
+  display: flex;
+  color: var(--gray400);
+  font-size: 16px;
+}
+
+.email_input:focus,
+.password_input:focus {
+  border-color: var(--blue);
+  outline: none;
+}
+
+.input_error {
+  border-color: var(--red);
+}
+
+.error_message {
+  color: var(--red);
+  font-size: 14px;
+  padding-left: 16px;
+}
+
+.eye_icon:hover {
+  cursor: pointer;
+}
+
+.login_main_button {
+  background-color: var(--gray400);
+  color: var(--gray100);
+  font-size: 20px;
+  font-weight: 600;
+  border-width: 0;
+  border-radius: 40px;
+  padding: 16px 124px;
+}
+
+.login_main_button.active {
+  background-color: var(--blue);
+  color: var(--white);
+}
+
+.login_main_button:disabled:hover {
+  background-color: var(--gray400);
+  cursor: not-allowed;
+}
+
+.login_main_button.active:hover {
+  background-color: var(--darkblue);
+  cursor: pointer;
+}
+
+.login_simple_login {
+  background-color: #e6f2ff;
+  border-radius: 8px;
+  padding: 16px 23px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.login_simple_login_container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 42px;
+}
+
+.login_simple_login_description {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--gray800);
+}
+
+.login_simple_login_link {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.login_first {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+}
+
+.login_signup_question {
+  color: var(--gray800);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.login_signup_link {
+  color: var(--blue);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+@media (max-width: 767px) {
+  .section_container {
+    padding: 0 16px;
+    max-width: 400px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .login_total_container {
+    width: 100%;
+  }
+
+  .big_logo {
+    width: 198px;
+    height: 66px;
+  }
+}
diff --git a/styles/pagination.module.css b/styles/pagination.module.css
index b5dc242d4..e5afb0348 100644
--- a/styles/pagination.module.css
+++ b/styles/pagination.module.css
@@ -14,8 +14,8 @@
   height: 40px;
   border-radius: 50%;
   border: 1px solid #d1d5db;
-  background-color: #fff;
-  color: #6b7280;
+  background-color: var(--white);
+  color: var(--gray500);
   cursor: pointer;
   font-size: 16px;
   line-height: 26px;
@@ -28,7 +28,7 @@
 }
 
 .pagination .active {
-  background-color: #3692ff;
-  color: #fff;
-  border: 1px solid #3692ff;
+  background-color: var(--blue);
+  color: var(--white);
+  border: 1px solid var(--blue);
 }
diff --git a/styles/signup.module.css b/styles/signup.module.css
new file mode 100644
index 000000000..39c69a47a
--- /dev/null
+++ b/styles/signup.module.css
@@ -0,0 +1,212 @@
+.body_1 {
+  display: flex;
+  justify-content: center;
+  height: 100vh;
+  align-items: center;
+}
+
+.section_container {
+  display: flex;
+  flex-direction: column;
+  width: 640px;
+  gap: 40px;
+  align-items: center;
+}
+
+.signup_simple_login_description,
+.signup_already_question {
+  color: var(--gray800);
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0;
+}
+
+.email,
+.nickname,
+.password,
+.password_again {
+  color: var(--gray800);
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0;
+}
+
+.signup_total_container {
+  display: flex;
+  flex-direction: column;
+  width: 640px;
+  gap: 24px;
+}
+
+.signup_main {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.signup_main_input {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.signup_main_input_email,
+.signup_main_input_nickname,
+.signup_main_input_password,
+.signup_main_input_password_again {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.signup_main_input_password_container,
+.signup_main_input_password_again_container {
+  display: flex;
+  border: 1px solid var(--gray100);
+  height: 22px;
+  background-color: var(--gray100);
+  border-radius: 12px;
+  padding: 16px 24px;
+}
+
+.signup_main_input_password_container:focus_within,
+.signup_main_input_password_again_container:focus_within {
+  border-color: var(--blue);
+}
+
+.email_input,
+.nickname_input {
+  border: 1px solid var(--gray100);
+  height: 22px;
+  background-color: var(--gray100);
+  border-radius: 12px;
+  padding: 16px 24px;
+}
+
+.password_input,
+.password_again_input {
+  border-style: none;
+  background-color: var(--gray100);
+  width: 100%;
+}
+
+.eye_icon:hover {
+  cursor: pointer;
+}
+
+.email_input::placeholder,
+.nickname_input::placeholder,
+.password_input::placeholder,
+.password_again_input::placeholder {
+  display: flex;
+  color: var(--gray400);
+  font-size: 16px;
+}
+
+.email_input:focus,
+.nickname_input:focus,
+.password_input:focus,
+.password_again_input:focus {
+  border-color: var(--blue);
+  outline: none;
+}
+
+.input_error {
+  border-color: var(--red);
+}
+
+.error_message {
+  color: var(--red);
+  font-size: 14px;
+  padding-left: 16px;
+}
+
+.signup_main_button {
+  background-color: var(--gray400);
+  color: var(--gray100);
+  font-size: 20px;
+  font-weight: 600;
+  border-width: 0;
+  border-radius: 40px;
+  padding: 16px 124px 16px 124px;
+}
+
+.signup_main_button.active {
+  background-color: var(--blue);
+  color: var(--white);
+}
+
+.signup_main_button:disabled:hover {
+  background-color: var(--gray400);
+  cursor: not-allowed;
+}
+
+.signup_main_button.active:hover {
+  background-color: var(--darkblue);
+  cursor: pointer;
+}
+
+.signup_simple_login {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #e6f2ff;
+  border-radius: 8px;
+  padding: 16px 23px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.signup_simple_login_container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.signup_simple_login_description {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--gray800);
+}
+
+.signup_simple_login_link {
+  display: flex;
+  gap: 16px;
+}
+
+.signup_already {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+}
+
+.signup_already_question {
+  color: var(--gray800);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.signup_login_link {
+  color: var(--blue);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+@media (max-width: 767px) {
+  .section_container {
+    padding: 0 16px;
+    max-width: 400px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .signup_total_container {
+    width: 100%;
+  }
+
+  .big_logo {
+    width: 198px;
+    height: 66px;
+  }
+}
diff --git a/types/commontypes.ts b/types/commontypes.ts
index a52e49e97..a54e7f4b6 100644
--- a/types/commontypes.ts
+++ b/types/commontypes.ts
@@ -1,27 +1,17 @@
 export interface GetProductsParams {
   page?: number;
   pageSize?: number;
-  keyword?: string | undefined;
+  keyword?: string;
   orderBy?: string;
 }
 
 export interface GetProductCommentsParams {
   limit?: number;
-  cursor?: string | undefined;
-}
-
-// 상품 타입 정의
-export interface Product {
-  id: number;
-  name: string;
-  price: number;
-  description?: string;
-  images: string[];
-  favoriteCount?: number;
+  cursor?: string;
 }
 
 export interface AllItemCardProps {
-  item: Product;
+  item: Product[];
 }
 
 // 상품 목록 응답 타입 정의
@@ -69,7 +59,7 @@ export interface GetCommentsResponse {
 export interface GetArticlesParams {
   page?: number;
   pageSize?: number;
-  keyword?: string | undefined;
+  keyword?: string;
   orderBy?: string;
 }
 
@@ -113,7 +103,7 @@ export interface ImageInputProps {
   className?: string;
   name: string;
   value: File | null;
-  initialPreview?: string | undefined;
+  initialPreview?: string | null;
   onChange: (name: string, file: File | null) => void;
 }
 
@@ -122,3 +112,36 @@ export interface FormValues {
   content: string;
   image: File | null;
 }
+
+export interface AddItemFormProps {
+  className?: string;
+  initialValues?: {
+    name: string;
+    favoriteCount: number;
+    description: string;
+    price: number;
+    images: File[] | null;
+    tags: string[];
+  };
+  initialPreview?: string;
+  onSubmit: (formData: FormData) => Promise<{ review: Product } | null>;
+  onSubmitSuccess: (review: Product) => void;
+}
+
+export interface Product {
+  id: number;
+  name: string;
+  description: string;
+  price: number;
+  createdAt: string;
+  favoriteCount: number;
+  ownerNickname: string;
+  ownerId: number;
+  images: string[];
+  tags: string[];
+}
+
+export interface ProductListResponse {
+  totalCount: number;
+  list: Product[];
+}