diff --git a/package-lock.json b/package-lock.json
index 6cffc66d..0b3681f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,11 @@
       "name": "sprintmisson5",
       "version": "0.0.0",
       "dependencies": {
+        "lodash": "^4.17.21",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
-        "react-icons": "^5.5.0"
+        "react-icons": "^5.5.0",
+        "react-router-dom": "^7.6.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.25.0",
@@ -2719,6 +2721,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3179,6 +3187,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/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3329,6 +3384,12 @@
         "node": ">= 18"
       }
     },
+    "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 0fda482a..a4ec8f44 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lodash": "^4.17.21",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-icons": "^5.5.0"
+    "react-icons": "^5.5.0",
+    "react-router-dom": "^7.6.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 00000000..9dfa9354
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,3 @@
+:root {
+  background-color: var(--content-bg);
+}
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 02c611c9..e80336e4 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,106 +1,18 @@
-import Nav from "./components/Nav";
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Items from './Pages/Items/Items.jsx';
+import AddItem from './Pages/AddItem/AddItem.jsx';
 
-import styles from "./css/App.module.css";
-import Header from "./components/Header";
-import DropDown from "./components/DropDown";
-import ProductList from "./components/ProductList";
-import Button from "./components/Button";
-import SearchItem from "./components/SearchItem";
-import Pagination from "./components/Pagination";
-
-import { getProducts } from "./api/ProductApi";
-import { useScreenSize } from "./utils/useScreenSize";
-import { useState, useEffect } from "react";
+import './App.css'
 
 function App() {
-  const [search, setSearch] = useState("");
-  const [order, setOrder] = useState("recent");
-  const [currPage, setCurrPage] = useState(1);
-  const [totalProducts, setTotalProducts] = useState(0);
-  const [bestProduct, setBestProduct] = useState(4);
-  const [allProduct, setAllProduct] = useState(10);
-  const [isBestProduct, setIsBestProduct] = useState(true);
-
-  const screenSize = useScreenSize();
-
-  const handleSearch = (e) => {
-    setSearch(e.target.value);
-  };
-
-  const handleOrder = (selectedOrder) => {
-    setOrder(selectedOrder);
-  };
-
-  const handlePage = (newPage) => {
-    setCurrPage(newPage);
-  };
-
-  const getTotalProducts = async () => {
-    try {
-      const { totalCount } = await getProducts({
-        orderBy: order,
-        keyword: search,
-      });
-      setTotalProducts(totalCount);
-    } catch (error) {
-      console.error("전체 상품 수를 불러오는 중 오류:", error);
-    }
-  };
-
-  useEffect(() => {
-    let newPageSize;
-    if (screenSize === "lg") {
-      setBestProduct(4);
-      newPageSize = 10;
-    } else if (screenSize === "md") {
-      setBestProduct(2);
-      newPageSize = 6;
-    } else {
-      setBestProduct(1);
-      newPageSize = 4;
-    }
-    if (newPageSize !== allProduct) {
-      const firstItemOfCurrentPage = (currPage - 1) * allProduct;
-      const newPage = Math.floor(firstItemOfCurrentPage / newPageSize) + 1;
-      setCurrPage(newPage);
-      setAllProduct(newPageSize);
-    }
-  }, [screenSize, currPage, allProduct]);
-
-  useEffect(() => {
-    getTotalProducts();
-  }, []);
   return (
-    <>
-      <Nav />
-      <div className={styles.content}>
-        <Header text={"베스트 상품"} />
-        <ProductList
-          orderBy={"favorite"}
-          pageSize={bestProduct}
-          isBestProduct={isBestProduct}
-        />
-        <div className={styles.headers}>
-          <Header text={"전체 상품"} />
-          <SearchItem value={search} onChange={handleSearch} />
-          <Button href={"#"} buttonText={"상품등록하기"} />
-          <DropDown onChangeOrder={handleOrder} />
-        </div>
-        <ProductList
-          orderBy={order}
-          pageSize={allProduct}
-          keyword={search}
-          page={currPage}
-        />
-        <Pagination
-          currPage={currPage}
-          totalProducts={totalProducts}
-          pageSize={allProduct}
-          handlePage={handlePage}
-        />
-      </div>
-    </>
+    <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Items />} />
+          <Route path='additem' element={<AddItem />}/>
+        </Routes>
+    </BrowserRouter>
   );
 }
 
