지도 바운드 재설정하기
https://react-kakao-maps-sdk.jaeseokim.dev/docs/sample/map/setBounds
const ListMap = ({ course }: ListProps) => {
const courseList = JSON.parse(course.courseList);
const [map, setMap] = useState<kakao.maps.Map>();
let Arr: PositionType[] = [];
courseList.forEach((point: CourseListType) => Arr.push(point.position));
const bounds = useMemo(() => {
const bounds = new kakao.maps.LatLngBounds();
Arr.forEach((point) => {
bounds.extend(
new kakao.maps.LatLng(Number(point.lat), Number(point.lng))
);
});
return bounds;
}, [courseList]);
useEffect(() => {
if (map) map.setBounds(bounds);
}, [Arr]);
return (
<Map // 지도를 표시할 Container
center={{
// 지도의 중심좌표
lat: courseList[0].position.lat,
lng: courseList[0].position.lng,
}}
style={{
// 지도의 크기
width: "300px",
height: "300px",
}}
level={8} // 지도의 확대 레벨
onCreate={setMap}
draggable={false} //드래그 금지
zoomable={false} //줌 금지
>
<ListMapMarker courseList={courseList} />
</Map>
);
};
progressive image 만들기
튜토리얼
https://velog.io/@eunbinn/progressive-image-loading-react-tutorial
저용량 이미지 만드는 사이트
스켈레톤 ui 만들기
npm 문서
https://www.npmjs.com/package/react-loading-skeleton
검색 페이지에서 일어나는 layout shift를 줄여주기 위해서 min-h를 넣어서 검색된 게시물이 없더라도 어느 정도 공간은 확보되도록 해놓았다.
방법을 참고한 페이지
https://www.smashingmagazine.com/2021/06/how-to-fix-cumulative-layout-shift-issues/
styled component에서 호버했을 때 밝기 조절하는 코드
&:hover {
filter: brightness(150%);
}
https://velog.io/@hanbok159/tailwindcss-%ED%8F%B0%ED%8A%B8%EC%A0%81%EC%9A%A9
tailwind.config.ts 와 index.css에다가 global css 정리 후 사용
extend 안에 넣으면 기존에 있던것에 추가가 되는 것이고, 그냥 밖에 있는 것은 완전히 새로 설정하는 것이다.
//tailwind.config.js
module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx}"],
darkMode: false,
theme: {
extend: {
screens: {
"3xl": "1700px",
sm: "414px",
xs: { min: "375px", max: "414px" },
},
colors: {
error: "#B3261E",
like: "#EC6762",
correct: "#50AA72",
gray: {
"00": "#FBFBFB",
"01": "#F7F8F9",
"02": "#E9EBED",
"03": "#CBCDD2",
"04": "#A0A4A8",
"05": "#474C51",
"06": "#262829",
},
},
},
fontFamily: {
sans: ["noto-sans-cjk-kr", "sans-serif"],
eng: ["Montserrat", "sans-serif"],
},
},
variants: {
extend: {},
},
plugins: [],
};
//index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap");
@layer utilities {
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
.display1 {
font-weight: 700;
font-size: 100px;
line-height: 100px;
letter-spacing: -0.25px;
}
.display2 {
font-weight: 700;
font-size: 57px;
line-height: 80px;
letter-spacing: -0.25px;
}
.title1 {
font-weight: 700;
font-size: 32px;
line-height: 40px;
letter-spacing: -0.25px;
}
.loading {
filter: blur(10px);
clip-path: inset(0);
}
.loaded {
filter: blur(0px);
transition: filter 0.5s linear;
}
}
}
한글 폰트를 적용하기 위해 public 안의 index.html에 adobe에서 복사한 script를 넣어주었다
영어 폰트는 index.css에 import 해주었다 .
기본 폰트를 전체적으로 변경하고 싶으면은 tailwind.config.ts 안의 font-family에서 sans 안에 있는 폰트를 바꿔주면 된다.
inline-height란 정확히 뭔가?
https://m.boostcourse.org/cs120/lecture/92923
typescript에서 styled - component에 props 내려주기
https://thsd-stjd.tistory.com/134
나는 상황에 따라 밝기를 다르게 해주고 싶어서 이렇게 코드를 작성하였다.
const StMap = styled.div<{ category: string }>`
opacity: 0%;
${(props) => (props.category === "MY" ? "filter: Brightness(20%)" : null)};
`;
'개발자 되는 중 > TIL&WIL' 카테고리의 다른 글
내배캠 TIL 2023.03.03 (0) | 2023.03.03 |
---|---|
내배캠 TIL 2023.03.02 (0) | 2023.03.02 |
내배캠 TIL 2023.02.24 (0) | 2023.02.24 |
내배캠 TIL 2023.02.23 (0) | 2023.02.23 |
내배캠 TIL 2023.02.22 (0) | 2023.02.23 |