이슈를 통해 주식 흐름을 이해하는 주식 뉴스 네비게이터

1. 삐약 개발자의 첫 개인 프로젝트 만들기 (React + TS)
2. 눈앞이 막막할 땐 폴더부터 만들자: 10번 갈아엎은 FSD 적용기
3. 스타일링 선택 기록: CSS, SCSS, styled-components, Tailwind CSS 비교
4. React Router를 처음 붙이며 배운 것들: 중첩 라우트, Outlet, lazy, ScrollToTop
5. fetch로 시작해서 axios + TanStack Query로 변환까지
6. 무한 스크롤 실전: infiniteQuery와 observer를 활용한
7. portal에서 모달과 토스트 구현하기, z-index 위계와 토스트 구현
8. 회고

• 서비스 목표 : 시장 이슈와 연관 지어 주식 정보를 빠르게 훑어볼 수 있는 서비스
• 개인 목표 : 모달, 무한 스크롤 적용한 리액트 프로젝트 제작
• 기술 스택 : React, Vite, TypeScript, Tailwind CSS, MSW, Axios, TanStack Query

• FSD 폴더 구조 만들기
• 라우터 연결(React Router)
• 컴포넌트 제작 및 조합하여 페이지 구성하기
• 스타일 마이그레이션 (styled-components → Tailwind CSS)
• MSW 서버에 목데이터 만들기
• MSW 기반 데이터 연결 및 화면 구현

• 뉴스 상세 모달 구현 (뒤로가기 눌렀을 때 상태 유지되도록)
• 모달과 겹치는 스낵바 구현
• 무한스크롤 구현

• 뉴스 크롤링 / 뉴스 AI 요약 / 주식 차트 핸들링

src/
  features/    # 전체를 기능 단위로 분류
    app/        # 앱 관련 기능 (Provider, Router 엔트리 등)
    Issues/     # Issue 관련 컴포넌트 파일
    layout/     # Layout 관련 파일 (MainLayout, Header 등)
    pages/      # 라우트 단위 페이지
    shared/     # 공용(UI, styles)
    Stocks/     # Stocks 관련 컴포넌트 파일
  mocks/       # msw 목데이터

• Node.js / pnpm

pnpm install
pnpm dev

• 브라우저: http://localhost:5173/

pnpm dev
pnpm build
pnpm preview