github-btn.tsximport { GithubAuthProvider, signInWithPopup } from "firebase/auth";import { styled } from "styled-components";import { auth } from "../firebase";import { useNavigate } from "react-router-dom";// 스타일링된 버튼 컴포넌트 정의const Button = styled.span` margin-top: 50px; background-color: #9D80F5; font-weight: 500; width: 70%; color: white; padding: 10px 20px; border-radius: 50px; border..

protected-route.tsximport React from 'react';import { Navigate } from 'react-router-dom';import { useAuthState } from 'react-firebase-hooks/auth';import { auth } from '../firebase';// children prop은 보호된 라우트 내부에서 렌더링될 컴포넌트를 의미합니다. // JSX.Element 타입은 리액트 엘리먼트(UI 구성 기본 단위)를 나타냅니다.interface ProtectedRouteProps { children: JSX.Element;}// ProtectedRoute 컴포넌트: 인증이 필요한 라우트를 보호하기 위한 함수형 컴포넌트입니다.// FC: ..

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 애플리케이션의 루트를 생성합니다. 루트는 애플리케이션의 진입점이며, 모..

App.tsx// React와 ReactDOM을 사용하여 React 컴포넌트를 DOM에 렌더링하기 위한 모듈을 가져옵니다.import { RouterProvider, createBrowserRouter } from "react-router-dom";// 페이지 레이아웃, 각 라우트에 해당하는 컴포넌트들을 가져옵니다.import Layout from "./component/layout";import Home from "./routes/home";import Profile from "./routes/profile";import Login from "./routes/login";import CreateAccount from "./routes/create-account";// 스타일링을 위해 styled-com..