diff --git a/config/metadata.js b/config/metadata.js
index d2b25a10..dc28ec67 100644
--- a/config/metadata.js
+++ b/config/metadata.js
@@ -17,3 +17,13 @@ export const signupMetadata = {
   title: '판다마켓 회원가입',
   description: '판다마켓 회원가입 페이지',
 };
+
+export const articleMetadata = {
+  title: '판다마켓 게시글',
+  description: '판다마켓 게시글 페이지',
+};
+
+export const itemMetadata = {
+  title: '판다마켓 상품',
+  description: '판다마켓 상품 페이지',
+};
diff --git a/config/paths.js b/config/paths.js
index 025d82b7..b481cb1d 100644
--- a/config/paths.js
+++ b/config/paths.js
@@ -10,6 +10,9 @@ export const paths = {
     registration: {
       getHref: () => '/articles/registration',
     },
+    items: {
+      getHref: () => '/items',
+    },
   },
 
   auth: {
diff --git a/package.json b/package.json
index 78bee5a1..ee5ca50a 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "dev": "next dev",
     "build": "prisma generate && next build",
     "start": "next start",
-    "seed": "node prisma/seed.js",
+    "seed": "node ./prisma/seed.js",
     "prepare": "husky",
     "postinstall": "prisma generate --no-engine --schema=./prisma/schema",
     "migrate:dev": "prisma -- migrate dev --schema=./prisma/schema",
diff --git a/prisma/seed.js b/prisma/seed.js
index 440ad4d4..5eb001d8 100644
--- a/prisma/seed.js
+++ b/prisma/seed.js
@@ -4,10 +4,8 @@ import {
   randAvatar,
   randCatchPhrase,
   randEmail,
-  randFirstName,
   randFullName,
   randImg,
-  randLastName,
   randNumber,
   randParagraph,
   randPassword,
@@ -15,9 +13,8 @@ import {
   randSentence,
   randText,
 } from '@ngneat/falso';
-import { PrismaClient } from '@prisma/client';
 
-const prisma = new PrismaClient();
+import prisma from '../src/libs/prisma.js';
 
 async function main() {
   console.log('기존 데이터 삭제 시작...');
diff --git a/src/app/api/login/route.js b/src/app/api/(auth)/login/route.js
similarity index 100%
rename from src/app/api/login/route.js
rename to src/app/api/(auth)/login/route.js
diff --git a/src/app/api/(auth)/logout/route.js b/src/app/api/(auth)/logout/route.js
new file mode 100644
index 00000000..408a2576
--- /dev/null
+++ b/src/app/api/(auth)/logout/route.js
@@ -0,0 +1,32 @@
+import { cookies } from 'next/headers';
+import { NextResponse } from 'next/server';
+
+import prisma from '@/libs/prisma';
+
+export async function POST() {
+  try {
+    const cookieStore = cookies();
+    const refreshToken = cookieStore.get('refreshToken')?.value;
+
+    if (refreshToken) {
+      await prisma.refreshToken.deleteMany({
+        where: { token: refreshToken },
+      });
+    }
+
+    cookies().set('refreshToken', '', {
+      httpOnly: true,
+      secure: process.env.NODE_ENV !== 'development',
+      sameSite: 'strict',
+      path: '/',
+      expires: new Date(0),
+    });
+
+    return NextResponse.json({ message: 'Logged out successfully' });
+  } catch (error) {
+    return NextResponse.json(
+      { message: 'An error occurred during logout', error: error.message },
+      { status: 500 },
+    );
+  }
+}
diff --git a/src/app/api/refresh-token/route.js b/src/app/api/(auth)/refresh-token/route.js
similarity index 100%
rename from src/app/api/refresh-token/route.js
rename to src/app/api/(auth)/refresh-token/route.js
diff --git a/src/app/api/signup/route.js b/src/app/api/(auth)/signup/route.js
similarity index 100%
rename from src/app/api/signup/route.js
rename to src/app/api/(auth)/signup/route.js
diff --git a/src/app/api/user/route.jsx b/src/app/api/(auth)/user/route.jsx
similarity index 100%
rename from src/app/api/user/route.jsx
rename to src/app/api/(auth)/user/route.jsx
diff --git a/src/app/api/articles/[id]/route.js b/src/app/api/articles/[id]/route.js
index ef8fbd63..49306d26 100644
--- a/src/app/api/articles/[id]/route.js
+++ b/src/app/api/articles/[id]/route.js
@@ -14,7 +14,7 @@ export const GET = async (request, { params }) => {
     async (id) => {
       const article = await prisma.article.findUnique({
         where: {
-          id: parseInt(id),
+          id: id,
         },
         include: {
           Comment: {
diff --git a/src/app/api/items/detail/[id]/route.js b/src/app/api/items/detail/[id]/route.js
new file mode 100644
index 00000000..9d1417b2
--- /dev/null
+++ b/src/app/api/items/detail/[id]/route.js
@@ -0,0 +1,55 @@
+import { unstable_cache } from 'next/cache';
+
+import prisma from '@/libs/prisma';
+import { apiResponse } from '@/libs/utils/api-helper';
+
+export const GET = async (request, { params }) => {
+  const { id } = await params;
+  if (!id) {
+    return apiResponse(false, 'Not Found Article', null, 400);
+  }
+  /** @see https://nextjs.org/docs/app/api-reference/functions/unstable_cache */
+  const itemCached = unstable_cache(
+    async (itemId) => {
+      const item = await prisma.item.findUnique({
+        where: {
+          id: itemId,
+        },
+        include: {
+          user: {
+            include: {
+              userProfile: true,
+            },
+            include: {
+              comments: true,
+            },
+          },
+        },
+      });
+      return item;
+    },
+    [`article-detail-${id}`],
+    {
+      tags: ['item', 'item-comment', `article-${id}`],
+      revalidate: 3,
+    },
+  );
+
+  try {
+    const item = await itemCached(id);
+
+    if (!item) {
+      return apiResponse(false, `ID ${id} not found`, null, 404);
+    }
+    return apiResponse(true, 'Success Get Article', item, 200);
+  } catch (error) {
+    console.error('API Error', error);
+    return apiResponse(
+      false,
+      'Internal Server Error',
+      null,
+      500,
+      error.message,
+    );
+  }
+};
diff --git a/src/app/api/items/route.js b/src/app/api/items/route.js
new file mode 100644
index 00000000..9df4eb12
--- /dev/null
+++ b/src/app/api/items/route.js
@@ -0,0 +1,52 @@
+import prisma from '@/libs/prisma';
+import { apiResponse } from '@/libs/utils/api-helper';
+
+export const GET = async (request) => {
+  try {
+    const { searchParams } = new URL(request.url);
+
+    const pageStr = searchParams.get('page') ?? '1';
+    const limitStr = searchParams.get('limit') ?? '10';
+    const keyword = searchParams.get('keyword') ?? '';
+    const orderBy = searchParams.get('keyword') ?? 'recent';
+
+    const page = parseInt(pageStr);
+    const limit = parseInt(limitStr);
+    const total = await prisma.item.count();
+    const totalPage = Math.ceil(total / limit);
+
+    const SORT_MAP = {
+      recent: { createdAt: 'desc' },
+      favorite: { createdAt: 'asc' },
+    };
+
+    const sortOptions = SORT_MAP[orderBy] ?? { createdAt: 'desc' };
+
+    const items = await prisma.item.findMany({
+      where: {
+        OR: [
+          { name: { contains: keyword, mode: 'insensitive' } },
+          { description: { contains: keyword, mode: 'insensitive' } },
+        ],
+      },
+      include: {
+        user: {
+          include: {
+            userProfile: true,
+          },
+        },
+      },
+      orderBy: sortOptions,
+      skip: limit * (page - 1),
+      take: limit,
+    });
+
+    return apiResponse(true, '성공적으로 아이템을 가져왔습니다.', {
+      items,
+      pagination: { page, limit, total, totalPage },
+    });
+  } catch (error) {
+    console.error('API Error:', error);
+    return apiResponse(false, 'Internal Server Error', null, 500);
+  }
+};
diff --git a/src/app/articles/layout.jsx b/src/app/articles/layout.jsx
index 6e60f6a7..9482c9e2 100644
--- a/src/app/articles/layout.jsx
+++ b/src/app/articles/layout.jsx
@@ -1,9 +1,6 @@
-/* + #은 jsconfig설정에 의해 최상위 루트를 가리키게된다. */
-import '../globals.css'
-
 import { Footer } from '@/components/layouts/Footer'
 import { Navigation } from '@/components/ui/navigation'
-import { rootMetadata } from '#/config/metadata'
+import { articleMetadata } from '#/config/metadata'
 
 export default function ArticleLayout({ children }) {
   return (
@@ -15,4 +12,4 @@ export default function ArticleLayout({ children }) {
   )
 }
 
-export const metadata = { ...rootMetadata }
+export const metadata = { ...articleMetadata }
diff --git a/src/app/articles/page.jsx b/src/app/articles/page.jsx
index 97b7a954..3f24b0c5 100644
--- a/src/app/articles/page.jsx
+++ b/src/app/articles/page.jsx
@@ -18,7 +18,7 @@ export default async function ArticlePage(props) {
   ]);
 
   return (
-    <main className="max-w-full min-h-screen flex-1 x-[21.4375rem] md:x-7xl my-0 mx-auto p-5">
+    <main className="container max-w-480 min-h-screen flex-1 x-[21.4375rem] md:x-7xl my-0 mx-auto p-5">
       {/* 베스트 게시글 영역 */}
       <ArticleBestSection articles={bestArticles} />
 
diff --git a/src/app/items/detail/[id]/_components/back-to-articles.jsx b/src/app/items/detail/[id]/_components/back-to-articles.jsx
new file mode 100644
index 00000000..51b3b561
--- /dev/null
+++ b/src/app/items/detail/[id]/_components/back-to-articles.jsx
@@ -0,0 +1,24 @@
+import Image from "next/image"
+import Link from "next/link"
+
+import Undo from '@/assets/icons/ic_undo.svg'
+import { paths } from '#/config/paths'
+
+export function BackToItems() {
+  return (
+    <Link
+      className="flex self-center items-center justify-center w-62 h-12 py-3 px-16 mt-16 mb-48.5 rounded-[2.5rem] bg-primary-100 gap-2 no-underline active:bg-primary-100"
+      href={paths.app.items.getHref()}
+    >
+      <p className="font-pretendard text-base font-semibold leading-6.5 text-white text-nowrap">
+        목록으로 돌아가기
+      </p>
+      <Image
+        src={Undo}
+        alt="undo-img"
+        width={24} height={24}
+        unoptimized
+      />
+    </Link>
+  )
+}
diff --git a/src/app/items/detail/[id]/_components/comment/item-comment-form.jsx b/src/app/items/detail/[id]/_components/comment/item-comment-form.jsx
new file mode 100644
index 00000000..93832725
--- /dev/null
+++ b/src/app/items/detail/[id]/_components/comment/item-comment-form.jsx
@@ -0,0 +1,25 @@
+
+export function ItemCommentForm({ item, action }) {
+
+  return (
+    <section className="container w-full mb-8 md:max-w-7xl">
+      <h3 className="font-pretendard font-semibold mb-2 mt-6 leading-6.5">
+        문의하기
+      </h3>
+      <form action={action}>
+        <input type="hidden" name="userId" value={item.userId} />
+        <input type="hidden" name="itemId" value={item.id} />
+        <textarea
+          name="context"
+          className="max-w-85.75 md:max-w-7xl  w-full h-32.25 md:h-26 p-2.5 border-0 rounded-md resize-none mb-2 bg-gray-100 placeholder:text-gray-400 placeholder:text-sm placeholder:leading-6"
+          placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
+        />
+        <div className="flex justify-end">
+          <button className="flex justify-center items-center py-3 px-5.75 grow-0 bg-gray-400 border-none rounded-md text-white whitespace-nowrap cursor-pointer hover:bg-primary-100">
+            등록
+          </button>
+        </div>
+      </form>
+    </section>
+  )
+}
diff --git a/src/app/items/detail/[id]/_components/comment/item-comment-section.jsx b/src/app/items/detail/[id]/_components/comment/item-comment-section.jsx
new file mode 100644
index 00000000..88efe0ae
--- /dev/null
+++ b/src/app/items/detail/[id]/_components/comment/item-comment-section.jsx
@@ -0,0 +1,58 @@
+import Image from 'next/image'
+import React from 'react'
+
+import CommentEmptyImg from '@/assets/article/Img_reply_empty.svg'
+import DefaultImg from '@/assets/logo.svg'
+import { formatDate } from "@/libs/utils/format";
+
+import { DropdownContent } from '../dropdown-content'
+
+export function ItemCommentSection({ item, action }) {
+  return (
+    <section className="flex flex-col gap-6 no-underline list-none">
+      {item.Comment && item.Comment.length > 0 ? (
+        article.Comment.map((comment) => (
+          <li key={comment.id} className="flex flex-col border-2.5 border-t-0 border-r-0 border-l-0 border border-solid border-gray-300 py-3 px-0 gap-6 bg-gray-50">
+            <div className="flex justify-between">
+              <DropdownContent comment={comment} action={action} />
+            </div>
+            <div className="flex items-center gap-2 mb-1.5">
+              <Image
+                src={
+                  comment.author?.userProfile?.photoUrl || { DefaultImg }
+                }
+                alt="avatar"
+                width={32}
+                height={32}
+                className="shrink-0 w-8 h-8 rounded-full object-cover"
+              />
+              <div>
+                <span className="font-pretendard text-xs leading-4.5 text-gray-600">
+                  {comment.author?.name}
+                </span>
+                <p className="text-gray-400 text-xs leading-4.5">
+                  {formatDate(comment.createdAt)}
+                </p>
+              </div>
+            </div>
+          </li>
+        ))
+      ) : (
+        <>
+          <Image
+            className="self-center mb-4"
+            width={140}
+            height={140}
+            src={CommentEmptyImg}
+            alt="comment-empty-img"
+          />
+          <p className="text-gray-400 text-center font-pretendard leading-6.5">
+            아직 댓글이 없어요,
+            <br />
+            지금 댓글을 달아보세요!
+          </p>
+        </>
+      )}
+    </section>
+  )
+}
diff --git a/src/app/items/detail/[id]/_components/dropdown-content.jsx b/src/app/items/detail/[id]/_components/dropdown-content.jsx
new file mode 100644
index 00000000..06abb3b2
--- /dev/null
+++ b/src/app/items/detail/[id]/_components/dropdown-content.jsx
@@ -0,0 +1,142 @@
+"use client"
+import Image from "next/image"
+import { useState } from "react"
+import { useFormStatus } from "react-dom"
+
+import EllipsisVertical from '@/assets/icons/ic_ellipsis_vertical.svg'
+import { Button } from "@/components/ui/button"
+import { Modal } from "@/components/ui/modal"
+import { deleteComment } from "@/libs/actions"
+// ! server action (Never trust data from the client)
+
+const contents = [
+  { option: '수정하기', name: 'update' },
+  { option: '삭제하기', name: 'delete' }
+]
+
+function SubmitButton() {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button type="submit" disabled={pending}>
+      {pending ? '수정 중...' : '수정 완료'}
+    </Button>
+  );
+}
+export function DropdownContent({ comment, action }) {
+  const [showPanel, setShowPanel] = useState(false);
+  const [update, setUpdate] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [modalMessage, setModalMessage] = useState('');
+  const [context, setContext] = useState('');
+
+  const handlePanel = () => {
+    setShowPanel(!showPanel);
+  }
+
+  const handleDelete = async () => {
+    setShowModal(false)
+
+    try {
+      const data = await deleteComment(comment.id)
+    } catch (error) {
+      console.error(error)
+      setModalMessage("삭제 중 오류 발생");
+      setShowModal(true)
+    }
+  }
+
+  const handleOnChange = (name) => {
+    setShowPanel(false)
+    setContext('')
+
+    if (name === 'update') {
+      setUpdate(!update)
+    }
+    if (name === 'delete') {
+      setShowModal(!showModal)
+    }
+  }
+
+  // 서버 액션을 호출하는 래퍼 함수
+  const handleClientAction = async (formData) => {
+    const result = await action(formData);
+
+    if (result.success) {
+      console.log(result.message);
+      setUpdate(false);
+    } else {
+      console.error(result.message);
+    }
+  };
+
+  return (
+    <>
+      <div className="font-pretendard text-sm text-gray-900 leading-6 w-full">
+        {update ? (
+          <form action={handleClientAction} className="flex flex-col w-full">
+            <input
+              type="hidden"
+              name="commentId"
+              value={comment.id}
+            />
+            <input
+              name="context"
+              className="bg-gray-100 w-full"
+              value={context}
+              placeholder={comment.context}
+              onChange={(e) => setContext(e.target.value)}
+            />
+            <section className="flex w-full justify-end gap-6">
+              <button onClick={handleOnChange}>
+                취소
+              </button>
+              <SubmitButton />
+            </section>
+          </form>
+        ) : (
+          <div className="flex justify-between max-w-7xl">
+            <p>{comment.context}</p>
+            <div
+              className="relative cursor-pointer"
+              onClick={handlePanel}
+            >
+              <Image
+                className="flex shrink-0 pt-1.25 pr-0 pb-1.5 pl-0 mr-3.25 ml-3.25"
+                src={EllipsisVertical}
+                alt="vertical-dropdown-button"
+                width={3}
+                height={13}
+                unoptimized
+              />
+              {showPanel && (
+                <ul className="absolute z-2 mt-2 shrink-0 rounded-xl border border-solid border-gray-200 bg-white -left-20">
+                  {contents.map((c) => (
+                    <li key={c.name} className="font-pretendard cursor-point mt-0.5 flex h-10.5 w-31.25 shrink-0 items-center justify-center text-gray-800 text-lg leading-6.5">
+                      <button
+                        className="border-0 bg-white"
+                        onClick={() => handleOnChange(c.name)}
+                      >
+                        {c.option}
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </div>
+        )}
+      </div >
+
+      {showModal && (
+        <Modal
+          close={() => setShowModal(false)}
+          msg={modalMessage}
+        >
+          정말로 삭제 하시겠습니까?
+          <Button className='flex w-full' onClick={handleDelete} >예</Button>
+        </Modal>
+      )}
+    </>
+  )
+}
\ No newline at end of file
diff --git a/src/app/items/detail/[id]/_components/header/item-author.jsx b/src/app/items/detail/[id]/_components/header/item-author.jsx
new file mode 100644
index 00000000..544ec479
--- /dev/null
+++ b/src/app/items/detail/[id]/_components/header/item-author.jsx
@@ -0,0 +1,40 @@
+import Image from "next/image"
+
+import DefaultAvatar from '@/assets/ic_default_avatar.svg'
+import HeartIcon from '@/assets/icons/ic_heart.svg'
+import { truncateDate } from "@/libs/utils/format"
+
+export function ItemAuthor({ item }) {
+  return (
+    <div className="container flex items-baseline justify-between">
+      <div className="flex text-nowrap mb-6">
+        <div className="relative w-10 h-10 bg-gray-300 rounded-full">
+          <Image
+            src={item.user?.userProfile?.photoUrl || DefaultAvatar}
+            alt="author-avatar"
+            className="absolute"
+            fill
+          />
+        </div>
+        <div>
+          <p className="font-pretendard text-gray-600 text-sm font-medium leading-6 ml-4">{item.user?.name}</p>
+          <span className="font-pretendard text-gray-400 text-sm leading-6 ml-4">{truncateDate(item.user?.updatedAt, 10)}</span>
+        </div>
+      </div>
+      <div className="flex items-baseline h-6 border border-dotted border-gray-200 mx-4 md:mx-8"></div>
+      <button className="flex items-center gap-1 border border-solid border-gray-200 rounded-4xl bg-white cursor-pointer px-3 py-1">
+        <div className="relative text-base w-6 h-6 md:w-8 md:h-8 shrink-0">
+          <Image
+            className="object-cover"
+            fill
+            src={HeartIcon}
+            alt="heart-icon"
+          />
+        </div>
+        <span className="font-pretendard font-medium leading-6.5 text-gray-500">
+          123
+        </span>
+      </button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/app/items/detail/[id]/_components/header/item-detail-section.jsx b/src/app/items/detail/[id]/_components/header/item-detail-section.jsx
new file mode 100644
index 00000000..f7e64685
--- /dev/null
+++ b/src/app/items/detail/[id]/_components/header/item-detail-section.jsx
@@ -0,0 +1,10 @@
+import { ItemTitleSection } from "./item-title-section"
+
+export function ItemDetailSection({ item }) {
+  return (
+    <section className="container w-full items-center pb-4 mb-6 border-b border-gray-200">
+      <ItemTitleSection item={item} />
+      {/* 상품 태그 */}
+    </section >
+  )
+}
diff --git a/src/app/items/detail/[id]/_components/header/item-title-section.jsx b/src/app/items/detail/[id]/_components/header/item-title-section.jsx
new file mode 100644
index 00000000..47066530
--- /dev/null
+++ b/src/app/items/detail/[id]/_components/header/item-title-section.jsx
@@ -0,0 +1,122 @@
+"use client"
+import Image from "next/image"
+import { useRouter } from "next/navigation"
+import { useState } from "react"
+
+import EllipsisVertical from '@/assets/icons/ic_ellipsis_vertical.svg'
+import DefaultImg from "@/assets/items/Img_default.png"
+import { Button } from "@/components/ui/button"
+import { Modal } from "@/components/ui/modal"
+import { deleteArticle } from "@/services/article-service"
+
+import { ItemAuthor } from "./item-author"
+
+const contents = [
+  { option: '수정하기', name: 'update' },
+  { option: '삭제하기', name: 'delete' }
+]
+
+export function ItemTitleSection({ item }) {
+  const [showPanel, setShowPanel] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [modalMessage, setModalMessage] = useState('');
+  const router = useRouter();
+
+  const handlePanel = () => {
+    setShowPanel(!showPanel)
+  }
+
+  const handleDelete = async () => {
+    setShowModal(false)
+
+    try {
+      await deleteArticle(item.id);
+
+      router.push('/articles')
+    } catch (error) {
+      console.error("Failed Delete:", error);
+      setModalMessage("삭제 중 오류 발생")
+      setShowModal(true)
+    }
+  }
+
+  const handleOnChange = (name) => {
+    setShowPanel(false);
+
+    if (name === 'update') {
+      router.push(`${item.id}/update/`)
+    }
+    if (name === 'delete') {
+      setModalMessage("정말로 삭제하시겠습니까")
+      setShowModal(true);
+    }
+  }
+
+  return (
+    <>
+      <div className="container max-w-7xl flex flex-col md:flex-row md:gap-2.5">
+        <div className="flex items-center relative w-85 h-85 shrink-0 md:mr-6 xl:w-121.5 xl:h-121.5 ">
+          <Image
+            className="absolute rounded-2xl"
+            src={DefaultImg}
+            alt="상품 이미지"
+            fill
+          />
+        </div>
+
+        <div className="flex flex-col justify-between">
+          <div
+            className="cursor-pointer flex justify-between items-center"
+            onClick={handlePanel}
+          >
+            <h1
+              className="w-full font-pretendard text-base font-semibold leading-6.5 mt-4 text-gray-800 md:text-xl"
+            >
+              {item.name}
+            </h1>
+            <Image
+              className="flex shrink md:mr-3.5"
+              src={EllipsisVertical}
+              alt="vertical-dropdown-button"
+              width={3}
+              height={13}
+              unoptimized
+            />
+            {showPanel && (
+              <ul className="absolute z-2 mt-2 shrink-0 rounded-xl border border-solid border-gray-200 bg-white -left-20">
+                {contents.map((c) => (
+                  <li key={c.name} className="font-pretendard cursor-point mt-0.5 flex h-10.5 w-31.25 shrink-0 items-center justify-center text-gray-800 text-lg leading-6.5">
+                    <button
+                      className="border-0 bg-white"
+                      onClick={() => handleOnChange(c.name)}
+                    >
+                      {c.option}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+          <h2 className="text-[2rem] font-semibold font-pretendard leading-8 text-gray-800 border-b border-gray-200 pb-4">
+            {item.price}
+          </h2>
+          <h3 className="font-pretendard text-sm font-semibold leading-6 mt-4 mb-2">상품 소개</h3>
+          <section className="font-pretendard text-lg text-gray-800 mb-8 leading-6.5">
+            {item.description}
+          </section>
+          <ItemAuthor item={item} />
+        </div>
+      </div >
+
+      {showModal && (
+        <Modal
+          close={() => setShowModal(false)}
+          msg={modalMessage}
+        >
+          <Button className='flex w-full' onClick={handleDelete} >예</Button>
+        </Modal>
+      )
+      }
+    </>
+  )
+}
\ No newline at end of file
diff --git a/src/app/items/detail/[id]/loading.jsx b/src/app/items/detail/[id]/loading.jsx
new file mode 100644
index 00000000..ce5a7e02
--- /dev/null
+++ b/src/app/items/detail/[id]/loading.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+import { Spinner } from '@/components/ui/spinner'
+
+export default function Loading() {
+  return (
+    <div className='flex min-h-screen'>
+      <Spinner />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/app/items/detail/[id]/page.jsx b/src/app/items/detail/[id]/page.jsx
new file mode 100644
index 00000000..50eb4de0
--- /dev/null
+++ b/src/app/items/detail/[id]/page.jsx
@@ -0,0 +1,35 @@
+import Image from "next/image";
+import { Suspense } from "react";
+
+import { truncateDate } from "@/libs/utils/format"
+import { getItemById } from "@/services/item-service";
+
+import { BackToItems } from "./_components/back-to-articles";
+import { ItemCommentForm } from "./_components/comment/item-comment-form";
+import { ItemCommentSection } from "./_components/comment/item-comment-section";
+import { ItemDetailSection } from "./_components/header/item-detail-section";
+import Loading from "./loading";
+
+export default async function ItemsDetailPage({ params }) {
+  const { id } = await params
+  const item = await getItemById(id)
+  console.log(item)
+
+  return (
+    <main className="container mx-auto flex flex-col min-h-screen w-full max-w-7xl my-8 p-6">
+      {/*상품 제목 + 좋아요 */}
+
+      <ItemDetailSection item={item} />
+
+      {/* 댓글 입력 */}
+      <ItemCommentForm item={item} />
+
+      {/* 댓글 리스트 */}
+      <Suspense fallback={<Loading />} >
+        <ItemCommentSection item={item} />
+      </Suspense>
+
+      <BackToItems />
+    </main >
+  );
+} 
\ No newline at end of file
diff --git a/src/app/items/layout.jsx b/src/app/items/layout.jsx
new file mode 100644
index 00000000..e607534a
--- /dev/null
+++ b/src/app/items/layout.jsx
@@ -0,0 +1,16 @@
+import { Footer } from '@/components/layouts/Footer'
+import { Navigation } from '@/components/ui/navigation'
+import { itemMetadata } from '#/config/metadata'
+
+export default function ArticleLayout({ children }) {
+  return (
+    <div className='flex flex-col justify-center'>
+      <Navigation />
+      {children}
+      <Footer />
+    </div>
+  )
+}
+
+export const metadata = { ...itemMetadata }
+
diff --git a/src/app/items/page.jsx b/src/app/items/page.jsx
index c761a7ff..0afb77e0 100644
--- a/src/app/items/page.jsx
+++ b/src/app/items/page.jsx
@@ -1,6 +1,68 @@
+import Link from 'next/link'
+
+import { CardList } from '@/components/layouts/Items/card-list';
+// import { Pagination } from "@/components/Pagination/Pagination";
+// import { CardList } from "@/components/UI/Card/CardList";
+// import { FavoriteCardList } from "@/components/UI/Card/FavoriteCardList";
+import { Dropdown } from '@/components/ui/dropdown';
+import { Search } from '@/components/ui/search';
+import { getItems } from '@/services/item-service';
+
+export default async function ProductPage(props) {
+  const searchParams = await props.searchParams
+  const keyword = searchParams.keyword || ''
+  const orderBy = searchParams.orderBy || 'recent'
+  const { items } = await getItems(keyword, orderBy)
+  // custom hooks
+  // const {
+  //   currentPage,
+  //   setTotalItems,
+  //   goToPage,
+  //   totalPages
+  // } = usePagination(1, itemsPerPage);
+  // 모바일 기기별 가져올 페이지 세팅 (초기에 먼저 렌더링)
+
+  // search
+  // const handleSearch = (value) => {
+  //   setKeyword(value);
+  //   goToPage(1); // 검색 시 첫페이지로
+  // };
 
-export default function ItemPage() {
   return (
-    <div>ItemPage</div>
-  )
+    <>
+      <main className="container w-full min-h-screen flex flex-col items-center mx-auto py-0 max-w-480">
+
+        <div className="pt-6.5 flex flex-col max-w-480">
+          <p className="font-pretendard text-gray-900 font-bold m-0">베스트 상품</p>
+          {/* <FavoriteCardList
+            page={initialFavoritePerPage}
+          /> */}
+        </div>
+
+        <div className="flex flex-col items-center m-0 max-md:flex max-md:flex-row max-md:justify-around max-md:pr-11.25 max-md:full">
+          <div className="flex items-center justify-between w-full max-md:flex max-md:flex-row max-md:justify-around pr-11.25">
+            <p className="text-start font-pretendard text-gray-900 text-xl/loose font-bold" >판매 중인 상품</p>
+            <div className="flex items-center gap-3">
+              <Search />
+              <Dropdown />
+              <Link href="/items/registration" className="flex justify-center items-center gap-2.5 h-10.5 px-3 py-5.75 border-0 rounded-lg bg-primary-100 text-gray-100 font-pretendard text-lg font-semibold leading-6.5 no-underline cursor-pointer" >상품 등록하기</Link>
+            </div>
+          </div>
+          {items.length > 0 ? (
+            <CardList items={items} />
+          ) : (
+            <p className='text-center text-gray-500 py-10'>등록된 상품이 없습니다.</p>
+          )}
+        </div >
+      </main >
+      <div>
+        {/** pagination */}
+        {/* <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={goToPage}
+        /> */}
+      </div>
+    </>
+  );
 }
\ No newline at end of file
diff --git a/src/assets/ic_default_avatar.svg b/src/assets/ic_default_avatar.svg
new file mode 100644
index 00000000..e814b9aa
--- /dev/null
+++ b/src/assets/ic_default_avatar.svg
@@ -0,0 +1,16 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.3749 8.72968C19.8853 10.4934 18.5358 12.4368 16.989 12.8875C15.4421 13.3381 13.3289 12.4035 12.8185 10.6398C12.3081 8.87604 13.3795 6.4323 14.9264 5.98165C16.989 5.38075 18.8645 6.96596 19.3749 8.72968Z" fill="white"/>
+<path d="M20.2257 8.72968C19.7153 10.4934 21.0648 12.4368 22.6116 12.8875C24.1585 13.3381 26.2717 12.4035 26.7821 10.6398C27.2925 8.87604 26.2211 6.4323 24.6742 5.98165C22.6116 5.38075 20.736 6.96596 20.2257 8.72968Z" fill="white"/>
+<path d="M29.8018 21.6143C29.8018 26.1004 25.4031 27.7679 19.4029 27.7679C13.4027 27.7679 9.10352 26.1004 9.10352 21.6143C9.10352 16.3961 13.4027 11.7686 19.4029 11.7686C25.4031 11.7686 29.8018 16.0022 29.8018 21.6143Z" fill="white"/>
+<path d="M17.4176 20.7284C17.4176 22.1976 16.4746 23.8094 15.1567 23.8094C13.8388 23.8094 11.71 22.6123 11.71 20.4175C11.71 18.3558 14.0098 17.6226 16.3862 17.9991C17.8428 18.2298 17.4176 19.2592 17.4176 20.7284Z" fill="#D1D5DB"/>
+<path d="M16.3169 20.5797C16.3169 20.8001 16.2506 20.9788 15.9192 20.9788C15.5878 20.9788 15.5215 20.8001 15.5215 20.5797C15.5215 20.3593 15.6541 20.1807 15.9192 20.1807C16.1843 20.1807 16.3169 20.3593 16.3169 20.5797Z" fill="white"/>
+<path d="M21.4261 20.7284C21.4261 22.1976 22.3692 23.8094 23.6871 23.8094C25.0049 23.8094 27.1338 22.6123 27.1338 20.4175C27.1338 18.3558 24.834 17.6226 22.4575 17.9991C21.001 18.2298 21.4261 19.2592 21.4261 20.7284Z" fill="#D1D5DB"/>
+<path d="M22.5288 20.5797C22.5288 20.8001 22.5951 20.9788 22.9265 20.9788C23.2579 20.9788 23.3242 20.8001 23.3242 20.5797C23.3242 20.3593 23.1917 20.1807 22.9265 20.1807C22.6614 20.1807 22.5288 20.3593 22.5288 20.5797Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7578 29.9998C27.7511 29.9998 33.611 27.7469 33.611 21.6863C33.611 14.1044 27.7511 8.38477 19.7578 8.38477C11.7645 8.38477 6.03711 14.6365 6.03711 21.6863C6.03711 27.7469 11.7645 29.9998 19.7578 29.9998ZM19.4432 27.6721C25.3229 27.6721 29.6333 26.0224 29.6333 21.5841C29.6333 16.0319 25.3229 11.8433 19.4432 11.8433C13.5635 11.8433 9.35058 16.4215 9.35058 21.5841C9.35058 26.0224 13.5635 27.6721 19.4432 27.6721Z" fill="white"/>
+<mask id="mask0_52158_5968" 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_52158_5968)">
+<ellipse cx="19.583" cy="37.5" rx="11.25" ry="12.5" fill="white"/>
+</g>
+</svg>
diff --git a/src/assets/items/Img_default.png b/src/assets/items/Img_default.png
new file mode 100644
index 00000000..1ca7e473
Binary files /dev/null and b/src/assets/items/Img_default.png differ
diff --git a/src/assets/items/Img_default_items.svg b/src/assets/items/Img_default_items.svg
new file mode 100644
index 00000000..d515b3e8
--- /dev/null
+++ b/src/assets/items/Img_default_items.svg
@@ -0,0 +1,16 @@
+<svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="220" height="220" fill="#F9FAFB"/>
+<path d="M129.703 41.9619L145.646 41.9751L142.443 60.0415C147.958 64.1041 150.645 70.9767 149.348 77.7031L145.067 99.9019L130.187 99.8897L126.596 77.3264C125.549 70.7519 128.159 64.1282 133.408 60.0341L129.703 41.9619Z" fill="#E5E7EB"/>
+<rect x="52.0645" y="99.8252" width="115.855" height="78.1222" rx="6.37732" transform="rotate(0.0471621 52.0645 99.8252)" fill="#E5E7EB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M111.31 99.874L137.906 122.335L134.08 122.8L134.455 126.421L130.725 126.772L131.004 130.508L127.274 130.858L127.553 134.594L123.823 134.944L124.102 138.68L78.1206 99.8467L111.31 99.874Z" fill="#F3F4F6"/>
+<path d="M106.812 132.902C107.177 134.465 105.904 136.098 104.528 136.42C103.152 136.741 101.345 135.826 100.98 134.262C100.615 132.699 101.667 130.616 103.043 130.295C104.878 129.867 106.447 131.338 106.812 132.902Z" fill="#F3F4F6"/>
+<path d="M113.832 132.962C113.303 134.477 114.394 136.237 115.728 136.703C117.062 137.169 118.957 136.452 119.486 134.936C120.015 133.42 119.191 131.237 117.857 130.771C116.078 130.15 114.361 131.446 113.832 132.962Z" fill="#F3F4F6"/>
+<path d="M120.422 141.864C120.177 146.445 115.612 147.909 109.51 147.583C103.407 147.258 99.1259 145.321 99.3706 140.74C99.6551 135.411 103.237 131.336 110.357 131.717C117.477 132.097 120.728 136.133 120.422 141.864Z" fill="#F3F4F6"/>
+<path d="M108.505 139.851C108.434 141.18 107.534 142.594 106.385 142.533C105.236 142.472 103.438 141.29 103.544 139.305C103.643 137.44 105.684 136.883 107.738 137.335C108.997 137.611 108.576 138.523 108.505 139.851Z" fill="#E5E7EB"/>
+<path d="M106.367 139.539C106.353 139.799 106.42 140.015 106.813 140.036C107.206 140.057 107.295 139.85 107.309 139.589C107.323 139.329 107.177 139.11 106.863 139.093C106.549 139.076 106.381 139.279 106.367 139.539Z" fill="white"/>
+<path d="M111.434 140.007C111.363 141.336 112.108 142.838 113.257 142.9C114.406 142.961 116.32 141.977 116.426 139.992C116.526 138.127 114.556 137.357 112.465 137.587C111.184 137.728 111.505 138.678 111.434 140.007Z" fill="#E5E7EB"/>
+<path d="M113.594 139.924C113.58 140.184 113.49 140.391 113.097 140.37C112.704 140.349 112.637 140.134 112.651 139.874C112.665 139.613 112.833 139.411 113.148 139.428C113.462 139.444 113.608 139.664 113.594 139.924Z" fill="white"/>
+<rect x="58.9829" y="88.1396" width="57.9273" height="11.6918" rx="1.06289" transform="rotate(0.0471621 58.9829 88.1396)" fill="#E5E7EB"/>
+<rect x="55.252" y="79.6406" width="52.0815" height="8.5031" rx="1.06289" transform="rotate(0.0471621 55.252 79.6406)" fill="#E5E7EB"/>
+<rect x="62.1606" y="71.1748" width="52.0815" height="8.5031" rx="1.06289" transform="rotate(0.0471621 62.1606 71.1748)" fill="#E5E7EB"/>
+</svg>
diff --git a/src/components/layouts/Items/card-list.jsx b/src/components/layouts/Items/card-list.jsx
new file mode 100644
index 00000000..abf63851
--- /dev/null
+++ b/src/components/layouts/Items/card-list.jsx
@@ -0,0 +1,22 @@
+import Link from "next/link";
+
+import { Card } from "@/components/ui/card";
+
+export function CardList({ items }) {
+  return (
+    <div className="grid grid-cols-4 gap-4 cursor-pointer">
+      {items.map((item) => (
+        <Link
+          key={item.id}
+          href={`items/detail/${item.id}`}
+        >
+          <Card
+            name={item.name}
+            price={item.price}
+            images={item.images}
+          />
+        </Link>
+      ))}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/ui/avatar/avatar.jsx b/src/components/ui/avatar/avatar.jsx
new file mode 100644
index 00000000..011ce497
--- /dev/null
+++ b/src/components/ui/avatar/avatar.jsx
@@ -0,0 +1,41 @@
+import { cva } from "class-variance-authority"
+import Image from "next/image"
+
+import DefaultAvatar from "@/assets/ic_default_avatar.svg"
+import { cn } from "@/libs/cn"
+
+const avatarVariants = cva(
+  "relative bg-gray-300 rounded-full shrink-0 overflow-hidden",
+  {
+    variants: {
+      size: {
+        small: "w-8 h-8",
+        medium: "w-10 h-10",
+        large: "w-16 h-16",
+        xl: "w-24 h-24"
+      },
+    },
+    defaultVariants: {
+      size: "medium"
+    },
+  }
+);
+
+export function Avatar({ className = "", size = "medium", src, alt, ...props }) {
+  const mergedClass = cn(
+    avatarVariants({ size }),
+    className
+  );
+
+  return (
+    <div className={mergedClass} {...props}>
+      <Image
+        src={src || DefaultAvatar}
+        alt={alt || "author-avatar"}
+        className="absolute object-cover"
+        fill
+      />
+    </div>
+  )
+
+}
\ No newline at end of file
diff --git a/src/components/ui/avatar/index.js b/src/components/ui/avatar/index.js
new file mode 100644
index 00000000..a7424ca3
--- /dev/null
+++ b/src/components/ui/avatar/index.js
@@ -0,0 +1 @@
+export * from './avatar';
diff --git a/src/components/ui/card/card.jsx b/src/components/ui/card/card.jsx
new file mode 100644
index 00000000..8329dde9
--- /dev/null
+++ b/src/components/ui/card/card.jsx
@@ -0,0 +1,27 @@
+import Image from "next/image";
+
+import Heart from "@/assets/icons/ic_heart.svg"
+import DefaultItemImage from "@/assets/items/Img_default_items.svg"
+
+export function Card({ name, price, images, type }) {
+  return (
+    <div className="flex flex-col gap-4 cursor-pointer hover:bg-gray-200 hover:transition duration-200 ease-in">
+      <Image
+        className={type === 'favorite' ? "bg-gray-100 w-[282px] h-[282px] rounded-2xl" : "bg-gray-100 w-[221px] h-[221px] rounded-2xl"}
+        src={images?.[0] || DefaultItemImage}
+        alt="image" />
+      <div className="flex flex-col gap-1.5">
+        <p className="font-pretendard text-base text-gray-800 font-medium">{name}</p>
+        <p className="font-pretendard text-lg text-gray-800 font-bold">{price}</p>
+        <div className="text-gray-600 font-pretendardk text-xs font-medium">
+          <Image
+            src={Heart}
+            width={16} height={16}
+            alt="좋아요"
+          />
+          240
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/ui/card/index.js b/src/components/ui/card/index.js
new file mode 100644
index 00000000..cb5809fe
--- /dev/null
+++ b/src/components/ui/card/index.js
@@ -0,0 +1 @@
+export * from './card';
diff --git a/src/components/ui/navigation/navigation.jsx b/src/components/ui/navigation/navigation.jsx
index dde64142..2ba4e5c4 100644
--- a/src/components/ui/navigation/navigation.jsx
+++ b/src/components/ui/navigation/navigation.jsx
@@ -5,26 +5,30 @@ import { usePathname } from 'next/navigation'
 
 import PandaLogo from '@/assets/logo.svg'
 import { cn } from '@/libs/cn';
+import { useAuth } from '@/providers/auth-provider'
 import { paths } from '#/config/paths'
 
+import { Avatar } from '../avatar/avatar'
+
 const navLink = [
   { name: '자유게시판', href: '/articles' },
   { name: '중고마켓', href: '/items' }
 ]
 
 export function Navigation() {
+  const { user } = useAuth();
   const pathname = usePathname();
 
   return (
-    <nav className="max-w-[768px] w-full md:max-w-full h-17.5 bg-white z-1">
-      <div className="flex justify-between items-center h-full py-0 px-0 my-0 mx-auto border-b border-solid border-gray-300 gap-0 xl:gap-3 md:px-50">
+    <nav className="container mx-auto max-w-480 w-full h-17.5 bg-white z-1">
+      <div className="flex justify-between items-center h-full py-0 my-0 mx-auto border-b border-solid border-gray-300 gap-0 ml-4 xl:gap-3">
         <div className="inline-flex items-center">
           <div className='flex items-center gap-2 ml-6 md:ml-0'>
             <Link
-              className="relative hidden md:block w-10 h-10"
+              className="relative w-10 h-10"
               href={paths.home.getHref()}>
               <Image
-                className="hidden mr-1.5 object-fit md:block"
+                className="mr-1.5 object-fit"
                 fill
                 src={PandaLogo}
                 alt="panda-market"
@@ -49,7 +53,14 @@ export function Navigation() {
             ))}
           </nav>
         </div>
-        <Link className="bg-primary-100 text-white px-3 py-1.75 rounded-lg text-nowrap mr-4 md:mr-0" href="/login">로그인</Link>
+        {user ? (
+          <div className='flex items-center gap-1.5'>
+            <Avatar size='medium' alt="유저 이미지" />
+            <p className='text-gray-600 text-lg'>{user.data.name}</p>
+          </div>
+        ) : (
+          <Link className="bg-primary-100 text-white px-3 py-1.75 rounded-lg text-nowrap mr-4 md:mr-0" href="/login">로그인</Link>
+        )}
       </div >
     </nav >
   );
diff --git a/src/libs/prisma.js b/src/libs/prisma.js
index 8b9e4450..0c8f8435 100644
--- a/src/libs/prisma.js
+++ b/src/libs/prisma.js
@@ -1,7 +1,7 @@
 /** @see https://accelerate-speed-test.prisma.io/?utm_source=github&utm_medium=accelerate-readme#testArea */
 import { withAccelerate } from '@prisma/extension-accelerate';
 
-import { PrismaClient } from './generated/prisma-client';
+import { PrismaClient } from './generated/prisma-client/index.js';
 
 // Accelerate 확장 기능을 적용 .withAccelerate()를 사용하면 Prisma Data Proxy를 통해 데이터베이스에 연결
 const prisma = new PrismaClient().$extends(withAccelerate());
diff --git a/src/providers/route-guard.jsx b/src/providers/route-guard.jsx
index 01e04403..e14de74a 100644
--- a/src/providers/route-guard.jsx
+++ b/src/providers/route-guard.jsx
@@ -6,6 +6,7 @@ import { useAuth } from "./auth-provider";
 
 const protectedPaths = [
   '/articles',
+  '/items',
 ]
 
 const publicPaths = [
diff --git a/src/services/fetch-client.js b/src/services/fetch-client.js
index eefa28ab..ca67d049 100644
--- a/src/services/fetch-client.js
+++ b/src/services/fetch-client.js
@@ -46,18 +46,18 @@ export const cookieFetch = async (url, options = {}) => {
     },
   };
 
-  let response = await fetch(`${API_URL}${url}`, mergedOptions);
+  let response = await fetch(`${url}`, mergedOptions);
 
   if (response.status === 401 && url !== '/api/refresh-token') {
     try {
-      const refreshResponse = await fetch(`${API_URL}/api/refresh-token`, {
+      const refreshResponse = await fetch(`/api/refresh-token`, {
         method: 'POST',
         credentials: 'include',
         cache: 'no-store',
       });
 
       if (refreshResponse.ok) {
-        response = await fetch(`${API_URL}${url}`, mergedOptions);
+        response = await fetch(`${url}`, mergedOptions);
       }
     } catch (error) {
       console.error('토큰 갱신 실패:', error);
diff --git a/src/services/item-service.js b/src/services/item-service.js
new file mode 100644
index 00000000..66d19040
--- /dev/null
+++ b/src/services/item-service.js
@@ -0,0 +1,34 @@
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
+
+export async function getItems(searchParams) {
+  const res = await fetch(
+    `${BASE_URL}/api/items?limit=5&page=1&keyword=${searchParams}&orderBy=recent`,
+    {
+      next: { revalidate: 500 },
+    },
+  );
+
+  if (!res.ok) {
+    throw new Error('상품 데이터를 가져오는 데 실패했습니다.');
+  }
+
+  const result = await res.json();
+  return result.data;
+}
+
+export async function getItemById(id) {
+  try {
+    const res = await fetch(`http://localhost:3000/api/items/detail/${id}`, {
+      cache: 'no-store',
+    });
+
+    if (!res.ok) {
+      throw new Error('상풍 상세 데이터를 가져오는 데 실패했습니다.');
+    }
+
+    const result = await res.json();
+    return result.data; // 최대 3개의 게시글 배열
+  } catch (error) {
+    console.error(error);
+  }
+}