diff --git a/components/additem/AddItemForm.module.css b/components/additem/AddItemForm.module.css
new file mode 100644
index 00000000..9694017b
--- /dev/null
+++ b/components/additem/AddItemForm.module.css
@@ -0,0 +1,25 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title {
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.button {
+  padding: 12px 23px 12px 23px;
+  line-height: 1.125rem;
+}
+
+.tags {
+  margin-top: -10px;
+}
diff --git a/components/additem/AddItemForm.tsx b/components/additem/AddItemForm.tsx
new file mode 100644
index 00000000..d993cbac
--- /dev/null
+++ b/components/additem/AddItemForm.tsx
@@ -0,0 +1,184 @@
+import {
+  useState,
+  useEffect,
+  ChangeEvent,
+  KeyboardEvent,
+  MouseEvent,
+} from "react";
+import { useRouter } from "next/router";
+import { useMutation } from "@tanstack/react-query";
+import FileInput from "../ui/FileInput";
+import Input from "../ui/Input";
+import Textarea from "../ui/Textarea";
+import Button from "../ui/Button";
+import Tags from "../ui/Tags";
+import { uploadImage } from "@/lib/imageService";
+import { addProduct } from "@/lib/productService";
+import styles from "./AddItemForm.module.css";
+
+interface ProductFormValues {
+  imgFile: File | null;
+  product: string;
+  description: string;
+  price: string;
+  tags: string[];
+}
+
+type ProductField = keyof ProductFormValues;
+
+export type CreateProductRequestBody = Omit<ProductFormValues, "imgFile"> & {
+  imgUrl: string;
+};
+
+const INITIAL_PRODUCT = {
+  imgFile: null,
+  product: "",
+  description: "",
+  price: "",
+  tags: [],
+};
+
+const AddItemForm = () => {
+  const [isDisabled, setIsDisabled] = useState(true);
+  const [values, setValues] = useState<ProductFormValues>(INITIAL_PRODUCT);
+  const router = useRouter();
+
+  const uploadImageMutation = useMutation({
+    mutationFn: (imgFile: File) => uploadImage(imgFile),
+  });
+
+  const addProductMutation = useMutation({
+    mutationFn: (formValues: CreateProductRequestBody) =>
+      addProduct(formValues),
+    onSuccess: (id) => {
+      router.push(`/items/${id}`);
+    },
+  });
+
+  const handleChange = (
+    name: string,
+    value: ProductFormValues[ProductField]
+  ) => {
+    setValues((prevValues) => {
+      return {
+        ...prevValues,
+        [name]: value,
+      };
+    });
+  };
+
+  const handleInputChange = (
+    e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    handleChange(name, value);
+  };
+
+  const checkFormEmpty = (values: ProductFormValues) => {
+    const { imgFile, ...otherValues } = values;
+
+    return Object.values(otherValues).some((value) => {
+      if (Array.isArray(value)) {
+        return value.length === 0;
+      }
+      return value === "";
+    });
+  };
+
+  const handleSubmit = async (
+    e: MouseEvent<HTMLButtonElement>
+  ): Promise<void> => {
+    e.preventDefault();
+
+    const { imgFile, ...otherValues } = values;
+    let imgUrl = "https://example.com/...";
+
+    if (imgFile) {
+      imgUrl = await uploadImageMutation.mutateAsync(imgFile);
+    }
+
+    addProductMutation.mutate({ imgUrl, ...otherValues });
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && e.nativeEvent.isComposing === false) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const { name, value } = e.currentTarget;
+      e.currentTarget.value = "";
+      if (values.tags.includes(value) || value.trim() === "") return;
+
+      handleChange(name, [...values.tags, value]);
+    }
+  };
+
+  const handleTagRemove = (
+    e: MouseEvent<HTMLButtonElement>,
+    target: string
+  ) => {
+    e.preventDefault();
+    const nextValue: string[] = values.tags.filter((tag) => tag !== target);
+    handleChange("tags", nextValue);
+  };
+
+  useEffect(() => {
+    setIsDisabled(checkFormEmpty(values));
+  }, [values]);
+
+  return (
+    <form className={styles.form}>
+      <header className={styles.header}>
+        <h2 className={styles.title}>상품 등록하기</h2>
+        <Button
+          type="submit"
+          className={styles.button}
+          disabled={isDisabled}
+          onClick={handleSubmit}
+        >
+          등록
+        </Button>
+      </header>
+      <FileInput
+        label="상품 이미지"
+        name="imgFile"
+        value={values.imgFile}
+        onChange={handleChange}
+      />
+      <Input
+        type="text"
+        label="상품명"
+        name="product"
+        placeholder="상품명을 입력해주세요"
+        value={values.product}
+        onChange={handleInputChange}
+      />
+      <Textarea
+        label="상품 소개"
+        name="description"
+        placeholder="상품 소개를 입력해주세요"
+        value={values.description}
+        onChange={handleInputChange}
+      />
+      <Input
+        type="text"
+        label="판매가격"
+        name="price"
+        placeholder="판매가격을 입력해주세요"
+        value={values.price}
+        onChange={handleInputChange}
+      />
+      <Input
+        type="text"
+        label="태그"
+        name="tags"
+        placeholder="태그를 입력해주세요"
+        onKeyDown={handleKeyDown}
+        className={styles.tags}
+      />
+      <Tags tags={values.tags} onRemove={handleTagRemove} />
+    </form>
+  );
+};
+
+export default AddItemForm;
diff --git a/components/board/Comments.tsx b/components/board/Comments.tsx
index 49f3b269..39256f18 100644
--- a/components/board/Comments.tsx
+++ b/components/board/Comments.tsx
@@ -1,23 +1,27 @@
 import { useState } from "react";
