[FEAT] API 연동 공통 구조 구축

.env.example

@@ -0,0 +1 @@
+VITE_API_BASE_URL=

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,17 @@
+## 📌 PR 설명
+
+<br>
+
+## ✅ 완료한 기능 명세
+
+- [x]
+
+<br>
+
+## 📸 스크린샷
+
+<br>
+
+## 💭 고민과 해결과정
+
+<br>

.github/workflows/frontend-deploy.yml

@@ -25,6 +25,14 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Set environment variables
+        run: |
+          if [ "${GITHUB_REF_NAME}" = "main" ]; then
+            echo "VITE_API_BASE_URL=${{ secrets.PROD_API_URL }}" >> .env.production
+          else
+            echo "VITE_API_BASE_URL=${{ secrets.DEV_API_URL }}" >> .env.production
+          fi
+
       - name: Build
         run: pnpm build
 

.gitignore

@@ -23,5 +23,9 @@ dist-ssr
 *.sln
 *.sw?
 
+# Environment
+.env*
+!.env.example
+
 # Claude
 CLAUDE.md

src/app/router/app-router.tsx

@@ -1,5 +1,6 @@
 import { Route, Routes } from 'react-router-dom'
 
+import AdminPage from '@/pages/admin/ui/admin-page'
 import ChatPage from '@/pages/chat/ui/chat-page'
 import HistoryPage from '@/pages/history/ui/history-page'
 import HomePage from '@/pages/home/ui/home-page'
@@ -17,6 +18,7 @@ function AppRouter() {
         <Route path="history" element={<HistoryPage />} />
         <Route path="chat" element={<ChatPage />} />
         <Route path="settings" element={<SettingsPage />} />
+        <Route path="admin" element={<AdminPage />} />
         <Route path="*" element={<NotFoundPage />} />
       </Route>
     </Routes>

src/features/admin-market/api/collect-market-data.ts

@@ -0,0 +1,13 @@
+import { z } from 'zod'
+
+import { apiResponseSchema } from '@/shared/api/api-response'
+import { baseApi } from '@/shared/api/base-api'
+
+const collectMarketResponseSchema = apiResponseSchema(z.string())
+
+export type CollectMarketResponse = z.infer<typeof collectMarketResponseSchema>
+
+export async function collectMarketData(): Promise<CollectMarketResponse> {
+  const response = await baseApi.post('/admin/market/collect')
+  return collectMarketResponseSchema.parse(response.data)
+}

src/features/admin-market/api/fetch-market-snapshots.ts

@@ -0,0 +1,26 @@
+import { z } from 'zod'
+
+import { apiResponseSchema } from '@/shared/api/api-response'
+import { baseApi } from '@/shared/api/base-api'
+
+const marketSnapshotSchema = z.object({
+  metricType: z.string(),
+  label: z.string(),
+  value: z.number(),
+  changeRate: z.number().nullable(),
+  changeValue: z.number().nullable(),
+  unit: z.string(),
+  changeDirection: z.string(),
+  createdAt: z.string(),
+  updatedAt: z.string().nullable()
+})
+
+const marketSnapshotsResponseSchema = apiResponseSchema(z.array(marketSnapshotSchema))
+
+export type MarketSnapshot = z.infer<typeof marketSnapshotSchema>
+
+export async function fetchMarketSnapshots(): Promise<MarketSnapshot[]> {
+  const response = await baseApi.get('/admin/market/snapshots')
+  const parsed = marketSnapshotsResponseSchema.parse(response.data)
+  return parsed.data
+}

src/features/admin-market/model/use-collect-market.ts

@@ -0,0 +1,14 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { collectMarketData } from '../api/collect-market-data'
+
+export function useCollectMarket() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: collectMarketData,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['market', 'snapshots'] })
+    }
+  })
+}

src/features/admin-market/model/use-market-snapshots-query.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { fetchMarketSnapshots } from '../api/fetch-market-snapshots'
+
+export function useMarketSnapshotsQuery() {
+  return useQuery({
+    queryKey: ['market', 'snapshots'],
+    queryFn: fetchMarketSnapshots
+  })
+}

