전체 글

box-shadow: 0 0 10px 0 ${({ theme }) => alpha(theme.palette.primary.main, 0.3)};

import { useScroll } from 'framer-motion';import { useState, useEffect } from 'react';// 블로그용 스크롤 감지 훅const ExampleComponent = () => { const { scrollY } = useScroll(); const [isScrolling, setIsScrolling] = useState(false); useEffect(() => { const unsubscribe = scrollY.on("change", () => { setIsScrolling(true); setTimeout(() => setIsScrolling(false), 150); }); return unsubsc..

async function handleDownload() { // 요소 선택 const card = document.querySelector(".className") as HTMLElement; // 요소가 없으면 종료 if (!card) return; // 요소를 캔버스로 변환 const canvas = await html2canvas(card, { scale: 2, backgroundColor: "#ffffff", logging: false, }); // 이미지 데이터 추출 const imageData = canvas.toDataURL("image/png").split(",")[1]; // 파일명 설정 const f..

팍 사라지는게 아니고 스르륵 사라져벌임import { motion, AnimatePresence } from "motion/react";import { useState } from "react";const FadeExample = () => { const [isVisible, setIsVisible] = useState(false); const fadeVariants = { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }; return ( setIsVisible(!isVisible)}> {isVisible ? "숨기기" : "보이기"} ..

npx create-expo-app@latest .npm install exponpm install @react-navigation/native @react-navigation/native-stacknpx expo install react-native-screens react-native-safe-area-contextnpm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-react eslint-plugin-react-native prettiernpx expo start

# 소개비전캠프 기숙사 자동 배정 프로그램(V-DAS)입니다.# 정의```1. 캠프여름방학과 겨울방학 기간에 교회나 기독교 단체에서 운영하는 신앙 교육 중심의 캠프를 의미합니다.캠프는 1회당 9개의 회차로 구성되어있으며, 연평균 2회 주최됩니다.2. 신청내역해당 회차에 참가신청을 한 교회들의 성별 별 신청 인원 엑셀 파일입니다.3. 산출물 3.1) 배정 파일 기숙사 호수 별 배정된 교회들의 이름과 배정 인원이 저장된 엑셀 파일입니다. 3.2) 배정 카드 특정 교회가 기숙사 어느 방에 몇 명이 배정되었는지 배정 현황을 확인할 수 있는 이미지입니다. 3.3) 배정 현황표(라벨지) 이미지 교회 배정 현황 14개 묶음을 표로 나타낸 이미지입니다.```# 성과### 스태프> 기숙사 배정 프로세스 자동..

src / middleware.ts// middleware.tsimport { NextRequest, NextResponse } from "next/server";/** * 특정 슬러그(id)에 해당하는 커스텀 도메인을 찾아주는 함수 * 예시 함수이며 실제 서비스에서는 supabase 데이터베이스에서 조회해야 함 */function getDomainByHost(host: string): number | null { const domainMappings = [ { id: 123, customDomain: "philog.site" }, { id: 456, customDomain: "philog.site" }, { id: 789, customDomain: "philog.site" }, ];..

좋아. 아래는 커스텀 도메인 연결을 위해 Next.js 프로젝트, 도메인 구매 업체, Vercel에서 각각 해야 할 일을 정확하고 순차적으로 정리한 절차야.✅ 최종 목표사용자가 구매한 도메인 www.분양1.site로 접속하면www.분양모아.com/분양1과 같은 콘텐츠가 자동 렌더링되도록 구성🧭 전체 흐름 요약Next.js 프로젝트에서 커스텀 도메인 요청 처리 준비사용자가 도메인 구매 업체에서 DNS 설정넌 Vercel에 도메인 등록 & SSL 연결사용자가 www.분양1.site로 접속 시 → bunyang1 콘텐츠 자동 렌더링🛠️ 순서대로 정리✅ 1. Next.js 프로젝트에서 해야 하는 일단계 작업 설명1-1DB에 사용자 slug + customDomain 저장예: slug: "bunyang1", ..