css 기본 생성스타일 추가

Author: eunhye-ahn

polling-app-client/src/components/Dashboard/GroupCreateModal.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { createGroup, getAllUsers } from '../../util/APIUtils';
-import { Modal, Input, message, Checkbox, Spin } from 'antd';
+import { Modal, Input, message} from 'antd';
+import GroupMemberSelector from './GroupMemberSelector';
 
 
 class GroupCreateModal extends Component {
@@ -69,7 +70,7 @@ class GroupCreateModal extends Component {
 
   render() {
     const { visible, onClose } = this.props;
-    const { name, description, imageUrl, users, selectedUserIds,  loading } = this.state;
+    const { name, description, imageUrl, users, selectedUserIds } = this.state;
 
     return (
       <Modal
@@ -80,37 +81,43 @@ class GroupCreateModal extends Component {
         okText="생성"
         cancelText="취소"
       >
+        <div className="form-group">
+          <label className="form-label" style={{display:"flex"}}>그룹 이름<p style={{color : "red"}}> *</p></label>
         <Input
           placeholder="그룹 이름"
           value={name}
           onChange={e => this.handleChange('name', e.target.value)}
           style={{ marginBottom: 12 }}
         />
+        </div>
+          <div className="form-group">
+          <label className="form-label">그룹 소개</label>
         <Input.TextArea
           placeholder="그룹 소개"
           value={description}
           onChange={e => this.handleChange('description', e.target.value)}
+                      maxLength={200}
           rows={3}
           style={{ marginBottom: 12 }}
         />
-        <Input
+                </div>
+
+                <div className="form-group">
+          <label className="form-label">그룹 이미지</label>
+                  <Input
           placeholder="이미지 URL (선택)"
           value={imageUrl}
           onChange={e => this.handleChange('imageUrl', e.target.value)}
         />
-         <div style={{ maxHeight: 150, overflowY: 'auto', border: '1px solid #eee', padding: 8 }}>
-          {loading ? (
-            <Spin />
-          ) : users.map(user => (
-            <Checkbox
-              key={user.id}
-              checked={selectedUserIds.includes(user.id)}
-              onChange={() => this.handleUserSelect(user.id)}
-              style={{ display: 'block', marginBottom: 6 }}
-            >
-              {user.name} ({user.username})
-            </Checkbox>
-          ))}
+        </div>
+                <div className="form-group">
+          <label className="form-label">그룹 멤버 선택</label>
+          
+<GroupMemberSelector
+  users={users}
+  selectedUserIds={selectedUserIds}
+  onChange={(ids) => this.setState({ selectedUserIds: ids })}
+/>
         </div>
       </Modal>
     );

polling-app-client/src/components/Dashboard/GroupMemberSelector.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Select, Avatar } from 'antd';
+
+const { Option } = Select;
+
+const GroupMemberSelector = ({ users, selectedUserIds, onChange }) => {
+  return (
+    <Select
+      mode="multiple"
+      showSearch
+      placeholder="이름 검색"
+      value={selectedUserIds}
+      onChange={onChange}
+      optionFilterProp="label"
+      style={{ width: '100%', marginTop: 8 }}
+    >
+      {users.map(user => (
+        <Option key={user.id} value={user.id} label={user.name}>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              padding: '4px 8px',
+              backgroundColor: selectedUserIds.includes(user.id) ? '#f5f5f5' : 'transparent',
+              borderRadius: 4,
+              justifyContent: 'space-between'
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <Avatar style={{ backgroundColor: '#f56a00' }}>{user.name[0]}</Avatar>
+              <span>{user.name}</span>
+            </div>
+            {selectedUserIds.includes(user.id) && <span style={{ color: '#52c41a' }}>✔</span>}
+          </div>
+        </Option>
+      ))}
+    </Select>
+  );
+};
+
+export default GroupMemberSelector;