Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FE] 중앙 차트 컴포넌트 기능 구현 #14

Open
novice1993 opened this issue Aug 28, 2023 · 0 comments
Open

[FE] 중앙 차트 컴포넌트 기능 구현 #14

novice1993 opened this issue Aug 28, 2023 · 0 comments
Assignees
@novice1993
Labels
FE Front End
Milestone
Bare Minimum Requ...

Comments

@novice1993
Copy link
Contributor

기능

상단 : 종목 개요 조회 및 매수/매도 버튼 작동, 비교 및 차트 조회기간 설정
중앙 : API 호출에 따른 차트 렌더링, 특정 구간 조회 시 거래관련 안내
하단 : API 호출에 따른 거래량 렌더링, 특정 구간 조회 시 거래관련 안내

기타 기능

마우스 스크롤 움직임과 연동하여 차트 변동

예상 작업 시간

ex)
@novice1993 novice1993 added the FE Front End label Aug 28, 2023
@novice1993 novice1993 added this to the Bare Minimum Requirement milestone Aug 28, 2023
@novice1993 novice1993 self-assigned this Aug 28, 2023
novice1993 added a commit that referenced this issue Sep 5, 2023
@novice1993
[Feat] 차트 통신 및 그래피 렌더링 구현
8f6a761 
- 서버에서 데이터 패칭 후 차트 그리는 기본 로직 구현
- 최초 렌더링 이후 정각 혹은 30분 마다 API 호출하여 데이터 갱신되도록 로직 구현
- 현재 단일 주식 로직만 구현된 상황으로, 추후 로직 확장 예정

Issues #14
novice1993 added a commit that referenced this issue Sep 5, 2023
@novice1993
[Feat] API 요청 주기 수정
bae4337 
- 기존 : 정각/30분에 맞춰서 단일 주가데이터 API 요청 후 30분 주기로 신규 API 요청
- 변경 : 10분 주기로 신규 API 요청
- 변경 사유 : 서버 시간 - 클라이언트 시간 불일치 혹은 API 호출 시 오차 발생으로 인한 데이터 불일치 (서버는 갱신 되었으나, 클라이언트는 갱신 X) 예방 차원에서 API 호출 주기를 더 짧게설정

- 이외 변경 사항 : Loading Indicator, Error Indicator 관련하여 CSS 일부 수정

Issues #14
novice1993 added a commit that referenced this issue Sep 5, 2023
@novice1993
Merge pull request #52 from codestates-seb/dev-client#14/chartGraph
d2b5bca 
[FE] #14 차트 관련 통신로직 일부 구현
novice1993 added a commit that referenced this issue Sep 5, 2023
@novice1993
[Feat] 종목별 차트 렌더링 기능 구현
a40a7f1 
- API 요청 시 첨부할 파라미터(companyID)를 전역 상태로 설정하여, 특정 이벤트 발생 시 (ex. 버튼 클릭) 서버에서 특정 종목 주가 데이터 받아오는 로직 구현
- 현재 임시버튼 통해서 테스트한 상황이며, 추후 타 컴포넌트 및 상단 검색바 통해 기능 연결할 예정
- 이외에 최초 접속 시 코스피 지수 차트 보여줄 수 있도록 구현할 예정

Issues #14
novice1993 added a commit that referenced this issue Sep 6, 2023
@novice1993
[Feat] 차트 자동갱신 기능 보완
cdef1f6 
- 서버에서 데이터 갱신되는 주기 맞춰서 클라이언트에서도 신규 API 요청 발생하도록 로직 설정 (현재는 30분 단위로 갱신)
- 프로그램 실행 시 최초 1회 요청 후, 정각 혹은 30분에 맞춰서 10분 단위로 자동으로 API 요청 발생
* 서버 데이터는 30분 마다 갱신되지만, 서버-클라이언트 시간 차이 존재할 가능성과 API 요청 시 오류 발생 가능성 감안하여 10분 주기 호출로 보완함 (필요 시 호출 주기 변경 가능)

Issues #14
novice1993 added a commit that referenced this issue Sep 6, 2023
@novice1993
[Feat] 차트관련 주식 종목 검색 및 선택 기능 구현 및 테스트 완료
e5b4a5e 
- 중앙 차트 관련하여 종목 검색 및 선택 기능 구현 및 테스트 완료
- 테스트 위하여 차트관련 컴포넌트에 임시로 테스트 요소 (input, button 엘리먼트) 만들어놓은 상황으로 이후 삭제할 예정
- 기능 구현 위한 코드들 실제적으로 필요한 컴포넌트로 이동시킨 후 삭제할 예정

