From b713f56aec81f83b1d5ff4cfee50cd972bdcffba Mon Sep 17 00:00:00 2001 From: sumnunus Date: Mon, 12 Aug 2024 23:20:42 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=EB=A6=AC=EB=B7=B0=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 1 - src/components/Review/review.tsx | 160 +++++++++++++++++++++++++++++++ src/components/Review/star.svg | 3 + 3 files changed, 163 insertions(+), 1 deletion(-) create mode 100644 src/components/Review/review.tsx create mode 100644 src/components/Review/star.svg diff --git a/package-lock.json b/package-lock.json index c2e8619..e900561 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2004,7 +2004,6 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz", "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==", "devOptional": true, - "license": "MIT", "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" diff --git a/src/components/Review/review.tsx b/src/components/Review/review.tsx new file mode 100644 index 0000000..c8c148e --- /dev/null +++ b/src/components/Review/review.tsx @@ -0,0 +1,160 @@ +import { useState } from 'react'; +import { css } from '@emotion/react'; +import { palette } from '../../styles/palette'; +import { typo } from '../../styles/typo'; + +const RATINGS = [1, 2, 3, 4, 5]; + +interface StarProps { + selected?: boolean; + onClick?: () => void; +} + +const Star = ({ selected = false, onClick }: StarProps) => { + const className = `rating-star ${selected ? 'selected' : ''}`; + return ( + + + + ); +}; + +interface ConfirmButtonProps { + onClick: () => void; + children: React.ReactNode; +} + +const ConfirmButton = ({ onClick, children }: ConfirmButtonProps) => ( + +); + +interface RatingProps { + value?: number; + onConfirm: (rating: number) => void; + onClose: () => void; +} + +const Rating = ({ value = 0, onConfirm, onClose }: RatingProps) => { + const [rating, setRating] = useState(value); + + return ( +
+
+
+ 반납되었습니다! +
+
+ 리뷰를 남겨주세요! +
+
+ 불편했던 점이 있으면 문의로 남겨주세요! +
+
+ {RATINGS.map((ratingValue) => ( + = ratingValue} + onClick={() => { + setRating(ratingValue); + }} + /> + ))} +
+ { + onConfirm(rating); + onClose(); + }}> + 확인 + +
+
+ ); +}; + +export default Rating; diff --git a/src/components/Review/star.svg b/src/components/Review/star.svg new file mode 100644 index 0000000..5454bc6 --- /dev/null +++ b/src/components/Review/star.svg @@ -0,0 +1,3 @@ + + + From 24889acea6bc927e6460f0fee84b71cabf23a677 Mon Sep 17 00:00:00 2001 From: sumnunus Date: Tue, 13 Aug 2024 16:02:41 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=EC=98=88=EC=95=BD=20=ED=99=95=EC=9D=B8?= =?UTF-8?q?=EC=B0=BD=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C?= =?UTF-8?q?=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Reservation/ReservationModal.tsx | 131 ++++++++++++++++++ src/components/Review/review.tsx | 2 +- 2 files changed, 132 insertions(+), 1 deletion(-) create mode 100644 src/components/Reservation/ReservationModal.tsx diff --git a/src/components/Reservation/ReservationModal.tsx b/src/components/Reservation/ReservationModal.tsx new file mode 100644 index 0000000..571d787 --- /dev/null +++ b/src/components/Reservation/ReservationModal.tsx @@ -0,0 +1,131 @@ +import React, { useState } from 'react'; +import { css } from '@emotion/react'; +import { palette } from '../../styles/palette'; +import { typo } from '../../styles/typo'; + +interface ReservationModalProps { + onClose: () => void; + rentalItem: string; // 대여물품 번호 + onSubmitRequest: (message: string) => void; // 요청 메시지 +} + +const ReservationModal: React.FC = ({ + onClose, + rentalItem, + onSubmitRequest, +}) => { + const [requestMessage, setRequestMessage] = useState(''); + + // 오늘 날짜 + const today = new Date(); + const dayOfWeek = today.getDay(); // 0 (일요일) ~ 6 (토요일) + + // 반납 예정일 계산 + let returnDate: Date; + if (dayOfWeek === 5) { + // 금요일인 경우 + returnDate = today; // 반납 예정일을 당일 17시로 설정 + } else { + returnDate = new Date(today); + returnDate.setDate(today.getDate() + 1); // 다음날로 설정 + } + const formattedDate = `${String(returnDate.getFullYear())}.${String(returnDate.getMonth() + 1).padStart(2, '0')}.${String(returnDate.getDate()).padStart(2, '0')} 17:00시`; + + const handleRequestMessageChange = ( + e: React.ChangeEvent, + ) => { + setRequestMessage(e.target.value); + }; + + const handleConfirmClick = () => { + onSubmitRequest(requestMessage); // 요청 메시지 제출 + onClose(); // 모달 닫기 + }; + + return ( +
+
+
+ 예약 되었습니다! +
+
+ 금일 5시까지 대여하러 T605로 오지 않으면 자동 예약 취소됩니다. +
+ 반납예정일: {formattedDate} +
+ 대여물품: {rentalItem} +
+