Feat/CR-63/ReviewingModal

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>
+  );
+}

src/components/my-page/reviewing-modal/review-form.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+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>
+  );
+}

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({});

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>
+  );
+}