Issues #14
novice1993 added a commit that referenced this issue Sep 6, 2023
@novice1993
[Feat] 종목에 따른 차트 y축 눈금 변경 로직 구현
b45d674 
- 차트 종목에 따른 차트 눈금 변경 로직 구현 (종목마다 y축 간격 및 최소값이 다르므로, 이를 반영하여 차트를 그리는 로직)

Issues #14
novice1993 added a commit that referenced this issue Sep 6, 2023
@novice1993
[Feat] 브랜치 병합
8ce617f 
- 로그인/로그아웃 관련 기능 갱신으로 인한 브랜치 병합

Issues #14
novice1993 added a commit that referenced this issue Sep 6, 2023
@novice1993
[Feat] 중앙 차트 상단 주식개요 갱신관련 로직 구현
8dd73e9 
- 중앙 차트 상단 주식개요 관련 갱신 로직 구현
- 특정 종목 선택 혹은 검색 시 주가 차트와 함께 상단 개요 항목도 변경되도록 로직 구현
- 일부 예외처리 및 CSS 디자인 추가 구현 예정

Issues #14
novice1993 added a commit that referenced this issue Sep 6, 2023
@novice1993
[Refactor] 종목 개요 fetching 관련 로직 수정
23579b5 
- 주식 종목 개요 fetching 로직 관련하여 불필요한 코드 (useEffect 사용 코드) 삭제
- React-Query의 useQuery 메서드 기능 통하여 필요한 기능 구현 가능하므로, 불필요한 코드 삭제하여 가독성 및 효율성 증진

Issues #14
novice1993 added a commit that referenced this issue Sep 7, 2023
@novice1993
[Feat] 차트 상단 종목개요 refetching 로직 추가
a2a6cb7 
- 중앙 차트 상단의 종목 개요부분 서버 데이터 갱신 주기에 맞춰서 refetching 되는 로직 추가
- 정각/30분 기준으로 API 재요청하며, 서버 데이터 갱신주기는 30분이나 서버-클라이언트 시간 불일치할 가능성 고려하여 재요청 주기 10분으로 설정 (추후 수정 가능)

Issues #14
novice1993 added a commit that referenced this issue Sep 7, 2023
@novice1993
[Feat] 브랜치 병합
113ae9c 
- Tap 페이지관련 변경사항 발생으로 인한 브랜치 병합

Issues #14
novice1993 added a commit that referenced this issue Sep 7, 2023
@novice1993
[Fix] 오류 코드 수정
25fdeb8 
- 커뮤니티 컴포넌트 관련 코드 오류 존재하여 수정 후 커밋
* 해당 컴포넌트 작성 담당자와 합의 마친 후 수정함

Issues #14
novice1993 added a commit that referenced this issue Sep 7, 2023
@novice1993
[Feat] 종목 차트 및 개요 데이터 통신 관련 로직 수정
57866d3 
- QueryKey가 동일하여 이전에 조회한 종목의 경우 새롭게 데이터 fetching을 해오지 못하던 문제 해결
- 데이터를 받아오는 시간대를 기준으로 queryKey를 동적으로 생성하여 이전에 조회한 종목이라 하더라도, 서버 데이터 갱신에 맞춰서 fetching 가능하도록 로직 수정

Issues #14
novice1993 added a commit that referenced this issue Sep 7, 2023
@novice1993
[Refactor] 종목 차트 및 개요 통신 코드 리팩토링
07853bf 
- 예상되는 오류 (API 재요청 하더라도 QueryKey가 동일하여 신규 데이터 fetching 하지 않는 문제) 해결 및 코드 가독성 증진 위한 리팩토링

Issues #14
novice1993 added a commit that referenced this issue Sep 7, 2023
@novice1993
[Rafactor] 통신 관련 코드 일부 수정
bb96383 
- 통신 로직 관련하여 if/else if 조건문 조금 더 명료하게 수정

