📊 금융 데이터 조회 대시보드

Next.js 기반의 금융 데이터 조회 웹 애플리케이션입니다.
외부 API를 활용하여 주식 종목 정보와 금융 뉴스를 조회하고,
비동기 데이터 처리와 상태 관리 패턴에 중점을 두어 구현했습니다.

본 프로젝트는 실제 서비스 환경을 가정하여
데이터 조회 / 로딩 / 에러 / 빈 상태 처리를 명확히 분리하는 것을 목표로 합니다.

---

🔹 프로젝트 목표

• 외부 API 연동을 통한 비동기 데이터 처리 경험
• 로딩 / 에러 / empty state를 명확히 분리한 UI 구성
• 컴포넌트 책임 분리를 통한 유지보수 가능한 구조 설계

---

🔹 기술 스택

영역	기술	사용 목적
Framework	Next.js (App Router)	라우팅 및 페이지 구조
Language	TypeScript	데이터 타입 명확화
Data Fetching	React Query	서버 상태 관리, 로딩/에러 처리
Styling	Tailwind CSS	일관된 UI 구성
API	Public Financial API	주식 / 뉴스 데이터 조회

---

🔹 주요 기능

1️⃣ 주식 종목 리스트 페이지

• 외부 API를 통한 종목 데이터 조회
• 로딩 / 에러 / 데이터 없음 상태 분리 처리
• 정렬 기준 변경 (프론트엔드 단 처리)

2️⃣ 종목 상세 페이지

• URL 기반 라우팅
• 종목별 상세 정보 조회
• 페이지 단위 데이터 패칭

3️⃣ 금융 뉴스 페이지

• 금융 뉴스 리스트 조회
• 무한 스크롤 방식 데이터 로딩

---

🔹 구조적 특징

• API 호출 로직을 별도 레이어로 분리하여 UI와 데이터 로직 분리
• 페이지 단위 데이터 패칭을 통해 불필요한 요청 최소화
• 공통 레이아웃 및 컴포넌트 분리 (Header, Layout 등)

---

🔹 실행 방법

npm install
npm run dev