Merge branch 'master' into develop

Author: velopert

src/components/base/HeaderUserIcon.tsx

@@ -4,6 +4,7 @@ import { CurrentUser } from '../../lib/graphql/user';
 import { MdArrowDropDown } from 'react-icons/md';
 import { userThumbnail } from '../../static/images';
 import palette from '../../lib/styles/palette';
+import optimizeImage from '../../lib/optimizeImage';
 
 const HeaderUserIconBlock = styled.div`
   cursor: pointer;
@@ -44,7 +45,10 @@ export interface HeaderUserIconProps {
 const HeaderUserIcon: React.FC<HeaderUserIconProps> = ({ onClick, user }) => {
   return (
     <HeaderUserIconBlock onClick={onClick}>
-      <img src={user.profile.thumbnail || userThumbnail} alt="thumbnail" />
+      <img
+        src={optimizeImage(user.profile.thumbnail || userThumbnail, 120)}
+        alt="thumbnail"
+      />
       <MdArrowDropDown />
     </HeaderUserIconBlock>
   );

src/components/common/PostCard.tsx

@@ -12,6 +12,7 @@ import SkeletonTexts from './SkeletonTexts';
 import RatioImage from './RatioImage';
 import media from '../../lib/styles/media';
 import PrivatePostLabel from './PrivatePostLabel';
+import optimizeImage from '../../lib/optimizeImage';
 
 const PostCardBlock = styled.div`
   padding-top: 4rem;
