const GptAnswerAccordion = styled(Accordion)` width: 100%; border-radius: 8px; box-shadow: none !important; &::before { display: none; }`;
분류 전체보기
import { css } from '@emotion/react';// 믹스인 정의export const mixinFlex = (direction : "row" | "column") => css` display: flex; flex-direction: ${direction}; align-items: center; justify-content: center;`;const Container = styled("div")` ${mixinFlex("row")}; padding:24px; border-radius:8px;`
질문클라이언트에서는 supabase 로그인 api호출하면 수파베이스 측에서 직접 세션 정보를 로컬 스토리지에 넣어주잖아. 근데 next.15 앱라우터로 API 라우트 사용하여 백엔드 측에서 supabase 로그인 api를 호출하면 클라이언트에 세션 정보가 자동 삽입 되지 않고 리프레쉬 토큰도 적용되지 않아. 이 떄, 나의 궁금증은 아래와 같아 1. supabase는 기본적으로 백엔드 구축을 하지 않도록 설계되어 있는가?(ex) supabase를 활용하면 next.js 15의 api 앱라우터를 사용하지 않아도 되는가?) 2. supabase와 next15 api 앱라우터를 혼합해 사용하면 세션 정보 저장이나 토큰 리프레쉬는 직접 코드로 작성해야하는가 답변1. Supabase는 기본적으로 백엔드 구축을 하..
들어가며위 프로젝트는 Typescript + Next15 + styled-components + MUI 환경을 지원합니다.다만, 기존에 styled-components가 설치되신 분들은 styled 임포트 시 mui 라이브러리를 임포트하는 것에 유의 부탁드립니다. (실수 가능성이 높습니다.) 템플릿https://github.com/LDK1009/Next_Start_Template GitHub - LDK1009/Next_Start_Template: Typescript + Next15 + styled-components + MUI 프로젝트 템플릿입니다.Typescript + Next15 + styled-components + MUI 프로젝트 템플릿입니다. - LDK1009/Next_Start_Template..
Error calling OpenAI API: Error [AxiosError]: Request failed with status code 429 at async POST 필자는 위와 같은 에러 코드를 얻었다.해당 코드는 너무 많은 요청을 보낼 수 없다는 에러 메시지인데 필자는 API 요청을 처음 보내보는 상황이었다. 아래 글을 통해 결제 수단 등록 전에 API 키를 생성해 요청하기 때문에 위와 같은 오류를 발생한 것을 알게되었다.https://stackoverflow.com/questions/75041580/openai-api-giving-error-429-too-many-requests OpenAI API giving error: 429 Too Many RequestsI am trying to..
요약Swiper에서 각 슬라이드는 콘텐츠 높이에 따라 크기가 결정된다.Swiper의 height 또는 width 값을 명시하지 않는다면 Swiper는 각 슬라이드의 콘텐츠에 높이|너비에 따라 크기가 결정된다.따라서, 항상 Swiper의 높이 또는 너비값을 명시해야한다. 전체 답변높이를 명시해야 버그가 발생하지 않는 이유는 다음과 같습니다:1. **슬라이드의 크기 결정**: `Swiper`는 슬라이드의 높이를 콘텐츠에 따라 자동으로 조정합니다. 만약 슬라이드의 높이를 명시적으로 설정하지 않으면, 슬라이드는 기본적으로 콘텐츠의 높이에 맞춰지게 됩니다. 이 경우, 슬라이드의 콘텐츠가 화면보다 작으면 슬라이드의 높이가 작아지고, 그로 인해 스크롤바가 필요하게 됩니다.2. **수직 스크롤의 필요성**: 수직 방향..
이 글은 next.js 15 + styled-components + MUI 를 사용한 프로젝트에 대해 다룹니다.이 글의 테마는 MUI의 디자인 시스템 컬러를 참고하였습니다. 0. 코드 템플릿 1. 테마 생성src/styles/theme.tsimport { createTheme } from '@mui/material/styles';export const muiTheme = createTheme({ palette: { primary: { light: "#42A5F5", main: "#2196F3", dark: "#1E88E5", }, secondary: { main: "#BA68C8", light: "#9C27B0", dark: "#7..
"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) => );..
