[React] Styledcomponents S-dot naming

프리온보딩 인턴십 1주차 과제에서 Signup, Signin 페이지에 동일한 스타일을 사용했었다.

 

지금보니 validation error message 간격이 따닥따닥 붙어있는 것이 보기 안예쁘긴 하다..

 

처음엔 이 두 페이지에 동일한 styled comonents를 각각 작성했는데,

이 두개를 합친 파일을 만들고 각 페이지에서 import해서 쓸 수 있도록 하고싶었다.

 

이런 경우 하나의 파일에 몰아서 작성하고 import하여 적용해주는 S-dot naming 방식이 있다는 것을 알게되었다.

아래와 같이 적용해보았다.

 

styles/Sign.style.ts

import styled from 'styled-components';

export interface FormData {
  email: string;
  password: string;
}

export const Title = styled.h1`
  margin-top: 40px;
  margin-bottom: 40px;
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 2.25rem;
  text-align: center;
`;

export const AuthWrap = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-around;
`;

export const DivMarginBottom = styled.div`
  margin-bottom: 20px;
  & div {
    color: red;
  }
`;

 

pages/SignIn.tsx

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import useValidation from '../hooks/useValidation';
import { signInPostDate } from '../apis/SignAxios';
import { Button } from '../components/elements/Button';
import { InputField } from '../components/elements/InputField';
import * as S from '../styles/Sign.style';

const SignIn = () => {
  const navigate = useNavigate();
  const [formData, setFormData] = useState<S.FormData>({
    email: '',
    password: '',
  });

  const [emailStatus, passwordStatus] = useValidation(formData);

  const onChangeEmailHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      email: e.target.value,
    });
  };

  const onChangePasswordHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      password: e.target.value,
    });
  };

  const onSubmitHandler = async (e: React.FormEvent) => {
    e.preventDefault();
    const res = await signInPostDate(formData.email, formData.password);
    if (res.status !== 200) {
      alert('이메일 또는 비밀번호가 올바르지 않습니다.');
      return;
    }
    localStorage.setItem('access_token', res.data.access_token);
    navigate('/todo');
  };

  return (
    <S.AuthWrap>
      <S.Title>로그인</S.Title>
      <S.DivMarginBottom>
        <label>이메일</label>
        <InputField
          type='email'
          testname='email-input'
          onChange={onChangeEmailHandler}
          size='full'
        />
        <div>{emailStatus.message}</div>
      </S.DivMarginBottom>
      <S.DivMarginBottom>
        <label>비밀번호</label>
        <InputField
          type='password'
          testname='password-input'
          onChange={onChangePasswordHandler}
          size='full'
        />
        <div>{passwordStatus.message}</div>
      </S.DivMarginBottom>
      <S.DivMarginBottom>
        <Button
          type='submit'
          testname='signin-button'
          disabled={!(emailStatus.status && passwordStatus.status)}
          onClick={onSubmitHandler}
          size='lr'>
          로그인
        </Button>
      </S.DivMarginBottom>
    </S.AuthWrap>
  );
};

export default SignIn;

 

[References]

https://medium.com/inturn-eng/naming-styled-components-d7097950a245

Naming Styled Components