[SP0] 모집 안내 플로팅 배너 구현 #161
Conversation
| ); | ||
| } | ||
|
|
||
| const Wrapper = styled.div` |
There was a problem hiding this comment.
comment;
3기부터는 시멘틱 태그를 최대한 사용하면 좋을 것 같아요!
| left: 50%; | ||
| bottom: 120px; | ||
| transform: translate(-50%, -50%); | ||
| z-index: 9999; |
There was a problem hiding this comment.
suggestion;
z-index 단위( ex. 10단위로 증가 )도 정하면 좋을 것 같아요!
| if (timeDiff === 'prepare') { | ||
| return <> </>; | ||
| } | ||
| if (timeDiff === 'timeEnd') { | ||
| return <>{props.endMessage}</>; | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| {props.prefix} | ||
| {timeDiff.days}일 {padZero(timeDiff.hours)}:{padZero(timeDiff.minutes)}: | ||
| {padZero(timeDiff.seconds)} | ||
| {props.suffix} | ||
| </> |
There was a problem hiding this comment.
suggestion;
이렇게 작성하면 timeDiff에 대한 return 값을 더 쉽게 파악할 수 있을 것 같아요!
if (timeDiff === 'prepare') {
return <> </>;
}else if (timeDiff === 'timeEnd') {
return <>{props.endMessage}</>;
}else{
return (
<>
{props.prefix}
{timeDiff.days}일 {padZero(timeDiff.hours)}:{padZero(timeDiff.minutes)}:
{padZero(timeDiff.seconds)}
{props.suffix}
</>
)
}
|
|
||
| type TimeObj = ReturnType<typeof convertMsIntoDate>; | ||
|
|
||
| const Timer: FC<TimerProps> = (props) => { |
| return ( | ||
| <> | ||
| {props.prefix} | ||
| {timeDiff.days}일 {padZero(timeDiff.hours)}:{padZero(timeDiff.minutes)}: |
There was a problem hiding this comment.
timeDiff객체가 이 스트링을 다 뽑아주면 어떨까용!?
There was a problem hiding this comment.
convertMsIntoDate 가 뽑아준 timeDiff를 갖고 이 스트링을 뽑아주는 함수를 만들어 쓴다면 좋을 것 같아요!!
| @@ -0,0 +1,7 @@ | |||
| export const convertMsIntoDate = (milliseconds: number) => { | |||
| const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24)); | |||
There was a problem hiding this comment.
1000 은 1초, 1000 * 60은 1분, 1000 * 60 * 60은 1시간 .. 등등 다 의미가 있는 값들이어서, 상수로 정의해서 써보면 어떨까요!?
const SECOND = 1000;
const MINUTE = SECOND * 60;
const HOUR = MINUTE * 60;
const DAY = HOUR * 24;요런 식으로요!!
| border-radius: 12px; | ||
| } | ||
|
|
||
| cursor: ${({ isMobile }) => (isMobile ? 'pointer' : 'auto')}; |
There was a problem hiding this comment.
모바일일 때에는 커서 속성이 있으나 없으나 비슷하게 보여서 굳이 나누지 않아도 될듯합니다!!
There was a problem hiding this comment.
그리고 모바일인지 판단해서 처리하는 건 @media 로도 할 수 있어서 프롭으로 넘겨주지 않아도 될 것 같아요!!
useIsMobile 훅이,
- 기기 너비
- 사용자가 접속한 브라우저 환경
을 보고 모바일인지 데스크탑인지 판단하는 거라고 저도 처음에 생각했으나,
기기 너비만 보기 때문에 @media(max-width: 766px)이랑 동작이 똑같습니다!
| import SoptSymbol from '@src/views/MainPage/assets/sopt-symbol.svg'; | ||
| import dayjs from 'dayjs'; | ||
|
|
||
| const TARGET_DATE = dayjs('2023-09-09T18:00:00+09:00').toDate(); |
There was a problem hiding this comment.
new Date('2023-09-04:18:00');라고 해도 같은 값이 나올 텐데, 그것과의 차이는 무엇인가요!?
Summary
Screenshot
Comment