230125_TIL

TS Styled-Component

interface를 생성하여 custom button의 속성값을 각자 다르게 적용할 수 있다.

// shared >> type.js
export interface BtnProps {
  btnWidth?: number;
  btnHeight?: number;
  delete?: string;
  edit?: string;
}

// components >> button
export default function Button(props: BtnProps) {
  console.log(props);

  return (
    <Container>
      <DeleteBtn style={{ width: props.btnWidth, height: props.btnHeight }}>
        {props.delete}
      </DeleteBtn>
      <EditBtn style={{ width: props.btnWidth, height: props.btnHeight }}>
        {props.edit}
      </EditBtn>
    </Container>
  );
}

const Container = styled.div`
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  width: 160px;
  height: 100%;
`;

const DeleteBtn = styled.div<BtnProps>`
  display: flex;
  justify-content: center;
  align-items: center;

  border: 1px solid #d0d0d0;
  border-radius: 20px;

  color: #262b7f;
  font-size: 14px;
  cursor: pointer;
  transition-duration : .3s;
  :hover {
    color: #f2f2f2;
    background-color #262b7f;
    border: 1px solid #262b7f;
  };
`;

const EditBtn = styled.div<BtnProps>`  
  display: flex;
  justify-content: center;
  align-items: center;

  border: 1px solid #d0d0d0;
  border-radius: 20px;

  color: #262b7f;
  font-size: 14px;
  cursor: pointer;

  transition-duration : .3s;
  :hover {
    color: #f2f2f2;
    background-color #262b7f;
    border: 1px solid #262b7f;
  };
`;

Firebase Login, Sign Up

처음으로 Firebase authentication에 데이터를 저장시켜보았다. (사용자 UID, 식별자)

// LoginForm.tsx (TS 사용하진 않음)

import React, {PropsWithChildren, useState} from 'react';
import Modal from '../components/Modal';
import styled from 'styled-components';
import {useNavigate} from 'react-router-dom';
import {signInWithEmailAndPassword, getAuth} from 'firebase/auth';
import {auth} from '../shared/firebase';
// React.Dispatch<React.SetStateAction<boolean>>


function LoginForm ({
  setIsNotLogin,
  setOpenModal,
}: {
  setIsNotLogin: any;
  setOpenModal: React.Dispatch<React.SetStateAction<boolean>>;
}) {
  const authService = getAuth();
  const uid = authService.currentUser?.uid;
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  console.log('email : ', email);
  console.log('PW : ', password);

  const signIn = (e: any) => {
    e.preventDefault();
    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // console.log("로그인 성공 ! : ", userCredential);
        setOpenModal(false);
      })
      .catch((error) => {
        // console.log(error);
      });
  };

  return (
    <Container>
      <form onSubmit={signIn}>
        <div className='form-inner'>
          <TitleText>로그인</TitleText>
          {/* Error! */}
          <LoginFormContainer>
            <div>
              <EmailInput
                type='email'
                name='email'
                id='email'
                placeholder='Email'
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>
            <div>
              <PwInput
                type='password'
                name='password'
                id='password'
                placeholder='Password'
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>
            <SignUpBtn
              onClick={() => {
                setIsNotLogin(true);
              }}
            >
              회원가입
            </SignUpBtn>
            <LoginBtn>로그인</LoginBtn>
          </LoginFormContainer>
        </div>
      </form>
    </Container>
  );
};
export default LoginForm;
const Container = styled.div`
  margin-top: 40px;
`;

const LoginFormContainer = styled.div`
  margin-left: 38px;
  margin-top: 30px;
`;

const TitleText = styled.h2`
  font-size: 20px;
  margin-left: 40px;
  margin-top: 60px;
`;

const EmailInput = styled.input`
  margin-bottom: 10px;
  padding: 10px;
  width: 86%;
  color: #7f7d7d;
  border: 1px solid #d0d0d0;
`;

