Feat:페이지 접속 role추가 및 결제완료 후 새로고침

src/components/Gnb/ChargeModal.tsx

@@ -45,6 +45,7 @@ export default function ChargeModal({
     });
     if (paymentStatus.status === "PAID") {
       setIsChargeModalOpen(false);
+      window.location.reload();
     }
   };
   const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
@@ -116,7 +117,7 @@ export default function ChargeModal({
   };
 
   const isWaitingPayment = paymentStatus.status !== "IDLE";
-  console.log('상태메세지',paymentStatus);
+  console.log("상태메세지", paymentStatus);
   return (
     <>
       <ReceiveModalLayout label="코코넛 충전" closeModal={() => setIsChargeModalOpen(false)}>
@@ -125,7 +126,7 @@ export default function ChargeModal({
             <p className="semibold text-lg">현재 보유중인 코코넛</p>
             <div className="flex items-center gap-2">
               <Image src={coconut_icon} alt="코코넛" width={32} height={32} />
-              <p className="text-2xl bold">{coconut}개</p>
+              <p className="bold text-2xl">{coconut}개</p>
             </div>
           </div>
 
@@ -177,7 +178,7 @@ export default function ChargeModal({
             <p className="semibold text-lg">충전 갯수</p>
             <div className="flex items-center gap-2">
               <p className="semibold text-md">{amount ? amount.toLocaleString() : 0}개 /</p>
-              <p className="text-xl bold text-color-blue-300">
+              <p className="bold text-xl text-color-blue-300">
                 {amount ? (amount * 100).toLocaleString() : 0}원
               </p>
             </div>
@@ -195,7 +196,7 @@ export default function ChargeModal({
         {(paymentStatus.status === "FAILED" || paymentStatus.status === "PAID") && (
           <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
             <div className="w-80 rounded-lg bg-white p-6 shadow-lg">
-              <h2 className="mb-4 text-xl bold">
+              <h2 className="bold mb-4 text-xl">
                 {paymentStatus.status === "FAILED" ? "결제 실패" : "결제 성공"}
               </h2>
               <p className="mb-6 text-gray-600">

src/pages/all-receive-plan/index.tsx

@@ -196,4 +196,4 @@ export function AllReceivePlan() {
   );
 }
 
-export default withAuthAccess(AllReceivePlan);
+export default withAuthAccess(AllReceivePlan, "MAKER");

src/pages/managequo/index.tsx

@@ -67,4 +67,4 @@ export function ManageQuo() {
   );
 }
 
-export default withAuthAccess(ManageQuo);
+export default withAuthAccess(ManageQuo, "MAKER");

src/pages/profile/maker/edit/informEdit.tsx

@@ -5,4 +5,4 @@ export  function ProfileEditDreamerPage() {
   return <InformEditMaker />;
 }
 
-export default withAuthAccess(ProfileEditDreamerPage);
+export default withAuthAccess(ProfileEditDreamerPage, "MAKER");

src/pages/profile/maker/edit/profileEdit/[id].tsx

@@ -9,4 +9,4 @@ export function ProfileEditMakerPage() {
   return <ProfileEditMaker makerId={id as string} />;
 }
 
-export default withAuthAccess(ProfileEditMakerPage);
+export default withAuthAccess(ProfileEditMakerPage, "MAKER");

src/pages/profile/maker/mypage/[id].tsx

@@ -220,4 +220,4 @@ export function MyPage() {
   );
 }
 
-export default withAuthAccess(MyPage);
+export default withAuthAccess(MyPage, "MAKER");

src/pages/quotation-detail/[id].tsx

@@ -148,4 +148,4 @@ export function QuotationDetail() {
   );
 }
 
-export default withAuthAccess(QuotationDetail);
+export default withAuthAccess(QuotationDetail,"MAKER");

src/pages/receive/index.tsx

@@ -89,12 +89,12 @@ export function Receive() {
       <div className="mx-[auto] w-full mobile:mx-[auto] tablet:mx-[auto]">
         <div className="mb-8 flex items-center gap-8 border-b border-color-line-200">
           <Link href="/receive">
-            <p className="text-4 cursor-pointer border-b-[3px] border-black py-6 semibold">
+            <p className="text-4 semibold cursor-pointer border-b-[3px] border-black py-6">
               받은 견적 요청
             </p>
           </Link>
           <Link href="/all-receive-plan">
-            <p className="text-4 cursor-pointer semibold">전체 플랜</p>
+            <p className="text-4 semibold cursor-pointer">전체 플랜</p>
           </Link>
         </div>
       </div>
@@ -148,9 +148,7 @@ export function Receive() {
               ) : (
                 <div className="flex flex-col items-center justify-center">
                   <Image src={request_empty} alt="request_empty" width={300} height={300} />
-                  <p className="text-xl semibold text-color-gray-300">
-                    아직 받은 요청이 없어요!
-                  </p>
+                  <p className="semibold text-xl text-color-gray-300">아직 받은 요청이 없어요!</p>
                 </div>
               )}
 
@@ -194,4 +192,4 @@ export function Receive() {
   );
 }
 
-export default withAuthAccess(Receive);
+export default withAuthAccess(Receive, "MAKER");

src/pages/reject-list/index.tsx

@@ -67,4 +67,4 @@ export function RejectList() {
   );
 }
 
-export default withAuthAccess(RejectList);
+export default withAuthAccess(RejectList,"MAKER");

src/stores/withAuthAccess.tsx

@@ -3,12 +3,16 @@ import { useRouter } from "next/router";
 import { getAccessToken } from "@/utils/tokenUtils";
 import loading from "@public/assets/icon_loading.gif";
 import Image from "next/image";
+import useAuthStore from "./useAuthStore";
 
-const withAuthAccess = (WrappedComponent: React.ComponentType) => {
+type AllowedRoles = "DREAMER" | "MAKER" | ("DREAMER" | "MAKER")[] | undefined;
+
+const withAuthAccess = (WrappedComponent: React.ComponentType, allowedRoles?: AllowedRoles) => {
   const AuthComponent = (props: any) => {
     const router = useRouter();
     const [accessToken, setAccessToken] = useState<string | null>(null);
     const [isLoading, setIsLoading] = useState(true);
+    const { role } = useAuthStore();
 
     useEffect(() => {
       if (typeof window === "undefined") return;
@@ -19,14 +23,23 @@ const withAuthAccess = (WrappedComponent: React.ComponentType) => {
           router.push("/");
           return;
         }
+
+        if (allowedRoles) {
+          const roles = Array.isArray(allowedRoles) ? allowedRoles : [allowedRoles];
+          if (role !== "guest" && !roles.includes(role as "DREAMER" | "MAKER")) {
+            router.push("/");
+            return;
+          }
+        }
+
         setAccessToken(accessToken);
       } else {
         if (router.pathname !== "/login" && router.pathname !== "/signup") {
           router.push("/login");
         }
       }
       setIsLoading(false);
-    }, [router]);
+    }, [router, role, allowedRoles]);
 
     if (isLoading) {
       return (
@@ -44,4 +57,5 @@ const withAuthAccess = (WrappedComponent: React.ComponentType) => {
   };
   return AuthComponent;
 };
+
 export default withAuthAccess;