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 적용 중 #227

Merged
merged 10 commits into from
Nov 11, 2024
Merged

Conversation

smosco
Copy link
Collaborator

@smosco smosco commented Nov 11, 2024

📄 Description of the PR

🔧 What has been changed?

  • 학습 트래커 컴포넌트를 데스크탑인 경우 오른쪽 사이드에서 보여주고 화면이 작아지면 모바일 넷바를 스와이프 했을 때 보여주도록 수정했습니다.
    • 모바일 넷바의 트래커 메뉴를 클릭을 하거나 손가락으로 터치해서 스와이프 했을 때 보여주도록 구현했습니다.
    • 기존에 생각했던 플로팅 버튼은 화면을 가리거나 클릭했을 때 모달을 띄워야하거나 하는 문제가 있어서 스와이프업을 하는게 가장 좋은 방법이라 생각해 선택했습니다.
  • 학습 트래커에서 필요한 데이터는 학습 트래커 컴포넌트에서 요청하도록 불필요한 props, render 함수를 제거했습니다.
  • 리스닝 디테일 페이지에서 비디오 플레이어의 비율이 고정되도록 수정했습니다.
  • 학습 트래커 5일간 미션 달성 개수를 색상만으로 보여주기보다 막대 높이와 함께 시각화했습니다.

image
image

📸 Screenshots / GIFs (if applicable)

⚠️ Precaution & Known issues

  • 캐러셀은 아직 반응형으로 구현하지 못했습니다. 다음 작업으로 진행하려구요.

✅ Checklist

  • UI 브랜치 같이 확인해서 이슈없는지 확인해보기
  • 함수 이름, 변수 이름만 봐도 어떤 기능을 하는지 파악할 수 있는지 (선언적인 코드인지 확인)

@smosco smosco self-assigned this Nov 11, 2024
@smosco smosco linked an issue Nov 11, 2024 that may be closed by this pull request
3 tasks
Copy link
Collaborator

@godhyzzang godhyzzang left a comment

Choose a reason for hiding this comment

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

수고하셨습니닷~

@godhyzzang godhyzzang merged commit 2766c0a into develop Nov 11, 2024
1 check passed
Comment on lines +58 to +63
<input
type="checkbox"
checked={!!item.status}
readOnly
className="h-5 w-5 text-violet-600"
/>
Copy link
Collaborator

Choose a reason for hiding this comment

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

p2 : input이 보이면clickable한 느낌을 줘서 readOnly라면 Input태그 말고 다른 빨간불, 초록불 등 다른 방식으로 보여주는게 좋을 것 같아요~

Copy link
Collaborator

Choose a reason for hiding this comment

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

image

Comment on lines +110 to +131
<TooltipTrigger>
<div className="flex flex-col items-center gap-1">
<div
className={`w-8 rounded-md ${
day.completedMissions > 0 &&
day.completedMissions === 1
? 'bg-violet-200'
: day.completedMissions === 2
? 'bg-violet-400'
: 'bg-violet-600'
}`}
style={{
height: `${day.completedMissions * 20}px`,
}}
/>
<span className="text-xs text-gray-500">
{formatDate(day.date)}
</span>
</div>
</TooltipTrigger>
<TooltipContent>
<p>
Copy link
Collaborator

Choose a reason for hiding this comment

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

p2 : mobile learningTracker처럼처럼 몇 개 성공했는지 숫자가 보이는 편이 좋을 것 같아요~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[design] responsive web design
2 participants