create-account.tsximport { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";import logo from "/logo.svg"import { auth } from "../firebase";import { useState } from "react";import { Link, useNavigate } from "react-router-dom";import { Error,} from "../component/auth-components";import { FirebaseError } from "firebase/app";import GithubButton from "../component/gitdub-btn";i..

home.tsximport { styled } from "styled-components";import PostTweetForm from "../component/post-tweet-form";import Timeline from "../component/timeline";// Wrapper 컴포넌트를 정의합니다.// display를 grid로 설정하여 요소들을 격자 형태로 배치하고,// gap 속성을 사용해 요소 간의 간격을 50px로 설정합니다.// overflow-y 속성을 scroll로 설정하여 수직 스크롤이 가능하게 하고,// grid-template-rows 속성을 사용해 행의 비율을 설정합니다.const Wrapper = styled.div` display: grid; gap: 50px;..

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 객체를 생성합니..