@@ -149,7 +150,10 @@ const PostCard = ({ post, hideUser }: PostCardProps) => {
         <div className="user-info">
           <Link to={velogUrl}>
             <img
-              src={post.user.profile.thumbnail || userThumbnail}
+              src={optimizeImage(
+                post.user.profile.thumbnail || userThumbnail,
+                120,
+              )}
               alt="thumbnail"
             />
           </Link>
@@ -161,7 +165,7 @@ const PostCard = ({ post, hideUser }: PostCardProps) => {
       {post.thumbnail && (
         <Link to={url}>
           <RatioImage
-            src={post.thumbnail}
+            src={optimizeImage(post.thumbnail, 768)}
             alt="post-thumbnail"
             widthRatio={1.91}
             heightRatio={1}

src/components/common/UserProfile.tsx

@@ -14,6 +14,7 @@ import Skeleton from './Skeleton';
 import SkeletonTexts from './SkeletonTexts';
 import { Link } from 'react-router-dom';
 import media from '../../lib/styles/media';
+import optimizeImage from '../../lib/optimizeImage';
 
 const UserProfileBlock = styled.div`
   ${media.medium} {
@@ -164,7 +165,10 @@ const UserProfile: React.FC<UserProfileProps> = ({
     <UserProfileBlock className={className} style={style}>
       <Section>
         <Link to={velogUrl}>
-          <img src={thumbnail || userThumbnail} alt="profile" />
+          <img
+            src={optimizeImage(thumbnail || userThumbnail, 240)}
+            alt="profile"
+          />
         </Link>
         <UserInfo>
           <div className="name">

src/components/post/PostCommentItem.tsx

@@ -12,6 +12,7 @@ import PostEditComment from '../../containers/post/PostEditComment';
 import media from '../../lib/styles/media';
 import { Link } from 'react-router-dom';
 import MarkdownRender from '../common/MarkdownRender';
+import optimizeImage from '../../lib/optimizeImage';
 
 const PostCommentItemBlock = styled.div`
   padding-top: 1.5rem;
@@ -166,7 +167,10 @@ const PostCommentItem: React.FC<PostCommentItemProps> = ({
         <div className="profile">
           <Link to={velogLink}>
             <img
-              src={(user && user.profile.thumbnail) || userThumbnail}
+              src={optimizeImage(
+                (user && user.profile.thumbnail) || userThumbnail,
+                120,
+              )}
               alt="comment-user-thumbnail"
             />
           </Link>

src/components/post/PostContent.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 import MarkdownRender from '../common/MarkdownRender';
 import PostHtmlContent from './PostHtmlContent';
@@ -24,19 +24,40 @@ export interface PostContentProps {
   body: string;
 }
 
+function optimizeImagesFromPost(markdown: string) {
+  const matches = markdown.match(
+    /(?:!\[(.*?)\]\(https:\/\/images.velog.io\/(.*?)\))/g,
+  );
+  if (!matches) return markdown;
+  const replacers = matches.map(match => [
+    match,
+    match.replace('https://images.', 'https://img.').replace(/\)$/, '?w=1024)'),
+  ]);
+  return replacers.reduce((acc, [original, optimized]) => {
+    return acc.replace(original, optimized);
+  }, markdown);
+}
+
 const PostContent: React.FC<PostContentProps> = ({ isMarkdown, body }) => {
   const [html, setHtml] = useState(isMarkdown ? null : body);
   const dispatch = usePostViewerDispatch();
+  const imageOptimizedPost = useMemo(() => optimizeImagesFromPost(body), [
+    body,
+  ]);
 
   useEffect(() => {
     if (!html) return;
     const toc = parseHeadings(html);
     dispatch({ type: 'SET_TOC', payload: toc });
   }, [dispatch, html]);
+
   return (
     <PostContentBlock>
       {isMarkdown ? (
-        <MarkdownRender markdown={body} onConvertFinish={setHtml} />
+        <MarkdownRender
+          markdown={imageOptimizedPost}
+          onConvertFinish={setHtml}
+        />
       ) : (
         <PostHtmlContent html={body} />
       )}

src/components/post/PostHead.tsx

@@ -12,6 +12,7 @@ import TagList from '../common/TagList';
 import { Link } from 'react-router-dom';
 import { LockIcon } from '../../static/svg';
 import PrivatePostLabel from '../common/PrivatePostLabel';
+import optimizeImage from '../../lib/optimizeImage';
 
 const PostHeadBlock = styled(VelogResponsive)`
   margin-top: 5.5rem;
@@ -194,7 +195,7 @@ const PostHead: React.FC<PostHeadProps> = ({
         )}
       </div>
       {!hideThumbnail && thumbnail && (
-        <Thumbnail src={thumbnail} alt="post-thumbnail" />
+        <Thumbnail src={optimizeImage(thumbnail, 1024)} alt="post-thumbnail" />
       )}
       <PopupOKCancel
         visible={askRemove}

src/components/setting/SettingUserProfile.tsx

@@ -8,6 +8,7 @@ import useToggle from '../../lib/hooks/useToggle';
 import SettingInput from './SettingInput';
 import useInputs from '../../lib/hooks/useInputs';
 import media from '../../lib/styles/media';
+import optimizeImage from '../../lib/optimizeImage';
 
 export type SettingUserProfileProps = {
   onUpload: () => void;
@@ -40,7 +41,10 @@ function SettingUserProfile({
   return (
     <Section>
       <div className="thumbnail-area">
-        <img src={thumbnail || userThumbnail} alt="profile" />
+        <img
+          src={optimizeImage(thumbnail || userThumbnail, 400)}
+          alt="profile"
+        />
         <Button onClick={onUpload}>이미지 업로드</Button>
         <Button color="transparent" onClick={onClearThumbnail}>
           이미지 제거

src/components/velog/SeriesItem.tsx

@@ -9,6 +9,7 @@ import PlainLink from '../common/PlainLink';
 import Skeleton from '../common/Skeleton';
 import SkeletonTexts from '../common/SkeletonTexts';
 import media from '../../lib/styles/media';
+import optimizeImage from '../../lib/optimizeImage';
 
 const StyledLink = styled(PlainLink)`
   display: block;
@@ -84,7 +85,7 @@ const SeriesItem: React.FC<SeriesItemProps> = ({
     <SeriesItemBlock>
       <StyledLink to={url}>
         <RatioImage
-          src={thumbnail || seriesThumbnail}
+          src={optimizeImage(thumbnail || seriesThumbnail, 768)}
           widthRatio={1.9}
           heightRatio={1}
         />

src/components/velog/SeriesPostItem.tsx

@@ -7,6 +7,7 @@ import PostLink from '../common/PostLink';
 import SkeletonTexts from '../common/SkeletonTexts';
 import Skeleton from '../common/Skeleton';
 import media from '../../lib/styles/media';
+import optimizeImage from '../../lib/optimizeImage';
 
 const SeriesPostItemBlock = styled.div<{ edit?: boolean }>`
   /* font-family: 'Spoqa Han Sans', -apple-system, BlinkMacSystemFont,
@@ -142,11 +143,14 @@ const SeriesPostItem: React.FC<SeriesPostItemProps> = ({
       </h2>
       <section>
         {edit ? (
-          <img src={thumbnail || emptyThumbnail} alt="post-thumbnail" />
+          <img
+            src={optimizeImage(thumbnail || emptyThumbnail, 768)}
+            alt="post-thumbnail"
+          />
         ) : (
           <PostLink username={username} urlSlug={urlSlug}>
             <img
-              src={thumbnail || emptyThumbnail}
+              src={optimizeImage(thumbnail || emptyThumbnail, 768)}
               alt="post-thumbnail"
               className={thumbnail ? '' : 'empty-thumbnail'}
             />

src/containers/main/TrendingPosts.tsx

@@ -42,8 +42,6 @@ const TrendingPosts: React.FC<TrendingPostsProps> = props => {
             post => !idMap[post.id],
           );
 
-          console.log(uniquePosts);
-
           return {
             trendingPosts: [...prev.trendingPosts, ...uniquePosts],
           };

src/lib/optimizeImage.ts

@@ -0,0 +1,4 @@
+export default function optimizeImage(url: string, width: number) {
+  if (!url.includes('https://images.velog.io')) return url;
+  return url.replace('://images', '://img').concat(`?w=${width}`);
+}