From 5ba4ecce9f9f9529e220828a392a1c600203480a Mon Sep 17 00:00:00 2001 From: gracefulBrown Date: Wed, 29 May 2024 10:12:16 +0900 Subject: [PATCH] feat(article): add description input --- .../prolog/article/application/OgTagParser.java | 1 + .../article/application/dto/ArticleRequest.java | 4 +++- .../application/dto/ArticleUrlResponse.java | 4 +++- frontend/src/models/Article.ts | 2 ++ frontend/src/pages/NewArticlePage/index.tsx | 15 +++++++++++++++ frontend/src/pages/NewArticlePage/styles.ts | 2 +- 6 files changed, 25 insertions(+), 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 index 3cd217794..f246ca6c9 100644 --- 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 index 9b4dc35a5..4a006c3a0 100644 --- 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 index bd2762d92..31958a98a 100644 --- 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 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 index 2a0a5709b..bfd707023 100644 --- 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 index 7f9892870..a7d2638e8 100644 --- a/frontend/src/pages/NewArticlePage/index.tsx +++ b/frontend/src/pages/NewArticlePage/index.tsx @@ -24,6 +24,7 @@ const NewArticlePage = () => { const [articleContent, setArticleContent] = useState({ title: '', + description: '', url: '', imageUrl: '', }); @@ -38,6 +39,10 @@ const NewArticlePage = () => { setArticleContent({ ...articleContent, title: e.target.value }); }; + const onArticleDescriptionChanged = (e: React.ChangeEvent) => { + setArticleContent({ ...articleContent, description: e.target.value }); + }; + const onArticleThumbnailChanged = (e: React.ChangeEvent) => { 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,6 +84,7 @@ 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 !== '') { @@ -85,6 +92,7 @@ const NewArticlePage = () => { ...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} /> + + diff --git a/frontend/src/pages/NewArticlePage/styles.ts b/frontend/src/pages/NewArticlePage/styles.ts index 69e5f7728..d3533cf15 100644 --- 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; `;