[Feat] 예적금 검색페이지 구현

package.json

@@ -18,7 +18,8 @@
     "axios": "^1.12.2",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-router-dom": "^7.9.4"
+    "react-router-dom": "^7.9.4",
+    "zustand": "^5.0.9"
   },
   "devDependencies": {
     "@eslint/js": "^9.37.0",

src/pages/deposit-search/deposit-search-page.css.ts

@@ -0,0 +1,135 @@
+import { vars } from '../../styles/theme.css';
+import { style, globalStyle } from '@vanilla-extract/css';
+
+export const mainContainer = style({
+  display: 'block',
+  width: '70rem',
+  minHeight: '100vh',
+  marginLeft: 'auto',
+  marginRight: 'auto',
+  paddingBottom: '4rem',
+  boxSizing: 'border-box',
+  paddingTop: '10rem',
+});
+
+export const section = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.2rem',
+  marginBottom: '3rem',
+});
+
+export const sectionTitle = style({
+  fontSize: vars.size.lg,
+  fontWeight: vars.weight.semibold,
+  color: vars.color.black,
+  marginBottom: '1rem',
+});
+
+export const bankContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '70rem',
+  gap: '1.5rem',
+  borderRadius: '10px',
+});
+
+export const bankGrid = style({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(6, 1fr)',
+  gap: '1rem',
+  justifyContent: 'center',
+  alignContent: 'center',
+});
+
+export const bankButton = style({
+  width: '100%',
+  aspectRatio: '1 / 1',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '0.5rem',
+  gap: '0.2rem',
+  border: `1px solid ${vars.color.gray500}`,
+  borderRadius: '5px',
+  cursor: 'pointer',
+});
+
+export const bankLogo = style({
+  width: '5rem',
+  height: '5rem',
+  marginBottom: '0.5rem',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const bankName = style({
+  fontSize: vars.size.xxs,
+  fontWeight: vars.weight.medium,
+  color: vars.color.gray800,
+});
+
+export const bankButtonSelected = style({
+  border: `2px solid ${vars.color.pink300}`,
+  backgroundColor: vars.color.pink100,
+});
+
+export const selectAllContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.5rem',
+  marginBottom: '1rem',
+  justifyContent: 'flex-end',
+});
+
+export const selectAllButton = style({
+  width: '11rem',
+  borderRadius: '5px',
+  cursor: 'pointer',
+  backgroundColor: vars.color.pink300,
+  fontSize: vars.size.sm,
+  fontWeight: vars.weight.semibold,
+  padding: '0.6rem 1rem',
+  border: 'none',
+});
+
+export const termContainer = style({
+  display: 'flex',
+  gap: '1rem',
+  width: '70rem',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const searchContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  paddingBottom: '2rem',
+});
+
+export const searchButton = style({
+  backgroundColor: vars.color.pink300,
+  color: vars.color.white,
+  fontSize: vars.size.sm,
+  fontWeight: vars.weight.semibold,
+  padding: '0.6rem 1rem',
+  border: 'none',
+  borderRadius: '5px',
+  cursor: 'pointer',
+  width: '11rem',
+});
+
+export const depositListContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1rem',
+  marginTop: '2rem',
+});
+
+globalStyle(`${bankLogo} svg`, {
+  width: '100%',
+  height: '100%',
+});

src/pages/deposit-search/deposit-search-page.tsx

