Fix/upload #113 (#116)

* Feat: 예상 정산 금액 계산 수정 #113 예상 정산 금액 NaN 나타나지 않도록 수정 및 계산식 수정 * Feat: 시간 선택 기능 추가 #113 시작/종료 일시 선택 시 시간 선택 기능 추가 * Fix: 카테고리 param 이름 수정 CategoryResultPage.tsx 악세사리->악세서리 이름 수정
JMarketYard · Feb 20, 2025 · a5ad087 · a5ad087
1 parent 3bf724b
commit a5ad087
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@types/react-slick": "^0.23.13",
     "axios": "^1.7.9",
     "chart.js": "^4.4.7",
+    "date-fns": "^4.1.0",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.474.0",
     "pretendard": "^1.3.9",

diff --git a/src/pages/raffleList/CategoryResultPage.tsx b/src/pages/raffleList/CategoryResultPage.tsx
@@ -20,7 +20,7 @@ const SearchResultPage: React.FC = () => {
     women: '여성의류',
     men: '남성의류',
     shoes: '신발',
-    accessories: '악세사리',
+    accessories: '악세서리',
     digital: '디지털',
     appliances: '가전제품',
     sports: '스포츠/레저',

diff --git a/src/pages/raffleUpload/RaffleUploadPage.tsx b/src/pages/raffleUpload/RaffleUploadPage.tsx
@@ -6,9 +6,10 @@ import React, { FormEvent, ReactElement, useEffect, useRef, useState } from "rea
 import { useModalContext } from "../../components/Modal/context/ModalContext";
 import UploadModal from "./components/UploadModal";
 import TicketModal from "./components/TicketModal";
-import DatePicker from 'react-datepicker'
+import DatePicker, { registerLocale } from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css';
 import media from "../../styles/media";
+import { ko } from "date-fns/locale/ko";
 
 const RaffleUploadPage = () => {
     const itemStates = [
@@ -24,7 +25,7 @@ const RaffleUploadPage = () => {
         { key: "no", text: "미사용" }
     ];
     const [itemState, setItemState] = useState<string>("");
-    const [ticketNum, setTicketNum] = useState<string>("");
+    const [ticketNum, setTicketNum] = useState<string>("1개");
     const [jcare, setJcare] = useState<string>("");
     const [startDate, setStartDate] = useState<Date>(new Date());
     const [endDate, setEndDate] = useState<Date>(new Date());
@@ -36,6 +37,8 @@ const RaffleUploadPage = () => {
     const [category, setCategory] = useState<string>('');
     const [deliveryFee, setDeliveryFee] = useState<string>("");
 
+    registerLocale("ko", ko);
+
     const handleImg = () => {
         fileRef?.current?.click();
     };
@@ -89,8 +92,8 @@ const RaffleUploadPage = () => {
         setItemState(key);
     };
     const handleTicketNum = (key:string) => {
-        setTicketNum(key);
         if (key===moreTicketText) handleTicketModal();
+        else setTicketNum(key);
     };
     const handleJcare = (key:string) => {
         setJcare(key);
@@ -232,17 +235,24 @@ const RaffleUploadPage = () => {
                             name="minTicket"
                             value={leastTicketNum}
                             onChange={handleLeastTicketNum} />
-                            <StyleP>예상 정산 금액: {(parseInt(leastTicketNum.replace(',',''))*100).toLocaleString() || 0}원</StyleP>
+                            <StyleP>예상 정산 금액:&nbsp;
+                                {(Number(leastTicketNum.replaceAll(',',''))*100
+                                *parseInt(ticketNum))
+                                .toLocaleString()
+                                }원
+                            </StyleP>
                         </InputContainer>
                     </SetConditionBox>
                     <SetConditionBox>
                         <TitleSpan2>시작 일시</TitleSpan2>
                         <DatePickerBox>
                             <DatePicker
                                 onKeyDown={(e)=>{e.preventDefault()}}
-                                dateFormat="yyyy년 MM월 dd일"
+                                dateFormat="yyyy년 MM월 dd일 a hh:mm"
+                                locale="ko"
                                 dateFormatCalendar="yyyy년 MM월"
                                 selected={startDate}
+                                showTimeInput
                                 onChange={(date) => date && setStartDate(date)}
                             />
                         </DatePickerBox>
@@ -252,9 +262,11 @@ const RaffleUploadPage = () => {
                         <DatePickerBox>
                             <DatePicker
                                 onKeyDown={(e)=>{e.preventDefault()}}
-                                dateFormat="yyyy년 MM월 dd일"
+                                dateFormat="yyyy년 MM월 dd일 a hh:mm"
+                                locale="ko"
                                 dateFormatCalendar="yyyy년 MM월"
                                 selected={endDate}
+                                showTimeInput
                                 onChange={(date) => date && setEndDate(date)}
                             />
                         </DatePickerBox>