feat(article): add description input

woowacourse · May 29, 2024 · 5ba4ecc · 5ba4ecc
1 parent 13414ed
commit 5ba4ecc
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 3 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
@@ -17,6 +17,7 @@ public class OgTagParser {
 
     public enum OgType {
         TITLE("title"),
+        DESCRIPTION("description"),
         IMAGE("image");
 
         private static final String FORMAT = "meta[property=og:%s]";

diff --git a/backend/src/main/java/wooteco/prolog/article/application/dto/ArticleRequest.java b/backend/src/main/java/wooteco/prolog/article/application/dto/ArticleRequest.java
@@ -3,6 +3,7 @@
 import lombok.AllArgsConstructor;
 import lombok.Getter;
 import wooteco.prolog.article.domain.Article;
+import wooteco.prolog.article.domain.Description;
 import wooteco.prolog.article.domain.ImageUrl;
 import wooteco.prolog.article.domain.Title;
 import wooteco.prolog.article.domain.Url;
@@ -15,8 +16,9 @@ public class ArticleRequest {
     private final String title;
     private final String url;
     private final String imageUrl;
+    private final String description;
 
     public Article toArticle(final Member member) {
-        return new Article(member, new Title(title), new Url(url), new ImageUrl(imageUrl));
+        return new Article(member, new Title(title), new Description(description), new Url(url), new ImageUrl(imageUrl));
     }
 }
diff --git a/backend/src/main/java/wooteco/prolog/article/application/dto/ArticleUrlResponse.java b/backend/src/main/java/wooteco/prolog/article/application/dto/ArticleUrlResponse.java
@@ -10,12 +10,14 @@
 @AllArgsConstructor
 public class ArticleUrlResponse {
     private final String title;
+    private final String description;
     private final String imageUrl;
 
     public static ArticleUrlResponse from(final Map<OgType, String> parsedTags) {
         final String title = parsedTags.get(OgType.TITLE);
+        final String description = parsedTags.get(OgType.DESCRIPTION);
         final String image = parsedTags.get(OgType.IMAGE);
-        return new ArticleUrlResponse(title, image);
+        return new ArticleUrlResponse(title, description, image);
     }
 }
 

diff --git a/frontend/src/models/Article.ts b/frontend/src/models/Article.ts
@@ -1,5 +1,6 @@
 export interface ArticleRequest {
   title: string;
+  description: string;
   url: string;
   imageUrl: string;
 }
@@ -22,6 +23,7 @@ export interface MetaOgRequest {
 export interface MetaOgResponse {
   imageUrl: string;
   title: string;
+  description: string;
 }
 
 export interface ArticleBookmarkPutRequest {

diff --git a/frontend/src/pages/NewArticlePage/index.tsx b/frontend/src/pages/NewArticlePage/index.tsx
@@ -24,6 +24,7 @@ const NewArticlePage = () => {
 
   const [articleContent, setArticleContent] = useState<ArticleRequest>({
     title: '',
+    description: '',
     url: '',
     imageUrl: '',
   });
@@ -38,6 +39,10 @@ const NewArticlePage = () => {
     setArticleContent({ ...articleContent, title: e.target.value });
   };
 
+  const onArticleDescriptionChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setArticleContent({ ...articleContent, description: e.target.value });
+  };
+
   const onArticleThumbnailChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
     setArticleContent({ ...articleContent, imageUrl: e.target.value });
   };
@@ -70,6 +75,7 @@ const NewArticlePage = () => {
         ...articleContent,
         title: response.data.title,
         imageUrl: response.data.imageUrl,
+        description: response.data.description
       });
       setIsValidate(true);
     } else if (response.data.title !== '' && response.data.imageUrl === '') {
@@ -78,13 +84,15 @@ const NewArticlePage = () => {
         title: response.data.title,
         imageUrl:
           'https://user-images.githubusercontent.com/59258239/133797281-819ab585-4da3-4703-9d22-4453d30f9d1f.png',
+        description: response.data.description
       });
       setIsValidate(false);
     } else if (response.data.title === '' && response.data.imageUrl !== '') {
       setArticleContent({
         ...articleContent,
         title: '제목을 적어주세요.',
         imageUrl: response.data.imageUrl,
+        description: response.data.description
       });
       setIsValidate(true);
     } else {
@@ -93,6 +101,7 @@ const NewArticlePage = () => {
         title: '제목을 적어주세요.',
         imageUrl:
           'https://user-images.githubusercontent.com/59258239/133797281-819ab585-4da3-4703-9d22-4453d30f9d1f.png',
+        description: response.data.description
       });
       setIsValidate(false);
     }
@@ -131,6 +140,12 @@ const NewArticlePage = () => {
               placeholder="제목"
               onChange={onArticleTitleChanged}
             />
+            <Label>설명</Label>
+            <Input
+              value={articleContent.description}
+              placeholder="설명"
+              onChange={onArticleDescriptionChanged}
+            />
           </InputContainer>
           <InputContainer>
             <Label>썸네일</Label>

diff --git a/frontend/src/pages/NewArticlePage/styles.ts b/frontend/src/pages/NewArticlePage/styles.ts
@@ -66,7 +66,7 @@ const SubmitButtonStyle = css`
 
 const ThumbnailContainer = styled.div`
   text-align: center;
-  
+
   margin-bottom: 24px;
 `;