timeline.tsximport styled from "styled-components";import { Timestamp, collection, deleteDoc, doc, limit, onSnapshot, orderBy, query } from "firebase/firestore";import { db, storage } from '../firebase';import Tweet from "./post"; // 트윗 컴포넌트 가져오기import { Unsubscribe } from "firebase/auth";import { useEffect, useState } from "react";import { getDownloadURL, ref } from "firebase/storage";import { ..

post-tweet--form.tsximport { addDoc, collection, updateDoc } from "firebase/firestore";import { useState } from "react";import styled from "styled-components";import { auth, db, storage } from "../firebase";import { getDownloadURL, ref, uploadBytes } from "firebase/storage";// 폼 스타일 정의const Form = styled.form` display: flex; flex-direction: column; gap: 10px;`;// 텍스트 에어리어 스타일 정의const TextArea..

post.tsximport React, { useState, useEffect } from 'react';import styled from 'styled-components';import { auth, db } from '../firebase';import { doc, getDoc, updateDoc } from 'firebase/firestore';import { Timestamp } from "@firebase/firestore";import { Link } from 'react-router-dom';import Modal, { Styles } from "react-modal";import { media } from '../media-query-file';// 날짜를 표시하는 스타일드 컴포넌트cons..

profile.tsximport { styled } from "styled-components";import { auth, db, storage } from "../firebase";import { useEffect, useState } from "react";import { getDownloadURL, ref, uploadBytes } from "firebase/storage";import { updateProfile, getAuth } from "firebase/auth";import { Timestamp, collection, deleteDoc, doc, getDoc, getDocs, limit, onSnapshot, orderBy, query, setDoc, where, updateDoc } fr..

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;..