[유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 4일차 과제( 로그인/회원가입 컴포넌트 )

 

2024.08.22(목) - 4일차 과제

 

 

위와 같은 UI를, 오늘 만들었던 Button, Input, Checkbox 컴포넌트를 재사용하여 만드는 것이 오늘의 과제였습니다.

 

css는 tailwind를 이용하여 작업하였는데 익숙치 않은 라이브러리라 속성 하나하나를 모두 검색해서 해야한다는 번거로움이 있었지만 하루빨리 적응해서 tailwind를 자유자재로 쓸 수 있는 프론트엔드 개발자가 되었으면 좋겠습니다.

 

App.tsx(tailwind css 부분은 지웠습니다)

import Button from './html/Button'
import Input from './html/Input'
import CheckBox from './html/CheckBox'

const App = () => {
  return (
    <>
      <div className="">
        <div className=''>
          <div className="">
            Sign Into App
          </div>
          <div className='text-[#4f4f4f] text-[14px]'>
            Please enter your detail to continue.
          </div> 
        </div>

        <div className='w-[325px] h-[337px] px-[25px] pt-[58px] items-center'>
          <Input type='text' placeholder='Enter Your Name' className=''></Input>
          <Input type='text' placeholder='Some@example.com' className=''></Input>
          <Input type='text' placeholder='Enter Password' className=''></Input>
          <CheckBox type='checkbox'>I agree with <strong>terms</strong> and <strong>policies</strong>.</CheckBox>
          <Button className=''>Sign In</Button>
          <Button className=''>Go To Log In</Button>
        </div>
      </div>
    </>
  )
}
export default App;

 

 

Button.tsx

import { twMerge } from 'tailwind-merge';

type TButtonProps = React.ComponentPropsWithoutRef<"button">;

const Button = (props:TButtonProps) => {
  const {children, className, ...rest} = props;
  return (
    <>
      <button 
        className={className)}
        {...rest}
      >
        {children}
      </button>
    </>
  )
}
export default Button;

 

 

 

Checkbox.tsx

import { useId } from "react";

type TCheckBoxProps = Omit<React.ComponentPropsWithoutRef<"input">, "type" | "id"> & {
  type: "checkbox";
}

const CheckBox = (props: TCheckBoxProps) => {
  const {children, ...rest} = props;
  const uid = useId();
  return (
    <>
      <div className='flex items-center gap-2 relative'>
        <input 
        id={uid}
        className=''
        {...rest}
        />
        <label htmlFor={uid}>{children}</label>

      </div>

    </>
  )
}
export default CheckBox;

 

 

 

Input.tsx

type TInputProps = Omit<React.ComponentPropsWithoutRef<"input">, "type"> & { 
  type: "text" | "password" | "email" | "number" | "date" 
};

const Input = (props: TInputProps) => {
  const {...rest} = props;
  return (
    <>
      <input 
        className=''
        {...rest}
      />
    </>
  )
}
export default Input;

 

 

 

출력 결과

 

 

 

 

—————————————————————

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다. #유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #React #리액트프로젝트 #프론트엔드개발자양성과정 #개발자교육과정