f-lab-edu / stock-saga

주식 초보자도 쉽게 이해할 수 있는 주식 정보 제공 서비스

stock-saga

국내 및 해외 주식 정보 제공 서비스

목차

• 개요
• 사용 기술
• 기능

개요

• 주식 초보자가 쉽게 주식을 이해할 수 있는 정보를 제공

사용 기술

• 코어 : TyepeScript, Next.js
• 상태 관리 : React-Query (?)
• 스타일링 : Emotion (?)
• 패키지 매니저 : Yarn Berry
• 빌드 : SWC
• CI/CD : (?)

기능

• 구글 OAuth 로그인
• 국내, 해외 실시간 주식 시세, 상세 정보 조회
• 경제 관련 뉴스 조회
• 북마크, 종목별 댓글 토론
• 화이트/다크모드
• chatgpt를 활용한 종목 추천

화면 설계서

stock-saga 프로토 타입

stock-saga's Issues

인증 구현

목적

구글 OAuth를 통한 로그인 및 로그아웃 구현

작업 상세 내용

• 로그인 modal 컴포넌트 추가
• 구글 계정을 통한 로그인 기능 추가
• 로그아웃 기능 추가

참고 사항

경제 관련 뉴스 정보 제공

목적

카테고리별 뉴스 목록, 상세 조회 페이지 추가

작업 상세 내용

• 카테고리별 뉴스 목록 조회
• 뉴스 상세 조회

참고 사항

화면설계서

공통 레이아웃 aside 추가

목적

공통 레이아웃 aside 추가

작업 상세 내용

• aside 컴포넌트 추가
• navigation 구현 (시장, 뉴스 하위 nav 이동)
• 다크 모드 적용
• 로그인, 로그아웃 기능 항목 추가

참고 사항

화면 설계서

공통 레이아웃 footer 추가

목적

공통 레이아웃 footer 추가

작업 상세 내용

• 맨위로 가기 버튼 추가
• 개인정보 처리방침 확인 버튼 추가

참고 사항

https://ovenapp.io/project/s3rW1UYmvzipGY50PqZT1tqdwQ6oWP6J#WivJ2

개발환경 초기 세팅

목적

프로젝트 개발환경 초기 세팅

작업 상세 내용

• Next.js, typescript, Yarn Berry, ESLint, Prettier 설정
• TailwindCSS 설정
• React-Query 설정
• eslint-plugin-simple-import-sort 설정

참고 사항

프로젝트 폴더 구조 정의

목적

프로젝트 폴더 구조 정의

작업 상세 내용

• 페이지 폴더
• 컴포넌트 폴더
• css 폴더

참고 사항

Next.js 라우팅 docs
Next.js 폴더 구조 고민

카테고리 선택 컴포넌트 리팩토링

목적

드롭다운 컴포넌트를 Headless한 컴포넌트로 리팩토링한다.

작업 상세 내용

• headless 드롭다운 컴포넌트 추가
• 카테고리 선택 컴포넌트 리팩토링

참고 사항

프로젝트 폴더 구조 리팩토링

목적

프로젝트 폴더 구조 리팩토링

작업 상세 내용

• Next.js Routing Paradiam 정리
• Next.js Routing Paradiam 기반 프로젝트 폴더 구조 변경

참고 사항

시장 하위 카테고리 목록 조회

목적

지수, 주식, 외환, 암호화폐 카테고리별 목록 조회 페이지

작업 상세 내용

• 공통 기능
  • 10개씩 항목 조회
  • 페이징 처리
• 주식
  • 시장 선택 드롭다운
  • 급등, 하락, 가장 인기 있는 주식 섹션 분리
  • 각 섹션별 목록 자세히 보기 기능 추가
• 암호화폐
  • 시장 선택 드롭다운

참고 사항

화면설계서

시장 카테고리별 항목 상세 조회

목적

지수, 주식, 외환, 암호화폐 카테고리별 항목 상세 조회 페이지 추가

작업 상세 내용

항목 상세 조회 페이지 이동시 각 섹션별 UI 변경

공통 섹션 추가

• 종합
• 차트
• 일별
• 관련 주식

주식 카테고리 개별 섹션 추가

• 재무

참고 사항

화면설계서

대시보드 refresh interval dropdown 활성화

목적

실시간 API 사용을 위한 refresh dropdown 활성화

작업 상세 내용

• refresh interval 설정 dropdown 활성화
• refresh interval 기능 구현

참고 사항

테마 변경 기능 구현

목적

화이트 모드, 다크 모드 테마 변경 기능 구현

작업 상세 내용

• 화이트 모드, 다크 모드 변환 아이콘 추가
• 테마 변경 기능 구현

참고 사항

공통 레이아웃 header 추가

목적

공통 레이아웃 header 추가

작업 상세 내용

• 카테고리 dropdown 구현
  • 카테고리(시장, 뉴스) 선택시 하위 item 변경
  • 하위 item 선택시 라우팅 적용 (시장, 뉴스 카테고리 하위 페이지 이동)
• header 컴포넌트 다크모드 CSS 적용
• 카테고리별 하위 페이지 컴포넌트 추가
• 검색 기능 아이콘 추가

참고 사항

화면 설계서