미니프로젝트 클론코딩

이번주 오늘의집 클론코딩을 시작했다
프론트와 백엔드로 나누어서
작업을 진행했고
나는 그중에 우선 로그인을 구현했다.

첫째날 완성물

강의로만 클론 코딩을 해왔는데 실제로 내가 사이트를 보고 클론코딩을 해보는건 처음이었다.
이전 프로젝트에서는 나만의 생각으로 그려왔던것에 반해 이미 만들어져 있는것을 똑같이 흉내내는건
상당히 손이 많이 갔다. CSS 스킬 향상에 좋을듯... 재밌어 ㅋㅋㅋ

import React from "react";
import { styled } from "styled-components";
import Card from 'react-bootstrap/Card';

const LogIn = () => {
  return (
    <LoginMain>
    <LoginLayout>
      <Layout>
      <h2>
        <img
        src="/img/todaylogo.png"
        alt="로고 이미지"
        style={{ marginBottom: '30px',
        cursor: 'pointer', marginTop:'40px',width: '150px', height: '50px' }}
      />
      </h2>

      <form style={{width: '300px'}}>
        <LoginInput type="text" placeholder="이메일"/>
        <LoginInput type="text" placeholder="비밀번호"/>

         <LoginBtn>로그인</LoginBtn>
         
        <section style={{display: 'block', textAlign: 'center'}}>
          <LoginText>비밀번호 재설정</LoginText>
          <LoginText >회원가입</LoginText>
        </section>
      </form>

      <section style={{display: 'block', textAlign: 'center'}}>
          <LoginSns>SNS계정으로 간편 로그인/회원가입</LoginSns>
          <Card.Img 
  variant="top"
  src="/img/facebook.png"
  style={{
    objectFit: 'cover',
    width: '1.3cm',
    height: '1.3cm',
    borderRadius: '50%',
    marginRight: '20px', 
  }}
/>
<Card.Img
  variant="top"
  src="/img/kakao.png"
  style={{
    objectFit: 'cover',
    width: '1.3cm',
    height: '1.3cm',
    borderRadius: '50%',
    marginRight: '20px', 
  }}
/>
<Card.Img
  variant="top"
  src="/img/naver.png"
  style={{
    objectFit: 'cover',
    width: '1.3cm',
    height: '1.3cm',
    borderRadius: '50%',
    marginRight: '20px', 
  }}
/>
        </section>
        <p style={{    marginTop: '24px',
    color: 'rgb(194, 200, 204)',
    fontSize: '14px',
    lineHeight: '18px',
    cursor: 'pointer'}}>로그인에 문제가 있으신가요?</p>
     <LoginUnuserText>비회원 주문 조회하기</LoginUnuserText>
      
      </Layout>
      
    <LoginFooter>© bucketplace, Co., Ltd.. All Rights Reserved</LoginFooter>
    </LoginLayout>
    </LoginMain>
  );
};

export default LogIn;