+import Image from "next/image";
 import EditCommentForm from "./EditCommentForm";
 import Comment from "./Comment";
+import { CommentProps } from "@/types/articleTypes";
 import styles from "./Comments.module.css";
 import replyEmptyImg from "@/public/Img_reply_empty.svg";
-import Image from "next/image";
-import { CommentProps } from "@/types/articleTypes";
 
 interface CommentsProps {
   comments: CommentProps[];
   onUpdate: (id: number | null, value: string) => void;
+  onDelete: (id: number | null) => void;
 }
 
-const Comments = ({ comments, onUpdate }: CommentsProps) => {
+const Comments = ({ comments, onUpdate, onDelete }: CommentsProps) => {
   const [editingId, setEditingId] = useState<number | null>(null);
 
   const handleSelect = (id: number, option: string) => {
     if (option === "edit") {
       setEditingId(id);
     }
+    if (option === "remove") {
+      onDelete(id);
+    }
   };
 
   const handleCancel = () => {
diff --git a/components/item/ItemDetail.module.css b/components/item/ItemDetail.module.css
new file mode 100644
index 00000000..cdc6a976
--- /dev/null
+++ b/components/item/ItemDetail.module.css
@@ -0,0 +1,153 @@
+.productDetail {
+  border-bottom: 1px solid var(--gray200);
+  margin-bottom: 24px;
+}
+
+.imageWrapper {
+  position: relative;
+  aspect-ratio: 1;
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.productImg {
+  object-fit: cover;
+  border-radius: 12px;
+}
+
+.nameContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.name {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--gray800);
+}
+
+.price {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--gray800);
+  border-bottom: 1px solid var(--gray200);
+  padding: 8px 0 16px;
+  margin-bottom: 16px;
+}
+
+.subContainer {
+  margin-bottom: 24px;
+}
+
+.subTitle {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--gray800);
+  margin-bottom: 8px;
+}
+
+.description {
+  font-size: 1rem;
+  font-weight: 400;
+  color: var(--gray800);
+}
+
+.userInfo {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0 24px;
+}
+
+.authorInfo {
+  gap: 16px;
+}
+
+.authorInfo > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+}
+
+.authorInfo img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+.authorInfo span {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+
+.authorInfo time {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+}
+
+.heartButtonContainer {
+  border-left: 1px solid var(--gray200);
+  padding-left: 24px;
+}
+
+@media screen and (min-width: 768px) {
+  .productDetail {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 40px;
+  }
+
+  .imageWrapper {
+    width: 40%;
+  }
+
+  .productContainer {
+    flex: 1 1 0%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .name {
+    font-size: 1.25rem;
+  }
+
+  .price {
+    font-size: 2rem;
+  }
+
+  .userInfo {
+    padding-bottom: 32px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .productDetail {
+    gap: 24px;
+  }
+
+  .name {
+    font-size: 1.5rem;
+  }
+
+  .price {
+    font-size: 2.5rem;
+    font-weight: 600;
+    padding: 16px 0;
+    margin-bottom: 24px;
+  }
+
+  .subTitle {
+    font-size: 1rem;
+    margin-bottom: 16px;
+  }
+
+  .userInfo {
+    padding-bottom: 40px;
+  }
+}
diff --git a/components/item/ItemDetail.tsx b/components/item/ItemDetail.tsx
new file mode 100644
index 00000000..4cd30475
--- /dev/null
+++ b/components/item/ItemDetail.tsx
@@ -0,0 +1,60 @@
+import Image from "next/image";
+import HeartButton from "../ui/HeartButton";
+import AuthorInfo from "../ui/AuthorInfo";
+import { formatDate } from "@/lib/formatDate";
+import { ProductProps } from "@/types/product";
+import Tags from "../ui/Tags";
+import styles from "./ItemDetail.module.css";
+
+const ItemDetail = ({
+  images,
+  name,
+  price,
+  description,
+  tags,
+  ownerId,
+  createdAt,
+  favoriteCount,
+}: ProductProps) => {
+  return (
+    <section className={styles.productDetail}>
+      <div className={styles.imageWrapper}>
+        <Image
+          src={images?.[0]}
+          alt={name}
+          className={styles.productImg}
+          fill
+        />
+      </div>
+      <div className={styles.productContainer}>
+        <div className={styles.productInfo}>
+          <div className={styles.nameContainer}>
+            <h3 className={styles.name}>{name}</h3>
+            <Image src="/ic_kebab.svg" width={24} height={24} alt="케밥" />
+          </div>
+          <div className={styles.price}>{price?.toLocaleString()}원</div>
+          <div className={styles.subContainer}>
+            <h4 className={styles.subTitle}>상품 소개</h4>
+            <p className={styles.description}>{description}</p>
+          </div>
+          <div className={styles.subContainer}>
+            <h4 className={styles.subTitle}>상품 태그</h4>
+            <Tags tags={tags} />
+          </div>
+        </div>
+        <div className={styles.userInfo}>
+          <AuthorInfo
+            className={styles.authorInfo}
+            nickname={ownerId}
+            date={formatDate(createdAt)}
+          />
+          <div className={styles.heartButtonContainer}>
+            <HeartButton favoriteCount={favoriteCount} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ItemDetail;
diff --git a/components/items/BestItems.module.css b/components/items/BestItems.module.css
new file mode 100644
index 00000000..ee972b52
--- /dev/null
+++ b/components/items/BestItems.module.css
@@ -0,0 +1,41 @@
+.section {
+  margin-bottom: 24px;
+}
+
+.title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.625rem;
+  text-align: left;
+  color: var(--gray900);
+  margin-bottom: 16px;
+}
+
+.products {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+}
+
+@media screen and (min-width: 768px) {
+  .title {
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+    margin-bottom: 24px;
+  }
+
+  .products {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .section {
+    padding-bottom: 40px;
+  }
+
+  .products {
+    grid-template-columns: repeat(4, 1fr);
+    gap: 24px;
+  }
+}
diff --git a/components/items/BestItems.tsx b/components/items/BestItems.tsx
new file mode 100644
index 00000000..1d67c988
--- /dev/null
+++ b/components/items/BestItems.tsx
@@ -0,0 +1,70 @@
+import { useState, useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import Card from "./Card";
+import useResize from "@/hooks/useResize";
+import { GetProductsResponseType, ProductProps } from "@/types/product";
+import { fetchData } from "@/lib/fetchData";
+import { PRODUCT_URL } from "@/constants/url";
+import styles from "./BestItems.module.css";
+
+const PAGE_SIZE_BY_SCREEN = {
+  PC: 4,
+  TABLET: 2,
+  MOBILE: 1,
+} as const;
+
+type PageSizeType =
+  (typeof PAGE_SIZE_BY_SCREEN)[keyof typeof PAGE_SIZE_BY_SCREEN];
+
+const getPageSize = (width: number): PageSizeType => {
+  if (width < 768) return PAGE_SIZE_BY_SCREEN.MOBILE;
+  if (width < 1200) return PAGE_SIZE_BY_SCREEN.TABLET;
+
+  return PAGE_SIZE_BY_SCREEN.PC;
+};
+
+const fetchProducts = async (pageSize: number) => {
+  const { list } = await fetchData<GetProductsResponseType>(PRODUCT_URL, {
+    query: { pageSize, orderBy: "favorite" },
+  });
+  return list;
+};
+
+const BestItems = () => {
+  const [pageSize, setPageSize] = useState<PageSizeType>();
+  const viewportWidth = useResize();
+
+  const { data } = useQuery({
+    queryKey: ["products", pageSize],
+    queryFn: () => fetchProducts(pageSize!),
+    enabled: !!pageSize,
+  });
+
+  useEffect(() => {
+    if (!viewportWidth) return;
+
+    const nextPageSize = getPageSize(viewportWidth);
+    if (nextPageSize !== pageSize) {
+      setPageSize(nextPageSize);
+    }
+  }, [viewportWidth, pageSize]);
+
+  const products = data || [];
+
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.title}>베스트 상품</h2>
+      <ul className={styles.products}>
+        {products.length ? (
+          products.map((product: ProductProps) => {
+            return <Card key={product.id} product={product} />;
+          })
+        ) : (
+          <div>상품 목록이 없습니다.</div>
+        )}
+      </ul>
+    </section>
+  );
+};
+
+export default BestItems;
diff --git a/components/items/Card.module.css b/components/items/Card.module.css
new file mode 100644
index 00000000..864bbf72
--- /dev/null
+++ b/components/items/Card.module.css
@@ -0,0 +1,50 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.imageWrapper {
+  width: 100%;
+  aspect-ratio: 1;
+  position: relative;
+  margin-bottom: 4px;
+}
+
+.productImg {
+  border-radius: 19px;
+  object-fit: cover;
+}
+
+.name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  text-align: left;
+  color: var(--gray800);
+}
+
+.price {
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.625rem;
+  text-align: left;
+  color: var(--gray800);
+}
+
+.favorite {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.125rem;
+  text-align: left;
+  color: var(--gray600);
+}
+
+@media screen and (min-width: 1200px) {
+  .imageWrapper {
+    margin-bottom: 10px;
+  }
+}
diff --git a/components/items/Card.tsx b/components/items/Card.tsx
new file mode 100644
index 00000000..e77c0047
--- /dev/null
+++ b/components/items/Card.tsx
@@ -0,0 +1,37 @@
+import { useState } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { ProductProps } from "@/types/product";
+import styles from "./Card.module.css";
+import emptyImg from "@/public/img_default.svg";
+
+const Card = ({ product }: { product: ProductProps }) => {
+  const [imageSrc, setImageSrc] = useState(product.images[0] ?? emptyImg);
+  const handleImageError = () => {
+    setImageSrc(emptyImg);
+  };
+
+  return (
+    <li className={styles.card}>
+      <Link href={`/items/${product.id}`}>
+        <div className={styles.imageWrapper}>
+          <Image
+            src={imageSrc}
+            alt={product.name}
+            className={styles.productImg}
+            onError={handleImageError}
+            fill
+          />
+        </div>
+        <h3 className={styles.name}>{product.name}</h3>
+        <p className={styles.price}>{product.price.toLocaleString()}원</p>
+      </Link>
+      <span className={styles.favorite}>
+        <Image src="ic_heart.svg" width={16} height={16} alt="하트 아이콘" />
+        {product.favoriteCount}
+      </span>
+    </li>
+  );
+};
+
+export default Card;
diff --git a/components/items/ItemList.module.css b/components/items/ItemList.module.css
new file mode 100644
index 00000000..28ddda61
--- /dev/null
+++ b/components/items/ItemList.module.css
@@ -0,0 +1,161 @@
+.section {
+  margin-bottom: 24px;
+}
+
+.ProductListHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  row-gap: 8px;
+  column-gap: 14px;
+  margin-bottom: 16px;
+}
+
+.title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 2rem;
+  text-align: left;
+  color: var(--gray900);
+}
+
+.inputContainer {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background-color: var(--gray100);
+  padding: 9px 16px;
+  border-radius: 12px;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.625rem;
+  text-align: left;
+  flex: 1 0 80%;
+  order: 1;
+  min-width: 200px;
+}
+
+.inputContainer > input {
+  min-width: 200px;
+}
+
+.inputContainer > img {
+  width: 24px;
+  height: 24px;
+}
+
+.input:focus {
+  outline: none;
+}
+
+.button {
+  border-radius: 8px;
+  background-color: var(--blue);
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.625rem;
+  color: var(--gray100);
+  padding: 8px 23px;
+}
+
+.products {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 8px;
+  row-gap: 32px;
+}
+
+.dropdown {
+  order: 1;
+  user-select: none;
+}
+
+.dropdown > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  border: 1px solid var(--gray200);
+}
+
+.dropdown ul {
+  width: 130px;
+  height: 84px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.dropdown li {
+  text-align: center;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.625rem;
+  color: var(--gray800);
+  padding: 9px 0 7px;
+}
+
+.dropdown li:first-child {
+  border-bottom: 1px solid var(--gray200);
+}
+
+@media screen and (min-width: 768px) {
+  .section {
+    margin-bottom: 40px;
+  }
+
+  .ProductListHeader {
+    justify-content: flex-start;
+    margin-bottom: 24px;
+    gap: 12px;
+  }
+
+  .title {
+    flex: 1;
+  }
+
+  .inputContainer {
+    flex: 0 1 auto;
+    order: 0;
+    padding-right: 24px;
+  }
+
+  .products {
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: 16px;
+    row-gap: 40px;
+  }
+
+  .dropdown {
+    order: 0;
+  }
+
+  .dropdown > div {
+    justify-content: space-evenly;
+    width: 130px;
+    height: 42px;
+  }
+
+  .dropdown img {
+    content: url(/ic_arrow_down.svg);
+  }
+
+  .dropdown span {
+    display: inline-block;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .inputContainer {
+    padding-right: 107px;
+  }
+
+  .products {
+    grid-template-columns: repeat(5, 1fr);
+    column-gap: 24px;
+  }
+}
diff --git a/components/items/ItemList.tsx b/components/items/ItemList.tsx
new file mode 100644
index 00000000..accca8e3
--- /dev/null
+++ b/components/items/ItemList.tsx
@@ -0,0 +1,128 @@
+import { useState, useEffect } from "react";
+import { useQuery, keepPreviousData } from "@tanstack/react-query";
+import Link from "next/link";
+import Image from "next/image";
+import useResize from "@/hooks/useResize";
+import Card from "./Card";
+import Dropdown from "../ui/Dropdown";
+import Pagination from "./Pagination";
+import { fetchData } from "@/lib/fetchData";
+import { PRODUCT_URL } from "@/constants/url";
+import { ProductProps, GetProductsResponseType } from "@/types/product";
+import styles from "./ItemList.module.css";
+import searchImg from "@/public/ic_search.svg";
+import sortIcon from "@/public/ic_sort.svg";
+
+const PAGE_SIZE_BY_SCREEN = {
+  PC: 10,
+  TABLET: 6,
+  MOBILE: 4,
+} as const;
+
+type PageSizeType =
+  (typeof PAGE_SIZE_BY_SCREEN)[keyof typeof PAGE_SIZE_BY_SCREEN];
+
+const getPageSize = (width: number): PageSizeType => {
+  if (width < 768) return PAGE_SIZE_BY_SCREEN.MOBILE;
+  if (width < 1200) return PAGE_SIZE_BY_SCREEN.TABLET;
+
+  return PAGE_SIZE_BY_SCREEN.PC;
+};
+
+const options = {
+  recent: "최신순",
+  favorite: "좋아요순",
+} as const;
+type OptionKey = keyof typeof options;
+
+const fetchProducts = async ({
+  queryKey,
+}: {
+  queryKey: [
+    string,
+    { order: OptionKey; pageSize: number; currentPage: number }
+  ];
+}) => {
+  const [, { order, pageSize, currentPage }] = queryKey;
+  const { list, totalCount } = await fetchData<GetProductsResponseType>(
+    PRODUCT_URL,
+    {
+      query: {
+        orderBy: order,
+        pageSize,
+        page: currentPage,
+      },
+    }
+  );
+  return { list, totalCount };
+};
+
+const ItemList = () => {
+  const [pageSize, setPageSize] = useState<PageSizeType>(4);
+  const [order, setOrder] = useState<OptionKey>("recent");
+  const [currentPage, setCurrentPage] = useState(1);
+  const viewportWidth = useResize();
+
+  const { data } = useQuery({
+    queryKey: ["products", { order, pageSize: pageSize!, currentPage }],
+    queryFn: fetchProducts,
+    enabled: !!pageSize,
+    placeholderData: keepPreviousData,
+  });
+
+  useEffect(() => {
+    if (!viewportWidth) return;
+
+    const nextPageSize = getPageSize(viewportWidth);
+    if (nextPageSize !== pageSize) {
+      setPageSize(nextPageSize);
+    }
+  }, [viewportWidth, pageSize]);
+
+  const products = data?.list || [];
+  const totalCount = data?.totalCount || 0;
+
+  return (
+    <section className={styles.section}>
+      <div className={styles.ProductListHeader}>
+        <h2 className={styles.title}>전체 상품</h2>
+        <div className={styles.inputContainer}>
+          <Image src={searchImg} width={24} height={24} alt="검색" />
+          <input
+            className={styles.input}
+            type="text"
+            placeholder="검색할 상품을 입력해주세요"
+          />
+        </div>
+        <Link href="/additem" className={styles.button}>
+          상품등록하기
+        </Link>
+        <Dropdown
+          className={styles.dropdown}
+          onSelect={(value) => setOrder(value as OptionKey)}
+          options={options}
+        >
+          <span>{options[order]}</span>
+          <Image src={sortIcon} width={24} height={24} alt="드롭다운" />
+        </Dropdown>
+      </div>
+      {products.length ? (
+        <ul className={styles.products}>
+          {products.map((product: ProductProps) => {
+            return <Card key={product.id} product={product} />;
+          })}
+        </ul>
+      ) : (
+        <div>상품 목록이 없습니다.</div>
+      )}
+      <Pagination
+        totalCount={totalCount}
+        pageSize={pageSize}
+        currentPage={currentPage}
+        onChange={setCurrentPage}
+      />
+    </section>
+  );
+};
+
+export default ItemList;
diff --git a/components/items/Pagination.module.css b/components/items/Pagination.module.css
new file mode 100644
index 00000000..5e7c58b8
--- /dev/null
+++ b/components/items/Pagination.module.css
@@ -0,0 +1,38 @@
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  margin-top: 40px;
+}
+
+.pagination > button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--gray200);
+  border-radius: 50%;
+  background-color: #ffffff;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.625rem;
+  color: var(--gray500);
+}
+
+.pagination > button.active {
+  background-color: var(--blue);
+  color: var(--gray50);
+}
+
+.pagination > button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.pagination > button > img {
+  width: 16px;
+  height: 16px;
+}
diff --git a/components/items/Pagination.tsx b/components/items/Pagination.tsx
new file mode 100644
index 00000000..a10ae39d
--- /dev/null
+++ b/components/items/Pagination.tsx
@@ -0,0 +1,70 @@
+import arrowLeftImg from "@/public/arrow_left.svg";
+import arrowRightImg from "@/public/arrow_right.svg";
+import styles from "./Pagination.module.css";
+import Image from "next/image";
+
+interface Props {
+  totalCount: number;
+  pageSize: number;
+  currentPage: number;
+  onChange: (page: number) => void;
+}
+
+const Pagination = ({ totalCount, pageSize, currentPage, onChange }: Props) => {
+  const totalPages = Math.ceil(totalCount / pageSize);
+  const PAGE_RANGE = 5;
+
+  const generatePageNumbers = () => {
+    let start = Math.max(1, currentPage - Math.floor(PAGE_RANGE / 2));
+    const end = Math.min(totalPages, start + PAGE_RANGE - 1);
+
+    if (end - start + 1 < PAGE_RANGE) {
+      start = Math.max(end - PAGE_RANGE + 1, 1);
+    }
+
+    return Array.from({ length: end - start + 1 }, (_, index) => start + index);
+  };
+
+  const handleClick = (selectedPage: number) => {
+    onChange(selectedPage);
+  };
+
+  const handleLeftButton = () => {
+    onChange(currentPage - 1);
+  };
+  const handleRightButton = () => {
+    onChange(currentPage + 1);
+  };
+
+  return (
+    <div className={styles.pagination}>
+      <button
+        type="button"
+        onClick={handleLeftButton}
+        disabled={currentPage === 1}
+      >
+        <Image src={arrowLeftImg} width={16} height={16} alt="왼쪽 버튼" />
+      </button>
+      {generatePageNumbers().map((number) => {
+        return (
+          <button
+            className={number === currentPage ? styles.active : ""}
+            onClick={() => handleClick(number)}
+            key={number}
+          >
+            {number}
+          </button>
+        );
+      })}
+      <button
+        type="button"
+        onClick={handleRightButton}
+        disabled={currentPage === totalPages}
+      >
+        <Image src={arrowRightImg} width={16} height={16} alt="오른쪽 버튼" />
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;
diff --git a/components/ui/Input.tsx b/components/ui/Input.tsx
index b3fe0452..b248c304 100644
--- a/components/ui/Input.tsx
+++ b/components/ui/Input.tsx
@@ -12,18 +12,20 @@ interface InputProps {
   value?: string;
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
   onKeyUp?: (e: KeyboardEvent<HTMLInputElement>) => void;
+  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
   children?: ReactNode;
 }
 
 const Input = ({
   type = "text",
-  name = "",
+  name,
   className = "",
   label = "",
   placeholder = "",
-  value = "",
-  onChange = () => {},
-  onKeyUp = () => {},
+  value,
+  onChange,
+  onKeyUp,
+  onKeyDown,
   children,
 }: InputProps) => {
   return (
@@ -41,6 +43,7 @@ const Input = ({
           value={value}
           onChange={onChange}
           onKeyUp={onKeyUp}
+          onKeyDown={onKeyDown}
         />
         {children}
       </div>
diff --git a/components/ui/Tags.module.css b/components/ui/Tags.module.css
new file mode 100644
index 00000000..b1fb2a31
--- /dev/null
+++ b/components/ui/Tags.module.css
@@ -0,0 +1,22 @@
+.tags {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.tag {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 26px;
+  background-color: var(--gray100);
+  padding: 5px 16px;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.625rem;
+  color: var(--gray800);
+}
+
+.icon {
+  display: block;
+}
diff --git a/components/ui/Tags.tsx b/components/ui/Tags.tsx
new file mode 100644
index 00000000..de4cd60c
--- /dev/null
+++ b/components/ui/Tags.tsx
@@ -0,0 +1,37 @@
+import { MouseEvent } from "react";
+import XButton from "../ui/XButton";
+import styles from "./Tags.module.css";
+
+interface Props {
+  className?: string;
+  tags: string[];
+  onRemove?: (e: MouseEvent<HTMLButtonElement>, value: string) => void;
+}
+
+const Tags = ({ className = "", tags, onRemove }: Props) => {
+  return (
+    <>
+      {tags?.length ? (
+        <ul className={`${styles.tags} ${className}`}>
+          {tags.map((tag) => {
+            return (
+              <li key={tag} className={styles.tag}>
+                <span>#{tag}</span>
+                {onRemove && (
+                  <XButton
+                    className={styles.icon}
+                    onClick={(e: MouseEvent<HTMLButtonElement>) =>
+                      onRemove(e, tag)
+                    }
+                  />
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      ) : null}
+    </>
+  );
+};
+
+export default Tags;
diff --git a/constants/url.ts b/constants/url.ts
index b55ba519..0116f175 100644
--- a/constants/url.ts
+++ b/constants/url.ts
@@ -1,7 +1,9 @@
-export const ARTICLE_URL = "https://panda-market-api.vercel.app/articles";
-export const IMAGE_URL = "https://panda-market-api.vercel.app/images/upload";
-export const LOGIN_URL = "https://panda-market-api.vercel.app/auth/signIn";
-export const REFRESH_URL =
-  "https://panda-market-api.vercel.app/auth/refresh-token";
-export const SIGNUP_URL = "https://panda-market-api.vercel.app/auth/signUp";
-export const COMMENT_URL = "https://panda-market-api.vercel.app/comments";
+const BASE_URL = "https://panda-market-api.vercel.app";
+
+export const ARTICLE_URL = `${BASE_URL}/articles`;
+export const IMAGE_URL = `${BASE_URL}/images/upload`;
+export const LOGIN_URL = `${BASE_URL}/auth/signIn`;
+export const REFRESH_URL = `${BASE_URL}/auth/refresh-token`;
+export const SIGNUP_URL = `${BASE_URL}/auth/signUp`;
+export const COMMENT_URL = `${BASE_URL}/comments`;
+export const PRODUCT_URL = `${BASE_URL}/products`;
diff --git a/lib/commentService.ts b/lib/commentService.ts
new file mode 100644
index 00000000..210904e2
--- /dev/null
+++ b/lib/commentService.ts
@@ -0,0 +1,46 @@
+import { GetCommentResponseType } from "@/types/comment";
+import { fetchData } from "./fetchData";
+import { COMMENT_URL, PRODUCT_URL } from "@/constants/url";
+import { CommentProps } from "@/types/articleTypes";
+
+export const getComments = async (id: string) => {
+  const response = await fetchData<GetCommentResponseType>(
+    `${PRODUCT_URL}/${id}/comments`,
+    { query: { limit: 5 } }
+  );
+
+  return response.list;
+};
+
+export const createComment = async (id: string, content: string) => {
+  const accessToken = localStorage.getItem("accessToken");
+  const response = await fetchData<CommentProps>(
+    `${PRODUCT_URL}/${id}/comments`,
+    {
+      method: "POST",
+      headers: { Authorization: `Bearer ${accessToken}` },
+      body: { content },
+    }
+  );
+
+  return response;
+};
+
+export const updateComment = async (id: number, content: string) => {
+  const accessToken = localStorage.getItem("accessToken");
+  const response = await fetchData<CommentProps>(`${COMMENT_URL}/${id}`, {
+    method: "PATCH",
+    headers: { Authorization: `Bearer ${accessToken}` },
+    body: { content },
+  });
+
+  return response;
+};
+
+export const deleteComment = async (id: number) => {
+  const accessToken = localStorage.getItem("accessToken");
+  await fetchData(`${COMMENT_URL}/${id}`, {
+    method: "DELETE",
+    headers: { Authorization: `Bearer ${accessToken}` },
+  });
+};
diff --git a/lib/imageService.ts b/lib/imageService.ts
new file mode 100644
index 00000000..002f978e
--- /dev/null
+++ b/lib/imageService.ts
@@ -0,0 +1,17 @@
+import { IMAGE_URL } from "@/constants/url";
+import { fetchData } from "./fetchData";
+
+export const uploadImage = async (imgFile: File) => {
+  const accessToken = localStorage.getItem("accessToken");
+  const formData = new FormData();
+  formData.append("image", imgFile);
+
+  const response = await fetchData<{ url: string }>(IMAGE_URL, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+    body: formData,
+  });
+  return response.url;
+};
diff --git a/lib/productService.ts b/lib/productService.ts
new file mode 100644
index 00000000..28f41f24
--- /dev/null
+++ b/lib/productService.ts
@@ -0,0 +1,35 @@
+import { PRODUCT_URL } from "@/constants/url";
+import { fetchData } from "./fetchData";
+import { CreateProductRequestBody } from "@/components/additem/AddItemForm";
+import { ProductProps } from "@/types/product";
+
+export const getProduct = async (id: string) => {
+  if (!id) return;
+  const accessToken = localStorage.getItem("accessToken");
+  const response = await fetchData<ProductProps>(`${PRODUCT_URL}/${id}`, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+  return response;
+};
+
+export const addProduct = async ({
+  imgUrl,
+  product,
+  ...otherValues
+}: CreateProductRequestBody) => {
+  const accessToken = localStorage.getItem("accessToken");
+  const body = imgUrl
+    ? { images: [imgUrl], name: product, ...otherValues }
+    : { name: product, ...otherValues };
+
+  const response = await fetchData<ProductProps>(PRODUCT_URL, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+    body,
+  });
+  return response.id;
+};
diff --git a/next.config.js b/next.config.js
index 7ac3be99..50f84207 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,12 +2,7 @@
 const nextConfig = {
   reactStrictMode: true,
   images: {
-    domains: [
-      "sprint-fe-project.s3.ap-northeast-2.amazonaws.com",
-      "via.placeholder.com",
-      "flexible.img.hani.co.kr",
-      "example.com",
-    ],
+    unoptimized: true,
   },
 };
 
diff --git a/package-lock.json b/package-lock.json
index c5f4bd7b..0f0ce028 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "fe-weekly-mission",
       "version": "0.1.0",
       "dependencies": {
+        "@tanstack/react-query": "^5.62.3",
+        "@tanstack/react-query-devtools": "^5.62.3",
         "next": "13.5.6",
         "react": "^18",
         "react-dom": "^18",
@@ -330,6 +332,59 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.62.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.62.3.tgz",
+      "integrity": "sha512-Jp/nYoz8cnO7kqhOlSv8ke/0MJRJVGuZ0P/JO9KQ+f45mpN90hrerzavyTKeSoT/pOzeoOUkv1Xd0wPsxAWXfg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.61.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.61.4.tgz",
+      "integrity": "sha512-21Tw+u8E3IJJj4A/Bct4H0uBaDTEu7zBrR79FeSyY+mS2gx5/m316oDtJiKkILc819VSTYt+sFzODoJNcpPqZQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.62.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.62.3.tgz",
+      "integrity": "sha512-y2zDNKuhgiuMgsKkqd4AcsLIBiCfEO8U11AdrtAUihmLbRNztPrlcZqx2lH1GacZsx+y1qRRbCcJLYTtF1vKsw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.62.3"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
+    "node_modules/@tanstack/react-query-devtools": {
+      "version": "5.62.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.62.3.tgz",
+      "integrity": "sha512-4iaQap/iP5ErS094u1WehFntHtjRo6g5HJMvyHovBVbsxnvgPc6AtKAw7qxPPoKy6Wj5Bew0045eYP5phiiBmw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.61.4"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.62.3",
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
diff --git a/package.json b/package.json
index 58156f1a..2a6c698b 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.62.3",
+    "@tanstack/react-query-devtools": "^5.62.3",
     "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 3784809f..acd3cc6e 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,20 +1,31 @@
 import "@/styles/reset.css";
 import "@/styles/variables.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import Head from "next/head";
 import type { AppProps } from "next/app";
 import { useRouter } from "next/router";
 import Header from "@/components/layout/Header";
 import Container from "@/components/layout/Container";
 import styles from "@/styles/App.module.css";
+import { useState } from "react";
 
 export default function App({ Component, pageProps }: AppProps) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: { staleTime: 60 * 1000, refetchOnWindowFocus: false },
+        },
+      })
+  );
   const router = useRouter();
 
   const isHideHeader = ["/login", "/signup"].includes(router.pathname);
   const isHomePage = router.pathname === "/";
 
   return (
-    <>
+    <QueryClientProvider client={queryClient}>
       <Head>
         <title>판다 마켓</title>
       </Head>
@@ -26,6 +37,7 @@ export default function App({ Component, pageProps }: AppProps) {
           <Component {...pageProps} />
         </Container>
       )}
-    </>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
   );
 }
diff --git a/pages/additem.tsx b/pages/additem.tsx
new file mode 100644
index 00000000..0de0fbd6
--- /dev/null
+++ b/pages/additem.tsx
@@ -0,0 +1,11 @@
+import AddItemForm from "@/components/additem/AddItemForm";
+
+const AddItem = () => {
+  return (
+    <>
+      <AddItemForm />
+    </>
+  );
+};
+
+export default AddItem;
diff --git a/pages/board/[id].tsx b/pages/board/[id].tsx
index 151ecdb9..b060c5c9 100644
--- a/pages/board/[id].tsx
+++ b/pages/board/[id].tsx
@@ -93,6 +93,20 @@ const BoardDetailPage = ({
     );
   };
 
+  const handleDelete = async (id: number | null) => {
+    if (!id) return;
+
+    await fetchData(`${COMMENT_URL}/${id}`, {
+      method: "DELETE",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+    setComments((prevComments) =>
+      prevComments.filter((comment) => comment.id !== id)
+    );
+  };
+
   return (
     <>
       {board && <BoardDetail {...board} />}
@@ -101,7 +115,11 @@ const BoardDetailPage = ({
         onChange={setComment}
         value={comment}
       />
-      <Comments comments={comments} onUpdate={handleUpdate} />
+      <Comments
+        comments={comments}
+        onUpdate={handleUpdate}
+        onDelete={handleDelete}
+      />
       <Link href="/boards" className={styles.link}>
         <Button type="button" className={styles.button}>
           <div>목록으로 되돌아가기</div>
diff --git a/pages/items/[id].tsx b/pages/items/[id].tsx
new file mode 100644
index 00000000..fc3d8280
--- /dev/null
+++ b/pages/items/[id].tsx
@@ -0,0 +1,146 @@
+import { FormEvent, useState } from "react";
+import { GetServerSidePropsContext } from "next";
+import { useRouter } from "next/router";
+import Image from "next/image";
+import Link from "next/link";
+import ItemDetail from "@/components/item/ItemDetail";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import AddCommentForm from "@/components/board/AddCommentForm";
+import Comments from "@/components/board/Comments";
+import Button from "@/components/ui/Button";
+import { fetchData } from "@/lib/fetchData";
+import { getProduct } from "@/lib/productService";
+import { CommentProps } from "@/types/articleTypes";
+import { PRODUCT_URL } from "@/constants/url";
+import { GetCommentResponseType } from "@/types/comment";
+import {
+  createComment,
+  deleteComment,
+  getComments,
+  updateComment,
+} from "@/lib/commentService";
+import styles from "@/styles/Board.module.css";
+import backIcon from "@/public/ic_back.svg";
+
+export const getServerSideProps = async (
+  context: GetServerSidePropsContext
+) => {
+  const id = context.params?.["id"];
+  const { list } = await fetchData<GetCommentResponseType>(
+    `${PRODUCT_URL}/${id}/comments`,
+    {
+      query: { limit: 5 },
+    }
+  );
+
+  return {
+    props: {
+      comments: list,
+    },
+  };
+};
+
+const ItemDetailPage = ({
+  comments: initialComments,
+}: {
+  comments: CommentProps[];
+}) => {
+  const [comment, setComment] = useState("");
+  const router = useRouter();
+  const id = router.query.id as string;
+  const queryClient = useQueryClient();
+
+  const { data: product } = useQuery({
+    queryKey: ["product", id],
+    queryFn: ({ queryKey }) => getProduct(queryKey[1] as string),
+    enabled: !!id,
+  });
+
+  const { data: comments = [] } = useQuery({
+    queryKey: ["comments", id],
+    queryFn: ({ queryKey }) => getComments(queryKey[1] as string),
+    initialData: initialComments,
+    enabled: !!id,
+  });
+
+  const createCommentMutation = useMutation({
+    mutationFn: ({ id, comment }: { id: string; comment: string }) =>
+      createComment(id, comment),
+    onSuccess: (newComment) => {
+      queryClient.setQueryData<CommentProps[]>(
+        ["comments", id],
+        (oldComments) => [newComment, ...(oldComments || [])]
+      );
+      setComment("");
+    },
+  });
+
+  const updateCommentMutation = useMutation({
+    mutationFn: ({
+      commentId,
+      content,
+    }: {
+      commentId: number;
+      content: string;
+    }) => updateComment(commentId, content),
+    onSuccess: (updatedComment) => {
+      queryClient.setQueryData<CommentProps[]>(
+        ["comments", id],
+        (oldComments) =>
+          oldComments?.map((comment) =>
+            comment.id === updatedComment.id ? updatedComment : comment
+          ) ?? []
+      );
+    },
+  });
+
+  const deleteCommentMutation = useMutation({
+    mutationFn: (commentId: number) => deleteComment(commentId),
+    onSuccess: (_, commentId) => {
+      queryClient.setQueryData<CommentProps[]>(
+        ["comments", id],
+        (oldComments) =>
+          oldComments?.filter((comment) => comment.id !== commentId) ?? []
+      );
+    },
+  });
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    createCommentMutation.mutate({ id, comment });
+  };
+
+  const handleUpdate = async (commentId: number | null, content: string) => {
+    if (!commentId) return;
+    updateCommentMutation.mutate({ commentId, content });
+  };
+
+  const handleDelete = async (commentId: number | null) => {
+    if (!commentId) return;
+    deleteCommentMutation.mutate(commentId);
+  };
+
+  return (
+    <>
+      {product && <ItemDetail {...product} />}
+      <AddCommentForm
+        onSubmit={handleSubmit}
+        onChange={setComment}
+        value={comment}
+      />
+      <Comments
+        comments={comments}
+        onUpdate={handleUpdate}
+        onDelete={handleDelete}
+      />
+      <Link href="/items" className={styles.link}>
+        <Button type="button" className={styles.button}>
+          <div>목록으로 되돌아가기</div>
+          <Image src={backIcon} alt="되돌아가기 아이콘" />
+        </Button>
+      </Link>
+    </>
+  );
+};
+
+export default ItemDetailPage;
diff --git a/pages/items/index.tsx b/pages/items/index.tsx
new file mode 100644
index 00000000..428c6a2f
--- /dev/null
+++ b/pages/items/index.tsx
@@ -0,0 +1,13 @@
+import BestItems from "@/components/items/BestItems";
+import ItemList from "@/components/items/ItemList";
+
+const Items = () => {
+  return (
+    <>
+      <BestItems />
+      <ItemList />
+    </>
+  );
+};
+
+export default Items;
diff --git a/public/arrow_left.svg b/public/arrow_left.svg
new file mode 100644
index 00000000..4b110c20
--- /dev/null
+++ b/public/arrow_left.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 4.66675L6 8.16675L9.5 11.6667" stroke="#4B5563" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/arrow_right.svg b/public/arrow_right.svg
new file mode 100644
index 00000000..0ad718ef
--- /dev/null
+++ b/public/arrow_right.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 4.6665L9.5 8.1665L6 11.6665" stroke="#4B5563" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/types/comment.ts b/types/comment.ts
new file mode 100644
index 00000000..af5381f0
--- /dev/null
+++ b/types/comment.ts
@@ -0,0 +1,16 @@
+interface CommentProps {
+  writer: {
+    image: string;
+    nickname: string;
+    id: number;
+  };
+  updatedAt: string;
+  createdAt: string;
+  content: string;
+  id: number;
+}
+
+export interface GetCommentResponseType {
+  nextCursor: number;
+  list: CommentProps[];
+}
diff --git a/types/product.ts b/types/product.ts
new file mode 100644
index 00000000..e56266cc
--- /dev/null
+++ b/types/product.ts
@@ -0,0 +1,16 @@
+export interface ProductProps {
+  id: number;
+  images: string[];
+  name: string;
+  price: number;
+  favoriteCount: number;
+  description: string;
+  tags: string[];
+  ownerId: string;
+  createdAt: string;
+}
+
+export interface GetProductsResponseType {
+  list: ProductProps[];
+  totalCount: number;
+}