[개인 포트폴리오] [트위터 클론 SNS Deli] 분석 Part. 5 'layout.tsx' & 'loading-screen.tsx'

layout.tsx

import { 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: 100%;
  padding: 50px 0px;
  width: 100%;
  max-width: 860px;
  overflow-y: hidden;
`;

const Logo = styled.img`
  width: 120px;
  height: auto;
`;

// Menu: 메뉴 항목을 포함하는 스타일드 컴포넌트. 세로 방향으로 정렬하고 요소 간의 간격을 20px로 설정
const Menu = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-width: 0; /* 요소가 넘치지 않도록 설정 */
`;

// MenuItem: 각 메뉴 항목의 스타일드 컴포넌트. 가운데 정렬하고 커서 포인터를 설정
const MenuItem = styled.div`
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
  svg {
    width: 30px;
    fill: white;
    color: #9D7FF5;
  }
  &.log-out {
    border-color: #9D80F5;
    svg {
      color: #9D80F5;
    }
  }
  min-width: 0; /* 요소가 넘치지 않도록 설정 */
`;

export default function Layout() {
// useNavigate : 특정 이벤트에 따라 사용자를 다른 페이지로 이동시키는 기능을 제공
  const navigate = useNavigate();
  const [userId, setUserId] = useState(null);

// useEffect: 상태 불러오기
  useEffect(() => {
// const currentUser = auth.currentUser;는 Firebase Authentication에서 현재 인증된 사용자를 가져오는 코드입니다.
    const currentUser = auth.currentUser;
    if (currentUser) {
      setUserId(currentUser.uid);
    }
// [] : 의존성 배열이 빈 배열 []인 경우, useEffect는 컴포넌트가 마운트될 때 한 번만 실행됩니다. 즉, 컴포넌트가 처음 렌더링된 후에만 이펙트 함수가 실행되고, 이후에는 다시 실행되지 않습니다.
  }, []);

  const onLogOut = async () => {
    const ok = confirm("로그아웃 하시겠습니까?");
    if (ok) {
      await auth.signOut();
      navigate("/login");
    }
  };

  return (
  
  	{userId ? ( ) : null}
          
  );
}

이 코드는 React 애플리케이션에서 레이아웃을 구성하는 컴포넌트를 정의합니다. 이 컴포넌트는 Firebase 인증을 사용하여 현재 사용자를 확인하고, 로그인 상태에 따라 사용자 프로필 및 로그아웃 기능을 제공하는 메뉴를 표시합니다. 또한 React Router를 사용하여 내부 페이지를 렌더링합니다.

loading-screen.tsx

import styled from "styled-components";

// Wrapper: 화면의 높이를 100vh로 설정하고, 
// 가로와 세로 축에서 중앙 정렬을 하는 flex 컨테이너입니다.
const Wrapper = styled.div`
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
`;

// Text: 'pretendard-regular' 폰트를 사용하고, 
// 굵은 글꼴(weight: 600)과 지정된 색상(#9D7FF5)을 적용하는 스타일드 컴포넌트입니다.
const Text = styled.span`
    font-family: pretendard-regular;
    font-weight: 600;
    color: #9D7FF5;
`;

// LoadingScreen: 로딩 화면을 나타내는 함수형 컴포넌트입니다.
// Wrapper와 Text 컴포넌트를 사용하여 "로딩중.." 텍스트를 화면 중앙에 표시합니다.
export default function LoadingScreen(){
    return <Wrapper><Text>로딩중..</Text></Wrapper>
}

 

이 코드는 styled-components를 사용하여 로딩 화면을 구현한 것입니다. Wrapper 컴포넌트는 화면을 가로와 세로로 중앙 정렬하고, Text 컴포넌트는 특정 폰트와 색상 스타일을 적용하여 "로딩중.."이라는 텍스트를 표시합니다.