새 그룹 생성 페이지 구현

polling-app-client/package.json

@@ -18,6 +18,6 @@
  "devDependencies": {
  "babel-plugin-import": "^1.6.5",
  "react-app-rewire-less": "^2.1.0",
- "react-app-rewired": "^1.4.1"
+ "react-app-rewired": "^1.6.2"
  }
 }

polling-app-client/src/new-group-page/NewGroupPage.css

@@ -0,0 +1,14 @@
+.new-group-container {
+ max-width: 600px;
+ margin: 0 auto;
+ padding: 20px;
+}
+
+.member-list {
+ margin-top: 10px;
+ padding-left: 20px;
+}
+
+.member-list li {
+ margin-bottom: 4px;
+}

polling-app-client/src/new-group-page/NewGroupPage.jsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { Input, Button, Form, message } from 'antd';
+import axios from 'axios';
+import './NewGroupPage.css'; // CSS ��� ���� import
+
+const NewGroupPage = () => {
+ const [name, setName] = useState('');
+ const [description, setDescription] = useState('');
+ const [imageUrl, setImageUrl] = useState('');
+ const [members, setMembers] = useState([]);
+ const [memberInput, setMemberInput] = useState('');
+ const [loading, setLoading] = useState(false);
+
+ const handleAddMember = () => {
+ if (memberInput.trim() === '') return;
+ setMembers([...members, memberInput.trim()]);
+ setMemberInput('');
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setLoading(true);
+
+ try {
+ await axios.post('/api/groups', {
+ name,
+ description,
+ imageUrl,
+ members,
+ });
+
+ message.success('�׷��� ���������� �����Ǿ����ϴ�!');
+ setName('');
+ setDescription('');
+ setImageUrl('');
+ setMembers([]);
+ setMemberInput('');
+ } catch (error) {
+ console.error(error);
+ message.error('�׷� ���� ����!');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+ <div className="new-group-container">
+ <h1>�� �׷� ����</h1>
+ <Form layout="vertical" onSubmitCapture={handleSubmit}>
+ <Form.Item label="�׷� �̸�">
+ <Input
+ value={name}
+ onChange={(e) => setName(e.target.value)}
+ placeholder="��: ���͵� �׷�"
+ />
+ </Form.Item>
+
+ <Form.Item label="�׷� ����">
+ <Input.TextArea
+ value={description}
+ onChange={(e) => setDescription(e.target.value)}
+ placeholder="��: �Բ� �����ϴ� ���͵��Դϴ�."
+ rows={4}
+ />
+ </Form.Item>
+
+ <Form.Item label="�̹��� URL">
+ <Input
+ value={imageUrl}
+ onChange={(e) => setImageUrl(e.target.value)}
+ placeholder="��: https://example.com/image.jpg"
+ />
+ </Form.Item>
+
+ <Form.Item label="�׷� ��� �߰�">
+ <Input
+ value={memberInput}
+ onChange={(e) => setMemberInput(e.target.value)}
+ onPressEnter={handleAddMember}
+ placeholder="�̸��� �Ǵ� ����� �̸�"
+ />
+ <Button onClick={handleAddMember} style={{ marginTop: '8px' }}>
+ ��� �߰�
+ </Button>
+ <ul className="member-list">
+ {members.map((member, index) => (
+ <li key={index}>{member}</li>
+ ))}
+ </ul>
+ </Form.Item>
+
+ <Form.Item>
+ <Button type="primary" htmlType="submit" loading={loading}>
+ �׷� ����
+ </Button>
+ </Form.Item>
+ </Form>
+ </div>
+ );
+};
+
+export default NewGroupPage;