const StyledSwiperSlideContainer = styled(Swiper)` & .swiper-slide { display: flex; height: auto; align-items: center; } .swiper-wrapper { display: flex; align-items: stretch; }`; ...슬라이드들
전체 글
코드1. 이미지 원본 비율 유지하기const PreviewImage = styled(Image)` width: auto; height: auto;`; 2. 부모 요소 너비만큼 채우기 const PreviewContainer = styled(Box)` width: 300px; min-height:300px;`;const PreviewImage = styled(Image)` width: auto; height: auto; object-fit:contain; // 이미지 비율을 유지하기 object-fit:cover; // 부모 요소 너비 꽉 채우고 넘치는 부분을 잘라내기`; 참고자료https://nextjs.org/docs/pages/api-reference/components/imag..
// 유튜브 링크 형식 변환 function formatVideoLink(link: string) { // 정규식 설명: // ^@? - 문자열 시작, @ 기호 포함 가능 (선택적) // (?:https?:\/\/)? - URL의 시작 부분, http:// 또는 https:// (선택적) // (?:www\.)? - www. 부분 (선택적) // (?:youtube\.com\/watch\?v=|youtu\.be\/) - 유튜브 도메인과 경로 패턴 (2가지 형식) // ([a-zA-Z0-9_-]{11}) - 유튜브 비디오 ID (11자리 영숫자, 언더스코어, 하이픈) // (?:[?&]si=[^&]*)? - ?si= 또는 &si= 파라미터와 그 값 (선택적) c..
배경https://iu123456px34jqvq.supabase.co/storage/v1/object/public/필자는 위 외부 도메인의 하위에 존재하는 모든 경로를 허용하려고 합니다.이를 위해서는 아래 예시 코드와 같이 작성 후 서버를 재시작 해야합니다. 예시 코드next.config.tsconst nextConfig = { reactStrictMode: true, images: { remotePatterns: [ { protocol: 'https', hostname: 'iu123456px34jqvq.supabase.co', port: '', pathname: '/storage/v1/object/public/**', }, ..
getPublicUrl함수를 통해 이미지의 Public URL을 얻는데에 성공했지만 이를 태그의 src 속성에 넣어도 이미지가 보이지 않는다면 다음을 확인해야합니다.이미지의 public url을 불러오는 버킷이 public으로 설정되어 있는지 확인합니다.
1. bucket 이름에 오타가 없는지 확인하기2. bucket 정책이 올바르게 설정되어있는지 확인하기 ( 테스트 시 bucket을 public으로 설정해보는 것도 추천합니다.)3. 중복된 파일명으로 업로드 시도중인지 확인하기4. 업로드 파일명에 한글이나 공백문자 등 허용되지 않는 문자가 포함되어있는지 확인하기(하이픈, 영어, 숫자, 점 가능)5. supabase key가 제대로 설정되어 있는지 확인하기
const FileSelectButton = () => { const [file, setFile] = useState(null); function handleFileSelectChange(e: React.ChangeEvent) { const file = e.target.files?.[0]; if (file) { setFile(file); } } return ( 최대 10MB 이하 .jpg, .png 첨부가능 );};export const FileSelectButton_Con..
import dayjs from "dayjs";import React from "react";import { DemoContainer, DemoItem } from "@mui/x-date-pickers/internals/demo";import { DateCalendar } from "@mui/x-date-pickers/DateCalendar";import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider/LocalizationProvider";import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";import "dayjs/locale/ko";const CalenderE..