-export default App;
+export default App
\ No newline at end of file
diff --git a/src/Pages/AddItem/AddItem.jsx b/src/Pages/AddItem/AddItem.jsx
new file mode 100644
index 00000000..4e83bff8
--- /dev/null
+++ b/src/Pages/AddItem/AddItem.jsx
@@ -0,0 +1,144 @@
+import DeleteImg from '../../assets/input/delete.svg'
+
+import { useState } from "react";
+
+import Nav from "../../components/Nav/Nav";
+import Content from "../../components/Content/Content";
+import Header from '../../components/Header/Header';
+import Button from '../../components/Button/Button';
+import FormImg from "../../components/Form/FormImg";
+import FormInput from "../../components/Form/FormInput";
+
+import styles from './AddItem.module.css';
+
+const INITIAL_VALUES = {
+  name: '',
+  description: '',
+  price: '',
+  tags:[],
+  tagInput:'',
+  images: null,
+};
+
+
+function AddItem() {
+  const [values, setValues] = useState(INITIAL_VALUES)
+  const [isComposing, setIsComposing] = useState(false);
+
+ const handleChange = (name, value) => {
+    setValues((prevValues) => ({
+      ...prevValues,
+      [name]: value,
+    }));
+  };
+
+
+  const handleTagInputKeyDown = (e) => {
+    if (e.key === 'Enter' && !isComposing) {
+      e.preventDefault(); 
+
+      const newTag = values.tagInput.trim();
+
+      if (newTag !== '') {
+
+        if (!values.tags.includes(`#${newTag}`)) {
+          setValues((prev) => ({
+            ...prev,
+            tags: [...prev.tags, `#${newTag}`],
+            tagInput:'',
+          })) 
+        } else {
+          setValues((prev) => ({
+            ...prev,
+            tagInput:'',
+          }))
+        }
+      }}
+  };
+
+  
+  const handleRemoveTag = (tagToRemove) => {
+    setValues((prevValues) => ({
+      ...prevValues,
+      tags: prevValues.tags.filter((tag) => tag !== tagToRemove),
+    }));
+  };
+
+   const handleCompositionStart = () => {
+    setIsComposing(true);
+  };
+
+  
+  const handleCompositionEnd = () => {
+    setIsComposing(false);
+  };
+
+  const isSubmitDisabled = !values.name || !values.description || values.price <= 0 || !values.images;
+
+  return(
+    <>
+    <Nav />
+    <Content>
+      <form className={styles.form}>
+        <div className={styles.headers}>
+          <Header type={'h1'} text={'상품 등록하기'}/>
+          <Button type={'submit'} href={'#'} buttonText={'등록'} disabled={isSubmitDisabled}/>
+        </div>
+        <FormImg label={'상품 이미지'} name="images" value={values.images}
+        initialPreview={''} onChange={handleChange}/>
+        <FormInput  
+          label={'상품명'}
+          name="name" 
+          type={'text'}
+          placeholder={'상품명을 입력해주세요'}
+          value={values.name}            
+          onChange={handleChange} />
+        <FormInput
+          label={'상품 소개'}
+          name="description" 
+          type={'textarea'}
+          placeholder={'상품 소개를 입력해주세요'}
+          value={values.description}
+          onChange={handleChange} />
+        <FormInput
+          label={'판매가격'}
+          name="price" 
+          type={'number'}
+          placeholder={'판매 가격을 입력해주세요'}
+          value={values.price}
+          onChange={handleChange} />
+        <FormInput
+            label={'태그'}
+            name="tagInput" 
+            type={'text'}
+            placeholder={'태그를 입력해주세요'}
+            value={values.tagInput}
+            onChange={handleChange}
+            onKeyDown={handleTagInputKeyDown} 
+            onCompositionStart={handleCompositionStart}
+            onCompositionEnd={handleCompositionEnd}
+
+          />
+          {values.tags.length > 0 && (
+            <div className={styles.taglistContainer}>
+              {values.tags.map((tag, index) => (
+                <div key={index} className={styles.tagItem}>
+                  <span>{tag}</span>
+                  <button
+                    type="button"
+                    onClick={() => handleRemoveTag(tag)}
+                    className={styles.removeTagButton}
+                  >
+                    <img src={DeleteImg} alt="선택해제" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </form>
+      </Content>
+    </>
+  );
+}
+
+export default AddItem
\ No newline at end of file
diff --git a/src/Pages/AddItem/AddItem.module.css b/src/Pages/AddItem/AddItem.module.css
new file mode 100644
index 00000000..85fcdf1b
--- /dev/null
+++ b/src/Pages/AddItem/AddItem.module.css
@@ -0,0 +1,33 @@
+.form {
+  margin-bottom: 100px;
+}
+
+.headers {
+  margin: 16px 0 26px 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.taglistContainer {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.tagItem {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  background-color: var(--cool-gray-100);
+  padding: 6px 10px 6px 16px;
+  border-radius: 26px;
+}
+
+.removeTagButton {
+  display: flex;
+  border: 0;
+  background-color: inherit;
+}
\ No newline at end of file
diff --git a/src/Pages/Items/Items.jsx b/src/Pages/Items/Items.jsx
new file mode 100644
index 00000000..86c2f93c
--- /dev/null
+++ b/src/Pages/Items/Items.jsx
@@ -0,0 +1,138 @@
+import Nav from "../../components/Nav/Nav.jsx";
+
+import styles from "./Items.module.css";
+import Content from "../../components/Content/Content.jsx";
+import Header from "../../components/Header/Header.jsx";
+import DropDown from "../../components/DropDown/DropDown.jsx";
+import ProductList from "../../components/ProductLIst/ProductList.jsx";
+import Button from "../../components/Button/Button.jsx";
+import SearchItem from "../../components/SearchItem/SearchItem.jsx";
+import Pagination from "../../components/Pagination/Pagination.jsx";
+
+import { getProducts } from "../../api/ProductApi.jsx";
+import { useScreenSize } from "../../utils/useScreenSize.jsx";
+import { useState, useEffect, useCallback } from "react";
+import { debounce } from "lodash";
+
+const PAGE_SIZES = {
+  lg: { best: 4, all: 10 },
+  md: { best: 2, all: 6 },
+  sm: { best: 1, all: 4 },
+};
+
+const MAX_SEARCH_LENGTH = 100;
+const DEBOUNCE_DELAY = 300;
+
+function Items() {
+  const [search, setSearch] = useState("");
+  const [order, setOrder] = useState("recent");
+  const [currPage, setCurrPage] = useState(1);
+  const [totalProducts, setTotalProducts] = useState(0);
+  const [bestProductCount, setBestProductCount] = useState(0);
+  const [allProductCount, setAllProductCount] = useState(0);
+
+  const screenSize = useScreenSize();
+
+  useEffect(() => {
+    const { best, all } = PAGE_SIZES[screenSize];
+    setBestProductCount(best);
+    setAllProductCount(all);
+  }, [screenSize]);
+
+  useEffect(() => {
+    const updateProducts = async () => {
+      try {
+        const { totalCount } = await getProducts({
+          orderBy: order,
+          keyword: search,
+        });
+        setTotalProducts(totalCount);
+
+        const { all } = PAGE_SIZES[screenSize];
+        if (all !== allProductCount) {
+          const firstItemOfCurrentPage = Math.max(
+            0,
+            (currPage - 1) * allProductCount
+          );
+          const newPage = Math.max(
+            1,
+            Math.floor(firstItemOfCurrentPage / all) + 1
+          );
+          const totalPages = Math.ceil(totalCount / all);
+          const validPage = Math.min(newPage, totalPages || 1);
+
+          setCurrPage(validPage);
+          setAllProductCount(all);
+        } else if (currPage > Math.ceil(totalCount / allProductCount)) {
+          setCurrPage(1);
+        }
+      } catch (error) {
+        console.error("상품 정보를 불러오는 중 오류:", error);
+        setTotalProducts(0);
+      }
+    };
+
+    updateProducts();
+  }, [screenSize, order, search, currPage, allProductCount]);
+
+  const debouncedSearch = useCallback(
+    debounce((value) => {
+      setSearch(value);
+    }, DEBOUNCE_DELAY),
+    []
+  );
+
+  const handleSearch = (e) => {
+    const value = e.target.value;
+    if (value.length <= MAX_SEARCH_LENGTH) {
+      debouncedSearch(value);
+    }
+  };
+
+  const handleOrder = (selectedOrder) => {
+    setOrder(selectedOrder);
+    setCurrPage(1);
+  };
+
+  const handlePage = (newPage) => {
+    if (newPage >= 1 && newPage <= Math.ceil(totalProducts / allProductCount)) {
+      setCurrPage(newPage);
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  };
+
+  return (
+    <>
+      <Nav />
+      <Content>
+        <Header type='h1' text={"베스트 상품"} />
+        <ProductList
+          orderBy={"favorite"}
+          pageSize={bestProductCount}
+          type='large'
+        />
+        <div className={styles.headers}>
+          <Header type='h1' text={"전체 상품"} />
+          <SearchItem value={search} onChange={handleSearch} />
+          <Button href={"additem"} buttonText={"상품등록하기"} />
+          <DropDown onChangeOrder={handleOrder} />
+        </div>
+        <ProductList
+          orderBy={order}
+          pageSize={allProductCount}
+          keyword={search}
+          page={currPage}
+          type='small'
+        />
+        <Pagination
+          currPage={currPage}
+          totalProducts={totalProducts}
+          pageSize={allProductCount}
+          handlePage={handlePage}
+        />
+      </Content>
+    </>
+  );
+}
+
+export default Items;
diff --git a/src/Pages/Items/Items.module.css b/src/Pages/Items/Items.module.css
new file mode 100644
index 00000000..9f15564e
--- /dev/null
+++ b/src/Pages/Items/Items.module.css
@@ -0,0 +1,7 @@
+.headers {
+  margin: 16px 0 10px 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
\ No newline at end of file
diff --git a/src/assets/input/delete.svg b/src/assets/input/delete.svg
new file mode 100644
index 00000000..87a00547
--- /dev/null
+++ b/src/assets/input/delete.svg
@@ -0,0 +1,5 @@
+<svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11" cy="12" r="10" fill="#9CA3AF"/>
+<path d="M7.08032 8L15.0803 16" stroke="white" stroke-width="1.8" stroke-linecap="round"/>
+<path d="M15 8L7 16" stroke="white" stroke-width="1.8" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/input/img.svg b/src/assets/input/img.svg
new file mode 100644
index 00000000..e56d43e1
--- /dev/null
+++ b/src/assets/input/img.svg
@@ -0,0 +1,6 @@
+<svg width="168" height="168" viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="168" height="168" rx="12" fill="#F3F4F6"/>
+<path d="M70 65H98" stroke="#9CA3AF" stroke-width="4" stroke-linecap="round"/>
+<path d="M84 79V51" stroke="#9CA3AF" stroke-width="4" stroke-linecap="round"/>
+<path d="M59.0156 107.375V121.297H57.7812V107.375H59.0156ZM48.0781 113.297C48.0859 110.344 49.5547 108.461 51.625 108.453C53.6875 108.461 55.1797 110.344 55.1719 113.297C55.1797 116.258 53.6875 118.133 51.625 118.125C49.5547 118.133 48.0859 116.258 48.0781 113.297ZM49.2656 113.297C49.2656 115.555 50.2344 117.039 51.625 117.031C53.0234 117.039 53.9844 115.555 53.9844 113.297C53.9844 111.039 53.0234 109.555 51.625 109.547C50.2344 109.555 49.2656 111.039 49.2656 113.297ZM68.625 108.75V117.781H62.2031V108.75H68.625ZM63.4062 116.781H67.4219V109.734H63.4062V116.781ZM71.6094 121.297V107.375H72.8438V121.297H71.6094ZM80.1875 111.641C80.1953 114 81.9062 116.398 83.9531 117.281L83.2656 118.25C81.6406 117.516 80.2422 115.914 79.5938 113.992C78.9453 116.031 77.5391 117.797 75.9531 118.594L75.2188 117.625C77.2109 116.672 78.9453 114.047 78.9531 111.641V109.828H75.6719V108.812H83.5V109.828H80.1875V111.641ZM85.4375 121.266V107.375H86.6719V121.266H85.4375ZM105.734 113.984V115.016H93.0625V113.984H105.734ZM94.5938 118.734C94.5859 117.141 96.3906 116.234 99.3906 116.234C102.367 116.234 104.156 117.141 104.172 118.734C104.156 120.344 102.367 121.234 99.3906 121.234C96.3906 121.234 94.5859 120.344 94.5938 118.734ZM94.6719 112.656V107.938H104.156V108.969H95.875V111.656H104.25V112.656H94.6719ZM95.8438 118.734C95.8281 119.711 97.1641 120.266 99.3906 120.266C101.594 120.266 102.93 119.711 102.938 118.734C102.93 117.766 101.594 117.203 99.3906 117.188C97.1641 117.203 95.8281 117.766 95.8438 118.734ZM119.594 115.031V116.047H106.875V115.031H112.625V113.562H108.531V110.172H116.719V108.734H108.484V107.734H117.953V111.094H109.75V112.578H118.25V113.562H113.828V115.031H119.594ZM108.297 118.109V117.109H118.031V121.141H116.797V118.109H108.297Z" fill="#9CA3AF"/>
+</svg>
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
deleted file mode 100644
index 0e981fb2..00000000
--- a/src/components/Button.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import styles from "./Button.module.css";
-
-function Button({ href, buttonText }) {
-  return (
-    <a className={styles.button} href={href}>
-      {buttonText}
-    </a>
-  );
-}
-
-export default Button;
diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx
new file mode 100644
index 00000000..52abb6ee
--- /dev/null
+++ b/src/components/Button/Button.jsx
@@ -0,0 +1,15 @@
+import { Link } from "react-router-dom";
+import styles from "./Button.module.css";
+
+function Button({ href, buttonText, type = 'button', disabled }) {
+
+  const buttonClasses = `${styles.button}`;
+  return (
+    <button type={type} className={buttonClasses} disabled={disabled}>
+      {disabled ? <span>{buttonText}</span> : <Link to={href}>{buttonText}</Link>}
+    </button>
+    
+  );
+}
+
+export default Button;
diff --git a/src/components/Button.module.css b/src/components/Button/Button.module.css
similarity index 75%
rename from src/components/Button.module.css
rename to src/components/Button/Button.module.css
index 20bcca07..9493febc 100644
--- a/src/components/Button.module.css
+++ b/src/components/Button/Button.module.css
@@ -5,6 +5,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: var(--font-size-xs);
+  font-weight: 600;
   padding: 12px 23px;
   border-radius: 8px;
   order: 1;
@@ -14,6 +16,10 @@
   background-color: var(--primary-300);
 }
 
+.button:disabled {
+  background-color: var(--cool-gray-400);
+}
+
 /* Tablet  Desktop*/
 @media (min-width: 768px) {
   .button {
diff --git a/src/components/Content/Content.jsx b/src/components/Content/Content.jsx
new file mode 100644
index 00000000..60612cd3
--- /dev/null
+++ b/src/components/Content/Content.jsx
@@ -0,0 +1,9 @@
+import styles from './Content.module.css';
+
+function Content({  children }) {
+  return (
+    <div className={styles.content}>{children}</div>
+  );
+}
+
+export default Content;
diff --git a/src/css/App.module.css b/src/components/Content/Content.module.css
similarity index 64%
rename from src/css/App.module.css
rename to src/components/Content/Content.module.css
index 57f746e0..cc790ae9 100644
--- a/src/css/App.module.css
+++ b/src/components/Content/Content.module.css
@@ -1,19 +1,8 @@
-:root {
-  background-color: var(--content-bg);
-}
 
 .content {
   width: 344px;
   margin: 20px auto;
 }
-.headers {
-  margin: 16px 0 10px 0;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
 /* Tablet */
 @media screen and (min-width: 768px) and (max-width: 1199px) {
   .content {
diff --git a/src/components/DropDown.jsx b/src/components/DropDown/DropDown.jsx
similarity index 69%
rename from src/components/DropDown.jsx
rename to src/components/DropDown/DropDown.jsx
index b3f1e089..787098d0 100644
--- a/src/components/DropDown.jsx
+++ b/src/components/DropDown/DropDown.jsx
@@ -1,23 +1,28 @@
 import { FaSortAmountDown } from "react-icons/fa";
 import { FaSortDown } from "react-icons/fa6";
 
-import DropDownItems from "./DropDownItems";
-import { useScreenSize } from "../utils/useScreenSize";
+import DropDownItems from "./DropDownItems.jsx";
+import { useScreenSize } from "../../utils/useScreenSize";
 import { useState } from "react";
 import styles from "./DropDown.module.css";
 
+const DEFAULT_VALUE = "최신순";
+
 function DropDown({ onChangeOrder }) {
-  const [currentValue, setCurrentValue] = useState("최신순");
+  const [currentValue, setCurrentValue] = useState(DEFAULT_VALUE);
   const [isOpen, setIsOpen] = useState(false);
   const screenSize = useScreenSize();
 
+  const handleToggle = () => setIsOpen((prev) => !prev);
+
   const handleOnChangeValue = (value, label) => {
     setCurrentValue(label);
     onChangeOrder(value);
+    setIsOpen(false);
   };
 
   return (
-    <div className={styles.dropDown} onClick={() => setIsOpen((prev) => !prev)}>
+    <div className={styles.dropDown} onClick={handleToggle}>
       {screenSize === "sm" ? (
         <label>
           <FaSortAmountDown />
diff --git a/src/components/DropDown.module.css b/src/components/DropDown/DropDown.module.css
similarity index 100%
rename from src/components/DropDown.module.css
rename to src/components/DropDown/DropDown.module.css
diff --git a/src/components/DropDown/DropDownItems.jsx b/src/components/DropDown/DropDownItems.jsx
new file mode 100644
index 00000000..7f386d51
--- /dev/null
+++ b/src/components/DropDown/DropDownItems.jsx
@@ -0,0 +1,24 @@
+import styles from "./DropDownItems.module.css";
+
+const SORT_OPTIONS = [
+  { value: "recent", label: "최신순" },
+  { value: "favorite", label: "좋아요순" },
+];
+
+function DropDownItems({ onItemClick }) {
+  return (
+    <ul className={styles.container}>
+      {SORT_OPTIONS.map(({ value, label }) => (
+        <li
+          key={value}
+          className={styles.items}
+          onClick={() => onItemClick(value, label)}
+        >
+          {label}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default DropDownItems;
diff --git a/src/components/DropDownItems.module.css b/src/components/DropDown/DropDownItems.module.css
similarity index 100%
rename from src/components/DropDownItems.module.css
rename to src/components/DropDown/DropDownItems.module.css
diff --git a/src/components/DropDownItems.jsx b/src/components/DropDownItems.jsx
deleted file mode 100644
index 7a43c036..00000000
--- a/src/components/DropDownItems.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import styles from "./DropDownItems.module.css";
-
-function DropDownItems({ onItemClick }) {
-  const handleItemClick = (value, label) => {
-    onItemClick(value, label);
-  };
-  return (
-    <ul className={styles.container}>
-      <li
-        className={styles.items}
-        onClick={() => handleItemClick("recent", "최신순")}
-        value="recent"
-      >
-        최신순
-      </li>
-      <li
-        className={styles.items}
-        onClick={() => handleItemClick("favorite", "좋아요순")}
-        value="favorite"
-      >
-        좋아요순
-      </li>
-    </ul>
-  );
-}
-
-export default DropDownItems;
diff --git a/src/components/Form/FormImg.jsx b/src/components/Form/FormImg.jsx
new file mode 100644
index 00000000..95559720
--- /dev/null
+++ b/src/components/Form/FormImg.jsx
@@ -0,0 +1,70 @@
+import Header from "../Header/Header";
+
+import { useState, useRef, useEffect } from "react";
+
+import Img from '../../assets/input/img.svg'
+import DeleteImg from '../../assets/input/delete.svg'
+
+import styles from './FormImg.module.css'
+
+function FormImg({ label, name, value, initialPreview, onChange }) {
+  const [preview, setPreview] = useState(initialPreview);
+  const inputRef = useRef();
+  
+  const handleClick = () => {
+    inputRef?.current?.click();
+  };
+
+  const handleChange = (e) => {
+    const nextValue = e.target.files[0];
+    onChange(name, nextValue);
+  };
+
+  const handleClearClick = () => {
+    const inputNode = inputRef.current;
+    if (!inputNode) return;
+
+    inputNode.value = '';
+    onChange(name, null);
+  };
+
+  useEffect(() => {
+    if (!value) return;
+    const nextPreview = URL.createObjectURL(value);
+    setPreview(nextPreview);
+
+    return () => {
+      setPreview(initialPreview);
+      URL.revokeObjectURL(nextPreview);
+    };
+  }, [value, initialPreview]);
+
+  
+  return(
+    <div className={styles.formGroup}>
+      <Header type={'h3'} text={label} />
+      <div className={styles.imgContainer}>
+       
+        <input
+          className={styles.hidden}
+          type="file"
+          accept="image/*"
+          onChange={handleChange}
+          ref={inputRef}
+        />
+        <img src={Img} alt="이미지 등록" onClick={handleClick}/>
+        {preview && (
+          <div className={styles.imagePreview}>
+            <img src={preview} alt="상품 이미지 미리보기" className={styles.previewImage} />
+            <button type='button' className={styles.imageDeleteBtn} onClick={handleClearClick}>
+              <img src={DeleteImg} alt="선택해제" />
+            </button>
+          </div>
+        )}
+        </div>
+      
+    </div>
+  );
+}
+
+export default FormImg
\ No newline at end of file
diff --git a/src/components/Form/FormImg.module.css b/src/components/Form/FormImg.module.css
new file mode 100644
index 00000000..8100eb1f
--- /dev/null
+++ b/src/components/Form/FormImg.module.css
@@ -0,0 +1,32 @@
+.imgContainer{
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  margin: 24px 0 24px 0;
+}
+
+.hidden {
+  display: none;
+}
+
+.imagePreview {
+  display: flex;
+  position: relative;
+}
+
+.previewImage {
+  width: 168px;
+  height: 168px;
+  border-radius: 12px;
+}
+
+.imageDeleteBtn {
+  position: relative;
+  top: 10px;
+  right: 39px;
+  display: flex;
+  align-items: start;
+  border: 0;
+  background-color: transparent;
+}
\ No newline at end of file
diff --git a/src/components/Form/FormInput.css b/src/components/Form/FormInput.css
new file mode 100644
index 00000000..5ac22dc0
--- /dev/null
+++ b/src/components/Form/FormInput.css
@@ -0,0 +1,14 @@
+.description {
+  display: flex;
+  flex-direction: column;
+  margin: 16px 0 16px 0;
+  gap: 16px;
+}
+
+input::placeholder {
+  color: var(--secondary-400);
+}
+
+textarea::placeholder {
+  color: var(--secondary-400);
+}
\ No newline at end of file
diff --git a/src/components/Form/FormInput.jsx b/src/components/Form/FormInput.jsx
new file mode 100644
index 00000000..e9b01940
--- /dev/null
+++ b/src/components/Form/FormInput.jsx
@@ -0,0 +1,34 @@
+import Header from "../Header/Header"
+
+import styles from './FormInput.module.css'
+import './FormInput.css'
+
+function FormInput({ label, type, placeholder, value, onChange, name, onKeyDown, onCompositionStart, onCompositionEnd }) {
+  
+  return (
+  <div className={styles.input}>
+    <Header type={'h3'} text={label}/>
+    {type === 'textarea' ? 
+    <textarea
+      className={styles.textarea}
+      placeholder={placeholder}
+      value={value}
+      onChange={(e) => onChange(name, e.target.value)} 
+      name={name}
+    /> : 
+    <input
+        className={styles.inputField}
+        type={type}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(name, e.target.value)} 
+        name={name}
+        onKeyDown={onKeyDown}
+        onCompositionStart={onCompositionStart}
+        onCompositionEnd={onCompositionEnd}
+      />}
+  </div>
+  );
+}
+
+export default FormInput
\ No newline at end of file
diff --git a/src/components/Form/FormInput.module.css b/src/components/Form/FormInput.module.css
new file mode 100644
index 00000000..867a56cf
--- /dev/null
+++ b/src/components/Form/FormInput.module.css
@@ -0,0 +1,31 @@
+.input {
+  display: flex;
+  flex-direction: column;
+  margin: 16px 0 16px 0;
+  gap: 16px;
+}
+
+.textarea {
+  display: flex;
+  background-color: var(--cool-gray-100);
+  border: none;
+  padding: 16px 24px;
+  border-radius: 12px;
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  color: var(--secondary-800);
+  height: 282px;
+  resize: none;
+  outline: none;
+}
+
+.inputField {
+  display: flex;
+  background-color: var(--cool-gray-100);
+  border: none;
+  padding: 16px 24px;
+  border-radius: 12px;
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  color: var(--secondary-800);
+}
\ No newline at end of file
diff --git a/src/components/Header.module.css b/src/components/Header.module.css
deleted file mode 100644
index 8c337ccf..00000000
--- a/src/components/Header.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.header {
-  color: var(--secondary-900);
-  font-size: var(--font-size-md);
-  font-weight: 700;
-
-  flex-grow: 1;
-}
diff --git a/src/components/Header.jsx b/src/components/Header/Header.jsx
similarity index 63%
rename from src/components/Header.jsx
rename to src/components/Header/Header.jsx
index cc8f9b65..166d1e7b 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -1,8 +1,8 @@
 import styles from "./Header.module.css";
 
-function Header({ text }) {
+function Header({ type, text }) {
   return (
-    <div className={styles.header}>
+    <div className={styles[type]}>
       <h1>{text}</h1>
     </div>
   );
diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css
new file mode 100644
index 00000000..abe78a5b
--- /dev/null
+++ b/src/components/Header/Header.module.css
@@ -0,0 +1,13 @@
+.h1 {
+  color: var(--secondary-900);
+  font-size: var(--font-size-md);
+  font-weight: 700;
+  flex-grow: 1;
+}
+
+.h3 {
+  color: var(--secondary-900);
+  font-size: var(--font-size-sm);
+  font-weight: 700;
+  flex-grow: 1;
+}
\ No newline at end of file
diff --git a/src/components/Nav.jsx b/src/components/Nav/Nav.jsx
similarity index 73%
rename from src/components/Nav.jsx
rename to src/components/Nav/Nav.jsx
index 101b01f2..a13d38e6 100644
--- a/src/components/Nav.jsx
+++ b/src/components/Nav/Nav.jsx
@@ -1,8 +1,8 @@
-import smLogo from "../assets/logo/logo.svg";
-import logo from "../assets/logo/market_logo.svg";
+import smLogo from "../../assets/logo/logo.svg";
+import logo from "../../assets/logo/market_logo.svg";
 
-import profile from "../assets/input/default_profile.svg";
-import { useScreenSize } from "../utils/useScreenSize";
+import profile from "../../assets/input/default_profile.svg";
+import { useScreenSize } from "../../utils/useScreenSize";
 
 import styles from "./Nav.module.css";
 
diff --git a/src/components/Nav.module.css b/src/components/Nav/Nav.module.css
similarity index 100%
rename from src/components/Nav.module.css
rename to src/components/Nav/Nav.module.css
diff --git a/src/components/Pagination.css b/src/components/Pagination/Pagination.css
similarity index 100%
rename from src/components/Pagination.css
rename to src/components/Pagination/Pagination.css
diff --git a/src/components/Pagination.jsx b/src/components/Pagination/Pagination.jsx
similarity index 100%
rename from src/components/Pagination.jsx
rename to src/components/Pagination/Pagination.jsx
diff --git a/src/components/Pagination.module.css b/src/components/Pagination/Pagination.module.css
similarity index 100%
rename from src/components/Pagination.module.css
rename to src/components/Pagination/Pagination.module.css
diff --git a/src/components/ProductItem.jsx b/src/components/ProductLIst/ProductItem.jsx
similarity index 59%
rename from src/components/ProductItem.jsx
rename to src/components/ProductLIst/ProductItem.jsx
index 62df261f..0fe7c67e 100644
--- a/src/components/ProductItem.jsx
+++ b/src/components/ProductLIst/ProductItem.jsx
@@ -1,25 +1,29 @@
 import { useEffect, useState } from "react";
 
 import { CiHeart } from "react-icons/ci";
-import noImg from "../assets/img/noimg.jpg";
+import noImg from "../../assets/img/noimg.jpg";
 
 import styles from "./ProductItem.module.css";
 
-function ProductItem({ item, isBestProduct }) {
+function ProductItem({ item, type = "small" }) {
   const { images, name, price, favoriteCount } = item;
-  const [url, setURL] = useState(images || noImg);
+  const [imgSrc, setImgSrc] = useState(images?.[0] || noImg);
 
-  const handleError = () => {
-    setURL(noImg);
+  useEffect(() => {
+    setImgSrc(images?.[0] || noImg);
+  }, [images]);
+
+  const handleImageError = () => {
+    setImgSrc(noImg);
   };
 
   return (
     <a href="#" className={styles.card}>
       <img
-        className={isBestProduct ? styles.bestImg : styles.img}
-        src={url}
+        className={styles[type]}
+        src={imgSrc}
         alt={name}
-        onError={handleError}
+        onError={handleImageError}
       />
       <p>{name}</p>
       <h3 className={styles.price}>{price}원</h3>
diff --git a/src/components/ProductItem.module.css b/src/components/ProductLIst/ProductItem.module.css
similarity index 93%
rename from src/components/ProductItem.module.css
rename to src/components/ProductLIst/ProductItem.module.css
index de262a1c..0ef417f9 100644
--- a/src/components/ProductItem.module.css
+++ b/src/components/ProductLIst/ProductItem.module.css
@@ -21,14 +21,14 @@
   margin-right: 5px;
 }
 
-.bestImg {
+.large {
   width: 343px;
   height: 343px;
   object-fit: cover;
   border-radius: 25px;
 }
 
-.img {
+.small {
   width: 168px;
   height: 168px;
   object-fit: cover;
@@ -37,14 +37,14 @@
 
 /* Tablet  Desktop*/
 @media (min-width: 768px) {
-  .img {
+  .small {
     width: 221px;
     height: 221px;
   }
 }
 
 @media (min-width: 1200px) {
-  .bestImg {
+  .large {
     width: 282px;
     height: 282px;
   }
diff --git a/src/components/ProductList.jsx b/src/components/ProductLIst/ProductList.jsx
similarity index 56%
rename from src/components/ProductList.jsx
rename to src/components/ProductLIst/ProductList.jsx
index c5eb3b1f..391dba65 100644
--- a/src/components/ProductList.jsx
+++ b/src/components/ProductLIst/ProductList.jsx
@@ -1,31 +1,32 @@
 import { useEffect, useState } from "react";
 
-import { getProducts } from "../api/ProductApi";
-import ProductItem from "./ProductItem";
+import { getProducts } from "../../api/ProductApi";
+import ProductItem from "./ProductItem.jsx";
 
 import styles from "./ProductList.module.css";
 
-function ProductList({ orderBy, pageSize, keyword, page, isBestProduct }) {
+function ProductList({  orderBy, pageSize, keyword, page, type = "small" }) {
   const [items, setItems] = useState([]);
 
-  const handleProduct = async (orderBy) => {
+  const handleProduct = async () => {
     try {
       const { list } = await getProducts({ orderBy, pageSize, keyword, page });
-      setItems([...list]);
+      setItems(list);
     } catch (error) {
       console.error("상품 목록을 가져오는 중 오류 발생:", error);
+      setItems([]);
     }
   };
 
   useEffect(() => {
-    handleProduct(orderBy, pageSize, keyword, page);
+    handleProduct();
   }, [orderBy, pageSize, keyword, page]);
 
   return (
-    <ul className={isBestProduct ? styles.bestItem : styles.allItem}>
+    <ul className={styles[type]}>
       {items.map((item) => (
         <li key={item.id} className={styles.card}>
-          <ProductItem item={item} isBestProduct={isBestProduct} />
+          <ProductItem item={item} type={type} />
         </li>
       ))}
     </ul>
diff --git a/src/components/ProductList.module.css b/src/components/ProductLIst/ProductList.module.css
similarity index 92%
rename from src/components/ProductList.module.css
rename to src/components/ProductLIst/ProductList.module.css
index 519692e8..852977fc 100644
--- a/src/components/ProductList.module.css
+++ b/src/components/ProductLIst/ProductList.module.css
@@ -3,7 +3,7 @@
   align-items: center;
 }
 
-.bestItem {
+.large {
   display: grid;
   justify-content: flex-start;
   column-gap: 0;
@@ -12,7 +12,7 @@
   margin: 0 auto;
   margin-top: 16px;
 }
-.allItem {
+.small {
   display: grid;
   justify-content: flex-start;
   column-gap: 8px;
@@ -23,12 +23,12 @@
 
 /* Tablet */
 @media screen and (min-width: 768px) and (max-width: 1199px) {
-  .bestItem {
+  .large {
     column-gap: 10px;
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: repeat(1, 1fr);
   }
-  .allItem {
+  .small {
     column-gap: 16px;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(2, 1fr);
@@ -37,12 +37,12 @@
 
 /* Desktop */
 @media (min-width: 1200px) {
-  .bestItem {
+  .large {
     column-gap: 24px;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: repeat(1, 1fr);
   }
-  .allItem {
+  .small {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     grid-template-rows: repeat(2, 1fr);
diff --git a/src/components/SearchItem.jsx b/src/components/SearchItem/SearchItem.jsx
similarity index 88%
rename from src/components/SearchItem.jsx
rename to src/components/SearchItem/SearchItem.jsx
index d6490150..37fc5fb6 100644
--- a/src/components/SearchItem.jsx
+++ b/src/components/SearchItem/SearchItem.jsx
@@ -1,4 +1,4 @@
-import searchIcon from "../assets/input/search.svg";
+import searchIcon from "../../assets/input/search.svg";
 import styles from "./SearchItem.module.css";
 
 function SearchItem({ value, onChange }) {
diff --git a/src/components/SearchItem.module.css b/src/components/SearchItem/SearchItem.module.css
similarity index 100%
rename from src/components/SearchItem.module.css
rename to src/components/SearchItem/SearchItem.module.css
diff --git a/src/main.jsx b/src/main.jsx
index 19ecec49..3d00d375 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,6 +1,6 @@
 import { createRoot } from "react-dom/client";
-import "./css/reset.css";
-import "./css/variables.css";
+import "./reset.css";
+import "./variables.css";
 
 import App from "./App.jsx";
 
diff --git a/src/css/reset.css b/src/reset.css
similarity index 100%
rename from src/css/reset.css
rename to src/reset.css
diff --git a/src/css/variables.css b/src/variables.css
similarity index 93%
rename from src/css/variables.css
rename to src/variables.css
index c10e53fd..3aab2903 100644
--- a/src/css/variables.css
+++ b/src/variables.css
@@ -16,8 +16,10 @@
   --secondary-200: rgba(229, 231, 235, 1);
   --secondary-100: rgba(243, 244, 246, 1);
   --secondary-50: rgba(249, 250, 251, 1);
-  --cool-gray-200: rgba(229, 231, 235, 1);
   --cool-gray-600: rgba(75, 85, 99, 1);
+  --cool-gray-400: rgba(156, 163, 175, 1);
+  --cool-gray-200: rgba(229, 231, 235, 1);
+  --cool-gray-100: rgba(243, 244, 246, 1);
 
   --header-height: 70px;
   --content-width: 1120px;