refac: 최적화 적용

src/components/atoms/Button/DefaultButton.tsx

@@ -1,4 +1,4 @@
-import { MouseEventHandler } from "react";
+import { memo, MouseEventHandler } from "react";
 import styled from "styled-components";
 import { BorderColorType, ColorType, FontSizeType } from "@styles/theme";
 
@@ -20,56 +20,58 @@ interface DefaultButtonProps {
   pv?: number;
 }
 
-const DefaultButton = ({
-  isInviteButton = false,
-  text,
-  onClick,
-  width = null,
-  height = null,
-  fontSize = "base",
-  fontWeight = "normal",
-  color = "white",
-  backgroundColor = "primary",
-  hoverBackgroundColor = "primary",
-  disabled = false,
-  borderColor = "trans",
-  mb = 0,
-  ph = 0,
-  pv = 0,
-}: DefaultButtonProps) => {
-  return (
-    <DefaultButtonContainer
-      width={width}
-      height={height}
-      disabled={disabled}
-      onClick={onClick}
-      fontSize={fontSize}
-      fontWeight={fontWeight}
-      color={color}
-      isInviteButton={isInviteButton}
-      backgroundColor={
-        isInviteButton
-          ? disabled
-            ? "rgba(69,73,239,0.6)"
-            : "rgb(69,73,239)"
-          : backgroundColor
-      }
-      borderColor={borderColor}
-      hoverBackgroundColor={
-        isInviteButton
-          ? disabled
-            ? "rgba(69,73,239,0.6)"
-            : "rgb(69,73,239)"
-          : hoverBackgroundColor
-      }
-      mb={mb}
-      ph={ph}
-      pv={pv}
-    >
-      {text}
-    </DefaultButtonContainer>
-  );
-};
+const DefaultButton = memo(
+  ({
+    isInviteButton = false,
+    text,
+    onClick,
+    width = null,
+    height = null,
+    fontSize = "base",
+    fontWeight = "normal",
+    color = "white",
+    backgroundColor = "primary",
+    hoverBackgroundColor = "primary",
+    disabled = false,
+    borderColor = "trans",
+    mb = 0,
+    ph = 0,
+    pv = 0,
+  }: DefaultButtonProps) => {
+    return (
+      <DefaultButtonContainer
+        width={width}
+        height={height}
+        disabled={disabled}
+        onClick={onClick}
+        fontSize={fontSize}
+        fontWeight={fontWeight}
+        color={color}
+        isInviteButton={isInviteButton}
+        backgroundColor={
+          isInviteButton
+            ? disabled
+              ? "rgba(69,73,239,0.6)"
+              : "rgb(69,73,239)"
+            : backgroundColor
+        }
+        borderColor={borderColor}
+        hoverBackgroundColor={
+          isInviteButton
+            ? disabled
+              ? "rgba(69,73,239,0.6)"
+              : "rgb(69,73,239)"
+            : hoverBackgroundColor
+        }
+        mb={mb}
+        ph={ph}
+        pv={pv}
+      >
+        {text}
+      </DefaultButtonContainer>
+    );
+  }
+);
 
 const DefaultButtonContainer = styled.button<
   Omit<DefaultButtonProps, "text" | "onClick">

src/components/atoms/Div/CommunityLogo.tsx

@@ -1,7 +1,7 @@
 import { Avatar } from "@mui/material";
 import { IconButton } from "@mui/material";
 import styled from "styled-components";
