Merge pull request #80 from COMAtching/refactor/#72

Refactor/#72
COMAtching · Sep 3, 2024 · 5a217ef · 5a217ef
2 parents 7e453d5 + a59ffca
commit 5a217ef
Show file tree

Hide file tree

Showing 19 changed files with 260 additions and 356 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,4 +1,5 @@
 .App {
+  margin: 0px;
   text-align: center;
 }
 
@@ -10,6 +11,7 @@
 @media (max-width: 768px) {
   .container {
     background-size: cover;
+    margin: 0px;
   }
   .header,
   .content {

diff --git a/src/components/AdminRequestList.jsx b/src/components/AdminRequestList.jsx
@@ -11,12 +11,12 @@ import Stomp from "stompjs";
 import AdminNavbar from "./Adminnavbar";
 
 function getTokenFromCookie() {
-  const name = 'Authorization=';
+  const name = "Authorization=";
   const decodedCookie = decodeURIComponent(document.cookie);
-  const ca = decodedCookie.split(';');
+  const ca = decodedCookie.split(";");
   for (let i = 0; i < ca.length; i++) {
     let c = ca[i];
-    while (c.charAt(0) === ' ') {
+    while (c.charAt(0) === " ") {
       c = c.substring(1);
     }
     if (c.indexOf(name) === 0) {
@@ -32,43 +32,40 @@ function AdminRequestList() {
 
   useEffect(() => {
     const connectWebSocket = async () => {
-
-      const socket = new SockJS('https://backend.comatching.site:8080/ws');
+      const socket = new SockJS("https://backend.comatching.site/wss");
       const client = Stomp.over(socket);
       const token = getTokenFromCookie();
 
-
-
-
-        client.connect({ Authorization: `Bearer ${token}` }, (frame) => {
-          console.log('Connected: ' + frame);
+      client.connect(
+        { Authorization: `Bearer ${token}` },
+        (frame) => {
+          console.log("Connected: " + frame);
 
           setStompClient(client);
 
           // 충전 요청 구독
-          client.subscribe('/topic/chargeRequests', (message) => {
+          client.subscribe("/topic/chargeRequests", (message) => {
             const chargeRequests = JSON.parse(message.body);
             console.log(chargeRequests);
             updateRequestsWithoutDuplicates(chargeRequests);
-
           });
 
           // 승인 업데이트 구독
-          client.subscribe('/topic/approvalUpdate', (message) => {
+          client.subscribe("/topic/approvalUpdate", (message) => {
             const userId = message.body;
             setRequests((prevRequests) =>
               prevRequests.map((request) =>
-                request.contact_id === userId ? { ...request, isChecked: true } : request
+                request.contact_id === userId
+                  ? { ...request, isChecked: true }
+                  : request
               )
             );
           });
-
-
-        }, (error) => {
-          console.error('Error connecting to WebSocket', error);
-
-        });
-
+        },
+        (error) => {
+          console.error("Error connecting to WebSocket", error);
+        }
+      );
     };
 
     const initializeWebSocket = async () => {
@@ -78,31 +75,35 @@ function AdminRequestList() {
         console.error("Failed to connect to WebSocket:", error);
       }
     };
-    
+
     initializeWebSocket();
 
     return () => {
       if (stompClient && stompClient.connected) {
         stompClient.disconnect(() => {
-          console.log('Disconnected');
+          console.log("Disconnected");
         });
       }
     };
   }, []); // 빈 의존성 배열로 한 번만 실행
   function updateRequestsWithoutDuplicates(newRequests) {
     // 현재 요청에 새 요청을 합칩니다.
     const combinedRequests = [...requests, ...newRequests];
-    
+
     // userId를 키로 사용하여 가장 최근의 요청을 저장하는 객체를 생성합니다.
     const latestRequestsMap = {};
-  
-    combinedRequests.forEach(request => {
+
+    combinedRequests.forEach((request) => {
       // 해당 userId의 기존 요청보다 더 최신인 경우에만 객체를 업데이트합니다.
-      if (!latestRequestsMap[request.userId] || new Date(latestRequestsMap[request.userId].createdAt) < new Date(request.createdAt)) {
+      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);
@@ -113,15 +114,17 @@ function AdminRequestList() {
       amount,
       approvalTime: new Date().toISOString(),
     };
-    const destination = actionType === 'approve' ? '/app/approveCharge' : '/app/cancelCharge';
+    const destination =
+      actionType === "approve" ? "/app/approveCharge" : "/app/cancelCharge";
     stompClient.send(destination, {}, JSON.stringify(approvalData));
-    setRequests(prevRequests => prevRequests.filter(req => req.userId !== userId));
+    setRequests((prevRequests) =>
+      prevRequests.filter((req) => req.userId !== userId)
+    );
   }
 
   return (
-
     <div>
-      <AdminNavbar/>
+      <AdminNavbar />
       <div className={styles.content}>
         <div className={styles.adminRequestListTitle}>충전 요청 목록</div>
         <div className={styles.adminRequestListText}>

diff --git a/src/components/Adminnavbar.jsx b/src/components/Adminnavbar.jsx
@@ -14,7 +14,7 @@ function AdminNavbar() {
         navigate(path); // 네비게이트 함수로 경로 이동
     };
 
-    const toggleMenu = () => {
+    const toggleMenu = ( ) => {
         setMenuOpen(!menuOpen);
     };
 
@@ -58,7 +58,7 @@ function AdminNavbar() {
             <div className={`menu ${menuOpen ? 'open' : ''}`}>
                 <div
                     className={`menu-item ${activeMenu === 'main' ? 'active' : ''}`}
-                    onClick={() => handleMenuClick('main', '/adminpage')}
+                    onClick={() => handleMenuClick('main', '/adminpage/charge-requests')}
                 >
                     Main
                 </div>
@@ -68,18 +68,18 @@ function AdminNavbar() {
                 >
                     충전요청
                     {chargeRequestCount > 0 && (
-                        <span className="request-count">{chargeRequestCount}</span>
+                        <span className="request-count">0 </span>
                     )}
                 </div>
                 <div
                     className={`menu-item ${activeMenu === 'user-management' ? 'active' : ''}`}
-                    onClick={() => handleMenuClick('user-management', '/adminpage/user-management')}
+                    onClick={() => handleMenuClick('user-management', '/adminpage/charge-requests')}
                 >
                     가입자관리
                 </div>
                 <div
                     className={`menu-item ${activeMenu === 'team-management' ? 'active' : ''}`}
-                    onClick={() => handleMenuClick('team-management', '/adminpage/team-management')}
+                    onClick={() => handleMenuClick('team-management', '/adminpage/charge-requests')}
                 >
                     팀관리
                 </div>

diff --git a/src/components/HartButtonInfo.jsx b/src/components/HartButtonInfo.jsx
@@ -12,7 +12,7 @@ function HartButtonInfo({
 
 
     const [userInfo, setUserInfo] = useRecoilState(userState);
-    const [hearts, setHearts] = useState(0);
+    const [hearts, setHearts] = useState("");
     const pointsPerHeart = 500; // 하트 당 500 포인트
 
     const handleHeartsChange = (event) => {
@@ -42,11 +42,15 @@ function HartButtonInfo({
 
             if (response.status === 200) {
                 alert("교환 성공!");
+
                 setUserInfo(prevState => ({
                 ...prevState,
                 point: prevState.point - totalPointsNeeded,
                 pickme: prevState.pickme + hearts
+
             }));
+            window.location.reload();
+            handleToggleClick();
             } else {
                 alert("교환 실패: " + response.data.message);
             }

diff --git a/src/components/TermsAgreementModal.jsx b/src/components/TermsAgreementModal.jsx
@@ -35,16 +35,12 @@ const TermsAgreementModal = ({ isOpen, onRequestClose, handleSubmit, registerChe
                         <li>
                             <input type="checkbox" id="terms1" checked={registerCheck.terms1} onChange={handleCheckboxChange} />
                             <label htmlFor="terms1">이용약관 동의 </label>
-                            <a href="/terms1" target="_blank" rel="noopener noreferrer" className="terms-link">
-                                <img src="/assets/agreementtoggle.svg" alt="이용약관 확인" />
-                            </a>
+
                         </li>
                         <li>
                             <input type="checkbox" id="terms2" checked={registerCheck.terms2} onChange={handleCheckboxChange} />
                             <label htmlFor="terms2">개인정보 수집 이용 동의 </label>
-                            <a href="/terms2" target="_blank" rel="noopener noreferrer" className="terms-link">
-                                <img src="/assets/agreementtoggle.svg" alt="개인정보 수집 이용 확인" />
-                            </a>
+
                         </li>
                         <li>
                             <input type="checkbox" id="terms3" checked={registerCheck.terms3} onChange={handleCheckboxChange} />

diff --git a/src/css/components/MajorSelector.css.ts b/src/css/components/MajorSelector.css.ts
@@ -32,4 +32,5 @@ export const majorSelectorElementSelect = style({
   border: '1px #eaeaea solid',
   borderRadius: '15px',
   padding: '0 12px',
+
 });
diff --git a/src/css/pages/ChargeRequestPage.css b/src/css/pages/ChargeRequestPage.css
@@ -23,3 +23,8 @@
     margin-bottom: 20px;
     font-size: 30px;
   }
+  @media (max-width: 450px) {
+    .charge-request-clicked-top-page{
+      font-size: 20px;
+    }
+  }
diff --git a/src/css/pages/MainpageUnLogin.css b/src/css/pages/MainpageUnLogin.css
@@ -1,48 +1,29 @@
-/* .agreement-box {
-  background-color: #ffffff; 
-  border: 2px solid #000000; 
-  border-radius: 10px; 
-  padding: 20px; 
-  margin-top: 20px;
-} */
-/* .start-button {
-  margin-top: 10px;
-  background-image: linear-gradient(135deg, #ff775e, #ff4d61, #e83abc);
-  color: #ffffff;
-  width: 100%;
-  height: 89px;
-  border-radius: 0 0 32px 32px;
-  font-size: 32px;
-  font-weight: bold;
-} */
+.container{
+  width: calc(100% - 48px);
+
+}
 .margin_top{
-  margin-top: 142px;
+  margin-top: 50px;
 }
 .greeting-message{
   font-family: 'Pretendard', sans-serif;
-  width: 400px;
+
   height: 135px;
-  font-size: 32px;
+  font-size: 25px;
   font-weight:bold;
   text-align: left;
   line-height: 1.3;
   margin-top: 28px;
 }
-/* .welcome {
-  font-family: "Pretendard", sans-serif;
-  font-size: 28px;
-  font-weight: 700;
-  margin-top: 24px;
-  margin-bottom: 24px;
-} */
+
 
 .bubble {
   position: absolute;
   background: #ffffff;
   border: 1px solid #ff4d61;
   border-radius: 24px;
   padding: 4px 8px;
-  left: 50%;
+  left: 44%;
   transform: translateX(-50%);
   display: inline-block;
   white-space: nowrap;
@@ -80,7 +61,7 @@
 }
 
 .bubble-counter {
-  position: absolute;
+
   background: #ffffff;
   border: 1px solid #ff4d61;
   border-radius: 24px;
@@ -98,7 +79,7 @@
 .bubble-counter:after,
 .bubble-counter:before {
   top: 100%;
-  left: 27%;
+  left: 50%;
   border: solid transparent;
   content: "";
   height: 0;
@@ -123,7 +104,7 @@
   margin-top: 48px;
   border-radius: 15px;
   height: 48px;
-  width: 80%;
+  width: 90%;
   background-color: #fee500;
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
 }