![]()
예시 코드import QuestionItem from "@/components/question/QuestionItem";import { getQuestionById } from "@/service/table/questions";import { Metadata } from "next";// ✨// 1. Next15에서는 파라미터를 비동기적으로 처리해야하며 이로 인해 타입을 프로미스 객체로 정의해야한다.// 2. 동적 라우팅에서 params의 타입은 string으로 설정해야한다.type PropsType = Promise// ✨ 동적 메타데이터 생성export async function generateMetadata({ params }: { params: PropsType }): Promise { con..
만약 supabase api key에 문제가 없을에도 불구하고 400 에러가 발생한다면 한 번에 너무 많은 데이터를 삽입하고 있는 것은 아닌지 확인해야합니다.Supabase bulk insert 1회 최대 삽입 행 개수는 30개입니다.그럼 너무 많다고 에러를 띄워줘..... 테스트 코드"use client";import { getCurrentUserUID } from "@/service/auth";import { postQuestions } from "@/service/table/questions";const page = () => { async function printUid() { const { data: uid, error } = await getCurrentUserUID(); if (..
![]()
믹스인 코드src / styles / mixins.tsimport { css } from '@emotion/react';// 믹스인 정의export const mixinFlex = (direction : "row" | "column") => css` display: flex; flex-direction: ${direction}; align-items: center; justify-content: center;`; 컴포넌트 코드"use client";import { Accordion, AccordionDetails, AccordionSummary, styled, Typography } from "@mui/material";import React from "react";import ExpandMore..
![]()
타입 정의"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, ..
설치npm install swiper/react 예시 코드"use client";import { styled } from "@mui/material";import { Swiper, SwiperSlide } from "swiper/react";import { Pagination } from "swiper/modules";import "swiper/swiper-bundle.css";const images = [ "/img/main-banner1.png", "/img/main-banner1.png", "/img/main-banner1.png",];const Carousel = () => { return ( {images.map((src, index) => ( ..
![]()
"use client";import { Accordion, AccordionDetails, AccordionSummary, styled, Typography } from "@mui/material";import React from "react";import ExpandMoreOutlinedIcon from "@mui/icons-material/ExpandMoreOutlined";type AccordionByCollegeType = { title : string; majors : string[];}const AccordionByCollege = ({title, majors}:AccordionByCollegeType) => { return ( } aria-contr..
![]()
해당 질문에 대한 레퍼런스 링크 URL이 DB에 있다.컴포넌트가 프롭스로 받은 URL을 통해 API Route에 OG 데이터를 추출요청을 보내고 해당 OG데이터를 통해 북마크를 생성한다.노션의 북마크 기능을 생각하면 될 듯 src / app / api / og / route.tsimport { NextRequest, NextResponse } from "next/server";export async function GET(req: NextRequest) { const { searchParams } = new URL(req.url); const url = searchParams.get("url"); if (!url) return NextResponse.json({ error: "URL is requi..
const GptAnswerAccordion = styled(Accordion)` width: 100%; border-radius: 8px; box-shadow: none !important; &::before { display: none; }`;