Issues #14
novice1993 added a commit that referenced this issue Sep 15, 2023
@novice1993
[Remove] 테스트 코드 및 불필요한 차트 컴포넌트 삭제
a50ac65 
- 중앙 차트에서 차트 갱신 이벤트 테스트 위해 작성했던 코드 삭제 (기능 필요한 컴포넌트로 로직 이동 완료)
- 중앙 차트 부분에 렌더링 되던 코스피 차트 삭제 (오른쪽 메뉴 컴포넌트에서 띄우는 것으로 변경되어 불필요해짐)

Issues #14
novice1993 added a commit that referenced this issue Sep 15, 2023
@novice1993
[Add] 거래량 차트 추가 테스트 코드 추가
2cb1b87 
- 주가 차트 하단에 거래량 차트 렌더링 되도록 구현 중
- 관련하여 테스트 코드 추가

Issues #14
novice1993 added a commit that referenced this issue Sep 16, 2023
@novice1993
[Add] 거래량 차트 로직 일부 구현
43f2618 
- 중앙 차트관련 거래랑 표시 로직 일부 구현

Issues #14
novice1993 added a commit that referenced this issue Sep 16, 2023
@novice1993
[Add] 차트 관련 일부 수정
63ad68d 
- Y축 위치 이동
- 불필요한 UI 일부 제거

Issues #14
novice1993 added a commit that referenced this issue Sep 16, 2023
@novice1993
[Feat] 거래량 차트 구현 및 불필요한 컴포넌트 삭제
bcfef2b 
- 사용하지 않는 컴포넌트 (코스피 차트 등) 삭제
- 중앙 차트 컴포넌트 관련 거래량 차트 구현
- 차트 커스터마이징 일부 구현되었으며, 추가 진행 예정

Issues #14
novice1993 added a commit that referenced this issue Sep 16, 2023
@novice1993
[Design] 주가 및 거래량 차트 디자인 커스터마이징 일부 구현
7cb490b 
- 중앙 차트 (주가, 거래량) 관련 디자인 커스터마이징 일부 구현
- 이외 변경사항 : 미사용 컴포넌트 (비교차트 버튼 관련 컴포넌트) 제거

Issues #14
novice1993 added a commit that referenced this issue Sep 16, 2023
@novice1993
[Design] 주가/거래량 차트 커스터마이징
014995f 
- 중앙 차트 (주가/거래량) 차트 커스터마이징

Issues #14
novice1993 added a commit that referenced this issue Sep 17, 2023
@novice1993
[Feat] 주가차트 관련 범례 및 이동평균선 추가
b1e0710 
- 중앙차트 관련 범례 및 이동평균선 그래프 추가
- 이외 변경사항 : 우측 주식주문창 관련 조건부 position 값 수정

Issues #14
novice1993 added a commit that referenced this issue Sep 17, 2023
@novice1993
[Add] 비교차트 기능 테스트
3f27179 
- 주가차트 관련하여 타 종목 비교차트 기능 테스트

Issues #14
novice1993 added a commit that referenced this issue Sep 17, 2023
@novice1993
[Add] 비교차트 테스트 위한 UI 및 로직 초기세팅
aa19b02 
- 비교차트 기능 관련하여 구현여부 테스트 위한 UI 및 로직 초기 세팅 (미완)
- 기능 테스트 성공 시 UI 및 로직 보완하여 완성할 예정

Issues #14
novice1993 added a commit that referenced this issue Sep 18, 2023
@novice1993
[Design] 모달창 관련 Z-index 수정
c9dcab5 
- 중앙차트 z-index 부여에 따른 모달창 z-index 수정

Issues #14
novice1993 added a commit that referenced this issue Sep 18, 2023
@novice1993
[Add] 비교차트 기본 로직 구현 완료
c4e8332 
- 주가차트 관련 타종목과 비교차트 렌더링 로직 구현 완료
- 코드 정리 및 UI 구현 추가 예정

Issues #14
novice1993 added a commit that referenced this issue Sep 18, 2023
@novice1993
[Feat] 비교차트 기능 및 UI 구현 완료
8e25c69 
- 종목간 차트비교 기능 및 UI 구현 완료

Issues #14
novice1993 added a commit that referenced this issue Sep 18, 2023
@novice1993
[Feat] 비교차트 종목명 렌더링 기능 추가
0c9f76d 
- 비교차트 종목명이 함께 렌더링 되도록 기능 추가

Issues #14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@novice1993 novice1993

Labels
FE Front End
Projects
None yet
Milestone
Bare Minimum Requirement
Development

No branches or pull requests
1 participant
@novice1993