From e962406c36aa8c6a2c777e6630faa541346d2e2a Mon Sep 17 00:00:00 2001 From: devhaeun Date: Tue, 28 Jan 2025 15:57:45 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Feat:=20textarea=20=EC=86=8D=EC=84=B1=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20#10?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit RaffleUploadPage 내 Textarea 속성에 resize: none 추가 --- src/pages/RaffleUploadPage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/RaffleUploadPage.tsx b/src/pages/RaffleUploadPage.tsx index 48b9c3a..7a39971 100644 --- a/src/pages/RaffleUploadPage.tsx +++ b/src/pages/RaffleUploadPage.tsx @@ -170,6 +170,7 @@ const ConditionBtn = styled.button` const Textarea = styled.textarea` width: 635px; height: 197px; + resize: none; ` const TextareaDiv = styled.div` From 203a60298f1960e822ce7a7e6cb59961b7cefc08 Mon Sep 17 00:00:00 2001 From: devhaeun Date: Tue, 28 Jan 2025 18:23:46 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Feat:=20=EB=A1=9C=EC=BB=AC=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EA=B8=B0=EB=8A=A5=20=EC=97=B0=EA=B2=B0=20?= =?UTF-8?q?#10?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 상품 이미지 삽입하는 블록 스타일 수정 및 로컬 파일 연결 카테고리 선택에 option 추가 --- src/App.tsx | 2 +- src/assets/imgUpload.svg | 3 ++ src/pages/RaffleUploadPage.tsx | 69 +++++++++++++++++++++++++++++++++- 3 files changed, 71 insertions(+), 3 deletions(-) create mode 100644 src/assets/imgUpload.svg diff --git a/src/App.tsx b/src/App.tsx index fd061f8..385fac7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import './App.css'; +// import './App.css'; import { ModalContextProvider } from './components/Modal/context/ModalContext'; import Router from './routes/router'; // import SearchBox from './components/SearchBox'; diff --git a/src/assets/imgUpload.svg b/src/assets/imgUpload.svg new file mode 100644 index 0000000..a278180 --- /dev/null +++ b/src/assets/imgUpload.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/RaffleUploadPage.tsx b/src/pages/RaffleUploadPage.tsx index 7a39971..7dcc3ad 100644 --- a/src/pages/RaffleUploadPage.tsx +++ b/src/pages/RaffleUploadPage.tsx @@ -1,5 +1,6 @@ import styled from "styled-components"; import BigTitle from "../components/BigTitle"; +import imgUpload from "../assets/imgUpload.svg"; const RaffleUploadPage = () => { return ( @@ -9,7 +10,15 @@ const RaffleUploadPage = () => { 상품 이미지 -
이미지
+ + + +
@@ -17,6 +26,26 @@ const RaffleUploadPage = () => { + + + + + + + + + + + + + + + + + + + +
@@ -106,6 +135,28 @@ const ImgSpan = styled.span` line-height: 36.832px; /* 184.159% */ ` +const ImgFileLabel = styled.label` + display: inline-block; + position: relative; + width: 261px; + height: 261px; + border-radius: 5px; + border: 1px solid #8F8E94; + background: #F5F5F5; + &:hover { + cursor: pointer; + } +` +const ImgFileIcon = styled.img` + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +` +const InputImgFile = styled.input` + display: none; +` + const ItemInfoRightContainer = styled.div` display: flex; flex-direction: column; @@ -171,11 +222,18 @@ const Textarea = styled.textarea` width: 635px; height: 197px; resize: none; + font-size: 18px; + font-family: Pretendard; + font-style: normal; + line-height: 18px; + letter-spacing: -0.165px; + padding: 7px; + box-sizing: border-box; + border-radius: 7px; ` const TextareaDiv = styled.div` display: flex; - ` const SetConditionContainer = styled.div` @@ -196,6 +254,13 @@ const InputBox = styled.input<{width?:number}>` height: 45px; border-radius: 7px; border: 1px solid #8F8E94; + box-sizing: border-box; + padding: 0 7px; + font-size: 18px; + font-family: Pretendard; + font-style: normal; + line-height: 18px; + letter-spacing: -0.165px; ` const SubmitBtn = styled.input` From 06fba1a9d22c2830051656903dd9b8e26622177f Mon Sep 17 00:00:00 2001 From: devhaeun Date: Tue, 28 Jan 2025 18:53:37 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Design:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A1=B0=EC=A0=88=20?= =?UTF-8?q?#10?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 카테고리 화살표 변경 및 카테고리, input, textarea 내부 padding값 수정 --- src/assets/icSelectArrow.svg | 3 +++ src/assets/imgSelectArrow.png | Bin 0 -> 710 bytes src/pages/RaffleUploadPage.tsx | 16 +++++++++++++--- 3 files changed, 16 insertions(+), 3 deletions(-) create mode 100644 src/assets/icSelectArrow.svg create mode 100644 src/assets/imgSelectArrow.png diff --git a/src/assets/icSelectArrow.svg b/src/assets/icSelectArrow.svg new file mode 100644 index 0000000..2f8a891 --- /dev/null +++ b/src/assets/icSelectArrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/imgSelectArrow.png b/src/assets/imgSelectArrow.png new file mode 100644 index 0000000000000000000000000000000000000000..36f6f421255d4422bec8b8c411d62a924cfbf793 GIT binary patch literal 710 zcmV;%0y+JOP)@~0drDELIAGL9O(c600d`2O+f$vv5yP{~ZFa+Era?H`;|MXcLr4f|8&R6a@8s3%Zs*i+zCNIb$*pdpYlW`Q5bUjDBwY zpR;FO91cH!U!UL9Mt1uxu`rxc5CqgVg5ZiqqaiVTv)eyW+gNW_{3{pi^}5u%?NVD9 zjfXTC^!YYRcJ6jtY70@cIBlN&(|!-kUIL zn=)|Hu^^Hwh-*5WO{wmPu^_^V-i+9&^Ey=~y9)(ziLN(~R99pcCamlLtm*0)8yG5C zu^>_^27XSTuT%ZSM!aN{A1rCK z1c9&Eh(F8+(nVX)SG|!{L#UuF2vBe2-Duh%uZB>;NDw3qvI}hdY-2%Jv5{`4O)wS& zhz;8VM`gWPgcU*C^+s6@p@J1bV5=3k{b5-XjOz{ap@3MhdAVB?1Q_Wi1II=zh*%W_ zCiTYq#~azkx}a_=u2Ms&U|kTXu2cE4FLLv2(uttzBs95OD8q>$kZr|XKUsDrDBFs= zer)bc5R|pzd?1b7KBjXj2#R6@|B2)p=Yn~yxT{zYaV`kN*idb!P4FTpw&K|KarS^0 sL6EfKJR?JYj{q*oBWT5s$6xZvKZJ)*SZq_n5C8xG07*qoM6N<$f@Z=n%>V!Z literal 0 HcmV?d00001 diff --git a/src/pages/RaffleUploadPage.tsx b/src/pages/RaffleUploadPage.tsx index 7dcc3ad..6c99de7 100644 --- a/src/pages/RaffleUploadPage.tsx +++ b/src/pages/RaffleUploadPage.tsx @@ -1,6 +1,8 @@ import styled from "styled-components"; import BigTitle from "../components/BigTitle"; import imgUpload from "../assets/imgUpload.svg"; +import icArrow from "../assets/icSelectArrow.svg"; +import imgArrow from "../assets/imgSelectArrow.png"; const RaffleUploadPage = () => { return ( @@ -196,7 +198,15 @@ const ItemCategorySelect = styled.select` font-style: normal; font-weight: 500; line-height: 36.832px; /* 184.159% */ - padding: 0 5px; + padding: 0 10px; + background: url(${imgArrow}) no-repeat right 18px center; + background-size: 16px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + &::-ms-expand { + display: none; + }; ` const ConditionBtn = styled.button` @@ -227,7 +237,7 @@ const Textarea = styled.textarea` font-style: normal; line-height: 18px; letter-spacing: -0.165px; - padding: 7px; + padding: 10px; box-sizing: border-box; border-radius: 7px; ` @@ -255,7 +265,7 @@ const InputBox = styled.input<{width?:number}>` border-radius: 7px; border: 1px solid #8F8E94; box-sizing: border-box; - padding: 0 7px; + padding: 0 10px; font-size: 18px; font-family: Pretendard; font-style: normal;