Merge pull request #162 from ZeroCho/intersection-observer

Update: next11 && image fallback

Author: ZeroCho

intersection/front/components/AppLayout.js

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { Menu, Input, Row, Col } from 'antd';
 import styled from 'styled-components';
 import { useSelector } from 'react-redux';
-import Router from 'next/router';
+import Router, { useRouter } from 'next/router';
 
 import UserProfile from './UserProfile';
 import LoginForm from './LoginForm';
@@ -16,6 +16,7 @@ const SearchInput = styled(Input.Search)`
 
 const AppLayout = ({ children }) => {
   const [searchInput, onChangeSearchInput] = useInput('');
+  const router = useRouter();
   const { me } = useSelector((state) => state.user);
 
   const onSearch = useCallback(() => {
@@ -24,14 +25,14 @@ const AppLayout = ({ children }) => {
 
   return (
     <div>
-      <Menu mode="horizontal">
-        <Menu.Item>
+      <Menu mode="horizontal" selectedKeys={[router.pathname]}>
+        <Menu.Item key="/">
           <Link href="/"><a>노드버드</a></Link>
         </Menu.Item>
-        <Menu.Item>
+        <Menu.Item key="/profile">
           <Link href="/profile"><a>프로필</a></Link>
         </Menu.Item>
-        <Menu.Item>
+        <Menu.Item key="/search">
           <SearchInput
             enterButton
             value={searchInput}

intersection/front/components/PostImages.js

@@ -1,43 +1,78 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { PlusOutlined } from '@ant-design/icons';
 
 import ImagesZoom from './ImagesZoom';
 
+function isImageValid(src) {
+  return new Promise((resolve) => {
+    const img = document.createElement('img');
+    img.onerror = () => resolve(false);
+    img.onload = () => resolve(true);
+    img.src = src;
+  });
+}
 const PostImages = ({ images }) => {
   const [showImagesZoom, setShowImagesZoom] = useState(false);
+  const imgEl = useRef();
+
+  useEffect(
+    () => {
+      isImageValid(images[0].src).then((isValid) => {
+        if (!isValid) {
+          imgEl.current.remove();
+        }
+      });
+    },
+    [images[0].src],
+  );
 
   const onZoom = useCallback(() => {
     setShowImagesZoom(true);
   }, []);
   const onClose = useCallback(() => {
     setShowImagesZoom(false);
   }, []);
+
   const onError = useCallback((e) => {
-    e.target.src = e.target.src.replace('/thumb/', '/original/');
+    console.dir(e.target);
+    e.target.previousSibling.remove();
+    // e.target.src = e.target.currentSrc.replace('/thumb/', '/original/');
   }, []);
 
   if (images.length === 1) {
     return (
       <>
-        <img role="presentation" src={`${images[0].src}`} alt={images[0].src} onClick={onZoom} onError={onError} />
+        <picture>
+          <source ref={imgEl} srcSet={`${images[0].src}`} />
+          <img role="presentation" onClick={onZoom} src={`${images[0].src.replace('/thumb/', '/original/')}`} alt={images[0].src} style={{ maxWidth: '100%', display: 'inline-block' }} />
+        </picture>
         {showImagesZoom && <ImagesZoom images={images} onClose={onClose} />}
       </>
     );
   }
   if (images.length === 2) {
     return (
       <>
-        <img role="presentation" style={{ width: '50%', display: 'inline-block' }} src={`${images[0].src}`} alt={images[0].src} onClick={onZoom} onError={onError} />
-        <img role="presentation" style={{ width: '50%', display: 'inline-block' }} src={`${images[1].src}`} alt={images[1].src} onClick={onZoom} onError={onError} />
+        <picture style={{ width: '50%', display: 'inline-block' }}>
+          <source ref={imgEl} srcSet={`${images[0].src}`} />
+          <img role="presentation" onClick={onZoom} src={`${images[0].src.replace('/thumb/', '/original/')}`} alt={images[0].src} style={{ maxWidth: '100%', display: 'inline-block' }} />
+        </picture>
+        <picture style={{ width: '50%', display: 'inline-block' }}>
+          <source ref={imgEl} srcSet={`${images[1].src}`} />
+          <img role="presentation" onClick={onZoom} src={`${images[1].src.replace('/thumb/', '/original/')}`} alt={images[0].src} style={{ maxWidth: '100%', display: 'inline-block' }} />
+        </picture>
         {showImagesZoom && <ImagesZoom images={images} onClose={onClose} />}
       </>
     );
   }
   return (
     <>
       <div>
-        <img role="presentation" style={{ width: '50%' }} src={`${images[0].src}`} alt={images[0].src} onClick={onZoom} onError={onError} />
+        <picture style={{ width: '50%' }} onError={onError}>
+          <source ref={imgEl} srcSet={`${images[0].src}`} />
+          <img role="presentation" onClick={onZoom} src={`${images[0].src.replace('/thumb/', '/original/')}`} alt={images[0].src} style={{ maxWidth: '50%' }} />
+        </picture>
         <div
           role="presentation"
           style={{ display: 'inline-block', width: '50%', textAlign: 'center', verticalAlign: 'middle' }}
@@ -55,7 +90,7 @@ const PostImages = ({ images }) => {
 };
 
 PostImages.propTypes = {
-  images: PropTypes.arrayOf(PropTypes.object),
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
 };
 
 export default PostImages;

intersection/front/next.config.js

@@ -9,7 +9,7 @@ module.exports = withBundleAnalyzer({
     return {
       ...config,
       mode: prod ? 'production' : 'development',
-      devtool: prod ? 'hidden-source-map' : 'eval',
+      devtool: prod ? 'hidden-source-map' : 'eval-source-map',
       plugins: [
         ...config.plugins,
         new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /^\.\/ko$/),