feat: PopularCard 컴포넌트 구현

src/components/card/popularCard/PopularCard.tsx

@@ -0,0 +1,47 @@
+import Icon from '@assets/svgs';
+
+import * as styles from './popularCard.css';
+interface PopularCardProps {
+  ranking: number;
+  templeName: string;
+  templeLoc: string;
+  templeImg: string;
+  tag: string;
+  onClick: () => void;
+  isLiked?: boolean;
+}
+
+const PopularCard = ({
+  ranking,
+  templeName,
+  templeLoc,
+  templeImg,
+  tag,
+  onClick,
+  isLiked,
+}: PopularCardProps) => {
+  return (
+    <button className={styles.cardWrapper} onClick={onClick}>
+      <div>
+        <div className={styles.imgBox} style={{ backgroundImage: `url(${templeImg})` }}>
+          <span className={styles.rankBox}>{ranking}</span>
+        </div>
+        <div className={styles.bottomWrapper}>
+          <div className={styles.bottomContainer}>
+            <span className={styles.templeName}>{templeName}</span>
+            <div className={styles.bottomBox}>
+              <span>{templeLoc}</span>
+              <Icon.IcnDivider />
+              <span>{tag}</span>
+            </div>
+          </div>
+          <button className={styles.likeBtn}>
+            {isLiked ? <Icon.IcnFlowerPink /> : <Icon.IncFlowerGray />}
+          </button>
+        </div>
+      </div>
+    </button>
+  );
+};
+
+export default PopularCard;

src/components/card/popularCard/popularCard.css.ts

@@ -0,0 +1,69 @@
+import theme from '@styles/theme.css';
+import { style } from '@vanilla-extract/css';
+
+export const cardWrapper = style({
+  width: '33.5rem',
+});
+
+export const cardContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.8rem',
+});
+
+export const templeInfoBox = style({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const rankBox = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '3.4rem',
+  height: '3.4rem',
+  borderRadius: '0 0 8px 8px',
+  backgroundColor: theme.COLORS.black60,
+  ...theme.FONTS.c2R14,
+  marginRight: '2rem',
+});
+
+export const templeName = style({
+  ...theme.FONTS.h3Sb18,
+  textAlign: 'left',
+});
+
+export const bottomBox = style({
+  display: 'flex',
+  color: theme.COLORS.gray8,
+  ...theme.FONTS.b9R15,
+  gap: '1rem',
+  alignItems: 'center',
+});
+
+export const likeBtn = style({
+  padding: '1rem',
+});
+
+export const imgBox = style({
+  height: '13.7rem',
+  borderRadius: 8,
+  display: 'flex',
+  justifyContent: 'flex-end',
+  color: theme.COLORS.white,
+  overflow: 'hidden',
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+});
+
+export const bottomContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'flex-start',
+  paddingTop: '0.8rem',
+});
+
+export const bottomWrapper = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+});

src/stories/PopularCard.stories.ts

@@ -0,0 +1,50 @@
+import PopularCard from '@components/card/popularCard/PopularCard';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Card/PopularCard',
+  component: PopularCard,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    ranking: {
+      control: { type: 'number' },
+    },
+    templeName: {
+      control: { type: 'text' },
+    },
+    templeLoc: {
+      control: { type: 'text' },
+    },
+    templeImg: {
+      control: { type: 'text' },
+    },
+    tag: {
+      control: { type: 'text' },
+    },
+    onClick: {
+      action: 'clicked',
+    },
+    isLiked: {
+      control: { type: 'boolean' },
+    },
+  },
+  args: {
+    ranking: 1,
+    templeName: '봉은사',
+    templeLoc: '서울',
+    templeImg:
+      'https://img.danawa.com/images/descFiles/6/110/5109431_agiLaciMHn_1659098198501.jpeg',
+    tag: '#방긋방긋',
+    onClick: () => alert('click !'),
+    isLiked: false,
+  },
+} satisfies Meta<typeof PopularCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};