[Feat] 적금 상품 컴포넌트 구현

src/shared/components/savings/savings.css.ts

@@ -0,0 +1,50 @@
+import { vars } from '../../../styles/theme.css';
+import { style } from '@vanilla-extract/css';
+
+export const savingsContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '65rem',
+  gap: '1rem',
+  padding: '2rem 3rem',
+  border: `1px solid ${vars.color.blue300}`,
+  borderRadius: '10px',
+});
+
+export const bank = style({
+  fontSize: vars.size.sm,
+  fontWeight: vars.weight.medium,
+  color: vars.color.gray700,
+});
+
+export const product = style({
+  fontSize: vars.size.lg,
+  fontWeight: vars.weight.bold,
+  color: vars.color.gray800,
+  paddingBottom: '1rem',
+});
+
+export const detail = style({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+});
+
+export const detailContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.4rem',
+  alignItems: 'center',
+});
+
+export const title = style({
+  fontSize: vars.size.xs,
+  fontWeight: vars.weight.medium,
+  color: vars.color.gray700,
+});
+
+export const value = style({
+  fontSize: vars.size.sm,
+  fontWeight: vars.weight.regular,
+  color: vars.color.gray800,
+});

src/shared/components/savings/savings.tsx

@@ -0,0 +1,46 @@
+import * as styles from './savings.css';
+
+interface SavingsProps {
+  bankName: string;
+  productName: string;
+  rsrvTypeNm: string;
+  saveTerm: number;
+  baseRate: number;
+  maxRate: number;
+}
+
+const Savings = ({
+  bankName,
+  productName,
+  rsrvTypeNm,
+  saveTerm,
+  baseRate,
+  maxRate,
+}: SavingsProps) => {
+  return (
+    <div className={styles.savingsContainer}>
+      <div className={styles.bank}>{bankName}</div>
+      <div className={styles.product}>{productName}</div>
+      <div className={styles.detail}>
+        <div className={styles.detailContainer}>
+          <div className={styles.title}>유형</div>
+          <div className={styles.value}>{rsrvTypeNm}</div>
+        </div>
+        <div className={styles.detailContainer}>
+          <div className={styles.title}>기간</div>
+          <div className={styles.value}>{saveTerm}개월</div>
+        </div>
+        <div className={styles.detailContainer}>
+          <div className={styles.title}>기본 금리</div>
+          <div className={styles.value}>{baseRate}%</div>
+        </div>
+        <div className={styles.detailContainer}>
+          <div className={styles.title}>최대 우대 금리</div>
+          <div className={styles.value}>{maxRate}%</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Savings;