Feat: 로컬 이미지 기능 연결 #10

상품 이미지 삽입하는 블록 스타일 수정 및 로컬 파일 연결 카테고리 선택에 option 추가
JMarketYard · Jan 28, 2025 · 203a602 · 203a602
1 parent dccb2e5
commit 203a602
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 3 deletions.
diff --git 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
diff --git 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,14 +10,42 @@ const RaffleUploadPage = () => {
                 <ItemInfoContainer>
                     <ImgContainer>
                         <ImgSpan>상품 이미지</ImgSpan>
-                        <div style={{backgroundColor:"grey", width:261, height:261}}>이미지</div>
+                        <ImgFileLabel htmlFor="img-file">
+                            <ImgFileIcon src={imgUpload} />
+                        </ImgFileLabel>
+                        <InputImgFile
+                        type="file"
+                        id="img-file"
+                        accept="image/*"
+                        multiple
+                        />
                     </ImgContainer>
                     <ItemInfoRightContainer>
                         <div>
                             <TitleSpan>카테고리</TitleSpan>
                             <ItemCategorySelect>
                                 <option value="">- - 선택하세요 - -</option>
                                 <option value="women">여성의류</option>
+                                <option value="men">남성의류</option>
+                                <option value="shoes">신발</option>
+                                <option value="accessories">악세사리</option>
+                                <option value="digital">디지털</option>
+                                <option value="appliances">가전제품</option>
+                                <option value="sports">스포츠/레저</option>
+                                <option value="vehicle">차량/오토바이</option>
+                                <option value="md">굿즈</option>
+                                <option value="art">예술/희귀/수집품</option>
+                                <option value="music">음반/악기</option>
+                                <option value="stationery">도서/티켓/문구</option>
+                                <option value="beauty">뷰티</option>
+                                <option value="interior">인테리어</option>
+                                <option value="household">생활용품</option>
+                                <option value="tools">공구/산업용품</option>
+                                <option value="grocery">식품</option>
+                                <option value="infant">유아</option>
+                                <option value="pet">반려동물</option>
+                                <option value="others">기타</option>
+                                <option value="talent">재능</option>
                             </ItemCategorySelect>
                         </div>
                         <div>
@@ -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`