diff --git a/api/api.ts b/api/api.ts
new file mode 100644
index 000000000..d5eb32bcb
--- /dev/null
+++ b/api/api.ts
@@ -0,0 +1,84 @@
+import { Product, ProductResponse, Comment } from "@/types";
+
+interface GetProductsParams {
+  page?: number;
+  pageSize?: number;
+  orderBy?: string;
+  keyword?: string;
+  totalItems?: number;
+}
+
+interface GetProductCommentsParams {
+  productId: string;
+  limit?: number;
+}
+
+export async function getProducts({
+  page = 1,
+  pageSize = 10,
+  orderBy,
+  keyword = "",
+  totalItems,
+}: GetProductsParams): Promise<ProductResponse> {
+  const params = new URLSearchParams({
+    page: page.toString(),
+    pageSize: pageSize.toString(),
+    ...(keyword && { keyword }),
+  });
+
+  if (orderBy) {
+    params.append("orderBy", orderBy);
+  }
+
+  try {
+    const response = await fetch(
+      `https://panda-market-api.vercel.app/products?${params.toString()}`
+    );
+
+    if (!response.ok) {
+      throw new Error("서버 오류");
+    }
+
+    const body = await response.json();
+    return body;
+  } catch (error) {
+    console.error(error);
+    throw new Error("데이터 오류");
+  }
+}
+
+export async function getProductDetails(productId: string): Promise<Product> {
+  try {
+    const response = await fetch(
+      `https://panda-market-api.vercel.app/products/${productId}`
+    );
+    if (!response.ok) {
+      throw new Error("상품을 찾을 수 없습니다.");
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("상품 세부 정보를 가져오는 중 오류 발생:", error);
+    throw error;
+  }
+}
+
+export async function getProductComments({
+  productId,
+  limit = 10,
+}: GetProductCommentsParams): Promise<Comment[]> {
+  const params = new URLSearchParams({ limit: limit.toString() });
+  try {
+    const response = await fetch(
+      `https://panda-market-api.vercel.app/products/${productId}/comments?${params}`
+    );
+    if (!response.ok) {
+      throw new Error("댓글을 찾을 수 없습니다.");
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("상품 댓글을 가져오는 중 오류 발생:", error);
+    throw error;
+  }
+}
diff --git a/components/AddItem/addItem.module.css b/components/AddItem/addItem.module.css
new file mode 100644
index 000000000..4a93d66b2
--- /dev/null
+++ b/components/AddItem/addItem.module.css
@@ -0,0 +1,210 @@
+:root {
+  --blue: #3692ff;
+  --gray900: #111827;
+  --gray800: #1f2937;
+  --gray700: #374151;
+  --gray600: #4b5563;
+  --gray500: #6b7280;
+  --gray400: #9ca3af;
+  --gray200: #e5e7eb;
+  --gray100: #f3f4f6;
+  --gray50: #f9fafb;
+}
+
+body {
+  box-sizing: border-box;
+  margin: 0;
+  font-family: "Pretendard Variable", Pretendard, -apple-system,
+    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
+    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+}
+
+section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  /* 임시 여백 */
+  padding-top: 12rem; /* 16px * 12 */
+  padding-bottom: 8rem;
+}
+
+/* 상품 등록 전체 스타일 */
+.add_items {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  min-width: 1200px;
+}
+
+.add_items_form {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  width: 100%;
+}
+
+.product_img,
+.product_title,
+.product_info,
+.sale_cost,
+.tag {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.product_add {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  width: 100%;
+}
+
+.product_img {
+  display: flex;
+  flex-direction: column;
+}
+
+.add_items h2 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.add_items input {
+  box-sizing: border-box;
+  font-family: Pretendard;
+  width: 100%;
+  padding: 16px 24px;
+  border: none;
+  border-radius: 12px;
+  font-size: 16px;
+  background-color: var(--gray100);
+  color: var(--gray400);
+}
+
+.add_items textarea {
+  font-family: Pretendard;
+  width: 100%;
+  padding: 16px 24px;
+  min-height: 282px;
+  border: none;
+  border-radius: 12px;
+  background-color: var(--gray100);
+  color: var(--gray400);
+  font-size: 16px;
+  resize: none; /* 세로 크기만 조정 가능 */
+  overflow-y: auto; /* 내용이 많을 경우 스크롤 */
+  box-sizing: border-box; /* 패딩 포함 크기 계산 */
+}
+
+.add_items textarea:focus {
+  outline: none;
+  border-color: var(--blue);
+  box-shadow: 0 0 0 2px rgba(54, 146, 255, 0.3);
+}
+
+.add_items input:focus {
+  outline: none;
+  border-color: var(--blue);
+  box-shadow: 0 0 0 2px rgba(54, 146, 255, 0.3);
+}
+
+.product_add button {
+  padding: 10px 20px;
+  background-color: var(--blue);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.product_add button:hover {
+  background-color: #2873cc;
+}
+
+/* 상품 이미지 등록 */
+.image_container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 282px;
+  height: 282px;
+  border: 1px dashed var(--gray400);
+  border-radius: 4px;
+}
+
+.upload_label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.file_input {
+  display: none;
+}
+
+.upload_placeholder {
+  color: var(--gray400);
+  font-size: 16px;
+}
+
+.upload_placeholder_plus {
+  color: var(--gray400);
+  font-size: 68px;
+  text-align: center;
+}
+
+.image_preview {
+  position: relative;
+  width: 282px;
+  height: 282px;
+}
+
+.uploaded_image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.delete_img_btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: var(--gray400);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 태그 */
+.tag_item {
+  margin: 5px;
+  padding: 5px 10px;
+  background-color: #f0f0f0;
+  border-radius: 20px;
+  font-size: 14px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.delete_tag_btn {
+  background: var(--gray400);
+  border: none;
+  border-radius: 9999px;
+  color: white;
+  margin-left: 5px;
+  cursor: pointer;
+}
diff --git a/components/AddItem/index.tsx b/components/AddItem/index.tsx
new file mode 100644
index 000000000..ca54c3adf
--- /dev/null
+++ b/components/AddItem/index.tsx
@@ -0,0 +1,143 @@
+import React, { ChangeEvent, useState } from "react";
+import Header from "../Header/index";
+import styles from "./addItem.module.css";
+
+function AddItems() {
+  const [productImg, setProductImg] = useState<string | null>(null); // 이미지 URL 또는 null
+  const [title, setTitle] = useState<string>(""); // 상품명
+  const [info, setInfo] = useState<string>(""); // 상품 소개
+  const [price, setPrice] = useState<string>(""); // 판매 가격
+  const [tagInput, setTagInput] = useState<string>(""); // 태그 입력
+  const [tags, setTags] = useState<string[]>([]); // 태그 배열
+
+  // 이미지 업로드 핸들러
+  const handleImageUpload = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      setProductImg(URL.createObjectURL(e.target.files[0]));
+    }
+  };
+
+  // 이미지 삭제 핸들러
+  const handleImageDelete = () => {
+    setProductImg(null);
+  };
+
+  // 태그 추가 핸들러
+  const handleTagAdd = () => {
+    const tag = tagInput.trim();
+    if (tag && !tags.includes(tag)) {
+      setTags([...tags, tag]);
+      setTagInput("");
+    }
+  };
+
+  // 태그 삭제 핸들러
+  const handleTagDelete = (tagToDelete: string) => {
+    setTags(tags.filter((tag) => tag !== tagToDelete));
+  };
+
+  // 제출 가능 여부 체크
+  const isSubmitEnabled =
+    title.trim() && info.trim() && price.trim() && tags.length > 0;
+
+  return (
+    <div>
+      <Header />
+      <section>
+        <div className={styles.add_items}>
+          <div className={styles.product_add}>
+            <h1>상품 등록하기</h1>
+            <button disabled={!isSubmitEnabled} className={styles.submit_btn}>
+              등록
+            </button>
+          </div>
+          <div className={styles.add_items_form}>
+            <h2>이미지 등록하기</h2>
+            <div className={styles.image_container}>
+              {!productImg ? (
+                <label className={styles.upload_label}>
+                  <input
+                    type="file"
+                    accept="image/*"
+                    onChange={handleImageUpload}
+                    className={styles.file_input}
+                  />
+                  <div className={styles.upload_placeholder}>
+                    <div className={styles.upload_placeholder_plus}>+</div>
+                    <br />
+                    이미지 등록
+                  </div>
+                </label>
+              ) : (
+                <div className={styles.image_preview}>
+                  <img
+                    src={productImg}
+                    alt="상품 이미지 미리보기"
+                    className={styles.uploaded_image}
+                  />
+                  <button
+                    className={styles.delete_img_btn}
+                    onClick={handleImageDelete}
+                  >
+                    X
+                  </button>
+                </div>
+              )}
+            </div>
+            <div className={styles.product_title}>
+              <h2>상품명</h2>
+              <input
+                type="text"
+                placeholder="상품명을 입력해주세요"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+              />
+            </div>
+            <div className={styles.product_info}>
+              <h2>상품 소개</h2>
+              <textarea
+                placeholder="상품 소개를 입력해주세요"
+                value={info}
+                onChange={(e) => setInfo(e.target.value)}
+              ></textarea>
+            </div>
+            <div className={styles.sale_cost}>
+              <h2>판매 가격</h2>
+              <input
+                type="text"
+                placeholder="판매 가격을 입력해주세요"
+                value={price}
+                onChange={(e) => setPrice(e.target.value)}
+              />
+            </div>
+            <div className={styles.tag}>
+              <h2>태그</h2>
+              <input
+                type="text"
+                placeholder="태그를 입력해주세요"
+                value={tagInput}
+                onChange={(e) => setTagInput(e.target.value)}
+                onKeyPress={(e) => e.key === "Enter" && handleTagAdd()}
+              />
+              <div className={styles.tag_list}>
+                {tags.map((tag) => (
+                  <span key={tag} className={styles.tag_item}>
+                    #{tag}
+                    <button
+                      className={styles.delete_tag_btn}
+                      onClick={() => handleTagDelete(tag)}
+                    >
+                      X
+                    </button>
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export default AddItems;
diff --git a/components/AllProducts/allProduct.module.css b/components/AllProducts/allProduct.module.css
new file mode 100644
index 000000000..2e89d08d9
--- /dev/null
+++ b/components/AllProducts/allProduct.module.css
@@ -0,0 +1,318 @@
+.product_link {
+  text-decoration: none;
+  color: black;
+}
+
+.all_Container {
+  padding-top: 40px;
+  min-height: 740px;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  flex-wrap: wrap;
+}
+
+@media screen and (max-width: 1199px) {
+  .all_Container {
+    padding-top: 100px;
+  }
+}
+
+.title {
+  font-weight: 700;
+  color: var(--gray900);
+  font-size: 20px;
+  padding-right: 31rem;
+}
+
+.all_list {
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template:
+    "a b c d e"
+    "f g h i j";
+  list-style-type: none;
+  min-height: 674px;
+  gap: 24px;
+}
+
+.best_card {
+  width: 221px;
+  height: 317px;
+}
+
+@media screen and (max-width: 1199px) {
+  .all_list {
+    grid-template:
+      "a b c"
+      "d e f";
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .all_list {
+    grid-template:
+      "a b"
+      "c d";
+  }
+
+  .item_card {
+    width: 168px;
+    height: 264px;
+  }
+}
+
+.product_image_box {
+  position: relative;
+  width: 221px;
+  height: 221px;
+  margin-bottom: 16px;
+}
+
+@media screen and (max-width: 767px) {
+  .product_image_box {
+    width: 168px;
+    height: 168px;
+  }
+}
+
+.product_image {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.product_name {
+  margin: 0;
+  margin-bottom: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--gray800);
+  line-height: 24px;
+}
+
+.product_price {
+  margin: 0;
+  margin-bottom: 6px;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--gray800);
+  line-height: 26px;
+}
+
+.heart_line {
+  height: 18px;
+}
+
+.heart_image {
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+}
+
+.heart_num {
+  padding: 1px 0 1px 4px;
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  color: var(--gray600);
+  text-align: left;
+  top: 2px;
+}
+
+.all_Container_bar {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 0.625rem;
+}
+
+.search_input {
+  font-family: Pretendard;
+  padding: 9px 20px 9px 44px;
+  border-radius: 12px;
+  border: none;
+  width: 289px;
+  height: 24px;
+  gap: 10px;
+  background-color: var(--gray100);
+}
+
+.search_icon {
+  position: absolute;
+  top: 22%;
+  left: 50%;
+}
+
+@media screen and (max-width: 1199px) {
+  .search_input {
+    width: 178px;
+  }
+}
+
+.register_button {
+  font-family: Pretendard;
+  background-color: var(--blue);
+  border-radius: 8px;
+  border: 0px;
+  height: 42px;
+  padding: 12px 23px;
+  color: white;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 16px;
+  cursor: pointer;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown_btn {
+  font-family: Pretendard;
+  background-color: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 12px 20px;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 130px;
+  height: 42px;
+}
+
+.dropdown_btn .arrow {
+  margin-left: 10px;
+}
+
+.dropdown_list {
+  position: absolute;
+  top: 88%;
+  left: 89%;
+  background-color: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  list-style: none;
+  width: 130px;
+  height: 82px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.dropdown_item {
+  padding: 0;
+  height: 26px;
+  color: var(--gray800);
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 26px;
+  cursor: pointer;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dropdown_item:not(:last-child) {
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.dropdown_item:hover {
+  background-color: #f1f1f1;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 43px;
+  margin-bottom: 58px;
+}
+
+.page_btn {
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50%;
+  background-color: #fff;
+  color: #666;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: bold;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s;
+}
+
+.page_btn.active {
+  background-color: #007bff;
+  color: white;
+}
+
+.page_btn:disabled {
+  background-color: #f5f5f5;
+  color: #ccc;
+  cursor: not-allowed;
+}
+
+@media screen and (min-width: 768px) and (max-width: 1199px) {
+  .title {
+    padding-right: 8rem;
+  }
+
+  .search_icon {
+    top: 21%;
+    left: 32%;
+  }
+
+  .dropdown_list {
+    top: 89%;
+    left: 81.5%;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .all_Container_bar {
+    flex-wrap: wrap;
+    padding-bottom: 16px;
+    align-items: center;
+    max-width: 375px;
+  }
+
+  .title {
+    padding: 0;
+    order: 0;
+    width: 35%;
+  }
+
+  .search_input {
+    order: 1;
+  }
+
+  .register_button {
+    order: 2;
+    width: 100%;
+  }
+
+  .dropdown_btn {
+    order: 3;
+  }
+
+  .search_icon {
+    top: 52%;
+    left: 2%;
+  }
+
+  .dropdown_list {
+    top: 89%;
+    left: 65%;
+  }
+}
diff --git a/components/AllProducts/index.tsx b/components/AllProducts/index.tsx
new file mode 100644
index 000000000..b7adc3f7a
--- /dev/null
+++ b/components/AllProducts/index.tsx
@@ -0,0 +1,110 @@
+import React, { useState, useEffect } from "react";
+import { getProducts } from "@/api/api";
+import NavBar from "./navBar";
+import ProductList from "./products";
+import Pagination from "./pagination";
+import styles from "./allProduct.module.css";
+import windowView from "@/hooks/windowView"; // 커스텀 훅 임포트
+
+// Product 타입 정의
+interface Product {
+  id: string; // 상품 ID
+  name: string; // 상품 이름
+  price: number; // 상품 가격
+  favoriteCount: number; // 좋아요 개수
+  images: string[]; // 상품 이미지 URL 배열
+}
+
+// API에서 반환되는 데이터 타입 정의
+interface ProductResponse {
+  list: Product[];
+  totalCount: number;
+}
+
+// 페이지 크기 설정을 위한 상수
+const PAGE_SIZES = {
+  small: { max: 767, size: 4 },
+  medium: { max: 1199, size: 6 },
+  large: { size: 10 }, // max가 없으므로 이 조건은 기본값으로 작동
+};
+
+// 페이지 크기 계산 함수
+function getPageSize(width: number): number {
+  if (width <= PAGE_SIZES.small.max) {
+    return PAGE_SIZES.small.size;
+  } else if (width <= PAGE_SIZES.medium.max) {
+    return PAGE_SIZES.medium.size;
+  } else {
+    return PAGE_SIZES.large.size;
+  }
+}
+
+const AllProducts = () => {
+  const [products, setProducts] = useState<Product[]>([]); // 상품 데이터 상태
+  const [pageSize, setPageSize] = useState<number>(4); // 초기 페이지 크기 설정 (10개로 설정)
+  const [currentPage, setCurrentPage] = useState<number>(1); // 현재 페이지 상태
+  const [orderBy, setOrderBy] = useState<"recent" | "favorite">("recent"); // 정렬 기준
+  const [totalItems, setTotalItems] = useState<number>(0); // 전체 상품 개수 상태
+  const [keyword, setKeyword] = useState<string>(""); // 검색어 상태
+  const [isLoading, setIsLoading] = useState<boolean>(false); // 로딩 상태
+
+  const windowWidth = windowView(); // 화면 크기 추적
+
+  // 화면 크기 변경에 따라 페이지 크기 조정
+  useEffect(() => {
+    if (windowWidth === 0) return; // windowWidth가 0이면 return
+
+    const newPageSize = getPageSize(windowWidth); // 화면 크기 기반 페이지 크기 계산
+    setPageSize(newPageSize); // 페이지 크기 업데이트
+  }, [windowWidth]); // windowWidth가 변경될 때마다 실행
+
+  // 상품 데이터 가져오는 함수
+  useEffect(() => {
+    const fetchProducts = async () => {
+      setIsLoading(true); // 로딩 시작
+      try {
+        const result: ProductResponse = await getProducts({
+          page: currentPage, // 현재 페이지
+          pageSize, // 페이지 크기
+          orderBy, // 정렬 기준
+          keyword, // 검색어
+        });
+        setProducts(result.list); // 상품 목록 설정
+        setTotalItems(result.totalCount); // 전체 상품 개수 설정
+      } catch (error) {
+        if (error instanceof Error) {
+          console.error("데이터 로드 중 오류 발생:", error.message);
+          setProducts([]); // 오류 발생 시 빈 배열로 설정
+        }
+      } finally {
+        setIsLoading(false); // 로딩 완료
+      }
+    };
+
+    fetchProducts();
+  }, [currentPage, pageSize, orderBy, keyword]); // 의존성 배열
+
+  return (
+    <div className={styles.all_Container}>
+      <NavBar
+        orderBy={orderBy}
+        setOrderBy={setOrderBy}
+        keyword={keyword}
+        setKeyword={setKeyword}
+      />
+      <ProductList products={products} />
+      {isLoading ? (
+        <div>Loading...</div>
+      ) : (
+        <Pagination
+          currentPage={currentPage}
+          totalItems={totalItems}
+          itemsPerPage={pageSize}
+          onPageChange={setCurrentPage} // 페이지 변경 시 상태 업데이트
+        />
+      )}
+    </div>
+  );
+};
+
+export default AllProducts;
diff --git a/components/AllProducts/navBar.tsx b/components/AllProducts/navBar.tsx
new file mode 100644
index 000000000..16653ec5f
--- /dev/null
+++ b/components/AllProducts/navBar.tsx
@@ -0,0 +1,83 @@
+import React, { useState, ChangeEvent } from "react";
+import searchIcon from "@/public/assets/img/logo/searchIcon.svg";
+import styles from "./allProduct.module.css";
+import Link from "next/link";
+import Image from "next/image";
+
+// Props 타입 정의
+interface NavBarProps {
+  orderBy: "recent" | "favorite"; // 'recent' 또는 'favorite'만 가능
+  setOrderBy: (order: "recent" | "favorite") => void; // setOrderBy는 'recent' 또는 'favorite'만 받을 수 있음
+  keyword: string;
+  setKeyword: (keyword: string) => void;
+}
+
+function NavBar({ orderBy, setOrderBy, keyword, setKeyword }: NavBarProps) {
+  const [isOpen, setIsOpen] = useState<boolean>(false); // 드롭다운 메뉴 열림 상태 관리
+
+  // 드롭다운 메뉴의 열림/닫힘 상태를 토글하는 함수
+  const toggleDropdown = () => setIsOpen((prev) => !prev);
+
+  // 드롭다운에서 옵션을 선택했을 때 정렬 기준을 변경하고 드롭다운을 닫는 함수
+  const selectOption = (option: string) => {
+    const order = option === "최신순" ? "recent" : "favorite";
+    setOrderBy(order); // 정렬 기준을 선택한 값으로 업데이트
+    setIsOpen(false);
+  };
+
+  // 검색어 입력 시 부모 컴포넌트로 전달
+  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setKeyword(e.target.value); // 검색어 상태 업데이트
+  };
+
+  return (
+    <div className={styles.all_Container_bar}>
+      <h2 className={styles.title}>전체 상품</h2>
+
+      {/* 검색 아이콘 */}
+      <Image
+        src={searchIcon}
+        className={styles.search_icon}
+        alt="search-icon"
+      />
+      {/* 검색 input */}
+      <input
+        className={styles.search_input}
+        type="text"
+        value={keyword} // keyword 상태를 input 값으로 사용
+        onChange={handleSearchChange} // 검색어가 변경될 때마다 상태 업데이트
+        placeholder="검색할 상품을 입력해주세요"
+      ></input>
+      {/* 상품 등록 버튼 */}
+      <Link href="/additem">
+        <button className={styles.register_button}>상품 등록하기</button>
+      </Link>
+      {/* 드롭다운 버튼 */}
+      <button className={styles.dropdown_btn} onClick={toggleDropdown}>
+        {orderBy === "recent" ? "최신순" : "좋아요순"}{" "}
+        <span className={styles.arrow}>{isOpen ? "▲" : "▼"}</span>
+      </button>
+      {/* 드롭다운 목록 */}
+      {isOpen && (
+        <ul className={styles.dropdown_list}>
+          <li
+            className={styles.dropdown_item}
+            onClick={() => selectOption("최신순")}
+            id={styles.dropdown_item_new}
+          >
+            최신순
+          </li>
+          <li
+            className={styles.dropdown_item}
+            onClick={() => selectOption("좋아요순")}
+            id={styles.dropdown_item_favorite}
+          >
+            좋아요순
+          </li>
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export default NavBar;
diff --git a/components/AllProducts/pagination.tsx b/components/AllProducts/pagination.tsx
new file mode 100644
index 000000000..c3827736e
--- /dev/null
+++ b/components/AllProducts/pagination.tsx
@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from "react";
+import styles from "./allProduct.module.css";
+
+// props에 대한 타입 정의
+interface PaginationProps {
+  currentPage: number; // 현재 페이지 번호
+  totalItems: number; // 전체 아이템 개수
+  itemsPerPage: number; // 페이지당 아이템 개수
+  onPageChange: (page: number) => void; // 페이지 변경 시 호출되는 함수
+}
+
+const pageRange = 5; // 한 번에 보여줄 페이지 버튼 개수
+
+function Pagination({
+  currentPage,
+  totalItems,
+  itemsPerPage,
+  onPageChange,
+}: PaginationProps) {
+  const totalPages = Math.ceil(totalItems / itemsPerPage); // 전체 페이지 수 계산
+
+  // 페이지 범위 계산
+  const [startPage, setStartPage] = useState<number>(1);
+  const [endPage, setEndPage] = useState<number>(
+    Math.min(totalPages, pageRange)
+  );
+
+  // 페이지 목록 생성
+  const pages = Array.from(
+    { length: endPage - startPage + 1 },
+    (_, index) => startPage + index
+  );
+
+  // 페이지 번호 클릭 시 처리
+  const handlePageClick = (page: number) => {
+    onPageChange(page);
+  };
+
+  // 이전 버튼 클릭 시
+  const handlePrevClick = () => {
+    if (startPage > 1) {
+      const newStartPage = Math.max(1, startPage - pageRange);
+      setStartPage(newStartPage);
+      setEndPage(newStartPage + pageRange - 1);
+      onPageChange(newStartPage); // 페이지 변경
+    }
+  };
+
+  // 다음 버튼 클릭 시
+  const handleNextClick = () => {
+    if (endPage < totalPages) {
+      const newStartPage = Math.min(
+        totalPages - pageRange + 1,
+        startPage + pageRange
+      );
+      setStartPage(newStartPage);
+      setEndPage(newStartPage + pageRange - 1);
+      onPageChange(newStartPage); // 페이지 변경
+    }
+  };
+
+  // 페이지 범위가 변경될 때마다 효과 처리
+  useEffect(() => {
+    // 첫 렌더링 시에도 범위가 보이도록 함
+    if (currentPage < startPage || currentPage > endPage) {
+      onPageChange(startPage); // 범위에 맞게 페이지 업데이트
+    }
+  }, [currentPage, startPage, endPage, onPageChange]);
+
+  // 페이지 범위가 업데이트되면, 페이지 번호가 보이도록 설정
+  useEffect(() => {
+    setEndPage(Math.min(totalPages, startPage + pageRange - 1));
+  }, [totalPages, startPage]);
+
+  return (
+    <div className={styles.pagination}>
+      {/* 이전 버튼 */}
+      <button
+        className={styles.page_btn}
+        onClick={handlePrevClick}
+        disabled={startPage === 1} // 첫 페이지일 경우 비활성화
+      >
+        &lt;
+      </button>
+
+      {/* 페이지 번호 버튼 */}
+      {pages.map((page) => (
+        <button
+          key={page}
+          className={`${styles.page_btn} ${
+            page === currentPage ? styles.active : "" // 현재 페이지는 활성화 스타일 적용
+          }`}
+          onClick={() => handlePageClick(page)} // 페이지 클릭 시 페이지 변경
+        >
+          {page}
+        </button>
+      ))}
+
+      {/* 다음 버튼 */}
+      <button
+        className={styles.page_btn}
+        onClick={handleNextClick}
+        disabled={endPage === totalPages} // 마지막 페이지일 경우 비활성화
+      >
+        &gt;
+      </button>
+    </div>
+  );
+}
+
+export default Pagination;
diff --git a/components/AllProducts/products.tsx b/components/AllProducts/products.tsx
new file mode 100644
index 000000000..9df2a6997
--- /dev/null
+++ b/components/AllProducts/products.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+import heartIcon from "@/public/assets/img/logo/heartIcon.svg";
+import styles from "./allProduct.module.css";
+import EMPTY_IMAGE_URL from "@/public/assets/img/landing/Img_home_02.png";
+import Link from "next/link";
+import Image from "next/image"; // next/image 사용
+
+// Product 타입 정의
+interface Product {
+  id: string; // 상품 ID
+  name: string; // 상품 이름
+  price: number; // 상품 가격
+  favoriteCount: number; // 좋아요 개수
+  images: string[]; // 상품 이미지 URL 배열
+}
+
+// props 타입 정의
+interface ProductListProps {
+  products: Product[]; // products 배열
+}
+
+function ProductList({ products }: ProductListProps) {
+  return (
+    <ul className={styles.all_list}>
+      {/* 상품 목록이 있을 경우, 상품 정보를 렌더링 */}
+      {products.length > 0 ? (
+        products.map((product) => (
+          <li key={product.id} className={styles.item_card}>
+            <Link href={`/items/${product.id}`} className={styles.product_link}>
+              <div className={styles.product_image_box}>
+                {/* 상품 이미지 */}
+                <Image
+                  className={styles.product_image}
+                  src={
+                    product.images && product.images.length > 0
+                      ? product.images[0]
+                      : EMPTY_IMAGE_URL
+                  }
+                  width={500}
+                  height={500}
+                  alt={product.name || "기본 이미지"}
+                  unoptimized // 최적화 비활성화
+                />
+              </div>
+              {/* 상품 이름 */}
+              <h3 className={styles.product_name}>{product.name}</h3>
+              {/* 상품 가격 */}
+              <p className={styles.product_price}>{product.price}원</p>
+              <div className={styles.heart_line}>
+                {/* 좋아요 아이콘 */}
+                <Image
+                  className={styles.heart_image}
+                  src={heartIcon}
+                  alt="좋아요 하트 기호"
+                />
+                {/* 좋아요 개수 */}
+                <span className={styles.heart_num}>
+                  {product.favoriteCount}
+                </span>
+              </div>
+            </Link>
+          </li>
+        ))
+      ) : (
+        <p>No Products</p> /* 상품이 없으면 'No Products' 메시지 출력 */
+      )}
+    </ul>
+  );
+}
+
+export default ProductList;
diff --git a/components/Best/best.module.css b/components/Best/best.module.css
new file mode 100644
index 000000000..4aab4087c
--- /dev/null
+++ b/components/Best/best.module.css
@@ -0,0 +1,87 @@
+.best_Container {
+  padding-top: 94px;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  flex-wrap: wrap;
+  gap: 0.625rem;
+}
+
+.title {
+  font-weight: 700;
+  color: var(--gray900);
+  font-size: 20px;
+}
+
+.best_list {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  list-style-type: none;
+  height: 378px;
+  gap: 24px;
+}
+
+.product_link {
+  text-decoration: none;
+}
+
+.product_image_box {
+  position: relative;
+  width: 282px;
+  height: 282px;
+  margin-bottom: 16px;
+}
+
+@media screen and (max-width: 1199px) {
+  .product_image_box {
+    width: 343px;
+    height: 343px;
+    margin-bottom: 16px;
+  }
+}
+
+.product_image {
+  position: absolute;
+  width: 100%;
+}
+
+.product_name {
+  margin: 0;
+  margin-bottom: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--gray800);
+  line-height: 24px;
+}
+
+.product_price {
+  margin: 0;
+  margin-bottom: 6px;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--gray800);
+  line-height: 26px;
+}
+
+.heart_line {
+  height: 18px;
+}
+
+.heart_image {
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+}
+
+.heart_num {
+  padding: 1px 0 1px 4px;
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  color: var(--gray600);
+  text-align: left;
+  top: 2px;
+}
diff --git a/components/Best/index.tsx b/components/Best/index.tsx
new file mode 100644
index 000000000..01c621d5c
--- /dev/null
+++ b/components/Best/index.tsx
@@ -0,0 +1,114 @@
+import styles from "./best.module.css";
+import heartIcon from "@/public/assets/img/logo/heartIcon.svg";
+import { getProducts } from "@/api/api";
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import Image from "next/image"; // next/image 사용
+import { Product } from "@/types";
+import React from "react";
+import windowView from "@/hooks/windowView"; // debounce 적용된 windowView 훅 사용
+
+const PAGE_SIZES = {
+  mobile: { max: 767, size: 1 },
+  tablet: { max: 1199, size: 2 },
+  desktop: { size: 4 }, // 화면 크기에 따라 상품 개수를 결정
+};
+
+// 페이지 크기 계산 함수
+const getPageSize = (width: number) => {
+  if (width <= PAGE_SIZES.mobile.max) {
+    return PAGE_SIZES.mobile.size;
+  } else if (width <= PAGE_SIZES.tablet.max) {
+    return PAGE_SIZES.tablet.size;
+  } else {
+    return PAGE_SIZES.desktop.size;
+  }
+};
+
+const Best: React.FC = () => {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [pageSize, setPageSize] = useState<number>(1); // 기본값을 1로 설정 (모바일에서 1개)
+  const [isError, setIsError] = useState(false);
+
+  const windowWidth = windowView(); // debounce 적용된 windowWidth 값 받아오기
+
+  // 화면 크기 변화에 따라 페이지 크기 설정
+  useEffect(() => {
+    if (windowWidth === 0) return; // windowWidth가 0이면 return
+
+    const newPageSize = getPageSize(windowWidth); // 화면 크기에 맞는 페이지 크기 계산
+    setPageSize(newPageSize); // 페이지 크기 업데이트
+  }, [windowWidth]); // windowWidth가 변경될 때마다 실행
+
+  // pageSize가 변경될 때마다 상품 데이터를 다시 불러옴
+  useEffect(() => {
+    const fetchBestProducts = async () => {
+      try {
+        const result = await getProducts({
+          page: 1, // 페이지는 1로 고정
+          pageSize, // 화면 크기에 맞춘 pageSize 전달
+          orderBy: "favorite", // 인기 순으로 정렬
+        });
+        setProducts(result.list); // 상품 데이터 설정
+      } catch (error) {
+        if (error instanceof Error) {
+          console.error("데이터 로드 중 오류 발생:", error.message);
+          setIsError(true); // 오류 발생 시 상태 변경
+          setProducts([]); // 오류 발생 시 빈 배열로 설정
+        }
+      }
+    };
+
+    fetchBestProducts(); // 페이지 크기 변경 후 상품 데이터 다시 가져오기
+  }, [pageSize]); // pageSize가 변경될 때마다 데이터를 다시 가져옴
+
+  if (isError) {
+    return <div>상품을 불러오는 데 문제가 발생했습니다.</div>;
+  }
+
+  return (
+    <div className={styles.best_Container}>
+      <h2 className={styles.title}>베스트 상품</h2>
+      <ul className={styles.best_list}>
+        {products.length > 0 ? (
+          products.map((product) => (
+            <li key={product.id} className={styles.best_card}>
+              <Link href={`/items/${product.id}`} passHref>
+                <div className={styles.product_link}>
+                  {product.images.length > 0 && (
+                    <div className={styles.product_image_box}>
+                      <img
+                        className={styles.product_image}
+                        src={product.images[0]}
+                        alt={product.name}
+                      />
+                    </div>
+                  )}
+
+                  <h3 className={styles.product_name}>{product.name}</h3>
+                  <p className={styles.product_price}>{product.price}원</p>
+                  <div className={styles.heart_line}>
+                    <Image
+                      className={styles.heart_image}
+                      src={heartIcon}
+                      alt="좋아요 하트 기호"
+                      width={20} // 하트 아이콘 크기 지정
+                      height={20}
+                    />
+                    <span className={styles.heart_num}>
+                      {product.favoriteCount}
+                    </span>
+                  </div>
+                </div>
+              </Link>
+            </li>
+          ))
+        ) : (
+          <p>상품이 없습니다.</p> // 상품이 없을 경우
+        )}
+      </ul>
+    </div>
+  );
+};
+
+export default Best;
diff --git a/components/Board/index.tsx b/components/Board/index.tsx
new file mode 100644
index 000000000..334546d5a
--- /dev/null
+++ b/components/Board/index.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import Header from "../Header/index";
+import styles from "./styles.module.css";
+
+const Board: React.FC = () => {
+  return (
+    <div>
+      <Header />
+      <section>
+        <div className={styles.board_body}>
+          <h1>준비중</h1>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Board;
diff --git a/components/Board/styles.module.css b/components/Board/styles.module.css
new file mode 100644
index 000000000..42b79aa83
--- /dev/null
+++ b/components/Board/styles.module.css
@@ -0,0 +1,12 @@
+.board_body {
+  margin: 0;
+  padding-top: 140px;
+  padding-left: 140px;
+}
+
+.h1 {
+  margin: 0;
+  font-size: 100px;
+  font-weight: 800;
+  text-align: center;
+}
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
new file mode 100644
index 000000000..62e30954d
--- /dev/null
+++ b/components/Header/index.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import Image from "next/image"; // Next.js Image 컴포넌트
+import Logo from "./logo";
+import styles from "./styles.module.css";
+import loginImg from "@/public/assets/img/logo/login.svg"; // 이미지 경로
+
+const Header: React.FC = () => {
+  return (
+    <header>
+      <nav className={styles.header_bar}>
+        {/* 로고 컴포넌트 */}
+        <Logo />
+        <div>
+          {/* Next.js Image 컴포넌트 사용 */}
+          <Image src={loginImg} alt="Login" width={30} height={30} />
+        </div>
+      </nav>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/components/Header/logo.tsx b/components/Header/logo.tsx
new file mode 100644
index 000000000..9cfdd9d9c
--- /dev/null
+++ b/components/Header/logo.tsx
@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from "react";
+import Image from "next/image"; // Next.js의 Image 컴포넌트 사용
+import Link from "next/link"; // Next.js의 Link 컴포넌트 사용
+import { useRouter } from "next/router"; // Next.js의 useRouter 훅
+import logoImg from "@/public/assets/img/logo/logo.png"; // 이미지 경로
+import styles from "./styles.module.css"; // 스타일 파일 경로
+
+const Logo: React.FC = () => {
+  const [isMobile, setIsMobile] = useState<boolean>(false);
+  const router = useRouter(); // 현재 경로 가져오기
+
+  // 각 경로에 있을 때의 스타일을 조건부로 적용
+  const isItemsPage = router.pathname === "/items";
+  const isBoardPage = router.pathname === "/boards";
+  const isAddItemPage = router.pathname === "/additem";
+  const isMainPage = router.pathname === "/";
+  const isItemsDetailPage = router.pathname.startsWith("/items/");
+
+  useEffect(() => {
+    // 창 크기 변경에 따라 상태 업데이트
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    // 최초 실행 시 창 크기 확인
+    handleResize();
+
+    // resize 이벤트 리스너 등록
+    window.addEventListener("resize", handleResize);
+
+    // 컴포넌트 언마운트 시 이벤트 리스너 정리
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return (
+    <div className={styles.logo}>
+      {!isMobile && (
+        <Image
+          className={styles.header_bar_img}
+          src={logoImg}
+          alt="판다마켓로고"
+          width={100} // 이미지의 너비
+          height={50} // 이미지의 높이
+        />
+      )}
+      <h1 className={styles.logo_title}>
+        <Link href="/">판다마켓</Link>
+      </h1>
+      <div className={styles.menu}>
+        <Link
+          href="/boards"
+          className={
+            isItemsPage || isAddItemPage || isMainPage || isItemsDetailPage
+              ? styles.menuText_default
+              : styles.menuText_focus
+          }
+        >
+          자유게시판
+        </Link>
+        <Link
+          href="/items"
+          className={
+            isBoardPage || isMainPage || isItemsDetailPage
+              ? styles.menuText_default
+              : styles.menuText_focus
+          }
+        >
+          중고마켓
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Logo;
diff --git a/components/Header/styles.module.css b/components/Header/styles.module.css
new file mode 100644
index 000000000..c117b36e0
--- /dev/null
+++ b/components/Header/styles.module.css
@@ -0,0 +1,122 @@
+/***************** header ******************/
+/* header {
+  box-sizing: border-box;
+  position: fixed;
+  z-index: 1;
+  width: 100%;
+  height: 70px;
+} */
+
+.header_bar,
+.logo {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  height: 70px;
+}
+
+.logo {
+  gap: 10px;
+}
+
+.header_bar {
+  margin: auto;
+  padding: 0 12.5rem;
+  background-color: #ffffff;
+  border: 1px solid #dfdfdf;
+  width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.menu {
+  margin-left: 2rem;
+}
+
+.menuText_default {
+  font-weight: 700;
+  color: var(--gray600);
+  font-size: 18px;
+  text-decoration: none;
+  padding: 21px 15px;
+  line-height: 26px;
+}
+
+.menuText_focus {
+  font-weight: 700;
+  color: var(--blue);
+  font-size: 18px;
+  text-decoration: none;
+  padding: 21px 15px;
+  line-height: 26px;
+}
+
+/* tablet */
+@media screen and (max-width: 1199px) {
+  .header_bar {
+    padding: 0 1.5rem;
+  }
+
+  .menu {
+    margin-left: 1.5rem;
+  }
+}
+
+/* mobile */
+@media screen and (max-width: 767px) and (min-width: 375px) {
+  .header_bar {
+    padding: 0 1rem;
+    min-width: 375px;
+    max-width: 767px;
+    margin: 0;
+  }
+
+  .menu {
+    margin-left: 0.2rem;
+  }
+
+  .menuText {
+    padding: 1.5rem 0.2rem;
+  }
+}
+
+.header_bar_img {
+  width: 40px;
+  height: 40px;
+}
+
+.header_bar .login {
+  position: relative;
+  border-radius: 8px;
+  background-color: var(--blue);
+  width: 128px;
+  height: 48px;
+}
+
+.login a {
+  position: absolute;
+  width: 82px;
+  height: 24px;
+  padding: 12px 23px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 26px;
+  color: #ffffff;
+  text-decoration: none;
+  text-align: center;
+}
+
+.header_bar > .login:hover {
+  cursor: pointer;
+  background: #1967d6;
+}
+
+.logo_title a {
+  font-family: "ROKAF Sans";
+  text-decoration: none;
+  color: var(--blue);
+  font-weight: 800;
+  font-size: 25px;
+  line-height: 36px;
+  text-align: left;
+}
diff --git a/components/Home/index.tsx b/components/Home/index.tsx
new file mode 100644
index 000000000..2be9a85e1
--- /dev/null
+++ b/components/Home/index.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import Header from "../Header/index";
+import styles from "./styles.module.css";
+
+const Home: React.FC = () => {
+  return (
+    <div>
+      <Header />
+      <section>
+        <div className={styles.home_body}>
+          <h1>준비중</h1>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Home;
diff --git a/components/Home/styles.module.css b/components/Home/styles.module.css
new file mode 100644
index 000000000..64f11f1f4
--- /dev/null
+++ b/components/Home/styles.module.css
@@ -0,0 +1,12 @@
+.home_body {
+  margin: 0;
+  padding-top: 140px;
+  padding-left: 140px;
+}
+
+.h1 {
+  margin: 0;
+  font-size: 100px;
+  font-weight: 800;
+  text-align: center;
+}
diff --git a/components/Items/index.tsx b/components/Items/index.tsx
new file mode 100644
index 000000000..9457e96ec
--- /dev/null
+++ b/components/Items/index.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import Header from "../Header/index";
+import Best from "../Best/index";
+import AllProducts from "../AllProducts/index";
+
+const Items: React.FC = () => {
+  return (
+    <div>
+      <Header />
+      <Best />
+      <AllProducts />
+    </div>
+  );
+};
+
+export default Items;
diff --git a/components/product/index.tsx b/components/product/index.tsx
new file mode 100644
index 000000000..239ed8e79
--- /dev/null
+++ b/components/product/index.tsx
@@ -0,0 +1,190 @@
+import React, { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { getProductComments, getProductDetails } from "@/api/api";
+import styles from "./product.module.css";
+import Header from "../Header/index";
+import { Product, Comment } from "@/types"; // 타입 임포트
+import { formatDate } from "@/utils/formatDate"; // formatDate 함수 임포트
+
+const ProductDetail: React.FC = () => {
+  const { productId } = useParams<{ productId: string }>();
+  const navigate = useNavigate();
+  const [product, setProduct] = useState<Product | null>(null);
+  const [comments, setComments] = useState<Comment[]>([]);
+  const [newComment, setNewComment] = useState<string>("");
+  const [isCommentValid, setIsCommentValid] = useState<boolean>(false);
+
+  // Fetch product details
+  useEffect(() => {
+    async function fetchProduct() {
+      try {
+        if (productId) {
+          const data = await getProductDetails(productId);
+          setProduct(data); // 상품 데이터 설정
+        }
+      } catch (error) {
+        console.error("Error fetching product details:", error);
+      }
+    }
+
+    fetchProduct();
+  }, [productId]);
+
+  // Fetch comments
+  useEffect(() => {
+    async function fetchComments() {
+      try {
+        if (productId) {
+          const data = await getProductComments({ productId, limit: 10 });
+          if (data && Array.isArray(data)) {
+            setComments(data); // list 안에 댓글 배열이 있을 경우
+          } else {
+            setComments([]); // list가 없으면 빈 배열 설정
+          }
+        }
+      } catch (error) {
+        console.error("Error fetching comments:", error);
+      }
+    }
+
+    fetchComments();
+  }, [productId]);
+
+  const handleCommentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    setNewComment(value);
+    setIsCommentValid(value.trim().length > 0);
+  };
+
+  const handleCommentSubmit = async () => {
+    if (!isCommentValid) return;
+
+    try {
+      // 예시로 로그인된 사용자 정보를 가져온다고 가정
+      const user = {
+        id: 1,
+        nickname: "nickname",
+        image: "user-image-url.jpg",
+      };
+
+      const newCommentData = {
+        content: newComment,
+        writer: user, // 로그인된 사용자 정보 추가
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        id: Date.now().toString(), // 새로운 댓글 ID 생성 (서버에서 관리될 경우 제외)
+      };
+
+      const token = localStorage.getItem("authToken");
+
+      const response = await fetch(
+        `https://panda-market-api.vercel.app/products/${productId}/comments`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`, // 인증 토큰 추가
+          },
+          body: JSON.stringify(newCommentData),
+        }
+      );
+
+      if (response.ok) {
+        const result = await response.json();
+        setComments((prevComments) => [...prevComments, result]);
+        setNewComment("");
+        setIsCommentValid(false);
+      } else {
+        console.error("Unauthorized: Check your login or token.");
+      }
+    } catch (error) {
+      console.error("Error submitting comment:", error);
+    }
+  };
+
+  if (!product) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <Header />
+      <section>
+        <div className={styles.container}>
+          <div className={styles.detail_container}>
+            <div className={styles.image_section}>
+              {product.images.map((img, index) => (
+                <img key={index} src={img} alt={`상품 이미지 ${index + 1}`} />
+              ))}
+            </div>
+            <div className={styles.details_section}>
+              <h1 className={styles.product_name}>{product.name}</h1>
+              <span className={styles.price}>{product.price}원</span>
+              <hr />
+              <h2 className={styles.product_intro}>상품 소개</h2>
+              <p className={styles.product_intro_detail}>
+                {product.description}
+              </p>
+              <h3 className={styles.product_tag}>상품 태그</h3>
+              <div className={styles.tags}>
+                {product.tags.map((tag, index) => (
+                  <span key={index} className={styles.tag}>
+                    #{tag}
+                  </span>
+                ))}
+              </div>
+              <p className={styles.favorite_count}>
+                ❤️ {product.favoriteCount}
+              </p>
+            </div>
+          </div>
+          <hr />
+          <div className={styles.comment_section}>
+            <h2 className={styles.do_comment}>문의하기</h2>
+            <textarea
+              value={newComment}
+              onChange={handleCommentChange}
+              placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
+            />
+            <button
+              onClick={handleCommentSubmit}
+              className={`${styles.submit_button} ${
+                isCommentValid ? styles.active : ""
+              }`}
+              disabled={!isCommentValid}
+            >
+              등록
+            </button>
+            <div className={styles.comment_list}>
+              {comments.map((comment, index) => (
+                <div key={index} className={styles.comment}>
+                  <img
+                    src={comment.writer.image || "default-avatar.jpg"}
+                    alt="작성자 이미지"
+                  />
+                  <div>
+                    <p className={styles.nickname}>{comment.writer.nickname}</p>
+                    <p className={styles.content}>{comment.content}</p>
+                    <p className={styles.timestamp}>
+                      {formatDate(comment.updatedAt)}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className={styles.back_button}>
+            <button
+              onClick={() => navigate("/items")}
+              className={styles.back_button}
+            >
+              목록으로 돌아가기
+            </button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default ProductDetail;
diff --git a/components/product/product.module.css b/components/product/product.module.css
new file mode 100644
index 000000000..ce43443d8
--- /dev/null
+++ b/components/product/product.module.css
@@ -0,0 +1,189 @@
+.section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 110vh;
+  padding-top: 16rem;
+  padding-bottom: 16rem;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  min-width: 1200px;
+}
+
+.detail_container {
+  display: flex;
+  flex-direction: row;
+  gap: 24px;
+  max-width: 1200px;
+  max-height: 496px;
+  margin-bottom: 40px;
+}
+
+.image_section img {
+  width: 100%;
+  min-height: 486px;
+  object-fit: cover;
+}
+
+.details_section {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.product_name,
+.price {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--gray800);
+  margin: 0;
+  padding-bottom: 16px;
+}
+
+.price {
+  font-size: 40px;
+}
+
+.hr {
+  width: 100%;
+  border: 1px solid var(--gray200);
+}
+
+.product_intro,
+.product_tag {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+  color: var(--gray600);
+}
+
+.product_intro {
+  padding: 24px 0 16px 0;
+}
+
+.product_tag {
+  padding-bottom: 16px;
+}
+
+.product_intro_detail {
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--gray600);
+  margin: 0;
+  padding-bottom: 24px;
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 62px;
+}
+
+.tag {
+  font-size: 16px;
+  font-weight: 400;
+  background: var(--gray100);
+  margin-right: 8px;
+  padding: 6px 16px;
+  border-radius: 26px;
+}
+
+.favorite_count {
+  margin-top: 10px;
+  font-size: 18px;
+  color: red;
+}
+
+.comment_section {
+  margin-top: 40px;
+}
+
+.do_comment {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--gray900);
+}
+
+.comment_section textarea {
+  font-family: Pretendard;
+  width: 100%;
+  height: 80px;
+  margin-top: 10px;
+  border: none;
+  border-radius: 12px;
+  padding: 16px 24px;
+  background-color: var(--gray100);
+  color: var(--gray400);
+  font-size: 16px;
+  font-weight: 400;
+  resize: none; /* 세로 크기만 조정 가능 */
+  overflow-y: auto; /* 내용이 많을 경우 스크롤 */
+  box-sizing: border-box; /* 패딩 포함 크기 계산 */
+}
+
+.submit_button {
+  margin-top: 10px;
+  background: #ccc;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: not-allowed;
+}
+
+.submit_button.active {
+  background: #3692ff;
+  cursor: pointer;
+}
+
+.comment_list {
+  margin-top: 20px;
+  max-height: 16rem; /* 댓글 목록의 최대 높이 설정 */
+  overflow-y: auto; /* 댓글 목록이 길어지면 스크롤 */
+  padding-right: 10px; /* 스크롤바 공간 확보 */
+}
+
+.comment {
+  display: flex;
+  margin-top: 10px;
+}
+
+.comment img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+
+.nickname {
+  font-weight: bold;
+}
+
+.timestamp {
+  color: #aaa;
+  font-size: 12px;
+}
+
+.back_button {
+  display: flex;
+  justify-content: center;
+}
+
+.back_button button {
+  margin-top: 4rem;
+  font-family: Pretendard;
+  background-color: var(--blue);
+  padding: 11px 39.5px;
+  border: none;
+  border-radius: 40px;
+  color: var(--gray100);
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+  width: 240px;
+  height: 48px;
+  cursor: pointer;
+}
diff --git a/hooks/windowView.ts b/hooks/windowView.ts
new file mode 100644
index 000000000..77f8f3b74
--- /dev/null
+++ b/hooks/windowView.ts
@@ -0,0 +1,21 @@
+import { useState, useEffect } from "react";
+import { debounce } from "lodash"; // lodash에서 debounce 임포트
+
+const windowView = () => {
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    const handleWindowResize = debounce(() => {
+      setWidth(window.innerWidth); // 화면 크기 변경 시 width 업데이트
+    }, 200); // 200ms 후에만 실행되도록 설정
+
+    handleWindowResize(); // 초기값 설정
+    window.addEventListener("resize", handleWindowResize); // resize 이벤트 리스너 추가
+
+    return () => window.removeEventListener("resize", handleWindowResize); // 컴포넌트 언마운트 시 이벤트 리스너 제거
+  }, []);
+
+  return width;
+};
+
+export default windowView;
diff --git a/package-lock.json b/package-lock.json
index baa2b6655..96755fd99 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,11 +8,13 @@
       "name": "fe-weekly-mission",
       "version": "0.1.0",
       "dependencies": {
+        "lodash": "^4.17.21",
         "next": "13.5.6",
         "react": "^18",
         "react-dom": "^18"
       },
       "devDependencies": {
+        "@types/lodash": "^4.17.14",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
@@ -335,6 +337,13 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.14",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.14.tgz",
+      "integrity": "sha512-jsxagdikDiDBeIRaPYtArcT8my4tN1og7MtMRquFT3XNA6axxyHDRUemqDz/taRDdOUn0GnGHRCuff4q48sW9A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "20.9.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.9.4.tgz",
@@ -2450,6 +2459,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
diff --git a/package.json b/package.json
index 1ce24924f..00d99b1a3 100644
--- a/package.json
+++ b/package.json
@@ -9,16 +9,18 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "lodash": "^4.17.21",
+    "next": "13.5.6",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "13.5.6"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@types/lodash": "^4.17.14",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "13.5.6"
+    "eslint-config-next": "13.5.6",
+    "typescript": "^5"
   }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 021681f4d..68f870905 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,11 @@
-import '@/styles/globals.css'
-import type { AppProps } from 'next/app'
+import "@/styles/globals.css";
+import Header from "@/components/Header";
+import type { AppProps } from "next/app";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <>
+      <Component {...pageProps} />
+    </>
+  );
 }
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 54e8bf3e2..cce5d7287 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,13 +1,47 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+// pages/_document.tsx
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
-    <Html lang="en">
-      <Head />
+    <Html lang="ko">
+      <Head>
+        <meta charSet="utf-8" />
+        <link
+          rel="stylesheet"
+          as="style"
+          crossOrigin="anonymous"
+          href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"
+        />
+        <meta name="description" content="일상의 모든 물건을 거래해보세요" />
+        <meta property="og:title" content="판다 마켓" />
+        <meta
+          property="og:description"
+          content="일상의 모든 물건을 거래해보세요"
+        />
+        <meta
+          property="og:url"
+          content="https://fe-12-kimkyungki.netlify.app"
+        />
+        <meta
+          property="og:image"
+          content="https://fe-12-kimkyungki.netlify.app/images/Img_home_01.png"
+        />
+        <meta property="og:type" content="website" />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content="판다 마켓" />
+        <meta
+          name="twitter:description"
+          content="일상의 모든 물건을 거래해보세요"
+        />
+        <meta
+          name="twitter:image"
+          content="https://fe-12-kimkyungki.netlify.app/images/Img_home_01.png"
+        />
+      </Head>
       <body>
         <Main />
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/pages/additem/index.tsx b/pages/additem/index.tsx
new file mode 100644
index 000000000..dd210cd7d
--- /dev/null
+++ b/pages/additem/index.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import Header from "@/components/Header";
+
+const AddItemPage: React.FC = () => {
+  return (
+    <div>
+      <Header />
+      <h1>상품 추가 페이지</h1>
+    </div>
+  );
+};
+
+export default AddItemPage;
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/boards/index.tsx b/pages/boards/index.tsx
new file mode 100644
index 000000000..55945c5a9
--- /dev/null
+++ b/pages/boards/index.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import Header from "@/components/Header";
+
+const BoardPage: React.FC = () => {
+  return (
+    <div>
+      <Header />
+      <h1>자유게시판</h1>
+    </div>
+  );
+};
+
+export default BoardPage;
diff --git a/pages/index.tsx b/pages/index.tsx
index 02c4dee04..73f26ddff 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,114 +1,188 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
-import styles from '@/styles/Home.module.css'
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+import styles from "@/styles/home.module.css"; // CSS 모듈 임포트
+import sec1Img from "@/public/assets/img/landing/section_1.png";
+import logoImg from "@/public/assets/img/logo/logo.png";
+import Img_home_01 from "@/public/assets/img/landing/Img_home_01.png";
+import Img_home_02 from "@/public/assets/img/landing/Img_home_02.png";
+import Img_home_03 from "@/public/assets/img/landing/Img_home_03.png";
+import panda2 from "@/public/assets/img/landing/panda2.png";
+import facebookLogo from "@/public/assets/img/sns/ic_facebook.png";
+import twitterLogo from "@/public/assets/img/sns/ic_twitter.png";
+import youtubeLogo from "@/public/assets/img/sns/ic_youtube.png";
+import instagramLogo from "@/public/assets/img/sns/ic_instagram.png";
 
-const inter = Inter({ subsets: ['latin'] })
-
-export default function Home() {
+const Home: React.FC = () => {
   return (
     <>
       <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
+        <title>판다마켓</title>
       </Head>
-      <main className={`${styles.main} ${inter.className}`}>
-        <div className={styles.description}>
-          <p>
-            Get started by editing&nbsp;
-            <code className={styles.code}>pages/index.tsx</code>
-          </p>
-          <div>
-            <a
-              href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              By{' '}
+      <div>
+        {/* <!-- header --> */}
+        <header className={styles.header}>
+          <nav className={styles["header-bar"]}>
+            {/* <!-- 로고 --> */}
+            <div className={styles.logo}>
               <Image
-                src="/vercel.svg"
-                alt="Vercel Logo"
-                className={styles.vercelLogo}
-                width={100}
-                height={24}
-                priority
+                src={logoImg}
+                className={styles["logo-Img"]}
+                alt="로고이미지"
               />
-            </a>
+              <h1 className={styles["logoTitle"]}>
+                <a href="/">판다마켓</a>
+              </h1>
+            </div>
+            {/* <!-- 로그인 --> */}
+            {/* <!-- 수정 사항 button => a 태그 사용 --> */}
+            <div className={styles.login}>
+              <Link href="/login">로그인</Link>
+            </div>
+          </nav>
+        </header>
+        {/* <!-- main --> */}
+        <main className={styles.main}>
+          {/* <!-- 구경하러 가기 --> */}
+          <div className={styles.section_1}>
+            <nav className={styles.sec1_frame}>
+              <div className={styles.sec1_sentence_flex}>
+                <div className={styles.sec1_sentence}>
+                  <h2>일상의 모든 물건을 거래해 보세요</h2>
+                </div>
+                <div className={styles.goItems}>
+                  <Link href="/items">구경하러 가기</Link>
+                </div>
+              </div>
+              <div className={styles.sec1_img}>
+                <Image src={sec1Img} alt="구경하러가기이미지" />
+              </div>
+            </nav>
           </div>
-        </div>
-
-        <div className={styles.center}>
-          <Image
-            className={styles.logo}
-            src="/next.svg"
-            alt="Next.js Logo"
-            width={180}
-            height={37}
-            priority
-          />
-        </div>
-
-        <div className={styles.grid}>
-          <a
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2>
-              Docs <span>-&gt;</span>
-            </h2>
-            <p>
-              Find in-depth information about Next.js features and&nbsp;API.
-            </p>
-          </a>
-
-          <a
-            href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2>
-              Learn <span>-&gt;</span>
-            </h2>
-            <p>
-              Learn about Next.js in an interactive course with&nbsp;quizzes!
-            </p>
-          </a>
-
-          <a
-            href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2>
-              Templates <span>-&gt;</span>
-            </h2>
-            <p>
-              Discover and deploy boilerplate example Next.js&nbsp;projects.
-            </p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2>
-              Deploy <span>-&gt;</span>
-            </h2>
-            <p>
-              Instantly deploy your Next.js site to a shareable URL
-              with&nbsp;Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
+          {/* <!-- 인기 상품 --> */}
+          <div className={styles.section_2}>
+            <div className={styles.sec2_1}>
+              <nav className={styles.sec2_1frame}>
+                <div className={styles.img_size}>
+                  <Image src={Img_home_01} alt="인기상품이미지" />
+                </div>
+                <div className={styles.sec2_hotItem_flex}>
+                  <h3>Hot item</h3>
+                  <div className={styles.hotItem}>
+                    <span className={styles.sec2_sentence} id="hotItemText">
+                      인기 상품을 확인해 보세요
+                    </span>
+                    <span className={styles.sec2_sentence_2}>
+                      가장 HOT한 중고거래 물품을
+                      <br />
+                      판다 마켓에서 확인해 보세요
+                    </span>
+                  </div>
+                </div>
+              </nav>
+            </div>
+            {/* <!-- 상품 검색 --> */}
+            <div className={styles.sec2_2}>
+              <nav className={styles.sec2_2frame}>
+                <div className={styles.sec2_search_flex}>
+                  <h3>Search</h3>
+                  <div className={styles.search}>
+                    <span className={styles.sec2_sentence} id="searchText">
+                      구매를 원하는 상품을 검색하세요
+                    </span>
+                    <span className={styles.sec2_sentence_2}>
+                      구매하고 싶은 물품은 검색해서
+                      <br />
+                      쉽게 찾아보세요
+                    </span>
+                  </div>
+                </div>
+                <div className={styles.img_size}>
+                  <Image src={Img_home_02} alt="인기상품이미지" />
+                </div>
+              </nav>
+            </div>
+            {/* <!-- 상품 등록 --> */}
+            <div className={styles.sec2_3}>
+              <nav className={styles.sec2_3frame}>
+                <div className={styles.img_size}>
+                  <Image src={Img_home_03} alt="인기상품이미지" />
+                </div>
+                <div className={styles.sec2_register_flex}>
+                  <h3>Register</h3>
+                  <div className={styles.register}>
+                    <span className={styles.sec2_sentence} id="registerText">
+                      판매를 원하는 상품을 등록하세요
+                    </span>
+                    <span className={styles.sec2_sentence_2}>
+                      어떤 물건이든 판매하고 싶은 상품을
+                      <br />
+                      쉽게 등록하세요
+                    </span>
+                  </div>
+                </div>
+              </nav>
+            </div>
+          </div>
+          {/* <!-- 메인 하단 --> */}
+          <div className={styles.section_3}>
+            <nav className={styles.sec3_frame}>
+              <div className={styles.sec3_sentence}>
+                <h2>
+                  믿을 수 있는
+                  <br />
+                  판다마켓 중고 거래
+                </h2>
+              </div>
+              <div className={styles.sec3_img}>
+                <Image src={panda2} alt="인기상품이미지" />
+              </div>
+            </nav>
+          </div>
+        </main>
+        {/* <!-- footer --> */}
+        <footer className={styles.footer}>
+          <nav className={styles["footer-bar"]}>
+            <div className={styles.copyRight}>
+              <p>@codeit - 2024</p>
+            </div>
+            <div className={styles.privacyNfaq}>
+              <a href="/privacy">Privacy Policy</a>
+              <a href="/faq">FAQ</a>
+            </div>
+            {/* <!-- 소셜사이트 페이지 이동 --> */}
+            {/* <!-- 리스트 형식으로 수정 --> */}
+            <ul className={styles.socialNetwork}>
+              <li className={styles.facebook}>
+                <a
+                  href="https://www.facebook.com/?locale=ko_KR"
+                  target="_blank"
+                >
+                  <Image src={facebookLogo} alt="facebook 로고" />
+                </a>
+              </li>
+              <li className={styles.twitter}>
+                <a href="https://www.twitter.com" target="_blank">
+                  <Image src={twitterLogo} alt="twitter 로고" />
+                </a>
+              </li>
+              <li className={styles.youtube}>
+                <a href="https://www.youtube.com/" target="_blank">
+                  <Image src={youtubeLogo} alt="youtube 로고" />
+                </a>
+              </li>
+              <li className={styles.instagram}>
+                <a href="https://www.instagram.com" target="_blank">
+                  <Image src={instagramLogo} alt="instagram 로고" />
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </footer>
+        <script src="js/screen.js"></script>
+      </div>
     </>
-  )
-}
+  );
+};
+
+export default Home;
diff --git a/pages/items/[id].tsx b/pages/items/[id].tsx
new file mode 100644
index 000000000..c57b9c5c9
--- /dev/null
+++ b/pages/items/[id].tsx
@@ -0,0 +1,192 @@
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router"; // next/router에서 useRouter 가져오기
+import { getProductComments, getProductDetails } from "@/api/api";
+import styles from "@/components/product/product.module.css";
+import { Product, Comment } from "@/types"; // 타입 임포트
+import { formatDate } from "@/utils/formatDate"; // formatDate 함수 임포트
+import Header from "@/components/Header";
+
+const ProductDetail: React.FC = () => {
+  const router = useRouter(); // useRouter 훅을 통해 라우터 객체 접근
+  const { id } = router.query; // query에서 id를 가져오기
+  const [product, setProduct] = useState<Product | null>(null);
+  const [comments, setComments] = useState<Comment[]>([]);
+  const [newComment, setNewComment] = useState<string>("");
+  const [isCommentValid, setIsCommentValid] = useState<boolean>(false);
+
+  // Fetch product details
+  useEffect(() => {
+    async function fetchProduct() {
+      if (id) {
+        try {
+          const data = await getProductDetails(id as string); // id를 string으로 캐스팅
+          setProduct(data); // 상품 데이터 설정
+        } catch (error) {
+          console.error("Error fetching product details:", error);
+        }
+      }
+    }
+
+    fetchProduct();
+  }, [id]); // id 변경 시마다 다시 호출
+
+  // Fetch comments
+  useEffect(() => {
+    async function fetchComments() {
+      if (id) {
+        try {
+          const data = await getProductComments({
+            productId: id as string,
+            limit: 10,
+          });
+          if (data && Array.isArray(data)) {
+            setComments(data); // list 안에 댓글 배열이 있을 경우
+          } else {
+            setComments([]); // list가 없으면 빈 배열 설정
+          }
+        } catch (error) {
+          console.error("Error fetching comments:", error);
+        }
+      }
+    }
+
+    fetchComments();
+  }, [id]); // id 변경 시마다 다시 호출
+
+  const handleCommentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    setNewComment(value);
+    setIsCommentValid(value.trim().length > 0);
+  };
+
+  const handleCommentSubmit = async () => {
+    if (!isCommentValid) return;
+
+    try {
+      const user = {
+        id: 1,
+        nickname: "nickname",
+        image: "user-image-url.jpg",
+      };
+
+      const newCommentData = {
+        content: newComment,
+        writer: user,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        id: Date.now().toString(),
+      };
+
+      const token = localStorage.getItem("authToken");
+
+      const response = await fetch(
+        `https://panda-market-api.vercel.app/products/${id}/comments`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify(newCommentData),
+        }
+      );
+
+      if (response.ok) {
+        const result = await response.json();
+        setComments((prevComments) => [...prevComments, result]);
+        setNewComment("");
+        setIsCommentValid(false);
+      } else {
+        console.error("Unauthorized: Check your login or token.");
+      }
+    } catch (error) {
+      console.error("Error submitting comment:", error);
+    }
+  };
+
+  if (!product) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <Header />
+      <div className={styles.section}>
+        <div className={styles.container}>
+          <div className={styles.detail_container}>
+            <div className={styles.image_section}>
+              {product.images.map((img, index) => (
+                <img key={index} src={img} alt={`상품 이미지 ${index + 1}`} />
+              ))}
+            </div>
+            <div className={styles.details_section}>
+              <h1 className={styles.product_name}>{product.name}</h1>
+              <span className={styles.price}>{product.price}원</span>
+              <hr className={styles.hr} />
+              <h2 className={styles.product_intro}>상품 소개</h2>
+              <p className={styles.product_intro_detail}>
+                {product.description}
+              </p>
+              <h3 className={styles.product_tag}>상품 태그</h3>
+              <div className={styles.tags}>
+                {product.tags.map((tag, index) => (
+                  <span key={index} className={styles.tag}>
+                    #{tag}
+                  </span>
+                ))}
+              </div>
+              <p className={styles.favorite_count}>
+                ❤️ {product.favoriteCount}
+              </p>
+            </div>
+          </div>
+          <hr />
+          <div className={styles.comment_section}>
+            <h2 className={styles.do_comment}>문의하기</h2>
+            <textarea
+              value={newComment}
+              onChange={handleCommentChange}
+              placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
+            />
+            <button
+              onClick={handleCommentSubmit}
+              className={`${styles.submit_button} ${
+                isCommentValid ? styles.active : ""
+              }`}
+              disabled={!isCommentValid}
+            >
+              등록
+            </button>
+            <div className={styles.comment_list}>
+              {comments.map((comment, index) => (
+                <div key={index} className={styles.comment}>
+                  <img
+                    src={comment.writer.image || "default-avatar.jpg"}
+                    alt="작성자 이미지"
+                  />
+                  <div>
+                    <p className={styles.nickname}>{comment.writer.nickname}</p>
+                    <p className={styles.content}>{comment.content}</p>
+                    <p className={styles.timestamp}>
+                      {formatDate(comment.updatedAt)}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className={styles.back_button}>
+            <button
+              onClick={() => router.push("/items")}
+              className={styles.back_button}
+            >
+              목록으로 돌아가기
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductDetail;
diff --git a/pages/items/index.tsx b/pages/items/index.tsx
new file mode 100644
index 000000000..78509d88d
--- /dev/null
+++ b/pages/items/index.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import Best from "@/components/Best";
+import AllProducts from "@/components/AllProducts";
+import Header from "@/components/Header";
+
+const Home: React.FC = () => {
+  return (
+    <div>
+      <Header />
+      <Best />
+      <AllProducts />
+    </div>
+  );
+};
+
+export default Home;
diff --git a/public/assets/fonts/ROKAF_SANS_BOLD.TTF b/public/assets/fonts/ROKAF_SANS_BOLD.TTF
new file mode 100644
index 000000000..8889aba40
Binary files /dev/null and b/public/assets/fonts/ROKAF_SANS_BOLD.TTF differ
diff --git a/public/assets/fonts/ROKAF_SANS_MEDIUM.TTF b/public/assets/fonts/ROKAF_SANS_MEDIUM.TTF
new file mode 100644
index 000000000..d27a0512c
Binary files /dev/null and b/public/assets/fonts/ROKAF_SANS_MEDIUM.TTF differ
diff --git a/public/assets/img/landing/Img_add.svg b/public/assets/img/landing/Img_add.svg
new file mode 100644
index 000000000..f5ffa8bd3
--- /dev/null
+++ b/public/assets/img/landing/Img_add.svg
@@ -0,0 +1,6 @@
+<svg width="282" height="282" viewBox="0 0 282 282" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="282" height="282" rx="12" fill="#F3F4F6"/>
+<path d="M127 122H155" stroke="#9CA3AF" stroke-width="4" stroke-linecap="round"/>
+<path d="M141 136V108" stroke="#9CA3AF" stroke-width="4" stroke-linecap="round"/>
+<path d="M116.016 164.375V178.297H114.781V164.375H116.016ZM105.078 170.297C105.086 167.344 106.555 165.461 108.625 165.453C110.688 165.461 112.18 167.344 112.172 170.297C112.18 173.258 110.688 175.133 108.625 175.125C106.555 175.133 105.086 173.258 105.078 170.297ZM106.266 170.297C106.266 172.555 107.234 174.039 108.625 174.031C110.023 174.039 110.984 172.555 110.984 170.297C110.984 168.039 110.023 166.555 108.625 166.547C107.234 166.555 106.266 168.039 106.266 170.297ZM125.625 165.75V174.781H119.203V165.75H125.625ZM120.406 173.781H124.422V166.734H120.406V173.781ZM128.609 178.297V164.375H129.844V178.297H128.609ZM137.188 168.641C137.195 171 138.906 173.398 140.953 174.281L140.266 175.25C138.641 174.516 137.242 172.914 136.594 170.992C135.945 173.031 134.539 174.797 132.953 175.594L132.219 174.625C134.211 173.672 135.945 171.047 135.953 168.641V166.828H132.672V165.812H140.5V166.828H137.188V168.641ZM142.438 178.266V164.375H143.672V178.266H142.438ZM162.734 170.984V172.016H150.062V170.984H162.734ZM151.594 175.734C151.586 174.141 153.391 173.234 156.391 173.234C159.367 173.234 161.156 174.141 161.172 175.734C161.156 177.344 159.367 178.234 156.391 178.234C153.391 178.234 151.586 177.344 151.594 175.734ZM151.672 169.656V164.938H161.156V165.969H152.875V168.656H161.25V169.656H151.672ZM152.844 175.734C152.828 176.711 154.164 177.266 156.391 177.266C158.594 177.266 159.93 176.711 159.938 175.734C159.93 174.766 158.594 174.203 156.391 174.188C154.164 174.203 152.828 174.766 152.844 175.734ZM176.594 172.031V173.047H163.875V172.031H169.625V170.562H165.531V167.172H173.719V165.734H165.484V164.734H174.953V168.094H166.75V169.578H175.25V170.562H170.828V172.031H176.594ZM165.297 175.109V174.109H175.031V178.141H173.797V175.109H165.297Z" fill="#9CA3AF"/>
+</svg>
diff --git a/public/assets/img/landing/Img_home_01.png b/public/assets/img/landing/Img_home_01.png
new file mode 100644
index 000000000..249652e34
Binary files /dev/null and b/public/assets/img/landing/Img_home_01.png differ
diff --git a/public/assets/img/landing/Img_home_02.png b/public/assets/img/landing/Img_home_02.png
new file mode 100644
index 000000000..84d8629f1
Binary files /dev/null and b/public/assets/img/landing/Img_home_02.png differ
diff --git a/public/assets/img/landing/Img_home_03.png b/public/assets/img/landing/Img_home_03.png
new file mode 100644
index 000000000..eb0d6cd26
Binary files /dev/null and b/public/assets/img/landing/Img_home_03.png differ
diff --git a/public/assets/img/landing/panda2.png b/public/assets/img/landing/panda2.png
new file mode 100644
index 000000000..1759c8bc3
Binary files /dev/null and b/public/assets/img/landing/panda2.png differ
diff --git a/public/assets/img/landing/section_1.png b/public/assets/img/landing/section_1.png
new file mode 100644
index 000000000..2baf7b1dd
Binary files /dev/null and b/public/assets/img/landing/section_1.png differ
diff --git a/public/assets/img/logo/deleteBtnIcon.svg b/public/assets/img/logo/deleteBtnIcon.svg
new file mode 100644
index 000000000..051490083
--- /dev/null
+++ b/public/assets/img/logo/deleteBtnIcon.svg
@@ -0,0 +1,5 @@
+<svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11" cy="12" r="10" fill="#9CA3AF"/>
+<path d="M7.08044 8L15.0804 16" stroke="#F9FAFB" stroke-width="1.8" stroke-linecap="round"/>
+<path d="M14.9999 8L6.99994 16" stroke="#F9FAFB" stroke-width="1.8" stroke-linecap="round"/>
+</svg>
diff --git a/public/assets/img/logo/heartIcon.svg b/public/assets/img/logo/heartIcon.svg
new file mode 100644
index 000000000..6ceacca75
--- /dev/null
+++ b/public/assets/img/logo/heartIcon.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5573 7.31157C2.40759 7.18016 2.28782 7.07475 2.20004 6.99739V6.95147L2.0243 6.77574C1.3305 6.08193 0.933374 5.16547 0.933374 4.2V4.07612C0.994843 2.2062 2.59191 0.666667 4.46671 0.666667C4.74499 0.666667 5.1142 0.763435 5.48225 0.961616C5.82958 1.14864 6.13445 1.40383 6.33689 1.68842C6.63138 2.31494 7.53917 2.30366 7.81157 1.65457C7.97931 1.36092 8.2733 1.0955 8.62562 0.899018C8.99324 0.693998 9.3597 0.6 9.60004 0.6C11.5294 0.6 13.0717 2.12742 13.1334 4.07581V4.2C13.1334 5.24201 12.73 6.14473 12.0613 6.75771L11.8667 6.93606V6.97957C11.7656 7.06525 11.6353 7.17766 11.4834 7.30974C11.1463 7.6029 10.6949 7.99999 10.2033 8.43321C10.0456 8.5722 9.88378 8.71492 9.72018 8.85919C8.86394 9.61426 7.9594 10.4119 7.34603 10.9417C7.16951 11.0861 6.89724 11.0861 6.72071 10.9417C5.9885 10.3093 4.82589 9.2962 3.83654 8.43155C3.34091 7.9984 2.88917 7.60286 2.5573 7.31157Z" stroke="#4B5563" stroke-width="1.2"/>
+</svg>
diff --git a/public/assets/img/logo/login.svg b/public/assets/img/logo/login.svg
new file mode 100644
index 000000000..bc8cfaaaa
--- /dev/null
+++ b/public/assets/img/logo/login.svg
@@ -0,0 +1,24 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_51309_1063)">
+<circle cx="20" cy="20" r="20" fill="#D1D5DB"/>
+<path d="M19.374 8.72955C19.8844 10.4933 18.5349 12.4367 16.9881 12.8874C15.4413 13.338 13.328 12.4034 12.8176 10.6396C12.3072 8.87592 13.3786 6.43217 14.9255 5.98153C16.9881 5.38063 18.8637 6.96583 19.374 8.72955Z" fill="white"/>
+<path d="M20.2247 8.72955C19.7143 10.4933 21.0638 12.4367 22.6106 12.8874C24.1575 13.338 26.2707 12.4034 26.7811 10.6396C27.2915 8.87592 26.2201 6.43217 24.6732 5.98153C22.6106 5.38063 20.7351 6.96583 20.2247 8.72955Z" fill="white"/>
+<path d="M29.8016 21.6147C29.8016 26.1007 25.4028 27.7683 19.4026 27.7683C13.4025 27.7683 9.10324 26.1007 9.10324 21.6147C9.10324 16.3964 13.4025 11.7689 19.4026 11.7689C25.4028 11.7689 29.8016 16.0026 29.8016 21.6147Z" fill="white"/>
+<path d="M17.4167 20.7285C17.4167 22.1978 16.4736 23.8096 15.1558 23.8096C13.8379 23.8096 11.709 22.6124 11.709 20.4177C11.709 18.3559 14.0088 17.6227 16.3853 17.9992C17.8419 18.2299 17.4167 19.2593 17.4167 20.7285Z" fill="#D1D5DB"/>
+<path d="M16.3158 20.5796C16.3158 20.8 16.2495 20.9786 15.9181 20.9786C15.5867 20.9786 15.5204 20.8 15.5204 20.5796C15.5204 20.3592 15.653 20.1805 15.9181 20.1805C16.1832 20.1805 16.3158 20.3592 16.3158 20.5796Z" fill="white"/>
+<path d="M21.4258 20.7284C21.4258 22.1976 22.3688 23.8094 23.6867 23.8094C25.0045 23.8094 27.1334 22.6123 27.1334 20.4175C27.1334 18.3558 24.8336 17.6226 22.4571 17.9991C21.0006 18.2298 21.4258 19.2592 21.4258 20.7284Z" fill="#D1D5DB"/>
+<path d="M22.5283 20.5796C22.5283 20.8 22.5946 20.9786 22.926 20.9786C23.2574 20.9786 23.3237 20.8 23.3237 20.5796C23.3237 20.3592 23.1912 20.1805 22.926 20.1805C22.6609 20.1805 22.5283 20.3592 22.5283 20.5796Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7575 30.0001C27.7508 30.0001 33.6107 27.7473 33.6107 21.6867C33.6107 14.1048 27.7508 8.38513 19.7575 8.38513C11.7642 8.38513 6.03683 14.6369 6.03683 21.6867C6.03683 27.7473 11.7642 30.0001 19.7575 30.0001ZM19.4429 27.6725C25.3226 27.6725 29.633 26.0228 29.633 21.5845C29.633 16.0322 25.3226 11.8437 19.4429 11.8437C13.5632 11.8437 9.35031 16.4219 9.35031 21.5845C9.35031 26.0228 13.5632 27.6725 19.4429 27.6725Z" fill="white"/>
+<mask id="mask0_51309_1063" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40">
+<circle cx="20" cy="20" r="20" fill="#9CA3AF"/>
+</mask>
+<g mask="url(#mask0_51309_1063)">
+<ellipse cx="19.5833" cy="37.5" rx="11.25" ry="12.5" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_51309_1063">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/img/logo/logo.png b/public/assets/img/logo/logo.png
new file mode 100644
index 000000000..4594f52a8
Binary files /dev/null and b/public/assets/img/logo/logo.png differ
diff --git a/public/assets/img/logo/searchIcon.svg b/public/assets/img/logo/searchIcon.svg
new file mode 100644
index 000000000..52241e6d8
--- /dev/null
+++ b/public/assets/img/logo/searchIcon.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="M10.8966 16.2605C12.378 16.2605 13.6424 15.7401 14.6897 14.6992C15.7369 13.6584 16.2605 12.3908 16.2605 10.8966C16.2605 9.41507 15.7369 8.1507 14.6897 7.10345C13.6424 6.05619 12.378 5.53257 10.8966 5.53257C9.4023 5.53257 8.13474 6.05619 7.09387 7.10345C6.053 8.1507 5.53257 9.41507 5.53257 10.8966C5.53257 12.3908 6.053 13.6584 7.09387 14.6992C8.13474 15.7401 9.4023 16.2605 10.8966 16.2605ZM10.8966 17.7931C9.9387 17.7931 9.04151 17.6111 8.20498 17.2471C7.36845 16.8831 6.64049 16.3914 6.02107 15.772C5.40166 15.1526 4.90996 14.4246 4.54598 13.5881C4.18199 12.7516 4 11.8544 4 10.8966C4 9.95147 4.18199 9.06066 4.54598 8.22414C4.90996 7.38761 5.40166 6.65645 6.02107 6.03065C6.64049 5.40485 7.36845 4.90996 8.20498 4.54598C9.04151 4.18199 9.9387 4 10.8966 4C11.8416 4 12.7324 4.18199 13.569 4.54598C14.4055 4.90996 15.1367 5.40485 15.7625 6.03065C16.3883 6.65645 16.8831 7.38761 17.2471 8.22414C17.6111 9.06066 17.7931 9.95147 17.7931 10.8966C17.7931 11.7139 17.659 12.4866 17.3908 13.2146C17.1226 13.9425 16.7522 14.6066 16.2797 15.2069L18.7893 17.7165C18.9425 17.8697 19.016 18.0485 19.0096 18.2529C19.0032 18.4572 18.9234 18.636 18.7701 18.7893C18.6169 18.9298 18.4381 19 18.2337 19C18.0294 19 17.8506 18.9298 17.6973 18.7893L15.1877 16.2989C14.5875 16.7714 13.9234 17.1386 13.1954 17.4004C12.4674 17.6622 11.7011 17.7931 10.8966 17.7931Z" fill="#9CA3AF"/>
+</svg>
diff --git a/public/assets/img/sns/ic-google.png b/public/assets/img/sns/ic-google.png
new file mode 100644
index 000000000..49107bd86
Binary files /dev/null and b/public/assets/img/sns/ic-google.png differ
diff --git a/public/assets/img/sns/ic-kakao.png b/public/assets/img/sns/ic-kakao.png
new file mode 100644
index 000000000..b389433f7
Binary files /dev/null and b/public/assets/img/sns/ic-kakao.png differ
diff --git a/public/assets/img/sns/ic_facebook.png b/public/assets/img/sns/ic_facebook.png
new file mode 100644
index 000000000..a3e343c77
Binary files /dev/null and b/public/assets/img/sns/ic_facebook.png differ
diff --git a/public/assets/img/sns/ic_instagram.png b/public/assets/img/sns/ic_instagram.png
new file mode 100644
index 000000000..c47e044d1
Binary files /dev/null and b/public/assets/img/sns/ic_instagram.png differ
diff --git a/public/assets/img/sns/ic_twitter.png b/public/assets/img/sns/ic_twitter.png
new file mode 100644
index 000000000..3f74b730a
Binary files /dev/null and b/public/assets/img/sns/ic_twitter.png differ
diff --git a/public/assets/img/sns/ic_youtube.png b/public/assets/img/sns/ic_youtube.png
new file mode 100644
index 000000000..874150b0b
Binary files /dev/null and b/public/assets/img/sns/ic_youtube.png differ
diff --git a/styles/Home.module.css b/styles/Home.module.css
index 6676d2c66..99a17b878 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -1,229 +1,708 @@
+/* INDEX CSS FILE */
+
 .main {
+  padding-top: 72px;
+}
+
+/***************** header ******************/
+.header {
+  box-sizing: border-box;
+  position: fixed;
+  z-index: 1;
+  width: 100%;
+  height: 70px;
+}
+
+.header-bar,
+.logo {
+  box-sizing: border-box;
   display: flex;
-  flex-direction: column;
-  justify-content: space-between;
   align-items: center;
-  padding: 6rem;
-  min-height: 100vh;
 }
 
-.description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
-  font-size: 0.85rem;
-  max-width: var(--max-width);
+.logo {
+  gap: 10px;
+}
+
+.header-bar {
+  margin: auto;
+  padding: 0 200px;
+  background-color: #ffffff;
+  border: 1px solid #dfdfdf;
   width: 100%;
-  z-index: 2;
-  font-family: var(--font-mono);
+  flex-direction: row;
+  justify-content: space-between;
+  height: 70px;
 }
 
-.description a {
+/* tablet */
+@media screen and (max-width: 1199px) {
+  .header-bar {
+    padding: 0 24px;
+  }
+}
+
+/* mobile */
+@media screen and (max-width: 767px) and (min-width: 375px) {
+  .header-bar {
+    padding: 0 16px;
+    min-width: 375px;
+    max-width: 767px;
+    margin: 0;
+  }
+}
+
+.header-bar img {
+  width: 40px;
+  height: 40px;
+}
+
+.header-bar .login {
+  position: relative;
+  border-radius: 8px;
+  background-color: var(--blue);
+  width: 128px;
+  height: 48px;
+}
+
+.login a {
+  position: absolute;
+  /* width: 82px; */
+  /* height: 24px; */
+  padding: 11px 43px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 26px;
+  color: #ffffff;
+  text-decoration: none;
+  text-align: center;
+}
+
+.header-bar > .login:hover {
+  cursor: pointer;
+  background: #1967d6;
+}
+
+.logoTitle a {
+  font-family: "ROKAF Sans";
+  text-decoration: none;
+  color: var(--blue);
+  font-weight: 800;
+  font-size: 25px;
+  line-height: 36px;
+  text-align: left;
+}
+
+/***************** footer ******************/
+
+.footer {
+  background-color: var(--gray900);
+  height: 160px;
+}
+
+.footer-bar {
+  height: 20px;
+  padding: 32px 200px 108px;
+}
+
+.footer-bar,
+.privacyNfaq,
+.socialNetwork {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  gap: 0.5rem;
+  list-style-type: none;
 }
 
-.description p {
-  position: relative;
-  margin: 0;
-  padding: 1rem;
-  background-color: rgba(var(--callout-rgb), 0.5);
-  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
-  border-radius: var(--border-radius);
+/* tablet */
+@media screen and (max-width: 1199px) {
+  .footer-bar {
+    min-width: 536px;
+    padding: 32px 104px 108px;
+  }
 }
 
-.code {
-  font-weight: 700;
-  font-family: var(--font-mono);
+/* mobile */
+@media screen and (max-width: 767px) and (min-width: 375px) {
+  .footer-bar {
+    padding: 32px;
+    min-width: 311px;
+    flex-wrap: wrap;
+  }
 }
 
-.grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(25%, auto));
-  max-width: 100%;
-  width: var(--max-width);
+.footer-bar .copyRight {
+  font-weight: 400;
+  color: var(--gray400);
 }
 
-.card {
-  padding: 1rem 1.2rem;
-  border-radius: var(--border-radius);
-  background: rgba(var(--card-rgb), 0);
-  border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
+.footer-bar .privacyNfaq a {
+  color: var(--gray200);
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 19px;
+  text-align: center;
+  text-decoration: none;
 }
 
-.card span {
-  display: inline-block;
-  transition: transform 200ms;
+.privacyNfaq {
+  gap: 30px;
 }
 
-.card h2 {
+.socialNetwork {
+  gap: 12px;
+  padding: 0;
+}
+
+.socialNetwork ol {
+  padding: 0;
+}
+
+/***************** section_1 ******************/
+.section_1,
+.sec1_frame {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.section_1 {
+  height: 540px;
+  background-color: #cfe5ff;
+  background-size: cover;
+  background-repeat: no-repeat;
+  margin-bottom: 80px;
+}
+
+.section_1 .goItems {
+  background-color: var(--blue);
+  border-radius: 40px;
+  border: 0px;
+  /* height: 24px; */
+  padding: 16px 0;
+  gap: 10px;
+}
+
+.goItems a {
+  color: #ffffff;
   font-weight: 600;
-  margin-bottom: 0.7rem;
+  font-size: 20px;
+  text-decoration: none;
+  padding: 16px 124px;
 }
 
-.card p {
+.sec1_sentence_flex > .goItems:hover {
+  cursor: pointer;
+  background: #1967d6;
+}
+
+.section_1 .sec1_frame {
+  gap: 7px;
   margin: 0;
-  opacity: 0.6;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  max-width: 30ch;
+  height: 540px;
+}
+
+.sec1_sentence {
+  width: 295px;
+  height: 112px;
+}
+
+.sec1_frame h2 {
+  color: var(--gray700);
+  margin: 0;
+  letter-spacing: -1px;
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+}
+
+.sec1_frame .sec1_img {
+  position: relative;
+  overflow: hidden;
+  width: 740px;
+  height: 340px;
 }
 
-.center {
+.sec1_img > img {
+  position: absolute;
+  width: 100%;
+}
+
+.sec1_sentence_flex {
+  width: 357px;
+  height: 260px;
   display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  gap: 32px;
+  padding: 40px 0;
+}
+
+/* tablet */
+@media screen and (max-width: 1199px) {
+  .section_1 {
+    min-width: 744px;
+    height: 771px;
+  }
+
+  .section_1 .goItems {
+    /* height: 24px; */
+    padding: 16px 85px;
+  }
+
+  .goItems > a {
+    padding: 0;
+  }
+
+  .section_1 .sec1_frame {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0px;
+    min-width: 744px;
+    height: 771px;
+  }
+
+  .sec1_sentence {
+    width: 512px;
+    height: 56px;
+  }
+
+  .sec1_sentence_flex {
+    width: 512px;
+    height: 136px;
+    align-items: center;
+    gap: 24px;
+    padding: 84px 116px 211px;
+  }
+}
+
+/* moblie */
+@media screen and (max-width: 767px) {
+  .section_1 {
+    min-width: 375px;
+    height: 540px;
+  }
+
+  .section_1 .goItems {
+    width: 160px;
+    height: 46px;
+    padding: 12px 31px;
+  }
+
+  .goItems a {
+    font-size: 18px;
+    line-height: 24px;
+  }
+
+  .section_1 .sec1_frame {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0px;
+    min-width: 375px;
+    height: 540px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  .sec1_sentence {
+    width: 240px;
+    height: 90px;
+    text-align: center;
+  }
+
+  .sec1_frame h2 {
+    font-size: 32px;
+    line-height: 44px;
+  }
+
+  .sec1_frame .sec1_img {
+    width: 375px;
+    height: 256px;
+    top: 33px;
+  }
+
+  .sec1_sentence_flex {
+    width: 240px;
+    height: 156px;
+    align-items: center;
+    gap: 18px;
+    padding-top: 40px;
+  }
+}
+
+/***************** section_2 ******************/
+
+.section_2 {
+  display: flex;
+  flex-direction: column;
+  min-width: 988px;
+  min-height: 2160px;
+  /* margin-bottom: 137px; */
+  gap: 5rem;
+  justify-content: space-evenly;
+}
+
+.sec2_1,
+.sec2_2,
+.sec2_3 {
+  /* padding: 138px 0; */
+  max-height: 720px;
+}
+
+.sec2_1frame {
+  padding: 0 23.5px;
+}
+
+.sec2_2frame {
+  padding: 0 14px;
+  flex-wrap: wrap-reverse;
+}
+
+.sec2_3frame {
+  padding: 0 0 0 7px;
+}
+
+.sec2_1frame,
+.sec2_2frame,
+.sec2_3frame {
+  max-width: 988px;
+  margin: auto;
+  background-color: #fcfcfc;
+  display: flex;
+  flex-direction: row;
   justify-content: center;
   align-items: center;
-  position: relative;
-  padding: 4rem 0;
+  gap: 64px;
+  flex-wrap: wrap;
 }
 
-.center::before {
-  background: var(--secondary-glow);
-  border-radius: 50%;
-  width: 480px;
-  height: 360px;
-  margin-left: -400px;
+.sec2_hotItem_flex,
+.sec2_register_flex {
+  gap: 12px;
+  display: flex;
+  flex-direction: column;
+  height: 238px;
+  flex-grow: 1;
 }
 
-.center::after {
-  background: var(--primary-glow);
-  width: 240px;
-  height: 180px;
-  z-index: -1;
+.hotItem,
+.register {
+  display: flex;
+  flex-direction: column;
+  padding-right: 24px;
+  gap: 24px;
+  width: 317px;
+  height: 200px;
 }
 
-.center::before,
-.center::after {
-  content: '';
-  left: 50%;
-  position: absolute;
-  filter: blur(45px);
-  transform: translateZ(0);
+.register {
+  padding-right: 0;
+  min-width: 338px;
 }
 
-.logo {
+.sec2_search_flex,
+.search {
+  gap: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  width: 317px;
+  height: 238px;
+  flex-grow: 1;
+}
+
+.search {
+  padding-left: 24px;
+  gap: 24px;
+}
+
+.sec2_search_flex > h3,
+.search > .sec2_sentence,
+.search > .sec2_sentence_2 {
+  text-align: right;
+}
+
+.search > .sec2_sentence {
+  padding-left: 14px;
+}
+
+.section_2 h3 {
+  margin: 0;
+  color: var(--blue);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 26px;
+}
+
+.section_2 .sec2_sentence {
+  margin: 0;
+  color: var(--gray700);
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+}
+
+.section_2 .sec2_sentence_2 {
+  margin: 0;
+  color: var(--gray700);
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 32px;
+}
+
+.section_2 .img_size {
+  flex-shrink: 0;
   position: relative;
+  overflow: hidden;
+  min-width: 579px;
+  height: 444px;
+}
+
+.img_size > img {
+  position: absolute;
+  width: 100%;
 }
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  .card:hover {
-    background: rgba(var(--card-rgb), 0.1);
-    border: 1px solid rgba(var(--card-border-rgb), 0.15);
+
+/* tablet */
+@media screen and (max-width: 1199px) {
+  .section_2 {
+    gap: 52px;
+    min-width: 696px;
+    min-height: 2228px;
+    margin: 24px 24px 56px 24px;
+    align-items: center;
   }
 
-  .card:hover span {
-    transform: translateX(4px);
+  .sec2_1,
+  .sec2_2,
+  .sec2_3 {
+    min-width: 696px;
+    height: 708px;
+    padding: 0 15px 0 16px;
+  }
+
+  .sec2_1frame,
+  .sec2_2frame,
+  .sec2_3frame {
+    flex-direction: column;
+    align-items: normal;
+    gap: 24px;
+    padding: 0;
+    max-width: 696px;
+    margin: 0;
+  }
+
+  .sec2_2frame {
+    flex-direction: column-reverse;
+    flex-wrap: wrap-reverse;
+  }
+
+  .section_2 h3 {
+    font-size: 16px;
+  }
+
+  .section_2 .sec2_sentence {
+    font-size: 32px;
+    line-height: 42px;
+  }
+
+  .search,
+  .register,
+  .hotItem {
+    width: 696px;
+  }
+
+  .section_2 .sec2_sentence_2 {
+    font-size: 18px;
+    line-height: 26px;
   }
-}
 
-@media (prefers-reduced-motion) {
-  .card:hover span {
-    transform: none;
+  .section_2 .img_size {
+    min-width: 696px;
+    height: 444px;
+    flex-grow: 1;
   }
 }
 
-/* Mobile */
-@media (max-width: 700px) {
-  .content {
-    padding: 4rem;
+/* moblie */
+@media screen and (max-width: 767px) {
+  .section_2 {
+    gap: 40px;
+    min-width: 344px;
+    min-height: 1310px;
+    margin: 52px 16px 83px 15px;
+    align-items: center;
   }
 
-  .grid {
-    grid-template-columns: 1fr;
-    margin-bottom: 120px;
-    max-width: 320px;
-    text-align: center;
+  .sec2_1,
+  .sec2_2,
+  .sec2_3 {
+    min-width: 344px;
+    height: 417px;
+    padding: 0;
   }
 
-  .card {
-    padding: 1rem 2.5rem;
+  .sec2_1frame,
+  .sec2_2frame,
+  .sec2_3frame {
+    flex-direction: column;
+    align-items: normal;
+    gap: 24px;
+    padding: 0;
+    margin: 0;
+    max-width: 344px;
   }
 
-  .card h2 {
-    margin-bottom: 0.5rem;
+  .sec2_2frame {
+    flex-direction: column-reverse;
+    flex-wrap: wrap-reverse;
   }
 
-  .center {
-    padding: 8rem 0 6rem;
+  .sec2_hotItem_flex,
+  .sec2_register_flex {
+    gap: 8px;
+    height: 118px;
   }
 
-  .center::before {
-    transform: none;
-    height: 300px;
+  .search,
+  .register,
+  .hotItem {
+    width: 325px;
   }
 
-  .description {
-    font-size: 0.8rem;
+  .section_2 .sec2_sentence {
+    font-size: 24px;
+    line-height: 32px;
   }
 
-  .description a {
-    padding: 1rem;
+  .section_2 .sec2_sentence_2 {
+    font-size: 16px;
+    line-height: 26px;
   }
 
-  .description p,
-  .description div {
+  .section_2 .img_size {
+    min-width: 344px;
+    height: 259px;
+    flex-grow: 1;
+  }
+}
+
+/***************** section_3 ******************/
+
+.section_3 {
+  background-color: #cfe5ff;
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: 540px;
+  padding: 0 405px;
+}
+
+.section_3,
+.sec3_frame {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.section_3 .sec3_frame {
+  gap: 69px;
+  margin: 0;
+  max-width: 1110px;
+  max-height: 397px;
+}
+
+.sec3_frame .sec3_img {
+  position: relative;
+  overflow: hidden;
+  width: 746px;
+  height: 397px;
+}
+
+.sec3_img > img {
+  position: absolute;
+  width: 100%;
+}
+
+.sec3_sentence {
+  width: 295px;
+  height: 172px;
+  padding: 112.5px 0;
+}
+
+.sec3_frame h2 {
+  color: var(--gray700);
+  margin: 0;
+  letter-spacing: -1px;
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+}
+
+/* tablet */
+@media screen and (max-width: 1199px) {
+  .section_3 {
+    min-width: 744px;
+    min-height: 927px;
+    padding: 0;
     display: flex;
-    justify-content: center;
-    position: fixed;
-    width: 100%;
+    flex-wrap: wrap;
   }
 
-  .description p {
+  .section_3 .sec3_frame {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
     align-items: center;
-    inset: 0 0 auto;
-    padding: 2rem 1rem 1.4rem;
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
-    );
-    background-clip: padding-box;
-    backdrop-filter: blur(24px);
+    min-width: 744px;
+    min-height: 927px;
+    padding-top: 88px;
+    gap: 217px;
   }
 
-  .description div {
-    align-items: flex-end;
-    pointer-events: none;
-    inset: auto 0 0;
-    padding: 2rem;
-    height: 200px;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      rgb(var(--background-end-rgb)) 40%
-    );
-    z-index: 1;
+  .sec3_sentence {
+    text-align: center;
+    /* width: 295px; */
+    /* height: 112px; */
+    /* padding: 0 225px; */
   }
 }
 
-/* Tablet and Smaller Desktop */
-@media (min-width: 701px) and (max-width: 1120px) {
-  .grid {
-    grid-template-columns: repeat(2, 50%);
+/* moblie */
+@media screen and (max-width: 767px) {
+  .section_3 {
+    min-width: 375px;
+    min-height: 569px;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
   }
-}
 
-@media (prefers-color-scheme: dark) {
-  .vercelLogo {
-    filter: invert(1);
+  .section_3 .sec3_frame {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    min-width: 375px;
+    min-height: 569px;
+    padding: 0;
+    gap: 0;
   }
 
-  .logo {
-    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
-  }
-}
+  /* .sec3_frame .sec3_img {
+    width: 375px;
+    height: 198px;
+  } */
 
-@keyframes rotate {
-  from {
-    transform: rotate(360deg);
+  .sec3_sentence {
+    text-align: center;
+    width: 366px;
+    /* height: 90px; */
+    padding: 40px 69px 0 70px;
   }
-  to {
-    transform: rotate(0deg);
+
+  .sec3_frame h2 {
+    font-size: 32px;
+    line-height: 44px;
   }
 }
diff --git a/styles/globals.css b/styles/globals.css
index d4f491e15..22901cc4a 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,107 +1,36 @@
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
+@font-face {
+  font-family: "ROKAF Sans";
+  src: url(../public/assets/fonts/ROKAF_SANS_MEDIUM.TTF) format("truetype");
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
+:root {
+  --blue: #3692ff;
+  --gray900: #111827;
+  --gray800: #1f2937;
+  --gray700: #374151;
+  --gray600: #4b5563;
+  --gray500: #6b7280;
+  --gray400: #9ca3af;
+  --gray200: #e5e7eb;
+  --gray100: #f3f4f6;
+  --gray50: #f9fafb;
 }
 
 * {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-a {
-  color: inherit;
+  font-family: "Pretendard Variable", Pretendard, -apple-system,
+    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
+    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
   text-decoration: none;
 }
 
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
+header {
+  box-sizing: border-box;
+  position: fixed;
+  z-index: 1;
+  width: 100%;
+  height: 70px;
 }
diff --git a/types.ts b/types.ts
new file mode 100644
index 000000000..726302b29
--- /dev/null
+++ b/types.ts
@@ -0,0 +1,32 @@
+// 상품 타입
+export interface Product {
+  id: string;
+  name: string;
+  price: number;
+  description: string;
+  favoriteCount: number;
+  images: string[];
+  tags: string[];
+}
+
+// 여러 상품을 가져오는 API 응답 타입
+export interface ProductResponse {
+  list: Product[];
+  totalCount: number;
+}
+
+// 상품 댓글 타입
+export interface Comment {
+  id: string;
+  user: string;
+  writer: User;
+  content: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface User {
+  id: number;
+  nickname: string;
+  image: string;
+}
diff --git a/utils/formatDate.ts b/utils/formatDate.ts
new file mode 100644
index 000000000..63c94207c
--- /dev/null
+++ b/utils/formatDate.ts
@@ -0,0 +1,10 @@
+// 날짜 포맷 함수 (예: '2024-09-24 08:40:06' -> '2024-09-24 08:40')
+export function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  return `${date.getFullYear()}-${(date.getMonth() + 1)
+    .toString()
+    .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")} ${date
+    .getHours()
+    .toString()
+    .padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
+}