// 스와이퍼 클래스.swiper { width: 100%; height: 100%; padding: 16px 0;}// 슬라이드 클래스.swiper-slide { transition: all 0.3s ease;}// 활성화(정면) 슬라이드 클래스.swiper-slide-active { transform: scale(1) !important; z-index: 10;}// 이전,다음 슬라이드 클래스 .swiper-slide-prev, .swiper-slide-next { transform: scale(0.9) !important; opacity: 0.7;}
분류 전체보기
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" }, ];..
