diff --git a/src/components/ChargeButtonInfo.js b/src/components/ChargeButtonInfo.js
new file mode 100644
index 0000000..2d99240
--- /dev/null
+++ 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
new file mode 100644
index 0000000..9248869
--- /dev/null
+++ 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
new file mode 100644
index 0000000..7baffbc
--- /dev/null
+++ 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
index ef0f3bd..e8bf33e 100644
--- 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
index 59d19ac..3427f00 100644
--- 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
index 8c18c64..e944635 100644
--- 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
diff --git a/src/pages/Match.js b/src/pages/Match.js
index ce9f023..cd5186b 100644
--- a/src/pages/Match.js
+++ b/src/pages/Match.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import axios from "axios";
 import Footer from "../components/Footer";
 import "../css/pages/Match.css";
@@ -10,6 +10,7 @@ import AgeButton from "../components/AgeButton";
 import hobbyIcons from "../data/hobbyIcons";
 import { matchValidation } from "../myfunction/matchValidation";
 import MatchHeader from "../components/MatchHeader";
+import MatchOptionButton from "../components/MatchOptionButton";
 
 function Match() {
   const navigate = useNavigate();
@@ -98,24 +99,9 @@ function Match() {
     }));
     console.log(updatedFormData);
     try {
-      const token = localStorage.getItem("token");
-      const response = await axios.post(
-        "https://catholic-mibal.site/comatching/match",
-        updatedFormData,
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
+      const response = await axios.post("/comatching/match", updatedFormData);
       console.log(response.data.data);
-      if (
-        response.data.code[0] === "SEC-001" ||
-        response.data.code[0] === "SEC-002"
-      ) {
-        localStorage.removeItem("token");
-        navigate("/");
-      } else if (response.data.status === 200) {
+      if (response.data.status === 200) {
         // 결과값 저장
         setMatchPageResult({
           major: response.data.data.major,
@@ -181,7 +167,6 @@ function Match() {
 
   return (
     <div>
-      {/* {formData.isLoggedIn ? ( */}
       <div className="container match-container">
         <MatchHeader
           MatchState={MatchState}
@@ -217,35 +202,12 @@ function Match() {
                 <div className="match-title-text">나이</div>
                 <div className="match-title-inst-txt">원하는 나이 선택</div>
               </div>
-              <div className="match-premium-option-right">
-                <div className="match-premium-option-cost">
-                  <img
-                    src={process.env.PUBLIC_URL + `assets/point.svg`}
-                    alt="cost"
-                  />
-                  100
-                </div>
-                {!MatchState.isUseOption[0] ? (
-                  <button
-                    type="button"
-                    className="match-premium-option-unclick-button"
-                    onClick={() => handleButtonClick(0, 100)}
-                  >
-                    +
-                  </button>
-                ) : (
-                  <button
-                    type="button"
-                    className="match-premium-option-click-button"
-                    onClick={() => handleButtonClick(0, -100)}
-                  >
-                    <img
-                      src={process.env.PUBLIC_URL + `assets/Backspace.svg`}
-                      alt="닫기"
-                    />
-                  </button>
-                )}
-              </div>
+              <MatchOptionButton
+                state={MatchState.isUseOption[0]}
+                num={0}
+                money={100}
+                handleButtonClick={handleButtonClick}
+              />
             </div>
           </div>
           <div className="match-select-button">
@@ -282,35 +244,12 @@ function Match() {
                   원하는 연락 빈도 선택
                 </div>
               </div>
-              <div className="match-premium-option-right">
-                <div className="match-premium-option-cost">
-                  <img
-                    src={process.env.PUBLIC_URL + `assets/point.svg`}
-                    alt="cost"
-                  />
-                  100
-                </div>
-                {!MatchState.isUseOption[1] ? (
-                  <button
-                    type="button"
-                    className="match-premium-option-unclick-button"
-                    onClick={() => handleButtonClick(1, 100)}
-                  >
-                    +
-                  </button>
-                ) : (
-                  <button
-                    type="button"
-                    className="match-premium-option-click-button"
-                    onClick={() => handleButtonClick(1, -100)}
-                  >
-                    <img
-                      src={process.env.PUBLIC_URL + `assets/Backspace.svg`}
-                      alt="닫기"
-                    />
-                  </button>
-                )}
-              </div>
+              <MatchOptionButton
+                state={MatchState.isUseOption[1]}
+                num={1}
+                money={100}
+                handleHobbyClick={handleHobbyClick}
+              />
             </div>
           </div>
           <div className="match-select-button">
@@ -352,35 +291,12 @@ function Match() {
                   함께하고 싶은 취향을 선택하세요.
                 </div>
               </div>
-              <div className="match-premium-option-right">
-                <div className="match-premium-option-cost">
-                  <img
-                    src={process.env.PUBLIC_URL + `assets/point.svg`}
-                    alt="cost"
-                  />
-                  100
-                </div>
-                {!MatchState.isUseOption[2] ? (
-                  <button
-                    type="button"
-                    className="match-premium-option-unclick-button"
-                    onClick={() => handleButtonClick(2, 100)}
-                  >
-                    +
-                  </button>
-                ) : (
-                  <button
-                    type="button"
-                    className="match-premium-option-click-button"
-                    onClick={() => handleButtonClick(2, -100)}
-                  >
-                    <img
-                      src={process.env.PUBLIC_URL + `assets/Backspace.svg`}
-                      alt="닫기"
-                    />
-                  </button>
-                )}
-              </div>
+              <MatchOptionButton
+                state={MatchState.isUseOption[2]}
+                num={2}
+                money={100}
+                handleButtonClick={handleButtonClick}
+              />
             </div>
           </div>
           <div className="match-hobby-grid">
@@ -418,35 +334,12 @@ function Match() {
                   과 CC를 피할 수 있어요
                 </div>
               </div>
-              <div className="match-premium-option-right">
-                <div className="match-premium-option-cost">
-                  <img
-                    src={process.env.PUBLIC_URL + `assets/point.svg`}
-                    alt="cost"
-                  />
-                  200
-                </div>
-                {!MatchState.isUseOption[3] ? (
-                  <button
-                    type="button"
-                    className="match-premium-option-unclick-button"
-                    onClick={() => handleButtonClick(3, 200)}
-                  >
-                    +
-                  </button>
-                ) : (
-                  <button
-                    type="button"
-                    className="match-premium-option-click-button"
-                    onClick={() => handleButtonClick(3, -200)}
-                  >
-                    <img
-                      src={process.env.PUBLIC_URL + `assets/Backspace.svg`}
-                      alt="닫기"
-                    />
-                  </button>
-                )}
-              </div>
+              <MatchOptionButton
+                state={MatchState.isUseOption[3]}
+                num={3}
+                money={200}
+                handleButtonClick={handleButtonClick}
+              />
             </div>
           </div>
         </div>
diff --git a/src/pages/Matchresult.js b/src/pages/Matchresult.js
index 857d2a5..fbc8a83 100644
--- a/src/pages/Matchresult.js
+++ b/src/pages/Matchresult.js
@@ -113,10 +113,6 @@ function Matchresult() {
                           hobby={hobby}
                           className="MatchResult-hobby-element"
                         />
-                        // <div key={index} className="MatchResult-hobby-element">
-                        //   <img src={process.env.PUBLIC_URL + `assets/${hobby.image}.svg`} alt={hobby.alt} />
-                        //   <div>{hobby.label}</div>
-                        // </div>
                       );
                     })}
                   </div>