리팩토링

components/mentor/chat/chatPreview.jsx → 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>

components/mentor/chat/chatRoomContentBlock.jsx → 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}

components/mentor/chat/chatRoomTopBar.jsx → 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}>

components/mentor/chat/chatRoomTyping.jsx → 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("");

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,
+};

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,
 };

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>
         ))}

components/mentor/notification/notificationBlock.jsx → 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 };

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);
     }

components/mentor/signup/addrBlockEdit.jsx

@@ -1,15 +1,15 @@
 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(() => {
     if (newAddr.statePick !== "") GetSi(newAddr.statePick);
   }, [newAddr.statePick]);
 
   useEffect(() => {
-    if (newAddr.sigunguPick != "")
+    if (newAddr.sigunguPick !== "")
       GetDong(newAddr.statePick, newAddr.sigunguPick);
   }, [newAddr.sigunguPick]);
 

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,19 +52,15 @@ 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"}
         text={"[필수] 악의적 콘텐츠 제한에 동의합니다."}
         checkBoxStyle={styles.agreeCheck}
         textStyle={styles.agreeText}
         value={agree.three}
-        onChange={() => {
-          setAgree({ ...agree, three: !agree.three });
-        }}
+        onChange={() => setAgree({ ...agree, three: !agree.three })}
       />
     </section>
   );

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 };

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) => {

jsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
-    "jsx": "react"
+    "jsx": "react",
+    "baseUrl": "./src/"
   }
 }