![]()
미리보기 설치npm install motion/reactnpm install @mui/material 코드// 라이브러리 임포트import { motion } from "motion/react";import { styled } from "@mui/material";// 컴포넌트 정의const AnimatedCircle = () => { const draw = { hidden: { rotate: 90, pathLength: 0, opacity: 0 }, visible: { pathLength: 1, opacity: 1, transition: { pathLength: { type: "spring", duration: 1.5, bounce: 0 }, ..
설치npm install @emotion/is-prop-valid shouldForwardProp 정의src / utils / mui.tsimport isPropValid from "@emotion/is-prop-valid";export const shouldForwardProp = (prop: PropertyKey) => typeof prop === "string" && isPropValid(prop) && !prop.startsWith("$"); shouldForwardProp 사용src / components / Example.tsx================================= shouldForwardProp 임포트import { shouldForwardProp } from "@/..
![]()
🧩 문제 상황Next.js, MUI, Emotion 조합으로 컴포넌트를 구현하던 중, 콘솔에 아래와 같은 에러 메시지가 떴습니다.Error: Received `true` for a non-boolean attribute `$preview`.If you want to write it to the DOM, pass a string instead: $preview="true" or $preview={value.toString()}.처음엔 단순한 경고처럼 보였지만, 실제로는 styled 컴포넌트의 boolean 커스텀 prop이 그대로 HTML DOM으로 전달되며 발생한 오류였습니다. 🔎 문제 코드 분석에러가 발생한 컴포넌트는 다음과 같습니다: {preview && 빈 공간 생성} 그리고 styled로..
예시 코드type NewStackProps = { width: number}const NewStack = styled(Stack)(({ width }) => ({ width: width})); 참고자료https://stackoverflow.com/questions/69618158/using-styled-mui-system-utility-with-additional-props-typescript Using 'styled()' MUI System utility with additional props (Typescript)I'm working on a new project with MUI System v5. I'm using styled() utility here (not styled-components)..
const StyledSwiperSlideContainer = styled(Swiper)` & .swiper-slide { display: flex; height: auto; align-items: center; } .swiper-wrapper { display: flex; align-items: stretch; }`; ...슬라이드들
![]()
코드1. 이미지 원본 비율 유지하기const PreviewImage = styled(Image)` width: auto; height: auto;`; 2. 부모 요소 너비만큼 채우기 const PreviewContainer = styled(Box)` width: 300px; min-height:300px;`;const PreviewImage = styled(Image)` width: auto; height: auto; object-fit:contain; // 이미지 비율을 유지하기 object-fit:cover; // 부모 요소 너비 꽉 채우고 넘치는 부분을 잘라내기`; 참고자료https://nextjs.org/docs/pages/api-reference/components/imag..
// 유튜브 링크 형식 변환 function formatVideoLink(link: string) { // 정규식 설명: // ^@? - 문자열 시작, @ 기호 포함 가능 (선택적) // (?:https?:\/\/)? - URL의 시작 부분, http:// 또는 https:// (선택적) // (?:www\.)? - www. 부분 (선택적) // (?:youtube\.com\/watch\?v=|youtu\.be\/) - 유튜브 도메인과 경로 패턴 (2가지 형식) // ([a-zA-Z0-9_-]{11}) - 유튜브 비디오 ID (11자리 영숫자, 언더스코어, 하이픈) // (?:[?&]si=[^&]*)? - ?si= 또는 &si= 파라미터와 그 값 (선택적) c..
![]()
배경https://iu123456px34jqvq.supabase.co/storage/v1/object/public/필자는 위 외부 도메인의 하위에 존재하는 모든 경로를 허용하려고 합니다.이를 위해서는 아래 예시 코드와 같이 작성 후 서버를 재시작 해야합니다. 예시 코드next.config.tsconst nextConfig = { reactStrictMode: true, images: { remotePatterns: [ { protocol: 'https', hostname: 'iu123456px34jqvq.supabase.co', port: '', pathname: '/storage/v1/object/public/**', }, ..
