From 3d109db067149fbc721691281c57ce4e167b7686 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=9D=B8=EC=84=B1?= <leeming01@naver.com>
Date: Sun, 11 May 2025 20:26:10 +0900
Subject: [PATCH 01/13] =?UTF-8?q?feat:=20additem=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx           | 2 ++
 src/pages/AddPage.jsx | 5 +++++
 2 files changed, 7 insertions(+)
 create mode 100644 src/pages/AddPage.jsx

diff --git a/src/App.jsx b/src/App.jsx
index d00e7f8a..9f31321b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,6 +3,7 @@ import { Global } from "@emotion/react";
 import Header from "./components/Header/Header";
 import MainPage from "./pages/MainPage";
 import ItemPage from "./pages/ItemPage";
+import AddPage from "./pages/AddPage";
 import GlobalStyles from "./styles/GlobalStyles";
 import BoardPage from "./pages/BoardPage";
 
@@ -14,6 +15,7 @@ function App() {
         <Route element={<Header />}>
           <Route index element={<MainPage />} />
           <Route path="/items" element={<ItemPage />} />
+          <Route path="/additem" element={<AddPage />} /> 
           <Route path="/board" element={<BoardPage />} />
         </Route>
       </Routes>
diff --git a/src/pages/AddPage.jsx b/src/pages/AddPage.jsx
new file mode 100644
index 00000000..4a15a2d9
--- /dev/null
+++ b/src/pages/AddPage.jsx
@@ -0,0 +1,5 @@
+const AddPage = () => {
+  return <div>아이템 추가 페이지.</div>;
+};
+
+export default AddPage;
\ No newline at end of file

From 68f41423f5e9c4527f6288c23f7174c50774a426 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=9D=B8=EC=84=B1?= <leeming01@naver.com>
Date: Sun, 11 May 2025 20:27:11 +0900
Subject: [PATCH 02/13] =?UTF-8?q?feat:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=EC=82=AC=ED=95=AD=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=88=98=EC=A0=95=20-=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20=ED=8C=8C=EC=9D=BC=20=EC=B6=94=EA=B0=80=20-=20activ?=
 =?UTF-8?q?e=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/ic_X.png    | Bin 0 -> 1555 bytes
 src/assets/icons/ic_plus.png | Bin 0 -> 724 bytes
 src/components/Nav/Nav.jsx   |   9 +++++++--
 src/styles/GlobalStyles.js   |   8 ++++++++
 4 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/icons/ic_X.png
 create mode 100644 src/assets/icons/ic_plus.png

diff --git a/src/assets/icons/ic_X.png b/src/assets/icons/ic_X.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa81e538cfd9452d71bbb201ed3371b8f9743dbd
GIT binary patch
literal 1555
zcmV+u2JHEXP)<h;3K|Lk000e1NJLTq002S&002k`1^@s6LeC?P00009a7bBm001F4
z001F40Y#QEU;qFB0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1*l0xK~#7F?VHVS
z+(Z<>-#FeNl~$wz35o=bK%h!UG}|KrWpm)drQIS9h&E)~<j@o8Uy$T4$o8D3Thamt
z1a6Sv!XXYq9NUExq5^FSQa}P4MCc)Fdw6fNuGU_E%-CaRxAISlvi{f)|2*?%o@WN2
zprD|jpg<G`InZbrW43Nr07}P!I}`Y=6Zpkr9AF&0Kc<EITKIAYUpF1g+SEaB)@s!q
z$e7GT(8XIi%;OhK;${WXVFGBk+PbrT>D_7zGC;YAl^aF{KXd`oUwjxQx2&bP+B+sF
zM45;j1o&xbnl^voz0>QUfYc%ypBUq|1r5kgfENbW+as`)w#sObf|WI69wpp?gOWgS
zm?>GXarNf<`;dY}C1Sr7fJJ=y0Spj~LH**n>SaiPw1}>R4SYEPgGsZkLshn_NQt0$
z;9xQIxBml33uR2n$PgAWL=s$DBNmiJJ7dDZ5`&^KL=uScZWR_nNW|3}MjZw>CPXo@
zdec}IIWe|stgaa|oOSvMLks6{d2YH|k2)t(#1O`XFm^C_mZO4aWYutNSa<{^5Mw1P
zx>Sdj2#gD7@Sgz^965XlUODk19De)|Z2h(kcYnSIDmnJ_Q}EIY&%@|w3GV#xBm8y$
zAF20avNjc#tm$EILPN_O#32c9z4>}a0&)DgV{imt-^L%Tf|pUi8?T*uxJ{q`)z{y`
z_8)%=e+JWaN(#-OV}VtJGD+Dg@eJNASAt9V)e~?E|I*@@;6kNClFCZs(@M~RKoQ+^
zT8hz9DR6&U8DSDS-#J<WS-Pd7k3JF9Qb2-i^6oG9;NRT`fya`{h>}1gtacU3m;5{X
zMA(*g8WOO#*Y4C=RWjlveDmFH_**hqx;T1&)*MhZoHLM+-Txjaks%_1N?=lWK#BJ>
zpWPJuKBR<#Cbb~ck_16bUs$ouT7nBEWJh}wGEa%Xr_M_9iKHbXF9`%6<&(YJnr~wg
z6d@}kPYHzMu<_n)Plt*t&M;jWVb!GE6|sx5@|4hld#}|WEXP1GA|)et2?UD}!7@s)
z;$(!8nFNA+Z@T6^mR+VPD<e}01oK{Ns&NfjTp85)iXw9f0pu!zcovhhxEvv@|B)rR
ziim3>T~uYQGWdgK3o=4ff=lKyxc6H9!7`Hx8F3O+XRSi82oX4T*aXFh^cYoUtrB={
zy0=7dO{oacZnLVaRR)@x)Vu8qmd+L^LN<5ETL$CY?A`W=z|_<P1td+N@|3}B_I>ZR
zM?^P2Hz5USv&fuenEt`xzJ3JLG!qh{DwWPb#x4JjJ`viUa|IIc<k2UTW|1N?XfP=W
zZ43G)p!JDJT0P1q!|zbi+#yazLJ{VrTK^bmU>6%ZR!bmBSR$1+fr^q5m%Ig`alRP1
zKWOLN`Kk$$r6OpYQ&kojCWFRTrND0Wh3T`KL5KA4_rMa980eufNaM?mP7tFz^%DyC
zU1D4^4p#<M2g**je%+Rqtc~#buw#+)BXC5VrruQGQGmns+39L6>~LfnjvXv|W9BpC
zGY6|g+m4QVks`1KX>smI2hM>*<BLHph36EAVQ%{EI^$4>A%%YX?76ca#+@hhgi6~l
zR?1WK9B5vg7MqeRB!W6w7%!$6&+ZA9awslXP!&C0_?aciz>+Z>GWLVxR9sx>Me5-#
z1y7OzgI!IUBQ}&}BoK)guB@&Z%bdYH3=k9;DV`-+43}yJ&+6J|Ggzn=I6LsUm~`Qb
zv*)XcGG`+FQl^G6?u-D*n1O@A#GqJ{tqOjWEpEH^(dVbR&FVRp4wEv;up~+r<;xwf
zef-6wW7~_6;c`cn0$h}faG@$=>p(N~XmVNw(qS?ZV8NBFRt0A!q8FN^#vdCw$!)vR
zos~02b1_1eMDJifpotqz&EYNPu+2P{L>Ckk6ciMQ^FLG5+Es0gZIJ)~002ovPDHLk
FV1lV8z83%h

literal 0
HcmV?d00001

diff --git a/src/assets/icons/ic_plus.png b/src/assets/icons/ic_plus.png
new file mode 100644
index 0000000000000000000000000000000000000000..668c1444412b2edd038c30406f02b95a30324edf
GIT binary patch
literal 724
zcmeAS@N?(olHy`uVBq!ia0vp^6F``Q4M;wBd$a>caTa()7Bes?T7WR4>omgzpde#$
zkh>GZx^prwfgF}}M_)$<hK>E)e-c?47??6WT^vIy7~kGC^b-kWIQG$8_>Ju$xr5Rj
z>IOGvCNOdKPL*S=;uPf8-t1n`e?ZWpX{*BHH)$fC3U8j=u1tCS{<>q_*B^(CqHCf-
z4nu(3OEm8kmYLPp?G3j3CjNQT|Dy6A-&`|qJzo6x`h4zkju-Oj@y|EUe*I~$cIvkS
z6Hl+6`{~u++j~zR@{0cPdSb=2wDZ4=Pwx+E6=mf0JO7-$|H$X#Z_<|6XsqGLxM2F)
z{o>t!`Csk}Usx-yeD0lC7>kRGg9}ZFRlL3S8yL=~g~nf5FLXhQ`$JCHR@c8;`iYNL
zuDiA9-xJ2(h=%mdt8`xZ%UzhkT4A>O*rK}L=^G4z3a{nOoN>HD$&@KdWZo&)nKzy=
zn&$4-u<2c9ttUL&X2G}TXFV@ZJ?#|xcdq=~{WJgY9zDryWpn5E#eZ7sT|xruuZRDg
zJDqD)UD~UcKesop%bec-b>5j}8(-8f=>E2Aj!u1{H>+Jq`G=RM_edB2dvSN(Zf&{8
zoSYpU4ILabAo6tG=FF{Otc&KzFvtqre~9VNHh~KXZ(aX-aeuh&<j}lT?5nokfqd@d
oo8Nb&2k!sHWP?ZxK$g!#^Vls-)26vz6atBRy85}Sb4q9e0R8wWR{#J2

literal 0
HcmV?d00001

diff --git a/src/components/Nav/Nav.jsx b/src/components/Nav/Nav.jsx
index b607b533..e4439075 100644
--- a/src/components/Nav/Nav.jsx
+++ b/src/components/Nav/Nav.jsx
@@ -1,7 +1,12 @@
-import { NavLink } from "react-router-dom";
+import { NavLink, useLocation } from "react-router-dom";
 import { ulContainerStyle, navTitleStyle } from "./Nav.styles";
+import { css } from "@emotion/react";
 
 const Nav = () => {
+
+  const location = useLocation();
+  const isMarketActive = location.pathname.startsWith("/items") || location.pathname === "/additem";
+
   return (
     <nav>
       <ul css={ulContainerStyle}>
@@ -11,7 +16,7 @@ const Nav = () => {
           </NavLink>
         </li>
         <li>
-          <NavLink to="items" css={navTitleStyle}>
+          <NavLink to="items" css={[navTitleStyle, isMarketActive && css`color: #3692ff;`]}>
             중고마켓
           </NavLink>
         </li>
diff --git a/src/styles/GlobalStyles.js b/src/styles/GlobalStyles.js
index 69639fd5..53f35fae 100644
--- a/src/styles/GlobalStyles.js
+++ b/src/styles/GlobalStyles.js
@@ -25,6 +25,14 @@ const GlobalStyles = css`
   ul {
     list-style: none;
   }
+
+  textarea {
+    resize: none; 
+  }
+
+  textarea, input, button {
+    font: inherit;
+  }
 `;
 
 export default GlobalStyles;

From a20357f03b7d6f2bed4d7d73e1ba72d5a1c0190d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=9D=B8=EC=84=B1?= <leeming01@naver.com>
Date: Sun, 11 May 2025 20:28:38 +0900
Subject: [PATCH 03/13] =?UTF-8?q?feat:=20additem=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EA=B8=B0=EB=8A=A5=20=EB=B0=8F=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/AddPage.jsx       | 167 +++++++++++++++++++++++++++++++++++-
 src/pages/addPage.styles.js | 163 +++++++++++++++++++++++++++++++++++
 2 files changed, 328 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/addPage.styles.js

diff --git a/src/pages/AddPage.jsx b/src/pages/AddPage.jsx
index 4a15a2d9..ee165962 100644
--- a/src/pages/AddPage.jsx
+++ b/src/pages/AddPage.jsx
@@ -1,5 +1,168 @@
+import { useRef, useState } from 'react';
+import * as S from './addPage.styles';
+import { titleStyle } from '../styles/common';
+import plusImg from '../assets/icons/ic_plus.png';
+
 const AddPage = () => {
-  return <div>아이템 추가 페이지.</div>;
+  const fileInputRef = useRef(null);
+  const [imagePreview, setImagePreview] = useState(null);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [price, setPrice] = useState('');
+  const [tagInput, setTagInput] = useState('');
+  const [tags, setTags] = useState([]);
+
+  const isFormValid =
+    imagePreview &&
+    tags.length > 0 &&
+    name.trim() !== '' &&
+    description.trim() !== '' &&
+    price.trim() !== '';
+
+  const handleImageClick = () => {
+    if (imagePreview) {
+      setErrorMessage('*이미지 등록은 최대 1개까지 가능합니다.');
+      return;
+    }
+    setErrorMessage('');
+    fileInputRef.current.click();
+  };
+
+  const handleFileChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const imageUrl = URL.createObjectURL(file);
+      setImagePreview(imageUrl);
+      setErrorMessage('');
+    }
+  };
+
+  const handleImageRemove = () => {
+    setImagePreview(null);
+    setErrorMessage('');
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleTagInputChange = (e) => {
+    setTagInput(e.target.value);
+  };
+
+  const handleTagKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const trimmed = tagInput.trim();
+      if (!trimmed || tags.includes(trimmed)) return;
+      setTags([...tags, trimmed]);
+      setTagInput('');
+    }
+  };
+
+  const handleTagRemove = (removeIndex) => {
+    setTags(tags.filter((_, index) => index !== removeIndex));
+  };
+
+  return (
+    <>
+      <form css={S.formStyle}>
+        <div css={S.formHeaderStyle}>
+          <h1 css={titleStyle}>상품 등록하기</h1>
+          <button
+            css={S.submitButtonStyle}
+            type="submit"
+            disabled={!isFormValid}
+          >
+            등록
+          </button>
+        </div>
+
+        <div css={S.formMainStyle}>
+          <label>상품 이미지</label>
+          <div css={S.imageContainerStyle}>
+            <div css={S.formImageBoxStyle} onClick={handleImageClick}>
+              <img src={plusImg} alt="plus" />
+              <p>이미지 등록</p>
+              <input
+                type="file"
+                accept="image/*"
+                ref={fileInputRef}
+                onChange={handleFileChange}
+                style={{ display: 'none' }}
+              />
+            </div>
+
+            {imagePreview && (
+              <div css={S.itemPreviewContainerStyle}>
+                <img
+                  src={imagePreview}
+                  alt="preview"
+                  css={S.previewImageStyle}
+                />
+                <button
+                  onClick={handleImageRemove}
+                  type="button"
+                  css={S.imageCloseButtonStyle}
+                />
+              </div>
+            )}
+          </div>
+
+          {errorMessage && (
+            <p css={S.errorMessageStyle}>{errorMessage}</p>
+          )}
+
+          <label>상품명</label>
+          <input
+            css={S.inputStyle}
+            placeholder="상품명을 입력해주세요."
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+
+          <label>상품 소개</label>
+          <textarea
+            css={S.areaStyle}
+            placeholder="상품명을 입력해주세요."
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+          />
+
+          <label>판매 가격</label>
+          <input
+            type="number"
+            css={S.inputStyle}
+            placeholder="판매 가격을 입력해주세요"
+            value={price}
+            onChange={(e) => setPrice(e.target.value)}
+          />
+
+          <label>태그</label>
+          <input
+            css={S.inputStyle}
+            placeholder="태그를 입력해주세요."
+            value={tagInput}
+            onChange={handleTagInputChange}
+            onKeyDown={handleTagKeyDown}
+          />
+
+          <div css={S.tagListContainerStyle}>
+            {tags.map((tag, index) => (
+              <div key={index} css={S.tagItemStyle}>
+                {`#${tag}`}
+                <button
+                  type="button"
+                  onClick={() => handleTagRemove(index)}
+                  css={S.tagButtonStyle}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </form>
+    </>
+  );
 };
 
-export default AddPage;
\ No newline at end of file
+export default AddPage;
diff --git a/src/pages/addPage.styles.js b/src/pages/addPage.styles.js
new file mode 100644
index 00000000..f06c1996
--- /dev/null
+++ b/src/pages/addPage.styles.js
@@ -0,0 +1,163 @@
+import { css } from "@emotion/react";
+import mq from "../styles/media";
+import closeImg from '../assets/icons/ic_X.png';
+
+export const formStyle = css`
+  max-width: 120rem;
+  margin: 0 auto;
+  padding: 0 1.6rem;
+`;
+
+export const formHeaderStyle = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 2.4rem;
+`;
+
+export const submitButtonStyle = css`
+  width: 7.4rem;
+  height: 4.2rem;
+  border-radius: 0.8rem;
+  background: #3692ff;
+  font-size: 1.6rem;
+  font-weight: 600;
+  color: #F3F4F6;
+
+  &:disabled {
+    background: #9CA3AF;
+  }
+`;
+
+export const imageContainerStyle = css`
+  display: flex;
+  gap: 2.4rem;
+`;
+
+export const formImageBoxStyle = css`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  width: 16.8rem;
+  height: 16.8rem;
+  background-color: #F3F4F6;
+
+  p {
+    font-size: 1.6rem;
+    font-weight: 400;
+    color: #9CA3AF;
+  }
+
+  img {
+    width: 4.8rem;
+    height: 4.8rem;
+  }
+
+  ${mq({
+    width: ['16.8rem', '16.8rem', '28.2rem', '28.2rem'],
+    height: ['16.8rem', '16.8rem', '28.2rem', '28.2rem'],
+  })}
+`;
+
+export const itemPreviewContainerStyle = css`
+  position: relative;
+`;
+
+export const previewImageStyle = css`
+  width: 16.8rem;
+  height: 16.8rem;
+  object-fit: cover;
+  object-position: center;
+
+  ${mq({
+    width: ['16.8rem', '16.8rem', '28.2rem', '28.2rem'],
+    height: ['16.8rem', '16.8rem', '28.2rem', '28.2rem'],
+  })}
+`;
+
+export const closeButtonStyle = css`
+  background-image: url(${closeImg});
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+`;
+
+export const imageCloseButtonStyle = css`
+  ${closeButtonStyle};
+  position: absolute;
+  top: 3%;
+  right: 3%;
+  width: 2.4rem;
+  height: 2.4rem;
+`;
+
+export const errorMessageStyle = css`
+  color: red;
+  font-size: 1.6rem;
+  margin-top: 1.6rem;
+`;
+
+export const formMainStyle = css`
+  display: flex;
+  flex-direction: column;
+
+  label {
+    margin-block: 3.2rem 1.6rem;
+    font-size: 1.8rem;
+    font-weight: 700;
+    color: #1F2937;
+  }
+
+  input,
+  textarea {
+    background: #F3F4F6;
+    font-size: 1.6rem;
+    font-weight: 400;
+    width: 100%;
+    border-radius: 1.2rem;
+    padding: 1.6rem 2.4rem;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    color: #9CA3AF;
+  }
+`;
+
+export const inputStyle = css`
+  height: 5.6rem;
+`;
+
+export const areaStyle = css`
+  height: 28.2rem;
+`;
+
+export const tagListContainerStyle = css`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+`;
+
+export const tagItemStyle = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  background-color: #f2f2f2;
+  padding: 0.6rem 1.2rem;
+  border-radius: 26px;
+  font-size: 1.6rem;
+  font-weight: 400;
+`;
+
+export const tagButtonStyle = css`
+  ${closeButtonStyle};
+  width: 2rem;
+  height: 2rem;
+`;

From d8ef3903c9d9bccc2c3080a27e7fb03796fa91c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=9D=B8=EC=84=B1?= <leeming01@naver.com>
Date: Sun, 11 May 2025 20:41:05 +0900
Subject: [PATCH 04/13] =?UTF-8?q?refactor:=20FormHeader=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B6=84=EB=A6=AC=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormHeader/FormHeader.jsx      | 17 ++++++++++++++
 .../FormHeader/formHeader.styles.js           | 22 +++++++++++++++++++
 src/pages/AddPage.jsx                         | 13 ++---------
 src/pages/addPage.styles.js                   | 19 ----------------
 4 files changed, 41 insertions(+), 30 deletions(-)
 create mode 100644 src/components/FormHeader/FormHeader.jsx
 create mode 100644 src/components/FormHeader/formHeader.styles.js

diff --git a/src/components/FormHeader/FormHeader.jsx b/src/components/FormHeader/FormHeader.jsx
new file mode 100644
index 00000000..ac96e2f0
--- /dev/null
+++ b/src/components/FormHeader/FormHeader.jsx
@@ -0,0 +1,17 @@
+import * as S from './formHeader.styles';
+import { titleStyle } from '../../styles/common';
+
+const FormHeader = ({ isFormValid }) => (
+  <div css={S.formHeaderStyle}>
+    <h1 css={titleStyle}>상품 등록하기</h1>
+    <button
+      css={S.submitButtonStyle}
+      type="submit"
+      disabled={!isFormValid}
+    >
+      등록
+    </button>
+  </div>
+);
+
+export default FormHeader;
\ No newline at end of file
diff --git a/src/components/FormHeader/formHeader.styles.js b/src/components/FormHeader/formHeader.styles.js
new file mode 100644
index 00000000..d19a1680
--- /dev/null
+++ b/src/components/FormHeader/formHeader.styles.js
@@ -0,0 +1,22 @@
+import { css } from "@emotion/react";
+
+export const formHeaderStyle = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 2.4rem;
+`;
+
+export const submitButtonStyle = css`
+  width: 7.4rem;
+  height: 4.2rem;
+  border-radius: 0.8rem;
+  background: #3692ff;
+  font-size: 1.6rem;
+  font-weight: 600;
+  color: #F3F4F6;
+
+  &:disabled {
+    background: #9CA3AF;
+  }
+`;
\ No newline at end of file
diff --git a/src/pages/AddPage.jsx b/src/pages/AddPage.jsx
index ee165962..478c8485 100644
--- a/src/pages/AddPage.jsx
+++ b/src/pages/AddPage.jsx
@@ -1,7 +1,7 @@
 import { useRef, useState } from 'react';
 import * as S from './addPage.styles';
-import { titleStyle } from '../styles/common';
 import plusImg from '../assets/icons/ic_plus.png';
+import FormHeader from '../components/FormHeader/FormHeader';
 
 const AddPage = () => {
   const fileInputRef = useRef(null);
@@ -67,16 +67,7 @@ const AddPage = () => {
   return (
     <>
       <form css={S.formStyle}>
-        <div css={S.formHeaderStyle}>
-          <h1 css={titleStyle}>상품 등록하기</h1>
-          <button
-            css={S.submitButtonStyle}
-            type="submit"
-            disabled={!isFormValid}
-          >
-            등록
-          </button>
-        </div>
+				<FormHeader isFormValid={isFormValid} />
 
         <div css={S.formMainStyle}>
           <label>상품 이미지</label>
diff --git a/src/pages/addPage.styles.js b/src/pages/addPage.styles.js
index f06c1996..8f61d993 100644
--- a/src/pages/addPage.styles.js
+++ b/src/pages/addPage.styles.js
@@ -8,26 +8,7 @@ export const formStyle = css`
   padding: 0 1.6rem;
 `;
 
-export const formHeaderStyle = css`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 2.4rem;
-`;
 
-export const submitButtonStyle = css`
-  width: 7.4rem;
-  height: 4.2rem;
-  border-radius: 0.8rem;
-  background: #3692ff;
-  font-size: 1.6rem;
-  font-weight: 600;
-  color: #F3F4F6;
-
-  &:disabled {
-    background: #9CA3AF;
-  }
-`;
 
 export const imageContainerStyle = css`
   display: flex;

From f6927c48c74555ba0e4fa8465ec49be7c25d05c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=9D=B8=EC=84=B1?= <leeming01@naver.com>
Date: Sun, 11 May 2025 20:56:37 +0900
Subject: [PATCH 05/13] =?UTF-8?q?refactor:=20=EC=83=81=ED=92=88=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=B6=80=EB=B6=84=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B6=84=EB=A6=AC=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FormImageUpload/FormImageUpload.jsx       | 43 +++++++++++
 .../FormImageUpload/formImageUpload.styles.js | 66 ++++++++++++++++
 src/pages/AddPage.jsx                         | 43 +++--------
 src/pages/addPage.styles.js                   | 77 +------------------
 src/styles/common.js                          | 15 +++-
 5 files changed, 132 insertions(+), 112 deletions(-)
 create mode 100644 src/components/FormImageUpload/FormImageUpload.jsx
 create mode 100644 src/components/FormImageUpload/formImageUpload.styles.js

diff --git a/src/components/FormImageUpload/FormImageUpload.jsx b/src/components/FormImageUpload/FormImageUpload.jsx
new file mode 100644
index 00000000..e82bc672
--- /dev/null
+++ b/src/components/FormImageUpload/FormImageUpload.jsx
@@ -0,0 +1,43 @@
+import * as S from './formImageUpload.styles';
+import plusImg from '../../assets/icons/ic_plus.png';
+
+const FormImageUpload = ({
+  imagePreview,
+  onClick,
+  onChange,
+  onRemove,
+  errorMessage,
+  fileInputRef
+}) => (
+  <>
+    <label>상품 이미지</label>
+    <div css={S.imageContainerStyle}>
+      <div css={S.formImageBoxStyle} onClick={onClick}>
+        <img src={plusImg} alt="plus" />
+        <p>이미지 등록</p>
+        <input
+          type="file"
+          accept="image/*"
+          ref={fileInputRef}
+          onChange={onChange}
+          style={{ display: 'none' }}
+        />
+      </div>
+
+      {imagePreview && (
+        <div css={S.itemPreviewContainerStyle}>
+          <img src={imagePreview} alt="preview" css={S.previewImageStyle} />
+          <button
+            onClick={onRemove}
+            type="button"
+            css={S.imageCloseButtonStyle}
+          />
+        </div>
+      )}
+    </div>
+
+    {errorMessage && <p css={S.errorMessageStyle}>{errorMessage}</p>}
+  </>
+);
+
+export default FormImageUpload;
\ No newline at end of file
diff --git a/src/components/FormImageUpload/formImageUpload.styles.js b/src/components/FormImageUpload/formImageUpload.styles.js
new file mode 100644
index 00000000..5a8aaf4e
--- /dev/null
+++ b/src/components/FormImageUpload/formImageUpload.styles.js
@@ -0,0 +1,66 @@
+import { css } from "@emotion/react";
+import mq from "../../styles/media";
+import { closeButtonStyle } from '../../styles/common';
+
+export const imageContainerStyle = css`
+  display: flex;
+  gap: 2.4rem;
+`;
+
+export const formImageBoxStyle = css`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  width: 16.8rem;
+  height: 16.8rem;
+  background-color: #F3F4F6;
+
+  p {
+    font-size: 1.6rem;
+    font-weight: 400;
+    color: #9CA3AF;
+  }
+
+  img {
+    width: 4.8rem;
+    height: 4.8rem;
+  }
+
+  ${mq({
+    width: ['16.8rem', '16.8rem', '28.2rem', '28.2rem'],
+    height: ['16.8rem', '16.8rem', '28.2rem', '28.2rem'],
+  })}
+`;
+
+export const itemPreviewContainerStyle = css`
+  position: relative;
+`;
+
+export const previewImageStyle = css`
+  width: 16.8rem;
+  height: 16.8rem;
+  object-fit: cover;
+  object-position: center;
+
+  ${mq({
+    width: ['16.8rem', '16.8rem', '28.2rem', '28.2rem'],
+    height: ['16.8rem', '16.8rem', '28.2rem', '28.2rem'],
+  })}
+`;
+
+export const imageCloseButtonStyle = css`
+  ${closeButtonStyle};
+  position: absolute;
+  top: 3%;
+  right: 3%;
+  width: 2.4rem;
+  height: 2.4rem;
+`;
+
+export const errorMessageStyle = css`
+  color: red;
+  font-size: 1.6rem;
+  margin-top: 1.6rem;
+`;
\ No newline at end of file
diff --git a/src/pages/AddPage.jsx b/src/pages/AddPage.jsx
index 478c8485..00c26fac 100644
--- a/src/pages/AddPage.jsx
+++ b/src/pages/AddPage.jsx
@@ -1,7 +1,7 @@
 import { useRef, useState } from 'react';
 import * as S from './addPage.styles';
-import plusImg from '../assets/icons/ic_plus.png';
 import FormHeader from '../components/FormHeader/FormHeader';
+import FormImageUpload from '../components/FormImageUpload/FormImageUpload';
 
 const AddPage = () => {
   const fileInputRef = useRef(null);
@@ -70,39 +70,14 @@ const AddPage = () => {
 				<FormHeader isFormValid={isFormValid} />
 
         <div css={S.formMainStyle}>
-          <label>상품 이미지</label>
-          <div css={S.imageContainerStyle}>
-            <div css={S.formImageBoxStyle} onClick={handleImageClick}>
-              <img src={plusImg} alt="plus" />
-              <p>이미지 등록</p>
-              <input
-                type="file"
-                accept="image/*"
-                ref={fileInputRef}
-                onChange={handleFileChange}
-                style={{ display: 'none' }}
-              />
-            </div>
-
-            {imagePreview && (
-              <div css={S.itemPreviewContainerStyle}>
-                <img
-                  src={imagePreview}
-                  alt="preview"
-                  css={S.previewImageStyle}
-                />
-                <button
-                  onClick={handleImageRemove}
-                  type="button"
-                  css={S.imageCloseButtonStyle}
-                />
-              </div>
-            )}
-          </div>
-
-          {errorMessage && (
-            <p css={S.errorMessageStyle}>{errorMessage}</p>
-          )}
+					<FormImageUpload
+          imagePreview={imagePreview}
+          onClick={handleImageClick}
+          onChange={handleFileChange}
+          onRemove={handleImageRemove}
+          errorMessage={errorMessage}
+          fileInputRef={fileInputRef}
+					/>
 
           <label>상품명</label>
           <input
diff --git a/src/pages/addPage.styles.js b/src/pages/addPage.styles.js
index 8f61d993..367e7a87 100644
--- a/src/pages/addPage.styles.js
+++ b/src/pages/addPage.styles.js
@@ -1,6 +1,5 @@
 import { css } from "@emotion/react";
-import mq from "../styles/media";
-import closeImg from '../assets/icons/ic_X.png';
+import { closeButtonStyle } from '../styles/common';
 
 export const formStyle = css`
   max-width: 120rem;
@@ -9,80 +8,6 @@ export const formStyle = css`
 `;
 
 
-
-export const imageContainerStyle = css`
-  display: flex;
-  gap: 2.4rem;
-`;
-
-export const formImageBoxStyle = css`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 12px;
-  width: 16.8rem;
-  height: 16.8rem;
-  background-color: #F3F4F6;
-
-  p {
-    font-size: 1.6rem;
-    font-weight: 400;
-    color: #9CA3AF;
-  }
-
-  img {
-    width: 4.8rem;
-    height: 4.8rem;
-  }
-
-  ${mq({
-    width: ['16.8rem', '16.8rem', '28.2rem', '28.2rem'],
-    height: ['16.8rem', '16.8rem', '28.2rem', '28.2rem'],
-  })}
-`;
-
-export const itemPreviewContainerStyle = css`
-  position: relative;
-`;
-
-export const previewImageStyle = css`
-  width: 16.8rem;
-  height: 16.8rem;
-  object-fit: cover;
-  object-position: center;
-
-  ${mq({
-    width: ['16.8rem', '16.8rem', '28.2rem', '28.2rem'],
-    height: ['16.8rem', '16.8rem', '28.2rem', '28.2rem'],
-  })}
-`;
-
-export const closeButtonStyle = css`
-  background-image: url(${closeImg});
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  border-radius: 50%;
-  cursor: pointer;
-  border: none;
-`;
-
-export const imageCloseButtonStyle = css`
-  ${closeButtonStyle};
-  position: absolute;
-  top: 3%;
-  right: 3%;
-  width: 2.4rem;
-  height: 2.4rem;
-`;
-
-export const errorMessageStyle = css`
-  color: red;
-  font-size: 1.6rem;
-  margin-top: 1.6rem;
-`;
-
 export const formMainStyle = css`
   display: flex;
   flex-direction: column;
diff --git a/src/styles/common.js b/src/styles/common.js
index 2719142b..6f10f686 100644
--- a/src/styles/common.js
+++ b/src/styles/common.js
@@ -1,8 +1,19 @@
 import { css } from "@emotion/react";
+import closeImg from '../assets/icons/ic_X.png';
 
-const titleStyle = css`
+export const titleStyle = css`
   font-size: 2rem;
   font-weight: 700;
 `;
 
-export { titleStyle };
+export const closeButtonStyle = css`
+  background-image: url(${closeImg});
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+`;
+
+

From a9c6c97c08e5fa1e26049619a75dc886aad9f8ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=9D=B8=EC=84=B1?= <leeming01@naver.com>
Date: Sun, 11 May 2025 21:02:33 +0900
Subject: [PATCH 06/13] =?UTF-8?q?refactor:=20=EC=9E=85=EB=A0=A5=20?=
 =?UTF-8?q?=EB=B6=80=EB=B6=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormInputs/FormInputs.jsx      | 32 +++++++++++++
 .../FormInputs/fromInputs.styles.js           |  9 ++++
 src/pages/AddPage.jsx                         | 47 +++++++------------
 3 files changed, 57 insertions(+), 31 deletions(-)
 create mode 100644 src/components/FormInputs/FormInputs.jsx
 create mode 100644 src/components/FormInputs/fromInputs.styles.js

diff --git a/src/components/FormInputs/FormInputs.jsx b/src/components/FormInputs/FormInputs.jsx
new file mode 100644
index 00000000..773592ed
--- /dev/null
+++ b/src/components/FormInputs/FormInputs.jsx
@@ -0,0 +1,32 @@
+import * as S from './fromInputs.styles';
+
+const FormInputs = ({ name, onNameChange, description, onDescriptionChange, price, onPriceChange }) => (
+  <>
+    <label>상품명</label>
+    <input
+      css={S.inputStyle}
+      placeholder="상품명을 입력해주세요."
+      value={name}
+      onChange={(e) => onNameChange(e.target.value)}
+    />
+
+    <label>상품 소개</label>
+    <textarea
+      css={S.areaStyle}
+      placeholder="상품명을 입력해주세요."
+      value={description}
+      onChange={(e) => onDescriptionChange(e.target.value)}
+    />
+
+    <label>판매 가격</label>
+    <input
+      type="number"
+      css={S.inputStyle}
+      placeholder="판매 가격을 입력해주세요"
+      value={price}
+      onChange={(e) => onPriceChange(e.target.value)}
+    />
+  </>
+);
+
+export default FormInputs;
diff --git a/src/components/FormInputs/fromInputs.styles.js b/src/components/FormInputs/fromInputs.styles.js
new file mode 100644
index 00000000..d5c4bd61
--- /dev/null
+++ b/src/components/FormInputs/fromInputs.styles.js
@@ -0,0 +1,9 @@
+import { css } from "@emotion/react";
+
+export const inputStyle = css`
+  height: 5.6rem;
+`;
+
+export const areaStyle = css`
+  height: 28.2rem;
+`;
\ No newline at end of file
diff --git a/src/pages/AddPage.jsx b/src/pages/AddPage.jsx
index 00c26fac..587cbec6 100644
--- a/src/pages/AddPage.jsx
+++ b/src/pages/AddPage.jsx
@@ -2,6 +2,7 @@ import { useRef, useState } from 'react';
 import * as S from './addPage.styles';
 import FormHeader from '../components/FormHeader/FormHeader';
 import FormImageUpload from '../components/FormImageUpload/FormImageUpload';
+import FormInputs from '../components/FormInputs/FormInputs';
 
 const AddPage = () => {
   const fileInputRef = useRef(null);
@@ -67,41 +68,25 @@ const AddPage = () => {
   return (
     <>
       <form css={S.formStyle}>
-				<FormHeader isFormValid={isFormValid} />
+        <FormHeader isFormValid={isFormValid} />
 
         <div css={S.formMainStyle}>
-					<FormImageUpload
-          imagePreview={imagePreview}
-          onClick={handleImageClick}
-          onChange={handleFileChange}
-          onRemove={handleImageRemove}
-          errorMessage={errorMessage}
-          fileInputRef={fileInputRef}
-					/>
-
-          <label>상품명</label>
-          <input
-            css={S.inputStyle}
-            placeholder="상품명을 입력해주세요."
-            value={name}
-            onChange={(e) => setName(e.target.value)}
+          <FormImageUpload
+            imagePreview={imagePreview}
+            onClick={handleImageClick}
+            onChange={handleFileChange}
+            onRemove={handleImageRemove}
+            errorMessage={errorMessage}
+            fileInputRef={fileInputRef}
           />
 
-          <label>상품 소개</label>
-          <textarea
-            css={S.areaStyle}
-            placeholder="상품명을 입력해주세요."
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-          />
-
-          <label>판매 가격</label>
-          <input
-            type="number"
-            css={S.inputStyle}
-            placeholder="판매 가격을 입력해주세요"
-            value={price}
-            onChange={(e) => setPrice(e.target.value)}
+					<FormInputs
+            name={name}
+            onNameChange={setName}
+            description={description}
+            onDescriptionChange={setDescription}
+            price={price}
+            onPriceChange={setPrice}
           />
 
           <label>태그</label>

From 6076352134f3d96dc5ebc5ecef84032881275fc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=9D=B8=EC=84=B1?= <leeming01@naver.com>
Date: Sun, 11 May 2025 21:04:32 +0900
Subject: [PATCH 07/13] =?UTF-8?q?fix:=20=EC=98=A4=ED=83=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FormInputs/{fromInputs.styles.js => formInputs.styles.js}     | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/FormInputs/{fromInputs.styles.js => formInputs.styles.js} (100%)

diff --git a/src/components/FormInputs/fromInputs.styles.js b/src/components/FormInputs/formInputs.styles.js
similarity index 100%
rename from src/components/FormInputs/fromInputs.styles.js
rename to src/components/FormInputs/formInputs.styles.js

From c333b27a5db3e064813cb1f06dff58eae6c3b537 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=9D=B8=EC=84=B1?= <leeming01@naver.com>
Date: Sun, 11 May 2025 21:05:30 +0900
Subject: [PATCH 08/13] =?UTF-8?q?refactor:=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EC=82=AC=ED=95=AD=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormInputs/FormInputs.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FormInputs/FormInputs.jsx b/src/components/FormInputs/FormInputs.jsx
index 773592ed..441dc05a 100644
--- a/src/components/FormInputs/FormInputs.jsx
+++ b/src/components/FormInputs/FormInputs.jsx
@@ -1,4 +1,4 @@
-import * as S from './fromInputs.styles';
+import * as S from './formInputs.styles';
 
 const FormInputs = ({ name, onNameChange, description, onDescriptionChange, price, onPriceChange }) => (
   <>

From 2d1d970c984fc28a1b09a5b844d0b74236c451ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=9D=B8=EC=84=B1?= <leeming01@naver.com>
Date: Sun, 11 May 2025 21:08:31 +0900
Subject: [PATCH 09/13] =?UTF-8?q?refactor:=20=ED=83=9C=EA=B7=B8=20?=
 =?UTF-8?q?=EB=B6=80=EB=B6=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormTags/FormTags.jsx       | 29 +++++++++++++++++
 src/components/FormTags/formTags.styles.js | 27 ++++++++++++++++
 src/pages/AddPage.jsx                      | 28 +++++------------
 src/pages/addPage.styles.js                | 36 +---------------------
 4 files changed, 64 insertions(+), 56 deletions(-)
 create mode 100644 src/components/FormTags/FormTags.jsx
 create mode 100644 src/components/FormTags/formTags.styles.js

diff --git a/src/components/FormTags/FormTags.jsx b/src/components/FormTags/FormTags.jsx
new file mode 100644
index 00000000..9036f1ed
--- /dev/null
+++ b/src/components/FormTags/FormTags.jsx
@@ -0,0 +1,29 @@
+import * as S from './formTags.styles';
+
+const FormTags = ({ tagInput, tags, onTagInputChange, onTagKeyDown, onTagRemove }) => (
+  <>
+    <label>태그</label>
+    <input
+      css={S.inputStyle}
+      placeholder="태그를 입력해주세요."
+      value={tagInput}
+      onChange={onTagInputChange}
+      onKeyDown={onTagKeyDown}
+    />
+
+    <div css={S.tagListContainerStyle}>
+      {tags.map((tag, index) => (
+        <div key={index} css={S.tagItemStyle}>
+          {`#${tag}`}
+          <button
+            type="button"
+            onClick={() => onTagRemove(index)}
+            css={S.tagButtonStyle}
+          />
+        </div>
+      ))}
+    </div>
+  </>
+);
+
+export default FormTags;
\ No newline at end of file
diff --git a/src/components/FormTags/formTags.styles.js b/src/components/FormTags/formTags.styles.js
new file mode 100644
index 00000000..e0e0a489
--- /dev/null
+++ b/src/components/FormTags/formTags.styles.js
@@ -0,0 +1,27 @@
+import { css } from "@emotion/react";
+import { closeButtonStyle } from '../../styles/common';
+
+export const tagListContainerStyle = css`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+`;
+
+export const tagItemStyle = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  background-color: #f2f2f2;
+  padding: 0.6rem 1.2rem;
+  border-radius: 26px;
+  font-size: 1.6rem;
+  font-weight: 400;
+`;
+
+export const tagButtonStyle = css`
+  ${closeButtonStyle};
+  width: 2rem;
+  height: 2rem;
+`;
\ No newline at end of file
diff --git a/src/pages/AddPage.jsx b/src/pages/AddPage.jsx
index 587cbec6..1cd1b972 100644
--- a/src/pages/AddPage.jsx
+++ b/src/pages/AddPage.jsx
@@ -3,6 +3,7 @@ import * as S from './addPage.styles';
 import FormHeader from '../components/FormHeader/FormHeader';
 import FormImageUpload from '../components/FormImageUpload/FormImageUpload';
 import FormInputs from '../components/FormInputs/FormInputs';
+import FormTags from '../components/FormTags/FormTags';
 
 const AddPage = () => {
   const fileInputRef = useRef(null);
@@ -88,28 +89,13 @@ const AddPage = () => {
             price={price}
             onPriceChange={setPrice}
           />
-
-          <label>태그</label>
-          <input
-            css={S.inputStyle}
-            placeholder="태그를 입력해주세요."
-            value={tagInput}
-            onChange={handleTagInputChange}
-            onKeyDown={handleTagKeyDown}
+          <FormTags
+            tagInput={tagInput}
+            tags={tags}
+            onTagInputChange={handleTagInputChange}
+            onTagKeyDown={handleTagKeyDown}
+            onTagRemove={handleTagRemove}
           />
-
-          <div css={S.tagListContainerStyle}>
-            {tags.map((tag, index) => (
-              <div key={index} css={S.tagItemStyle}>
-                {`#${tag}`}
-                <button
-                  type="button"
-                  onClick={() => handleTagRemove(index)}
-                  css={S.tagButtonStyle}
-                />
-              </div>
-            ))}
-          </div>
         </div>
       </form>
     </>
diff --git a/src/pages/addPage.styles.js b/src/pages/addPage.styles.js
index 367e7a87..c352e6b9 100644
--- a/src/pages/addPage.styles.js
+++ b/src/pages/addPage.styles.js
@@ -1,5 +1,4 @@
 import { css } from "@emotion/react";
-import { closeButtonStyle } from '../styles/common';
 
 export const formStyle = css`
   max-width: 120rem;
@@ -33,37 +32,4 @@ export const formMainStyle = css`
   textarea::placeholder {
     color: #9CA3AF;
   }
-`;
-
-export const inputStyle = css`
-  height: 5.6rem;
-`;
-
-export const areaStyle = css`
-  height: 28.2rem;
-`;
-
-export const tagListContainerStyle = css`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 8px;
-`;
-
-export const tagItemStyle = css`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-  background-color: #f2f2f2;
-  padding: 0.6rem 1.2rem;
-  border-radius: 26px;
-  font-size: 1.6rem;
-  font-weight: 400;
-`;
-
-export const tagButtonStyle = css`
-  ${closeButtonStyle};
-  width: 2rem;
-  height: 2rem;
-`;
+`;
\ No newline at end of file

From 5e208c66d35e7683ee7fab6755a85ea1071f353f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=9D=B8=EC=84=B1?= <leeming01@naver.com>
Date: Sun, 11 May 2025 21:12:59 +0900
Subject: [PATCH 10/13] =?UTF-8?q?refactor:=20=EC=BB=A8=EB=B2=A4=EC=85=98?=
 =?UTF-8?q?=EC=97=90=20=EB=A7=9E=EA=B2=8C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormHeader/FormHeader.jsx      | 28 +++++----
 .../FormImageUpload/FormImageUpload.jsx       | 60 ++++++++++---------
 src/components/FormInputs/FormInputs.jsx      | 54 +++++++++--------
 src/components/FormTags/FormTags.jsx          | 52 ++++++++--------
 4 files changed, 101 insertions(+), 93 deletions(-)

diff --git a/src/components/FormHeader/FormHeader.jsx b/src/components/FormHeader/FormHeader.jsx
index ac96e2f0..805e2108 100644
--- a/src/components/FormHeader/FormHeader.jsx
+++ b/src/components/FormHeader/FormHeader.jsx
@@ -1,17 +1,19 @@
 import * as S from './formHeader.styles';
 import { titleStyle } from '../../styles/common';
 
-const FormHeader = ({ isFormValid }) => (
-  <div css={S.formHeaderStyle}>
-    <h1 css={titleStyle}>상품 등록하기</h1>
-    <button
-      css={S.submitButtonStyle}
-      type="submit"
-      disabled={!isFormValid}
-    >
-      등록
-    </button>
-  </div>
-);
+const FormHeader = ({ isFormValid }) => {
+  return (
+    <div css={S.formHeaderStyle}>
+      <h1 css={titleStyle}>상품 등록하기</h1>
+      <button
+        css={S.submitButtonStyle}
+        type="submit"
+        disabled={!isFormValid}
+      >
+        등록
+      </button>
+    </div>
+  );
+};
 
-export default FormHeader;
\ No newline at end of file
+export default FormHeader;
diff --git a/src/components/FormImageUpload/FormImageUpload.jsx b/src/components/FormImageUpload/FormImageUpload.jsx
index e82bc672..ce075a68 100644
--- a/src/components/FormImageUpload/FormImageUpload.jsx
+++ b/src/components/FormImageUpload/FormImageUpload.jsx
@@ -8,36 +8,38 @@ const FormImageUpload = ({
   onRemove,
   errorMessage,
   fileInputRef
-}) => (
-  <>
-    <label>상품 이미지</label>
-    <div css={S.imageContainerStyle}>
-      <div css={S.formImageBoxStyle} onClick={onClick}>
-        <img src={plusImg} alt="plus" />
-        <p>이미지 등록</p>
-        <input
-          type="file"
-          accept="image/*"
-          ref={fileInputRef}
-          onChange={onChange}
-          style={{ display: 'none' }}
-        />
-      </div>
-
-      {imagePreview && (
-        <div css={S.itemPreviewContainerStyle}>
-          <img src={imagePreview} alt="preview" css={S.previewImageStyle} />
-          <button
-            onClick={onRemove}
-            type="button"
-            css={S.imageCloseButtonStyle}
+}) => {
+  return (
+    <>
+      <label>상품 이미지</label>
+      <div css={S.imageContainerStyle}>
+        <div css={S.formImageBoxStyle} onClick={onClick}>
+          <img src={plusImg} alt="plus" />
+          <p>이미지 등록</p>
+          <input
+            type="file"
+            accept="image/*"
+            ref={fileInputRef}
+            onChange={onChange}
+            style={{ display: 'none' }}
           />
         </div>
-      )}
-    </div>
 
-    {errorMessage && <p css={S.errorMessageStyle}>{errorMessage}</p>}
-  </>
-);
+        {imagePreview && (
+          <div css={S.itemPreviewContainerStyle}>
+            <img src={imagePreview} alt="preview" css={S.previewImageStyle} />
+            <button
+              onClick={onRemove}
+              type="button"
+              css={S.imageCloseButtonStyle}
+            />
+          </div>
+        )}
+      </div>
+
+      {errorMessage && <p css={S.errorMessageStyle}>{errorMessage}</p>}
+    </>
+  );
+};
 
