const CommentTextField = styled(TextField)` & .MuiOutlinedInput-root { border-radius: 24px; & fieldset { border-color: ${({ theme }) => theme.palette.primary.main}; } &:hover fieldset { border-color: ${({ theme }) => theme.palette.primary.main}; } &.Mui-focused fieldset { border-color: ${({ theme }) => theme.palette.primary.main}; border-width: 2px; } }`;
라이브러리
import dayjs from "dayjs";import 'dayjs/locale/ko'; // 한국어 로케일 추가dayjs.locale('ko'); // dayjs 한국어 설정// 날짜 포맷팅 함수const formatDate = (dateString: string) => { return dayjs(dateString).format('YYYY년 MM월 DD일 HH:mm'); // '년월일 시간:분' 으로 변경}; // 사용formatDate(시간 문자열을 매개변수로 넣습니다).ex) formatDate(info.created_at)
"use client";import { CircularProgress } from "@mui/material";const Loading = () => { return ;};export default Loading;
소스코드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, ..
