From df0f5553fc3d01311a2031a4cfac798d0cd34435 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=98=88=EC=9D=80?= <yeeunee73@gmail.com>
Date: Wed, 6 Nov 2024 17:23:46 +0900
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=94=A5=20Remove:=20=EC=98=9B=EB=82=A0?=
 =?UTF-8?q?=20develop=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../my-page/reviewing-modal/button-hearts.tsx | 35 +++++++++
 .../my-page/reviewing-modal/review-form.tsx   | 71 +++++++++++++++++++
 .../reviewing-modal.stories.tsx               | 41 +++++++++++
 .../reviewing-modal/reviewing-modal.tsx       | 36 ++++++++++
 4 files changed, 183 insertions(+)
 create mode 100644 src/components/my-page/reviewing-modal/button-hearts.tsx
 create mode 100644 src/components/my-page/reviewing-modal/review-form.tsx
 create mode 100644 src/components/my-page/reviewing-modal/reviewing-modal.stories.tsx
 create mode 100644 src/components/my-page/reviewing-modal/reviewing-modal.tsx

diff --git a/src/components/my-page/reviewing-modal/button-hearts.tsx b/src/components/my-page/reviewing-modal/button-hearts.tsx
new file mode 100644
index 00000000..b9744f1d
--- /dev/null
+++ b/src/components/my-page/reviewing-modal/button-hearts.tsx
@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import Image from 'next/image';
+import activeHeart from '@/public/assets/icons/active-heart.svg';
+import defaultHeart from '@/public/assets/icons/default-heart.svg';
+
+interface ButtonHeartsProps {
+  onChange: (score: number) => void;
+}
+
+export default function ButtonHearts({ onChange }: ButtonHeartsProps) {
+  const [clickedArray, setClickedArray] = useState<boolean[]>(Array(5).fill(false));
+
+  const handleClick = (index: number) => {
+    setClickedArray((prev) => prev.map((_, i) => i <= index));
+    onChange(index + 1);
+  };
+
+  return (
+    <div className="flex w-full flex-col items-start justify-between gap-[12px]">
+      <p className="font-base font-semibold">만족스러운 경험이었나요?</p>
+      <div>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <button type="button" onClick={() => handleClick(index)} key={`btn ${index + 1}`}>
+            <Image
+              src={clickedArray[index] ? activeHeart : defaultHeart}
+              width={24}
+              height={24}
+              alt="heartbtn"
+            />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/my-page/reviewing-modal/review-form.tsx b/src/components/my-page/reviewing-modal/review-form.tsx
new file mode 100644
index 00000000..6aea056a
--- /dev/null
+++ b/src/components/my-page/reviewing-modal/review-form.tsx
@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useApiMutation } from '@/src/hooks/useApi';
+import Button from '@/src/components/common/button';
+import Textarea from '@/src/components/common/input/textarea';
+import ButtonHearts from './button-hearts';
+
+type FormValues = {
+  reviewText: string;
+  score: number;
+};
+
+interface ReviewProps {
+  onCancel: () => void;
+}
+
+export default function ReviewForm({ onCancel }: ReviewProps) {
+  const { register, handleSubmit } = useForm<FormValues>();
+  const [textReview, setTextReview] = useState<string>('');
+  const [point, setPoint] = useState<number>(0);
+
+  // TODO : 주석 부분(api 연결) 수정
+  // TODO : form에 넣기: onSubmit={handleSubmit(clickSubmit)}
+
+  const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setTextReview(e.target.value);
+  };
+
+  const handleScoreChange = (newScore: number) => {
+    setPoint(newScore);
+  };
+
+  return (
+    <form className="flex h-[308px] w-[472px] flex-col justify-between gap-[24px]">
+      <ButtonHearts onChange={handleScoreChange} />
+      <Textarea
+        placeholder="남겨주신 리뷰는 프로그램 운영 및 다른 회원 분들께 큰 도움이 됩니다."
+        inputClassNames="w-[471px] h-[120px] bg-gray-50 text-gray-400"
+        value={textReview}
+        onChange={handleTextChange}
+        register={register('reviewText')}
+        label="경험에 대해 남겨주세요"
+        styles={{
+          input: {
+            '::placeholder': {
+              color: 'gray - 400',
+              fontWeight: 500,
+              fontSize: '1rem',
+            },
+          },
+          label: {
+            fontWeight: 600,
+            fontSize: '1rem',
+          },
+        }}
+      />
+      <input type="hidden" value={point} {...register('score')} />
+      <div className="font-base flex justify-between gap-[16px] font-semibold">
+        <Button
+          onClick={onCancel}
+          className="h-[44px] w-[228px] border border-blue-500 text-blue-500"
+        >
+          취소
+        </Button>
+        <Button type="submit" className="h-[44px] w-[228px] border-none bg-blue-500 text-white">
+          리뷰 등록
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/src/components/my-page/reviewing-modal/reviewing-modal.stories.tsx b/src/components/my-page/reviewing-modal/reviewing-modal.stories.tsx
new file mode 100644
index 00000000..aa1c86ec
--- /dev/null
+++ b/src/components/my-page/reviewing-modal/reviewing-modal.stories.tsx
@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+import { Button } from '@mantine/core';
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryFn } from '@storybook/react';
+import ReviewingModal, { ReviewingModalProps } from './reviewing-modal';
+
+const meta: Meta<typeof ReviewingModal> = {
+  title: 'Modal/ReviewingModal',
+  component: ReviewingModal,
+  argTypes: { opened: { control: 'boolean' } },
+};
+
+export default meta;
+const Template: StoryFn<ReviewingModalProps> = function GatheringDetailModalStory({
+  opened,
+}: ReviewingModalProps) {
+  const [isOpened, setIsOpened] = useState(opened);
+
+  const handleOpen = () => {
+    action('Modal Opened')();
+    setIsOpened(true);
+  };
+
+  const handleClose = () => {
+    action('Modal Closed')();
+    setIsOpened(false);
+  };
+
+  useEffect(() => {
+    setIsOpened(opened);
+  }, [opened]);
+
+  return (
+    <>
+      <Button onClick={handleOpen}>Open Modal</Button>
+      <ReviewingModal opened={isOpened} close={handleClose} />
+    </>
+  );
+};
+
+export const Default = Template.bind({});
diff --git a/src/components/my-page/reviewing-modal/reviewing-modal.tsx b/src/components/my-page/reviewing-modal/reviewing-modal.tsx
new file mode 100644
index 00000000..947da131
--- /dev/null
+++ b/src/components/my-page/reviewing-modal/reviewing-modal.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import React from 'react';
+import { Modal } from '@mantine/core';
+import ReviewForm from './review-form';
+
+export interface ReviewingModalProps {
+  opened: boolean;
+  close: () => void;
+}
+
+export default function ReviewingModal({ opened, close }: ReviewingModalProps) {
+  return (
+    <Modal
+      opened={opened}
+      centered
+      title="리뷰 쓰기"
+      onClose={close}
+      size="auto"
+      padding={24}
+      radius={12}
+      overlayProps={{ backgroundOpacity: 0.5 }}
+      styles={{
+        title: {
+          fontWeight: 600,
+          fontSize: '1.125rem',
+        },
+        body: {
+          fontFamily: 'var(--font-pretendard)',
+        },
+      }}
+    >
+      <ReviewForm onCancel={close} />
+    </Modal>
+  );
+}

From 42970118e03545951862fc3a0c87c53a74d80652 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=98=88=EC=9D=80?= <yeeunee73@gmail.com>
Date: Wed, 6 Nov 2024 18:11:29 +0900
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20=EB=B9=8C=EB=93=9C=20?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/my-page/reviewing-modal/review-form.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/my-page/reviewing-modal/review-form.tsx b/src/components/my-page/reviewing-modal/review-form.tsx
index 6aea056a..2b994286 100644
--- a/src/components/my-page/reviewing-modal/review-form.tsx
+++ b/src/components/my-page/reviewing-modal/review-form.tsx
@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { useApiMutation } from '@/src/hooks/useApi';
 import Button from '@/src/components/common/button';
 import Textarea from '@/src/components/common/input/textarea';
 import ButtonHearts from './button-hearts';

From 0095a2640a772937ff2acf40407509d2b21679a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=98=88=EC=9D=80?= <yeeunee73@gmail.com>
Date: Thu, 7 Nov 2024 11:33:52 +0900
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=92=84=20Design:=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=EC=83=89=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/my-page/reviewing-modal/review-form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/my-page/reviewing-modal/review-form.tsx b/src/components/my-page/reviewing-modal/review-form.tsx
index dd90a61b..441e1162 100644
--- a/src/components/my-page/reviewing-modal/review-form.tsx
+++ b/src/components/my-page/reviewing-modal/review-form.tsx
@@ -57,7 +57,7 @@ export default function ReviewForm({ onCancel }: ReviewProps) {
       <div className="font-base flex justify-between gap-[16px] font-semibold">
         <Button
           onClick={onCancel}
-          className="h-[44px] w-[228px] border border-blue-500 text-blue-500"
+          className="h-[44px] w-[228px] border border-blue-500 bg-white text-blue-500"
         >
           취소
         </Button>