Merge pull request #172 from boostcamp-2020/dev

rnjshippo · web-flow · commit 2bf6a2bd4b41 · 2020-12-24T18:08:44.000+09:00
최적화 적용 및 배포
diff --git a/client/src/components/ThreadListBox/ThreadListHeader/ChannelModal/ShowUsersModal/ShowUsersModalBody/ShowUsersModalBody.tsx b/client/src/components/ThreadListBox/ThreadListHeader/ChannelModal/ShowUsersModal/ShowUsersModalBody/ShowUsersModalBody.tsx
@@ -5,6 +5,7 @@ import { useChannelState } from '@/hooks';
 import { JoinedUser } from '@/types';
 import { CancelButton as CB } from '@/styles/shared';
 import { USER_DEFAULT_PROFILE_URL } from '@/utils/constants';
+import { LazyImage } from '@/components/common';
 
 const Container = styled.div`
   padding: 0 4px;
@@ -23,7 +24,7 @@ const Remove = styled(CB)`
 const SearchedUserContainer = styled.div`
   width: 100%;
   height: 15rem;
-  overflow-y: scroll;
+  overflow-y: auto;
   padding: 0 24px;
 `;
 
@@ -40,13 +41,6 @@ const SearchedUserBox = styled.div`
   }
 `;
 
-const ProfileImg = styled.img`
-  width: 2.25rem;
-  height: 2.25rem;
-  object-fit: cover;
-  border-radius: 5px;
-`;
-
 const UserName = styled.div`
   font-size: 1rem;
   margin: 0 0.7rem;
@@ -65,11 +59,12 @@ const ShowUsersModalBody: React.FC = () => {
       <SearchedUserContainer>
         {users?.map((user: JoinedUser) => (
           <SearchedUserBox key={user.userId}>
-            <ProfileImg
+            <LazyImage
+              width="36"
+              height="36"
               src={user.image}
-              onError={(e: React.SyntheticEvent<HTMLImageElement, Event>) => {
-                e.currentTarget.src = USER_DEFAULT_PROFILE_URL;
-              }}
+              style={{ objectFit: 'cover', borderRadius: '5px' }}
+              errorImage={USER_DEFAULT_PROFILE_URL}
             />
             <UserName>{user.displayName}</UserName>
           </SearchedUserBox>
diff --git a/client/src/components/ThreadListBox/ThreadListHeader/ThreadListHeader.tsx b/client/src/components/ThreadListBox/ThreadListHeader/ThreadListHeader.tsx
@@ -145,6 +145,7 @@ const ThreadListHeader = () => {
           body={<ShowUsersModalBody />}
           visible={showUsersModalVisible}
           setVisible={clickShowUsersModal}
+          bodyScroll={false}
         />
       )}
       <Container>
diff --git a/client/src/components/common/DimModal/DimModal.tsx b/client/src/components/common/DimModal/DimModal.tsx
@@ -53,10 +53,18 @@ const Title = styled.div`
   flex: 1;
 `;
 
-const Body = styled.div`
+interface BodyProps {
+  bodyScroll: boolean;
+}
+
+const Body = styled.div<BodyProps>`
   width: 100%;
   border-radius: 0 0 5px 5px;
-  overflow: auto;
+  ${(props) =>
+    props.bodyScroll &&
+    css`
+      overflow: auto;
+    `}
 `;
 
 const CloseIcon = styled.div`
@@ -70,6 +78,7 @@ interface DimModalProps {
   visible: boolean;
   setVisible: (a: any) => any;
   width?: string;
+  bodyScroll?: boolean;
 }
 
 const DimModal: React.FC<PropsWithChildren<DimModalProps>> = ({
@@ -78,6 +87,7 @@ const DimModal: React.FC<PropsWithChildren<DimModalProps>> = ({
   visible,
   setVisible,
   width,
+  bodyScroll = true,
 }: PropsWithChildren<DimModalProps>) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -101,7 +111,7 @@ const DimModal: React.FC<PropsWithChildren<DimModalProps>> = ({
             <ModalCloseBox handleClose={handleClose} />
           </CloseIcon>
         </Header>
-        <Body>{body}</Body>
+        <Body bodyScroll={bodyScroll}>{body}</Body>
       </Container>
     </DimLayer>
   );
diff --git a/client/src/components/common/LazyImage/LazyImage.tsx b/client/src/components/common/LazyImage/LazyImage.tsx
@@ -0,0 +1,59 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+
+interface Props {
+  src: string;
+  width: string;
+  height: string;
+  style?: any;
+  errorImage?: string;
+}
+
+const Img = styled.img`
+  object-fit: cover;
+  border-radius: 5px;
+`;
+
+const LazyImage: React.FC<Props> = ({ src, width, height, style, errorImage }: Props) => {
+  const imgRef = useRef<HTMLImageElement>(null);
+  const [isLoad, setIsLoad] = useState(false);
+
+  function onIntersection(entries: IntersectionObserverEntry[], io: IntersectionObserver) {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        io.unobserve(entry.target);
+        setIsLoad(true);
+      }
+    });
+  }
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(onIntersection, {
+      threshold: 0,
+    });
+
+    if (imgRef.current) {
+      observer.observe(imgRef.current);
+    }
+  }, [imgRef]);
+
+  return (
+    <Img
+      ref={imgRef}
+      src={isLoad ? src : `https://via.placeholder.com/${width}x${height}`}
+      width={width}
+      height={height}
+      style={style}
+      onError={(e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+        e.currentTarget.src = errorImage ?? `https://via.placeholder.com/${width}x${height}`;
+      }}
+    />
+  );
+};
+
+LazyImage.defaultProps = {
+  style: {},
+  errorImage: undefined,
+};
+
+export default LazyImage;
diff --git a/client/src/components/common/ThreadItem/EmojiBox/EmojiBoxItem/EmojiBoxItem.tsx b/client/src/components/common/ThreadItem/EmojiBox/EmojiBoxItem/EmojiBoxItem.tsx
@@ -6,6 +6,7 @@ import { useChannelState, useEmojiState, useUserState } from '@/hooks';
 import { useDispatch } from 'react-redux';
 import { SOCKET_MESSAGE_TYPE } from '@/utils/constants';
 import { sendMessageRequest } from '@/store/modules/socket.slice';