src/features/admin-market/ui/collect-market-button.tsx

@@ -0,0 +1,22 @@
+import { useCollectMarket } from '../model/use-collect-market'
+
+function CollectMarketButton() {
+  const { mutate, isPending, isSuccess, isError, error } = useCollectMarket()
+
+  return (
+    <div className="space-y-2">
+      <button
+        type="button"
+        onClick={() => mutate()}
+        disabled={isPending}
+        className="rounded-lg bg-wefin-mint px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-wefin-mint/90 disabled:opacity-50"
+      >
+        {isPending ? '수집 중...' : '시장 지표 수집'}
+      </button>
+      {isSuccess && <p className="text-sm text-green-600">수집 완료</p>}
+      {isError && <p className="text-sm text-red-600">수집 실패: {error.message}</p>}
+    </div>
+  )
+}
+
+export default CollectMarketButton

src/features/admin-market/ui/market-snapshot-table.tsx

@@ -0,0 +1,56 @@
+import { useMarketSnapshotsQuery } from '../model/use-market-snapshots-query'
+
+function MarketSnapshotTable() {
+  const { data, isLoading, isError } = useMarketSnapshotsQuery()
+
+  if (isLoading) return <p className="text-sm text-wefin-subtle">로딩 중...</p>
+  if (isError) return <p className="text-sm text-red-600">조회 실패</p>
+  if (!data || data.length === 0) return <p className="text-sm text-wefin-subtle">데이터 없음</p>
+
+  return (
+    <table className="w-full text-sm">
+      <thead>
+        <tr className="border-b border-wefin-line text-left text-wefin-subtle">
+          <th className="py-2">지표</th>
+          <th className="py-2 text-right">현재 값</th>
+          <th className="py-2 text-right">변동률</th>
+          <th className="py-2 text-right">변동 값</th>
+          <th className="py-2 text-center">방향</th>
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((snapshot) => (
+          <tr key={snapshot.metricType} className="border-b border-wefin-line/50">
+            <td className="py-3 font-medium text-wefin-text">{snapshot.label}</td>
+            <td className="py-3 text-right">{snapshot.value.toLocaleString()}</td>
+            <td className="py-3 text-right">
+              {snapshot.changeRate != null ? `${snapshot.changeRate}%` : '-'}
+            </td>
+            <td className="py-3 text-right">
+              {snapshot.changeValue != null ? snapshot.changeValue.toLocaleString() : '-'}
+            </td>
+            <td className="py-3 text-center">
+              <span
+                className={
+                  snapshot.changeDirection === 'UP'
+                    ? 'text-red-600'
+                    : snapshot.changeDirection === 'DOWN'
+                      ? 'text-blue-600'
+                      : 'text-wefin-subtle'
+                }
+              >
+                {snapshot.changeDirection === 'UP'
+                  ? '▲'
+                  : snapshot.changeDirection === 'DOWN'
+                    ? '▼'
+                    : '-'}
+              </span>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}
+
+export default MarketSnapshotTable

src/features/admin-news/api/collect-news.ts

@@ -0,0 +1,16 @@
+import { z } from 'zod'
+
+import { apiResponseSchema } from '@/shared/api/api-response'
+import { baseApi } from '@/shared/api/base-api'
+
+const collectNewsResponseSchema = apiResponseSchema(z.string())
+
+export async function collectNews() {
+  const response = await baseApi.post('/admin/news/collect')
+  return collectNewsResponseSchema.parse(response.data)
+}
+
+export async function crawlNews() {
+  const response = await baseApi.post('/admin/news/crawl')
+  return collectNewsResponseSchema.parse(response.data)
+}

src/features/admin-news/model/use-collect-news.ts

@@ -0,0 +1,11 @@
+import { useMutation } from '@tanstack/react-query'
+
+import { collectNews, crawlNews } from '../api/collect-news'
+
+export function useCollectNews() {
+  return useMutation({ mutationFn: collectNews })
+}
+
+export function useCrawlNews() {
+  return useMutation({ mutationFn: crawlNews })
+}

src/features/admin-news/ui/news-collect-buttons.tsx

@@ -0,0 +1,39 @@
+import { useCollectNews, useCrawlNews } from '../model/use-collect-news'
+
+function NewsCollectButtons() {
+  const collect = useCollectNews()
+  const crawl = useCrawlNews()
+
+  return (
+    <div className="space-y-2">
+      <div className="flex gap-2">
+        <button
+          type="button"
+          onClick={() => collect.mutate()}
+          disabled={collect.isPending}
+          className="rounded-lg bg-wefin-mint px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-wefin-mint/90 disabled:opacity-50"
+        >
+          {collect.isPending ? '수집 중...' : '뉴스 수집'}
+        </button>
+        <button
+          type="button"
+          onClick={() => crawl.mutate()}
+          disabled={crawl.isPending}
+          className="rounded-lg bg-wefin-mint px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-wefin-mint/90 disabled:opacity-50"
+        >
+          {crawl.isPending ? '크롤링 중...' : '뉴스 크롤링'}
+        </button>
+      </div>
+      {collect.isSuccess && <p className="text-sm text-green-600">뉴스 수집 완료</p>}
+      {collect.isError && (
+        <p className="text-sm text-red-600">뉴스 수집 실패: {collect.error.message}</p>
+      )}
+      {crawl.isSuccess && <p className="text-sm text-green-600">뉴스 크롤링 완료</p>}
+      {crawl.isError && (
+        <p className="text-sm text-red-600">뉴스 크롤링 실패: {crawl.error.message}</p>
+      )}
+    </div>
+  )
+}
+
+export default NewsCollectButtons

src/pages/admin/ui/admin-page.tsx

@@ -0,0 +1,26 @@
+import CollectMarketButton from '@/features/admin-market/ui/collect-market-button'
+import MarketSnapshotTable from '@/features/admin-market/ui/market-snapshot-table'
+import NewsCollectButtons from '@/features/admin-news/ui/news-collect-buttons'
+
+function AdminPage() {
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-bold text-wefin-text">관리자</h1>
+
+      <section className="rounded-xl border border-wefin-line bg-white p-6">
+        <h2 className="mb-4 text-lg font-semibold text-wefin-text">뉴스</h2>
+        <NewsCollectButtons />
+      </section>
+
+      <section className="rounded-xl border border-wefin-line bg-white p-6">
+        <h2 className="mb-4 text-lg font-semibold text-wefin-text">시장 지표</h2>
+        <div className="space-y-4">
+          <CollectMarketButton />
+          <MarketSnapshotTable />
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export default AdminPage

src/shared/api/api-response.ts

@@ -0,0 +1,17 @@
+import { z, type ZodType } from 'zod'
+
+export function apiResponseSchema<T extends ZodType>(dataSchema: T) {
+  return z.object({
+    status: z.number(),
+    code: z.string().nullable(),
+    message: z.string().nullable(),
+    data: dataSchema
+  })
+}
+
+export type ApiResponse<T> = {
+  status: number
+  code: string | null
+  message: string | null
+  data: T
+}

src/shared/api/base-api.ts

@@ -1,6 +1,31 @@
 import axios from 'axios'
 
 export const baseApi = axios.create({
-  baseURL: '/',
+  baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
   timeout: 5_000
 })
+
+export class ApiError extends Error {
+  readonly status: number
+  readonly code: string
+
+  constructor(status: number, code: string, message: string) {
+    super(message)
+    this.name = 'ApiError'
+    this.status = status
+    this.code = code
+  }
+}
+
+baseApi.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (axios.isAxiosError(error) && error.response?.data) {
+      const { status, code, message } = error.response.data
+      if (code && message) {
+        return Promise.reject(new ApiError(status, code, message))
+      }
+    }
+    return Promise.reject(error)
+  }
+)

vite.config.ts

@@ -10,5 +10,13 @@ export default defineConfig({
     alias: {
       '@': path.resolve(__dirname, './src')
     }
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true
+      }
+    }
   }
 })