All files / lib/pages/PlayLog/Modal DeductionModal.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
62
63
64
65
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { usePostUserScoreLogMutation } from '@lib/api/mutations';
import { UserScoreLogDto } from '@uniquegood/realworld-adventure-interface';
import { Form, Input, InputNumber, Modal, ModalProps, message } from 'antd';
import React from 'react';
import { styled } from 'styled-components';
 
interface DeductionModalProps {
  modalData: ModalProps;
  closeModal: () => unknown;
  data: UserScoreLogDto | undefined;
}
 
export default function DeductionModal({ modalData, closeModal, data }: DeductionModalProps) {
  const [form] = Form.useForm();
 
  const { mutateAsync: postUserScore } = usePostUserScoreLogMutation();
 
  const handleSubmit = async (values: { score: number; note: string }) => {
    const { success } = await postUserScore({
      ...values,
      userId: data?.userId || '',
      score: values.score > 0 ? -values.score : values.score,
      parentUserScoreLogId: data?.id
    });
 
    if (success) {
      message.success('유저 점수를 차감했습니다.');
      closeModal();
    }
  };
 
  return (
    <Modal title="유저 점수 차감" onOk={form.submit} okText="확인" cancelText="닫기" {...modalData}>
      <Form
        form={form}
        onFinish={handleSubmit}
        labelCol={{ span: 24 }}
        wrapperCol={{ span: 24 }}
        preserve={false}
      >
        <Form.Item
          name="score"
          label="점수"
          rules={[{ required: true, message: '점수를 입력해주세요.' }]}
        >
          <InputNumber placeholder="점수를 입력해주세요." style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item name="note" label="사유">
          <Input placeholder="사유를 입력해주세요." />
        </Form.Item>
      </Form>
      <Description>
        유저가 획득한 점수를 차감할 수 있습니다.
        <br /> 유저가 획득한 점수보다 큰 값을 입력할 수 없습니다.
      </Description>
    </Modal>
  );
}
 
const Description = styled.div`
  margin-top: 8px;
  font-size: 12px;
  color: #777;
`;