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: 이달의 컴포넌트 UI 구현 #41

Merged
merged 15 commits into from
May 8, 2024
Merged

✨Feat: 이달의 컴포넌트 UI 구현 #41

merged 15 commits into from
May 8, 2024

Conversation

JayChae
Copy link
Contributor

@JayChae JayChae commented May 7, 2024

🧩 이슈 번호

✅ 작업 사항

screencapture-localhost-5173-list-2024-05-07-18_21_39
screencapture-localhost-5173-list-2024-05-07-18_22_07

  • Tab 컴포넌트
  • 반응형 구현
  • 모바일, 태블릿일 때 아이템 보여주는 개수 다르게 하기
  • 더보기 버튼 누르면 늘어나는지 확인

👩‍💻 공유 포인트 및 논의 사항

  • 한 페이지에 합치는 건 기능 구현 다 하고 해야겠죠?

@JayChae JayChae added the ✨ Feat 기능 개발 label May 7, 2024
@JayChae JayChae self-assigned this May 7, 2024
Copy link

github-actions bot commented May 7, 2024

🎉 구현한 기능 Preview: https://fandom-7gj019y7q-easyhyun00s-projects.vercel.app

@JayChae JayChae changed the title Feat: 이달의 컴포넌트 UI 구현 ✨Feat: 이달의 컴포넌트 UI 구현 May 7, 2024
Copy link
Contributor

@easyhyun00 easyhyun00 left a comment

Choose a reason for hiding this comment

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

반응형도 너무 잘 만드셨고, 탭 기능도 어렵고 더보기 버튼 눌러서 데이터 가져오는 것도 어려워 보이는데 너무 구현을 잘해주셨어요... 👍👍👍 작업 속도도 빠르고 완전 능력자세요

Comment on lines 9 to 11
if (window.innerWidth > 744) {
setsNumOfItemsToShow(numberOfItems[0]);
} else if (window.innerWidth > 375) {
Copy link
Contributor

Choose a reason for hiding this comment

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

제가 constants/screenSizes.js 에 화면 사이즈를 상수화 했는데 그거 가져와서 사용하는 게 좋을 것 같습니다!

>
<path
d="M8 10.5L8 16.5"
stroke="white"
Copy link
Contributor

Choose a reason for hiding this comment

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

컴포넌트로 너무 잘 만들어주셨어요!
그런데 얘는 색상이 stroke="white" 로 되어 있으니깐
props 로 stroke="white" 이렇게 하고 stroke={stroke} 이렇게 하셔야 합니다!

Comment on lines 2 to 4
* utils 폴더입니다.
* 추후에 이 파일은 삭제해도 됩니다.
*/
Copy link
Contributor

Choose a reason for hiding this comment

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

utils는 주로 함수와 관련된 폴더라서 아래 mock 데이터와 연관은 없습니다!
어차피 기능 구현하다보면 삭제할 내용이지만 mock 데이터는 json 확장자를 사용하여 저장합니다!

return (
<div className={styles.container}>
<div className={styles.header}>
<h1>이달의 차트</h1>
Copy link
Contributor

Choose a reason for hiding this comment

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

h1 태그보다는 h2 태그가 더 좋을 것 같아요!

@easyhyun00
Copy link
Contributor

easyhyun00 commented May 7, 2024

한 페이지에 합치는 건 기능 구현 다 하고 해야겠죠?

작은 기능 단위로 만들고 메인에 합쳐야 충돌이 덜 나기때문에 합쳐야 합니다!

+) UI가 약간 깨집니다! 사진 상으로 판별이 좀 어렵긴한데..

스크린샷 2024-05-07 오후 7 13 52 스크린샷 2024-05-07 오후 7 13 47

Copy link

github-actions bot commented May 8, 2024

🎉 구현한 기능 Preview: https://fandom-6nya29447-easyhyun00s-projects.vercel.app

@JayChae JayChae merged commit 2970ded into main May 8, 2024
1 check passed
@JayChae JayChae deleted the feat-17 branch May 8, 2024 11:45
easyhyun00 added a commit to easyhyun00/fandom-k that referenced this pull request May 8, 2024
* ✨ Feat: 차트 기본골격

* ✨ Feat: 숫자에 콤마 찍기

* ✨ Feat: Profile 컴포넌트 적용

* ✨ Feat: 마지막 줄 밑줄 삭제

* ✨ Feat: 데스크톱 버전 완성

버튼 디자인 빼고

* 🔨 Refector: 임시 데이터 분리

* ✨ Feat: 반응형 구현

* 🐛 Fix: 데스크톱 반응형 줄어들게

* ✨ Feat: CustonButton 컴포넌트 적용

* ✨ Feat: 반응형 아이템 갯수 hook

* ✨ Feat: 히스트 페이지 적용

* 🐛 Fix: 지현님 피드백 적용
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ Feat 기능 개발
Projects
None yet
Development

Successfully merging this pull request may close these issues.

이달의 차트 UI 구현
2 participants