diff --git a/components/mentor/chat/chatListTopBar.jsx b/components/common/chat/chatListTopBar.jsx
similarity index 100%
rename from components/mentor/chat/chatListTopBar.jsx
rename to components/common/chat/chatListTopBar.jsx
diff --git a/components/mentor/chat/chatListTopBar.module.scss b/components/common/chat/chatListTopBar.module.scss
similarity index 100%
rename from components/mentor/chat/chatListTopBar.module.scss
rename to components/common/chat/chatListTopBar.module.scss
diff --git a/components/mentor/chat/chatPreview.jsx b/components/common/chat/chatPreview.jsx
similarity index 76%
rename from components/mentor/chat/chatPreview.jsx
rename to components/common/chat/chatPreview.jsx
index 69d1e9c..5b99534 100644
--- a/components/mentor/chat/chatPreview.jsx
+++ b/components/common/chat/chatPreview.jsx
@@ -2,9 +2,9 @@ import { useState, useEffect } from "react";
 import router from "next/router";
 import Image from "next/image";
 import styles from "./chatPreview.module.scss";
-import Role from "../../common/tag/role";
-import ConvertTime from "../../../utils/common/convertTime";
+import Role from "../tag/role";
 import { IC_PersonBlue } from "../../../icons";
+import ConvertTime from "/utils/common/convertTime";
 
 const ChatPreview = ({ chatData, othersRole }) => {
   const [converted, setConverted] = useState({
@@ -15,17 +15,13 @@ const ChatPreview = ({ chatData, othersRole }) => {
 
   useEffect(() => {
     const sentAt = chatData?.lastMessage?.createdAt;
-    if (sentAt != undefined) {
-      ConvertTime(sentAt, setConverted);
-    }
+    if (sentAt !== undefined) ConvertTime(sentAt, setConverted);
   }, [chatData.lastMessage]);
 
-  const nickname =
-    othersRole == "멘티" ? chatData.menteeNickname : chatData.mentorNickname;
-  const userId =
-    othersRole == "멘티" ? chatData.menteeUserId : chatData.mentorUserId;
-  const userImg =
-    othersRole == "멘티" ? chatData.menteeImage : chatData.mentorImage;
+  const isMentee = othersRole === "멘티";
+  const nickname = isMentee ? chatData.menteeNickname : chatData.mentorNickname;
+  const userId = isMentee ? chatData.menteeUserId : chatData.mentorUserId;
+  const userImg = isMentee ? chatData.menteeImage : chatData.mentorImage;
 
   return (
     <button
@@ -39,10 +35,10 @@ const ChatPreview = ({ chatData, othersRole }) => {
       }
     >
       <div className={styles.profileImg}>
-        {userImg == null ? (
-          <IC_PersonBlue width={56} height={56} className={styles.person} />
-        ) : (
+        {userImg ? (
           <Image src={userImg} width={56} height={56} />
+        ) : (
+          <IC_PersonBlue width={56} height={56} className={styles.person} />
         )}
       </div>
       <div className={styles.mentorChat}>
@@ -61,7 +57,7 @@ const ChatPreview = ({ chatData, othersRole }) => {
         <span className={styles.timeInfo}>
           {converted.sameDay ? converted.time : converted.date}
         </span>
-        {chatData.uncheckedMessageCount != 0 && (
+        {chatData.uncheckedMessageCount !== 0 && (
           <div className={styles.newChatCnt}>
             <span>{chatData.uncheckedMessageCount}</span>
           </div>
diff --git a/components/mentor/chat/chatPreview.module.scss b/components/common/chat/chatPreview.module.scss
similarity index 100%
rename from components/mentor/chat/chatPreview.module.scss
rename to components/common/chat/chatPreview.module.scss
diff --git a/components/mentor/chat/chatRoomContentBlock.jsx b/components/common/chat/chatRoomContentBlock.jsx
similarity index 93%
rename from components/mentor/chat/chatRoomContentBlock.jsx
rename to components/common/chat/chatRoomContentBlock.jsx
index 7b0bffa..71cb6cc 100644
--- a/components/mentor/chat/chatRoomContentBlock.jsx
+++ b/components/common/chat/chatRoomContentBlock.jsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import Image from "next/image";
-import ConvertTime from "../../../utils/common/convertTime";
 import styles from "./chatRoomContentBlock.module.scss";
 import { IC_PersonBlue } from "../../../icons";
+import ConvertTime from "/utils/common/convertTime";
 
 const MyChat = ({ text, sentAt, checked }) => {
   return (
@@ -22,10 +22,10 @@ const OtherChat = ({ image, name, text, sentAt }) => {
   return (
     <div className={styles.othersChat}>
       <div className={styles.profileImg}>
-        {image == null ? (
-          <IC_PersonBlue width={56} height={56} />
-        ) : (
+        {image ? (
           <Image src={image} width={44} height={44} />
+        ) : (
+          <IC_PersonBlue width={56} height={56} />
         )}
       </div>
       <div className={styles.menteeChat}>
@@ -45,11 +45,12 @@ const ChatRoomContentBlock = ({ my, other, sender, sentAt, msg, checked }) => {
     time: "",
     sameDay: false,
   });
+
   useEffect(() => {
     ConvertTime(sentAt, setConverted);
   }, []);
 
-  if (my.userId == sender) {
+  if (my.userId === sender) {
     return (
       <MyChat
         text={msg}
diff --git a/components/mentor/chat/chatRoomContentBlock.module.scss b/components/common/chat/chatRoomContentBlock.module.scss
similarity index 100%
rename from components/mentor/chat/chatRoomContentBlock.module.scss
rename to components/common/chat/chatRoomContentBlock.module.scss
diff --git a/components/mentor/chat/chatRoomTopBar.jsx b/components/common/chat/chatRoomTopBar.jsx
similarity index 87%
rename from components/mentor/chat/chatRoomTopBar.jsx
rename to components/common/chat/chatRoomTopBar.jsx
index 860c028..020dbb5 100644
--- a/components/mentor/chat/chatRoomTopBar.jsx
+++ b/components/common/chat/chatRoomTopBar.jsx
@@ -1,7 +1,8 @@
-import styles from "./chatRoomTopBar.module.scss";
-import { IC_ArrowLeft, IC_Menu, IC_Plus } from "../../../icons";
-import Role from "../../common/tag/role";
 import router from "next/router";
+import styles from "./chatRoomTopBar.module.scss";
+import { IC_ArrowLeft, IC_Menu } from "../../../icons";
+import Role from "../tag/role";
+
 const ChatRoomTopBar = ({ nickname, othersRole, getOut }) => {
   return (
     <div className={styles.chatRoomTopBar}>
diff --git a/components/mentor/chat/chatRoomTopBar.module.scss b/components/common/chat/chatRoomTopBar.module.scss
similarity index 100%
rename from components/mentor/chat/chatRoomTopBar.module.scss
rename to components/common/chat/chatRoomTopBar.module.scss
diff --git a/components/mentor/chat/chatRoomTyping.jsx b/components/common/chat/chatRoomTyping.jsx
similarity index 94%
rename from components/mentor/chat/chatRoomTyping.jsx
rename to components/common/chat/chatRoomTyping.jsx
index 83f8611..63aecdd 100644
--- a/components/mentor/chat/chatRoomTyping.jsx
+++ b/components/common/chat/chatRoomTyping.jsx
@@ -1,6 +1,5 @@
 import { useState } from "react";
 import styles from "./chatRoomTyping.module.scss";
-import { IC_Plus } from "../../../icons";
 
 const ChatRoomTyping = ({ sendMsg }) => {
   const [msg, setMsg] = useState("");
diff --git a/components/mentor/chat/chatRoomTyping.module.scss b/components/common/chat/chatRoomTyping.module.scss
similarity index 100%
rename from components/mentor/chat/chatRoomTyping.module.scss
rename to components/common/chat/chatRoomTyping.module.scss
diff --git a/components/common/chat/index.jsx b/components/common/chat/index.jsx
new file mode 100644
index 0000000..7a389a4
--- /dev/null
+++ b/components/common/chat/index.jsx
@@ -0,0 +1,13 @@
+import ChatListTopBar from "./chatListTopBar";
+import ChatPreview from "./chatPreview";
+import ChatRoomContentBlock from "./chatRoomContentBlock";
+import ChatRoomTopBar from "./chatRoomTopBar";
+import ChatRoomTyping from "./chatRoomTyping";
+
+export {
+  ChatListTopBar,
+  ChatPreview,
+  ChatRoomContentBlock,
+  ChatRoomTopBar,
+  ChatRoomTyping,
+};
diff --git a/components/common/icons/index.jsx b/components/common/icons/index.jsx
deleted file mode 100644
index e69de29..0000000
diff --git a/components/common/index.jsx b/components/common/index.jsx
index 11d87ca..657d766 100644
--- a/components/common/index.jsx
+++ b/components/common/index.jsx
@@ -17,6 +17,7 @@ import {
 import { BasicModal, ModalWithBackground } from "./modal";
 import { BottomTab, BottomTabElem, TopBar } from "./tab";
 import { canvasPreview, useDebounceEffect } from "./imgCrop";
+import { NameLogo } from "./icons/nameLogo";
 
 export {
   //============ button
@@ -46,4 +47,6 @@ export {
   useDebounceEffect,
   //============ style
   basicBtnStyle,
+  //============ icons
+  NameLogo,
 };
diff --git a/components/common/inputBox/basicSelectBox.jsx b/components/common/inputBox/basicSelectBox.jsx
index f6e7a9d..04e0420 100644
--- a/components/common/inputBox/basicSelectBox.jsx
+++ b/components/common/inputBox/basicSelectBox.jsx
@@ -18,11 +18,7 @@ const BasicSelectBox = ({
         className={selectStyles}
       >
         {arr?.map((data, i) => (
-          <option
-            value={data}
-            key={i}
-            selected={value === data ? "selected" : ""}
-          >
+          <option value={data} key={i} defaultValue={data}>
             {data}
           </option>
         ))}
diff --git a/components/mentor/notification/notificationBlock.jsx b/components/common/notification/notificationBlock.jsx
similarity index 88%
rename from components/mentor/notification/notificationBlock.jsx
rename to components/common/notification/notificationBlock.jsx
index d1a71b9..a756da8 100644
--- a/components/mentor/notification/notificationBlock.jsx
+++ b/components/common/notification/notificationBlock.jsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
-import ConvertTime from "../../../utils/common/convertTime";
 import styles from "./notificationBlock.module.scss";
+import ConvertTime from "/utils/common/convertTime";
+
 const NotificationBlock = ({ title, date, content, deleteAlarm }) => {
   const [converted, setConverted] = useState({
     date: "",
@@ -28,4 +29,4 @@ const NotificationBlock = ({ title, date, content, deleteAlarm }) => {
   );
 };
 
-export default NotificationBlock;
+export { NotificationBlock };
diff --git a/components/mentor/notification/notificationBlock.module.scss b/components/common/notification/notificationBlock.module.scss
similarity index 100%
rename from components/mentor/notification/notificationBlock.module.scss
rename to components/common/notification/notificationBlock.module.scss
diff --git a/components/mentor/signup/addrBlock.jsx b/components/mentor/signup/addrBlock.jsx
index 0cf76e6..fe97b3e 100644
--- a/components/mentor/signup/addrBlock.jsx
+++ b/components/mentor/signup/addrBlock.jsx
@@ -10,7 +10,7 @@ const AddrBlock = ({ datas }) => {
   }, [addr.statePick]);
 
   useEffect(() => {
-    if (addr.sigunguPick != "") {
+    if (addr.sigunguPick !== "") {
       GetDong(addr.statePick, addr.sigunguPick);
     }
   }, [addr.sigunguPick]);
@@ -29,7 +29,7 @@ const AddrBlock = ({ datas }) => {
   };
 
   const GetAddr = async () => {
-    if (Array.isArray(addr.state) && addr.state.length == 0) {
+    if (Array.isArray(addr.state) && addr.state.length === 0) {
       const res = await getStates();
       InitAddress("state", "statePick", res);
     }
diff --git a/components/mentor/signup/addrBlockEdit.jsx b/components/mentor/signup/addrBlockEdit.jsx
index 92f467a..1997467 100644
--- a/components/mentor/signup/addrBlockEdit.jsx
+++ b/components/mentor/signup/addrBlockEdit.jsx
@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import styles from "./addrBlock.module.scss";
 import { BasicSelectBox } from "../../common";
-import { getSiGunGus, getStates, getDongs } from "../../../core/api/Address";
+import { getSiGunGus, getStates, getDongs } from "/core/api/Address";
 
 const AddrBlockEdit = ({ addr, newAddr, setNewAddr }) => {
   useEffect(() => {
@@ -9,7 +9,7 @@ const AddrBlockEdit = ({ addr, newAddr, setNewAddr }) => {
   }, [newAddr.statePick]);
 
   useEffect(() => {
-    if (newAddr.sigunguPick != "")
+    if (newAddr.sigunguPick !== "")
       GetDong(newAddr.statePick, newAddr.sigunguPick);
   }, [newAddr.sigunguPick]);
 
diff --git a/components/mentor/signup/agreeBlock.jsx b/components/mentor/signup/agreeBlock.jsx
index c359285..331c69d 100644
--- a/components/mentor/signup/agreeBlock.jsx
+++ b/components/mentor/signup/agreeBlock.jsx
@@ -6,11 +6,9 @@ import router from "next/router";
 const AgreeBlock = ({ datas }) => {
   const { agree, setAgree } = datas;
   useEffect(() => {
-    if (agree.one && agree.two && agree.three) {
+    if (agree.one && agree.two && agree.three)
       setAgree({ ...agree, all: true });
-    } else {
-      setAgree({ ...agree, all: false });
-    }
+    else setAgree({ ...agree, all: false });
   }, [agree.one, agree.two, agree.three]);
 
   return (
@@ -37,9 +35,7 @@ const AgreeBlock = ({ datas }) => {
           checkBoxStyle={styles.agreeCheck}
           textStyle={styles.agreeText}
           value={agree.one}
-          onChange={() => {
-            setAgree({ ...agree, one: !agree.one });
-          }}
+          onChange={() => setAgree({ ...agree, one: !agree.one })}
         />
         <p
           className={styles.serviceText}
@@ -56,9 +52,7 @@ const AgreeBlock = ({ datas }) => {
         checkBoxStyle={styles.agreeCheck}
         textStyle={styles.agreeText}
         value={agree.two}
-        onChange={() => {
-          setAgree({ ...agree, two: !agree.two });
-        }}
+        onChange={() => setAgree({ ...agree, two: !agree.two })}
       />
       <BasicCheckBox
         id={"agree3"}
@@ -66,9 +60,7 @@ const AgreeBlock = ({ datas }) => {
         checkBoxStyle={styles.agreeCheck}
         textStyle={styles.agreeText}
         value={agree.three}
-        onChange={() => {
-          setAgree({ ...agree, three: !agree.three });
-        }}
+        onChange={() => setAgree({ ...agree, three: !agree.three })}
       />
     </section>
   );
diff --git a/components/mentor/signup/index.jsx b/components/mentor/signup/index.jsx
new file mode 100644
index 0000000..8bba99e
--- /dev/null
+++ b/components/mentor/signup/index.jsx
@@ -0,0 +1,6 @@
+import AddrBlock from "./addrBlock";
+import AddrBlockEdit from "./addrBlockEdit";
+import AgreeBlock from "./agreeBlock";
+import BasicDataBlock from "./basicDataBlock";
+import UserBlock from "./userBlock";
+export { AddrBlock, AddrBlockEdit, AgreeBlock, BasicDataBlock, UserBlock };
diff --git a/core/provider.jsx b/core/provider.jsx
index 9e7d90a..5db3427 100644
--- a/core/provider.jsx
+++ b/core/provider.jsx
@@ -1,24 +1,12 @@
-import React, {
-  createContext,
-  useEffect,
-  useState,
-  useCallback,
-  useMemo,
-} from "react";
+import React, { createContext, useEffect, useState, useCallback } from "react";
 import SockJS from "sockjs-client";
 import Stomp from "stompjs";
 
 export const sockContext = createContext();
-const SocketProvider = ({
-  children,
-  my,
-  uncheckedCnt,
-  myChatRooms,
-  access,
-}) => {
-  const Sock = new SockJS("https://www.mentoridge.co.kr/ws");
-  // const Sock = new SockJS(process.env.NEXT_PUBLIC_CHAT_URL);
+const SocketProvider = ({ children, my, uncheckedCnt, myChatRooms }) => {
+  const Sock = new SockJS(process.env.NEXT_PUBLIC_CHAT_URL);
   const ws = Stomp.over(Sock);
+  ws.debug = null;
 
   const [alarmContents, setAlarmContents] = useState(undefined);
   const [alarmCnt, setAlarmCnt] = useState(uncheckedCnt);
@@ -38,7 +26,7 @@ const SocketProvider = ({
         });
 
       myChatRooms !== undefined &&
-        myChatRooms?.length != 0 &&
+        myChatRooms?.length !== 0 &&
         Array.isArray(myChatRooms) &&
         myChatRooms?.forEach((data) => {
           ws?.subscribe(`/sub/chat/room/${data?.chatroomId}`, (data2) => {
diff --git a/jsconfig.json b/jsconfig.json
index 986627d..f1ce238 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
-    "jsx": "react"
+    "jsx": "react",
+    "baseUrl": "./src/"
   }
 }
diff --git a/pages/common/auth/changePW.jsx b/pages/common/auth/changePW.jsx
index 0a469b5..8af0cb5 100644
--- a/pages/common/auth/changePW.jsx
+++ b/pages/common/auth/changePW.jsx
@@ -1,28 +1,27 @@
 import { useEffect, useState } from "react";
+import router from "next/router";
+import * as cookie from "cookie";
 import styles from "./changePW.module.scss";
 import {
   BottomBlueBtn,
   TopBar,
   BasicInputBox,
-} from "../../../components/common";
-import * as cookie from "cookie";
-import { changePassword } from "../../../core/api/User";
-import router from "next/router";
-import { ModalWithBackground, BasicModal } from "../../../components/common";
+  ModalWithBackground,
+  BasicModal,
+} from "/components/common";
+import { changePassword } from "/core/api/User";
 
 export const getServerSideProps = async (context) => {
   const token = cookie.parse(context.req.headers.cookie).accessToken;
-  const role = cookie.parse(context.req.headers.cookie).role;
 
   return {
     props: {
       token,
-      role,
     },
   };
 };
 
-const ChangePW = ({ token, role }) => {
+const ChangePW = ({ token }) => {
   const [pw, setPW] = useState({
     newPassword: "",
     newPasswordConfirm: "",
@@ -40,29 +39,43 @@ const ChangePW = ({ token, role }) => {
 
   useEffect(() => {
     if (
-      pw.newPassword == "" ||
-      pw.newPasswordConfirm == "" ||
-      pw.password == ""
+      pw.newPassword === "" ||
+      pw.newPasswordConfirm === "" ||
+      pw.password === ""
     ) {
       setErrMsg("빈칸을 모두 채워주세요.");
     } else if (pw.newPassword.length < 6 || pw.newPassword.length > 14) {
       setErrMsg("비밀번호는 6-14자로 입력해주세요.");
-    } else if (pw.newPassword != pw.newPasswordConfirm) {
+    } else if (pw.newPassword !== pw.newPasswordConfirm) {
       setErrMsg("비밀번호와 비밀번호 확인이 일치하지 않습니다.");
-    } else if (pw.newPassword == pw.password) {
+    } else if (pw.newPassword === pw.password) {
       setErrMsg("비밀번호와 새로운 비밀번호는 서로 다르게 설정해주세요.");
     } else {
       setErrMsg("");
     }
   }, [pw]);
 
+  const changePwHandler = async () => {
+    if (errMsg !== "") {
+      setResult({ success: false, error: true, errorMsg: errMsg });
+    } else {
+      const res = await changePassword(token, pw);
+      if (res.status === 200)
+        setResult({ success: true, error: false, errorMsg: "" });
+      else
+        setResult({
+          success: false,
+          error: true,
+          errorMsg: res.data.errorDetails[0],
+        });
+    }
+    setModal(true);
+  };
+
   return (
     <section className={styles.changePW}>
       {modal && (
-        <ModalWithBackground
-          setModal={setModal}
-          prevent={result.success ? true : false}
-        >
+        <ModalWithBackground setModal={setModal} prevent={result.success}>
           <BasicModal
             notice={
               result.success
@@ -105,25 +118,7 @@ const ChangePW = ({ token, role }) => {
           style={styles.pwInputBox}
         />
       </section>
-      <BottomBlueBtn
-        text={"저장"}
-        onClick={async () => {
-          if (errMsg !== "") {
-            setResult({ success: false, error: true, errorMsg: errMsg });
-          } else {
-            const res = await changePassword(token, pw);
-            if (res.status == 200)
-              setResult({ success: true, error: false, errorMsg: "" });
-            else
-              setResult({
-                success: false,
-                error: true,
-                errorMsg: res.data.errorDetails[0],
-              });
-          }
-          setModal(true);
-        }}
-      />
+      <BottomBlueBtn text={"저장"} onClick={changePwHandler} />
     </section>
   );
 };
diff --git a/pages/common/auth/findPW.jsx b/pages/common/auth/findPW.jsx
index f7c1fe5..63cd276 100644
--- a/pages/common/auth/findPW.jsx
+++ b/pages/common/auth/findPW.jsx
@@ -2,16 +2,16 @@ import { useState } from "react";
 import router from "next/router";
 import classNames from "classnames";
 import styles from "./findPW.module.scss";
-import { findPassword } from "../../../core/api/Login";
-import { EmailValidation } from "../../../utils/validation";
+import { findPassword } from "/core/api/Login";
+import { EmailValidation } from "/utils/validation";
 import {
   BasicInputBox,
   BasicBtn,
   basicBtnStyle,
   ModalWithBackground,
   BasicModal,
-} from "../../../components/common";
-import { NameLogo } from "../../../components/common/icons/nameLogo";
+  NameLogo,
+} from "/components/common";
 
 const MentorFindPW = () => {
   const [email, setEmail] = useState("");
@@ -21,19 +21,42 @@ const MentorFindPW = () => {
     noticeMsg: "",
   });
 
+  const sendEmailHandler = async () => {
+    setModal(true);
+    setMsg({
+      errMsg: "",
+      noticeMsg: "메일 보내는 중...",
+    });
+    await findPassword(email)
+      .then((res) => {
+        if (res.status === 200) {
+          setMsg({
+            errMsg: "",
+            noticeMsg: "이메일을 발송했습니다.\n메일함을 확인해주세요.",
+          });
+        } else {
+          setMsg({
+            errMsg: res.data.errorDetails[0],
+            noticeMsg: "",
+          });
+        }
+      })
+      .catch((err) => alert("메일 발송 중 에러가 발생했습니다"));
+  };
+
   return (
     <section className={styles.findPWSection}>
       {modal && (
         <ModalWithBackground setModal={setModal}>
           <BasicModal
             modalStyle="round"
-            notice={msg.noticeMsg == "" ? msg.errMsg : msg.noticeMsg}
+            notice={msg.noticeMsg === "" ? msg.errMsg : msg.noticeMsg}
             btnText={"확인"}
             btnClick={() => {
-              if (msg.errMsg == "") router.push("/common/auth/login");
+              if (msg.errMsg === "") router.push("/common/auth/login");
             }}
-            err={msg.errMsg != ""}
-            ing={msg.noticeMsg == "메일 보내는 중..."}
+            err={msg.errMsg !== ""}
+            ing={msg.noticeMsg === "메일 보내는 중..."}
           />
         </ModalWithBackground>
       )}
@@ -56,25 +79,7 @@ const MentorFindPW = () => {
               : classNames(styles.okBtn, basicBtnStyle.btn_blue)
           }
           textStyle={styles.okBtnText}
-          onClick={async () => {
-            setModal(true);
-            setMsg({
-              errMsg: "",
-              noticeMsg: "메일 보내는 중...",
-            });
-            const res = await findPassword(email);
-            if (res.status == 200) {
-              setMsg({
-                errMsg: "",
-                noticeMsg: "이메일을 발송했습니다.\n메일함을 확인해주세요.",
-              });
-            } else {
-              setMsg({
-                errMsg: res.data.errorDetails[0],
-                noticeMsg: "",
-              });
-            }
-          }}
+          onClick={sendEmailHandler}
           disabled={!EmailValidation(email)}
         />
       </div>
diff --git a/pages/common/auth/login.jsx b/pages/common/auth/login.jsx
index 138335d..15f980c 100644
--- a/pages/common/auth/login.jsx
+++ b/pages/common/auth/login.jsx
@@ -6,25 +6,30 @@ import {
   BasicInputBox,
   BasicBtn,
   basicBtnStyle,
-} from "../../../components/common";
-import { login, getUserRoleType } from "../../../core/api/Login";
-import { cookieForAuth, removeInfo } from "../../../utils/cookie";
-import { IC_Google, IC_Kakao, IC_Logo, IC_Naver } from "../../../icons";
-import { NameLogo } from "../../../components/common/icons/nameLogo";
+  NameLogo,
+} from "/components/common";
+import { login, getUserRoleType } from "/core/api/Login";
+import { IC_Google, IC_Kakao, IC_Logo, IC_Naver } from "/icons";
+import { cookieForAuth, removeInfo } from "/utils/cookie";
 
 const Login = () => {
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
+  const [user, setUser] = useState({
+    userName: "",
+    password: "",
+  });
   const [error, setError] = useState("");
 
-  useEffect(() => {
-    removeInfo();
-  }, []);
-
   const checkAccount = async () => {
-    const res = await login(username, password);
-    if (res.status == 200) {
-      const role = await getUserRoleType(res.headers["x-access-token"]);
+    if (!user.userName || !user.password) {
+      setError("아이디와 비밀번호를 모두 입력해주세요");
+      return;
+    }
+
+    const res = await login(user.userName, user.password);
+    const { status, headers, data } = res;
+
+    if (status === 200) {
+      const role = await getUserRoleType(headers["x-access-token"]);
       cookieForAuth(res, role);
       if (role.loginType === "ROLE_MENTOR") {
         router.push("/mentor/myclass/myClassList");
@@ -33,19 +38,20 @@ const Login = () => {
         router.push("/mentee");
       }
     } else {
-      if (res.data.errorDetails[0] === "DisabledException")
+      if (data.errorDetails[0] === "DisabledException")
         setError("이메일 인증이 완료되지 않았습니다.");
       else setError("아이디 또는 비밀번호가 일치하지 않습니다.");
     }
   };
 
-  const onChangeUsername = (e) => {
-    setUsername(e.target.value);
-  };
-  const onChangePassword = (e) => {
-    setPassword(e.target.value);
+  const onChange = (e, key) => {
+    setUser({ ...user, [key]: e.target.value });
   };
 
+  useEffect(() => {
+    removeInfo();
+  }, []);
+
   return (
     <section className={styles.loginSection}>
       <h1 className={styles.title}>{"로그인"}</h1>
@@ -56,15 +62,15 @@ const Login = () => {
         <BasicInputBox
           type={"email"}
           placeholder={"ID(Email)"}
-          onChange={onChangeUsername}
-          value={username}
+          onChange={(e) => onChange(e, "userName")}
+          value={user.userName}
           style={styles.loginInputBox}
         />
         <BasicInputBox
           type={"password"}
           placeholder={"Password"}
-          onChange={onChangePassword}
-          value={password}
+          onChange={(e) => onChange(e, "password")}
+          value={user.password}
           style={styles.loginInputBox}
         />
         {error && <span className={styles.failed}>{error}</span>}
diff --git a/pages/common/auth/serviceContents.jsx b/pages/common/auth/serviceContents.jsx
index 421761c..bbecb2d 100644
--- a/pages/common/auth/serviceContents.jsx
+++ b/pages/common/auth/serviceContents.jsx
@@ -1,7 +1,7 @@
-import router from "next/router";
 import React from "react";
-import { TopBar } from "../../../components/common";
+import router from "next/router";
 import styles from "./serviceContents.module.scss";
+import { TopBar } from "/components/common";
 
 const ServiceContents = () => {
   return (
@@ -18,14 +18,14 @@ const ServiceContents = () => {
         <p>제1장 총칙</p>
         <p>제1조 (목적)</p>
         <p>
-          이 약관은 튜터랩(이하 당사)이 제공하는 수업 연결 서비스를 이용함에
+          이 약관은 멘토릿지(이하 당사)이 제공하는 수업 연결 서비스를 이용함에
           있어 당사와 이용자의 권리, 의무 및 책임사항을 규정합니다. 이를 통하여
           당사와 이용자는 알아야 할 사항을 숙지, 상호 신뢰의 증진을 목적으로
           합니다.
         </p>
         <p>제2조 (약관의 효력 및 변경)</p>
         <p>
-          가. 이 약관은 튜터랩 사이트에 회원으로 등록, 조회 등 서비스 이용
+          가. 이 약관은 멘토릿지 사이트에 회원으로 등록, 조회 등 서비스 이용
           순간부터 효력이 발생됩니다.
         </p>
         <p>
@@ -61,8 +61,8 @@ const ServiceContents = () => {
           따라 등록한 자.
         </p>
         <p>
-          다. 서비스 : 튜터랩 사이트와 모바일 튜터랩에서 판매 가능한 상품으로
-          유형의 제품 혹은 무형의 서비스를 말합니다.
+          다. 서비스 : 멘토릿지 사이트와 모바일 멘토릿지에서 판매 가능한
+          상품으로 유형의 제품 혹은 무형의 서비스를 말합니다.
         </p>
         <p>
           라. 회원 : 이 약관을 승인하고 회사와 서비스 이용계약을 체결한 자를
@@ -82,7 +82,7 @@ const ServiceContents = () => {
         <p>
           중개서비스는 회사가 회원 각자의 자기결정에 의하여 회원 상호간에 수업의
           거래가 이루어질 수 있도록 사이버 거래장소(marketplace)를 온라인으로
-          제공하는 것이며, 튜터랩 안전결제서비스는 회원 상호간에 수업의 매매에
+          제공하는 것이며, 멘토릿지 안전결제서비스는 회원 상호간에 수업의 매매에
           있어서 안전하고 편리하게 결제가 이루어질 수 있는 수단을 제공하는
           것입니다. 회사는 단지 회원간 거래의 안전성 및 신뢰성을 증진시키는
           도구만을 제공합니다. 회원간에 성립된 거래와 관련된 책임은 거래당사자인
@@ -120,7 +120,7 @@ const ServiceContents = () => {
           받습니다, 다만, 관련 법령에 달리 정함이 있는 경우에는 예외로 합니다.
         </p>
         <p>
-          마. 회사의 개인정보 관리책임자 및 연락처는 튜터랩 사이트에서 별도로
+          마. 회사의 개인정보 관리책임자 및 연락처는 멘토릿지 사이트에서 별도로
           공개하는 개인정보취급방침에서 공지합니다.
         </p>
         <p>
@@ -174,7 +174,7 @@ const ServiceContents = () => {
           등을 명시하여 회원의 동의를 받고, 개인정보의 수집·취급·관리 등을
           위탁하는 경우에는 위탁 업무의 내용 및 수탁사의 명칭 등에 관한 사항을
           서면, 전자우편, 모사전송, 전화 또는 홈페이지를 통해 미리 회원에게
-          고지하여 동의를 받거나 개인정보취급방침에 포함하여 튜터랩 사이트(
+          고지하여 동의를 받거나 개인정보취급방침에 포함하여 멘토릿지 사이트(
           <a href="https://taling.me)%EC%97%90" rel="nofollow">
             https://taling.me)에
           </a>{" "}
@@ -182,7 +182,7 @@ const ServiceContents = () => {
         </p>
         <p>
           차. 회사는 회원정보의 보호와 관리에 관한 개인정보취급방침을 회원과
-          회사의 서비스를 이용하고자 하는 자가 알 수 있도록 튜터랩 사이트(
+          회사의 서비스를 이용하고자 하는 자가 알 수 있도록 멘토릿지 사이트(
           <a href="https://www.taling.me)%EC%97%90" rel="nofollow">
             https://www.taling.me)에
           </a>{" "}
@@ -210,10 +210,10 @@ const ServiceContents = () => {
         </p>
         <p>
           라. 회원이 중개서비스를 통하여 판매 또는 구매하는 경우, 반드시 회사가
-          마련한 튜터랩 안전결제서비스를 통하여 거래를 완료하여야 합니다. 회사는
-          회원 간의 직거래로 인하여 발생한 문제에 대하여 책임지지 않습니다. 또한
-          직거래 신고가 접수 될 경우 사이트 이용자는 서비스 이용에 제한을 받을
-          수 있습니다.
+          마련한 멘토릿지 안전결제서비스를 통하여 거래를 완료하여야 합니다.
+          회사는 회원 간의 직거래로 인하여 발생한 문제에 대하여 책임지지
+          않습니다. 또한 직거래 신고가 접수 될 경우 사이트 이용자는 서비스
+          이용에 제한을 받을 수 있습니다.
         </p>
         <p>제8조 (중개서비스의 활용 방식과 제한 정책)</p>
         <p>
@@ -234,7 +234,7 @@ const ServiceContents = () => {
           </li>
         </ol>
         <p>
-          회사는 타 사이트 등에서 튜터랩 서비스를 이용한 불법적 홍보행위, 회사
+          회사는 타 사이트 등에서 멘토릿지 서비스를 이용한 불법적 홍보행위, 회사
           서버에 무리를 주는 행위의 적발 시 이용 제한을 진행할 수 있습니다. 아래
           기준을 따르되, 위반 정도에 따라 회사는 기준보다 높은 제한을 할 수
           있습니다.
@@ -297,18 +297,18 @@ const ServiceContents = () => {
         </p>
         <p>(1) 부당 수업 거부</p>
         <p>
-          부당 수업 거부란 튜터가 튜터랩 약관이 정하는 운영정책 기준 상의 합당한
-          이유없이 특정 회원의 수업 신청을 일방적으로 거부하는 것을 뜻합니다.
-          단, 튜터의 거부 사유를 회사에게 통보하여 합리적 판단에 기하여 수업
-          서비스 제공을 거부할 필요가 있다고 양 측이 인정하는 경우는 예외로
-          합니다.
+          부당 수업 거부란 튜터가 멘토릿지 약관이 정하는 운영정책 기준 상의
+          합당한 이유없이 특정 회원의 수업 신청을 일방적으로 거부하는 것을
+          뜻합니다. 단, 튜터의 거부 사유를 회사에게 통보하여 합리적 판단에
+          기하여 수업 서비스 제공을 거부할 필요가 있다고 양 측이 인정하는 경우는
+          예외로 합니다.
         </p>
         <p>1차: 부당 수업 거부에 대한 경고 및 개선요청</p>
         <p>2차: 해당 수업 등록 중지</p>
         <p>3차: 전 수업 등록 중지 및 신규 수업 등록제한</p>
         <p>(2) 임의 취소/임의 환불</p>
         <p>
-          임의 취소/임의 환불은 튜터가 튜터랩 약관이 정하는 운영정책 기준 상의
+          임의 취소/임의 환불은 튜터가 멘토릿지 약관이 정하는 운영정책 기준 상의
           합당한 이유없이 특정 회원과의 수업 약속을 일방적으로 취소하고 환불
           시키는 것을 뜻합니다. 단, 수업의 취소 사유를 회사에게 통보하여 합리적
           판단에 의하여 수업 서비스 제공을 취소하고 환불 할 필요가 있다고 양
@@ -387,9 +387,9 @@ const ServiceContents = () => {
           있습니다.
         </p>
         <p>
-          ① 회사의 튜터랩 사이트, 모바일튜터랩, 시스템, 서비스를 스팸정보 전송
-          또는 악성코드 프로그램 유포, 타인계정 도용 등 범죄 또는 불법행위에
-          이용한 경우
+          ① 회사의 멘토릿지 사이트, 모바일 멘토릿지, 시스템, 서비스를 스팸정보
+          전송 또는 악성코드 프로그램 유포, 타인계정 도용 등 범죄 또는
+          불법행위에 이용한 경우
         </p>
         <p>
           ② 수업 이행 또는 수업료를 송금해야 하는 경우에 무단으로 잠적/ 회피
@@ -404,19 +404,19 @@ const ServiceContents = () => {
           경우
         </p>
         <p>
-          ⑤ 튜터랩 사이트, 모바일 튜터랩 정보, 데이터를 정당한 권한 없이 스스로
-          또는 제3자를 통하여 복사, 퍼가기, 스크래핑 하거나 기타의 방법으로
-          상업적으로 이용한 경우
+          ⑤ 멘토릿지 사이트, 모바일 멘토릿지 정보, 데이터를 정당한 권한 없이
+          스스로 또는 제3자를 통하여 복사, 퍼가기, 스크래핑 하거나 기타의
+          방법으로 상업적으로 이용한 경우
         </p>
         <p>
           ⑥ 회원이 제공한 정보 또는 그에 관한 증빙자료가 허위이거나 회사가
           요청하는 증빙자료를 제공하지 않는 경우
         </p>
         <p>
-          ⑦ 수출 관리 법령과 게시된 규칙, 제한을 위반하여 튜터랩의 웹/앱 서비스
-          및 관련 툴을 수출 또는 재수출하는 경우
+          ⑦ 수출 관리 법령과 게시된 규칙, 제한을 위반하여 멘토릿지의 웹/앱
+          서비스 및 관련 툴을 수출 또는 재수출하는 경우
         </p>
-        <p>⑧ 튜터랩 서비스에 관련된 정보나 소프트웨어를 상업화하는 경우</p>
+        <p>⑧ 멘토릿지 서비스에 관련된 정보나 소프트웨어를 상업화하는 경우</p>
         <p>
           ⑨ 회원이 다른 회원의 개인정보를 무단수집 하거나 마케팅 등 수집 목적
           외로 이용하는 경우
@@ -427,8 +427,8 @@ const ServiceContents = () => {
           위배하여 다른 회원의 개인정보가 침해된 경우
         </p>
         <p>
-          ⑪ 튜터랩메세지 또는 거래메세지를 이용한 대화, 구매평가의 내용 중 욕설,
-          비방 혹은 명예를 훼손하는 내용을 작성하는 경우
+          ⑪ 멘토릿지메세지 또는 거래메세지를 이용한 대화, 구매평가의 내용 중
+          욕설, 비방 혹은 명예를 훼손하는 내용을 작성하는 경우
         </p>
         <p>
           ⑫ 그 외 약관 또는 법령에 위반되거나 타인의 권리를 침해하는 행위가
@@ -479,7 +479,7 @@ const ServiceContents = () => {
           이후에는 수정할 수 없습니다
         </p>
         <ol start="9">
-          <li>튜터랩 내 제공하는 1:1대화 기능을 악용하는 행위</li>
+          <li>멘토릿지 내 제공하는 1:1대화 기능을 악용하는 행위</li>
         </ol>
         <p>
           회원은 튜터와 직접적으로 1:1대화를 시도할 수 있습니다. 회원이 작성한
@@ -489,9 +489,9 @@ const ServiceContents = () => {
           조치를 취할 수 있습니다.
         </p>
         <p>
-          ① 회원은 튜터랩 내 제공하는 문의 기능을 활용하여 특정 서비스 및 상품의
-          홍보 행위를 할 수 없으며, 구인, 구직, 섭외, 영업 등의 제안 행위를
-          진행할 수 없습니다.
+          ① 회원은 멘토릿지 내 제공하는 문의 기능을 활용하여 특정 서비스 및
+          상품의 홍보 행위를 할 수 없으며, 구인, 구직, 섭외, 영업 등의 제안
+          행위를 진행할 수 없습니다.
         </p>
         <p>
           ② 회원은 공공질서 및 미풍양속에 위반 되는 내용과 첨부파일을 전달해서는
@@ -502,17 +502,17 @@ const ServiceContents = () => {
           안됩니다.
         </p>
         <p>
-          ④ 회원 간 튜터랩 서비스를 활용한 특정 상품 추천, 서비스 추천 및 매매
+          ④ 회원 간 멘토릿지 서비스를 활용한 특정 상품 추천, 서비스 추천 및 매매
           유도, 강매 등 일체 행위를 금합니다. (보험 상품, 주식 종목 추천, 부동산
           매매, 화장품, 건강보조제, 정수기, 서적, 각종 회원권 및 이용권, 타
           서비스의 회원 가입 유도, 부업 유도, 자격증, 수수료 발급 등의 일체
           행위)
         </p>
         <ol start="10">
-          <li>튜터랩 서비스 상담 시 문제 행위</li>
+          <li>멘토릿지 서비스 상담 시 문제 행위</li>
         </ol>
         <p>
-          회원은 튜터랩의 임직원, 상담원, 피용자, 업무수탁자와 서비스에 관해
+          회원은 멘토릿지의 임직원, 상담원, 피용자, 업무수탁자와 서비스에 관해
           문의할 시 모욕감을 줄 수 있는 행위를 금합니다. 외설, 폭력적인 메시지,
           기타 공공질서 및 미풍양속에 반하는 표현 모두를 금하며 이를 어길 시
           영업방해에 의한 민사, 형사적 법적 절차를 진행할 수 있습니다.
@@ -539,43 +539,43 @@ const ServiceContents = () => {
           삭제할 수 있고, 수업취소, 수업중지, 기타 필요한 조치를 취할 수
           있습니다.
         </p>
-        <p>제10조 (튜터랩 안전결제서비스)</p>
+        <p>제10조 (멘토릿지 안전결제서비스)</p>
         <p>
           가. 회사는 중개서비스를 제공하는 과정에서 첫 회 1시간 분의 시범 강의비
           또는 전체금액 결제에 대한 대금 수취, 보관 및 환불로 이루어지는
-          에스크로 방식의 튜터랩 안전결제서비스를 제공합니다. 이러한 튜터랩
+          에스크로 방식의 멘토릿지 안전결제서비스를 제공합니다. 이러한 멘토릿지
           안전결제서비스는 중개서비스를 통하여 이루어지는 회원 상호간의 거래의
           안전성과 신뢰성을 도모하고 수강생을 보호하기 위한 목적에서 제공하는
-          장치이므로 회사가 튜터랩 안전결제서비스를 통하여 튜터 또는 수강생을
+          장치이므로 회사가 멘토릿지 안전결제서비스를 통하여 튜터 또는 수강생을
           대리, 대행하거나 그 이행을 보조하는 것은 아닙니다.
         </p>
         <p>
-          나. 회사가 제공하는 튜터랩 안전결제서비스는 기본적인 중개서비스에
-          포함됩니다. 회원이 첫1시간 수업료 거래 또는 전체금액 결제에서 튜터랩
+          나. 회사가 제공하는 멘토릿지 안전결제서비스는 기본적인 중개서비스에
+          포함됩니다. 회원이 첫1시간 수업료 거래 또는 전체금액 결제에서 멘토릿지
           안전결제서비스를 통하지 않는 직거래를 유도하는 경우, 회사는 주문취소,
           판매중지 등 기타 필요한 조치를 취할 수 있습니다.
         </p>
         <p>
-          다. 튜터랩 안전결제서비스의 일환으로 이루어지는 대금보관으로 인하여
+          다. 멘토릿지 안전결제서비스의 일환으로 이루어지는 대금보관으로 인하여
           회사가 취득하는 이자 등은 서비스 제공의 대가이므로 회원은 회사에
           대하여 이자 등의 반환을 청구할 수 없고, 대금 송금(실시간계좌이체,
           가상계좌 등)으로 인하여 발생하는 수수료는 대금을 송금하는 회원이
           부담하여야 합니다.
         </p>
         <p>
-          라. 회사가 제공하는 튜터랩 안전결제서비스를 이용하지 않은 거래 또는
-          튜터랩 안전결제서비스가 포괄하는 수업의 내용들이 종결된 거래의 경우
+          라. 회사가 제공하는 멘토릿지 안전결제서비스를 이용하지 않은 거래 또는
+          멘토릿지 안전결제서비스가 포괄하는 수업의 내용들이 종결된 거래의 경우
           해당 거래와 관련하여 발생한 모든 사항은 튜터와 수강생이 상호협의를
           통해 해결하여야 합니다.
         </p>
         <p>
-          마. 튜터는 회사가 제공하는 서비스를 이용함에 있어서 튜터랩
+          마. 튜터는 회사가 제공하는 서비스를 이용함에 있어서 멘토릿지
           안전결제서비스의 이용과 그 규칙에 동의하여야 합니다.
         </p>
         <p>
-          바. 회사가 제공하는 튜터랩 안전결제서비스를 오용, 악용함으로써
+          바. 회사가 제공하는 멘토릿지 안전결제서비스를 오용, 악용함으로써
           사회질서, 미풍양속을 침해하거나 침해할 우려가 있다고 판단되는 경우
-          또는 회사가 튜터랩 안전결제서비스를 제공하지 못할 상황 또는 사유가
+          또는 회사가 멘토릿지 안전결제서비스를 제공하지 못할 상황 또는 사유가
           발생하는 경우 회사는 수업 판매를 제한할 수 있습니다.
         </p>
         <p>제11조 (튜터의 의무)</p>
@@ -621,9 +621,9 @@ const ServiceContents = () => {
           발생한 경우 이에 대하여 일체의 법적 책임을 부담하여야 합니다.
         </p>
         <p>
-          아. 튜터는 회사의 튜터랩 사이트, 모바일 튜터랩에서의 거래와 관련하여
-          전자상거래 등에서의 소비자보호에 관한 법률 등 관계법령에서 명시한
-          자료를 보관하여야 합니다.
+          아. 튜터는 회사의 멘토릿지 사이트, 모바일 멘토릿지에서의 거래와
+          관련하여 전자상거래 등에서의 소비자보호에 관한 법률 등 관계법령에서
+          명시한 자료를 보관하여야 합니다.
         </p>
         <p>
           자. 튜터는 자신의 튜터 정보란에 회사가 정하는 절차에 따라 인증 받은
@@ -695,12 +695,12 @@ const ServiceContents = () => {
           </li>
           <li>
             <p>
-              튜터는 수업 진행이 완료 된 시점에 튜터랩 app서비스의 수업료받기
+              튜터는 수업 진행이 완료 된 시점에 멘토릿지 app서비스의 수업료받기
               기능을 이용하여 정산 신청을 해야 합니다. 수업이 정상적으로
               완료되기 이전에 정산을 요청할 시에 해당 정산 요청은 반려될 수
               있습니다. 만일, 정산 진행 이후 수업이 정상적으로 진행되지 않은
-              사실이 확인 될 경우 정산 받은 비용은 전액 튜터랩 회사로 입금하고
-              튜터랩 약관에 따라 정상적인 절차를 진행해야 합니다. 이에 따라
+              사실이 확인 될 경우 정산 받은 비용은 전액 멘토릿지 회사로 입금하고
+              멘토릿지 약관에 따라 정상적인 절차를 진행해야 합니다. 이에 따라
               튜터는 수업의 노출도 감소, 수업 중단 등 불이익을 받을 수 있습니다.
             </p>
           </li>
@@ -761,8 +761,8 @@ const ServiceContents = () => {
               외국인은 현재 대한민국에 거주 및 체류하고 있는 외국인 중, 한국에서
               취업 가능 비자를 소유해야 하며, 비자 인증을 통해서 튜터로 활동
               가능합니다. E-2회화 지도 비자의 경우에는 외국어 전문 관련시설,
-              어학연구소, 연수원 등에서 가능하며 튜터랩에서 튜터로는 활동이 불가
-              합니다.
+              어학연구소, 연수원 등에서 가능하며 멘토릿지에서 튜터로는 활동이
+              불가 합니다.
             </p>
           </li>
         </ol>
@@ -798,7 +798,7 @@ const ServiceContents = () => {
         </p>
         <p>
           (3) 수업은 등록 이후에도 수정이 가능합니다. 일신의 문제로 인하여
-          수업이 불가능한 사유가 있는 경우에는 튜터랩 앱에서 운영중지를 하거나
+          수업이 불가능한 사유가 있는 경우에는 멘토릿지 앱에서 운영중지를 하거나
           고객센터에게 이 사실을 알림으로써 일시적으로 수업을 중지할 수
           있습니다. 수정되거나 추가된 내용이 수강생에게 불리한 경우 수정 이전에
           수업을 신청한 수강생에게는 추가 내용 등록 전의 내용이 적용됩니다.
@@ -823,11 +823,11 @@ const ServiceContents = () => {
         <p>
           (6) 튜터는 튜터 등록 및 수업 등록, 수정시에 튜터의 개인정보 보호,
           타인의 튜터정보 악용사례 방지 및 수강생의 안전한 거래를 보장하기 위한
-          튜터랩 시스템이 허용하지 않는 범위의 연락처를 기입할 수 없습니다.
-          튜터와 수강생들의 개인정보 권리를 보호하고 튜터랩 시스템의 권리 보장을
-          통하지 않은 개인간 거래를 방지하기 위하여 전화번호(유선/무선), 이메일
-          연락처, 메신저, SNS ID등 연락처의 기재를 금합니다. 튜터 수업 상세
-          페이지뿐만 아니라 리뷰, 이미지/영상, 문의란 등 다른 게시판 또한
+          멘토릿지 시스템이 허용하지 않는 범위의 연락처를 기입할 수 없습니다.
+          튜터와 수강생들의 개인정보 권리를 보호하고 멘토릿지 시스템의 권리
+          보장을 통하지 않은 개인간 거래를 방지하기 위하여 전화번호(유선/무선),
+          이메일 연락처, 메신저, SNS ID등 연락처의 기재를 금합니다. 튜터 수업
+          상세 페이지뿐만 아니라 리뷰, 이미지/영상, 문의란 등 다른 게시판 또한
           연락처를 기재 할 수 없으며 이를 위반할 시에 회사에서는 해당 문구 및
           내용을 숨김 또는 삭제 처리 할 수 있고 위반 횟수 및 수준에 따라 해당
           수업을 등록한 튜터의 회원자격을 정지 또는 서비스 이용을 제한 할 수
@@ -848,13 +848,13 @@ const ServiceContents = () => {
           건의 철회 또는 취소로 인한 불이익은 튜터 본인이 부담하여야 합니다.
         </p>
         <p>
-          (9) 튜터는 튜터랩 서비스를 활용한 특정 상품 추천, 서비스 추천 및 매매
-          유도, 강매 등 일체 행위를 할 수 없습니다. 해당 사항이 확인 될 경우
-          회사는 튜터에게 관련 자료를 요청할 수 있으며, 근거 자료를 통해 수업
-          승인 및 튜터 활동 여부에 대한 조치를 취할 수 있습니다. (보험 상품,
-          주식 종목 추천, 부동산, 화장품, 식품, 건강보조제, 정수기, 서적, 각종
-          회원권, 서비스 이용권, 회원 가입 유도, 부업 유도, 자격증, 수료증 발급
-          등의 일체 행위)
+          (9) 튜터는 멘토릿지 서비스를 활용한 특정 상품 추천, 서비스 추천 및
+          매매 유도, 강매 등 일체 행위를 할 수 없습니다. 해당 사항이 확인 될
+          경우 회사는 튜터에게 관련 자료를 요청할 수 있으며, 근거 자료를 통해
+          수업 승인 및 튜터 활동 여부에 대한 조치를 취할 수 있습니다. (보험
+          상품, 주식 종목 추천, 부동산, 화장품, 식품, 건강보조제, 정수기, 서적,
+          각종 회원권, 서비스 이용권, 회원 가입 유도, 부업 유도, 자격증, 수료증
+          발급 등의 일체 행위)
         </p>
         <p>(10) 튜터가 수업을 삭제할 경우 수업은 복구되지 않습니다.</p>
         <p>제13조 (수강생의 권리)</p>
@@ -896,14 +896,14 @@ const ServiceContents = () => {
           금지합니다.
         </p>
         <p>
-          바. 자신을 제외한 튜터랩의 모든 회원이 서비스 내 게시한 정보를 회사와
-          유저 모두에게 사전 승낙 없이 영리 또는 비영리의 목적으로 다른 회사에
-          제공할 수 없습니다.
+          바. 자신을 제외한 멘토릿지의 모든 회원이 서비스 내 게시한 정보를
+          회사와 유저 모두에게 사전 승낙 없이 영리 또는 비영리의 목적으로 다른
+          회사에 제공할 수 없습니다.
         </p>
         <p>
           사. 수강생은 거래 의사 없이 구매, 취소를 반복해서는 안됩니다. 거래
           의사 없이 의도적으로 반복적으로 구매와 취소를 반복한다고 판단할 시,
-          튜터랩은 전체 튜터에게 해당 사실을 공지하고 회원 자격의 잠정 중지 및
+          멘토릿지은 전체 튜터에게 해당 사실을 공지하고 회원 자격의 잠정 중지 및
           영구적 박탈 등 의 조치를 취할 수 있습니다.
         </p>
         <ol>
@@ -938,23 +938,24 @@ const ServiceContents = () => {
         <p>③ 3회 30일 회원 자격 정지</p>
         <p>(5) 외부거래 및 결제 부정행위 (직거래 행위)</p>
         <p>
-          ①회원이 상호간 튜터랩 서비스 내 제공하는 결제 서비스를 이용하지 않고,
-          다른 방식의 결제를 유도, 실제 거래하는 행위 일체 (연락처, 소셜계정,
-          이메일, 메신저, 블로그, 유튜브채널, 각종 URL활용 등)
+          ①회원이 상호간 멘토릿지 서비스 내 제공하는 결제 서비스를 이용하지
+          않고, 다른 방식의 결제를 유도, 실제 거래하는 행위 일체 (연락처,
+          소셜계정, 이메일, 메신저, 블로그, 유튜브채널, 각종 URL활용 등)
         </p>
         <p>②회원 상호간 기타 혜택 제안 등을 통해 외부 거래를 유도하는 행위</p>
         <p>③수강생이 본인이 아닌 타인 명의를 도용하여 결제하는 행위</p>
         <p>④위의 각 호의 행위에 준하는 일체의 결제 부정행위</p>
         <p>
           (6) 환불 기간이 끝난 이후 튜터/수강생의 개인적인 사유로 생기는 환불
-          분쟁의 경우, 튜터랩 측에서는 별도의 개입과 판단 대신 약관에 명시된
+          분쟁의 경우, 멘토릿지 측에서는 별도의 개입과 판단 대신 약관에 명시된
           환불 규정 원칙을 적용
         </p>
         <p>
-          라. 튜터랩에서 자체 제작한 모든 컨텐츠 (사진, 영상, 웹, 뉴스 등)의 본
-          저작권은 제작자인 튜터랩에게 있으며, 제작한 컨텐츠들은 튜터랩의
+          라. 멘토릿지에서 자체 제작한 모든 컨텐츠 (사진, 영상, 웹, 뉴스 등)의
+          본 저작권은 제작자인 멘토릿지에게 있으며, 제작한 컨텐츠들은 멘토릿지의
           서면동의 없이 무단배포 및 수정을 금지합니다. 허가 되지 않은 행위는
-          저작권 침해로 간주되며 튜터랩에서 엄격한 법적 조치를 취할 수 있습니다.
+          저작권 침해로 간주되며 멘토릿지에서 엄격한 법적 조치를 취할 수
+          있습니다.
         </p>
         <p>제16조 (수강생의 권리)</p>
         <p>
@@ -986,7 +987,7 @@ const ServiceContents = () => {
         <p>③ 기타 관계법령에서 정한 절차에 따른 요청이 있는 경우</p>
         <p>제17조 (수업료 결제)</p>
         <p>
-          가. 수강생은 튜터랩의 안전결제서비스에 따라 결제하여야 하고, 회사는
+          가. 수강생은 멘토릿지의 안전결제서비스에 따라 결제하여야 하고, 회사는
           입금정보와 환불정보를 회사에서 제공하는 양식에 따라 이용자들에게
           내역을 제공합니다. 실시간 계좌이체 및 가상계좌 입금방법으로 대금을
           입금하는 경우 결제금액의 오입금으로 인한 모든 위험과 책임은 수강생이
@@ -1007,15 +1008,15 @@ const ServiceContents = () => {
           고지해야합니다.
         </p>
         <p>
-          라. 수강생은 결제금액의 전부 또는 일부를 보유하고 있는 튜터랩 포인트를
-          사용하여 결제할 수 있습니다. 이 경우, 서비스화면의 주문정보 선택란에
-          사용할 포인트 결제액을 기입하고, 차액만큼만 허용된 결제방법으로
-          결제하면 됩니다.
+          라. 수강생은 결제금액의 전부 또는 일부를 보유하고 있는 멘토릿지
+          포인트를 사용하여 결제할 수 있습니다. 이 경우, 서비스화면의 주문정보
+          선택란에 사용할 포인트 결제액을 기입하고, 차액만큼만 허용된
+          결제방법으로 결제하면 됩니다.
         </p>
         <p>제18조 (구매확정 및 수익금)</p>
         <p>
           가. (2회차 이상의 클래스) 수강생은 1회차 수업을 가져본 후, 수정/ 취소
-          요청을 하지않고 수업을 지속하는 경우, 첫 결제 대금은 튜터랩 측으로
+          요청을 하지않고 수업을 지속하는 경우, 첫 결제 대금은 멘토릿지 측으로
           귀속 됩니다. 단, 첫 수업을 시작하기 24시간 이전에 취소요청을 하는
           경우에는 결제대금이 100% 환불됩니다. 만일 첫 수업시작까지 24시간
           이내에 취소 의사를 밝히는경우 수업료 중 1시간의 금액은 환불 받을 수
@@ -1023,8 +1024,8 @@ const ServiceContents = () => {
         </p>
         <p>
           나. 수강생이 수업을 신청하는 경우, 요청한 시각으로부터 향후 12시간
-          이내에 안내된 튜터랩의 계좌로 수업료를 카드 또는 무통장 결제하여야
-          합니다. 2회차 수업을 진행 이후에는 환불 요청이 있을 시에도, 튜터랩에
+          이내에 안내된 멘토릿지의 계좌로 수업료를 카드 또는 무통장 결제하여야
+          합니다. 2회차 수업을 진행 이후에는 환불 요청이 있을 시에도, 멘토릿지에
           결제된 1회차 수업료는 환불되지 않습니다. 회사는 거래 내역, 수수료
           세금계산서 발행내역, 수익금 출금내역 요청 시에 요청자에게 공개합니다.
           다만, 회사는 이 약관 [제11조 마. 항의 수업등록양식에 어긋난 등록,
@@ -1083,19 +1084,19 @@ const ServiceContents = () => {
         </p>
         <p>
           ③ 단, 튜터의 판단 하에 수강생에게 금액을 개인적으로 환불 조치 하는
-          것은 가능하며 이에 대해서는 튜터랩 측에서 관여하지 않습니다.
+          것은 가능하며 이에 대해서는 멘토릿지 측에서 관여하지 않습니다.
         </p>
         <p>
           ④ 수강생이 튜터에게 문제가 있다고 판단하여 수업 진행 및 환불을
-          요청하는 경우, 튜터랩 측에서는 개입할 수 있으며 이에 대한 사유 확인과
-          수업 과정상에 문제는 없었는지 여부를 확인 합니다. 즉, 수업 진행상의
-          불쾌감 조성, 준비 소홀, 협박, 폭행, 추행, 불법적인 회유 등의 튜터의
-          의무에 맞지 않는 행위를 확인하여, 해당 사실이 발견되는 형사 고발 및
-          법적인 조치를 가할 수 있습니다. 또한, 튜터의 회원자격을 정지 또는
-          서비스 이용을 제한하는 조치를 취할 수 있습니다.
+          요청하는 경우, 멘토릿지 측에서는 개입할 수 있으며 이에 대한 사유
+          확인과 수업 과정상에 문제는 없었는지 여부를 확인 합니다. 즉, 수업
+          진행상의 불쾌감 조성, 준비 소홀, 협박, 폭행, 추행, 불법적인 회유 등의
+          튜터의 의무에 맞지 않는 행위를 확인하여, 해당 사실이 발견되는 형사
+          고발 및 법적인 조치를 가할 수 있습니다. 또한, 튜터의 회원자격을 정지
+          또는 서비스 이용을 제한하는 조치를 취할 수 있습니다.
         </p>
         <p>
-          ⑤ 약관에 규정된 회사의 튜터랩안전결제서비스가 종료된 후 수업의 환불
+          ⑤ 약관에 규정된 회사의 멘토릿지안전결제서비스가 종료된 후 수업의 환불
           등과 관련하여 튜터와 수강생 사이에 분쟁 등이 발생한 경우 원칙상 관련
           당사자간에 해결을 우선시하며, 상호 합의 이후 회사는 이에 대한 책임을
           보증하지 않습니다.
@@ -1116,16 +1117,16 @@ const ServiceContents = () => {
         </p>
         <p>
           ④ 단, 튜터가 수강생에게 문제가 있다고 판단하여 수업 진행 및 환불을
-          거부하는 경우, 튜터랩 측에서는 개입할 수 있으며 이에 대한 사유 확인과
-          수업 과정상에 문제는 없었는지 여부를 확인 합니다. 즉, 수업 진행상의
-          불쾌감 조성, 협박, 폭행, 추행, 불법적인 회유 등의 범죄에 준하는 행위를
-          확인하여, 해당 사실이 발견되는 즉시 형사 고발 및 법적인 조치를 가할 수
-          있습니다. 또한, 수강생의 회원자격을 정지 또는 서비스 이용을 제한하는
-          조치를 취할 수 있습니다.
+          거부하는 경우, 멘토릿지 측에서는 개입할 수 있으며 이에 대한 사유
+          확인과 수업 과정상에 문제는 없었는지 여부를 확인 합니다. 즉, 수업
+          진행상의 불쾌감 조성, 협박, 폭행, 추행, 불법적인 회유 등의 범죄에
+          준하는 행위를 확인하여, 해당 사실이 발견되는 즉시 형사 고발 및 법적인
+          조치를 가할 수 있습니다. 또한, 수강생의 회원자격을 정지 또는 서비스
+          이용을 제한하는 조치를 취할 수 있습니다.
         </p>
         <p>
           ⑤ 튜터와 수강생간의 협의 하에 수강생이 남은 수업 분의 수업료만
-          튜터분에게 환불 조치 해드리는 것은 가능하며, 이에 대해서는 튜터랩
+          튜터분에게 환불 조치 해드리는 것은 가능하며, 이에 대해서는 멘토릿지
           측에서 관여하지 않습니다 다. 튜터의 귀책 사유로 다수의 수강생의 취소
           및 환불요청이 발생하는 경우, 또는 동일 중분류 카테고리 내 타 수업보다
           환불요청이 현저히 높은 경우 회사는 튜터의 등록 제한, 인기도 감소 등의
@@ -1134,27 +1135,27 @@ const ServiceContents = () => {
         <p>
           마. 튜터와 수강생은 서비스를 이용하여 약속 된 첫 수업 일정이 진행 된
           이후, 사전 약속되지 않은 튜터와 수강생의 상호 추가적 협의에 대한
-          금전적 환불에 대해서는 튜터랩에서는 관여 하지 않습니다. 단, 튜터와
-          수강생 사이에 분쟁이 발생한 경우 튜터랩측에서는 개입할 수 있으며, 이를
-          중재하고 협의 및 권장조치를 취할 수 있습니다.
+          금전적 환불에 대해서는 멘토릿지에서는 관여 하지 않습니다. 단, 튜터와
+          수강생 사이에 분쟁이 발생한 경우 멘토릿지측에서는 개입할 수 있으며,
+          이를 중재하고 협의 및 권장조치를 취할 수 있습니다.
         </p>
         <p>제20조 (면책조항)</p>
         <p>
           가. 당사는 수강생과 튜터의 독립적이고 자발적인 의사에 따라 수업을
           신청, 협의, 결정할 수 있도록 사전에 동의한 정보와 방식으로 중개업무를
-          하고 있습니다. 튜터랩은 회원이 등록한 정보에 대한 사실의 정확성과
+          하고 있습니다. 멘토릿지은 회원이 등록한 정보에 대한 사실의 정확성과
           신뢰성을 확보하기 위해 학력 인증, 신분증 인증, 경력 인증에 대해 정확히
           인증 자료를 확보하고 이를 서비스 내에 표시합니다. 이에 대한 허위 정보
-          보증은 튜터랩에게 책임이 있으며 튜터랩의 허위 신분증과 자격증을 보증한
-          경우 튜터랩의 귀책으로 간주합니다. 다만 국가공인 자격증과 같이 명확히
-          시기와 보증번호 등을 확인할 수 없는, 인성, 업무 경험 등과 같은
-          정성적인 부분에 대한 정보에 대한 보증을 하지 않습니다. 따라서 이로
-          인해 발생하는 정신적인 피해 및 손해 등에 대해서는 책임을 지지
+          보증은 멘토릿지에게 책임이 있으며 멘토릿지의 허위 신분증과 자격증을
+          보증한 경우 멘토릿지의 귀책으로 간주합니다. 다만 국가공인 자격증과
+          같이 명확히 시기와 보증번호 등을 확인할 수 없는, 인성, 업무 경험 등과
+          같은 정성적인 부분에 대한 정보에 대한 보증을 하지 않습니다. 따라서
+          이로 인해 발생하는 정신적인 피해 및 손해 등에 대해서는 책임을 지지
           않습니다.
         </p>
         <p>
           나. 당사는 수강생과 튜터와의 수업방식, 결제방식, 환불 규정들은
-          튜터랩의 각 약관 규정들을 따르나, 상호간의 협의 사항이 있는 경우에는
+          멘토릿지의 각 약관 규정들을 따르나, 상호간의 협의 사항이 있는 경우에는
           규정이 면칙 될 수 있도록 우선순위를 두고 있습니다. 또한 약관과 다르게
           수업을 진행한다는 상호 협의가 있는 경우 이로 인해 발생하는 분쟁과
           관련한 책임은 당사자들이 지며, 당사는 당사의 고의 또는 중과실이 없는
@@ -1202,10 +1203,10 @@ const ServiceContents = () => {
           있으며, 피해자가 고소, 고발 조치를 취한 경우 당사는 적극 협조합니다.
         </p>
         <p>
-          다. 튜터랩 사이트는 수강생과 튜터 간의 수업 연결 및 튜터랩의 서비스를
-          제공받기 위한 목적으로만 이용이 가능하며, 사교육 기관이 수강생을
-          모집하거나 광고 등에 상업적으로 이용할 경우 예고 없이 회원자격을
-          박탈합니다.
+          다. 멘토릿지 사이트는 수강생과 튜터 간의 수업 연결 및 멘토릿지의
+          서비스를 제공받기 위한 목적으로만 이용이 가능하며, 사교육 기관이
+          수강생을 모집하거나 광고 등에 상업적으로 이용할 경우 예고 없이
+          회원자격을 박탈합니다.
         </p>
         <p>
           라. 타인에게 계정 공유, 기타 상업 및 비상업적으로 서비스 이용 시
@@ -1225,7 +1226,7 @@ const ServiceContents = () => {
         <p>
           이용약관 내용 추가, 삭제 및 수정이 있을 시에는 개정일로부터 7일전,
           회원의 권리 의무에 중대한 영향을 미치는 중요한 사항의 변경인 경우에는
-          30일 전에 튜터랩사이트 공지사항, 이메일등을 통해 고지합니다.
+          30일 전에 멘토릿지 사이트 공지사항, 이메일등을 통해 고지합니다.
         </p>
         <p>
           공고일자 : 2021년 12월 01일 <br /> 시행일자 : 2021년 12월 01일
diff --git a/pages/common/auth/signup.jsx b/pages/common/auth/signup.jsx
index 384afc1..bcbd705 100644
--- a/pages/common/auth/signup.jsx
+++ b/pages/common/auth/signup.jsx
@@ -1,13 +1,15 @@
 import { useEffect, useState } from "react";
 import router from "next/router";
 import styles from "./signup.module.scss";
-import { BottomBlueBtn, TopBar } from "../../../components/common";
-import { signUp } from "../../../core/api/Login";
-import SignUpErr from "../../../utils/errorHandling/signupErr";
-import UserBlock from "../../../components/mentor/signup/userBlock";
-import BasicDataBlock from "../../../components/mentor/signup/basicDataBlock";
-import AgreeBlock from "../../../components/mentor/signup/agreeBlock";
-import AddrBlock from "../../../components/mentor/signup/addrBlock";
+import { BottomBlueBtn, TopBar } from "/components/common";
+import {
+  UserBlock,
+  BasicDataBlock,
+  AgreeBlock,
+  AddrBlock,
+} from "/components/mentor/signup";
+import { signUp } from "/core/api/Login";
+import SignUpErr from "/utils/errorHandling/signupErr";
 
 const SignUp = () => {
   const [user, setUser] = useState({
diff --git a/pages/common/auth/signupComplete.jsx b/pages/common/auth/signupComplete.jsx
index 3f0d58d..e5b0dd7 100644
--- a/pages/common/auth/signupComplete.jsx
+++ b/pages/common/auth/signupComplete.jsx
@@ -1,9 +1,8 @@
 import router from "next/router";
 import classNames from "classnames";
 import styles from "./signupComplete.module.scss";
-import { BasicBtn } from "../../../components/common";
+import { BasicBtn, basicBtnStyle } from "/components/common";
 import { IC_CheckOutline } from "../../../icons";
-import { basicBtnStyle } from "../../../components/common";
 
 const SignUpComplete = () => {
   return (
diff --git a/pages/common/auth/withdraw.jsx b/pages/common/auth/withdraw.jsx
index 3f6053e..e6aec99 100644
--- a/pages/common/auth/withdraw.jsx
+++ b/pages/common/auth/withdraw.jsx
@@ -1,23 +1,20 @@
-import styles from "./withdraw.module.scss";
-import { TopBar, BottomBlueBtn, BasicRadio } from "../../../components/common";
-import router from "next/router";
-import * as cookie from "cookie";
 import { useState } from "react";
-import { resignMembership } from "../../../core/api/User";
+import * as cookie from "cookie";
+import styles from "./withdraw.module.scss";
+import { TopBar, BottomBlueBtn, BasicRadio } from "/components/common";
+import { resignMembership } from "/core/api/User";
 
 export const getServerSideProps = async (context) => {
   const token = cookie.parse(context.req.headers.cookie).accessToken;
-  const role = cookie.parse(context.req.headers.cookie).role;
 
   return {
     props: {
       token,
-      role,
     },
   };
 };
 
-const WithDraw = ({ token, role }) => {
+const WithDraw = ({ token }) => {
   const [select, setSelect] = useState("");
   const [password, setPassword] = useState("");
 
diff --git a/pages/common/chat/chatDetail/[chid].jsx b/pages/common/chat/chatDetail/[chid].jsx
index 12e57ea..93d2793 100644
--- a/pages/common/chat/chatDetail/[chid].jsx
+++ b/pages/common/chat/chatDetail/[chid].jsx
@@ -1,81 +1,80 @@
 import { useContext, useEffect, useState } from "react";
 import * as cookie from "cookie";
-import styles from "./chat.module.scss";
-import { getMyChatHistory, readChat } from "../../../../core/api/Chat";
-import ChatRoomTyping from "../../../../components/mentor/chat/chatRoomTyping";
-import ChatRoomTopBar from "../../../../components/mentor/chat/chatRoomTopBar";
-import ChatRoomContentBlock from "../../../../components/mentor/chat/chatRoomContentBlock";
-import { getMyInfo, getUserInfo } from "../../../../core/api/User";
 import InfiniteScroll from "react-infinite-scroll-component";
-import { getUserRoleType } from "../../../../core/api/Login";
-import { sockContext } from "../../../../core/provider";
-import { getOutFromChatRoom } from "../../../../core/api/Chat";
+import styles from "./chat.module.scss";
+import {
+  ChatRoomTyping,
+  ChatRoomTopBar,
+  ChatRoomContentBlock,
+} from "/components/common/chat";
+import { getMyChatHistory, readChat, getOutFromChatRoom } from "/core/api/Chat";
+import { getUserRoleType } from "/core/api/Login";
+import { getMyInfo, getUserInfo } from "/core/api/User";
+import { sockContext } from "/core/provider";
 
 export async function getServerSideProps(context) {
   const token = cookie.parse(context.req.headers.cookie).accessToken;
-  const chatRoomId = context.query.chid;
-  const othersId = context.query.other;
-  const history = await getMyChatHistory(token, chatRoomId, 1).then((res) =>
+  const { chid, other } = context.query;
+  const history = await getMyChatHistory(token, chid, 1).then((res) =>
     res.content.reverse()
   );
-  const other = await getUserInfo(token, othersId);
-  const my = await getMyInfo(token);
+  const othersInfo = await getUserInfo(token, other);
+  const myInfo = await getMyInfo(token);
   const myRole = await getUserRoleType(token).then((data) => data.loginType);
-
-  await readChat(chatRoomId);
+  await readChat(chid);
 
   return {
     props: {
       token,
       history,
-      chatRoomId,
-      other,
-      my,
+      chid,
+      othersInfo,
+      myInfo,
       myRole,
     },
   };
 }
 
-const Chat = ({ token, history, chatRoomId, other, my, myRole }) => {
+const Chat = ({ token, history, chid, othersInfo, myInfo, myRole }) => {
   const chatContext = useContext(sockContext);
   const ws = chatContext.ws;
   const [chatContents, setChatContents] = useState([]);
-  const [pageNum, setPageNum] = useState(1);
-  const [dataLen, setDataLen] = useState(10);
+  const [forScroll, setForScroll] = useState({ pageNum: 1, dataLen: 10 });
 
   useEffect(() => {
     setChatContents(history);
   }, [history]);
 
   useEffect(() => {
-    //detect page leaving
     window.onbeforeunload = function (e) {
-      if (e) getOutFromChatRoom(token, chatRoomId);
+      if (e) getOutFromChatRoom(token, chid);
     };
     window.onpopstate = function (e) {
-      if (e) getOutFromChatRoom(token, chatRoomId);
+      if (e) getOutFromChatRoom(token, chid);
     };
   }, []);
 
   const fetchMore = async () => {
-    if (pageNum != 1) {
+    if (forScroll.pageNum !== 1) {
       const moreHistory = await getMyChatHistory(
         token,
-        chatRoomId,
-        pageNum
+        chid,
+        forScroll.pageNum
       ).then((res) => res.content.reverse());
       setChatContents([...moreHistory, ...chatContents]);
     }
-    setPageNum(pageNum + 1);
-    setDataLen(dataLen + 10);
+    setForScroll((prev) => ({
+      pageNum: prev.pageNum + 1,
+      dataLen: prev.dataLen + 10,
+    }));
   };
 
   useEffect(() => {
-    if (chatContext.chat != undefined && chatContext.chat.type == "MESSAGE")
+    if (chatContext.chat !== undefined && chatContext.chat.type === "MESSAGE")
       setChatContents((prev) => [...prev, chatContext.chat]);
     else if (
-      chatContext.chat != undefined &&
-      chatContext.chat.type == "ENTER"
+      chatContext.chat !== undefined &&
+      chatContext.chat.type === "ENTER"
     ) {
       setChatContents(
         chatContents.map((data) =>
@@ -89,9 +88,9 @@ const Chat = ({ token, history, chatRoomId, other, my, myRole }) => {
     if (content.replace(/ /g, "").length !== 0) {
       var msg = {
         type: "MESSAGE",
-        chatroomId: parseInt(chatRoomId),
-        receiverId: other.userId,
-        senderId: my.userId,
+        chatroomId: parseInt(chid),
+        receiverId: othersInfo.userId,
+        senderId: myInfo.userId,
         text: content,
       };
       ws.send("/pub/chat", {}, JSON.stringify(msg));
@@ -101,34 +100,31 @@ const Chat = ({ token, history, chatRoomId, other, my, myRole }) => {
   return (
     <div className={styles.chatRoom}>
       <ChatRoomTopBar
-        nickname={other?.nickname}
-        othersRole={myRole == "ROLE_MENTEE" ? "멘토" : "멘티"}
-        getOut={() => getOutFromChatRoom(token, chatRoomId)}
+        nickname={othersInfo?.nickname}
+        othersRole={myRole === "ROLE_MENTEE" ? "멘토" : "멘티"}
+        getOut={() => getOutFromChatRoom(token, chid)}
       />
       <div className={styles.chatContentSection} id="chatContents">
         <div className={styles.chatContents}>
           <InfiniteScroll
             scrollableTarget={"chatContents"}
-            dataLength={dataLen}
+            dataLength={forScroll.dataLen}
             next={fetchMore}
             hasMore={true}
-            // hasMore={!last}
             inverse={true}
           >
-            {chatContents.length != 0 &&
-              chatContents?.map((data, i) => {
-                return (
-                  <ChatRoomContentBlock
-                    key={i}
-                    my={my}
-                    other={other}
-                    sender={data.senderId}
-                    sentAt={data.createdAt}
-                    msg={data.text}
-                    checked={data.checked}
-                  />
-                );
-              })}
+            {chatContents.length !== 0 &&
+              chatContents?.map((data, i) => (
+                <ChatRoomContentBlock
+                  key={i}
+                  my={myInfo}
+                  other={othersInfo}
+                  sender={data.senderId}
+                  sentAt={data.createdAt}
+                  msg={data.text}
+                  checked={data.checked}
+                />
+              ))}
           </InfiniteScroll>
         </div>
       </div>
diff --git a/pages/common/chat/chatList.jsx b/pages/common/chat/chatList.jsx
index 773368d..521d295 100644
--- a/pages/common/chat/chatList.jsx
+++ b/pages/common/chat/chatList.jsx
@@ -1,12 +1,11 @@
-import styles from "./chatList.module.scss";
-import { BottomTab } from "../../../components/common";
 import React, { useContext, useEffect, useState } from "react";
-import { getMyChatRooms } from "../../../core/api/Chat";
 import * as cookie from "cookie";
-import ChatPreview from "../../../components/mentor/chat/chatPreview";
+import styles from "./chatList.module.scss";
+import { getMyChatRooms } from "/core/api/Chat";
+import { sockContext } from "/core/provider";
+import { BottomTab } from "/components/common";
+import { ChatPreview, ChatListTopBar } from "/components/common/chat";
 import { IC_SmilingMan } from "../../../icons";
-import ChatListTopBar from "../../../components/mentor/chat/chatListTopBar";
-import { sockContext } from "../../../core/provider";
 
 export const getServerSideProps = async (context) => {
   const role = cookie.parse(context.req.headers.cookie).role;
@@ -21,20 +20,20 @@ export const getServerSideProps = async (context) => {
 };
 
 const ChatList = ({ myChatRooms, role }) => {
-  const othersRole = role == "ROLE_MENTOR" ? "멘티" : "멘토"; //상대방 role 출력해야 해서 반대로
+  const othersRole = role === "ROLE_MENTOR" ? "멘티" : "멘토";
   const chatContext = useContext(sockContext);
   const chat = chatContext.chat;
   const [updated, setUpdated] = useState(myChatRooms.content);
 
   useEffect(() => {
-    if (chat != undefined && chat.type === "MESSAGE") {
+    if (chat !== undefined && chat.type === "MESSAGE") {
       let filtered = [],
         thatRoom;
       updated.forEach((i) => {
         i.chatroomId !== chat.chatroomId ? filtered.push(i) : (thatRoom = i);
       });
       thatRoom.lastMessage = chat;
-      thatRoom.uncheckedMessageCount += 1;
+      thatRoom.uncheckedMessageCount++;
       const chatLists = [thatRoom, ...filtered];
       setUpdated(chatLists);
     }
@@ -44,17 +43,15 @@ const ChatList = ({ myChatRooms, role }) => {
     <>
       <div className={styles.chatList}>
         <ChatListTopBar />
-        {updated.length == 0 && (
+        {updated.length === 0 && (
           <div className={styles.noChat}>
             <IC_SmilingMan width="180px" height="124px" />
           </div>
         )}
-        {myChatRooms != undefined &&
-          updated.map((data, i) => {
-            return (
-              <ChatPreview chatData={data} key={i} othersRole={othersRole} />
-            );
-          })}
+        {myChatRooms !== undefined &&
+          updated.map((data, i) => (
+            <ChatPreview chatData={data} key={i} othersRole={othersRole} />
+          ))}
         <BottomTab num={[0, 0, 1, 0]} role={role} />
       </div>
     </>
diff --git a/pages/common/notification/index.jsx b/pages/common/notification/index.jsx
index f3efff9..195b0d5 100644
--- a/pages/common/notification/index.jsx
+++ b/pages/common/notification/index.jsx
@@ -1,60 +1,70 @@
 import { useState, useEffect, useContext } from "react";
+import InfiniteScroll from "react-infinite-scroll-component";
 import * as cookie from "cookie";
 import styles from "./notification.module.scss";
-import { TopBar } from "../../../components/common";
-import { IC_Caution } from "../../../icons";
-import NotificationBlock from "../../../components/mentor/notification/notificationBlock";
-import InfiniteScroll from "react-infinite-scroll-component";
+import { TopBar } from "/components/common";
+import { NotificationBlock } from "/components/common/notification/notificationBlock";
 import {
   checkNotification,
   getMyNotification,
   deleteNotification,
-} from "../../../core/api/Notification";
-import router from "next/router";
-import { sockContext } from "../../../core/provider";
-import { getMyInfo } from "../../../core/api/User";
+} from "/core/api/Notification";
+import { sockContext } from "/core/provider";
+import { IC_Caution } from "../../../icons";
 
 export async function getServerSideProps(context) {
   const token = cookie.parse(context.req.headers.cookie).accessToken;
   const notiData = await getMyNotification(token, 1);
-
   await checkNotification();
-  const my = await getMyInfo(token);
 
   return {
-    props: { token, notiData, my },
+    props: { token, notiData },
   };
 }
 
-const Notification = ({ token, notiData, my }) => {
-  const [pageNum, setPageNum] = useState(1);
+const Notification = ({ token, notiData }) => {
   const [allNoti, setAllNoti] = useState(notiData.content);
-  const [last, setLast] = useState(notiData.last);
-  const [dataLen, setDataLen] = useState(10);
+  const [forScroll, setForScroll] = useState({
+    pageNum: 1,
+    last: notiData.last,
+    dataLen: 10,
+  });
+
   const alarm = useContext(sockContext);
   useEffect(() => {
-    if (alarm.alarmContents != undefined) {
+    if (alarm.alarmContents !== undefined) {
       setAllNoti((prev) => [alarm.alarmContents, ...prev]);
     }
   }, [alarm.alarmContents]);
 
   const GetMoreNoti = async () => {
-    const moreNoti = await getMyNotification(token, pageNum);
-    setLast(moreNoti.last);
+    const moreNoti = await getMyNotification(token, forScroll.pageNum);
+    setForScroll((prev) => ({ ...prev, last: moreNoti.last }));
     setAllNoti([...allNoti, ...moreNoti.content]);
   };
 
   useEffect(() => {
-    if (pageNum != 1) {
-      GetMoreNoti();
-    }
-  }, [pageNum]);
+    if (forScroll.pageNum !== 1) GetMoreNoti();
+  }, [forScroll.pageNum]);
+
+  const deleteNotificationHandler = async (notificationId) => {
+    await deleteNotification(token, notificationId)
+      .then((res) => {
+        if (res === 200) {
+          const notiAfterDelete = allNoti.filter(
+            (i) => i.notificationId !== data?.notificationId
+          );
+          setAllNoti(notiAfterDelete);
+        }
+      })
+      .catch((err) => alert("알람 삭제 도중 에러가 발생했습니다"));
+  };
 
   return (
     <div className={styles.notiPage}>
       <TopBar text={"알림"} />
       <div className={styles.line} />
-      {notiData.totalElements == 0 ? (
+      {notiData.totalElements === 0 ? (
         <div className={styles.noNoti}>
           <IC_Caution width={45} height={45} />
           <span>받은 알림이 없습니다.</span>
@@ -62,36 +72,25 @@ const Notification = ({ token, notiData, my }) => {
       ) : (
         <div className={styles.notiExists}>
           <InfiniteScroll
-            dataLength={dataLen}
+            dataLength={forScroll.dataLen}
             next={() => {
-              setPageNum(pageNum + 1);
-              setDataLen(dataLen + 10);
+              setForScroll((prev) => ({
+                ...prev,
+                pageNum: prev.pageNum + 1,
+                dataLen: prev.dataLen + 1,
+              }));
             }}
-            hasMore={!last}
+            hasMore={!forScroll.last}
           >
-            {allNoti.map((data, i) => {
-              return (
-                <NotificationBlock
-                  key={i}
-                  // title={data?.type}
-                  title={data?.notificationId}
-                  date={data?.createdAt}
-                  content={data?.content}
-                  deleteAlarm={async () => {
-                    const res = await deleteNotification(
-                      token,
-                      data?.notificationId
-                    );
-                    if (res == 200) {
-                      const allNoti2 = allNoti.filter(
-                        (i) => i.notificationId != data?.notificationId
-                      );
-                      setAllNoti(allNoti2);
-                    }
-                  }}
-                />
-              );
-            })}
+            {allNoti.map((data, i) => (
+              <NotificationBlock
+                key={i}
+                title={data?.notificationId}
+                date={data?.createdAt}
+                content={data?.content}
+                deleteAlarm={deleteNotificationHandler(data?.notificationId)}
+              />
+            ))}
           </InfiniteScroll>
         </div>
       )}
diff --git a/utils/errorHandling/editInfoErr.jsx b/utils/errorHandling/editInfoErr.jsx
index f8cd24e..e39f05e 100644
--- a/utils/errorHandling/editInfoErr.jsx
+++ b/utils/errorHandling/editInfoErr.jsx
@@ -1,16 +1,14 @@
 import { PhoneValidation } from "../validation";
 
 const EditInfoErr = (user, setCheckError) => {
-  if (user.phone == "") {
+  if (user.phone === "")
     setCheckError({ isError: true, errorMsg: "빈칸을 모두 채워주세요." });
-  } else if (!PhoneValidation(user.phone)) {
+  else if (!PhoneValidation(user.phone))
     setCheckError({
       isError: true,
       errorMsg: "휴대폰 번호 형식을 확인해주세요.",
     });
-  } else {
-    setCheckError({ isError: false, errorMsg: "" });
-  }
+  else setCheckError({ isError: false, errorMsg: "" });
 };
 
 export default EditInfoErr;
diff --git a/utils/errorHandling/signupErr.jsx b/utils/errorHandling/signupErr.jsx
index 255f4c9..82f5278 100644
--- a/utils/errorHandling/signupErr.jsx
+++ b/utils/errorHandling/signupErr.jsx
@@ -2,25 +2,26 @@ import { PhoneValidation, EmailValidation } from "../validation";
 
 const SignUpErr = (datas, setCheckError) => {
   const { dupCheck, user, agree } = datas;
-  if (dupCheck.nicknameDupError == true) {
+
+  if (dupCheck.nicknameDupError) {
     setCheckError({
       isError: true,
       errorMsg: "중복되는 닉네임입니다.",
     });
   } else if (!EmailValidation(user.email)) {
     setCheckError({ isError: true, errorMsg: "이메일 형식을 체크해주세요." });
-  } else if (dupCheck.emailDupError == true) {
+  } else if (dupCheck.emailDupError) {
     setCheckError({
       isError: true,
       errorMsg: "중복되는 이메일입니다.",
     });
   } else if (
-    user.name == "" ||
-    user.nickname == "" ||
-    user.email == "" ||
-    user.pw == "" ||
-    user.pwConfirm == "" ||
-    user.phone == ""
+    user.name === "" ||
+    user.nickname === "" ||
+    user.email === "" ||
+    user.pw === "" ||
+    user.pwConfirm === "" ||
+    user.phone === ""
   ) {
     setCheckError({ isError: true, errorMsg: "빈칸을 모두 채워주세요." });
   } else if (user.pw.length > 14 || user.pw.length < 6) {
@@ -28,7 +29,7 @@ const SignUpErr = (datas, setCheckError) => {
       isError: true,
       errorMsg: "비밀번호는 6-14자 내로 입력해주세요.",
     });
-  } else if (user.pw != user.pwConfirm) {
+  } else if (user.pw !== user.pwConfirm) {
     setCheckError({
       isError: true,
       errorMsg: "비밀번호가 일치하지 않습니다.",
@@ -43,30 +44,22 @@ const SignUpErr = (datas, setCheckError) => {
       isError: true,
       errorMsg: "필수 동의 사항에 모두 동의해주세요.",
     });
-  } else if (
-    dupCheck.emailDupError == false &&
-    dupCheck.emailDupSuccess == false
-  ) {
+  } else if (!dupCheck.emailDupError && !dupCheck.emailDupSuccess) {
     setCheckError({
       isError: true,
       errorMsg: "아이디 중복 확인을 진행해주세요.",
     });
-  } else if (dupCheck.emailDupError == true) {
+  } else if (dupCheck.emailDupError) {
     setCheckError({
       isError: true,
       errorMsg: "중복되는 아이디입니다.",
     });
-  } else if (
-    dupCheck.nicknameDupError == false &&
-    dupCheck.nicknameDupSuccess == false
-  ) {
+  } else if (!dupCheck.nicknameDupError && !dupCheck.nicknameDupSuccess) {
     setCheckError({
       isError: true,
       errorMsg: "닉네임 중복 확인을 진행해주세요.",
     });
-  } else {
-    setCheckError({ isError: false, errorMsg: "" });
-  }
+  } else setCheckError({ isError: false, errorMsg: "" });
 };
 
 export default SignUpErr;