+import LazyImage from '@/components/common/LazyImage/LazyImage';
 import TooltipPopup from './TooltipPopup/TooltipPopup';
 
 interface ContainerProps {
@@ -107,10 +108,12 @@ const EmojiBoxItem: React.FC<EmojiBoxItemProps> = ({ emoji, thread }: EmojiBoxIt
     return `${getEmojiName(emojiId)}`;
   };
 
-  const getEmojiUrl = (emojiId: number) => {
-    return emojiList?.find((emojiEl) => {
-      return emojiEl.id === emojiId;
-    })?.url;
+  const getEmojiUrl = (emojiId: number): string => {
+    return (
+      emojiList?.find((emojiEl) => {
+        return emojiEl.id === emojiId;
+      })?.url ?? 'https://via.placeholder.com/40'
+    );
   };
 
   const clickEmojiHandler = () => {
@@ -142,7 +145,17 @@ const EmojiBoxItem: React.FC<EmojiBoxItemProps> = ({ emoji, thread }: EmojiBoxIt
       {ref.current && tooltipVisible && (
         <TooltipPopup anchorEl={ref.current} top={-10} left={-30}>
           <EmojiToolTip>
-            <TooltipImg src={getEmojiUrl(emoji.id)} />
+            <LazyImage
+              src={getEmojiUrl(emoji.id)}
+              width="36"
+              height="36"
+              style={{
+                marginBottom: '0.4rem',
+                backgroundColor: 'white',
+                borderRadius: '8px',
+                padding: '4px',
+              }}
+            />
             <ToolTipDescribe>
               {getUserListNameInEmoji(emoji)}
               {`reacted with :${getToolTipDescribe(emoji.id)}:`}
@@ -151,7 +164,7 @@ const EmojiBoxItem: React.FC<EmojiBoxItemProps> = ({ emoji, thread }: EmojiBoxIt
         </TooltipPopup>
       )}
       <EmojiItem>
-        <img src={getEmojiUrl(emoji.id)} alt="emoji url" width="16px" height="16px" />
+        <LazyImage src={getEmojiUrl(emoji.id)} width="16px" height="16px" />
         {emoji.userList && <EmojiCount>{emoji.userList.length}</EmojiCount>}
       </EmojiItem>
     </Container>
diff --git a/client/src/components/common/ThreadItem/ThreadItem.tsx b/client/src/components/common/ThreadItem/ThreadItem.tsx
@@ -3,10 +3,10 @@ import styled, { css } from 'styled-components';
 import { Thread } from '@/types';
 import { flex, hoverUnderline } from '@/styles/mixin';
 import { USER_DEFAULT_PROFILE_URL } from '@/utils/constants';
+import { TrashIcon, LazyImage } from '@/components';
 import ReplyButton from './ReplyButton/ReplyButton';
 import ThreadPopup from './ThreadPopup/ThreadPopup';
 import EmojiBox from './EmojiBox/EmojiBox';
-import { TrashIcon } from '../Icon';
 
 const Container = styled.div`
   position: relative;
@@ -184,11 +184,11 @@ const ThreadItem: React.FC<ThreadItemProps> = ({
             </DeletedItemImgBox>
           ) : (
             <UserImgBox>
-              <UserImg
+              <LazyImage
                 src={thread.image}
-                onError={(e: React.SyntheticEvent<HTMLImageElement, Event>) => {
-                  e.currentTarget.src = USER_DEFAULT_PROFILE_URL;
-                }}
+                width="36"
+                height="36"
+                errorImage={USER_DEFAULT_PROFILE_URL}
               />
             </UserImgBox>
           )}
diff --git a/client/src/components/common/index.ts b/client/src/components/common/index.ts
@@ -10,3 +10,4 @@ export { default as Popover } from './Popover/Popover';
 export { default as CloseIconBox } from './CloseIconBox/CloseIconBox';
 export * from './AddUsersModal';
 export { default as LogoBox } from './LogoBox/LogoBox';
+export { default as LazyImage } from './LazyImage/LazyImage';
diff --git a/client/webpack.config.js b/client/webpack.config.js
@@ -2,7 +2,6 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const Dotenv = require('dotenv-webpack');
-const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = {
   devtool: 'source-map',
@@ -99,16 +98,6 @@ module.exports = {
     runtimeChunk: {
       name: (entrypoint) => `runtime-${entrypoint.name}`,
     },
-    minimize: true,
-    minimizer: [
-      new TerserPlugin({
-        terserOptions: {
-          compress: {
-            drop_console: true,
-          },
-        },
-      }),
-    ],
   },
   devServer: {
     contentBase: path.join(__dirname, './dist'),
