All files / src/components/pages/group/group-modal/approval-content index.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';

import { useState } from 'react';

import { Button, Label } from '@/components/ui';
import { ModalTitle } from '@/components/ui/modal';
import { useModal } from '@/components/ui/modal';
import { AttendGroupPayload, GetGroupDetailsResponse } from '@/types/service/group';

interface Props {
  modalContent: {
    title: string;
    description: string;
    confirmMessage: string;
  };
  isPending: boolean;
  onConfirmClick: (approvalMessage: AttendGroupPayload) => Promise<GetGroupDetailsResponse>;
}

export const GroupModalApprovalContent = ({
  modalContent: { title, description, confirmMessage },
  isPending,
  onConfirmClick,
}: Props) => {
  const [message, setMessage] = useState('');
  const { close } = useModal();

  const handleConfirmClick = async () => {
    await onConfirmClick({ message });
    close();
  };

  return (
    <>
      <ModalTitle className='break-keep'>{title}</ModalTitle>
      <Label className='mt-6 px-1 break-keep' htmlFor='group-approval-message'>
        {description}
      </Label>
      <div className='mt-1'>
        <textarea
          id='group-approval-message'
          className='bg-mono-white scrollbar-thin focus:border-mint-500 text-text-md-medium h-35 w-full resize-none rounded-2xl border border-gray-300 px-5 py-4 text-gray-800 focus:outline-none'
          placeholder='방장에게 간단한 메시지를 남길 수 있어요.'
          value={message}
          onChange={(e) => {
            if (e.target.value.length <= 50) setMessage(e.target.value);
          }}
        />
        <Button
          className='!text-text-sm-bold mt-2'
          disabled={isPending}
          size='sm'
          onClick={handleConfirmClick}
        >
          {isPending ? '로딩중...' : confirmMessage}
        </Button>
      </div>
    </>
  );
};