[Feat] 예금 상품 컴포넌트 구현 (#38)

* chore: 적금 컴포넌트 수정

* feat: 예금 컴포넌트 구현

Author: 1jiwoo27

src/shared/components/deposit/deposit.css.ts

@@ -0,0 +1,51 @@
+import { vars } from '../../../styles/theme.css';
+import { style } from '@vanilla-extract/css';
+
+export const depositContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '60rem',
+  gap: '1rem',
+  padding: '2rem 3rem',
+  border: `1px solid ${vars.color.pink300}`,
+  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',
+  padding: '0 5rem',
+});
+
+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/deposit/deposit.tsx

@@ -0,0 +1,34 @@
+import * as styles from './deposit.css';
+
+interface DepositProps {
+  bankName: string;
+  productName: string;
+  saveTerm: number;
+  baseRate: number;
+  maxRate: number;
+}
+
+const Deposit = ({ bankName, productName, saveTerm, baseRate, maxRate }: DepositProps) => {
+  return (
+    <div className={styles.depositContainer}>
+      <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}>{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 Deposit;

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

@@ -4,7 +4,7 @@ import { style } from '@vanilla-extract/css';
 export const savingsContainer = style({
   display: 'flex',
   flexDirection: 'column',
-  width: '65rem',
+  width: '60rem',
   gap: '1rem',
   padding: '2rem 3rem',
   border: `1px solid ${vars.color.blue300}`,

src/shared/components/savings/savings.tsx

@@ -35,7 +35,7 @@ const Savings = ({
           <div className={styles.value}>{baseRate}%</div>
         </div>
         <div className={styles.detailContainer}>
-          <div className={styles.title}>최대 우대 금리</div>
+          <div className={styles.title}>최대 금리</div>
           <div className={styles.value}>{maxRate}%</div>
         </div>
       </div>