From a5ad087187076b45d80d83e1c62f93c0e030ce19 Mon Sep 17 00:00:00 2001
From: HAEUN LEE <78083098+devhaeun@users.noreply.github.com>
Date: Thu, 20 Feb 2025 22:44:18 +0900
Subject: [PATCH] Fix/upload #113 (#116)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Feat: 예상 정산 금액 계산 수정 #113

예상 정산 금액 NaN 나타나지 않도록 수정 및 계산식 수정

* Feat: 시간 선택 기능 추가 #113

시작/종료 일시 선택 시 시간 선택 기능 추가

* Fix: 카테고리 param 이름 수정

CategoryResultPage.tsx 악세사리->악세서리 이름 수정
---
 package-lock.json                           |  1 +
 package.json                                |  1 +
 src/pages/raffleList/CategoryResultPage.tsx |  2 +-
 src/pages/raffleUpload/RaffleUploadPage.tsx | 24 +++++++++++++++------
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bec8beb..622d555 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,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/package.json b/package.json
index 5813702..206f21c 100644
--- 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
index 92c9cbe..51b6d50 100644
--- 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
index 90aff10..d2faac9 100644
--- 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,7 +235,12 @@ 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>
@@ -240,9 +248,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={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>