layout.tsximport { Link, Outlet, useNavigate } from "react-router-dom";import { styled } from "styled-components";import { auth } from "../firebase";import logo from "/logo.svg"import { useState, useEffect } from "react";// Wrapper: 레이아웃을 정의하는 스타일드 컴포넌트. 그리드 레이아웃을 사용하여 두 개의 열을 만들고, 전체 높이와 최대 너비를 설정const Wrapper = styled.div` display: grid; gap: 20px; grid-template-columns: 1fr 4fr; height: 1..

media-query-file.ts// 화면 크기별 사이즈 정의const sizes = { mobile: 380, // 모바일 크기 tablet: 768, // 태블릿 크기 desktop: 1200 // 데스크탑 크기};// `media` 객체를 생성하여 각 사이즈에 대한 미디어 쿼리를 간편하게 적용할 수 있도록 합니다.// sizes 객체의 키들을 배열로 반환합니다. 이 경우 ['mobile', 'tablet', 'desktop']가 됩니다.// as Array : TypeScript에게 sizes 객체의 키들이 특정 타입임을 명시합니다. 이는 TypeScript의 타입 추론을 돕기 위해 사용됩니다.// reduce 메서드는 sizes 객체의 키 배열을 순회하며 media 객체를 생성합니..

main.tsx// React 라이브러리를 가져옵니다.import React from 'react';// ReactDOM 라이브러리를 가져옵니다. React 18부터 ReactDOM의 createRoot를 사용하여 애플리케이션의 루트를 생성합니다.import ReactDOM from 'react-dom/client';// App 컴포넌트를 가져옵니다. 이는 애플리케이션의 루트 컴포넌트입니다.import App from './App.tsx';// ReactDOM의 createRoot 메서드를 사용하여 'root'라는 id를 가진 DOM 요소를 찾아서 애플리케이션의 루트를 생성합니다.// ReactDOM.createRoot : React 애플리케이션의 루트를 생성합니다. 루트는 애플리케이션의 진입점이며, 모..