javascript(19)
-
[개인 포트폴리오] [클라이밍 커뮤니티 SNS] 2. 코드 분석 <github-btn.js>
import React, { useEffect } from "react";import { GoogleAuthProvider, GithubAuthProvider, signInWithRedirect, getRedirectResult,} from "firebase/auth";import { auth } from "../firebase"; // Firebase 설정import { useNavigate } from "react-router-dom";import styled from "styled-components";import { getDoc, setDoc, doc } from "firebase/firestore";import { db } from "../firebase";const Button = st..
2024.12.20 -
[개인 포트폴리오] [클라이밍 커뮤니티 SNS] 2. 코드 분석 <create-account.js>
import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";import { auth } from "../firebase";import { useState } from "react";import { Link, useNavigate } from "react-router-dom";import { FirebaseError } from "firebase/app";import GithubButton from "../component/github-btn";import styled from "styled-components";const Switcher = styled.p` color: white; a { color..
2024.12.20 -
[개인 포트폴리오] [클라이밍 커뮤니티 SNS] 2. 코드 분석 <login.js>
import { auth } from "../firebase";import React from "react";import { useState } from "react";import { Link, useNavigate } from "react-router-dom";import { FirebaseError } from "firebase/app";import { signInWithEmailAndPassword } from "firebase/auth";import GithubButton from "../component/github-btn";import styled from "styled-components";const Switcher = styled.p` color: white; a { ..
2024.12.20 -
[개인 포트폴리오] [클라이밍 커뮤니티 SNS] 2. 코드 분석 <protected-route.js>
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..
2024.12.20 -
[개인 포트폴리오] [클라이밍 커뮤니티 SNS] 2. 코드 분석 <layout.js>
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..
2024.12.20 -
[팀 포트폴리오] [Momentum 클론 웹사이트] 2. 코드 분석 <App.css>
/* 기본 스타일 초기화 */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..
2024.12.11