Feat '관리자 웹소켓 통신 완료 후 거의다 완료'

src/App.jsx

@@ -6,8 +6,6 @@ import Hobbyform from "./pages/Hobbyform.jsx";
 import Match from "./pages/Match.jsx";
 import Matchresult from "./pages/Matchresult.jsx";
 import Checkresult from "./pages/Checkresult.jsx";
-import Admin from "./pages/Admin.jsx";
-import AdminSelect from "./pages/AdminSelect.jsx";
 import Loading from "./pages/Loading.jsx";
 import Guide from "./pages/Guide.jsx";
 import CodeReader from "./pages/CodeReader.jsx";
@@ -42,10 +40,10 @@ export default function App() {
             <Route path="/match-result" element={<Matchresult />} />
             <Route path="/match" element={<Match />} />
             <Route path="/check-result" element={<Checkresult />} />
-            <Route path="/admin" element={<Admin />} />
+
             <Route path="/adminpage" element={<Adminpageunlogin />} />   
             <Route path="/adminpage/charge-requests" element={<AdminRequestList />} />           
-            <Route path="/admin-select" element={<AdminSelect />} />
+
             <Route path="/loading" element={<Loading />} />
             <Route path="/charge-request" element={<ChargeRequestPage />} />
             <Route path="/code-reader" element={<CodeReader />} />

src/Atoms.jsx

@@ -13,6 +13,7 @@ export const adminRequests = atom({
 export const userState = atom({
   key: "userState",
   default: {
+    university:"",
     major: "",
     age: "",
     contact: "kakao",

src/components/AdminRequestList.jsx

@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from "react";
 import "../css/components/AdminRequestList.css"; // 스타일 파일 경로 확인
 import AdminRequestListContainer from "./AdminRequestListContainer";
+
 import * as styles from "../css/components/AdminRequestList.css";
 import { useRecoilState } from "recoil";
 import { adminRequests } from "../Atoms";
 import SockJS from "sockjs-client";
 import Stomp from "stompjs";
 
-
+import AdminNavbar from "./Adminnavbar";
 
 function getTokenFromCookie() {
   const name = 'Authorization=';
@@ -31,11 +32,12 @@ function AdminRequestList() {
 
   useEffect(() => {
     const connectWebSocket = async () => {
-      const socket = new SockJS('http://backend.comatching.site:8080/ws');
+
+      const socket = new SockJS('https://backend.comatching.site:8080/ws');
       const client = Stomp.over(socket);
       const token = getTokenFromCookie();
 
-      console.log("Token from cookie:", token);
+
 
 
         client.connect({ Authorization: `Bearer ${token}` }, (frame) => {
@@ -47,7 +49,8 @@ function AdminRequestList() {
           client.subscribe('/topic/chargeRequests', (message) => {
             const chargeRequests = JSON.parse(message.body);
             console.log(chargeRequests);
-            setRequests((prevRequests) => [...prevRequests, ...chargeRequests]);
+            updateRequestsWithoutDuplicates(chargeRequests);
+
           });
 
           // 승인 업데이트 구독
@@ -75,7 +78,7 @@ function AdminRequestList() {
         console.error("Failed to connect to WebSocket:", error);
       }
     };
-
+    
     initializeWebSocket();
 
     return () => {
@@ -86,10 +89,40 @@ function AdminRequestList() {
       }
     };
   }, []); // 빈 의존성 배열로 한 번만 실행
+  function updateRequestsWithoutDuplicates(newRequests) {
+    // 현재 요청에 새 요청을 합칩니다.
+    const combinedRequests = [...requests, ...newRequests];
+
+    // userId를 키로 사용하여 가장 최근의 요청을 저장하는 객체를 생성합니다.
+    const latestRequestsMap = {};
+
+    combinedRequests.forEach(request => {
+      // 해당 userId의 기존 요청보다 더 최신인 경우에만 객체를 업데이트합니다.
+      if (!latestRequestsMap[request.userId] || new Date(latestRequestsMap[request.userId].createdAt) < new Date(request.createdAt)) {
+        latestRequestsMap[request.userId] = request;
+      }
+    });
+
+    // 객체의 값들만 추출하여 배열로 변환합니다.
+    const latestRequests = Object.values(latestRequestsMap);
+    setRequests(latestRequests);
+  }
+  function handleAction(userId, amount, actionType) {
+    const approvalData = {
+      userId,
+      amount,
+      approvalTime: new Date().toISOString(),
+    };
+    const destination = actionType === 'approve' ? '/app/approveCharge' : '/app/cancelCharge';
+    stompClient.send(destination, {}, JSON.stringify(approvalData));
+    setRequests(prevRequests => prevRequests.filter(req => req.userId !== userId));
+  }
 
   return (
+
     <div>
-      <div className="content">
+      <AdminNavbar/>
+      <div className={styles.content}>
         <div className={styles.adminRequestListTitle}>충전 요청 목록</div>
         <div className={styles.adminRequestListText}>
           유저로부터 이름, 아이디, 입금 내역 확인해서 그만큼 충전
@@ -102,6 +135,7 @@ function AdminRequestList() {
                   key={index}
                   request={request}
                   setRequests={setRequests}
+                  handleAction={handleAction} // handleAction을 prop으로 전달
                 />
               )
           )}

src/components/AdminRequestListContainer.jsx

@@ -8,106 +8,56 @@ import {
   adminRequestListItemInput,
   adminRequestListElementUserID,
   adminRequestListElementUserIDID,
-  adminRequestListItemPickmeButton,
-  adminRequestListItemPickmeValue,
-  adminRequestListItemSubmitButton,
   adminRequestListElementResultPoint,
   adminRequestListElementContainer,
   buttonMarginRight,
-  chargeDeleteButton
+  chargeDeleteButton,
+  formattedDateStyle
 } from "../css/components/AdminRequestListContainer.css.ts"; // 스타일 파일 import
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
 import pointIcon from '../../public/assets/point.svg';
-import heartIcon from '../../public/assets/heart.svg';
 
-function AdminRequestListContainer({ request, setRequests }) {
+function FormattedDate({ isoDate }) {
+  const formatDate = (dateStr) => {
+    const date = new Date(dateStr);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hour = String(date.getHours()).padStart(2, '0');
+    const minute = String(date.getMinutes()).padStart(2, '0');
+    return `${year}년 ${month}월 ${day}일 ${hour}시 ${minute}분`;
+
+  };
+
+  return (
+    <div>{formatDate(isoDate)}</div>
+  );
+}
+function AdminRequestListContainer({ request, setRequests , handleAction}) {
   const navigate = useNavigate();
   const [value, setValue] = useState({
-    add_point: 0,
+    add_point:  request.requestAmount,
     chargeCheck: false,
-    add_pick_me: 0,
-    result_point: request.point,
+    result_point:  request.existingPoints,
   });
 
   // 충전 확인 함수
-  const handleAdminSubmit = async () => {
-    const FormData = {
-      add_point: value.add_point,
-      add_pick_me: value.add_pick_me,
-      result_point: value.result_point,
-      contact_id: request.contact_id,
-    };
-    const response = await axios.post("/admin/manage/charge", FormData);
-    console.log(request);
-    if (response.data.status === 200) {
-      setRequests((prev) =>
-        prev.map((item) =>
-          item.contact_id === request.contact_id
-            ? { ...item, isChecked: true }
-            : item
-        )
-      );
-    }
-  };
-
-  // 충전 삭제 함수
-  const handleChargeDelete = async () => {
-    const response = await axios.get(
-      `/admin/manage/delete?contactId=${request.contact_id}`
-    );
-    if (response.data.status === 200) {
-      setRequests((prev) =>
-        prev.map((item) =>
-          item.contact_id === request.contact_id
-            ? { ...item, isChecked: true }
-            : item
-        )
-      );
-    }
-  };
-
-  // 잔액 증가 함수
   const handleChargeIncrease = () => {
-    setValue((prevState) => ({
+    handleAction(request.userId, value.add_point, 'approve');
+    setValue(prevState => ({
       ...prevState,
       result_point: prevState.result_point + prevState.add_point,
       chargeCheck: true,
     }));
   };
 
-  // 잔액 감소 함수
-  const handleChargeDecrease = () => {
-    if (value.result_point >= value.add_point) {
-      setValue((prevState) => ({
-        ...prevState,
-        result_point: prevState.result_point - prevState.add_point,
-        chargeCheck: false,
-      }));
-    } else {
-      alert("pickme를 취소해주세요");
-    }
+  // "요청 삭제" 버튼에 삭제 로직 적용
+  const handleChargeDelete = () => {
+    handleAction(request.userId, request.requestAmount, 'cancel');
   };
 
-  // Pickme 증가 함수
-  const handleIncrease = () => {
-    setValue((prevState) => ({
-      ...prevState,
-      add_pick_me: prevState.add_pick_me + 1,
-      result_point: prevState.result_point - 500,
-    }));
-  };
-
-  // Pickme 감소 함수
-  const handleDecrease = () => {
-    if (value.add_pick_me > 0) {
-      setValue((prevState) => ({
-        ...prevState,
-        add_pick_me: prevState.add_pick_me - 1,
-        result_point: prevState.result_point + 500,
-      }));
-    }
-  };
+
 
   // 입력값 변경 핸들러
   const handleInputChange = (event) => {
@@ -127,12 +77,14 @@ function AdminRequestListContainer({ request, setRequests }) {
         <div className={adminRequestListElementUserID}>
           userID: &nbsp;
           <div className={adminRequestListElementUserIDID}>
-            {request.contact_id}
+            {request.username}
           </div>
+
+
         </div>
         <div className={adminRequestListElementContainer}>
           <span className={adminRequestListElementResultPoint}>
-            총 잔액 : {value.result_point}
+            총 잔액 : {request.existingPoints}
           </span>
           <button className={chargeDeleteButton} onClick={handleChargeDelete}>요청 삭제</button>
         </div>
@@ -147,49 +99,17 @@ function AdminRequestListContainer({ request, setRequests }) {
         />
         <p className={adminRequestListElementUserIDID}> 입금액</p>
         <input
-          type="text"
+          type="number"
           value={value.add_point}
           onChange={handleInputChange}
           disabled={value.chargeCheck}
           className={adminRequestListItemInput}
         />
-        {value.chargeCheck ? (
-          <button onClick={handleChargeDecrease} className={buttonMarginRight}>취소</button>
-        ) : (
-          <button onClick={handleChargeIncrease} className={buttonMarginRight}>적용</button>
-        )}
-        <img
-          src={heartIcon}
-          alt="heart"
-          className={adminRequestListItemImg}
-        />
-        <p className={adminRequestListElementUserIDID}>기회 추가:</p>
-        <button
-          type="button"
-          onClick={handleDecrease}
-          className={adminRequestListItemPickmeButton}
-        >
-          -
-        </button>
-        <div className={adminRequestListItemPickmeValue}>
-          {value.add_pick_me}
+        <button onClick={handleChargeIncrease} className={buttonMarginRight}>적용</button>
+        <div  className={formattedDateStyle}>
+
+          <FormattedDate isoDate={request.createdAt} />
         </div>
-        <button
-          type="button"
-          onClick={handleIncrease}
-          className={adminRequestListItemPickmeButton}
-          disabled={value.result_point < 500}
-        >
-          +
-        </button>
-        <button
-          type="button"
-          className={adminRequestListItemSubmitButton}
-          onClick={handleAdminSubmit}
-          disabled={!value.chargeCheck}
-        >
-          확인
-        </button>
       </div>
     </div>
   );

src/components/ContactMethod.jsx

@@ -3,7 +3,7 @@ import ContactMethodInput from "./ContactMethodInput";
 import ContactMethodPick from "./ContactMethodPick";
 import * as styles from  "../css/components/ContactMethod.css.ts";
 
-function ContactMethod({ user, handleChange, setUser  }) {
+function ContactMethod({ user, handleChange, setIsContactVerified,setUser  }) {
   return (
     <Fragment>
       <ContactMethodPick user={user} setUser={setUser} />
@@ -12,6 +12,7 @@ function ContactMethod({ user, handleChange, setUser  }) {
         user={user}
         setUser={setUser}
         handleChange={handleChange}
+        setIsContactVerified={setIsContactVerified}
         // onContactVerified={onContactVerified}
       />
       {!user.contact_id_Verified && (