2차 프로젝트 - 펀딩사이트제작 (TailwindCSS+Styled in Component)

벌써 엘리스에서 교육받은 지 3달이 지나가고, 마지막 프로젝트에 돌입했다.

팀원은 다들 모르는 사이였지만, 실력자들이 있어서 동기부여가 많이 되는 중이다!
우리가 어제 pigma로 대충 와이어 프레임을 짠 뒤,
페이지 기능을 하나씩 맡아 프로젝트를 진행하기로 했다.

(나는 저번과 똑같이 로그인 페이지를 맡게 되었다...)

 

서비스 사이트명도 팀원당 1개씩 생각해 와서
투표로 하기로 했다!
결과는, 내가 구상해 온 

"모두의 펀딩 - Modu"

에서 파생된 
"모두의 펀딩 - Modding(모딩)"
으로 확정되었다.

(모딩이 조금 더 MZ 스럽고 친근감 있는 네이밍 같아서 만족한다!)

 

import axios from 'axios';
import React, { useState, ChangeEvent } from 'react';
import { useNavigate } from 'react-router-dom';
import tw from 'tailwind-styled-components';
import { Link } from 'react-router-dom';

interface NavLinkProps {
    to: string;
  }

const Container = tw.div`
  py-28 flex flex-col items-center 
`;

const NavContainer = tw.div`
  flex justify-between w-[600px] text-lg font-bold text-white text-center
`;

const NavLeftContainer = tw.div`
  w-[240px] h-[60px] rounded-tr-[24px]  border-b-[60px] border-b-[#D9D9D9]/[.1] border-l-[35px] border-l-[#D9D9D9]/[.1] border-r-[60px] border-r-transparent
`;

const NavLeftButton = tw.button`
  w-[150px] h-[52px]
`;


const NavRightContainer = tw.div`
bg-[#D9D9D9]/[.1] bg-opacity-10 w-[150px] h-[52px] rounded-[24px] border-t-[10px]
`;


const NavRightButton = tw(Link)<NavLinkProps>`
  w-[150px] h-[52px] 
`;


const StyledForm = tw.div`
  bg-[#D9D9D9]/[.1] w-[600px] h-[600px] text-white text-lg font-bold rounded-[24px] rounded-tl-[0px] flex flex-col space-y-8 justify-center items-center
`;

const StyledInput = tw.input`
  bg-[#D9D9D9]/[.1] w-[400px] h-14 ps-8 pe-8 outline-none rounded-[24px] placeholder:text-white/[0.5]
`;

const StyledButton = tw.button`
  bg-[#D9D9D9]/[.5] w-[400px] h-14 ps-8 pe-8 outline-none rounded-[24px]
`;
const NaverButton =tw.button`
bg-green-500 w-[400px] h-14 ps-8 pe-8 outline-none rounded-[24px]
`
const KakaoButton =tw.button`
bg-yellow-400 w-[400px] h-14 ps-8 pe-8 outline-none rounded-[24px]
`

function SignInPage () {
  const navigate = useNavigate();

  const [email, setEmail] = useState<string>('');
  const [password, setPassword] = useState<string>('');

  const onChangeEmail = (e: ChangeEvent<HTMLInputElement>) => {
    setEmail(e.target.value);
  };

  const onChangePassword = (e: ChangeEvent<HTMLInputElement>) => {
    setPassword(e.target.value);
  };

  const loginUser = async () => {
    try {
      const response = await axios.post('/api/v1/auth/sign-in', {
        email,
        password,
      });
      if (response.status === 201) {
        window.alert("성공적으로 로그인되었습니다.");
      } else if (response.status === 409) {
        window.alert("아이디와 비밀번호를 확인해주세요");
      } else {
        navigate("/404");
      }
    } catch (error) {
      console.log(error);
      navigate("/404");
    }
  };


  return (
    <Container>
      <NavContainer>
        <NavLeftContainer>
        <NavLeftButton>로그인</NavLeftButton>
        </NavLeftContainer>

        <NavRightContainer>
        <NavRightButton to ="/sign-up">회원가입</NavRightButton>
        </NavRightContainer>
      </NavContainer>
      <StyledForm>
        <StyledInput
          placeholder="이메일 입력"
          onFocus={(e) => (e.target.placeholder = '')}
          onBlur={(e) => (e.target.placeholder = '이메일 입력')}
          onChange={onChangeEmail}
          value={email}
        />

        <StyledInput
          placeholder="비밀번호 입력"
          type="password"
          onFocus={(e) => (e.target.placeholder = '')}
          onBlur={(e) => (e.target.placeholder = '비밀번호 입력')}
          onChange={onChangePassword}
          value={password}
        />

        <StyledButton onClick={loginUser}>로그인하기</StyledButton>
        <NaverButton onClick={loginUser}>네이버로 로그인하기</NaverButton>
        <KakaoButton onClick={loginUser}>카카오로 로그인하기</KakaoButton>
      </StyledForm>
    </Container>
  );
};

export default SignInPage;

 

대충 이런 식으로 로그인 화면을 구성했는데
저번에 글에서도 언급한 적이 있지만,

Tailwind CSS와 Styled in Component를 합친 문법이 있다고 코치님에게 코칭받아
기존 Tailwind CSS단점에서 언급한 가독성 떨어지고 지저분한 코드를 보완하는 문법이었다.
다음 글에서 제대로 정리해 볼 생각이다!

위와 같은 코드를 입력했을 때, 최종 출력되는 화면이다.

 

다음 글에서는 Styled Component와 Tailwind를 합친 문법에 대해 제대로 정리해 보겠다.

 

프론트엔드 부트캠프, 엘리스 SW 엔지니어 트랙

 

프론트엔드 부트캠프, 엘리스 SW 엔지니어 트랙

 

 #엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript