From e10d3364bdc315b44782f83f86d7c7f23d23414e Mon Sep 17 00:00:00 2001 From: two678 Date: Fri, 9 May 2025 21:48:09 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EC=A4=91=EA=B3=A0?= =?UTF-8?q?=EB=A7=88=EC=BC=93=20=EA=B2=BD=EB=A1=9C=EC=97=90=20=EB=94=B0?= =?UTF-8?q?=EB=9D=BC=20=EC=83=89=EA=B9=94=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/ic_plus.png | Bin 0 -> 515 bytes public/icons/ic_x_button.png | Bin 0 -> 1091 bytes src/components/Header/Header.styles.js | 8 +++++ src/components/Header/index.jsx | 17 ++++++++++- src/pages/AddItem.jsx | 5 --- src/pages/AddItem/components/AddItemTop.jsx | 3 ++ src/pages/AddItem/index.jsx | 32 ++++++++++++++++++++ 7 files changed, 59 insertions(+), 6 deletions(-) create mode 100644 public/icons/ic_plus.png create mode 100644 public/icons/ic_x_button.png delete mode 100644 src/pages/AddItem.jsx create mode 100644 src/pages/AddItem/components/AddItemTop.jsx create mode 100644 src/pages/AddItem/index.jsx diff --git a/public/icons/ic_plus.png b/public/icons/ic_plus.png new file mode 100644 index 0000000000000000000000000000000000000000..0616e5cf9e565253b6a8be1266e06139fe10a602 GIT binary patch literal 515 zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7OGooCO|{#S9E$svykh8Km+7D9BhG z@ivi#yuG&syHT z|GJILyRLvktRBy1UQZMAIl^Gs%NiWrP{5(!#$d?QA?VP4B^jQetTnT4&eIB+*( zukU9)iL%AIYXb@!_PyVx>6FbE?kw=T`>nBT-R>9bAEdunx_9sT`r`HbZORwk6aL?F zl%QjRxyXth<=SzoJEjGKB-pyiyg=58UW{u>~6?;#& QXn=$~UHx3vIVCg!0NXpe4gdfE literal 0 HcmV?d00001 diff --git a/public/icons/ic_x_button.png b/public/icons/ic_x_button.png new file mode 100644 index 0000000000000000000000000000000000000000..8cf21bb13b93f5b6209e0d0d526fc1a4662f4d6b GIT binary patch literal 1091 zcmV-J1ibr+P)pdA94$Sj8!F1-<~bC zU~cMqG!LKn62J_vgfNR;!|TVuvR@(E0v1;?NyESl^gS+v_J}!~7`t*;r;(O`+pC!r zg7Ufm>YUWXSae#szDgx$$Ykix2pU7KrHqkyJX(-dG@$@BehrN?p3(0(Oo~*1Gi>_N zcp^*pGV`)Zo zI^ByCJ;&|e#bODMpS(~O!HmCr=^Q!^x7+`J{_+)1*Ec-d&|c``^#XSiGw(wK=0#@E zv96=iy4A+J?PXXYe*WP{AtDc%Z{L61*X=4Ic*e75JbSqb8FV-&dF3?%*s4-x;=02| zRfNcR_KfXcJ5Zo=G5s(CnE+Za3`N+BRYU|}yp0hG^`X|@{SeKhB@+>p@eYyd0^S@5 zLlZ9%0UFP|TjSh71TaJ*0yCar)Gpz90(`IYc_LiuHeO(x(rQ!(x}LYMYT9UTv?;`U zU3dbdYj6>~3G1Sh>^zWXV#B8ZQMA!bb`tW{1-vktgC<^~QYYCdkgqP_3?VZM4Pm6typo+4r3&VF<-$EN-O$g| z4SiB{pLzen*+F{{#zs94dzH>cX;^La z(IO+4xDg$YRZ?1w(j$#1d@M2QAj=MSRVr#7ugfA+5U^o05mP^2*V+%T2OGqS)0gBC zJZu%5)G?mn_Y+gtYN1Du2F4Kp%Tp{#lgo+76j{<#p$}D5SkKrzX zeP+FL|Isk1R3gr?OxU^hKC`lolC#&ynuO$T#zxoCq)C&y`3 { + switch (location.pathname) { + case "/items": + case "/additem": + return LinkStyle; + default: + return "DefaultStyle"; // 기본 클래스 + } + }; useEffect(() => { const handleResize = () => { @@ -47,7 +60,9 @@ function Header() { />
자유게시판 - 중고마켓 + + 중고마켓 +
프로필 이미지 diff --git a/src/pages/AddItem.jsx b/src/pages/AddItem.jsx deleted file mode 100644 index 2842bf37..00000000 --- a/src/pages/AddItem.jsx +++ /dev/null @@ -1,5 +0,0 @@ -function AddItem() { - return
중고마켓 등록 페이지입니다.
; -} - -export default AddItem; diff --git a/src/pages/AddItem/components/AddItemTop.jsx b/src/pages/AddItem/components/AddItemTop.jsx new file mode 100644 index 00000000..08fbc555 --- /dev/null +++ b/src/pages/AddItem/components/AddItemTop.jsx @@ -0,0 +1,3 @@ +export default function AddItemTop() { + return
AddItemTop
; +} diff --git a/src/pages/AddItem/index.jsx b/src/pages/AddItem/index.jsx new file mode 100644 index 00000000..d2429c2f --- /dev/null +++ b/src/pages/AddItem/index.jsx @@ -0,0 +1,32 @@ +import { css } from "@emotion/react"; +import AddItemTop from "./components/AddItemTop"; +import { tablet, mobile } from "@/styles/utils/mixins"; + +function AddItem() { + return ( +
+ +
+ ); +} + +export default AddItem; + +const addItemContainer = css` + display: flex; + width: 1200px; + flex-direction: column; + align-items: flex-start; + gap: 24px; + margin: 24px auto 69px; + + ${tablet(css` + width: 100%; + margin: 16px 24px 76px; + `)} + + ${mobile(css` + width: 100%; + margin: 24px 14px 70px; + `)} +`; From 49784a89b58461068211dda70a0d850dbbe1cb68 Mon Sep 17 00:00:00 2001 From: two678 Date: Sat, 10 May 2025 00:40:25 +0900 Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EC=83=81=ED=92=88=20?= =?UTF-8?q?=EB=93=B1=EB=A1=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=81?= =?UTF-8?q?=EB=8B=A8=20=EB=B6=80=EB=B6=84=20&=20=EC=83=81=ED=92=88=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=93=B1=EB=A1=9D=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/AddItem/components/AddItemImage.jsx | 64 ++++++++++++++++ .../AddItem/components/AddItemImage.styles.js | 76 +++++++++++++++++++ src/pages/AddItem/components/AddItemTop.jsx | 53 ++++++++++++- src/pages/AddItem/index.jsx | 34 +++++++-- 4 files changed, 219 insertions(+), 8 deletions(-) create mode 100644 src/pages/AddItem/components/AddItemImage.jsx create mode 100644 src/pages/AddItem/components/AddItemImage.styles.js diff --git a/src/pages/AddItem/components/AddItemImage.jsx b/src/pages/AddItem/components/AddItemImage.jsx new file mode 100644 index 00000000..23c2221d --- /dev/null +++ b/src/pages/AddItem/components/AddItemImage.jsx @@ -0,0 +1,64 @@ +import plusImage from "/icons/ic_plus.png"; +import deleteImage from "/icons/ic_x_button.png"; +import { useState, useRef } from "react"; +import { + addItemImageContainer, + addItemImageButtonContainer, + addItemImageButtonStyle, + previewImageContainer, + previewImageStyle, + deleteImageStyle, +} from "./AddItemImage.styles"; + +function AddItemImage() { + const [preview, setPreview] = useState(""); // 초기값을 빈 문자열로 설정 + const uploadImg = useRef(null); // useRef 초기화 + + const handleImageUpload = () => { + uploadImg.current?.click(); // 파일 입력 클릭 + }; + + const handlePreview = (e) => { + // 파일 객체에 대해 임시 URL 생성하여 preview set + if (e.target.files && e.target.files.length > 0) { + setPreview(URL.createObjectURL(e.target.files[0])); + } + }; + + const handleDelete = () => { + setPreview(""); // 미리보기 삭제 + uploadImg.current.value = null; // 파일 입력 초기화 + }; + + return ( +
+

상품 이미지

+
+ +
+ {preview && ( + 이미지 미리보기 + )} + + 이미지 삭제 +
+
+
+ ); +} + +export default AddItemImage; diff --git a/src/pages/AddItem/components/AddItemImage.styles.js b/src/pages/AddItem/components/AddItemImage.styles.js new file mode 100644 index 00000000..2fa698dd --- /dev/null +++ b/src/pages/AddItem/components/AddItemImage.styles.js @@ -0,0 +1,76 @@ +import { css } from "@emotion/react"; +import { tablet, desktop } from "@/styles/utils/mixins"; + +export const addItemImageContainer = css` + width: 100%; + gap: 16px; +`; + +export const addItemImageButtonStyle = css` + width: 168px; + height: 168px; + padding: 42px 47px; + flex-shrink: 0; + border-radius: 12px; + gap: 12px; + background: var(--gray200); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + ${desktop(css` + width: 282px; + height: 282px; + `)} + + img { + width: 48px; + height: 48px; + } + + p { + color: var(--gray400); + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 26px; + } +`; + +export const addItemImageButtonContainer = css` + display: flex; + align-items: flex-start; + gap: 24px; + + ${tablet(css` + gap: 16px; + `)} +`; + +export const previewImageContainer = css` + position: relative; +`; + +export const previewImageStyle = css` + width: 168px; + height: 168px; + + object-fit: cover; + border-radius: 12px; + ${desktop(css` + width: 282px; + height: 282px; + `)} +`; + +export const deleteImageStyle = css` + cursor: pointer; // 삭제 아이콘에 커서 포인터 추가 + width: 20px; + height: 20px; + flex-shrink: 0; + + position: absolute; + right: 12px; + top: 12px; +`; diff --git a/src/pages/AddItem/components/AddItemTop.jsx b/src/pages/AddItem/components/AddItemTop.jsx index 08fbc555..5158ff10 100644 --- a/src/pages/AddItem/components/AddItemTop.jsx +++ b/src/pages/AddItem/components/AddItemTop.jsx @@ -1,3 +1,52 @@ -export default function AddItemTop() { - return
AddItemTop
; +import { css } from "@emotion/react"; +import { tablet, mobile } from "@/styles/utils/mixins"; +export default function AddItemTop({ isDisabled = true }) { + return ( +
+

상품 등록하기

+ +
+ ); } + +const AddItemTopStyle = css` + display: flex; + justify-content: space-between; + align-items: center; + font-style: normal; + width: 100%; + + h2 { + color: var(--gray800); + font-size: 20px; + font-weight: 700; + line-height: 32px; + } + + ${tablet(css``)} + + ${mobile(css``)} +`; + +const AddItemTopButtonStyle = (isDisabled) => css` + display: flex; + height: 42px; + padding: 12px 23px; + justify-content: center; + align-items: center; + + border-radius: 8px; + background: ${isDisabled ? "var(--gray400)" : "var(--blue100)"}; + + color: var(--gray100); + + font-size: 16px; + font-weight: 600; + line-height: 26px; +`; diff --git a/src/pages/AddItem/index.jsx b/src/pages/AddItem/index.jsx index d2429c2f..5fc79abe 100644 --- a/src/pages/AddItem/index.jsx +++ b/src/pages/AddItem/index.jsx @@ -1,11 +1,33 @@ import { css } from "@emotion/react"; import AddItemTop from "./components/AddItemTop"; import { tablet, mobile } from "@/styles/utils/mixins"; +import AddItemImage from "./components/AddItemImage"; +import { useState } from "react"; function AddItem() { + const [isDisabled, setIsDisabled] = useState(true); + // const [itemName, setItemName] = useState(""); + // const [itemDescription, setItemDescription] = useState(""); + // const [itemPrice, setItemPrice] = useState(""); + // const [itemTag, setItemTag] = useState(""); + + // const handleDisabled = ( + // isItemName, + // isItemDescription, + // isItemPrice, + // isItemTag + // ) => { + // if (isItemName && isItemDescription && isItemPrice && isItemTag) { + // setIsDisabled(false); + // } else { + // setIsDisabled(true); + // } + // }; + return (
- + +
); } @@ -14,19 +36,19 @@ export default AddItem; const addItemContainer = css` display: flex; - width: 1200px; + max-width: 1200px; flex-direction: column; align-items: flex-start; gap: 24px; margin: 24px auto 69px; ${tablet(css` - width: 100%; - margin: 16px 24px 76px; + max-width: 696px; + margin: 16px auto 76px; `)} ${mobile(css` - width: 100%; - margin: 24px 14px 70px; + max-width: 346px; + margin: 24px auto 70px; `)} `; From d4cbb5b63fb6f762e03d6ee7f855cc5183431c3f Mon Sep 17 00:00:00 2001 From: two678 Date: Sat, 10 May 2025 01:38:02 +0900 Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EC=83=81=ED=92=88=20?= =?UTF-8?q?=EB=93=B1=EB=A1=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B8?= =?UTF-8?q?=ED=92=8B=EC=B0=BD=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AddItem/components/AddItemImage.styles.js | 2 +- src/pages/AddItem/components/InputField.jsx | 70 +++++++ src/pages/AddItem/index.jsx | 173 +++++++++++++++--- 3 files changed, 221 insertions(+), 24 deletions(-) create mode 100644 src/pages/AddItem/components/InputField.jsx diff --git a/src/pages/AddItem/components/AddItemImage.styles.js b/src/pages/AddItem/components/AddItemImage.styles.js index 2fa698dd..730ec859 100644 --- a/src/pages/AddItem/components/AddItemImage.styles.js +++ b/src/pages/AddItem/components/AddItemImage.styles.js @@ -65,7 +65,7 @@ export const previewImageStyle = css` `; export const deleteImageStyle = css` - cursor: pointer; // 삭제 아이콘에 커서 포인터 추가 + cursor: pointer; width: 20px; height: 20px; flex-shrink: 0; diff --git a/src/pages/AddItem/components/InputField.jsx b/src/pages/AddItem/components/InputField.jsx new file mode 100644 index 00000000..1ccaded4 --- /dev/null +++ b/src/pages/AddItem/components/InputField.jsx @@ -0,0 +1,70 @@ +import { css } from "@emotion/react"; + +const InputField = ({ + id, + label, + type, + name, + value, + onChange, + placeholder, + onKeyPress, +}) => { + return ( +
+ + {type === "textarea" ? ( +