diff --git a/src/App.jsx b/src/App.jsx
index 7dfeeebff..975768529 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-import ItemsPage from "./pages/ItemsPage.jsx";
-import AddItem from "./pages/AddItem.jsx";
-import Nav from "./components/Nav.jsx";
-import ItemDetail from "./pages/ItemDetail.jsx";
+import ItemsPage from "./pages/ItemsPage.tsx";
+import AddItem from "./pages/AddItem.tsx";
+import Nav from "./components/Nav.tsx";
+import ItemDetail from "./pages/ItemDetail.tsx";
 import "./style.css";
 
 function App() {
diff --git a/src/components/AddImgForm.jsx b/src/components/AddImgForm.jsx
deleted file mode 100644
index 83b1516fb..000000000
--- a/src/components/AddImgForm.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, { useState } from "react";
-import PlusIcon from "../asset/icon/ic_plus.png";
-import CloseIcon from "../asset/icon/ic_X.png";
-import "./AddImgForm.css";
-
-function AddImgForm({ label }) {
-  const [imagePreviewUrl, setImagePreviewUrl] = useState("");
-  const fileInputRef = React.useRef(null);
-
-  const handleImageChange = (e) => {
-    const file = e.target.files[0];
-    if (file) {
-      // 미리보기 주소 값(Object URL) 생성
-      const imageUrl = URL.createObjectURL(file);
-      setImagePreviewUrl(imageUrl);
-    }
-  };
-
-  const handleClick = () => {
-    fileInputRef.current.click();
-  };
-
-  const handleRemoveImage = () => {
-    setImagePreviewUrl("");
-    fileInputRef.current.value = "";
-  };
-
-  return (
-    <div>
-      <label>{label}</label>
-      <div className="img-upload-container">
-        <div
-          onClick={handleClick}
-          className="img-upload-btn"
-          style={{ cursor: "pointer" }}
-        >
-          <img src={PlusIcon} alt="업로드 아이콘" className="plus-icon" />
-          <p className="img-upload-text">이미지 등록</p>
-        </div>
-
-        {imagePreviewUrl && (
-          <div className="img-preview-container">
-            <img src={imagePreviewUrl} alt="미리보기" className="img-preview" />
-            <img
-              src={CloseIcon}
-              alt="삭제 버튼"
-              onClick={handleRemoveImage}
-              className="img-remove-button"
-              style={{ cursor: "pointer" }}
-            />
-          </div>
-        )}
-      </div>
-
-      <input
-        ref={fileInputRef}
-        id="img-upload"
-        type="file"
-        accept="image/*"
-        onChange={handleImageChange}
-        style={{ display: "none" }}
-      />
-    </div>
-  );
-}
-
-export default AddImgForm;
diff --git a/src/components/AddImgForm.css b/src/components/AddImgForm.module.css
similarity index 100%
rename from src/components/AddImgForm.css
rename to src/components/AddImgForm.module.css
diff --git a/src/components/AddImgForm.tsx b/src/components/AddImgForm.tsx
new file mode 100644
index 000000000..8c795d4b7
--- /dev/null
+++ b/src/components/AddImgForm.tsx
@@ -0,0 +1,80 @@
+import React, { useState, useRef, ChangeEvent } from "react";
+import PlusIcon from "../asset/icon/ic_plus.png";
+import CloseIcon from "../asset/icon/ic_X.png";
+import styles from "./AddImgForm.module.css";
+
+interface AddImgFormProps {
+  label: string;
+}
+
+function AddImgForm({ label }: AddImgFormProps) {
+  const [imagePreviewUrl, setImagePreviewUrl] = useState<string>("");
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  function handleImageChange(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (file) {
+      const imageUrl = URL.createObjectURL(file);
+      setImagePreviewUrl(imageUrl);
+    }
+  }
+
+  function handleClick() {
+    fileInputRef.current?.click();
+  }
+
+  function handleRemoveImage() {
+    setImagePreviewUrl("");
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  }
+
+  return (
+    <div>
+      <label>{label}</label>
+      <div className={styles["img-upload-container"]}>
+        <div
+          onClick={handleClick}
+          className={styles["img-upload-btn"]}
+          style={{ cursor: "pointer" }}
+        >
+          <img
+            src={PlusIcon}
+            alt="업로드 아이콘"
+            className={styles["plus-icon"]}
+          />
+          <p className={styles["img-upload-text"]}>이미지 등록</p>
+        </div>
+
+        {imagePreviewUrl && (
+          <div className={styles["img-preview-container"]}>
+            <img
+              src={imagePreviewUrl}
+              alt="미리보기"
+              className={styles["img-preview"]}
+            />
+            <img
+              src={CloseIcon}
+              alt="삭제 버튼"
+              onClick={handleRemoveImage}
+              className={styles["img-remove-button"]}
+              style={{ cursor: "pointer" }}
+            />
+          </div>
+        )}
+      </div>
+
+      <input
+        ref={fileInputRef}
+        id="img-upload"
+        type="file"
+        accept="image/*"
+        onChange={handleImageChange}
+        style={{ display: "none" }}
+      />
+    </div>
+  );
+}
+
+export default AddImgForm;
diff --git a/src/components/AddItemForm.css b/src/components/AddItemForm.module.css
similarity index 100%
rename from src/components/AddItemForm.css
rename to src/components/AddItemForm.module.css
diff --git a/src/components/AddItemForm.jsx b/src/components/AddItemForm.tsx
similarity index 51%
rename from src/components/AddItemForm.jsx
rename to src/components/AddItemForm.tsx
index 44dea6d83..139fd0abf 100644
--- a/src/components/AddItemForm.jsx
+++ b/src/components/AddItemForm.tsx
@@ -1,27 +1,42 @@
 import React from "react";
-import "./AddItemForm.css";
+import styles from "./AddItemForm.module.css";
+
+interface AddItemFormProps {
+  label: string;
+  type?: string;
+  placeholder: string;
+  id: string;
+  value: string;
+  onChange: (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => void;
+  isTextArea?: boolean;
+  onKeyDown?: (
+    event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => void;
+}
 
 function AddItemForm({
   label,
-  type,
+  type = "text",
   placeholder,
   id,
   value,
   onChange,
-  isTextArea,
+  isTextArea = false,
   onKeyDown,
-}) {
+}: AddItemFormProps) {
   return (
-    <div className="form-field">
+    <div className={styles["form-field"]}>
       <label htmlFor={id}>{label}</label>
       {isTextArea ? (
         <textarea
           id={id}
-          type={type}
           placeholder={placeholder}
           value={value}
           onChange={onChange}
           onKeyDown={onKeyDown}
+          className={styles["textarea"]}
         />
       ) : (
         <input
@@ -31,6 +46,7 @@ function AddItemForm({
           value={value}
           onChange={onChange}
           onKeyDown={onKeyDown}
+          className={styles["input"]}
         />
       )}
     </div>
diff --git a/src/components/AddTagForm.css b/src/components/AddTagForm.module.css
similarity index 100%
rename from src/components/AddTagForm.css
rename to src/components/AddTagForm.module.css
diff --git a/src/components/AddTagForm.jsx b/src/components/AddTagForm.tsx
similarity index 53%
rename from src/components/AddTagForm.jsx
rename to src/components/AddTagForm.tsx
index a74a3eafb..c501613b3 100644
--- a/src/components/AddTagForm.jsx
+++ b/src/components/AddTagForm.tsx
@@ -1,12 +1,20 @@
-import React, { useState } from "react";
-import AddItemForm from "./AddItemForm";
+import React, { useState, KeyboardEvent } from "react";
+import AddItemForm from "./AddItemForm.tsx";
 import CloseIcon from "../asset/icon/ic_X.png";
-import "./AddTagForm.css";
+import styles from "./AddTagForm.module.css";
 
-function AddTagForm({ tags, onAddTag, onRemoveTag }) {
-  const [input, setInput] = useState("");
+interface AddTagFormProps {
+  tags: string[];
+  onAddTag: (tag: string) => void;
+  onRemoveTag: (tag: string) => void;
+}
+
+function AddTagForm({ tags, onAddTag, onRemoveTag }: AddTagFormProps) {
+  const [input, setInput] = useState<string>("");
 
-  const onPressEnter = (event) => {
+  function onPressEnter(
+    event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>
+  ): void {
     if (event.nativeEvent.isComposing) return;
 
     const inputString = input.trim();
@@ -15,7 +23,7 @@ function AddTagForm({ tags, onAddTag, onRemoveTag }) {
       onAddTag(inputString);
       setInput("");
     }
-  };
+  }
 
   return (
     <div>
@@ -28,16 +36,16 @@ function AddTagForm({ tags, onAddTag, onRemoveTag }) {
         placeholder="태그를 입력해주세요"
       />
 
-      <div className="tag-buttons-section">
+      <div className={styles["tag-buttons-section"]}>
         {tags.map((tag) => (
-          <div key={`tag-${tag}`} className="tag">
-            <span className="tag-text">#{tag}</span>
+          <div key={`tag-${tag}`} className={styles["tag"]}>
+            <span className={styles["tag-text"]}>#{tag}</span>
             <img
               src={CloseIcon}
               alt="태그 삭제 버튼"
               onClick={() => onRemoveTag(tag)}
               aria-label={`${tag} 태그 삭제`}
-              className="tag-delete-button"
+              className={styles["tag-delete-button"]}
             />
           </div>
         ))}
diff --git a/src/components/DetailInquiry.jsx b/src/components/DetailInquiry.tsx
similarity index 50%
rename from src/components/DetailInquiry.jsx
rename to src/components/DetailInquiry.tsx
index 74801995a..92a72da68 100644
--- a/src/components/DetailInquiry.jsx
+++ b/src/components/DetailInquiry.tsx
@@ -1,39 +1,43 @@
-import React, { useState } from "react";
-import "./detailInquiry.css";
+import React, { useState, ChangeEvent } from "react";
+import styles from "./detailInquiry.module.css";
 
-function Inquiry() {
-  const [inputValue, setInputValue] = useState("");
+interface InquiryProps {}
 
-  const handleChange = (event) => {
+function Inquiry(props: InquiryProps) {
+  const [inputValue, setInputValue] = useState<string>("");
+
+  function handleChange(event: ChangeEvent<HTMLTextAreaElement>): void {
     setInputValue(event.target.value);
-  };
+  }
 
-  const handleSubmit = () => {
+  function handleSubmit(): void {
     if (inputValue.trim()) {
       alert(`문의 내용: ${inputValue}`);
       setInputValue("");
     }
-  };
+  }
 
   const isButtonEnabled = inputValue.trim().length > 0;
 
   return (
-    <div className="form-container">
-      <label htmlFor="inquiry" className="form-label">
+    <div className={styles["form-container"]}>
+      <label htmlFor="inquiry" className={styles["form-label"]}>
         문의하기
       </label>
       <textarea
-        className="form-textarea"
+        className={styles["form-textarea"]}
         id="inquiry"
         placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
         value={inputValue}
         onChange={handleChange}
       />
-      <div className="button-container">
+      <div className={styles["button-container"]}>
         <button
-          className={`form-button ${isButtonEnabled ? "enabled" : "disabled"}`}
+          className={`${styles["form-button"]} ${
+            isButtonEnabled ? styles["enabled"] : styles["disabled"]
+          }`}
           onClick={handleSubmit}
-          disabled={!inputValue.trim()}
+          disabled={!isButtonEnabled}
         >
           등록
         </button>
diff --git a/src/components/ItemCard.jsx b/src/components/ItemCard.jsx
deleted file mode 100644
index 60eec86a9..000000000
--- a/src/components/ItemCard.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import heartIcon from "../asset/icon/ic_heart.png";
-import defaultImage from "../asset/none.jpeg";
-
-function ItemCard({ item, imgSizeClass }) {
-  const imageUrl =
-    item.images && item.images.length > 0 ? item.images[0] : defaultImage;
-
-  return (
-    <div className="itemCard">
-      <Link to={`/items/${item.id}`}>
-        <img
-          className={`itemImg ${imgSizeClass}`}
-          src={imageUrl}
-          alt={item.name}
-        />
-      </Link>
-      <p className="itemName">{item.name}</p>
-      <h3 className="itemPrice">{item.price.toLocaleString()}원</h3>
-      <div className="favorit">
-        <img className="heartIcon" src={heartIcon} alt="하트" />
-        <span className="itemFavoritCount">{item.favoriteCount}</span>
-      </div>
-    </div>
-  );
-}
-
-export default ItemCard;
diff --git a/src/components/ItemCard.tsx b/src/components/ItemCard.tsx
new file mode 100644
index 000000000..15a11e575
--- /dev/null
+++ b/src/components/ItemCard.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import heartIcon from "../asset/icon/ic_heart.png";
+import defaultImage from "../asset/none.jpeg";
+import styles from "./itemCard.module.css";
+
+interface Item {
+  id: string;
+  name: string;
+  price: number;
+  images?: string[];
+  favoriteCount: number;
+}
+
+interface ItemCardProps {
+  item: Item;
+  imgSizeClass?: string;
+}
+
+function ItemCard({ item, imgSizeClass = "" }: ItemCardProps) {
+  const imageUrl =
+    item.images && item.images.length > 0 ? item.images[0] : defaultImage;
+
+  return (
+    <div className={styles.itemCard}>
+      <Link to={`/items/${item.id}`}>
+        <img
+          className={`${styles.itemImg} ${imgSizeClass}`}
+          src={imageUrl}
+          alt={item.name}
+        />
+      </Link>
+      <p className={styles.itemName}>{item.name}</p>
+      <h3 className={styles.itemPrice}>{item.price.toLocaleString()}원</h3>
+      <div className={styles.favorite}>
+        <img className={styles.heartIcon} src={heartIcon} alt="하트" />
+        <span className={styles.itemFavoriteCount}>{item.favoriteCount}</span>
+      </div>
+    </div>
+  );
+}
+
+export default ItemCard;
diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx
deleted file mode 100644
index 3fe6dd979..000000000
--- a/src/components/Nav.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import PandaLogo from "../asset/logo/logo.png";
-import Profile from "../asset/icon/ic_profile.png";
-import "./Nav.css";
-
-function Nav() {
-  return (
-    <nav>
-      <div className="menu">
-        <Link to="/">
-          <img src={PandaLogo} alt="판다로고" />
-        </Link>
-
-        <div>
-          <Link to="/">자유게시판</Link>
-        </div>
-        <div>
-          <Link to="/">중고마켓</Link>
-        </div>
-      </div>
-      <Link to="/" className="profile_ic">
-        <img src={Profile} alt="프로필" />
-      </Link>
-    </nav>
-  );
-}
-
-export default Nav;
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
new file mode 100644
index 000000000..9aa9283d9
--- /dev/null
+++ b/src/components/Nav.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import PandaLogo from "../asset/logo/logo.png";
+import Profile from "../asset/icon/ic_profile.png";
+import styles from "./nav.module.css";
+
+function Nav() {
+  return (
+    <nav className={styles.nav}>
+      <div className={styles.menu}>
+        <Link to="/">
+          <img src={PandaLogo} alt="판다로고" className={styles.logo} />
+        </Link>
+        <div>
+          <Link to="/" className={styles.link}>
+            자유게시판
+          </Link>
+        </div>
+        <div>
+          <Link to="/" className={styles.link}>
+            중고마켓
+          </Link>
+        </div>
+      </div>
+      <Link to="/" className={styles.profile}>
+        <img src={Profile} alt="프로필" className={styles.profileIcon} />
+      </Link>
+    </nav>
+  );
+}
+
+export default Nav;
diff --git a/src/components/PandaAllList.jsx b/src/components/PandaAllList.tsx
similarity index 51%
rename from src/components/PandaAllList.jsx
rename to src/components/PandaAllList.tsx
index 4638f6f34..08893a91f 100644
--- a/src/components/PandaAllList.jsx
+++ b/src/components/PandaAllList.tsx
@@ -1,14 +1,27 @@
 import React, { useState } from "react";
-import ItemCard from "./ItemCard";
-import "../style.css";
 import { Link } from "react-router-dom";
+import ItemCard from "./ItemCard.tsx";
+import styles from "./pandaAllList.module.css";
 
-function PandaAllList({ items }) {
+interface Item {
+  id: string;
+  name: string;
+  price: number;
+  images: string[];
+  favoriteCount: number;
+  createdAt: string;
+}
+
+interface PandaAllListProps {
+  items: Item[];
+}
+
+function PandaAllList({ items }: PandaAllListProps) {
   const [sortType, setSortType] = useState("newest");
 
   const sortedItems = [...items].sort((a, b) => {
     if (sortType === "newest") {
-      return new Date(b.createdAt) - new Date(a.createdAt);
+      return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
     }
     if (sortType === "favorite") {
       return b.favoriteCount - a.favoriteCount;
@@ -18,23 +31,24 @@ function PandaAllList({ items }) {
 
   return (
     <div>
-      <div className="titleList">
-        <h2 className="title">전체 상품</h2>
-        <div className="titleOption">
+      <div className={styles.titleList}>
+        <h2 className={styles.title}>전체 상품</h2>
+        <div className={styles.titleOption}>
           <input
             type="text"
             placeholder="검색할 상품을 입력해주세요"
-            className="search-input"
+            className={styles.searchInput}
           />
-          <Link to="/additem" className="additem-btn">
+          <Link to="/additem" className={styles.addItemBtn}>
             상품 등록하기
           </Link>
-          <div className="sortDropdown">
-            <label htmlFor="sortSelect"></label>
+          <div className={styles.sortDropdown}>
+            <label htmlFor="sortSelect" className={styles.sortLabel}></label>
             <select
               id="sortSelect"
               value={sortType}
               onChange={(e) => setSortType(e.target.value)}
+              className={styles.sortSelect}
             >
               <option value="newest">최신순</option>
               <option value="favorite">좋아요순</option>
@@ -42,9 +56,9 @@ function PandaAllList({ items }) {
           </div>
         </div>
       </div>
-      <div className="allList">
+      <div className={styles.allList}>
         {sortedItems.slice(0, 10).map((item) => (
-          <ItemCard key={item.id} item={item} imgSizeClass="allImg" />
+          <ItemCard key={item.id} item={item} imgSizeClass={styles.allImg} />
         ))}
       </div>
     </div>
diff --git a/src/components/PandaBestList.jsx b/src/components/PandaBestList.jsx
deleted file mode 100644
index 366344720..000000000
--- a/src/components/PandaBestList.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { useEffect, useState } from "react";
-import ItemCard from "./ItemCard";
-import { getItems } from "../api/itemApi";
-
-function PandaBestList() {
-  const [listItems, setItems] = useState([]);
-
-  useEffect(() => {
-    getItems({ order: "favorite", pageSize: 10 }).then((data) => {
-      const sortedItems = data
-        .sort((a, b) => b.favoriteCount - a.favoriteCount)
-        .slice(0, 4);
-      setItems(sortedItems);
-    });
-  }, []);
-
-  return (
-    <div className="bestList-container">
-      <h2 className="title">베스트 상품</h2>
-      <div className="bestList">
-        {listItems.map((item) => (
-          <ItemCard key={item.id} item={item} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export default PandaBestList;
diff --git a/src/components/PandaBestList.tsx b/src/components/PandaBestList.tsx
new file mode 100644
index 000000000..db90ff60f
--- /dev/null
+++ b/src/components/PandaBestList.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import ItemCard from "./ItemCard.tsx";
+import styles from "./pandaBestList.module.css";
+
+interface Item {
+  id: string;
+  name: string;
+  price: number;
+  images: string[];
+  favoriteCount: number;
+}
+
+interface PandaBestListProps {
+  items: Item[];
+}
+
+function PandaBestList({ items }: PandaBestListProps) {
+  const sortedItems = items
+    .sort((a, b) => b.favoriteCount - a.favoriteCount)
+    .slice(0, 4);
+
+  return (
+    <div className={styles.bestListContainer}>
+      <h2 className={styles.title}>베스트 상품</h2>
+      <div className={styles.bestList}>
+        {sortedItems.map((item) => (
+          <ItemCard key={item.id} item={item} imgSizeClass={styles.bestImg} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default PandaBestList;
diff --git a/src/components/detailInquiry.css b/src/components/detailInquiry.module.css
similarity index 100%
rename from src/components/detailInquiry.css
rename to src/components/detailInquiry.module.css
diff --git a/src/components/itemCard.module.css b/src/components/itemCard.module.css
new file mode 100644
index 000000000..b3e0a90e9
--- /dev/null
+++ b/src/components/itemCard.module.css
@@ -0,0 +1,28 @@
+.itemName {
+  font-size: 14px;
+  margin-top: 16px;
+  color: #1f2937;
+}
+
+.itemPrice {
+  margin-top: 6px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #1f2937;
+}
+
+.favorit {
+  display: flex;
+  gap: 4px;
+  margin-top: 6px;
+}
+
+.heartIcon {
+  width: 16px;
+  height: 16px;
+}
+
+.itemFavoritCount {
+  font-size: 12px;
+  color: #4b5563;
+}
diff --git a/src/components/Nav.css b/src/components/nav.module.css
similarity index 100%
rename from src/components/Nav.css
rename to src/components/nav.module.css
diff --git a/src/components/pandaAllList.module.css b/src/components/pandaAllList.module.css
new file mode 100644
index 000000000..a22e70718
--- /dev/null
+++ b/src/components/pandaAllList.module.css
@@ -0,0 +1,70 @@
+.itemPage {
+  display: flex;
+  margin-top: 70px;
+  width: 100%;
+  justify-content: center;
+}
+
+.itemPage-container {
+  width: 1201px;
+}
+
+.allList,
+.bestList {
+  display: flex;
+}
+.allList {
+  flex-wrap: wrap;
+  gap: 24px;
+}
+
+.allImg {
+  width: 221px;
+  height: 221px;
+  border-radius: 16px;
+}
+.title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #111827;
+  margin-bottom: 24px;
+}
+
+.titleList {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.titleOption {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.searchInput {
+  width: 325px;
+  height: 42px;
+  background-color: #f3f4f6;
+  border-radius: 12px;
+  border: none;
+  margin: 0;
+}
+
+.searchInput > input::placeholder {
+  color: #9ca3af;
+  font-size: 16px;
+}
+
+.addItemBtn {
+  display: flex;
+  background-color: #3692ff;
+  font-size: 16px;
+  color: #ffffff;
+  border-radius: 8px;
+  width: 133px;
+  height: 42px;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+}
diff --git a/src/components/pandaBestList.module.css b/src/components/pandaBestList.module.css
new file mode 100644
index 000000000..e83ed61a0
--- /dev/null
+++ b/src/components/pandaBestList.module.css
@@ -0,0 +1,39 @@
+.bestListContainer {
+  margin-bottom: 40px;
+}
+
+.itemImg {
+  width: 282px;
+  height: 282px;
+  border-radius: 16px;
+}
+
+.bestList {
+  gap: 24px;
+}
+.itemPage {
+  display: flex;
+  margin-top: 70px;
+  width: 100%;
+  justify-content: center;
+}
+
+.itemPage-container {
+  width: 1201px;
+}
+
+.allList,
+.bestList {
+  display: flex;
+}
+.title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #111827;
+  margin-bottom: 24px;
+}
+.bestImg {
+  width: 282px;
+  height: 282px;
+  border-radius: 16px;
+}
diff --git a/src/pages/AddItem.jsx b/src/pages/AddItem.tsx
similarity index 57%
rename from src/pages/AddItem.jsx
rename to src/pages/AddItem.tsx
index 8db1d154c..8a1227891 100644
--- a/src/pages/AddItem.jsx
+++ b/src/pages/AddItem.tsx
@@ -1,51 +1,53 @@
 import React, { useState } from "react";
-import "./AddItem.css";
-import AddItemForm from "../components/AddItemForm";
-import AddImgForm from "../components/AddImgForm";
-import AddTagForm from "../components/AddTagForm";
+import styles from "./addItem.module.css";
+import AddItemForm from "../components/AddItemForm.tsx";
+import AddImgForm from "../components/AddImgForm.tsx";
+import AddTagForm from "../components/AddTagForm.tsx";
 
-function AddItem() {
+const AddItem: React.FC = () => {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [price, setPrice] = useState("");
-  const [tags, setTags] = useState([]);
+  const [tags, setTags] = useState<string[]>([]);
 
-  const addTag = (tag) => {
+  const addTag = (tag: string) => {
     if (!tags.includes(tag)) {
       setTags([...tags, tag]);
     }
   };
 
-  const removeTag = (tagToRemove) => {
+  const removeTag = (tagToRemove: string) => {
     setTags(tags.filter((tag) => tag !== tagToRemove));
   };
 
-  const handleSubmit = (e) => {
+  const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
   };
 
-  const handleNameChange = (e) => {
-    setName(e.target.value);
-  };
-
-  const handleDescriptionChange = (e) => {
-    setDescription(e.target.value);
-  };
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { id, value } = e.target;
 
-  const handlePriceChange = (e) => {
-    setPrice(e.target.value);
+    if (id === "name") {
+      setName(value);
+    } else if (id === "description") {
+      setDescription(value);
+    } else if (id === "price") {
+      setPrice(value);
+    }
   };
 
   const isSubmitDisabled = !name || !description || !price || !tags.length;
 
   return (
-    <form onSubmit={handleSubmit}>
-      <main>
-        <div className="title">
+    <form onSubmit={handleSubmit} className={styles.form}>
+      <main className={styles.main}>
+        <div className={styles.title}>
           <h2>상품 등록하기</h2>
           <button
             type="submit"
-            className="additem-btn"
+            className={styles.addItemBtn}
             disabled={isSubmitDisabled}
           >
             등록
@@ -58,7 +60,7 @@ function AddItem() {
           type="text"
           placeholder="상품명을 입력해주세요"
           value={name}
-          onChange={handleNameChange}
+          onChange={handleChange}
         />
         <AddItemForm
           label="상품 소개"
@@ -67,7 +69,7 @@ function AddItem() {
           placeholder="상품 소개를 입력해주세요"
           isTextArea
           value={description}
-          onChange={handleDescriptionChange}
+          onChange={handleChange}
         />
         <AddItemForm
           label="판매가격"
@@ -75,12 +77,12 @@ function AddItem() {
           type="text"
           placeholder="판매가격을 입력해주세요"
           value={price}
-          onChange={handlePriceChange}
+          onChange={handleChange}
         />
         <AddTagForm tags={tags} onAddTag={addTag} onRemoveTag={removeTag} />
       </main>
     </form>
   );
-}
+};
 
 export default AddItem;
diff --git a/src/pages/ItemDetail.jsx b/src/pages/ItemDetail.tsx
similarity index 53%
rename from src/pages/ItemDetail.jsx
rename to src/pages/ItemDetail.tsx
index 768885c81..f39588224 100644
--- a/src/pages/ItemDetail.jsx
+++ b/src/pages/ItemDetail.tsx
@@ -1,35 +1,26 @@
 import React, { useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
-// import styled from "styled-components"; styled를 새롭게 배워서 사용해보려고 했는데...손에 익지 않아서 중도 포기합니다 ㅠ
 import defaultImage from "../asset/none.jpeg";
-import "./itemDetail.css";
+import styles from "./itemDetail.module.css";
 import heartIcon from "../asset/icon/ic_heart.png";
 import Profile from "../asset/icon/ic_profile.png";
 import Kebab from "../asset/icon/ic_kebab.png";
 import Back from "../asset/icon/ic_back.png";
-import DetailInquiry from "../components/DetailInquiry";
+import DetailInquiry from "../components/DetailInquiry.tsx";
 import DetailComments from "../components/DetailComments";
 
-// const ItemDetailSection = styled.div`
-//   width: 1200px;
-// `;
-
-// const MainImg = styled.div`
-//   margin-top: 70px;
-// `;
-
-function formatDate(dateString) {
+const formatDate = (dateString: string): string => {
   const date = new Date(dateString);
   const year = date.getFullYear();
   const month = (date.getMonth() + 1).toString().padStart(2, "0");
   const day = date.getDate().toString().padStart(2, "0");
   return `${year}.${month}.${day}`;
-}
+};
 
-function ItemDetail() {
-  const { productId } = useParams(); // URL에서 productId 가져오기
-  const [item, setItem] = useState(null); // 상품 데이터 상태
-  const [loading, setLoading] = useState(true); // 로딩 상태
+const ItemDetail: React.FC = () => {
+  const { productId } = useParams<{ productId: string }>();
+  const [item, setItem] = useState<any>(null);
+  const [loading, setLoading] = useState<boolean>(true);
 
   useEffect(() => {
     const fetchItem = async () => {
@@ -40,7 +31,7 @@ function ItemDetail() {
         const data = await res.json();
         setItem(data);
       } catch (error) {
-        console.error("그만...", error);
+        console.error("Error fetching item details:", error);
       } finally {
         setLoading(false);
       }
@@ -73,33 +64,33 @@ function ItemDetail() {
   const formattedDate = formatDate(createdAt);
 
   return (
-    <div className="main-section">
-      <div className="main-container">
-        <div className="detail-section">
+    <div className={styles.mainSection}>
+      <div className={styles.mainContainer}>
+        <div className={styles.detailSection}>
           <div>
-            <img className="main-img" src={imageUrl} alt={name} />
+            <img className={styles.mainImg} src={imageUrl} alt={name} />
           </div>
-          <div className="detail-container">
-            <div className="item-title">
-              <div className="item-title-text">
-                <p className="item-name">{name}</p>
-                <p className="item-price">
+          <div className={styles.detailContainer}>
+            <div className={styles.itemTitle}>
+              <div className={styles.itemTitleText}>
+                <p className={styles.itemName}>{name}</p>
+                <p className={styles.itemPrice}>
                   {price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원
                 </p>
               </div>
-              <img className="kebab-img" src={Kebab} alt="더보기 버튼" />
+              <img className={styles.kebabImg} src={Kebab} alt="더보기 버튼" />
             </div>
-            <div className="item-description">
-              <label className="item-description-label">상품소개</label>
-              <div className="item-description-text">{description}</div>
+            <div className={styles.itemDescription}>
+              <label className={styles.itemDescriptionLabel}>상품소개</label>
+              <div className={styles.itemDescriptionText}>{description}</div>
             </div>
 
-            <div className="item-tegs">
+            <div className={styles.itemTags}>
               <label>상품 태그</label>
               <div>
                 {tags.length > 0 ? (
                   tags.map((tag, index) => (
-                    <span className="item-tegs-box" key={index}>
+                    <span className={styles.itemTagBox} key={index}>
                       #{tag}
                     </span>
                   ))
@@ -108,36 +99,40 @@ function ItemDetail() {
                 )}
               </div>
             </div>
-            <div className="owner-info">
-              <div className="owner-info-profile">
+            <div className={styles.ownerInfo}>
+              <div className={styles.ownerInfoProfile}>
                 <img
-                  className="owner-profile-ic"
+                  className={styles.ownerProfileIcon}
                   src={Profile}
                   alt="프로필 아이콘"
                 />
-                <div className="owner-info-box">
-                  <p className="owner-nickname">{ownerNickname}</p>
-                  <p className="create">{formattedDate}</p>
+                <div className={styles.ownerInfoBox}>
+                  <p className={styles.ownerNickname}>{ownerNickname}</p>
+                  <p className={styles.createDate}>{formattedDate}</p>
                 </div>
               </div>
-              <div className="favorit-count">
-                <img className="heart-ic" src={heartIcon} alt="하트 아이콘" />
-                <p className="favorit-count-text">{favoriteCount}</p>
+              <div className={styles.favoriteCount}>
+                <img
+                  className={styles.heartIcon}
+                  src={heartIcon}
+                  alt="하트 아이콘"
+                />
+                <p className={styles.favoriteCountText}>{favoriteCount}</p>
               </div>
             </div>
           </div>
         </div>
         <DetailInquiry />
         <DetailComments />
-        <div className="back-btn-container">
-          <Link to="/" className="back-btn">
-            <p className="back-btn-text">목록으로 돌아가기</p>
+        <div className={styles.backBtnContainer}>
+          <Link to="/" className={styles.backBtn}>
+            <p className={styles.backBtnText}>목록으로 돌아가기</p>
             <img src={Back} alt="뒤로가기 아이콘" />
           </Link>
         </div>
       </div>
     </div>
   );
-}
+};
 
 export default ItemDetail;
diff --git a/src/pages/ItemsPage.jsx b/src/pages/ItemsPage.jsx
deleted file mode 100644
index e3eb581f1..000000000
--- a/src/pages/ItemsPage.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { getItems } from "../api/itemApi.js";
-import PandaBestList from "../components/PandaBestList.jsx";
-import PandaAllList from "../components/PandaAllList.jsx";
-
-function ItemsPage() {
-  const [items, setItems] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    async function fetchData() {
-      try {
-        const data = await getItems();
-        setItems(data);
-        setLoading(false);
-      } catch (err) {
-        setError(err.message);
-        setLoading(false);
-      }
-    }
-
-    fetchData();
-  }, []);
-
-  if (loading) return <p>Loading...</p>;
-  if (error) return <p>Error: {error}</p>;
-
-  return (
-    <>
-      <div className="itemPage">
-        <div className="itemPage-container">
-          <PandaBestList items={items} />
-          <PandaAllList items={items} />
-        </div>
-      </div>
-    </>
-  );
-}
-
-export default ItemsPage;
diff --git a/src/pages/ItemsPage.tsx b/src/pages/ItemsPage.tsx
new file mode 100644
index 000000000..88e87bcf3
--- /dev/null
+++ b/src/pages/ItemsPage.tsx
@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from "react";
+import { getItems } from "../api/itemApi";
+import PandaBestList from "../components/PandaBestList.tsx";
+import PandaAllList from "../components/PandaAllList.tsx";
+import styles from "./itemsPage.module.css";
+
+type Item = {
+  id: string;
+  name: string;
+  price: number;
+  description: string;
+  tags: string[];
+  images: string[];
+  favoriteCount: number;
+  createdAt: string;
+};
+
+function ItemsPage() {
+  const [items, setItems] = useState<Item[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const data: Item[] = await getItems();
+        setItems(data);
+        setLoading(false);
+      } catch (err: any) {
+        setError(err.message);
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, []);
+
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error}</p>;
+
+  return (
+    <div className={styles.itemPage}>
+      <div className={styles.itemPageContainer}>
+        <PandaBestList items={items} />
+        <PandaAllList items={items} />
+      </div>
+    </div>
+  );
+}
+
+export default ItemsPage;
diff --git a/src/pages/AddItem.css b/src/pages/addItem.module.css
similarity index 87%
rename from src/pages/AddItem.css
rename to src/pages/addItem.module.css
index 2a3337573..2cbc4cc45 100644
--- a/src/pages/AddItem.css
+++ b/src/pages/addItem.module.css
@@ -30,15 +30,17 @@ h2 {
   color: #1f2937;
 }
 
-.additem-btn {
+.addItemBtn {
   width: 74px;
   height: 42px;
   background-color: #3692ff;
   border: none;
   cursor: pointer;
+  border-radius: 8px;
+  color: #f3f4f6;
 }
 
-.additem-btn:disabled {
+.addItemBtn:disabled {
   background-color: #9ca3af;
   cursor: not-allowed;
 }
diff --git a/src/pages/itemDetail.css b/src/pages/itemDetail.module.css
similarity index 82%
rename from src/pages/itemDetail.css
rename to src/pages/itemDetail.module.css
index 1f199089f..92394a625 100644
--- a/src/pages/itemDetail.css
+++ b/src/pages/itemDetail.module.css
@@ -1,70 +1,70 @@
-.main-section {
+.mainSection {
   display: flex;
   justify-content: center;
   margin-top: 94px;
 }
 
-.main-container {
+.mainContainer {
   width: 1200px;
 }
 
-.detail-section {
+.detailSection {
   display: flex;
   padding-bottom: 40px;
   border-bottom: 1px solid #e5e7eb;
   margin-bottom: 40px;
 }
 
-.main-img {
+.mainImg {
   width: 486px;
   height: 486px;
   border-radius: 16px;
   margin-right: 24px;
 }
 
-.detail-container {
+.detailContainer {
   display: flex;
   flex-direction: column;
   width: 100%;
   justify-content: space-between;
 }
 
-.item-title {
+.itemTitle {
   display: flex;
   justify-content: space-between;
   margin-bottom: 40px;
 }
 
-.item-title-text {
+.itemTitleText {
   display: flex;
   flex-direction: column;
 }
 
-.kebab-img {
+.kebabImg {
   width: 24px;
   height: 24px;
 }
 
-.item-name {
+.itemName {
   font-size: 24px;
   font-weight: 600;
   margin: 0 0 16px;
   color: #1f2937;
 }
 
-.item-price {
+.itemPrice {
   font-size: 40px;
   font-weight: 600;
   margin: 0;
   color: #1f2937;
 }
 
-.item-tegs {
+.itemTegs {
   display: flex;
   flex-direction: column;
 }
 
-.item-tegs-box {
+.itemTegsBox {
   background-color: #f3f4f6;
   padding: 5px 16px;
   border-radius: 26px;
@@ -74,30 +74,30 @@
   margin: 0 8px 8px 0;
 }
 
-.owner-info {
+.ownerInfo {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 50px;
 }
 
-.owner-info-profile {
+.ownerInfoProfile {
   display: flex;
   align-items: center;
 }
 
-.owner-profile-ic {
+.ownerProfileIc {
   width: 40px;
   height: 40px;
   margin: 5px 16px 5px 0;
 }
 
-.owner-info-box {
+.ownerInfoBox {
   display: flex;
   flex-direction: column;
 }
 
-.owner-nickname {
+.ownerNickname {
   font-size: 14px;
   color: #4b5563;
   font-weight: 400;
@@ -111,7 +111,7 @@
   margin: 0;
 }
 
-.favorit-count {
+.favoritCount {
   display: flex;
   align-items: center;
   padding: 4px 12px;
@@ -121,42 +121,42 @@
   gap: 4px;
 }
 
-.heart-ic {
+.heartIc {
   width: 27px;
   height: 23px;
 }
 
-.favorit-count-text {
+.favoritCountText {
   font-size: 16px;
   color: #6b7280;
   font-weight: 400;
 }
 
-.item-description {
+.itemDescription {
   display: flex;
   flex-direction: column;
 }
 
-.item-description-label {
+.itemDescriptionLabel {
   font-size: 16px;
   font-weight: 600;
   margin: 0 0 16px;
   color: #4b5563;
 }
 
-.item-description-text {
+.itemDescriptionText {
   font-size: 16px;
   font-weight: 400;
   color: #4b5563;
 }
 
-.back-btn-container {
+.backBtnContainer {
   display: flex;
   width: 100%;
   justify-content: center;
 }
 
-.back-btn {
+.backBtn {
   display: flex;
   width: 240px;
   height: 48px;
@@ -173,6 +173,6 @@
   gap: 8px;
 }
 
-.back-btn:hover {
+.backBtn:hover {
   background-color: #3692cc;
 }
diff --git a/src/pages/itemsPage.module.css b/src/pages/itemsPage.module.css
new file mode 100644
index 000000000..255558cbf
--- /dev/null
+++ b/src/pages/itemsPage.module.css
@@ -0,0 +1,17 @@
+.itemPage {
+  display: flex;
+  margin-top: 70px;
+  width: 100%;
+  justify-content: center;
+}
+
+.itemPageContainer {
+  width: 1201px;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #111827;
+  margin-bottom: 24px;
+}