Feat : 리뷰 작성 후 제출 기능 추가

hwna00 · Sep 25, 2023 · 985e1c0 · 985e1c0
1 parent 0843cf4
commit 985e1c0
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git 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
@@ -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>