조인코드로 그룹 참여구현

Author: eunhye-ahn

polling-app-client/package.json

@@ -2,7 +2,7 @@
   "name": "polling-app-client",
   "version": "0.1.0",
   "private": true,
-  "proxy": "http://localhost:8080",
+"proxy": "http://localhost:8080",
 
   "dependencies": {
     "antd": "^3.2.2",

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

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Modal, Input, message } from 'antd';
-import { ACCESS_TOKEN } from '../../constants';
+import { joinGroupByCode } from '../../util/APIUtils';
 
 class GroupJoinModal extends Component {
   constructor(props) {
@@ -15,31 +15,46 @@ class GroupJoinModal extends Component {
   }
 
   handleSubmit = () => {
-    const { code } = this.state;
-    const token = localStorage.getItem(ACCESS_TOKEN);
+     const { code } = this.state;
 
-    fetch('/api/groups/join', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${token}`,
-      },
-      body: JSON.stringify({ code }),
-    })
-      .then(res => {
-        if (!res.ok) throw new Error('입장 실패');
-        return res.json();
-      })
-      .then(data => {
-        message.success(`"${data.name}" 그룹에 입장했어요!`);
-        this.props.onJoined(); // 새로고침 콜백
-        this.props.onClose();  // 모달 닫기
-      })
-      .catch(() => {
-        message.error('유효하지 않은 코드입니다.');
-      });
+joinGroupByCode(code)
+    .then(data => {
+      const messageText = (typeof data === 'string')
+  ? data
+  : (data && data.name)
+    ? `"${data.name}" 그룹에 입장했어요!`
+    : '그룹 참여 완료';
+    message.success(messageText);
+
+if (typeof this.props.onJoined === 'function') {
+  this.props.onJoined();
+}
+
+  if (typeof this.props.onClose === 'function') {
+    this.props.onClose();
   }
 
+    setTimeout(() => {
+    window.location.reload(); 
+  }, 500);
+  })
+.catch(error => {
+  const messageText = typeof error.message === 'string' ? error.message : JSON.stringify(error);
+ console.error('Join group error:', error);
+  if (error.status === 409 || messageText.includes('이미')) {
+    message.success('이미 그룹에 참여하셨습니다.');
+
+    if (this.props.onClose) {
+      this.props.onClose();  // ✅ 안전한 방식
+    }
+
+    setTimeout(() => window.location.reload(), 500);
+  } else {
+    message.error('유효하지 않은 코드입니다.');
+  }
+});
+  }
+  
   render() {
     const { visible, onClose } = this.props;
 

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

@@ -0,0 +1,58 @@
+.group-member-selector-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.selected-user-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.selected-user-tag {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  background: #f0f0f0;
+  border-radius: 16px;
+  font-size: 14px;
+}
+
+.selected-user-tag .avatar {
+  background-color: #f56a00;
+  margin-right: 6px;
+}
+
+.selected-user-tag .name {
+  margin-right: 6px;
+}
+
+.selected-user-tag .remove {
+  cursor: pointer;
+  color: #888;
+  font-weight: bold;
+}
+
+.user-option {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 8px;
+  border-radius: 4px;
+}
+
+.user-option.selected {
+  background: #f5f5f5;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.check {
+  color: #52c41a;
+  font-size: 16px;
+}

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

@@ -1,40 +1,56 @@
 import React from 'react';
 import { Select, Avatar } from 'antd';
+import './GroupMemberSelector.css';
 
 const { Option } = Select;
 
 const GroupMemberSelector = ({ users, selectedUserIds, onChange }) => {
+  // 선택된 사용자 정보 추출
+  const selectedUsers = users.filter(u => selectedUserIds.includes(u.id));
+
   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 className="group-member-selector-wrapper">
+      {/* 입력창 위에 보여줄 선택된 유저 */}
+      <div className="selected-user-tags">
+        {selectedUsers.map(user => (
+          <div key={user.id} className="selected-user-tag">
+            <Avatar className="avatar">{user.name[0]}</Avatar>
+            <span className="name">{user.name}</span>
+            <span
+              className="remove"
+              onClick={() => onChange(selectedUserIds.filter(id => id !== user.id))}
+            >
+              ×
+            </span>
           </div>
-        </Option>
-      ))}
-    </Select>
+        ))}
+      </div>
+
+      <Select
+        mode="multiple"
+        value={selectedUserIds}
+        onChange={onChange}
+        showSearch
+        optionFilterProp="label"
+        placeholder="이름 검색"
+        tagRender={() => null} // 태그 숨기기
+          maxTagCount={0} 
+            maxTagPlaceholder={() => null} 
+        style={{ width: '100%' }}
+      >
+        {users.map(user => (
+          <Option key={user.id} value={user.id} label={user.name}>
+            <div className={`user-option ${selectedUserIds.includes(user.id) ? 'selected' : ''}`}>
+              <div className="user-info">
+                <Avatar className="avatar">{user.name[0]}</Avatar>
+                <span>{user.name}</span>
+              </div>
+              {selectedUserIds.includes(user.id) && <span className="check">✔</span>}
+            </div>
+          </Option>
+        ))}
+      </Select>
+    </div>
   );
 };
 

polling-app-client/src/components/Dashboard/HomeDashboard.css

@@ -75,4 +75,3 @@
   border-radius: 4px;
   cursor: pointer;
 }
-

polling-app-client/src/util/APIUtils.js

@@ -146,3 +146,10 @@ export function getAllUsers(){
     })
 }
 
+export function joinGroupByCode(joinCode) {
+  return request({
+    url: API_BASE_URL + "/groups/join",
+    method: "POST",
+    body: JSON.stringify({ joinCode: String(joinCode) })  // ✅ 필드 이름 수정
+  });
+}