feat: 프로필 내 카드 구현 (#1272)

* feat: 콘텐츠 카드 구현

* chore: 오타 수정

* refactor: isCurrent 관심사 분리

* refactor: 태그 및 타입 변경

* fix: 스토리북 빌드 용량 이슈 해결

* refactor: 반응형에 따라 ellipsis 처리되도록 수정

* chore: 스토리북 버그 대응 cross-env 추가

package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "analyze": "cross-env ANALYZE=true next build",
     "build": "next build",
-    "build-storybook": "storybook build",
+    "build-storybook": "cross-env NODE_OPTIONS='--max-old-space-size=4096' storybook build",
     "check": "conc -s all \"yarn:lint\" \"yarn:typecheck\" \"yarn:stylelint\" \"yarn:test:ci\"",
     "dev": "next dev",
     "test": "jest --watch",

src/components/common/ContentsCard/index.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/react';
+
+import ContentsCard from '@/components/common/ContentsCard';
+
+export default {
+  component: ContentsCard,
+} as Meta<typeof ContentsCard>;
+
+export const Default = {
+  args: {
+    thumbnail:
+      'https://makers-web-img.s3.ap-northeast-2.amazonaws.com/meeting/2024/01/08/213a1b06-35fd-4227-9029-3843f66622a3.png',
+    title: '프로젝트 제목제목제목 제목입니다.',
+    top: '프로젝트 유형 카테고리',
+    bottom: '프로젝트 날짜 설명 이 프로젝트는 프로젝트입니다.',
+  },
+
+  name: 'Default',
+};

src/components/common/ContentsCard/index.tsx

@@ -0,0 +1,71 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import { fonts } from '@sopt-makers/fonts';
+import { ReactNode } from 'react';
+
+import ResizedImage from '@/components/common/ResizedImage';
+
+interface ContentsCardProps {
+  thumbnail: string;
+  title: ReactNode;
+  top: ReactNode;
+  bottom: ReactNode;
+}
+
+export default function ContentsCard({ thumbnail, title, top, bottom }: ContentsCardProps) {
+  return (
+    <Card>
+      <Thumbnail src={thumbnail} alt={`${title} 이미지`} height={84} />
+      <Contents>
+        <Description>{top}</Description>
+        <Title>{title}</Title>
+        <Description>{bottom}</Description>
+      </Contents>
+    </Card>
+  );
+}
+
+const Card = styled.article`
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  border-radius: 20px;
+  background: ${colors.gray900};
+  padding: 16px;
+  width: 100%;
+  height: 116px;
+`;
+
+const Thumbnail = styled(ResizedImage)`
+  border-radius: 14px;
+  width: 84px;
+  height: 84px;
+  object-fit: cover;
+`;
+
+const Description = styled.p`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+  color: ${colors.gray200};
+
+  ${fonts.LABEL_14_SB};
+`;
+
+const Title = styled.h1`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+  color: ${colors.white};
+
+  ${fonts.HEADING_18_B};
+`;
+
+const Contents = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: calc(100% - 132px);
+`;

src/components/members/detail/MemberMeetingCard.tsx

@@ -0,0 +1,3 @@
+export default function MemberMeetingCard() {
+  return <div>MemberGroupCard</div>;
+}