라이브러리

소스코드https://github.com/LDK1009/Supabase-FCM-Push-Notification GitHub - LDK1009/Supabase-FCM-Push-Notification: Next.js + Supabase + FCM 을 활용한 푸쉬 알림 기능 소스코드 저장Next.js + Supabase + FCM 을 활용한 푸쉬 알림 기능 소스코드 저장소입니다. - LDK1009/Supabase-FCM-Push-Notificationgithub.com 프로젝트 파일별 설명public / firebase-messaging-sw.js파이어베이스 메시징 서비스워커가 작성되어있습니다.서비스워커 실행/등록, 푸쉬 알림 도착/클릭 시 실행할 코드가 작성되어 있습니다.public / manifast.js..

코드import OpenAI from "openai";// OpenAI 클라이언트 초기화const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY,});// OpenAI API 호출const completion = await openai.chat.completions.create({ model: "gpt-4o", // 사용할 AI 모델 지정 messages: [ // 시스템 메시지로 AI의 역할과 응답 형식 정의 { role: "system", content: systemPrompt }, // 사용자 메시지로 케이스 정보 전달 { role: "user", content: userPrompt }, ..

MUI 애니메이션이 적용되지 않는 이유MUI의 컴포넌트를 사용할 때 애니메이션이 정상적으로 적용되지 않는 경우가 있다. 이번 글에서는 그 원인과 해결 방법을 정리해본다.1. 애니메이션이 적용되지 않는 이유MUI 애니메이션이 동작하지 않는 주된 원인은 드로어 내부 아이템이 별도 컴포넌트로 분리되지 않았기 때문이다.MUI의 는 내부 아이템을 렌더링할 때 React.cloneElement 등을 활용해 애니메이션을 관리하는데, 이 과정에서 같은 내부 요소가 별도 컴포넌트로 분리되지 않으면 애니메이션 적용이 제한될 수 있다.즉, 내부에서 리스트 아이템을 직접 렌더링하면 애니메이션이 정상적으로 실행되지 않을 가능성이 크다.2. 해결 방법: 분리❌ 기존 코드 (애니메이션 미적용) {na..

설치npm install notistack 예시 코드src / app / layout.tsximport ClientSnackbarProvider from "@/lib/ClientSnackbarProvider";export default function RootLayout({ children,}: Readonly) { return ( {children} );} src / lib / ClientSnackbarProvider.tsx"use client";import { enqueueSnackbar, SnackbarProvider } from "notistack";const ClientSnackbarProvider = () => ..

타입 정의"use client";import React from "react";type ExampleType = { Icon: React.ReactElement;};const Example = ({ Icon }: ExampleType) => { return ( {Icon} );};export default Example;타입 정의 방법 : React.ReactElement로 정의 후 JSX로 렌더링 사용 예시 import Example from "./Example";import { Psychology, Science, Engineering, MedicalServices, Gavel, Palette, Business, School, Agriculture, Waves, ..

const GptAnswerAccordion = styled(Accordion)` width: 100%; border-radius: 8px; box-shadow: none !important; &::before { display: none; }`;

요약Swiper에서 각 슬라이드는 콘텐츠 높이에 따라 크기가 결정된다.Swiper의 height 또는 width 값을 명시하지 않는다면 Swiper는 각 슬라이드의 콘텐츠에 높이|너비에 따라 크기가 결정된다.따라서, 항상 Swiper의 높이 또는 너비값을 명시해야한다. 전체 답변높이를 명시해야 버그가 발생하지 않는 이유는 다음과 같습니다:1. **슬라이드의 크기 결정**: `Swiper`는 슬라이드의 높이를 콘텐츠에 따라 자동으로 조정합니다. 만약 슬라이드의 높이를 명시적으로 설정하지 않으면, 슬라이드는 기본적으로 콘텐츠의 높이에 맞춰지게 됩니다. 이 경우, 슬라이드의 콘텐츠가 화면보다 작으면 슬라이드의 높이가 작아지고, 그로 인해 스크롤바가 필요하게 됩니다.2. **수직 스크롤의 필요성**: 수직 방향..

"use client";import { useSidebarStore } from "@/store/SidebarStore";import { Drawer } from "@mui/material";import styled from "styled-components";import SidebarItem from "./SidebarItem";// 기존 Sidebar 컴포넌트는 유지하고, 중복된 선언을 제거합니다.const Sidebar = () => { const { isOpen, setIsOpen, items } = useSidebarStore(); const category = Object.keys(items); const RenderSidebarItems = category.map((item) => );..