import React from "react";import { Navigate } from 'react-router-dom';import { useAuthState } from 'react-firebase-hooks/auth';import { getAuth } from 'firebase/auth';const auth = getAuth();// Firebase Authentication 서비스의 인스턴스를 가져오는 코드const ProtectedRoute = ({ children }) => { const [user, loading] = useAuthState(auth); if (loading) { return Loading...; } if (!user) { return ; // re..

import { Outlet, Link, useNavigate } from "react-router-dom";import styled from "styled-components";import { auth } from "../firebase";import { useState, useEffect } from "react";import { onAuthStateChanged } from "firebase/auth";import { signOut } from "firebase/auth";const Wrapper = styled.div` @media (max-width: 600px) { grid-template-rows: auto 1fr auto; /* 헤더, 메인, 푸터 */ grid-template..

라우팅을 하여 연결될 (렌더링 될) 컴포넌트를 설정하고, ProtectedRoute를 통해 인증된 사용자만 접근할 수 있는 컴포넌트를 구분하며,사용자 인증 상태 변화 (로그인이 되었는지)를  확인하여 로딩을 해제시키고, 인증 상태가 완료될 때까진 로딩 화면을 표시하게 한다 import { RouterProvider, createBrowserRouter } from "react-router-dom";import styled from "styled-components";import React, { useState, useEffect } from "react";import { auth } from "./firebase";import ProtectedRoute from "./component/protected-..

https://climbing-together.firebaseapp.com/ '벽을 보며 말해요'라는 클리이밍 커뮤니티 SNS이다클라이밍은 벽을 보고 길을 찾아 올라가는 실내 스포츠인데거기서 지인과 대화하던 중 작명 아이디어를 받았다  로고는 현존하는 로고를 보며 모작했다이미 계정이 있나요를 누르면 회원가입 화면으로 이동할 수 있다해결중인 문제는 Github 로그인이 잘 안된다는 점이다 연결이 제대로 안된 거 같기도 하다또 로그인 창이 이유를 아직 모르겠는데 로딩은 되는데 홈으로 못넘어갈 때가 간헐적으로 있다이 문제는 해결하여 이 포트폴리오의 마지막 포스팅 쯤 작성할 계획이다  한때 이용했던 고민 상담 어플리케이션 엔라이즈사의 '모씨'가 생각났다글을 많이 쓰면 카드가 터질 수 있다고 알림이 뜨고 터진 부..

/* 기본 스타일 초기화 */body { margin: 0; padding: 0; box-sizing: border-box; font-family: pretendard-regular; background-color: #282c34; color: white; text-align: center; height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; overflow-x: hidden;}/* 상단 고정 섹션 */#top-section { width: 100%; flex-shrink: 0; /* 상단 고정 */ text-align: center; pad..

import React, { useState, useEffect } from "react";import "./App.css";import { startClock } from "./js/clock";import { initializeQuotes } from "./js/quotes";import { initializeWeather } from "./js/weather";import Background from "./js/background";import FocusMode from "./jsx/FocusMode";function App() { const [username, setUsername] = useState(null); // 사용자의 이름을 저장하는 상태 변수 const [focusMode, se..