@@ -0,0 +1,172 @@
+import { useState, useEffect } from 'react';
+import { getDepositsList } from '../../shared/api/products';
+import { useDepositSearchStore } from '../../shared/stores/useDepositSearchStore';
+import { button } from '../../shared/components/button/button.css';
+import { BANK_LIST } from '../../shared/constants/bank-list';
+import Header from '../../shared/components/header/header';
+import DepositBasic from '../../shared/components/deposit-basic/deposit-basic';
+import DropDown from '../../shared/components/dropdown/dropdown';
+import Spinner from '../../shared/components/spinner/spinner';
+import * as styles from './deposit-search-page.css';
+
+const DepositSearchPage = () => {
+  const {
+    selectedBanks,
+    saveTerm,
+    depositList,
+    initialized,
+    setSelectedBanks,
+    setSaveTerm,
+    setDepositList,
+    setInitialized,
+  } = useDepositSearchStore();
+  const [loading, setIsLoading] = useState(true);
+  const [isError, setIsError] = useState(false);
+
+  const fetchDepositList = async (banks: string[], term: number) => {
+    setIsLoading(true);
+    setIsError(false);
+    try {
+      const res = await getDepositsList(banks, term);
+      const data = [...(res?.result ?? [])].sort((a, b) => {
+        if (a.saveTerm !== b.saveTerm) return b.saveTerm - a.saveTerm;
+        if (a.maxRate !== b.maxRate) return b.maxRate - a.maxRate;
+        return b.baseRate - a.baseRate;
+      });
+
+      setDepositList(data);
+    } catch (error) {
+      setDepositList([]);
+      setIsError(true);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!initialized) {
+      const allBankIds = BANK_LIST.map((b) => b.id);
+      setSelectedBanks(allBankIds);
+      fetchDepositList(allBankIds, saveTerm);
+      setInitialized(true);
+    } else {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const handleBankToggle = (bankId: string) => {
+    setSelectedBanks((prev) => {
+      if (prev.includes(bankId)) {
+        return prev.filter((id) => id !== bankId);
+      } else {
+        return [...prev, bankId];
+      }
+    });
+  };
+
+  const handleTermChange = (term: number) => {
+    setSaveTerm(term);
+  };
+
+  const handleSearch = () => {
+    if (loading) return;
+    const targetBanks = selectedBanks.length > 0 ? selectedBanks : BANK_LIST.map((b) => b.id);
+    if (selectedBanks.length === 0) {
+      setSelectedBanks(targetBanks);
+    }
+    fetchDepositList(targetBanks, saveTerm);
+  };
+
+  const handleSelectAll = () => {
+    if (selectedBanks.length === BANK_LIST.length) {
+      setSelectedBanks([]);
+    } else {
+      setSelectedBanks(BANK_LIST.map((b) => b.id));
+    }
+  };
+
+  return (
+    <>
+      <Header />
+      <main className={styles.mainContainer}>
+        {/*은행 선택*/}
+        <section className={styles.section}>
+          <h2 className={styles.sectionTitle}>은행</h2>
+          <div className={styles.bankContainer}>
+            <div className={styles.bankGrid}>
+              {BANK_LIST.map((bank) => {
+                const isSelected = selectedBanks.includes(bank.id);
+                return (
+                  <button
+                    key={bank.id}
+                    className={`${styles.bankButton} ${isSelected ? styles.bankButtonSelected : ''}`}
+                    onClick={() => handleBankToggle(bank.id)}
+                  >
+                    <div className={styles.bankLogo}>
+                      <bank.logo />
+                    </div>
+                    <span className={styles.bankName}>{bank.name}</span>
+                  </button>
+                );
+              })}
+            </div>
+            <div className={styles.selectAllContainer}>
+              <button
+                className={`${styles.selectAllButton} ${button({ variant: 'pink' })}`}
+                onClick={() => handleSelectAll()}
+              >
+                전체선택
+              </button>
+            </div>
+          </div>
+        </section>
+        {/*기간 선택*/}
+        <section className={styles.section}>
+          <h2 className={styles.sectionTitle}>기간</h2>
+          <div className={styles.termContainer}>
+            <DropDown color='pink' value={saveTerm} onChange={handleTermChange} />
+          </div>
+        </section>
+        {/*검색 버튼*/}
+        <div className={styles.searchContainer}>
+          <button
+            className={`${styles.searchButton} ${button({ variant: 'pink' })}`}
+            onClick={handleSearch}
+            disabled={loading}
+          >
+            검색
+          </button>
+        </div>
+        {/*상품 리스트*/}
+        {loading ? (
+          <div className={styles.depositListContainer}>
+            <Spinner color='pink' />
+          </div>
+        ) : !isError ? (
+          <div className={styles.depositListContainer}>
+            {depositList.length > 0 ? (
+              depositList.map((item) => (
+                <DepositBasic
+                  key={`${item.productId}-${item.optionId}`}
+                  productId={item.productId}
+                  optionId={item.optionId}
+                  bankName={item.bankName}
+                  productName={item.productName}
+                  saveTerm={item.saveTerm}
+                  baseRate={item.baseRate}
+                  maxRate={item.maxRate}
+                />
+              ))
+            ) : (
+              <p>검색된 예금 상품이 없습니다.</p>
+            )}
+          </div>
+        ) : (
+          <p>예금 상품을 불러오는 중 오류가 발생했습니다. 다시 시도해주세요.</p>
+        )}
+      </main>
+    </>
+  );
+};
+
+export default DepositSearchPage;