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.

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

Feat: 히스토리 페이지 Ver3.0 #271

Merged
merged 7 commits into from
Nov 1, 2024

Conversation

Eugene-A-01
Copy link
Contributor

@Eugene-A-01 Eugene-A-01 commented Oct 30, 2024

개요

  • 히스토리 페이지 ver3.0

작업 사항

  • 히스토리 그래프 탭 : 공개된 히스토리들의 순위 변동 확인 가능
  • 히스토리 버전 탭 : 히스토리의 공개/비공개 설정 및 날짜별로 히스토리 확인 가능

참고 사항

  • 차트그래프 구현: 기존 ApexChart 라이브러리에서 Google의 Chart.js로 변경했습니다!
  • 디자이너님의 의도대로 그래프의 라인이 유연하게 흐르는 느낌을 살리고 싶었는데 기존 라이브러리는 디자인 커스터마이징에 한계가 있어서, 최대한 디자인적 요소를 유연하게 적용할 수 있는 라이브러리를 찾다가 가장 유명한 Chart.js를 선택했습니다.

스크린샷

[그래프 탭]
image image

[버전 탭]
image image image


리뷰어에게

  • 감사합니다 :)

Copy link

vercel bot commented Oct 30, 2024

@Eugene-A-01 is attempting to deploy a commit to the Eujin Ahn's projects Team on Vercel.

A member of the Team first needs to authorize it.

Copy link
Contributor

@ParkSohyunee ParkSohyunee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

유진님 히스토리 페이지 chart.js로 변경하니 기존의 느낌과는 또 다른것 같아요~LGTM🥹 색상과 곡선이 파도의 느낌처럼 보이는 것 같아요! 옵션 등 여러가지 고려하여 많은 부분 작업해 주셔서 감사합니다.💕 덕분에 사용법도 익히게 되었네요✨

Comment on lines +15 to +26

selectors: {
'&::-webkit-scrollbar': {
height: '5px',
background: vars.color.bggray,
borderRadius: '6px',
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: vars.color.lightgray,
borderRadius: '6px',
},
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

스크롤바 디자인까지✨ 완전 디테일!!

Comment on lines +60 to +77
useEffect(() => {
const loadGoogleCharts = () => {
const script = document.createElement('script');
script.src = 'https://www.gstatic.com/charts/loader.js';
script.onload = () => {
if (window.google && window.google.charts) {
window.google.charts.load('current', { packages: ['corechart'] });
window.google.charts.setOnLoadCallback(() => {
if (window.google.visualization?.LineChart) {
drawChart();
window.addEventListener('resize', drawChart);
} else {
setTimeout(drawChart, 100);
}
});
}
};
document.body.appendChild(script);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

유진님, char.js 패키지를 설치하지 않고, script 태그를 추가하는 방법으로 선택하신 이유가 궁금합니다..! 👀

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

공홈 Getting Start를 보고 따라했는데, yarn add 해서 쓰는 방법도 있었군요!!!

@Eugene-A-01 Eugene-A-01 merged commit da6791d into 8-Sprinters:dev Nov 1, 2024
1 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants