구독 모달의 구조를 카테고리 중심에서 키워드 중심으로 변경

package.json

@@ -45,6 +45,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "prettier": "^3.2.5",
+    "sass": "^1.87.0",
     "typescript": "^5.2.2",
     "vite": "^5.0.8",
     "vite-plugin-radar": "^0.9.6",

src/App.tsx

@@ -2,8 +2,9 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 import { Routers } from "./routes";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import "./style/global.css";
 import { Modal } from "@/components/common/modal/Modal.tsx";
+import "./style/global.css";
+import "./style/variable.scss";
 
 const queryClient = new QueryClient();
 

src/api/index.ts

@@ -78,34 +78,38 @@ const onErrorResponse = (error: AxiosError | Error) => {
   if (axios.isAxiosError(error)) {
     const { message } = error;
     const { method, url } = error?.config as AxiosRequestConfig;
-    const { status, statusText } = error?.response as AxiosResponse;
+    const { status, statusText, data } = error?.response as AxiosResponse;
+    const description = data?.error?.message;
 
     logOnDev(
       `[API ERROR_RESPONSE ${status} | ${statusText} | ${message}] ${method?.toUpperCase()} ${url}`,
     );
 
     switch (status) {
       case 400:
-        onError(status, "잘못된 요청을 했어요");
+        onError(status, description ?? "잘못된 요청을 했어요");
         break;
       case 401: {
-        onError(status, "인증을 실패했어요");
+        onError(status, description ?? "인증을 실패했어요");
         break;
       }
       case 403: {
-        onError(status, "권한이 없는 상태로 접근했어요");
+        onError(status, description ?? "권한이 없는 상태로 접근했어요");
         break;
       }
       case 404: {
-        onError(status, "찾을 수 없는 페이지를 요청했어요");
+        onError(status, description ?? "찾을 수 없는 페이지를 요청했어요");
         break;
       }
       case 500: {
-        onError(status, "서버 오류가 발생했어요");
+        onError(status, description ?? "서버 오류가 발생했어요");
         break;
       }
       default: {
-        onError(status, `기타 에러가 발생했어요 : ${error?.message}`);
+        onError(
+          status,
+          description ?? `기타 에러가 발생했어요 : ${error?.message}`,
+        );
       }
     }
   } else if (error instanceof Error && error?.name === "TimoutError") {

src/app/home/index.tsx

@@ -195,7 +195,6 @@ export default function HomePage() {
    */
   const openSubscriptionModal = () => {
     open({
-      title: "구독 설정",
       content: <SubscriptionModalContent />,
       isVisibleBtn: false,
     });

src/app/signin/index.tsx

@@ -85,7 +85,7 @@ export default function SignIn() {
         css={css`
           margin-top: 5.6rem;
         `}
-        state={isValidEmail && password.length > 5}
+        disabled={!(isValidEmail && password.length > 5)}
         onClick={handleSignIn}
       >
         로그인

src/app/signup/consent/index.tsx

@@ -118,7 +118,7 @@ export default function Consent() {
           css={css`
             margin-top: 1.6rem;
           `}
-          state={privacy && useService}
+          disabled={!(privacy && useService)}
           onClick={() => handleNextClick()}
         >
           다음