활동 기간에 SOPT 공식 일정 안내 툴팁 추가 #913
Conversation
|
| @@ -357,6 +352,7 @@ const SCardName = styled('button', { | |||
| const SDateAndTime = styled('div', { | |||
| flexType: 'horizontalCenter', | |||
| width: '$168', | |||
| marginLeft: '$20', | |||
There was a problem hiding this comment.
참고로 ml 이라는 shortcut으로 근소하게 나마 marginLeft 를 더 빨리 슬 수 있어ㅎㅎ 관련 세팅은 stitches.config 보면 나와있어! (ml 말고도 mb, mr, mt, pl, pr 등등 여러 개야!)
| position: 'absolute', | ||
| top: '$20', | ||
| right: '$0', | ||
| zIndex: '1', |
There was a problem hiding this comment.
여기서 zIndex 를 주기보다, isolate: isolation 을 주어서 쌓임맥락을 분리하는 것이 어떨까하는 생각이야! 이렇게 zIndex 를 계속 만들게 되면, zIndex 가 무한히 증식하고.. zIndex 수가 늘어날 수록 zIndex 숫자를 키워야할 일이 많아짐 + 키울 때 찾기 힘듦의 문제를 겪을 수 있거든!
|
|
||
| width: '252px', | ||
| height: '162px', //148 + 16 | ||
| backgroundImage: `url(${sopt_schedule_tooltip.src})`, |
There was a problem hiding this comment.
그리구 아까 설명을 미처 못한 부분이 있는데, 서버 사이드 렌더링의 경우 서버에서 html 파일을 만들어서 클라이언트에 내려주기 때문에, 상대경로나 절대경로로 파일 주소를 넣는 방식으로는 서버에서 이미지를 인식하지 못해 (설령 public 폴더 안에 있다고 해도! public 폴더는 사실 자바스크립트 표준이 js 파일 말고는 아무것도 처리해줄 수 없기 때문에, js 가 아닌 이미지 파일을 import 할 수 있도록 만든, 파일 로더의 개념이라고 생각하면 될 것 같애!)
그래서 아까 낮에 이야기했다시피 리액트 같은 클라이언트 사이드 렌더링에서는 url 에 절대 경로나 상대경로만 넣었을 때 background Image 를 볼 수 있지만, 서버 사이드 렌더링 환경에서는 url 안에 아무리 맞는 경로를 넣어줘도, 경로만으로는 서버가 파일을 찾을 수 없기 때문에, 이미지를 볼 수 없는 거야..!
그래서 Next.js 는, webpack 의 file loader 를 자신에 맞게 커스텀해서, next-image-loader 라는 것을 사용해. 이 파일은
sopt-crew-frontend/node_modules/next/dist/build/webpack/loaders/next-image-loader 여기에서 확인해볼 수 있어!
여기서 export하고 있는 것이, 우리가 이미지 파일을 import 했을 때 얻게 되는 것인데, 이 export 되고 있는 것은
const stringifiedData = imageLoaderSpan.traceChild("image-data-stringify").traceFn(()=>JSON.stringify({
src: outputPath,
height: imageSize.height,
width: imageSize.width,
blurDataURL,
blurWidth,
blurHeight
}));
이 친구야! 그래서 준혁오빠가 .src 를 붙이기 전에는, 이 객체 전체를 넣고 있었던 바람에 url 이 경로를 못 찾았던 것이고, .src 를 넣어주면 정상적으로 동작하는 것이야~!
There was a problem hiding this comment.
와... 대박이다..
자세한 설명 너무 고마워!! 의문점 진짜 제대로 해결됐어!!
진짜 김현수 최고다..👍
| style={{ display: 'flex', gap: '4px', position: 'relative' }} | ||
| onClick={handleSoptScheduleOpen} | ||
| > | ||
| <div style={{ display: 'flex', gap: '4px', marginRight: '16px' }}> |
There was a problem hiding this comment.
사소하지만, 가능하면 인라인 스타일을 넣는 것보다 css 라이브러리를 활용해주면, css 라이브러리가 가지는 이점을 활용할 수 있으니 더 좋아~!
There was a problem hiding this comment.
간단한거라서 인라인스타일 쓰긴했는데..!
혹시 그럼에도 불구하고 css 라이브러리가 가지는 이점이 뭔지 물어봐도 될까? 가독성 말고 다른 이점이 있는거야??
|
|
||
| useEffect(() => { | ||
| const handleClickOutside = (event: MouseEvent) => { | ||
| if (soptScheduleRef.current && !soptScheduleRef.current.contains(event.target as Node)) { |
There was a problem hiding this comment.
event.target의 경우 기본적으로 Node || null 형식으로 타입 정의가 되어 있어서, Node로 썼어~!
| • 2차 행사 <br /> | ||
| 2024.12.07 <br /> | ||
| • 앱잼 <br /> | ||
| 2024.12.21 ~ 2025.01.25 |
There was a problem hiding this comment.
궁금한 것이, 이 친구들은 무엇인가요..? ㅋㅋㅋㅋㅋㅋㅋ 여기 코멘트에 다니까, 사라지는 걸 보아 공백 문자인 것 같네유
There was a problem hiding this comment.
맞아! 공백문자 인식하게 만드려구..
Non-breaking Space”를 의미하는 HTML entity 라고 생각하면 돼!
| }; | ||
|
|
||
| const handleSoptScheduleOpen = () => { | ||
| window.innerWidth <= 768 ? open(dialogOption) : setIsSoptScheduleOpen(true); |
There was a problem hiding this comment.
이건 window 객체에 직접 접근하는 거라, media query 를 이용하면 좋을 것 같애! 768 이면 isTablet 이런 거 사용하면 안 되려나?
There was a problem hiding this comment.
media query를 css가 아닌 일반 js 문법에서도 사용할 수 있어?
@media 와 같은 문법은 css에서만 사용가능한걸로 알고 있었는데..!
🚩 관련 이슈
📋 작업 내용
📌 PR Point
pc, 모바일별로 다른 모달 띄우기 위한 로직을 구현했습니다.
또한, PC용 툴팁에는 바깥 부분을 누르면 모달이 닫히도록 하는 로직을 직접 구현했습니다.
📸 스크린샷
PC의 경우
모바일의 경우
