1. 프로젝트 소개
- 개발 배경 및 목적, 주요 기능 등
- 개발 기간
- 프로젝트 사용법
3. 기술 스택
4. 아키텍처
5. 주요 기능
6. 화면 구성
7. 트러블슈팅
8. 협업
9. 폴더 구조
- 2024년 06월 17일(월) ~ 2024년 08월 02일(금)
-
구동법
$ git clone https://github.com/doksuri5/frontend.git client $ cd client $ npm install $ npm run dev -
.env.development
NEXT_PUBLIC_BASE_URL= NEXT_PUBLIC_API_BASE_URL= OPENAI_API_KEY= MONGODB_URI= KV_URL= KV_REST_API_URL= KV_REST_API_TOKEN= KV_REST_API_READ_ONLY_TOKEN= AUTH_SECRET= DEEPL_API_KEY= OPEN_API_CURRENCY= KAKAO_CLIENT_ID= KAKAO_CLIENT_SECRET= KAKAO_REDIRECT_URL= NAVER_CLIENT_ID= NAVER_CLIENT_SECRET= NAVER_REDIRECT_URL= GOOGLE_CLIENT_ID= GOOGLE_CLIENT_SECRET= GOOGLE_REDIRECT_URL= -
.env.production
NEXT_PUBLIC_BASE_URL= NEXT_PUBLIC_API_BASE_URL= OPENAI_API_KEY= ...
| Environment |
|
| Package Manager |
|
| Development |
|
| Infrastructure |
|
| Communication |
|
클라이언트
- Vercel을 사용하여 Next.js 클라이언트 배포
- Next-Auth를 사용하여 인증 시스템 구현
- Nodemailer를 사용하여 이메일 전송
- Zod로 타입 스키마를 정의하고 React Hook Form을 통해 form 상태 및 validation을 효율적으로 관리
- Zod를 활용한 API 헬퍼 함수 구현
- 검색할 때, 디바운스 적용 및 es-hangul을 사용하여 초성 검색 허용
- 백엔드 세션을 브라우저 쿠키에 저장하여 로그인 여부 판별
- Server Sent Event(SSE)를 통한 실시간 주식 시세 데이터 처리
- ChatGPT API와 Vercel Streaming을 활용한 챗봇 구현 및 실시간 응답 처리
- Vercel Cron Jobs를 사용하여 주기적으로 환율 데이터 자동 수집 및 업데이트
- Next-Intl API 다국어 적용 및 미들웨어를 통한 국제화 경로 설정
- 구글, 네이버 서치 콘솔 등록 및 메타태그 활용으로 SEO 적용
서버
- Node.js Express로 API 서버 구축
- RESTful API 및 서버 라우트 설정을 통한 API 통신
- 유저 로그인 시 Express 세션을 생성하고 이를 클라이언트 쿠키로 전달
- AWS S3를 사용하여 프로필 이미지 관리
- Node.js Express로 크롤링 서버 구축
- Cron-job을 사용하여 주기적인 뉴스 데이터 크롤링 구현
- 크롤링 시 DeepL을 사용하여 언어 번역 후 각 언어별로 데이터베이스에 저장
- 몽고디비를 사용하여 데이터베이스 관리
인프라
- AWS EC2로 API 서버, 크롤링 서버 배포 진행
- PM2를 설정하여 배포 서버 자동 실행 적용
- AWS Route53으로 도메인 설정 후 클라이언트는 메인 도메인 연결, API 서버는 서브 도메인 연결
- 아잇나우 회원가입으로 진행한 경우 일반 이메일 로그인 진행
- SNS 회원가입으로 진행한 경우 SNS 로그인(구글, 네이버, 카카오) 진행
- '자동로그인' 체크 시 일주일간 자동 로그인
- 이름과 핸드폰 번호로 이메일을 찾을 수 있음
- 이름과 이메일로 임시 비밀번호를 발급하여 입력한 이메일로 전송
- 임시 발급한 비밀번호로 로그인 진행
[약관동의] |
[회원가입 폼] |
[프로필 설정] |
[투자 성향 진단] |
- 이메일 인증 후 회원가입 진행
- SNS 회원가입의 경우 각 소셜마다 제공하는 정보 외의 나머지를 입력하여 회원가입 진행
- 투자 성향 진단을 통해 유저 별 맞춤형 챗봇 답변 및 개인화된 주식 리포트를 제공
- 실시간 주식 시세 제공
- 1년 이상의 주식 데이터를 분석하여 그래프 생성
- 관심 종목별 뉴스 제공
- 주요 뉴스 및 최신 뉴스 제공
- AI가 필요한 경우 자동으로 함수를 호출해 최신 주식 정보를 실시간으로 제공
- 검색에 대해 주식 조회 (최대 3개 종목)
- 6가지 종목에 대한 종목 설명 제공
- 그래프 투자 지표에 대한 설명 제공
- 영어 검색 및 한글 초성 검색 가능
- 검색 조회수에 따른 인기 검색어를 1시간 단위로 제공
- 검색된 주식 클릭 시 해당 주식 리포트 페이지로 이동
- 검색된 뉴스 클릭 시 뉴스 상세 페이지로 이동
- 최근 검색어는 개별 삭제 및 전체 삭제 가능
- 유저가 선택한 언어에 따른 뉴스 기사 제공
- 상세 페이지에서는 기사와 관련된 주식 종목 및 관련 기사 제공
- AI 요약 기능으로 기사에 요약 내용 제공
- 관심 종목이 하나도 없으면 모달 창이 나오게 됨
- 영어 및 한글 초성 검색으로 종목 검색 후 종목 추가 및 삭제 진행
- 관심 종목을 삭제하거나 리포트 페이지로 이동
- '관심종목 추가' 버튼 클릭 시 모달 창이 나오게 됨
- 프로필, 개인정보, 투자 성향 수정할 수 있음
- 회원 탈퇴의 경우 비밀번호를 입력해야 함
- 언저 설정 탭에서 전체 페이지의 언어를 변경할 수 있음
- 이용약관 확인
- 실시간 주식 시세 제공 및 기업 정보 제공
- 일, 주, 월, 분기, 년 등 주가 차트 제공
- GPT를 활용한 종목 분석 리포트 제공
노션 링크: https://psychedelic-mercury-b2f.notion.site/5-1a21b4fcac824f61aff61bb81fbc1192
- 모든 팀원이 개발 문서에 쉽게 접근하고 최신 정보를 유지할 수 있도록 문서 중앙화
- DB, API 설계서를 작성하여 각 기능에 필요한 데이터와 API를 명확히 정의
- 회의 내용을 노션에 기록 및 공유하여 팀원들이 회의 진행 시 결정된 사항을 쉽게 참고할 수 있도록 함
- QA 진행 시 발생한 버그와 이슈를 노션에 트래킹하여, 해결 상태와 우선순위를 팀원들과 실시간으로 공유
📦NEXT-FRONTEND
┣ 📂.git
┣ 📂patches
┣ 📂public
┃ ┣ 📂icons
┃ ┣ 📂images
┣ 📂src
┃ ┣ 📂actions // API 헬퍼 함수 모음
┃ ┣ 📂app
┃ ┃ ┣ 📂api // API Routes
┃ ┃ ┣ 📂[lang]
┃ ┃ ┃ ┣ 📂(home) // 메인 홈 페이지 그룹
┃ ┃ ┃ ┗ 📂home // 메인 홈 페이지 라우터 폴더 (폴더 이름은 케밥케이스)
┃ ┃ ┃ ┃ ┣ 📂_components // 메인 홈 페이지 관련 컴포넌트
┃ ┃ ┃ ┃ ┃ ┗ 📂_skeleton // 메인 홈 페이지 관련 스켈레톤 컴포넌트
┃ ┃ ┃ ┃ ┣ 📂_hooks // 메인 홈 페이지 관련 커스텀 훅
┃ ┃ ┃ ┃ ┣ 📂_api // 메인 홈 페이지 관련 api
┃ ┃ ┃ ┃ ┣ 📂_types // 메인 홈 페이지 관련 타입
┃ ┃ ┃ ┃ ┣ 📂_constants // 메인 홈 페이지 관련 상수 값
┃ ┃ ┃ ┃ ┣ 📂_utils // 메인 홈 페이지 관련 유틸리티 함수
┃ ┃ ┃ ┃ ┣ 📜layout.tsx // 메인 홈 페이지 레이아웃
┃ ┃ ┃ ┃ ┗ 📜page.tsx // 메인 홈 페이지
┃ ┃ ┃ ┣ 📂[...not-found]
┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┃ ┣ 📜body-loading.tsx
┃ ┃ ┃ ┣ 📜favicon.ico
┃ ┃ ┃ ┣ 📜layout.tsx
┃ ┃ ┃ ┣ 📜loading.tsx
┃ ┃ ┃ ┗ 📜not-found.tsx
┃ ┃ ┣ 📜global-error.tsx
┃ ┃ ┣ 📜globals.css
┃ ┃ ┣ 📜robots.txt
┃ ┃ ┗ 📜sitemap.xml
┃ ┣ 📂assets
┃ ┃ ┗ 📂icons
┃ ┣ 📂components // 전역에서 사용되는 공통 컴포넌트
┃ ┃ ┣ 📂common
┃ ┃ ┃ ┣ 📂List
┃ ┃ ┃ ┣ 📂skeleton // 전역에서 사용되는 common 스켈레톤 컴포넌트
┃ ┃ ┗ 📂layout // 레이아웃 컴포넌트 (Header, Footer)
┃ ┣ 📂constants // 전역에서 사용되는 상수 값
┃ ┣ 📂dictionaries // 다국어 json
┃ ┣ 📂fonts
┃ ┣ 📂hooks
┃ ┣ 📂lib
┃ ┣ 📂models
┃ ┣ 📂providers
┃ ┣ 📂routes
┃ ┣ 📂scripts
┃ ┣ 📂stores
┃ ┣ 📂types
┃ ┣ 📂utils
┃ ┣ 📜auth.ts
┃ ┣ 📜i18n.ts
┃ ┗ 📜middleware.ts
┣ 📜.env.development
┣ 📜.env.example
┣ 📜.env.production
┣ 📜.eslintrc.json
┣ 📜.gitignore
┣ 📜.prettierrc
┣ 📜next-auth.d.ts
┣ 📜next-env.d.ts
┣ 📜next.config.mjs
┣ 📜package-lock.json
┣ 📜package.json
┣ 📜postcss.config.mjs
┣ 📜README.md
┣ 📜svgr.d.ts
┣ 📜tailwind.config.ts
┣ 📜tsconfig.json
┗ 📜vercel.json