From 985e1c0bea67b0e1333b9d22516613e7cc33151a Mon Sep 17 00:00:00 2001
From: 1004jaein <jsja031017@kookmin.ac.kr>
Date: Wed, 20 Sep 2023 14:42:48 +0900
Subject: [PATCH] =?UTF-8?q?Feat=20:=20=EB=A6=AC=EB=B7=B0=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=ED=9B=84=20=EC=A0=9C=EC=B6=9C=20=EA=B8=B0=EB=8A=A5?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../user/src/components/StarRating/Rating.js  | 10 +++----
 packages/apps/user/src/views/Review/Review.js | 27 ++++++++++++++++---
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/packages/apps/user/src/components/StarRating/Rating.js b/packages/apps/user/src/components/StarRating/Rating.js
index c8fe07cd..273e83b7 100644
--- a/packages/apps/user/src/components/StarRating/Rating.js
+++ b/packages/apps/user/src/components/StarRating/Rating.js
@@ -3,17 +3,17 @@ import { Box, Icon, Stack } from '@chakra-ui/react';
 import { FaStar } from 'react-icons/fa6';
 
 const Rating = React.forwardRef(
-  ({ size, scale, fillColor, strokeColor }, ref) => {
-    const [rating, setRating] = useState(0);
+  ({ size, scale, fillColor, strokeColor, rating, onRatingChange }, ref) => {
     const buttons = [];
 
     const onClick = idx => {
       if (!isNaN(idx)) {
-        // allow user to click first icon and set rating to zero if rating is already 1
         if (rating === 1 && idx === 1) {
-          setRating(0);
+          onRatingChange(0);
         } else {
-          setRating(idx);
+          onRatingChange(idx);
+
+          console.log('별점 : ', idx);
         }
       }
     };
diff --git a/packages/apps/user/src/views/Review/Review.js b/packages/apps/user/src/views/Review/Review.js
index 7e397190..ae3bae0d 100644
--- a/packages/apps/user/src/views/Review/Review.js
+++ b/packages/apps/user/src/views/Review/Review.js
@@ -23,7 +23,7 @@ function ConfirmModal({ isOpen, onClose }) {
   return (
     <Modal isOpen={isOpen} onClose={onClose} isCentered="true">
       <ModalOverlay />
-      <ModalContent py={'8'}>
+      <ModalContent py="8">
         <ModalHeader>
           <Text textAlign="center" fontSize="20" fontWeight="bold">
             리뷰가 저장되었습니다.
@@ -44,8 +44,20 @@ function ConfirmModal({ isOpen, onClose }) {
 
 function Review() {
   const [isOpen, setIsOpen] = useState(false);
+  const [reviewText, setReviewText] = useState('');
+  const [rating, setRating] = useState(0);
+
   const onOpen = useCallback(() => setIsOpen(true), []);
   const onClose = useCallback(() => setIsOpen(false), []);
+  const handlereview = useCallback(e => {
+    setReviewText(e.target.value);
+  }, []);
+  const saveReview = useCallback(() => {
+    // DB로 리뷰랑 별점 전송
+    console.log('리뷰 내용:', reviewText);
+
+    onOpen();
+  }, [onOpen, reviewText]);
 
   return (
     <VStack justifyContent="center" height="full">
@@ -66,13 +78,22 @@ function Review() {
         </Text>
       </Box>
       <Box p="4">
-        <Rating size={48} scale={5} fillColor="yellow.400" strokeColor="grey" />
+        <Rating
+          size={48}
+          scale={5}
+          fillColor="yellow.400"
+          strokeColor="grey"
+          rating={rating}
+          onRatingChange={setRating}
+        />
       </Box>
+
       <Textarea
         width="520px"
         height="120px"
         placeholder="리뷰를 남겨주세요"
         p="4"
+        onChange={handlereview}
       />
 
       <HStack spacing="4" p="4">
@@ -84,7 +105,7 @@ function Review() {
         <Button
           leftIcon={<BiCommentEdit />}
           colorScheme="primary"
-          onClick={onOpen}
+          onClick={saveReview}
         >
           저장하기
         </Button>