-export default FormImageUpload;
\ No newline at end of file
+export default FormImageUpload;
diff --git a/src/components/FormInputs/FormInputs.jsx b/src/components/FormInputs/FormInputs.jsx
index 441dc05a..3e0a1dfb 100644
--- a/src/components/FormInputs/FormInputs.jsx
+++ b/src/components/FormInputs/FormInputs.jsx
@@ -1,32 +1,34 @@
 import * as S from './formInputs.styles';
 
-const FormInputs = ({ name, onNameChange, description, onDescriptionChange, price, onPriceChange }) => (
-  <>
-    <label>상품명</label>
-    <input
-      css={S.inputStyle}
-      placeholder="상품명을 입력해주세요."
-      value={name}
-      onChange={(e) => onNameChange(e.target.value)}
-    />
+const FormInputs = ({ name, onNameChange, description, onDescriptionChange, price, onPriceChange }) => {
+  return (
+    <>
+      <label>상품명</label>
+      <input
+        css={S.inputStyle}
+        placeholder="상품명을 입력해주세요."
+        value={name}
+        onChange={(e) => onNameChange(e.target.value)}
+      />
 
-    <label>상품 소개</label>
-    <textarea
-      css={S.areaStyle}
-      placeholder="상품명을 입력해주세요."
-      value={description}
-      onChange={(e) => onDescriptionChange(e.target.value)}
-    />
+      <label>상품 소개</label>
+      <textarea
+        css={S.areaStyle}
+        placeholder="상품명을 입력해주세요."
+        value={description}
+        onChange={(e) => onDescriptionChange(e.target.value)}
+      />
 
-    <label>판매 가격</label>
-    <input
-      type="number"
-      css={S.inputStyle}
-      placeholder="판매 가격을 입력해주세요"
-      value={price}
-      onChange={(e) => onPriceChange(e.target.value)}
-    />
-  </>
-);
+      <label>판매 가격</label>
+      <input
+        type="number"
+        css={S.inputStyle}
+        placeholder="판매 가격을 입력해주세요"
+        value={price}
+        onChange={(e) => onPriceChange(e.target.value)}
+      />
+    </>
+  );
+};
 
 export default FormInputs;