-import { ReactElement } from "react";
+import { MouseEvent, ReactElement, useCallback } from "react";
 import useCommunityStore from "@store/useCommunityStore";
 
 interface CommunityLogoProps {
@@ -10,8 +10,8 @@ interface CommunityLogoProps {
   active?: boolean;
   src?: string;
   children?: ReactElement;
-  avatarWidth: Number;
-  avatarHeight: Number;
+  avatarWidth: number;
+  avatarHeight: number;
 }
 
 const CommunityLogo = ({
@@ -26,22 +26,21 @@ const CommunityLogo = ({
   const { communityStatus, setCommunityStatus } = useCommunityStore();
   active = Number(communityStatus) === id;
 
-  const selectCommunity = (e: any) => {
+  const selectCommunity = useCallback((e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     if (id === -2) return;
     setCommunityStatus(id);
-  };
+  }, []);
 
   return (
     <CommunityIconBox borderRadius={active ? 0.8 : 5} height={active ? 35 : 10}>
       <ClickedWrapper className="side" />
       <StyledIconButton
         height={avatarHeight}
         width={avatarWidth}
-        onClick={(e) => selectCommunity(e)}
+        onClick={selectCommunity}
         disabled
       >
-        {/* borderRadius로 이미지 동그란 정도 조절하기 */}
         <Avatar className="avatar" src={src}>
           {children}
           {name}
@@ -51,8 +50,6 @@ const CommunityLogo = ({
   );
 };
 
-export default CommunityLogo;
-
 interface CommunityIconBoxProps {
   borderRadius: number | string;
   height: number | string;
@@ -82,29 +79,30 @@ const CommunityIconBox = styled.div<CommunityIconBoxProps>`
 `;
 
 interface CommunityIconButtonProps {
-  width: Number;
-  height: Number;
+  width: number;
+  height: number;
 }
 
 const StyledIconButton = styled(IconButton)<CommunityIconButtonProps>`
   .avatar {
     width: 100%;
     height: 100%;
   }
-  margin: 0px;
-  padding: 0rem !important;
+
+  margin: 0;
+  padding: 0 !important;
   border-radius: 5rem;
-  width: ${({ width }) => width + "rem"};
-  height: ${({ height }) => height + "rem"};
+  width: ${({ width }) => width}rem;
+  height: ${({ height }) => height}rem;
 
-  border: 3px solid white;
+  border: 0.1875rem solid white;
 `;
 
 const ClickedWrapper = styled.div`
-  height: 10px;
+  height: 0.625rem;
   list-style-type: none;
-  line-height: 16px;
-  width: 6px;
+  line-height: 1rem;
+  width: 0.375rem;
   background-color: ${({ theme }) => theme.backgroundColor.white};
   border-radius: 0 1rem 1rem 0;
   justify-content: flex-start;
@@ -113,3 +111,5 @@ const ClickedWrapper = styled.div`
   opacity: 1;
   margin-right: 0.5rem;
 `;
+
+export default CommunityLogo;

src/components/atoms/Div/FriendHeaderLeft.tsx

@@ -7,7 +7,9 @@ const FriendHeaderLeft = () => {
   return (
     <FriendHeaderLeftContainer>
       <PersonIcon />
-      <Text text="친구" color="white" fontWeight="bold" />
+      <Text color="white" fontWeight="bold">
+        친구
+      </Text>
       <DividerVertical mv={8} />
     </FriendHeaderLeftContainer>
   );

src/components/atoms/Div/MessageText.tsx

@@ -1,9 +1,10 @@
 import getFormatTime from "@utils/getFormatTime";
-import { forwardRef, useMemo } from "react";
+import { forwardRef, useCallback, useMemo } from "react";
 import styled from "styled-components";
 import { ColorType, FontSizeType } from "@styles/theme";
 import LinkText from "../Text/LinkText";
 import useEnterInvitation from "@hooks/query/useEnterInvitation";
+import validateUrl from "@utils/validateUrl";
 
 interface MessageTextProps {
   text: string;
@@ -14,43 +15,33 @@ interface MessageTextProps {
 const MessageText = forwardRef<HTMLParagraphElement, MessageTextProps>(
   ({ text, hasDate, createdAt }, ref) => {
     const { mutate: enterInvitation } = useEnterInvitation();
-    const hasLink = useMemo(() => {
-      return /(https?:\/\/[^\s]+)/g.test(text);
-    }, [text]);
+    const hasLink = useMemo(() => validateUrl(text), [text]);
     const words = text.split(" ");
     const link = words[0];
     words.splice(0, 1);
     const chat2 = words.join(" ");
 
-    const clickInvitation = () => {
+    const clickInvitation = useCallback(() => {
       enterInvitation();
       window.location.replace(link);
-    };
+    }, []);
 
     return (
       <MessageTextContainer>
         {hasDate && (
           <MessageDate className="msg-date">
-            <Text ref={ref} color="auth-label" fontSize="xs">
+            <Message ref={ref} color="auth-label" fontSize="xs">
               {getFormatTime(createdAt)}
-            </Text>
+            </Message>
           </MessageDate>
         )}
-        <TextContainer>
-          {hasLink ? (
-            <>
-              <LinkText text={link} onClick={clickInvitation} />
-
-              <Text ref={ref} color="msg">
-                {chat2}
-              </Text>
-            </>
-          ) : (
-            <Text ref={ref} color="msg">
-              {text}
-            </Text>
-          )}
-        </TextContainer>
+        <MessageContainer>
+          {hasLink && <LinkText text={link} onClick={clickInvitation} />}(
+          <Message ref={ref} color="msg">
+            {hasLink ? chat2 : text}
+          </Message>
+          )
+        </MessageContainer>
       </MessageTextContainer>
     );
   }
@@ -66,29 +57,29 @@ const MessageTextContainer = styled.div`
 
 const MessageDate = styled.span`
   position: absolute;
-  margin-left: 12px;
+  margin-left: 0.75rem;
   visibility: hidden;
 `;
-const TextContainer = styled.div`
+
+const MessageContainer = styled.div`
   left: 0;
-  padding: 2px 48px 2px 72px;
+  padding: 0.125rem 3rem 0.125rem 4.5rem;
 `;
 
-interface TextProps {
-  text: string | React.ReactElement;
+interface MessageProps {
   fontSize?: FontSizeType;
   color?: ColorType;
   mb?: number;
   mr?: number;
   center?: boolean;
 }
 
-const Text = styled.p<Omit<TextProps, "text">>`
+const Message = styled.p<MessageProps>`
   line-height: 1.5rem;
   color: ${({ theme, color }) => theme.color[color]};
   font-size: ${({ theme, fontSize }) => theme.fontSize[fontSize]};
-  margin-top: 0px;
-  margin-left: 0px;
+  margin-top: 0;
+  margin-left: 0;
 `;
 
 export default MessageText;

src/components/atoms/Div/NobodyActive.tsx

@@ -4,20 +4,12 @@ import Text from "../Text/Text";
 const NobodyActive = () => {
   return (
     <NobodyActiveContainer>
-      <Text
-        text="지금은 조용하네요..."
-        color="white"
-        fontSize="base"
-        center
-        mb={8}
-        fontWeight="bold"
-      />
-      <Text
-        text="친구가 음성 채팅과 같은 활동을 시작하면 여기에 표시돼요!"
-        color="auth-desc"
-        fontSize="sm"
-        center
-      />
+      <Text color="white" fontSize="base" center mb={8} fontWeight="bold">
+        지금은 조용하네요...
+      </Text>
+      <Text color="auth-desc" fontSize="sm" center>
+        친구가 음성 채팅과 같은 활동을 시작하면 여기에 표시돼요!
+      </Text>
     </NobodyActiveContainer>
   );
 };

src/components/atoms/Div/SideBarWrapper.tsx

@@ -17,13 +17,9 @@ const SideBar = ({ children }: SideBarProps) => {
 
   return (
     <SideBarContainer>
-      <Text
-        text="현재 활동 중"
-        fontSize="xl"
-        color="white"
-        fontWeight="bold"
-        mb={16}
-      />
+      <Text fontSize="xl" color="white" fontWeight="bold" mb={16}>
+        현재 활동 중
+      </Text>
       {data ? <>{children}</> : <NobodyActive />}
     </SideBarContainer>
   );