Merge pull request #1499 from woowacourse/article-develop

아티클 MetaOG 빈문자열 관련 서버오류 처리 및 클라이언트 기본값 바인딩 기능 오류 수정
woowacourse · Aug 8, 2023 · 3e40e63 · 3e40e63
2 parents f90f84d + e899022
commit 3e40e63
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 35 deletions.
diff --git a/backend/src/main/java/wooteco/prolog/article/application/OgTagParser.java b/backend/src/main/java/wooteco/prolog/article/application/OgTagParser.java
@@ -39,7 +39,7 @@ private static String getContent(final OgType type, final Document document) {
             final Element element = document.selectFirst(String.format(FORMAT, type.metaTag));
             return Optional.ofNullable(element)
                 .map(it -> it.attr("content"))
-                .orElse(null);
+                .orElse("");
         }
     }
 

diff --git a/frontend/src/mocks/handlers/articles.ts b/frontend/src/mocks/handlers/articles.ts
@@ -1,7 +1,7 @@
 import { rest } from 'msw';
 import { BASE_URL } from '../../configs/environment';
 import articles from '../db/articles.json';
-import metaOg from '../db/metaOg.json';
+import metaOg from '../db/metaog.json';
 import { ArticleType } from '../../models/Article';
 
 const articleUrl = 'https://think0wise.tistory.com/107';

diff --git a/frontend/src/pages/NewArticlePage/index.tsx b/frontend/src/pages/NewArticlePage/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { SyntheticEvent, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import Button from '../../components/Button/Button';
 import {
@@ -12,13 +12,14 @@ import {
   ThumbnailContainer,
 } from './styles';
 
-import { useGetMetaOg, usePostArticles } from '../../hooks/Articles/useArticles';
+import { useGetMetaOg } from '../../hooks/Articles/useArticles';
 import { ArticleRequest } from '../../models/Article';
 import { PATH } from '../../constants';
 import { usePostArticlesMutation } from '../../hooks/queries/article';
+import NotFound from '../../assets/images/not-found.png';
 
 const NewArticlePage = () => {
-  const [isValidate, setIsValidate] = useState<boolean>(true);
+  const [isValidate, setIsValidate] = useState<boolean>(false);
   const [isButton, setIsButton] = useState<boolean>(false);
 
   const [articleContent, setArticleContent] = useState<ArticleRequest>({
@@ -37,10 +38,22 @@ const NewArticlePage = () => {
     setArticleContent({ ...articleContent, title: e.target.value });
   };
 
+  const onArticleThumbnailChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setArticleContent({ ...articleContent, imageUrl: e.target.value });
+  };
+
   const onArticleUrlChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
     setArticleContent({ ...articleContent, url: e.target.value });
   };
 
+  const clickEnterInput = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      console.log('sdafsdaf');
+      e.preventDefault();
+      onUrl();
+    }
+  };
+
   const onUrl = async () => {
     const linkValidation = /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
 
@@ -53,28 +66,43 @@ const NewArticlePage = () => {
 
     setIsButton(true);
 
-    if (response) {
+    if (response.data.title !== '' && response.data.imageUrl !== '') {
       setArticleContent({
         ...articleContent,
         title: response.data.title,
         imageUrl: response.data.imageUrl,
       });
+      setIsValidate(true);
+    } else if (response.data.title !== '' && response.data.imageUrl === '') {
+      setArticleContent({
+        ...articleContent,
+        title: response.data.title,
+        imageUrl:
+          'https://user-images.githubusercontent.com/59258239/133797281-819ab585-4da3-4703-9d22-4453d30f9d1f.png',
+      });
       setIsValidate(false);
+    } else if (response.data.title === '' && response.data.imageUrl !== '') {
+      setArticleContent({
+        ...articleContent,
+        title: '제목을 적어주세요.',
+        imageUrl: response.data.imageUrl,
+      });
+      setIsValidate(true);
     } else {
-      const isDefault = window.confirm(
-        '게시글에서 제목과 썸네일을 가져오는데 실패했습니다. 기본값을 사용하시겠습니까?'
-      );
-      if (isDefault) {
-        setArticleContent({
-          ...articleContent,
-          title: '제목을 적어주세요.',
-          imageUrl:
-            'https://user-images.githubusercontent.com/59258239/133797281-819ab585-4da3-4703-9d22-4453d30f9d1f.png',
-        });
-      }
+      setArticleContent({
+        ...articleContent,
+        title: '제목을 적어주세요.',
+        imageUrl:
+          'https://user-images.githubusercontent.com/59258239/133797281-819ab585-4da3-4703-9d22-4453d30f9d1f.png',
+      });
+      setIsValidate(false);
     }
   };
 
+  const addDefaultImg = (e: SyntheticEvent<HTMLImageElement, Event>) => {
+    e.currentTarget.src = NotFound;
+  };
+
   const createArticle = async () => {
     postArticleMutate(articleContent);
     history.push(PATH.ARTICLE);
@@ -89,30 +117,40 @@ const NewArticlePage = () => {
           value={articleContent.url}
           placeholder="링크를 입력해주세요."
           onChange={onArticleUrlChanged}
+          onKeyPress={clickEnterInput}
         />
       </InputContainer>
       <Button type="button" size="XX_SMALL" css={[SubmitButtonStyle]} onClick={onUrl}>
         링크 입력
       </Button>
-      <InputContainer>
-        <Label>제목</Label>
-        <Input value={articleContent.title} placeholder="제목" onChange={onArticleTitleChanged} />
-      </InputContainer>
-      <InputContainer>
-        <Label>썸네일</Label>
-        <Input
-          defaultValue={articleContent.imageUrl}
-          placeholder="이미지 링크"
-          disabled={isValidate ? false : true}
-        />
-        <ThumbnailContainer>
-          {articleContent.imageUrl && <ThumbnailImage src={articleContent.imageUrl} alt="썸네일" />}
-        </ThumbnailContainer>
-      </InputContainer>
       {isButton && (
-        <Button type="button" size="X_SMALL" css={[SubmitButtonStyle]} onClick={createArticle}>
-          작성 완료
-        </Button>
+        <>
+          <InputContainer>
+            <Label>제목</Label>
+            <Input
+              value={articleContent.title}
+              placeholder="제목"
+              onChange={onArticleTitleChanged}
+            />
+          </InputContainer>
+          <InputContainer>
+            <Label>썸네일</Label>
+            <Input
+              defaultValue={articleContent.imageUrl}
+              placeholder="이미지 링크"
+              disabled={isValidate ? true : false}
+              onChange={onArticleThumbnailChanged}
+            />
+            <ThumbnailContainer>
+              {articleContent.imageUrl && (
+                <ThumbnailImage src={articleContent.imageUrl} onError={addDefaultImg} />
+              )}
+            </ThumbnailContainer>
+          </InputContainer>
+          <Button type="button" size="X_SMALL" css={[SubmitButtonStyle]} onClick={createArticle}>
+            작성 완료
+          </Button>
+        </>
       )}
     </ArticlePageContainer>
   );