[SP2] 블로그 탭 게시물 목록 구현

src/lib/types/blog.ts

@@ -0,0 +1,29 @@
+export type BlogPostListType = {
+  limit: number;
+  totalCount: number;
+  totalPage: number;
+  currentPage: number;
+  data: BlogPostType[];
+  hasNextPage: boolean;
+  hasPrevPage: boolean;
+};
+
+export type BlogPostType = {
+  id: number;
+  part: string;
+  generation: number;
+  thumbnailUrl: string;
+  title: string;
+  description: string;
+  author: string;
+  authorProfileImageUrl: string | null;
+  url: string;
+  uploadedAt: string;
+
+  /* article */
+  likeCount?: number;
+  liked?: boolean;
+
+  /* review */
+  subject?: string;
+};

src/views/BlogPage/components/BlogPost/DefaultProfileImage/index.tsx

@@ -0,0 +1,13 @@
+import Image from 'next/image';
+import icProfileDefault from '@src/assets/icons/ic_profile_default.svg';
+import * as S from './style';
+
+function DefaultProfileImage() {
+  return (
+    <S.DefaultProfileImage>
+      <Image src={icProfileDefault} alt="작성자 프로필 이미지" width={10} height={10} />
+    </S.DefaultProfileImage>
+  );
+}
+
+export default DefaultProfileImage;

src/views/BlogPage/components/BlogPost/DefaultProfileImage/style.ts

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+
+export const DefaultProfileImage = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 18px;
+  height: 18px;
+  border-radius: 18px;
+  background-color: ${colors.gray700};
+`;

src/views/BlogPage/components/BlogPost/Header/index.tsx

@@ -0,0 +1,39 @@
+import { BlogPostType } from '@src/lib/types/blog';
+import { formatDate } from '@src/lib/utils/dateFormat';
+import { DefaultProfileImage } from '@src/views/BlogPage/components/BlogPost';
+import * as S from './style';
+
+interface HeaderProps {
+  selectedTap: string;
+  blogPost: BlogPostType;
+}
+
+function Header({ selectedTap, blogPost }: HeaderProps) {
+  return (
+    <S.Header>
+      {selectedTap === 'ARTICLE' ? (
+        <>
+          <S.Profile>
+            {blogPost.authorProfileImageUrl ? (
+              <S.ProfileImage
+                src={blogPost.authorProfileImageUrl}
+                alt="작성자 프로필 이미지"
+                width={18}
+                height={18}
+              />
+            ) : (
+              <DefaultProfileImage />
+            )}
+            <div>{blogPost.author}</div>
+          </S.Profile>
+          <S.Divider>∙</S.Divider>
+          <div>{formatDate(new Date(blogPost.uploadedAt), 'yyyymmdd', '.')}</div>
+        </>
+      ) : (
+        <div>{blogPost.subject}</div>
+      )}
+    </S.Header>
+  );
+}
+
+export default Header;

src/views/BlogPage/components/BlogPost/Header/style.ts

@@ -0,0 +1,46 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import Image from 'next/image';
+
+export const Header = styled.div`
+  display: flex;
+  height: 23px;
+  margin-bottom: 4px;
+
+  color: ${colors.gray200};
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 160%;
+  letter-spacing: -0.21px;
+
+  /* 모바일 뷰 */
+  @media (max-width: 767px) {
+    height: 16px;
+    margin-bottom: 0;
+
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 135%; /* 16.2px */
+    letter-spacing: -0.18px;
+  }
+`;
+
+export const Profile = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+
+export const ProfileImage = styled(Image)`
+  border-radius: 18px;
+
+  /* 모바일 뷰 */
+  @media (max-width: 767px) {
+    width: 15px;
+    height: 15px;
+  }
+`;
+
+export const Divider = styled.div`
+  padding: 0 2px 0 2px;
+`;

src/views/BlogPage/components/BlogPost/Like/index.tsx

@@ -0,0 +1,25 @@
+import Image from 'next/image';
+import icHeartFilled from '@src/assets/icons/ic_heart_filled.svg';
+import icHeartUnfilled from '@src/assets/icons/ic_heart_unfilled.svg';
+import { BlogPostType } from '@src/lib/types/blog';
+import * as S from './style';
+
+interface LikeProps {
+  blogPost: BlogPostType;
+}
+
+function Like({ blogPost }: LikeProps) {
+  return (
+    <S.Like>
+      <Image
+        src={blogPost.liked ? icHeartFilled : icHeartUnfilled}
+        alt="좋아요"
+        width={16}
+        height={16}
+      />
+      <span>{blogPost.likeCount}</span>
+    </S.Like>
+  );
+}
+
+export default Like;

src/views/BlogPage/components/BlogPost/Like/style.ts

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+
+export const Like = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 3px;
+
+  position: absolute;
+  top: 10px;
+  right: 10px;
+
+  height: 28px;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: ${colors.grayAlpha100};
+
+  color: ${colors.gray100};
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 160%; /* 22.4px */
+  letter-spacing: -0.21px;
+
+  transition: opacity 0.1s ease-out;
+  &:hover {
+    opacity: 0.8;
+  }
+
+  /* 모바일 뷰 */
+  @media (max-width: 767px) {
+    display: none;
+  }
+`;

src/views/BlogPage/components/BlogPost/index.ts

@@ -0,0 +1,3 @@
+export { default as DefaultProfileImage } from './DefaultProfileImage';
+export { default as Header } from './Header';
+export { default as Like } from './Like';

src/views/BlogPage/components/BlogPost/index.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef, useState } from 'react';
+import type { BlogPostType } from '@src/lib/types/blog';
+import { parsePartToKorean } from '@src/lib/utils/parsePartToKorean';
+import { Like } from '@src/views/BlogPage/components/BlogPost';
+import * as S from './style';
+import Header from '@src/views/BlogPage/components/BlogPost/Header';
+
+const TWO_LINE_TITLE_HEIGHT = 72;
+
+interface BlogPostProps {
+  selectedTap: string;
+  blogPost: BlogPostType;
+}
+
+function BlogPost({ selectedTap, blogPost }: BlogPostProps) {
+  const titleRef = useRef<HTMLDivElement>(null);
+  const [descriptionLine, setDescriptionLine] = useState(1);
+
+  useEffect(() => {
+    if (titleRef.current) {
+      const titleHeight = titleRef.current.clientHeight;
+      setDescriptionLine(titleHeight >= TWO_LINE_TITLE_HEIGHT ? 1 : 2);
+    }
+  }, []);
+
+  return (
+    <S.BlogPost href={blogPost.url}>
+      <div>
+        <Header selectedTap={selectedTap} blogPost={blogPost} />
+        <S.Body>
+          <S.Title ref={titleRef}>{blogPost.title}</S.Title>
+          <S.Description descriptionLine={descriptionLine}>{blogPost.description}</S.Description>
+        </S.Body>
+        <S.TagList>
+          <S.Tag>{blogPost.generation}기</S.Tag>
+          <S.Tag>{parsePartToKorean(blogPost.part)}</S.Tag>
+        </S.TagList>
+      </div>
+      <S.ThumbnailWrapper>
+        <S.Thumbnail src={blogPost.thumbnailUrl} alt="게시물 썸네일" width={239} height={160} />
+        {selectedTap === 'ARTICLE' && <Like blogPost={blogPost} />}
+      </S.ThumbnailWrapper>
+    </S.BlogPost>
+  );
+}
+
+export default BlogPost;