새 그룹 생성 페이지 구현

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;