[개인 포트폴리오] [트위터 클론 SNS Deli] 분석 Part. 7 'github-btn.tsx' & 'auth-components.ts' & 'Footer.tsx'

github-btn.tsx

import { 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: 0;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
`;

// 스타일링된 로고 이미지 컴포넌트 정의
const Logo = styled.img`
  height: 25px;
`;

export default function GithubButton() {
  const navigate = useNavigate();

  // 깃허브 로그인 버튼 클릭 이벤트 핸들러
  const onClick = async () => {
    try {
      const provider = new GithubAuthProvider(); // 깃허브 인증 제공자 객체 생성
      await signInWithPopup(auth, provider); // 팝업을 통해 깃허브로 로그인 시도
      navigate("/"); // 로그인 성공 시 홈 페이지로 이동
    } catch (error) {
      console.error(error); // 오류 발생 시 콘솔에 로그 출력
    }
  };

  return (
    <Button onClick={onClick}>
      <Logo src="/github-mark.png" />
      Continue with Github
    </Button>
  );
}

 

이 코드는 Firebase를 사용하여 GitHub 로그인을 구현한 React 컴포넌트입니다. styled-components로 스타일링을 추가했으며, 사용자가 GitHub 버튼을 클릭하면 signInWithPopup을 통해 GitHub 인증 팝업을 표시합니다. 인증이 성공하면 홈 페이지로 리디렉션됩니다.

auth-components.ts

import { styled } from "styled-components";

// 제목 스타일 정의
export const Title = styled.h1`
  font-family: pretendard-regular;
  font-size: 32px;
  color: #9D80F5;
`;

// 폼 스타일 정의
export const Form = styled.form`
  margin-top: 50px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
`;

// 입력 필드 스타일 정의
export const Input = styled.input`
  padding: 10px 20px;
  border-radius: 50px;
  border-color: #9D80F5;
  width: 100%; 
  font-size: 16px;
  font-family: pretendard-regular;

  &[type="submit"] {
    cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
  }
`;

// 에러 메시지 스타일 정의
export const Error = styled.span`
  font-family: pretendard-regular;
  font-weight: 600;
  color: #9D80F5;
`;

// 스위처 스타일 정의
export const Switcher = styled.span`
  margin-top: 20px;

  a {
    color: #9D80F5;
  }
`;

 

위 코드는 styled-components를 사용하여 다양한 HTML 요소의 스타일을 정의합니다. Title, Form, Input, Error, Switcher 컴포넌트를 스타일링하였습니다.

 

Footer.tsx

import React from 'react';
import styled from 'styled-components';

// Footer 컴포넌트의 스타일을 정의합니다.
const FooterWrapper = styled.footer`
  width: 100%;
  padding: 20px 0;
  background-color: #8E88A0;
  color: #fff;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
`;

const FooterText = styled.p`
  margin: 0;
  font-size: 14px;
`;

const Footer: React.FC = () => {
  return (
    <FooterWrapper>
      <FooterText>&copy; 2024 YOON YURIM. All rights reserved. E-mail: yyl3524@naver.com </FooterText>
    </FooterWrapper>
  );
};

export default Footer;

 

위 코드는 React와 styled-components를 사용하여 Footer 컴포넌트를 정의합니다.

• FooterWrapper: footer 태그의 스타일을 정의합니다. 전체 너비를 차지하며, 배경색은 #8E88A0, 텍스트 색상은 흰색(#fff)입니다. 또한, 페이지의 가장 아래에 고정되어 있습니다.
• FooterText: p 태그의 스타일을 정의합니다. margin을 0으로 설정하여 기본 마진을 제거하고, 폰트 크기를 14px로 설정합니다.
• Footer 컴포넌트: 위에서 정의한 스타일을 적용하여, "© 2024 YOON YURIM. All rights reserved. E-mail: yyl3524@naver.com" 텍스트를 포함하는 footer를 반환합니다.