[Side Project] 스타일 작업 및 기능 추가 - 스타일 작업

추가 작업 사항

기간 : 하루

1. 공통 style-component 작성.
   • input, button, title 영역
2. 회원가입, 로그인, 마이페이지 스타일 추가
3. 마이 페이지 pagination 구현

설명

회원가입 및 로그인과 마이페이지는 기능만 만들고 스타일은 전혀 입히지 않았다.
고로, 이 녀석들에게 이쁨(?)을 만들어 주기로 했다.

방법

styled-component용 폴더를 생성하여 공통으로 사용할 스타일 작성하고
import, export로 사용한다.

공통 스타일 컴포넌트

폴더 구조

컴포넌트 작성할때 최상위는 캡쳐와 같은 구조로 잡는다.

components : Html, style 그리고 props 삽입.
components/styledComponents/braStyled.tsx : ㅇㅇㅇStyled.tsx로 스타일 작성.
containers : 상태관리(Redux, useState, ...) 및 JS 코드를 이용한 작업.

000Styled.tsx

사용할 스타일을 정의export 하고, 불러오면import하면 끝 이다.

스타일

styled-component를 처음 사용하기 때문에, 코드가 이쁘진 않다.

Button : disabled일때, 따로 스타일을 부여했다.
Input : check라는 인자를 받아 해당 값의 길이(텍스트 유무)에 따라 스타일을 다르게 주도록 했다.

스타일 추가

설명

설명은 기능이 아닌, 스타일에 대해서만 이야기한다.

InputFormWrap은 input 및 label을 감싸는 형태로 작업했기 때문에,
input과 label을 <InputForm.InputFormWrap>로 감싸준다.

check라는 인자를 생성하고 해당 인자에는 유저의 id를 받도록 했다.

form.userId는 onChange메소드가 실행 될 때 마다 변경된다. 그래서 input에 값의 유무를 판단해 style을 선언 할 수 있던것이다.

버튼은 간단하기 때문에 설명은 생략한다.

결과물

회원가입 및 로그인

완료

마무리

포스팅 내용이 너무 길어, 마이페이지 는 다음 포스트에 이어서 설명 하겠다.

끝.