From 1279e1a730ddaa7b8f3ba6263995c4074f67f492 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaeo=20=28=EA=B7=B8=EB=A1=9C=EC=8A=A4=ED=8C=80=20FE=20?= =?UTF-8?q?=EC=9E=AC=EC=98=A4=29?= Date: Sun, 19 Jul 2026 01:15:27 +0900 Subject: [PATCH 1/7] =?UTF-8?q?design:=20=EC=95=88=20=EC=9D=BD=EC=9D=80=20?= =?UTF-8?q?=EC=95=84=ED=8B=B0=ED=81=B4=20=EC=B9=B4=EB=93=9C=202=ED=96=89?= =?UTF-8?q?=20=EB=B0=B0=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TodayUnreadArticlesSection.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/web/src/pages/detail/components/TodayUnreadArticlesSection/TodayUnreadArticlesSection.tsx b/web/src/pages/detail/components/TodayUnreadArticlesSection/TodayUnreadArticlesSection.tsx index 625b408f2..f957ee47c 100644 --- a/web/src/pages/detail/components/TodayUnreadArticlesSection/TodayUnreadArticlesSection.tsx +++ b/web/src/pages/detail/components/TodayUnreadArticlesSection/TodayUnreadArticlesSection.tsx @@ -24,13 +24,17 @@ const TodayUnreadArticlesSection = ({ const unreadArticles = todayArticles?.content?.filter( (article) => !article.isRead && article.articleId !== articleId, ); + const visibleUnreadArticles = unreadArticles?.slice( + 0, + device === 'pc' ? 4 : 2, + ); return ( 오늘 읽지 않은 다른 아티클 {unreadArticles?.length && unreadArticles.length > 0 ? ( - {unreadArticles?.map((article) => ( + {visibleUnreadArticles?.map((article) => ( ))} From f6398181350ef0ac4a62cfd3df8aae11fad2f1a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaeo=20=28=EA=B7=B8=EB=A1=9C=EC=8A=A4=ED=8C=80=20FE=20?= =?UTF-8?q?=EC=9E=AC=EC=98=A4=29?= Date: Sun, 19 Jul 2026 01:17:44 +0900 Subject: [PATCH 2/7] =?UTF-8?q?test:=20=EC=95=88=20=EC=9D=BD=EC=9D=80=20?= =?UTF-8?q?=EC=95=84=ED=8B=B0=ED=81=B4=20=EB=AA=A9=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/mocks/datas/articles.ts | 34 +++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/web/src/mocks/datas/articles.ts b/web/src/mocks/datas/articles.ts index 01466a6d8..0d64ad7e5 100644 --- a/web/src/mocks/datas/articles.ts +++ b/web/src/mocks/datas/articles.ts @@ -67,4 +67,38 @@ export const ARTICLES: Article[] = [ imageUrl: 'https://example.com/newsletter-image.jpg', }, }, + { + articleId: 6, + title: '일하는 방식을 바꾸는 생성형 AI 활용법', + contentsSummary: + '반복 업무를 줄이고 중요한 의사결정에 집중할 수 있는 생성형 AI 활용 사례를 소개합니다.', + arrivedDateTime: '2026.07.19T09:00:00', + thumbnailUrl: + 'https://img.freepik.com/free-vector/artificial-intelligence-concept-illustration_114360-7000.jpg', + expectedReadTime: 6, + isRead: false, + isBookmarked: false, + newsletter: { + category: '커리어', + name: '폴인레터', + imageUrl: 'https://example.com/newsletter-image.jpg', + }, + }, + { + articleId: 7, + title: '이번 주 꼭 알아야 할 경제 이슈 다섯 가지', + contentsSummary: + '한 주의 주요 경제 소식과 일상에 미치는 영향을 쉽고 빠르게 정리해드립니다.', + arrivedDateTime: '2026.07.19T08:00:00', + thumbnailUrl: + 'https://img.freepik.com/free-vector/business-analytics-concept-illustration_114360-878.jpg', + expectedReadTime: 5, + isRead: false, + isBookmarked: false, + newsletter: { + category: '경제', + name: '어피티', + imageUrl: 'https://example.com/newsletter-image.jpg', + }, + }, ]; From 95085d70b2e95edbca7a7f8434f9a3e7eb6e6e7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaeo=20=28=EA=B7=B8=EB=A1=9C=EC=8A=A4=ED=8C=80=20FE=20?= =?UTF-8?q?=EC=9E=AC=EC=98=A4=29?= Date: Sun, 19 Jul 2026 01:19:40 +0900 Subject: [PATCH 3/7] =?UTF-8?q?design:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EC=95=88=20=EC=9D=BD=EC=9D=80=20=EC=95=84=ED=8B=B0=ED=81=B4=20?= =?UTF-8?q?2=ED=96=89=20=EB=B0=B0=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TodayUnreadArticlesSection.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/web/src/pages/detail/components/TodayUnreadArticlesSection/TodayUnreadArticlesSection.tsx b/web/src/pages/detail/components/TodayUnreadArticlesSection/TodayUnreadArticlesSection.tsx index f957ee47c..d24099d04 100644 --- a/web/src/pages/detail/components/TodayUnreadArticlesSection/TodayUnreadArticlesSection.tsx +++ b/web/src/pages/detail/components/TodayUnreadArticlesSection/TodayUnreadArticlesSection.tsx @@ -24,10 +24,8 @@ const TodayUnreadArticlesSection = ({ const unreadArticles = todayArticles?.content?.filter( (article) => !article.isRead && article.articleId !== articleId, ); - const visibleUnreadArticles = unreadArticles?.slice( - 0, - device === 'pc' ? 4 : 2, - ); + const visibleUnreadArticles = + device === 'pc' ? unreadArticles : unreadArticles?.slice(0, 2); return ( From dfc3af7f4b5f87bfe5e3c0d4ecd7f19b751f70c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaeo=20=28=EA=B7=B8=EB=A1=9C=EC=8A=A4=ED=8C=80=20FE=20?= =?UTF-8?q?=EC=9E=AC=EC=98=A4=29?= Date: Sun, 19 Jul 2026 01:21:00 +0900 Subject: [PATCH 4/7] =?UTF-8?q?design:=20=EC=95=88=20=EC=9D=BD=EC=9D=80=20?= =?UTF-8?q?=EC=95=84=ED=8B=B0=ED=81=B4=20=EB=AA=A8=EB=B0=94=EC=9D=BC=202?= =?UTF-8?q?=EC=97=B4=20=EB=B0=B0=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TodayUnreadArticlesSection.tsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/web/src/pages/detail/components/TodayUnreadArticlesSection/TodayUnreadArticlesSection.tsx b/web/src/pages/detail/components/TodayUnreadArticlesSection/TodayUnreadArticlesSection.tsx index d24099d04..cf351b83d 100644 --- a/web/src/pages/detail/components/TodayUnreadArticlesSection/TodayUnreadArticlesSection.tsx +++ b/web/src/pages/detail/components/TodayUnreadArticlesSection/TodayUnreadArticlesSection.tsx @@ -4,9 +4,7 @@ import { useMemo } from 'react'; import EmptyUnreadCard from '../EmptyUnreadCard/EmptyUnreadCard'; import NewsletterItemCard from '../NewsletterItemCard/NewsletterItemCard'; import { queries } from '@/apis/queries'; -import { useDevice } from '@/hooks/useDevice'; import { formatDate } from '@/utils/date'; -import type { Device } from '@/hooks/useDevice'; interface TodayUnreadArticlesSectionProps { articleId: number; @@ -19,20 +17,17 @@ const TodayUnreadArticlesSection = ({ const { data: todayArticles } = useQuery( queries.articles({ date: formatDate(today, '-') }), ); - const device = useDevice(); const unreadArticles = todayArticles?.content?.filter( (article) => !article.isRead && article.articleId !== articleId, ); - const visibleUnreadArticles = - device === 'pc' ? unreadArticles : unreadArticles?.slice(0, 2); return ( 오늘 읽지 않은 다른 아티클 {unreadArticles?.length && unreadArticles.length > 0 ? ( - - {visibleUnreadArticles?.map((article) => ( + + {unreadArticles.map((article) => ( ))} @@ -60,11 +55,10 @@ const TodayArticleTitle = styled.h3` font: ${({ theme }) => theme.fonts.t7Bold}; `; -const TodayArticleList = styled.div<{ device: Device }>` +const TodayArticleList = styled.div` display: grid; gap: 20px; justify-items: center; - grid-template-columns: ${({ device }) => - `repeat(${device === 'pc' ? 2 : 1}, 1fr)`}; + grid-template-columns: repeat(2, 1fr); `; From 41be3231de4f71e8b84b108a1fe3c4660e1d3163 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaeo=20=28=EA=B7=B8=EB=A1=9C=EC=8A=A4=ED=8C=80=20FE=20?= =?UTF-8?q?=EC=9E=AC=EC=98=A4=29?= Date: Sun, 19 Jul 2026 01:24:13 +0900 Subject: [PATCH 5/7] =?UTF-8?q?design:=20=EC=95=88=20=EC=9D=BD=EC=9D=80=20?= =?UTF-8?q?=EC=95=84=ED=8B=B0=ED=81=B4=20=EC=B9=B4=EB=93=9C=20=EB=B9=84?= =?UTF-8?q?=EC=9C=A8=20=EB=B0=8F=20=EC=A0=9C=EB=AA=A9=20=ED=81=AC=EA=B8=B0?= =?UTF-8?q?=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/NewsletterItemCard/NewsletterItemCard.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/web/src/pages/detail/components/NewsletterItemCard/NewsletterItemCard.tsx b/web/src/pages/detail/components/NewsletterItemCard/NewsletterItemCard.tsx index 05390c44b..7e40d1e81 100644 --- a/web/src/pages/detail/components/NewsletterItemCard/NewsletterItemCard.tsx +++ b/web/src/pages/detail/components/NewsletterItemCard/NewsletterItemCard.tsx @@ -24,7 +24,6 @@ export default function NewsletterItemCard({ data }: NewsletterItemCardProps) { @@ -68,6 +67,8 @@ const Container = styled(Link)` const NewsletterImage = styled(ImageWithFallback)` width: 100%; + aspect-ratio: 16 / 9; + object-fit: cover; object-position: center; `; @@ -92,7 +93,7 @@ const Title = styled.h3` display: -webkit-box; color: ${({ theme }) => theme.colors.textPrimary}; - font: ${({ theme }) => theme.fonts.t7Bold}; + font: ${({ theme }) => theme.fonts.t6Bold}; -webkit-box-orient: vertical; -webkit-line-clamp: 2; From fbce9bfa7c1e88a2b9de3c4ea2ead5c51c59667a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaeo=20=28=EA=B7=B8=EB=A1=9C=EC=8A=A4=ED=8C=80=20FE=20?= =?UTF-8?q?=EC=9E=AC=EC=98=A4=29?= Date: Sun, 19 Jul 2026 01:31:18 +0900 Subject: [PATCH 6/7] =?UTF-8?q?design:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EC=95=84=ED=8B=B0=ED=81=B4=20=EC=B9=B4=EB=93=9C=20=EC=B9=B4?= =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EB=B0=B0=EC=B9=98=20=EC=A1=B0?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../NewsletterItemCard/NewsletterItemCard.tsx | 46 ++++++++++++++++--- 1 file changed, 40 insertions(+), 6 deletions(-) diff --git a/web/src/pages/detail/components/NewsletterItemCard/NewsletterItemCard.tsx b/web/src/pages/detail/components/NewsletterItemCard/NewsletterItemCard.tsx index 7e40d1e81..221a659d7 100644 --- a/web/src/pages/detail/components/NewsletterItemCard/NewsletterItemCard.tsx +++ b/web/src/pages/detail/components/NewsletterItemCard/NewsletterItemCard.tsx @@ -2,6 +2,7 @@ import styled from '@emotion/styled'; import { Link } from '@tanstack/react-router'; import Badge from '@/components/Badge/Badge'; import ImageWithFallback from '@/components/ImageWithFallback/ImageWithFallback'; +import { useDevice } from '@/hooks/useDevice'; import type { components } from '@/types/openapi'; import ClockIcon from '#/assets/svg/clock.svg'; @@ -10,6 +11,7 @@ interface NewsletterItemCardProps { } export default function NewsletterItemCard({ data }: NewsletterItemCardProps) { + const device = useDevice(); const { articleId, title, @@ -21,10 +23,17 @@ export default function NewsletterItemCard({ data }: NewsletterItemCardProps) { return ( - + + + {device === 'mobile' && ( + + + + )} + @@ -33,9 +42,9 @@ export default function NewsletterItemCard({ data }: NewsletterItemCardProps) { - + {device === 'pc' && } - from {newsletter?.name ?? ''} + from {newsletter?.name ?? ''} {`${expectedReadTime}분`} @@ -64,6 +73,10 @@ const Container = styled(Link)` transition: all 0.2s ease; `; +const ImageWrapper = styled.div` + position: relative; +`; + const NewsletterImage = styled(ImageWithFallback)` width: 100%; @@ -73,6 +86,12 @@ const NewsletterImage = styled(ImageWithFallback)` object-position: center; `; +const CategoryBadgeBox = styled.div` + position: absolute; + top: 8px; + left: 8px; +`; + const ContentWrapper = styled.div` padding: 20px; @@ -114,20 +133,35 @@ const Description = styled.p` `; const MetaContent = styled.div` + min-width: 0; + display: flex; gap: 8px; align-items: center; `; const MetaInfo = styled.div` + min-width: 0; + display: flex; gap: 8px; align-items: center; `; +const NewsletterName = styled.span` + overflow: hidden; + + color: ${({ theme }) => theme.colors.textTertiary}; + font: ${({ theme }) => theme.fonts.t3Regular}; + white-space: nowrap; + + text-overflow: ellipsis; +`; + const SourceText = styled.span` color: ${({ theme }) => theme.colors.textTertiary}; font: ${({ theme }) => theme.fonts.t3Regular}; + white-space: nowrap; `; const ReadTimeBox = styled.div` From 001d9d8014408417ccc2327b8adf76ef02e7a324 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaeo=20=28=EA=B7=B8=EB=A1=9C=EC=8A=A4=ED=8C=80=20FE=20?= =?UTF-8?q?=EC=9E=AC=EC=98=A4=29?= Date: Sun, 19 Jul 2026 01:36:20 +0900 Subject: [PATCH 7/7] =?UTF-8?q?fix:=20=EB=B9=84=EB=AA=A8=EB=B0=94=EC=9D=BC?= =?UTF-8?q?=20=EC=B9=B4=EB=93=9C=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20?= =?UTF-8?q?=EB=85=B8=EC=B6=9C=20=EC=A1=B0=EA=B1=B4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../detail/components/NewsletterItemCard/NewsletterItemCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/pages/detail/components/NewsletterItemCard/NewsletterItemCard.tsx b/web/src/pages/detail/components/NewsletterItemCard/NewsletterItemCard.tsx index 221a659d7..3062cfb35 100644 --- a/web/src/pages/detail/components/NewsletterItemCard/NewsletterItemCard.tsx +++ b/web/src/pages/detail/components/NewsletterItemCard/NewsletterItemCard.tsx @@ -42,7 +42,7 @@ export default function NewsletterItemCard({ data }: NewsletterItemCardProps) { - {device === 'pc' && } + {device !== 'mobile' && } from {newsletter?.name ?? ''}