Feat admin_charge '관리자 충전 페이지 완성'

COMAtching · Aug 29, 2024 · d9b7807 · d9b7807
1 parent 5526ce5
commit d9b7807
Show file tree

Hide file tree

Showing 9 changed files with 440 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,9 @@
     "react-qr-scanner": "^1.0.0-alpha.11",
     "react-router-dom": "^6.24.1",
     "react-type-animation": "^3.2.0",
-    "recoil": "^0.7.7"
+    "recoil": "^0.7.7",
+    "sockjs-client": "^1.6.1",
+    "stompjs": "^2.3.3"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

diff --git a/src/components/AdminRequestList.jsx b/src/components/AdminRequestList.jsx
@@ -1,21 +1,33 @@
 import { useEffect } from "react";
 import "../css/components/AdminRequestList.css.ts"; // 확인: 경로와 확장자
 import AdminRequestListContainer from "./AdminRequestListContainer";
-import { adminRequestList, adminRequestListTitle, adminRequestListText, adminRequestListBox } from '../css/components/AdminRequestList.css.ts';
+import * as styles from "../css/components/AdminRequestList.css.ts";
+
 import axios from "axios";
 import { useRecoilState } from "recoil";
 import { adminRequests } from "../Atoms";
 
 function AdminRequestList() {
   const [requests, setRequests] = useRecoilState(adminRequests);
-  const exampleRequest = {
-    contact_id: "user123",
-    point: 1000,
-  };
-
+  const exampleRequests = [
+    {
+      contact_id: "user123",
+      point: 2000,
+    },
+    {
+      contact_id: "user456",
+      point: 2000,
+    },
+  ];
   useEffect(() => {
     // 초기 요청 목록 초기화
-    setRequests([exampleRequest]);
+    setRequests(exampleRequests);
+
+
+  }, [setRequests]); // useEffect의 의존성 배열에 setRequests 추가
+ /* useEffect(() => {
+    // 초기 요청 목록 초기화
+    setRequests(exampleRequests);
     const fetchData = async () => {
       try {
         const response = await axios.get("/admin/manage/main");
@@ -36,15 +48,33 @@ function AdminRequestList() {
 
     fetchData();
   }, [setRequests]); // useEffect의 의존성 배열에 setRequests 추가
-
+*/
   return (
-    <div className={adminRequestList}>
-      <div className="content">
-        <div className={adminRequestListTitle}>충전 요청 목록</div>
-        <div className={adminRequestListText}>
-          유저로부터 이름, 아이디, 입금 내역 확인해서 그만큼 충전
+    <div >
+      <div className={styles.requestSummaryBox}>
+        <div className={styles.requestSummaryItem}>
+          <span>현재 요청건수</span>
+          <span className={styles.requestSummaryNumber}>0</span>
         </div>
-        <div className={adminRequestListBox}>
+        <div className={styles.requestSummaryItem}>
+          <span>누적 요청건수</span>
+          <span className={styles.requestSummaryNumber}>0</span>
+        </div>
+        <div className={styles.requestSummaryItem}>
+          <span>누적 승인건수</span>
+          <span className={styles.requestSummaryNumber}>0</span>
+        </div>
+        <div className={styles.requestSummaryItem}>
+          <span>누적 취소건수</span>
+          <span className={styles.requestSummaryNumber}>0</span>
+        </div>
+      </div>
+      <div className="content">
+        <div className={styles.adminRequestListTitle}>충전 요청 목록</div>
+          <div className={styles.adminRequestListText}>
+            유저로부터 이름, 아이디, 입금 내역 확인해서 그만큼 충전
+          </div>
+        <div className={styles.adminRequestListBox}>
           {requests.map(
             (request, index) =>
               !request.isChecked && (
@@ -60,4 +90,4 @@ function AdminRequestList() {
     </div>
   );
 }
-export default AdminRequestList; // default로 export
+export default AdminRequestList;
diff --git a/src/components/AdminRequestListContainer.jsx b/src/components/AdminRequestListContainer.jsx
@@ -11,7 +11,10 @@ import {
   adminRequestListItemPickmeButton,
   adminRequestListItemPickmeValue,
   adminRequestListItemSubmitButton,
-  adminRequestListElementResultPoint
+  adminRequestListElementResultPoint,
+  adminRequestListElementContainer,
+  buttonMarginRight,
+  chargeDeleteButton
 } from "../css/components/AdminRequestListContainer.css.ts"; // 스타일 파일 import
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
@@ -127,10 +130,13 @@ function AdminRequestListContainer({ request, setRequests }) {
             {request.contact_id}
           </div>
         </div>
-        <div className={adminRequestListElementResultPoint}>
-          총 잔액 : {value.result_point}
+        <div className={adminRequestListElementContainer}>
+          <span className={adminRequestListElementResultPoint}>
+            총 잔액 : {value.result_point}
+          </span>
+          <button className={chargeDeleteButton} onClick={handleChargeDelete}>요청 삭제</button>
         </div>
-        <button onClick={handleChargeDelete}>X</button>
+
       </div>
 
       <div className={adminRequestListItem}>
@@ -148,15 +154,16 @@ function AdminRequestListContainer({ request, setRequests }) {
           className={adminRequestListItemInput}
         />
         {value.chargeCheck ? (
-          <button onClick={handleChargeDecrease}>취소</button>
+          <button onClick={handleChargeDecrease} className={buttonMarginRight}>취소</button>
         ) : (
-          <button onClick={handleChargeIncrease}>적용</button>
+          <button onClick={handleChargeIncrease} className={buttonMarginRight}>적용</button>
         )}
         <img
           src={heartIcon}
           alt="heart"
           className={adminRequestListItemImg}
         />
+        <p className={adminRequestListElementUserIDID}>기회 추가:</p>
         <button
           type="button"
           onClick={handleDecrease}

diff --git a/src/css/components/AdminRequestList.css.ts b/src/css/components/AdminRequestList.css.ts
@@ -1,6 +1,31 @@
 // AdminRequestList.css.ts
 import { style } from '@vanilla-extract/css';
 
+
+export const requestSummaryBox = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  backgroundColor: '#fff',
+  width: '80%',
+  margin: '0 auto',
+  padding: '24px 56px',
+  borderRadius: '12px', // Adds rounded corners
+  boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)', // Adds a subtle shadow
+});
+
+export const requestSummaryItem = style({
+  textAlign: 'center',
+  color: '#383838',
+  fontSize: '16px',
+});
+
+export const requestSummaryNumber = style({
+  display: 'block',
+  fontSize: '48px',
+  fontWeight: 'bold',
+  marginTop: '8px',
+});
 export const adminRequestList = style({
   width: '100%',
 });

diff --git a/src/css/components/AdminRequestListContainer.css.ts b/src/css/components/AdminRequestListContainer.css.ts
@@ -8,9 +8,11 @@ export const adminRequestListElement = style({
 
 export const adminRequestListContainer = style({
   width: '90%',
-  border: '1px solid #000000',
+  border: 'none', /* 기존 border 제거 */
+  borderBottom: '1px solid #000000', /* 아래쪽에만 border 추가 */
   backgroundColor: '#ffffff',
   margin: '10px auto',
+
 });
 
 export const adminRequestListItem = style({
@@ -35,9 +37,13 @@ export const adminRequestListItemInput = style({
   justifyContent: 'center',
   padding: '0',
   marginLeft: '15px',
-  marginRight: '73px',
+  marginRight: '3px',
 });
+export const buttonMarginRight =style({
+  marginLeft:'10px',
+  marginRight: '50px',
 
+});
 export const adminRequestListElementUserID = style({
   display: 'flex',
   alignItems: 'center',
@@ -51,6 +57,7 @@ export const adminRequestListElementUserIDID = style({
   fontSize: '24px',
   fontWeight: 'bold',
   color: '#000000',
+  marginRight:"10px",
 });
 
 export const adminRequestListItemPickmeButton = style({
@@ -79,7 +86,31 @@ export const adminRequestListItemSubmitButton = style({
 });
 
 export const adminRequestListElementResultPoint = style({
-  color: 'red',
+  color: '#d3d3d3',  /* grayscale 색상으로 변경 */
   fontSize: '24px',
-  fontWeight: '900',
+  fontWeight: '400',
+
+});
+export const adminRequestListElementContainer = style({
+  display: 'flex', /* Use flexbox for alignment */
+  alignItems: 'center', /* Align items vertically center */
+  gap: '10px', /* Space between the text and button */
+});
+
+export const chargeDeleteButton = style({
+  color: '#000000', /* 검정색 텍스트 */
+  backgroundColor: '#d3d3d3', /* 배경색 */
+  padding: '1px 6px', /* 패딩 */
+  width: '74px', /* 너비 */
+  height: '24px', /* 높이 */
+  border: 'none', /* 기본 테두리 제거 */
+  borderRadius: '4px', /* 둥근 모서리 */
+  cursor: 'pointer', /* 마우스 커서 변경 */
+
+  marginLeft: '10px',
+  fontSize: '12px', /* 텍스트 크기 */
+  transition: 'background-color 0.3s', /* 배경색 변화에 대한 트랜지션 */
+  ':hover': {
+    backgroundColor: '#6d6d6d', /* 호버 시 배경색 변화 */
+  },
 });
diff --git a/src/css/pages/ChargeRequests.css b/src/css/pages/ChargeRequests.css
@@ -1,4 +1,5 @@
-.container{
-  margin-top: 100px;
-
+.admin-container{
+  margin-top: 76px;
+  padding: 50px;
+  background-color: rgb(240, 240, 240);
 }
diff --git a/src/pages/ChargeRequestsPage.jsx b/src/pages/ChargeRequestsPage.jsx
@@ -3,7 +3,7 @@ import '../css/pages/ChargeRequests.css'
 import AdminRequestList from '../components/AdminRequestList';
 function ChargeRequestsPage() {
     return (
-        <div className='container'>
+        <div className='admin-container'>
 
             {/* 충전 요청 관련 기능 구현 */}
             <AdminRequestList />

diff --git a/src/pages/MainpageUnLogin.jsx b/src/pages/MainpageUnLogin.jsx
@@ -16,7 +16,7 @@ function MainpageUnLogin() {
   // Redirection페이지로 옮겨서 role을 확인하는 과정을 거쳤습니다.
   const handleLogin = () => {
     window.location.href =
-      "https://catholic-mibal.site/oauth2/authorization/kakao";
+      "http://backend.comatching.site:8080/login";
   };
 
   // 서비스 이용법 안내 페이지로 이동하는 핸들러