diff --git a/src/components/FormTags/FormTags.jsx b/src/components/FormTags/FormTags.jsx
index 9036f1ed..bf16cddc 100644
--- a/src/components/FormTags/FormTags.jsx
+++ b/src/components/FormTags/FormTags.jsx
@@ -1,29 +1,31 @@
 import * as S from './formTags.styles';
 
-const FormTags = ({ tagInput, tags, onTagInputChange, onTagKeyDown, onTagRemove }) => (
-  <>
-    <label>태그</label>
-    <input
-      css={S.inputStyle}
-      placeholder="태그를 입력해주세요."
-      value={tagInput}
-      onChange={onTagInputChange}
-      onKeyDown={onTagKeyDown}
-    />
+const FormTags = ({ tagInput, tags, onTagInputChange, onTagKeyDown, onTagRemove }) => {
+  return (
+    <>
+      <label>태그</label>
+      <input
+        css={S.inputStyle}
+        placeholder="태그를 입력해주세요."
+        value={tagInput}
+        onChange={onTagInputChange}
+        onKeyDown={onTagKeyDown}
+      />
 
-    <div css={S.tagListContainerStyle}>
-      {tags.map((tag, index) => (
-        <div key={index} css={S.tagItemStyle}>
-          {`#${tag}`}
-          <button
-            type="button"
-            onClick={() => onTagRemove(index)}
-            css={S.tagButtonStyle}
-          />
-        </div>
-      ))}
-    </div>
-  </>
-);
+      <div css={S.tagListContainerStyle}>
+        {tags.map((tag, index) => (
+          <div key={index} css={S.tagItemStyle}>
+            {`#${tag}`}
+            <button
+              type="button"
+              onClick={() => onTagRemove(index)}
+              css={S.tagButtonStyle}
+            />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
 
-export default FormTags;
\ No newline at end of file
+export default FormTags;

From 302982f05612f5192c555ed46a811381c2dd39bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=9D=B8=EC=84=B1?= <leeming01@naver.com>
Date: Sun, 11 May 2025 21:14:11 +0900
Subject: [PATCH 11/13] =?UTF-8?q?fix:=20=EB=AC=B8=EA=B5=AC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormInputs/FormInputs.jsx | 4 ++--
 src/components/FormTags/FormTags.jsx     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/FormInputs/FormInputs.jsx b/src/components/FormInputs/FormInputs.jsx
index 3e0a1dfb..d3244e22 100644
--- a/src/components/FormInputs/FormInputs.jsx
+++ b/src/components/FormInputs/FormInputs.jsx
@@ -6,7 +6,7 @@ const FormInputs = ({ name, onNameChange, description, onDescriptionChange, pric
       <label>상품명</label>
       <input
         css={S.inputStyle}
-        placeholder="상품명을 입력해주세요."
+        placeholder="상품명을 입력해주세요"
         value={name}
         onChange={(e) => onNameChange(e.target.value)}
       />
@@ -14,7 +14,7 @@ const FormInputs = ({ name, onNameChange, description, onDescriptionChange, pric
       <label>상품 소개</label>
       <textarea
         css={S.areaStyle}
-        placeholder="상품명을 입력해주세요."
+        placeholder="상품 소개를 입력해주세요"
         value={description}
         onChange={(e) => onDescriptionChange(e.target.value)}
       />
diff --git a/src/components/FormTags/FormTags.jsx b/src/components/FormTags/FormTags.jsx
index bf16cddc..31b0a852 100644
--- a/src/components/FormTags/FormTags.jsx
+++ b/src/components/FormTags/FormTags.jsx
@@ -6,7 +6,7 @@ const FormTags = ({ tagInput, tags, onTagInputChange, onTagKeyDown, onTagRemove
       <label>태그</label>
       <input
         css={S.inputStyle}
-        placeholder="태그를 입력해주세요."
+        placeholder="태그를 입력해주세요"
         value={tagInput}
         onChange={onTagInputChange}
         onKeyDown={onTagKeyDown}

From b9ae3dddffa5ee33b69f098918696b6229621bac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=9D=B8=EC=84=B1?= <leeming01@naver.com>
Date: Sun, 11 May 2025 21:14:53 +0900
Subject: [PATCH 12/13] =?UTF-8?q?refactor:=20=EC=8A=A4=ED=81=AC=EB=A6=B0?=
 =?UTF-8?q?=20=EB=A6=AC=EB=8D=94=20=EB=B0=8F=20title=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 4a5058af..2b7ea3a2 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
@@ -8,7 +8,7 @@
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>판다마켓</title>
   </head>
   <body>
     <div id="root"></div>

From 9e2ae06882ebae315053f7b00288245d1b1795ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=9D=B8=EC=84=B1?= <leeming01@naver.com>
Date: Sun, 11 May 2025 21:19:10 +0900
Subject: [PATCH 13/13] =?UTF-8?q?refactor:=20=EC=A0=84=EC=97=AD=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20=EC=9D=BC=EB=B6=80=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ToolBar/TooBar.styles.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/ToolBar/TooBar.styles.js b/src/components/ToolBar/TooBar.styles.js
index 4c104207..290cb624 100644
--- a/src/components/ToolBar/TooBar.styles.js
+++ b/src/components/ToolBar/TooBar.styles.js
@@ -41,6 +41,8 @@ export const inputStyle = css`
   background-color: #F3F4F6;
   padding-left: 4.4rem;
   padding-block: 0.9rem;
+  font-size: 1.6rem;
+  font-weight: 400;
 
   ${mq({
     width: ['28.8rem', '24.2rem', '24.2rem', '32.5rem'],