[Design] Mobile ver. - ApplyPage, ReviewPage 구현 #401
Conversation
" design: FileInput 반응형
…ing-frontend into design/#375_mobile-apply
|
lydiacho
changed the title
| <nav | ||
| className={`${container[isScrollingDown && !isScrollTop ? 'scrollDown' : 'scrollUp']} ${containerVar[isReview && deviceType === 'TAB' ? 'REVIEW_TAB' : deviceType]}`}> |
There was a problem hiding this comment.
태블릿뷰일 경우, ReviewPage에 임시저장/제출하기 버튼이 빠져요.
따라서 타이틀과 버튼라인이 column 방향으로 배치되는 태블릿뷰에서만 ApplyPage와 ReviewPage에서의 ApplyCategory top 값이 달라지게 됩니다
| backgroundColor: theme.color.white, | ||
| borderBottom: `2px solid transparent`, | ||
| minWidth: 104, |
There was a problem hiding this comment.
width가 vw에 따라 줄어들게 해두어서,
375뷰에서의 width값으로 최소너비값 제한해두었어요!
|
|
||
| transition: 'all 0.2s ease-out', | ||
| transition: 'background-color 0.2s ease-out, color 0.2s ease', |
There was a problem hiding this comment.
width를 창크기에 따라 동적으로 만들어준 것과 transition이 동시 작용되어서 애니메이션이 이상하게 딜레이되어 보이더라구요
그래서 all 말고 색상으로만 한정시켜주었습니다!
| <span className={`amp-mask ${fileNameVar[getFileNameClass()]}`}>{getDisplayText()}</span> | ||
| className={`${fileLabelVar[errors[`file${id}`] ? 'error' : fileName === '' ? 'default' : 'selected']} ${fileLabelSizeVar[deviceType]}`}> | ||
| <div className={textWrapperVar[deviceType]}> | ||
| <span>참고 자료</span> |
There was a problem hiding this comment.
여기 파일 아니고 '참고 자료'로 라이팅 다르더라구요? 바꿔주었어요
Deploying sopt-recruiting-frontend with
|
| Latest commit: |
b035033
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://b93854ee.sopt-recruiting-frontend.pages.dev |
| Branch Preview URL: | https://design--375-mobile-apply.sopt-recruiting-frontend.pages.dev |
| width: 'calc(129px + (111 * ((100vw - 431px) / 337)))', | ||
| padding: '26px 0', | ||
| ...theme.font.HEADING_7_16_B, | ||
| }, | ||
| ], | ||
| MOB: [ | ||
| categoryLinkStyle, | ||
| { | ||
| width: 'calc(104px + (25 * ((100vw - 375px) / 56)))', |
There was a problem hiding this comment.
두 breakpoint 사이에서 현재 창 크기에 비례하게 컴포넌트 사이즈를 A사이즈에서 B 사이즈 늘리는 방식이고, 수식 자체는 gpt 참고했는데요,
view width가 point1 ~ point2 범위에서 컴포넌트 너비가 Apx에서 Bpx까지 커져야한다고 할 때,
범위 내에서 컴포넌트가 커지게 되는 너비의 차가 B - A 이고
그 너비의 차를 point1 ~ point2 의 범위 내에서 현재 창 크기의 비율에 따라 쪼개줘야해서
A px + (B - A) * (현재창너비 - point2) / (point1 - point2)
-> 이러면 point1일 때가 Apx, point2일 때가 Bpx이 되고, 그 사이는 현재 창너비에 따라 계산되게 됨
글로 쓰려니 설명이 너무 횡설수설인데;;ㅜㅜ 대충 수식으로 보면 이해되실 겁니다!
Related Issue : Closes #375
🧑🎤 Summary
ApplyPage, ReviewPage 전반 반응형 작업했습니다!
🧑🎤 Screenshot & Comment
🚀 ApplyCategory
받은 디자인으로 top 값을 지정해주기 어려워서
그냥 제가 픽셀 조정하면서 각 반응형 뷰별로 달라지는 헤더 사이즈에 맞게 임의로 설정해줬어요 !
그 다른 컴포넌트들은 breakpoint마다 딱딱 끊기게 사이즈가 조정되는데,
header는 view width에 비례하게 줄어들도록 요청받아서 그렇게 처리해줬습니다!
영상 따로 첨부해요
2024-08-15.6.43.27.mov