라이브러리

Next.js 15과 styled-components를 사용할 때 theme 자동완성이 되지 않는 이유는 주로 TypeScript 설정과 styled-components의 ThemeProvider 타입 지정 문제 때문이야. 해결 방법을 정리해줄게.✅ 해결 방법1. styled-components 타입 정의 추가먼저 styled-components의 DefaultTheme 타입을 확장해야 해.styled.d.ts 파일을 프로젝트의 @types 폴더나 src 폴더 안에 추가:// src/styled.d.tsimport "styled-components";declare module "styled-components" { export interface DefaultTheme { colors: { ..

배경react-dnd는 drag 시작 시에 item의 최신 상태는 잘 추적하지만, drop시에는 최신 상태를 추적하지 못한다.이로 인해, 다음과 같은 코드를 작동하면 버그가 발생한다.1. 상태 초기화2. 상태 업데이트3. 드랍 시 업데이트된 상태를 바탕으로 상태 업데이트 코드 실행4. 버그 발생즉, 드랍 전 상태를 업데이트 한 후 드랍했을 때 최신 상태를 바탕으로 다시 상태를 업데이트 하는 코드가 있다면 버그를 발생시킨다.(필자는 업데이트했던 상태가 이전 상태로 초기화되는 버그를 경험했다.) 따라서, drop 내 콜백 함수 에서는 직접 최신 상태를 추적해야 한다. 예시 코드 // hooks const [{ isOver }, drop] = useDrop(() => ({ accept: "BOX", ..

const Container = styled(Select)` width: 100%; padding: 10px 12px; font-size: 16px; border-radius: 6px; transition: border-color 0.3s ease, box-shadow 0.3s ease; background-color: white; & .MuiSelect-select { padding: 0px; } & input { border: 0px; } & fieldset { border: 1px solid #ccc; } &:hover fieldset { border-color: #ccc !important; } /* Select가 선택(포커스) 되었을 때 */ &..

"use client";import { Swiper, SwiperSlide } from "swiper/react";import "swiper/css";import { Autoplay } from "swiper/modules";import { useRef, useState } from "react";import { Swiper as SwiperType } from "swiper/types";const Product = () => { const swiperRef = useRef(null); // 스와이퍼 참조 ref const [, setSlideChangeCount] = useState(0); // 슬라이드 자동 재생 횟수 const MAX_AUTOPLAY_COUNT = 2; // 최대 자동 재생 횟..

미리보기 소개Noistack 라이브러리는 React 애플리케이션에서 간편하게 알림(Notification)과 같은 메시지를 처리할 수 있도록 도와주는 유틸리티입니다.주로 Material-UI(MUI)와 함께 사용하며, 스낵바(Snackbar)를 활용한 사용자 피드백을 쉽게 구현할 수 있습니다. 주요 특징간단한 사용법: 기본적으로 훅(hook)을 통해 알림을 호출.Customizable: 알림 스타일 및 동작을 자유롭게 설정 가능.Stacking 지원: 여러 알림을 동시에 쌓아 보여줌.1. 설치npm install notistack2. 기본 사용법1) Provider 설정SnackbarProvider를 루트 컴포넌트에 추가합니다.import React from "react";import ReactDOM f..

import { AuthStoreType } from "@/types/store/auth.type";import { create } from "zustand";import { persist, PersistStorage } from "zustand/middleware";// Custom storage for zustandconst customStorage: PersistStorage = { getItem: (name) => { const item = localStorage.getItem(name); return item ? JSON.parse(item) : null; }, setItem: (name, value) => { localStorage.setItem(name, JSON.str..

MUI 컴포넌트를 styled-component로 덮어씌울때 CSS가 적용되지 않는 경우가 있다.이럴 때에는 !important를 사용해 나의 스타일을 최우선으로 적용하도록하면 된다.const FindPassword = styled(Typography)` display: block; margin-top: 12px !important; color: var(--gray);`;

MUI + styled-components로 구현하였습니다. 코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다const Name = styled(Typography)` display: -webkit-box; /* 플렉스 박스처럼 동작 */ -webkit-box-orient: vertical; /* 수직 방향으로 텍스트 정렬 */ overflow: hidden; /* 넘치는 텍스트 숨김 */ -webkit-line-clamp: 2; /* 최대 2줄까지만 표시 */ text-overflow: ellipsis; /* 잘린 텍스트 뒤에 '...' 추가 */`;