const PwInput = styled.input`
  margin-bottom: 10px;
  padding: 10px;
  width: 86%;
  border: 1px solid #d0d0d0;
  color: #7f7d7d;
`;
const SignUpBtn = styled.button`
  border: none;
  width: 30%;
  margin-top: 18px;
  margin-left: 87px;
  margin-bottom: 5px;
  cursor: pointer;
  color: #a29f9f;
  &:hover {
    color: #262b7f;
  }
`;

const LoginBtn = styled.button`
  border: none;
  border-radius: 5px;
  padding: 8px;
  width: 86%;
  margin: 20px;
  margin-left: 0px;
  margin-top: 10px;
  position: flex;
  align-items: center;
  background-color: #262b7f;
  color: #ffffff;
  cursor: pointer;
  &:hover {
    background-color: #ffffff;
    border: 1px solid #262b7f;
    box-shadow: 1px 1px 1px 1px #262b7f;
    color: #262b7f;
  }
`;


// SignUpForm.tsx

// import Modal from "../components/Modal";
import styled from "styled-components";

import React, { useState } from "react";
import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "../shared/firebase";
import { getAuth } from "firebase/auth";

function SignUpForm({
  setIsNotLogin,
}: {
  setIsNotLogin: React.Dispatch<React.SetStateAction<boolean>>;
}) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [nickname, setNickname] = useState("");

  const authService = getAuth();
  const uid = authService.currentUser?.uid;

  // 만들어야할 데이터
  const 변수 = {
    introduce: "",
    location: "",
    nickname: "",
    position: "",
    stack: "",
    userid: uid,
  };

  console.log("email : ", email);
  console.log("PW : ", password);

  const signUpForm = (e: any) => {
    e.preventDefault();
    createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        console.log("회원가입 성공 ! :", userCredential);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  return (
    <Container>
      <form onSubmit={signUpForm}>
        <div className="form-inner">
          <TitleText>회원가입</TitleText>
          {/* Error! */}
          <SignUpFormContainer>
            <div>
              <EmailInput
                type="email"
                name="email"
                id="email"
                placeholder="Email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>
            <div>
              <NickNameInput
                type="nickname"
                name="nickname"
                id="nickname"
                placeholder="NickName"
                value={nickname}
                onChange={(e) => setNickname(e.target.value)}
              />
            </div>
            <div>
              <PwInput
                type="password"
                name="password"
                id="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>
            <div>
              <PwChekckInput
                type="password"
                name="password"
                id="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>
            <JoinBtn type="submit" onClick={() => {}}>
              회원가입
            </JoinBtn>
          </SignUpFormContainer>
        </div>
      </form>
    </Container>
  );
}

export default SignUpForm;

const Container = styled.div`
  margin-top: 40px;
`;

const SignUpFormContainer = styled.div`
  margin-left: 38px;
  margin-top: 30px;
`;

const TitleText = styled.h2`
  font-size: 20px;
  margin-left: 40px;
  margin-top: 60px;
`;

const EmailInput = styled.input`
  margin-bottom: 10px;
  padding: 8px;
  width: 86%;
  color: #d0d0d0;
`;

const NickNameInput = styled.input`
  margin-bottom: 10px;
  padding: 8px;
  width: 86%;
  color: #d0d0d0;
`;

const PwInput = styled.input`
  margin-bottom: 10px;
  padding: 8px;
  width: 86%;
  color: #d0d0d0;
`;

const PwChekckInput = styled.input`
  margin-bottom: 10px;
  padding: 8px;
  width: 86%;
  color: #d0d0d0;
`;

const JoinBtn = styled.button`
  border: none;
  border-radius: 5px;
  padding: 8px;
  width: 86%;
  margin: 20px;
  margin-left: 0px;
  margin-top: 10px;
  position: flex;
  align-items: center;
  background-color: #262b7f;
  color: #ffffff;
  cursor: pointer;
  &:hover {
    background-color: #ffffff;
    border: 1px solid #262b7f;
    box-shadow: 1px 1px 1px 1px #262b7f;
    color: #262b7f;
  }
`;