diff --git a/.gitignore b/.gitignore
index 4d29575d..0340c1db 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.eslint.config.js
+.prettierrc.js
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index a1e590ee..4aab955e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,8 +13,12 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^7.6.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "eslint-config-prettier": "^10.1.5"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -7333,6 +7337,22 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "10.1.5",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.5.tgz",
+      "integrity": "sha512-zc1UmCpNltmVY34vuLRV61r1K27sWuX39E+uyUnY8xS2Bex88VV9cugG+UZbRSRGtGyFboj+D8JODyme1plMpw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-config-prettier"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-config-react-app": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz",
@@ -14671,6 +14691,53 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.0.tgz",
+      "integrity": "sha512-GGufuHIVCJDbnIAXP3P9Sxzq3UUsddG3rrI3ut1q6m0FI6vxVBF3JoPQ38+W/blslLH4a5Yutp8drkEpXoddGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.0.tgz",
+      "integrity": "sha512-DYgm6RDEuKdopSyGOWZGtDfSm7Aofb8CCzgkliTjtu/eDuB0gcsv6qdFhhi8HdtmA+KHkt5MfZ5K2PdzjugYsA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/react-router/node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -15480,6 +15547,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
diff --git a/package.json b/package.json
index 7ff0d6b5..cacba980 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^7.6.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -34,5 +35,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "eslint-config-prettier": "^10.1.5"
   }
 }
diff --git a/src/App.js b/src/App.js
index 37845757..9aad1263 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,24 +1,14 @@
-import logo from './logo.svg';
-import './App.css';
+import { Outlet } from "react-router-dom";
+import Nav from "./components/Nav";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <Nav />
+      <div>
+        <Outlet />
+      </div>
+    </>
   );
 }
 
