refactor. match

COMAtching · Jul 2, 2024 · 6233d6b · 6233d6b
1 parent 1749f0b
commit 6233d6b
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 190 deletions.
diff --git a/src/components/ChargeButtonInfo.js b/src/components/ChargeButtonInfo.js
@@ -0,0 +1,47 @@
+import React from "react";
+
+function ChargeButtonInfo({
+  handleNotService,
+  handleChargeRequest,
+  chargeclick,
+}) {
+  return (
+    <div className="charge-request-clicked">
+      <div className="charge-request-clicked-top">
+        💁 부스에 충전 요청하기
+        <button
+          className="charge-request-clicked-img"
+          type="button"
+          //onClick={handleToggleClick}
+          onClick={handleNotService}
+        >
+          <img
+            src={process.env.PUBLIC_URL + `assets/arrowup.svg`}
+            alt="충전요청 닫기"
+          />
+        </button>
+      </div>
+      <li className="charge-request-clicked-text">
+        입금 후 포인트 충전을 원하거나
+      </li>
+      <li className="charge-request-clicked-text">
+        포인트를 PickMe로 바꾸고 싶을때 버튼을 눌러 주세요
+      </li>
+      <li className="charge-request-clicked-text">
+        요청 후에는 입금 화면과 아이디를 보여 주세요.
+      </li>
+      <li className="charge-request-clicked-text">
+        버튼 남용 시 이용이 제한될 수 있으니 유의 바랍니다.
+      </li>
+      <button
+        className="charge-request-clicked-button"
+        onClick={handleChargeRequest}
+        disabled={chargeclick.chargeclick}
+      >
+        충전 요청하기
+      </button>
+    </div>
+  );
+}
+
+export default ChargeButtonInfo;
diff --git a/src/components/HobbyChoice.js b/src/components/HobbyChoice.js
@@ -0,0 +1,19 @@
+import React from "react";
+
+function HobbyChoice({ index, hobby, pickHobby, handleHobbyClick }) {
+  return (
+    <button
+      key={index}
+      className={`hobby-item ${
+        pickHobby.hobby.includes(hobby.label) ? "selected" : ""
+      }`}
+      onClick={() => handleHobbyClick(hobby.label)}
+    >
+      <img src={hobby.image} alt={hobby.alt} />
+      <div>{hobby.label}</div>
+    </button>
+  );
+}
+
+export const MemoizedHobbyChoice = React.memo(HobbyChoice);
+export default MemoizedHobbyChoice;
diff --git a/src/components/MatchOptionButton.js b/src/components/MatchOptionButton.js
@@ -0,0 +1,34 @@
+import React from "react";
+
+function MatchOptionButton({ state, num, handleButtonClick, money }) {
+  return (
+    <div className="match-premium-option-right">
+      <div className="match-premium-option-cost">
+        <img src={process.env.PUBLIC_URL + `assets/point.svg`} alt="cost" />
+        {money}
+      </div>
+      {!state ? (
+        <button
+          type="button"
+          className="match-premium-option-unclick-button"
+          onClick={() => handleButtonClick(num, money)}
+        >
+          +
+        </button>
+      ) : (
+        <button
+          type="button"
+          className="match-premium-option-click-button"
+          onClick={() => handleButtonClick(num, -money)}
+        >
+          <img
+            src={`${process.env.PUBLIC_URL}/assets/Backspace.svg`}
+            alt="닫기"
+          />
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default MatchOptionButton;
diff --git a/src/pages/Hobbyform.js b/src/pages/Hobbyform.js
@@ -6,6 +6,7 @@ import { useRecoilState } from "recoil";
 import { userState } from "../Atoms";
 import hobbyIcons from "../data/hobbyIcons"; // 취미 아이콘 데이터
 import MemoizedHobbyElement from "../components/HobbyElement";
+import MemoizedHobbyChoice from "../components/HobbyChoice";
 function Hobbyform() {
   const navigate = useNavigate();
   const [pickHobby, setPickHobby] = useRecoilState(userState);
@@ -43,7 +44,7 @@ function Hobbyform() {
         <div className="select-hobby-text">
           본인의 취미를 알려주세요. (1-5개)
         </div>
-        {/*고른 취미 보여주는 칸(컴포넌트화 해도 될거같은데 쓰이는게 애매해서 selected-hobby만 할까 고민중입니다.) */}
+        {/*고른 취미 보여주는 칸(컴포넌트화 더 진행할지 고민중입니다) */}
         <div className="selected-hobbies">
           {pickHobby.hobby.map((label, index) => {
             const hobby = hobbyIcons.find((item) => item.label === label);
@@ -53,25 +54,17 @@ function Hobbyform() {
                 hobby={hobby}
                 className="selected-hobby"
               />
-              // <div key={index} className="selected-hobby">
-              //   <img src={hobby.image} alt={hobby.alt} />
-              //   <div>{hobby.label}</div>
-              // </div>
             );
           })}
         </div>
         <div className="hobby-grid">
           {hobbyIcons.map((hobby, index) => (
-            <button
-              key={index}
-              className={`hobby-item ${
-                pickHobby.hobby.includes(hobby.label) ? "selected" : ""
-              }`}
-              onClick={() => handleHobbyClick(hobby.label)}
-            >
-              <img src={hobby.image} alt={hobby.alt} />
-              <div>{hobby.label}</div>
-            </button>
+            <MemoizedHobbyChoice
+              index={index}
+              hobby={hobby}
+              pickHobby={pickHobby}
+              handleHobbyClick={handleHobbyClick}
+            />
           ))}
         </div>
         <button className="submit-button" onClick={handleSubmit}>

diff --git a/src/pages/MainpageLogin.js b/src/pages/MainpageLogin.js
@@ -10,6 +10,7 @@ import { useNavigate } from "react-router-dom";
 import TotalUsersCounter from "../components/TotalUsersCounter";
 import BottomNavButton from "../components/BottomNavButton";
 import MyInfoButton from "../components/MyInfoButton";
+import ChargeButtonInfo from "../components/ChargeButtonInfo";
 
 function MainpageLogin() {
   const navigate = useNavigate(); // 페이지 이동을 위한 useNavigate 훅 사용
@@ -132,41 +133,11 @@ function MainpageLogin() {
         </div>
 
         {isClicked ? (
-          <div className="charge-request-clicked">
-            <div className="charge-request-clicked-top">
-              💁 부스에 충전 요청하기
-              <button
-                className="charge-request-clicked-img"
-                type="button"
-                //onClick={handleToggleClick}
-                onClick={handleNotService}
-              >
-                <img
-                  src={process.env.PUBLIC_URL + `assets/arrowup.svg`}
-                  alt="충전요청 닫기"
-                />
-              </button>
-            </div>
-            <li className="charge-request-clicked-text">
-              입금 후 포인트 충전을 원하거나
-            </li>
-            <li className="charge-request-clicked-text">
-              포인트를 PickMe로 바꾸고 싶을때 버튼을 눌러 주세요
-            </li>
-            <li className="charge-request-clicked-text">
-              요청 후에는 입금 화면과 아이디를 보여 주세요.
-            </li>
-            <li className="charge-request-clicked-text">
-              버튼 남용 시 이용이 제한될 수 있으니 유의 바랍니다.
-            </li>
-            <button
-              className="charge-request-clicked-button"
-              onClick={handleChargeRequest}
-              disabled={chargeclick.chargeclick}
-            >
-              충전 요청하기
-            </button>
-          </div>
+          <ChargeButtonInfo
+            handleNotService={handleNotService}
+            handleChargeRequest={handleChargeRequest}
+            chargeclick={chargeclick}
+          />
         ) : (
           <div className="charge-request-unclicked">
             💁 부스에 충전 요청하기

diff --git a/src/pages/MainpageUnLogin.js b/src/pages/MainpageUnLogin.js
@@ -79,7 +79,6 @@ function MainpageUnLogin() {
           코매칭에서 만나보세요!
         </div>
         <div className="bubble">⚡️10초만에 빠른 가입⚡️</div>
-        {/* <div className="bubble">26일 자정까지 조회하기만 가능합니다!</div> */}
         <button className="kakao-login" onClick={handleLogin}>
           <div className="kakao-login-element">
             <img