refactor: [#72] 컴포넌트 CSS를 Vanila로 변환

COMAtching · Jul 9, 2024 · a5fd35f · a5fd35f
1 parent c88a159
commit a5fd35f
Show file tree

Hide file tree

Showing 54 changed files with 939 additions and 499 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,18 +13,22 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/material": "^5.15.21",
+    "@vanilla-extract/css": "^1.15.3",
+    "axios": "^1.7.2",
     "base-64": "^1.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-qr-code": "^2.0.15",
-    "react-qr-reader": "^3.0.0-beta-1",
+    "react-qr-reader": "^2.2.1",
+    "react-qr-scanner": "^1.0.0-alpha.11",
     "react-router-dom": "^6.24.1",
     "react-type-animation": "^3.2.0",
     "recoil": "^0.7.7"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@vanilla-extract/vite-plugin": "^4.0.13",
     "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.2",

diff --git a/src/components/AdminRequestList.jsx b/src/components/AdminRequestList.jsx
@@ -1,17 +1,21 @@
-// AdminRequestList.js
-
 import { useEffect } from "react";
-import "../css/components/AdminRequestList.css";
+import "../css/components/AdminRequestList.css.ts"; // 확인: 경로와 확장자
 import AdminRequestListContainer from "./AdminRequestListContainer";
+import { adminRequestList, adminRequestListTitle, adminRequestListText, adminRequestListBox } 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,
+  };
+
   useEffect(() => {
     // 초기 요청 목록 초기화
-    setRequests([]);
+    setRequests([exampleRequest]);
     const fetchData = async () => {
       try {
         const response = await axios.get("/admin/manage/main");
@@ -31,16 +35,16 @@ function AdminRequestList() {
     };
 
     fetchData();
-  }, []);
+  }, [setRequests]); // useEffect의 의존성 배열에 setRequests 추가
 
   return (
-    <div className="AdminRequestList">
+    <div className={adminRequestList}>
       <div className="content">
-        <div className="AdminRequestList-title">충전 요청 목록</div>
-        <div className="AdminRequestList-text">
+        <div className={adminRequestListTitle}>충전 요청 목록</div>
+        <div className={adminRequestListText}>
           유저로부터 이름, 아이디, 입금 내역 확인해서 그만큼 충전
         </div>
-        <div className="AmdinRequestListBox">
+        <div className={adminRequestListBox}>
           {requests.map(
             (request, index) =>
               !request.isChecked && (
@@ -56,5 +60,4 @@ function AdminRequestList() {
     </div>
   );
 }
-
-export default AdminRequestList;
+export default AdminRequestList; // default로 export
diff --git a/src/components/AdminRequestListContainer.jsx b/src/components/AdminRequestListContainer.jsx
@@ -1,7 +1,22 @@
 import React, { useState } from "react";
-import "../css/components/AdminRequestListContainer.css";
+import {
+  adminRequestListContainer,
+  adminRequestListElement,
+  adminRequestListItem,
+  adminRequestListElementMargin,
+  adminRequestListItemImg,
+  adminRequestListItemInput,
+  adminRequestListElementUserID,
+  adminRequestListElementUserIDID,
+  adminRequestListItemPickmeButton,
+  adminRequestListItemPickmeValue,
+  adminRequestListItemSubmitButton,
+  adminRequestListElementResultPoint
+} 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 }) {
   const navigate = useNavigate();
@@ -11,6 +26,7 @@ function AdminRequestListContainer({ request, setRequests }) {
     add_pick_me: 0,
     result_point: request.point,
   });
+
   // 충전 확인 함수
   const handleAdminSubmit = async () => {
     const FormData = {
@@ -22,7 +38,6 @@ function AdminRequestListContainer({ request, setRequests }) {
     const response = await axios.post("/admin/manage/charge", FormData);
     console.log(request);
     if (response.data.status === 200) {
-      // 요청이 성공하면 해당 요청의 isChecked를 true로 변경하여 목록에서 제거
       setRequests((prev) =>
         prev.map((item) =>
           item.contact_id === request.contact_id
@@ -32,13 +47,13 @@ function AdminRequestListContainer({ request, setRequests }) {
       );
     }
   };
+
   // 충전 삭제 함수
   const handleChargeDelete = async () => {
     const response = await axios.get(
       `/admin/manage/delete?contactId=${request.contact_id}`
     );
     if (response.data.status === 200) {
-      // 요청이 성공하면 해당 요청의 isChecked를 true로 변경하여 목록에서 제거
       setRequests((prev) =>
         prev.map((item) =>
           item.contact_id === request.contact_id
@@ -63,14 +78,14 @@ function AdminRequestListContainer({ request, setRequests }) {
     if (value.result_point >= value.add_point) {
       setValue((prevState) => ({
         ...prevState,
-
         result_point: prevState.result_point - prevState.add_point,
         chargeCheck: false,
       }));
     } else {
       alert("pickme를 취소해주세요");
     }
   };
+
   // Pickme 증가 함수
   const handleIncrease = () => {
     setValue((prevState) => ({
@@ -79,6 +94,7 @@ function AdminRequestListContainer({ request, setRequests }) {
       result_point: prevState.result_point - 500,
     }));
   };
+
   // Pickme 감소 함수
   const handleDecrease = () => {
     if (value.add_pick_me > 0) {
@@ -103,56 +119,64 @@ function AdminRequestListContainer({ request, setRequests }) {
   };
 
   return (
-    <div className="AdminRequestListContainer">
-      <div className="AdminRequestListElement">
-        <div className="AdminRequestListElement-userID">
+    <div className={adminRequestListContainer}>
+      <div className={`${adminRequestListElement} ${adminRequestListElementMargin}`}>
+        <div className={adminRequestListElementUserID}>
           userID: &nbsp;
-          <div className="AdminRequestListElement-userID-ID">
-            {" "}
+          <div className={adminRequestListElementUserIDID}>
             {request.contact_id}
           </div>
         </div>
-        <div className="AdminRequestListElement-result_point">
-          총 잔액 :{value.result_point}
+        <div className={adminRequestListElementResultPoint}>
+          총 잔액 : {value.result_point}
         </div>
         <button onClick={handleChargeDelete}>X</button>
       </div>
 
-      <div className="AdminRequestListItem">
-        <img src={process.env.PUBLIC_URL + `assets/point.svg`} alt="cost" />
+      <div className={adminRequestListItem}>
+        <img
+          src={pointIcon}
+          alt="cost"
+          className={adminRequestListItemImg}
+        />
         <input
           type="text"
           value={value.add_point}
           onChange={handleInputChange}
           disabled={value.chargeCheck}
+          className={adminRequestListItemInput}
         />
         {value.chargeCheck ? (
           <button onClick={handleChargeDecrease}>취소</button>
         ) : (
           <button onClick={handleChargeIncrease}>적용</button>
         )}
-        <img src={process.env.PUBLIC_URL + `assets/heart.svg`} alt="heart" />
+        <img
+          src={heartIcon}
+          alt="heart"
+          className={adminRequestListItemImg}
+        />
         <button
           type="button"
           onClick={handleDecrease}
-          className="AdminRequestListItem-pickme-button"
+          className={adminRequestListItemPickmeButton}
         >
           -
         </button>
-        <div className="AdminRequestListItem-pickme-value">
+        <div className={adminRequestListItemPickmeValue}>
           {value.add_pick_me}
         </div>
         <button
           type="button"
           onClick={handleIncrease}
-          className="AdminRequestListItem-pickme-button"
-          disabled={value.result_point < 500} // result_point가 500보다 작거나 같으면 비활성화
+          className={adminRequestListItemPickmeButton}
+          disabled={value.result_point < 500}
         >
           +
         </button>
         <button
           type="button"
-          className="AdminRequestListItem-submit-button"
+          className={adminRequestListItemSubmitButton}
           onClick={handleAdminSubmit}
           disabled={!value.chargeCheck}
         >

diff --git a/src/components/AgeButton.jsx b/src/components/AgeButton.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import "../css/components/AgeButton.css";
+import { ageButton, active } from "../css/components/AgeButton.css.ts";
 
 function AgeButton({ formData, value, onClick, isClickable, text }) {
   const isActive = formData === value;
@@ -13,9 +13,7 @@ function AgeButton({ formData, value, onClick, isClickable, text }) {
   return (
     <button
       type="button"
-      className={`AgeButton ${
-        isClickable ? `${isActive ? "active" : ""}` : ""
-      } `}
+      className={`${ageButton} ${isClickable ? (isActive ? active : '') : ''}`}
       value={value}
       onClick={handleClick}
       disabled={!isClickable}
@@ -25,4 +23,4 @@ function AgeButton({ formData, value, onClick, isClickable, text }) {
   );
 }
 
-export default AgeButton;
+export default AgeButton;
diff --git a/src/components/AgeInput.jsx b/src/components/AgeInput.jsx
@@ -1,6 +1,6 @@
 import React, { Fragment } from "react";
 import MyInput from "./MyInput";
-import "../css/components/AgeInput.css";
+import * as styles from "../css/components/AgeInput.css";
 
 function AgeInput({ value, onChange }) {
   const handleBlur = (e) => {
@@ -21,13 +21,14 @@ function AgeInput({ value, onChange }) {
   return (
     <Fragment>
       <h3>나이</h3>
-      <div className="age">
+      <div className={styles.age}>
         <MyInput
           name="age"
           value={value}
           onChange={onChange}
           onBlur={handleBlur}
           placeholder="20~29살만 참여 가능합니다 만나이 🙅‍♂️"
+          className={styles.input}
         />
       </div>
     </Fragment>

diff --git a/src/components/BottomNavButton.jsx b/src/components/BottomNavButton.jsx
@@ -1,10 +1,10 @@
-// import React from "react";
-import "../css/components/BottomNavButton.css";
+import React from "react";
+import * as styles from "../css/components/BottomNavButton.css";
 
 function BottomNavButton({ onClick, imgSrc, imgText, buttonText }) {
   return (
-    <button className="BottomNavButton" onClick={onClick}>
-      <img src={import.meta.env.VITE_PUBLIC_URL + imgSrc} alt={imgText} />
+    <button className={styles.bottomNavButton} onClick={onClick}>
+      <img src={import.meta.env.VITE_PUBLIC_URL + imgSrc} alt={imgText} className={styles.img} />
       {buttonText}
     </button>
   );

diff --git a/src/components/ContactFrequencyMaker.jsx b/src/components/ContactFrequencyMaker.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import "../css/components/ContactFrequencyMaker.css";
+import * as styles from  "../css/components/ContactFrequencyMaker.css.ts";
 
 function ContactFrequencyMaker({ handleQuestionComplete, currentUserState, setCurrentUserState, setChooseAnswer }) {
   // 연락 빈도를 클릭했을 때 처리하는 함수
@@ -20,7 +20,7 @@ function ContactFrequencyMaker({ handleQuestionComplete, currentUserState, setCu
           <button
             key={index}
             type="button"
-            className={`AgeMaker ${currentUserState.contact_frequency === value ? "selected" : ""}`}
+            className={`${styles.ageMaker} ${currentUserState.contact_frequency === value ? styles.selected : ""}`}
             onClick={() => handleAgeClick(value, index)}
           >
             {value}
@@ -38,4 +38,4 @@ function ContactFrequencyMaker({ handleQuestionComplete, currentUserState, setCu
   );
 }
 
-export default ContactFrequencyMaker;
+export default ContactFrequencyMaker;
diff --git a/src/components/ContactMethod.jsx b/src/components/ContactMethod.jsx
@@ -1,7 +1,7 @@
 import { Fragment } from "react";
 import ContactMethodInput from "./ContactMethodInput";
 import ContactMethodPick from "./ContactMethodPick";
-import "../css/components/ContactMethod.css";
+import * as styles from  "../css/components/ContactMethod.css.ts";
 
 function ContactMethod({ user, handleChange, setUser }) {
   return (
@@ -14,7 +14,7 @@ function ContactMethod({ user, handleChange, setUser }) {
         handleChange={handleChange}
       />
       <h6
-        className={`check-message ${user.contact_id_Verified ? "" : "hidden"}`}
+        className={`${styles.checkMessage} ${user.contact_id_Verified ? "" : styles.hidden}`}
       >
         중복입력 방지를 위해 확인버튼을 눌러주세요
       </h6>

diff --git a/src/components/ContactMethodButton.jsx b/src/components/ContactMethodButton.jsx
@@ -1,14 +1,19 @@
 import React from "react";
-import "../css/components/ContactMethodButton.css";
+import * as styles from "../css/components/ContactMethodButton.css.ts";
+
 
 function ContactMethodButton({ isActive, onClick, image, alt }) {
   return (
     <button
       type="button"
-      className={`phonebutton ${isActive ? "active" : ""}`}
+      className={`${styles.phonebutton} ${isActive ? styles.active : styles.inactive}`}
       onClick={onClick}
     >
-      <img src={image} alt={alt} className="ContactMethodButtonImg" />
+      <img 
+        src={image} 
+        alt={alt} 
+        className={`${styles.contactMethodButtonImg} ${isActive ? styles.activeImg : ""}`}
+      />
     </button>
   );
 }

diff --git a/src/components/ContactMethodInput.jsx b/src/components/ContactMethodInput.jsx
@@ -1,6 +1,6 @@
-// import React from "react";
+import React from "react";
 import MyInput from "./MyInput";
-import "../css/components/ContactMethodInput.css";
+import * as styles from "../css/components/ContactMethodInput.css.ts";
 import axios from "../axiosConfig";
 
 function ContactMethodInput({ handleChange, user, setUser }) {
@@ -67,7 +67,7 @@ function ContactMethodInput({ handleChange, user, setUser }) {
   };
 
   return (
-    <div className="contact-input">
+    <div className={styles.contactInput}>
       <MyInput
         name="contact_id"
         value={user.contact_id}
@@ -77,8 +77,9 @@ function ContactMethodInput({ handleChange, user, setUser }) {
             ? "ex) kakao12"
             : "ex) @cuk_coma (@도 꼭 넣어주세요)"
         }
+        className={styles.inputField}
       />
-      <button type="button" className="checkbutton" onClick={handleCheck}>
+      <button type="button" className={styles.checkButton} onClick={handleCheck}>
         확인
       </button>
     </div>