diff --git a/src/Main.js b/src/Main.js
new file mode 100644
index 00000000..338311b2
--- /dev/null
+++ b/src/Main.js
@@ -0,0 +1,24 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import App from "./App";
+import "./css/base/reset.css";
+import "./css/base/variables.css";
+import "./css/base/common.css";
+import ItemsPage from "./pages/ItemsPage";
+import ItemRegisterPage from "./pages/ItemRegisterPage";
+
+function Main() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<App />}>
+          <Route path="items">
+            <Route index element={<ItemsPage />}></Route>
+            <Route path="addItem" element={<ItemRegisterPage />}></Route>
+          </Route>
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default Main;
diff --git a/src/api/Items.js b/src/api/Items.js
new file mode 100644
index 00000000..65fa4c99
--- /dev/null
+++ b/src/api/Items.js
@@ -0,0 +1,43 @@
+const BASEURL = "https://panda-market-api.vercel.app";
+
+export async function getFavoriteItems({
+  page = 1,
+  pageSize = 4,
+  orderBy = "favorite",
+}) {
+  const params = {
+    page: page,
+    pageSize: pageSize,
+    orderBy: orderBy,
+  };
+
+  const query = new URLSearchParams(params).toString();
+  const response = await fetch(`${BASEURL}/products?${query}`);
+  if (!response.ok) {
+    throw new Error("상품 목록을 불러오는데 오류가 발생했습니다");
+  }
+  const body = await response.json();
+  return body;
+}
+
+export async function getAllItems({
+  page = 1,
+  pageSize = 10,
+  orderBy = "recent",
+  keyword = "",
+}) {
+  const params = {
+    page: page,
+    pageSize: pageSize,
+    orderBy: orderBy,
+    keyword: keyword,
+  };
+
+  const query = new URLSearchParams(params).toString();
+  const response = await fetch(`${BASEURL}/products?${query}`);
+  if (!response.ok) {
+    throw new Error("상품 목록을 불러오는데 오류가 발생했습니다");
+  }
+  const body = await response.json();
+  return body;
+}
diff --git a/src/components/Button.js b/src/components/Button.js
new file mode 100644
index 00000000..9a3d19aa
--- /dev/null
+++ b/src/components/Button.js
@@ -0,0 +1,23 @@
+import "../css/components/Button.css";
+
+const Button = ({ className, type, children, onClick }) => {
+  const btnStyleClass = {
+    register: "btn-register",
+    small: "btn-small",
+    large: "btn-large",
+  };
+
+  const btnClassName = `btn ${btnStyleClass[type] || ""} ${className}`;
+
+  const onClickButton = () => {
+    onClick();
+  };
+
+  return (
+    <button type="button" className={btnClassName} onClick={onClickButton}>
+      {children}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/src/components/Card.js b/src/components/Card.js
new file mode 100644
index 00000000..6c0730f1
--- /dev/null
+++ b/src/components/Card.js
@@ -0,0 +1,33 @@
+import "../css/components/Card.css";
+import HeartIcon from "./HeartIcon.js";
+import defaultImg from "../img/img_default.svg";
+
+const Card = ({ data }) => {
+  const { images, name, price, favoriteCount } = data;
+  return (
+    <div>
+      <img
+        className="card__image"
+        alt="중고상품 이미지"
+        src={images[0] ?? defaultImg}
+        onError={(e) => {
+          e.target.onError = null;
+          e.target.src = defaultImg;
+        }}
+      />
+      <div className="card__info">
+        <div className="card__info__title">{name}</div>
+        <div className="card__info__price">
+          {price.toLocaleString("ko-KR")}원
+        </div>
+
+        <div className="card__icon__group">
+          <HeartIcon />
+          <span className="heart__icon__count">{favoriteCount}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Card;
diff --git a/src/components/Dropdown.js b/src/components/Dropdown.js
new file mode 100644
index 00000000..c150e64a
--- /dev/null
+++ b/src/components/Dropdown.js
@@ -0,0 +1,43 @@
+import "../css/components/Dropdown.css";
+import sortIcon from "../img/sort.svg";
+import arrowDownIcon from "../img/arrow_down.svg";
+
+const Dropdown = ({
+  className,
+  onClickDropdown,
+  onClickDropdownItem,
+  dropdownList,
+  showDropdown,
+  value,
+}) => {
+  return (
+    <div
+      className={`dropdown__container ${className}`}
+      onClick={onClickDropdown}
+    >
+      <div className="dropdown__button">
+        <span className="dropdown__text">{value.name}</span>
+        <img
+          src={arrowDownIcon}
+          alt="드롭다운 아이콘"
+          className="dropdown__button__icon"
+        />
+        <img src={sortIcon} alt="분류아이콘" className="dropdown__sort__icon" />
+      </div>
+      {showDropdown && (
+        <ul className="dropdown__list">
+          {dropdownList?.map((item, index) => (
+            <li
+              key={`${item.value}-${index}`}
+              onClick={() => onClickDropdownItem(item)}
+            >
+              {item.name}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;
diff --git a/src/components/HeartIcon.js b/src/components/HeartIcon.js
new file mode 100644
index 00000000..e6686044
--- /dev/null
+++ b/src/components/HeartIcon.js
@@ -0,0 +1,20 @@
+const HeartIcon = ({ isLiked = false }) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21.1997 4.90039C25.1051 4.90039 28.2452 7.9009 28.5464 11.7812L28.5669 12.1602V12.4004C28.5668 14.5632 27.7277 16.4503 26.3247 17.7363L26.0327 18.0039V18.0986C26.0187 18.1104 26.0043 18.1225 25.9897 18.1348C25.7818 18.3101 25.4997 18.5534 25.1636 18.8457C24.4902 19.4313 23.5881 20.2253 22.605 21.0918C21.6203 21.9597 20.5539 22.9003 19.5513 23.7822L16.8901 26.1084C16.4239 26.4969 15.7089 26.4969 15.2427 26.1084H15.2417C13.7764 24.8428 11.4525 22.817 9.4751 21.0889C8.48386 20.2226 7.5804 19.4314 6.9165 18.8486C6.58461 18.5573 6.31311 18.3184 6.12061 18.1484C6.11365 18.1423 6.10677 18.1358 6.1001 18.1299V18.0273L5.83643 17.7637C4.39581 16.3231 3.567 14.4151 3.56689 12.4004V12.1426C3.69507 8.23997 7.02258 5.03324 10.9331 5.0332C11.5505 5.0332 12.3382 5.24524 13.1069 5.65918C13.849 6.05883 14.5073 6.61335 14.9438 7.24316C15.4233 8.26862 16.9006 8.25157 17.3462 7.19141C17.7132 6.53143 18.3555 5.95411 19.105 5.53613C19.873 5.10782 20.6559 4.90042 21.1997 4.90039Z"
+        fill={isLiked ? "#FF68CC" : "none"}
+        stroke={isLiked ? "#FF68CC" : "#6B7280"}
+        strokeWidth="1.8"
+      />
+    </svg>
+  );
+};
+
+export default HeartIcon;
diff --git a/src/components/Nav.js b/src/components/Nav.js
new file mode 100644
index 00000000..ae87cab7
--- /dev/null
+++ b/src/components/Nav.js
@@ -0,0 +1,59 @@
+import { Link, NavLink } from "react-router-dom";
+import textLogoIcon from "../img/logo_text.jpg";
+import logoIcon from "../img/logo.svg";
+import userIcon from "../img/user.svg";
+import "../css/components/Nav.css";
+
+const Nav = () => {
+  return (
+    <header className="header">
+      <div className="header__content">
+        <div className="header__content__navigation__group">
+          <Link to="/">
+            <img
+              src={textLogoIcon}
+              srcSet={`${textLogoIcon} 103w, ${logoIcon} 153w`}
+              sizes={"(min-width: 768px) 153px, 103px"}
+              alt="판다마켓 로고"
+              className="header__content__logo"
+            />
+          </Link>
+          <ul>
+            <li>
+              <NavLink
+                to="board"
+                className={({ isActive }) =>
+                  isActive ? "header__content__link--active" : ""
+                }
+              >
+                자유게시판
+              </NavLink>
+            </li>
+
+            <li>
+              <NavLink
+                to="items"
+                className={({ isActive }) =>
+                  isActive ? "header__content__link--active" : ""
+                }
+              >
+                중고마켓
+              </NavLink>
+            </li>
+          </ul>
+        </div>
+        <div className="header__content__user">
+          <Link to="user">
+            <img
+              src={userIcon}
+              alt="사용자 아이콘"
+              className="header__content__user__icon"
+            />
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Nav;
diff --git a/src/components/Pagination.js b/src/components/Pagination.js
new file mode 100644
index 00000000..45ebfeb8
--- /dev/null
+++ b/src/components/Pagination.js
@@ -0,0 +1,63 @@
+import "../css/components/Pagination.css";
+import arrowLeftActive from "../img/arrow_left_active.svg";
+import arrowLeftInactive from "../img/arrow_left_inactive.svg";
+import arrowRightActive from "../img/arrow_right_active.svg";
+import arrowRightInactive from "../img/arrow_right_inactive.svg";
+
+const Pagination = ({
+  totalCount,
+  pageSize,
+  currentPage,
+  onClickNext,
+  onClickPrev,
+  onClickPage,
+}) => {
+  const pageTotal = Math.ceil(totalCount / pageSize);
+  const totalPageList = Array(pageTotal)
+    .fill()
+    .map((e, i) => i + 1);
+
+  let startPage = Math.floor((currentPage - 1) / 5) * 5 + 1;
+  let endPage = Math.min(startPage + 5 - 1, pageTotal);
+
+  const visiblePageList = totalPageList.slice(startPage - 1, endPage);
+
+  return (
+    <div className="pagination__container">
+      <button
+        className="pagination__button"
+        disabled={currentPage === 1}
+        onClick={onClickPrev}
+      >
+        <img
+          src={currentPage === 1 ? arrowLeftInactive : arrowLeftActive}
+          alt="페이지 네이션 이전 버튼"
+        />
+      </button>
+      {visiblePageList?.map((number, index) => (
+        <button
+          key={index}
+          className="pagination__button"
+          aria-current={currentPage === number ? "page" : undefined}
+          onClick={() => onClickPage(number)}
+        >
+          {number}
+        </button>
+      ))}
+      <button
+        className="pagination__button"
+        disabled={currentPage === pageTotal}
+        onClick={onClickNext}
+      >
+        <img
+          src={
+            currentPage === pageTotal ? arrowRightInactive : arrowRightActive
+          }
+          alt="페이지 네이션 이전 버튼"
+        />
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;
diff --git a/src/components/SearchInput.js b/src/components/SearchInput.js
new file mode 100644
index 00000000..2ddded3a
--- /dev/null
+++ b/src/components/SearchInput.js
@@ -0,0 +1,24 @@
+import searchIcon from "../img/search.svg";
+import "../css/components/SearchInput.css";
+
+const SearchInput = ({ value, onInput, onKeyDown, onClick, className }) => {
+  return (
+    <div className={`search__input__container ${className}`}>
+      <input
+        className="search__input"
+        placeholder="검색할 상품을 입력해주세요"
+        value={value}
+        onInput={onInput}
+        onKeyDown={onKeyDown}
+      />
+      <img
+        src={searchIcon}
+        className="search__icon"
+        alt="검색 아이콘"
+        onClick={onClick}
+      />
+    </div>
+  );
+};
+
+export default SearchInput;
diff --git a/src/css/base/common.css b/src/css/base/common.css
new file mode 100644
index 00000000..5d0efa1d
--- /dev/null
+++ b/src/css/base/common.css
@@ -0,0 +1,53 @@
+body {
+  font-family: "Pretendard Variable";
+}
+
+a {
+  cursor: pointer;
+}
+
+input {
+  font-family: "Pretendard Variable";
+  font-size: var(--font-size-xs);
+  color: var(--color-secondary-800);
+  background-color: var(--color-secondary-100);
+  padding: 16px 20px;
+  border-radius: 12px;
+  height: 56px;
+  border: none;
+}
+
+input::placeholder {
+  color: var(--color-secondary-400);
+  font-size: var(--font-size-xs);
+}
+
+input.success {
+  outline: 1px solid var(--color-primary-100);
+}
+
+input.error {
+  outline: 1px solid var(--color-error);
+}
+
+input {
+  outline: none;
+}
+
+label {
+  font-size: var(--font-size-sm);
+  font-weight: 700;
+  color: var(--color-secondary-800);
+}
+
+.msg {
+  font-size: var(--font-size-xxs);
+  font-weight: 600;
+  padding-left: 16px;
+  display: none;
+  color: var(--color-error);
+}
+
+.msg.error {
+  display: block;
+}
diff --git a/src/css/base/reset.css b/src/css/base/reset.css
new file mode 100644
index 00000000..a5d386bb
--- /dev/null
+++ b/src/css/base/reset.css
@@ -0,0 +1,18 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+button {
+  border: none;
+}
+
+ul {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
diff --git a/src/css/base/variables.css b/src/css/base/variables.css
new file mode 100644
index 00000000..72ef33ca
--- /dev/null
+++ b/src/css/base/variables.css
@@ -0,0 +1,35 @@
+:root {
+  /* Colors */
+  --color-background-white: #ffffff;
+  --color-background-blue: #cfe5ff;
+  --color-background-light-blue: #e6f2ff;
+  --color-background-bright-blue: #2f80ed;
+  --color-primary-100: #3692ff;
+  --color-primary-200: #1967d6;
+  --color-primary-300: #1251aa;
+  --color-secondary-50: #f9fafb;
+  --color-secondary-100: #f3f4f6;
+  --color-secondary-200: #e5e7eb;
+  --color-secondary-400: #9ca3af;
+  --color-secondary-500: #6b7280;
+  --color-secondary-600: #4b5563;
+  --color-secondary-700: #374151;
+  --color-secondary-800: #1f2937;
+  --color-secondary-900: #111827;
+  --color-error: #f74747;
+
+  /* Font Sizes */
+  --font-size-xxxs: 12px;
+  --font-size-xxs: 14px;
+  --font-size-xs: 16px;
+  --font-size-sm: 18px;
+  --font-size-lg: 20px;
+  --font-size-xl: 24px;
+  --font-size-2xl: 32px;
+  --font-size-3xl: 40px;
+
+  /* Border Radius */
+  --border-radius-sm: 8px;
+  --border-radius-md: 12px;
+  --border-radius-lg: 40px;
+}
diff --git a/src/css/components/Button.css b/src/css/components/Button.css
new file mode 100644
index 00000000..86b423a0
--- /dev/null
+++ b/src/css/components/Button.css
@@ -0,0 +1,40 @@
+.btn {
+  background-color: var(--color-primary-100);
+  text-decoration: none;
+  color: var(--color-secondary-100);
+  padding: 12px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+}
+
+.btn-register {
+  border-radius: var(--border-radius-sm);
+  min-width: 133px;
+  height: 42px;
+  font-size: var(--font-size-xs);
+}
+
+.btn-small {
+  border-radius: var(--border-radius-sm);
+  min-width: 128px;
+  height: 48px;
+  font-size: var(--font-size-xs);
+}
+
+.btn-large {
+  border-radius: var(--border-radius-lg);
+  width: 240px;
+  height: 48px;
+  font-size: var(--font-size-sm);
+}
+
+.btn a {
+  text-decoration: none;
+  color: var(--color-secondary-100);
+}
+
+.btn:disabled {
+  background-color: var(--color-secondary-400);
+}
diff --git a/src/css/components/Card.css b/src/css/components/Card.css
new file mode 100644
index 00000000..c9d28992
--- /dev/null
+++ b/src/css/components/Card.css
@@ -0,0 +1,41 @@
+.card__image {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 16px;
+  margin-bottom: 16px;
+}
+
+.card__info {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.card__info__title {
+  font-size: var(--font-size-xxs);
+  font-weight: 500;
+  color: var(--color-secondary-800);
+}
+
+.card__info__price {
+  font-size: var(--font-size-xs);
+  font-weight: 700;
+  color: var(--color-secondary-800);
+}
+
+.card__icon__group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.heart__icon {
+  width: 16px;
+  height: 16px;
+}
+
+.heart__icon__count {
+  font-size: var(--font-size-xxxs);
+  font-weight: 500;
+  color: var(--color-secondary-600);
+}
diff --git a/src/css/components/Dropdown.css b/src/css/components/Dropdown.css
new file mode 100644
index 00000000..358d73dc
--- /dev/null
+++ b/src/css/components/Dropdown.css
@@ -0,0 +1,73 @@
+.dropdown__container {
+  position: relative;
+}
+
+.dropdown__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 20px;
+  width: 42px;
+  height: 42px;
+  border: 1px solid var(--color-secondary-200);
+  border-radius: 12px;
+  background-color: #ffffff;
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  color: var(--color-secondary-800);
+}
+
+@media screen and (min-width: 744px) {
+  .dropdown__button {
+    width: 130px;
+    justify-content: space-between;
+  }
+}
+
+.dropdown__button__icon {
+  display: none;
+}
+
+@media screen and (min-width: 744px) {
+  .dropdown__button__icon {
+    display: block;
+  }
+}
+
+.dropdown__text {
+  display: none;
+}
+
+@media screen and (min-width: 744px) {
+  .dropdown__text {
+    display: block;
+  }
+}
+
+@media screen and (min-width: 744px) {
+  .dropdown__sort__icon {
+    display: none;
+  }
+}
+
+.dropdown__list {
+  position: absolute;
+  background-color: var(--color-background-white);
+  width: 130px;
+  height: 84px;
+  right: 0;
+  border: 1px solid var(--color-secondary-200);
+  border-radius: 12px;
+  margin-top: 4px;
+}
+
+.dropdown__list > li {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 42px;
+}
+
+.dropdown__list > li:nth-child(2n-1) {
+  border-bottom: 1px solid var(--color-secondary-200);
+}
diff --git a/src/css/components/Nav.css b/src/css/components/Nav.css
new file mode 100644
index 00000000..e9e45597
--- /dev/null
+++ b/src/css/components/Nav.css
@@ -0,0 +1,84 @@
+header {
+  padding: 15px 0;
+  background-color: var(--color-background-white);
+  position: sticky;
+  top: 0;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
+  z-index: 1;
+}
+
+.header__content {
+  padding: 0 16px;
+  max-width: 1920px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+@media screen and (min-width: 744px) {
+  .header__content {
+    padding: 0 24px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .header__content {
+    padding: 0 200px;
+  }
+}
+
+.header__content__logo {
+  width: 103px;
+  vertical-align: middle;
+}
+
+@media screen and (min-width: 768px) {
+  .header__content__logo {
+    width: 153px;
+  }
+}
+
+.header__content__navigation__group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+@media screen and (min-width: 744px) {
+  .header__content__navigation__group {
+    gap: 35px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .header__content__navigation__group {
+    gap: 47px;
+  }
+}
+
+.header__content__navigation__group ul {
+  display: flex;
+  gap: 8px;
+  font-size: var(--font-size-xs);
+  font-weight: 700;
+  color: var(--color-secondary-600);
+  align-items: center;
+}
+
+@media screen and (min-width: 744px) {
+  .header__content__navigation__group ul {
+    gap: 30px;
+    font-size: var(--font-size-sm);
+  }
+}
+
+.header__content__link--active {
+  color: var(--color-primary-100);
+}
+
+.header__content__user__icon {
+  width: 40px;
+  vertical-align: middle;
+}
diff --git a/src/css/components/Pagination.css b/src/css/components/Pagination.css
new file mode 100644
index 00000000..0650f2e0
--- /dev/null
+++ b/src/css/components/Pagination.css
@@ -0,0 +1,39 @@
+.pagination__container {
+  display: flex;
+  justify-content: center;
+  gap: 4px;
+  margin-top: 40px;
+}
+
+.pagination__button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  background-color: var(--color-background-white);
+  border: 1px solid var(--color-secondary-200);
+  border-radius: 40px;
+  color: var(--color-secondary-500);
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+}
+
+.pagination__button[aria-current="page"] {
+  background-color: var(--color-background-bright-blue);
+  color: var(--color-secondary-50);
+}
+
+.items__container__pagination__button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid #e5e7eb;
+  border-radius: 40px;
+  color: var(--color-secondary-500);
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  background-color: var(--color-background-white);
+}
diff --git a/src/css/components/SearchInput.css b/src/css/components/SearchInput.css
new file mode 100644
index 00000000..d3e9d307
--- /dev/null
+++ b/src/css/components/SearchInput.css
@@ -0,0 +1,22 @@
+.search__input__container {
+  position: relative;
+}
+
+.search__input {
+  height: 42px;
+  width: 288px;
+  padding: 16px 16px 16px 44px;
+}
+
+@media screen and (min-width: 744px) {
+  .search__input {
+    width: 242px;
+  }
+}
+
+.search__icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 16px;
+}
diff --git a/src/css/pages/ItemListPage.css b/src/css/pages/ItemListPage.css
new file mode 100644
index 00000000..9dbba046
--- /dev/null
+++ b/src/css/pages/ItemListPage.css
@@ -0,0 +1,142 @@
+.items__container {
+  padding: 17px 16px 35px 16px;
+}
+
+@media screen and (min-width: 744px) {
+  .items__container {
+    padding: 24px 24px 72px 24px;
+  }
+}
+
+.items__container__inner {
+  max-width: 344px;
+  gap: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 auto;
+}
+
+@media screen and (min-width: 744px) {
+  .items__container__inner {
+    max-width: 696px;
+    gap: 40px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .items__container__inner {
+    max-width: 1200px;
+    gap: 40px;
+  }
+}
+
+.items__container__title {
+  font-size: var(--font-size-lg);
+  font-weight: 700;
+  color: var(--color-secondary-900);
+  flex-grow: 1;
+}
+
+.items__container__registerBtn {
+  order: 1;
+}
+
+.items__container__search__input {
+  order: 2;
+}
+
+@media screen and (min-width: 744px) {
+  .items__container__search__input {
+    order: 1;
+  }
+}
+
+.items__container__dropdown {
+  order: 3;
+}
+
+.items__container__best__list {
+  display: grid;
+  gap: 24px;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+}
+
+@media screen and (min-width: 744px) {
+  .items__container__best__list {
+    gap: 10px;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 1fr;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .items__container__best__list {
+    gap: 10px;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: 1fr;
+  }
+}
+
+.items__container__best__header {
+  min-width: 344px;
+  margin-bottom: 16px;
+}
+
+@media screen and (min-width: 744px) {
+  .items__container__best__header {
+    min-width: 696px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .items__container__best__header {
+    min-width: 1152px;
+  }
+}
+
+.items__container__all__header {
+  min-width: 344px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+@media screen and (min-width: 744px) {
+  .items__container__all__header {
+    min-width: 696px;
+    gap: 12px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .items__container__all__header {
+    min-width: 1152px;
+  }
+}
+
+.items__container__all__list {
+  display: grid;
+  gap: 24px;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+}
+
+@media screen and (min-width: 744px) {
+  .items__container__all__list {
+    gap: 16px;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .items__container__all__list {
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+  }
+}
diff --git a/src/css/pages/ItemRegisterPage.css b/src/css/pages/ItemRegisterPage.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/hooks/usePagination.js b/src/hooks/usePagination.js
new file mode 100644
index 00000000..bb35238b
--- /dev/null
+++ b/src/hooks/usePagination.js
@@ -0,0 +1,27 @@
+import { useState } from "react";
+
+const usePagination = () => {
+  const [paginationCurrentPage, setPaginationCurrentPage] = useState(1);
+
+  const onClickNextPage = () => {
+    setPaginationCurrentPage((prev) => prev + 1);
+  };
+
+  const onClickPrevPage = () => {
+    setPaginationCurrentPage((prev) => prev - 1);
+  };
+
+  const onClickPage = (page) => {
+    setPaginationCurrentPage(page);
+  };
+
+  return {
+    paginationCurrentPage,
+    setPaginationCurrentPage,
+    onClickNextPage,
+    onClickPrevPage,
+    onClickPage,
+  };
+};
+
+export default usePagination;
diff --git a/src/img/arrow_down.svg b/src/img/arrow_down.svg
new file mode 100644
index 00000000..8308690f
--- /dev/null
+++ b/src/img/arrow_down.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.7151 15.4653C12.3975 15.7654 11.9008 15.7654 11.5832 15.4653L5.8047 10.006C5.26275 9.49404 5.6251 8.58286 6.37066 8.58286L17.9276 8.58286C18.6732 8.58286 19.0355 9.49404 18.4936 10.006L12.7151 15.4653Z" fill="#1F2937"/>
+</svg>
diff --git a/src/img/arrow_left_active.svg b/src/img/arrow_left_active.svg
new file mode 100644
index 00000000..4b110c20
--- /dev/null
+++ b/src/img/arrow_left_active.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/src/img/arrow_left_inactive.svg b/src/img/arrow_left_inactive.svg
new file mode 100644
index 00000000..1daeca5c
--- /dev/null
+++ b/src/img/arrow_left_inactive.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="#9CA3AF" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/img/arrow_right_active.svg b/src/img/arrow_right_active.svg
new file mode 100644
index 00000000..0ad718ef
--- /dev/null
+++ b/src/img/arrow_right_active.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/src/img/arrow_right_inactive.svg b/src/img/arrow_right_inactive.svg
new file mode 100644
index 00000000..764302b6
--- /dev/null
+++ b/src/img/arrow_right_inactive.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="#9CA3AF" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/img/img_default.svg b/src/img/img_default.svg
new file mode 100644
index 00000000..19452bde
--- /dev/null
+++ b/src/img/img_default.svg
@@ -0,0 +1,16 @@
+<svg width="282" height="282" viewBox="0 0 282 282" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="282" height="282" fill="#F9FAFB"/>
+<path d="M160.703 72.9615L176.646 72.9746L173.443 91.041C178.958 95.1036 181.645 101.976 180.348 108.703L176.067 130.901L161.187 130.889L157.596 108.326C156.549 101.751 159.159 95.1278 164.408 91.0336L160.703 72.9615Z" fill="#E5E7EB"/>
+<rect x="83.0645" y="130.825" width="115.855" height="78.1222" rx="6.37732" transform="rotate(0.0471621 83.0645 130.825)" fill="#E5E7EB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M142.31 130.874L168.906 153.335L165.08 153.799L165.455 157.421L161.725 157.772L162.004 161.507L158.274 161.858L158.553 165.594L154.823 165.944L155.102 169.68L109.121 130.846L142.31 130.874Z" fill="#F3F4F6"/>
+<path d="M137.812 163.901C138.177 165.465 136.904 167.098 135.528 167.419C134.152 167.74 132.345 166.826 131.98 165.262C131.615 163.699 132.667 161.616 134.043 161.294C135.878 160.866 137.447 162.338 137.812 163.901Z" fill="#F3F4F6"/>
+<path d="M144.832 163.961C144.303 165.477 145.394 167.237 146.728 167.702C148.062 168.168 149.957 167.451 150.486 165.935C151.015 164.419 150.191 162.236 148.857 161.77C147.078 161.149 145.361 162.445 144.832 163.961Z" fill="#F3F4F6"/>
+<path d="M151.422 172.864C151.177 177.445 146.613 178.909 140.51 178.583C134.408 178.257 130.126 176.321 130.371 171.74C130.656 166.411 134.238 162.336 141.358 162.716C148.478 163.096 151.728 167.133 151.422 172.864Z" fill="#F3F4F6"/>
+<path d="M139.506 170.851C139.435 172.18 138.534 173.594 137.385 173.532C136.236 173.471 134.438 172.289 134.544 170.304C134.643 168.439 136.684 167.883 138.738 168.334C139.997 168.611 139.576 169.522 139.506 170.851Z" fill="#E5E7EB"/>
+<path d="M137.367 170.538C137.353 170.798 137.42 171.014 137.813 171.034C138.206 171.055 138.296 170.849 138.31 170.588C138.324 170.328 138.178 170.109 137.864 170.092C137.549 170.075 137.381 170.278 137.367 170.538Z" fill="white"/>
+<path d="M142.434 171.007C142.363 172.336 143.108 173.838 144.257 173.899C145.406 173.961 147.32 172.977 147.426 170.992C147.526 169.127 145.556 168.357 143.465 168.586C142.184 168.727 142.505 169.678 142.434 171.007Z" fill="#E5E7EB"/>
+<path d="M144.594 170.924C144.58 171.184 144.49 171.391 144.097 171.37C143.705 171.349 143.637 171.134 143.651 170.874C143.665 170.613 143.833 170.411 144.148 170.428C144.462 170.444 144.608 170.664 144.594 170.924Z" fill="white"/>
+<rect x="89.983" y="119.139" width="57.9273" height="11.6918" rx="1.06289" transform="rotate(0.0471621 89.983 119.139)" fill="#E5E7EB"/>
+<rect x="86.2519" y="110.64" width="52.0815" height="8.5031" rx="1.06289" transform="rotate(0.0471621 86.2519 110.64)" fill="#E5E7EB"/>
+<rect x="93.1606" y="102.175" width="52.0815" height="8.5031" rx="1.06289" transform="rotate(0.0471621 93.1606 102.175)" fill="#E5E7EB"/>
+</svg>
diff --git a/src/img/logo.svg b/src/img/logo.svg
new file mode 100644
index 00000000..3799efba
--- /dev/null
+++ b/src/img/logo.svg
@@ -0,0 +1,15 @@
+<svg width="396" height="132" viewBox="0 0 396 132" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="12.9844" width="103.529" height="103.88" rx="28.9317" fill="#3692FF"/>
+<path d="M49.9906 41.9061C51.283 46.372 47.866 51.2931 43.9492 52.4342C40.0324 53.5753 34.6813 51.2086 33.389 46.7427C32.0967 42.2767 34.8096 36.0888 38.7264 34.9477C43.9492 33.4262 48.6983 37.4401 49.9906 41.9061Z" fill="#222327"/>
+<path d="M52.1441 41.9061C50.8518 46.372 54.2688 51.2931 58.1856 52.4342C62.1024 53.5753 67.4535 51.2086 68.7458 46.7427C70.0381 42.2767 67.3252 36.0888 63.4084 34.9477C58.1856 33.4262 53.4364 37.4401 52.1441 41.9061Z" fill="#222327"/>
+<path d="M76.3971 74.5322C76.3971 85.8915 65.2589 90.1139 50.0657 90.1139C34.8725 90.1139 23.9863 85.8915 23.9863 74.5322C23.9863 61.319 34.8725 49.6016 50.0657 49.6016C65.2589 49.6016 76.3971 60.3217 76.3971 74.5322Z" fill="#F3D6DD"/>
+<path d="M45.0365 72.2896C45.0365 76.01 42.6485 80.0912 39.3115 80.0912C35.9745 80.0912 30.584 77.0599 30.584 71.5025C30.584 66.282 36.4074 64.4253 42.4249 65.3786C46.1131 65.9629 45.0365 68.5693 45.0365 72.2896Z" fill="#222327"/>
+<path d="M42.2455 71.9138C42.2455 72.4718 42.0777 72.9242 41.2385 72.9242C40.3993 72.9242 40.2314 72.4718 40.2314 71.9138C40.2314 71.3557 40.5671 70.9033 41.2385 70.9033C41.9098 70.9033 42.2455 71.3557 42.2455 71.9138Z" fill="white"/>
+<path d="M55.1872 72.2896C55.1872 76.01 57.5751 80.0912 60.9121 80.0912C64.2491 80.0912 69.6396 77.0599 69.6396 71.5025C69.6396 66.282 63.8162 64.4253 57.7987 65.3786C54.1105 65.9629 55.1872 68.5693 55.1872 72.2896Z" fill="#222327"/>
+<path d="M57.982 71.9138C57.982 72.4718 58.1499 72.9242 58.9891 72.9242C59.8283 72.9242 59.9961 72.4718 59.9961 71.9138C59.9961 71.3557 59.6604 70.9033 58.9891 70.9033C58.3177 70.9033 57.982 71.3557 57.982 71.9138Z" fill="white"/>
+<path d="M46.2655 77.6708C46.0623 77.3742 45.6572 77.2985 45.3606 77.5018C45.064 77.705 44.9883 78.1101 45.1915 78.4067L46.2655 77.6708ZM49.999 76.8701L50.6148 76.6591C50.5247 76.396 50.2772 76.2192 49.999 76.2192C49.7208 76.2192 49.4734 76.396 49.3832 76.6591L49.999 76.8701ZM54.8065 78.4067C55.0097 78.1101 54.934 77.705 54.6375 77.5018C54.3409 77.2985 53.9357 77.3742 53.7325 77.6708L54.8065 78.4067ZM45.1915 78.4067C45.3714 78.6691 45.698 79.021 46.136 79.3116C46.5781 79.6048 47.1686 79.8583 47.8638 79.8583V78.5564C47.4913 78.5564 47.1477 78.4204 46.8557 78.2267C46.5598 78.0303 46.3526 77.7979 46.2655 77.6708L45.1915 78.4067ZM47.8638 79.8583C48.7192 79.8583 49.3555 79.2481 49.7515 78.7227C50.1696 78.1679 50.4651 77.5182 50.6148 77.0811L49.3832 76.6591C49.266 77.0012 49.0277 77.52 48.7118 77.9391C48.3738 78.3876 48.0759 78.5564 47.8638 78.5564V79.8583ZM49.3832 77.0811C49.5329 77.5182 49.8284 78.1679 50.2465 78.7227C50.6425 79.2481 51.2788 79.8583 52.1343 79.8583V78.5564C51.9221 78.5564 51.6242 78.3876 51.2862 77.9391C50.9703 77.52 50.732 77.0012 50.6148 76.6591L49.3832 77.0811ZM52.1343 79.8583C52.8294 79.8583 53.42 79.6048 53.862 79.3116C54.3 79.021 54.6267 78.6691 54.8065 78.4067L53.7325 77.6708C53.6455 77.7979 53.4383 78.0303 53.1423 78.2267C52.8504 78.4204 52.5068 78.5564 52.1343 78.5564V79.8583Z" fill="#222327"/>
+<path d="M53.5531 76.2691C53.5531 76.8106 51.1149 77.4998 50.2943 77.7165C50.1189 77.7628 49.9381 77.7628 49.7627 77.7165C48.9421 77.4998 46.5039 76.8106 46.5039 76.2691C46.5039 75.6181 48.4527 74.9219 50.0285 74.9219C51.6043 74.9219 53.5531 75.6181 53.5531 76.2691Z" fill="#222327"/>
+<path d="M49.6071 58.9512C39.8126 58.9512 36.2132 55.5103 35.6309 53.4976L40.2896 48.4336L50.3835 46.6807L64.3597 53.4976C63.5185 55.1207 59.4123 58.9512 49.6071 58.9512Z" fill="#222327"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.9631 95.7631C71.2031 95.7631 86.0411 90.0587 86.0411 74.7124C86.0411 55.5141 71.2031 41.0312 50.9631 41.0312C30.723 41.0312 16.2207 56.8614 16.2207 74.7124C16.2207 90.0587 30.723 95.7631 50.9631 95.7631ZM50.1675 89.8696C65.0556 89.8696 75.9701 85.6922 75.9701 74.454C75.9701 60.395 65.0556 49.7891 50.1675 49.7891C35.2794 49.7891 24.6118 61.3816 24.6118 74.454C24.6118 85.6922 35.2794 89.8696 50.1675 89.8696Z" fill="white"/>
+<path d="M183.486 54.3351H191.448V63.6233H183.486V82.4651H171.544V70.7885C163.052 72.5135 154.626 73.4423 142.353 73.4423H128.42V64.3531H133.728V45.5113H129.747V36.5548H166.369V45.5113H162.389V63.358C165.64 62.9599 168.691 62.4955 171.544 61.9647V35.8914H183.486V54.3351ZM134.988 98.2551V78.5508H147.196V89.0332H184.813V98.2551H134.988ZM145.67 64.3531C147.329 64.2868 148.921 64.2868 150.447 64.2204V45.5113H145.67V64.3531ZM257.792 58.9792V68.2674H249.831V98.2551H237.889V87.839C229.397 90.2938 220.971 91.687 208.697 91.687H196.755V37.8817H230.723V46.8382H208.697V82.5978C220.838 82.5978 229.463 81.4036 237.889 79.0152V35.8914H249.831V58.9792H257.792ZM324.136 58.9792V68.2674H316.175V98.2551H304.233V35.8914H316.175V58.9792H324.136ZM263.1 91.687V37.8817H297.798V91.687H263.1ZM275.042 82.5978H285.988V46.9709H275.042V82.5978ZM374.89 35.8914H386.5V71.85H374.89V35.8914ZM325.463 64.7512C333.226 63.1589 339.064 60.7042 342.315 57.586L329.444 58.3821V49.7573H345.101V45.5113H330.771V36.5548H356.711V48.4968H360.493V36.2231H371.772V71.85H360.493V57.785H354.987C351.47 64.6185 342.646 70.2578 329.245 73.6413L325.463 64.7512ZM332.695 88.7679C349.082 88.1708 353.859 84.7872 353.859 79.0152V73.9731H365.801V80.0767C365.801 81.669 365.602 83.1949 365.204 84.5882C372.9 85.1189 380.529 86.1804 386.5 87.5737L383.316 98.2551C376.482 95.8667 366.929 93.5447 359.233 92.2841C353.726 95.9994 344.902 97.7907 333.955 98.2551L332.695 88.7679Z" fill="#3692FF"/>
+</svg>
diff --git a/src/img/logo_text.jpg b/src/img/logo_text.jpg
new file mode 100644
index 00000000..38d9619f
Binary files /dev/null and b/src/img/logo_text.jpg differ
diff --git a/src/img/search.svg b/src/img/search.svg
new file mode 100644
index 00000000..52241e6d
--- /dev/null
+++ b/src/img/search.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/src/img/sort.svg b/src/img/sort.svg
new file mode 100644
index 00000000..657b44f9
--- /dev/null
+++ b/src/img/sort.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 6.5V17.5M15 17.5L11.5 14M15 17.5L18.5 14" stroke="#1F2937" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.90002 15.5L9.50002 15.5" stroke="#1F2937" stroke-width="1.8" stroke-linecap="round"/>
+<path d="M5 7.5H10" stroke="#1F2937" stroke-width="1.8" stroke-linecap="round"/>
+<path d="M6.30005 11.5L9.50005 11.5" stroke="#1F2937" stroke-width="1.8" stroke-linecap="round"/>
+</svg>
diff --git a/src/img/sort_button.svg b/src/img/sort_button.svg
new file mode 100644
index 00000000..41751e7b
--- /dev/null
+++ b/src/img/sort_button.svg
@@ -0,0 +1,8 @@
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="41" height="41" rx="11.5" fill="white"/>
+<rect x="0.5" y="0.5" width="41" height="41" rx="11.5" stroke="#E5E7EB"/>
+<path d="M24 15.5V26.5M24 26.5L20.5 23M24 26.5L27.5 23" stroke="#1F2937" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.9 24.5L18.5 24.5" stroke="#1F2937" stroke-width="1.8" stroke-linecap="round"/>
+<path d="M14 16.5H19" stroke="#1F2937" stroke-width="1.8" stroke-linecap="round"/>
+<path d="M15.3 20.5L18.5 20.5" stroke="#1F2937" stroke-width="1.8" stroke-linecap="round"/>
+</svg>
diff --git a/src/img/user.svg b/src/img/user.svg
new file mode 100644
index 00000000..0480454d
--- /dev/null
+++ b/src/img/user.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_28783_14685)">
+<circle cx="20" cy="20" r="20" fill="#D1D5DB"/>
+<path d="M19.3739 8.72943C19.8843 10.4932 18.5348 12.4366 16.988 12.8872C15.4412 13.3379 13.3279 12.4032 12.8175 10.6395C12.3071 8.8758 13.3785 6.43205 14.9254 5.98141C16.988 5.38051 18.8636 6.96571 19.3739 8.72943Z" fill="white"/>
+<path d="M20.2247 8.72943C19.7143 10.4932 21.0638 12.4366 22.6106 12.8872C24.1575 13.3379 26.2708 12.4032 26.7811 10.6395C27.2915 8.8758 26.2201 6.43205 24.6732 5.98141C22.6106 5.38051 20.7351 6.96571 20.2247 8.72943Z" fill="white"/>
+<path d="M29.8016 21.6148C29.8016 26.1009 25.4029 27.7684 19.4027 27.7684C13.4025 27.7684 9.10327 26.1009 9.10327 21.6148C9.10327 16.3965 13.4025 11.769 19.4027 11.769C25.4029 11.769 29.8016 16.0027 29.8016 21.6148Z" fill="white"/>
+<path d="M17.4166 20.7286C17.4166 22.1979 16.4736 23.8097 15.1557 23.8097C13.8379 23.8097 11.709 22.6125 11.709 20.4178C11.709 18.3561 14.0088 17.6228 16.3853 17.9993C17.8418 18.2301 17.4166 19.2594 17.4166 20.7286Z" fill="#D1D5DB"/>
+<path d="M16.3157 20.5797C16.3157 20.8001 16.2494 20.9788 15.918 20.9788C15.5865 20.9788 15.5203 20.8001 15.5203 20.5797C15.5203 20.3593 15.6528 20.1807 15.918 20.1807C16.1831 20.1807 16.3157 20.3593 16.3157 20.5797Z" fill="white"/>
+<path d="M21.4257 20.7286C21.4257 22.1979 22.3687 23.8097 23.6866 23.8097C25.0044 23.8097 27.1333 22.6125 27.1333 20.4178C27.1333 18.3561 24.8335 17.6228 22.457 17.9993C21.0005 18.2301 21.4257 19.2594 21.4257 20.7286Z" fill="#D1D5DB"/>
+<path d="M22.5283 20.5797C22.5283 20.8001 22.5946 20.9788 22.926 20.9788C23.2574 20.9788 23.3237 20.8001 23.3237 20.5797C23.3237 20.3593 23.1912 20.1807 22.926 20.1807C22.6609 20.1807 22.5283 20.3593 22.5283 20.5797Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7575 30.0002C27.7508 30.0002 33.6107 27.7474 33.6107 21.6868C33.6107 14.1049 27.7508 8.38525 19.7575 8.38525C11.7642 8.38525 6.03687 14.637 6.03687 21.6868C6.03687 27.7474 11.7642 30.0002 19.7575 30.0002ZM19.4429 27.6726C25.3226 27.6726 29.633 26.0229 29.633 21.5846C29.633 16.0324 25.3226 11.8438 19.4429 11.8438C13.5632 11.8438 9.35034 16.422 9.35034 21.5846C9.35034 26.0229 13.5632 27.6726 19.4429 27.6726Z" fill="white"/>
+<mask id="mask0_28783_14685" 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_28783_14685)">
+<ellipse cx="19.5833" cy="37.5" rx="11.25" ry="12.5" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_28783_14685">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/index.js b/src/index.js
index d563c0fb..cf10cb97 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,15 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import Main from "./Main";
+import reportWebVitals from "./reportWebVitals";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<Main />);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
diff --git a/src/pages/ItemRegisterPage.js b/src/pages/ItemRegisterPage.js
new file mode 100644
index 00000000..0218c7f2
--- /dev/null
+++ b/src/pages/ItemRegisterPage.js
@@ -0,0 +1,6 @@
+import "../css/pages/ItemRegisterPage.css";
+function ItemRegisterPage() {
+  return <div>상품 등록 페이지</div>;
+}
+
+export default ItemRegisterPage;
diff --git a/src/pages/ItemsPage.js b/src/pages/ItemsPage.js
new file mode 100644
index 00000000..ca6a9956
--- /dev/null
+++ b/src/pages/ItemsPage.js
@@ -0,0 +1,239 @@
+import "../css/pages/ItemListPage.css";
+import { useNavigate } from "react-router-dom";
+import { useState, useEffect } from "react";
+import { getFavoriteItems, getAllItems } from "../api/Items.js";
+import Card from "../components/Card";
+import SearchInput from "../components/SearchInput.js";
+import Button from "../components/Button.js";
+import Dropdown from "../components/Dropdown.js";
+import Pagination from "../components/Pagination.js";
+import usePagination from "../hooks/usePagination.js";
+
+function ItemListPage() {
+  const navigate = useNavigate();
+
+  const [orderBy, setOrderBy] = useState({
+    name: "최신순",
+    value: "recent",
+  });
+
+  const [searchValue, setSearchValue] = useState("");
+  const [keyword, setKeyword] = useState("");
+
+  const [totalCount, setTotalCount] = useState(0);
+
+  /* usePagination: 페이지네이션 훅 */
+  const {
+    onClickNextPage,
+    onClickPrevPage,
+    onClickPage,
+    paginationCurrentPage,
+    setPaginationCurrentPage,
+  } = usePagination();
+
+  const [bestItems, setBestItems] = useState([
+    {
+      favoriteCount: 0,
+      images: [],
+      price: 0,
+      description: "",
+      name: "",
+      id: 0,
+    },
+  ]);
+  const [allItems, setAllItems] = useState([
+    {
+      favoriteCount: 0,
+      images: [],
+      price: 0,
+      description: "",
+      name: "",
+      id: 0,
+    },
+  ]);
+
+  const [showDropdown, setShowDropdown] = useState(false);
+  const dropdownList = [
+    { name: "최신순", value: "recent" },
+    { name: "좋아요순", value: "favorite" },
+  ];
+
+  const fetchFavoriteItems = async (queryParams) => {
+    try {
+      const { list } = await getFavoriteItems(queryParams);
+      setBestItems(list);
+    } catch (error) {
+    } finally {
+    }
+  };
+
+  const fetchAllItems = async (queryParams) => {
+    try {
+      const { list, totalCount } = await getAllItems(queryParams);
+      setAllItems(list);
+      setTotalCount(totalCount);
+    } catch (error) {
+    } finally {
+    }
+  };
+
+  const onClickDropdown = () => {
+    setShowDropdown(!showDropdown);
+  };
+
+  const onClickDropdownItem = (order) => {
+    if (order.value !== orderBy.value) {
+      setOrderBy(order);
+      setPaginationCurrentPage(1);
+    }
+  };
+
+  const onKeywordChange = (e) => {
+    setSearchValue(e.target.value);
+  };
+
+  const onKeyDown = (e) => {
+    if (e.key === "Enter") {
+      onClickSearch();
+    }
+  };
+
+  const onClickSearch = async () => {
+    setPaginationCurrentPage(1);
+    setKeyword(searchValue);
+  };
+
+  const calcBreakPoint = (width) => {
+    if (width >= 1200) return "pc";
+    if (width >= 744) return "tablet";
+    return "mobile";
+  };
+
+  const [deviceType, setDeviceType] = useState(
+    calcBreakPoint(window.innerWidth)
+  );
+
+  const devicePageSize = {
+    mobile: {
+      best: 1,
+      all: 4,
+    },
+    tablet: {
+      best: 2,
+      all: 6,
+    },
+    pc: {
+      best: 4,
+      all: 10,
+    },
+  };
+
+  const bestPageSize = devicePageSize[deviceType]["best"];
+
+  const allPageSize = devicePageSize[deviceType]["all"];
+
+  const handleOnClickRegister = () => {
+    navigate("addItem");
+  };
+
+  useEffect(() => {
+    fetchFavoriteItems({
+      page: 1,
+      pageSize: bestPageSize,
+      orderBy: "favorite",
+    });
+  }, [deviceType, bestPageSize]);
+
+  useEffect(() => {
+    fetchAllItems({
+      page: paginationCurrentPage,
+      pageSize: allPageSize,
+      orderBy: orderBy.value,
+      keyword,
+    });
+  }, [deviceType, orderBy.value, paginationCurrentPage, allPageSize, keyword]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const newDeviceType = calcBreakPoint(window.innerWidth);
+      setDeviceType(newDeviceType);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return (
+    <div>
+      {/* 메인 영역*/}
+      <main className="items__container">
+        <div className="items__container__inner">
+          {/* 베스트 상품 영역 */}
+          <section>
+            <div className="items__container__best__header">
+              <div className="items__container__title">베스트 상품</div>
+            </div>
+            <ul className="items__container__best__list">
+              {bestItems?.map((item, index) => (
+                <li key={index}>
+                  <Card data={item} />
+                </li>
+              ))}
+            </ul>
+          </section>
+
+          {/* 전체 상품 영역 */}
+          <section>
+            <div className="items__container__all__header">
+              <div className="items__container__title">전체 상품</div>
+              <SearchInput
+                value={searchValue}
+                onInput={onKeywordChange}
+                onKeyDown={onKeyDown}
+                onClick={onClickSearch}
+                className="items__container__search__input"
+              />
+              <Button
+                className="items__container__registerBtn"
+                type="register"
+                onClick={handleOnClickRegister}
+                to="addItem"
+              >
+                상품 등록하기
+              </Button>
+              <Dropdown
+                className="items__container__dropdown"
+                onClickDropdown={onClickDropdown}
+                onClickDropdownItem={onClickDropdownItem}
+                dropdownList={dropdownList}
+                showDropdown={showDropdown}
+                value={orderBy}
+              />
+            </div>
+            <ul className="items__container__all__list">
+              {allItems?.map((item, index) => (
+                <li key={index}>
+                  <Card data={item} />
+                </li>
+              ))}
+            </ul>
+
+            <Pagination
+              totalCount={totalCount}
+              pageSize={allPageSize}
+              currentPage={paginationCurrentPage}
+              onClickNext={onClickNextPage}
+              onClickPrev={onClickPrevPage}
+              onClickPage={onClickPage}
+            />
+          </section>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default ItemListPage;