라이브러리

설치npm install @tsparticles/react @tsparticles/engine @tsparticles/shape-text @tsparticles/preset-bubbles 코드"use client";import { useEffect, useState } from "react";import Particles, { initParticlesEngine } from "@tsparticles/react";import { Engine, IOptions, RecursivePartial } from "@tsparticles/engine";import { loadTextShape } from "@tsparticles/shape-text";import { loadBubblesPreset } from "@t..

import { motion, useInView } from "motion/react";import { ReactNode, useRef } from "react";export const AnimationBlock = () => { const inViewRef = useRef(null); const isInView = useInView(inViewRef); // 다른 모든 애니메이션 타입 return ( 안뇽✨ {isInView ? "visible" : "hidden"} );};

미리보기 코드////////////////////////////// 사용 예시 //////////////////////////////////////////////////////////// 스타일 컴포넌트 타입 //////////////////////////////type StyledSwitchPropsType = { $width: number; $height: number;};////////////////////////////// 스타일 컴포넌트 정의 //////////////////////////////const StyledSwitch = styled(Switch, { shouldForwardProp })` && { width: ${({ $width }) => $width}px; hei..

설치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)..

import dayjs from "dayjs";import React from "react";import { DemoContainer, DemoItem } from "@mui/x-date-pickers/internals/demo";import { DateCalendar } from "@mui/x-date-pickers/DateCalendar";import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider/LocalizationProvider";import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";import "dayjs/locale/ko";const CalenderE..

src/components/SwipeableTemporaryDrawer.tsx"use client";import * as React from "react";import Box from "@mui/material/Box";import SwipeableDrawer from "@mui/material/SwipeableDrawer";import { Typography } from "@mui/material";import { useDrawerStore } from "@/store/ui/drawerStore";type Anchor = "top" | "left" | "bottom" | "right";export default function SwipeableTemporaryDrawer() { const { anch..