다양한 상태와 스토리북을 사용한 스타일링 양식

새로운 기능을 구현하고 테스트하는 동안 웹 앱 개발 속도를 개선하는 다양하고 효율적인 방법이 많이 있습니다. 그 중 하나는 UI 구성 요소를 재사용할 수 있다는 것입니다.

UI 요소를 개별적으로 개발한 다음 프로젝트에 적용하기 위해 시도하고 배웠습니다Storybook.

이 라이브러리의 장점:

다양한 JavaScript 라이브러리 및 프레임워크에 대한 통합이 있습니다

.

웹 응용 프로그램의 핵심 기능 및 구조를 변경하지 않습니다

.

테스트 가능

추가 애드온(Storybook을 개발 흐름과 교차) 및 데코레이터(그런 다음 앱에서 올바르게 작동하는 구성 요소를 사용자 정의)도 지원합니다

.

개발 플랫폼에 따라 프로젝트에 Storybook 플레이그라운드를 적용하고 실행하는 방법은 공식 문서here에서 찾을 수 있습니다.

일부 블로그 게시물을 읽으면서 제 전문 분야가 React 웹 애플리케이션이라는 것을 알게 되셨을 것입니다. 그리고 다음 예제도 React ⚛️로 구현됩니다.

조정을 마친 후 Storybook에 몇 가지 이야기를 추가해 보겠습니다. 예를 들어 제목, 상태 메시지, 소속 레이블이 있는 두 개의 다른 입력 필드 및 제출 버튼이 있는 간단한 가입 양식이 있습니다.

간단한 가입 양식을 만들고 다른 상태에서 해당 요소를 마크업하고 스타일을 지정해 보겠습니다.

먼저 <SignUpForm /> 구성 요소를 추가하고 해당 스타일로 sign-up-form.css를 가져와야 합니다.

.form {
    font-family: Roboto, sans-serif;
    margin: 0;
    padding: 0;
}

.form__title {
    letter-spacing: 1px;
    font-weight: 600;
}

.form__status {
    color: #666;
    margin-bottom: 20px;
}

.form__label {
    font-size: .8em;
    font-weight: bold;
}

.form__input {
     width: 200px;
    height: 25px;
    padding-left: 10px;
    border-radius: 10px;
    border: 1px solid darkgrey;
}

.form__button {
    width: 100px;
    height: 25px;
    border-radius: 10px;
    color: white;
    background-color: limegreen;
    border: 0;
    cursor: pointer;
    font-weight: bold;
}

.form__button–submitting {
    background-color: darkgrey;
}

.form__button–submitted {
    background-color: limegreen;
}

양식에는 세 가지 상태가 있습니다.

initial: 양식이 기본적으로 표시될 때 사용자 입력을 기다립니다

.

제출 중: 양식을 제출한 후 HTTP 요청을 수행하는 경우

제출됨: API 호출이 완료되었고 서버가 성공으로 응답했습니다.

양식 상태에 따라 일부 양식 요소가 표시되거나 숨겨지거나 다음과 같은 다른 스타일을 갖습니다.

양식을 제출하는 동안 제출 버튼이 비활성화되고 회색으로 표시됨

양식을 제출하면 사용자에게 로그인을 제안하는 표시된 메시지를 통해 성공적인 등록에 대한 알림이 표시됩니다.

다음은 <SignUpForm />에서 주입된 소품을 사용하여 <SignUpContainer />의 전체 구현입니다.

// SignUpForm.js

import React from 'react';

import './sign-up-form.css';

export const SignUpForm = ({onSubmit, state}) => {
    const submitting = state === 'submitting';
    const submitted = state === 'submitted';

    const buttonState = submitting ?
        'form__button--submitting' :
        'form__button--submitted';

    return (
        <form className="form" onSubmit={onSubmit}>
            <h1 className="form__title">Sign Up</h1>
            {
                submitted ?
                    <div className="form__status">
                      You have been signed up successfully. Sign in?
                    </div> : null
            }
            <label htmlFor="name" className="form__label">Name</label>
            <p>
                <input type="text"
                       id="name"
                       placeholder="Name"
                       disabled={submitting}
                       className="form__input"
                />
            </p>
            <label htmlFor="email" className="form__label">Email</label>

            <p>
                <input type="email"
                       id="email"
                       disabled={submitting}
                       placeholder="Email"
                       className="form__input"
                />
            </p>
            <p>
                <button disabled={submitting} 
                        className={`form__button ${buttonState}`}>
                    Submit
                </button>
            </p>
        </form>
    );
};

<SignUpContainer /> 구성 요소는 등록 양식에 대한 상태 및 메소드를 통해 등록 양식을 조작하는 상위 컨테이너 구성 요소입니다. 이 구성요소는 스토리북 기반의 스타일가이드와 관련이 없으므로 생략하겠습니다.

다음 단계는 스토리북에 스토리를 쓰는 것입니다. 양식 UI의 특정 상태를 설명하는 특정 기능을 만드는 것을 의미합니다.

//  ./stories/index.js

import React from 'react';
import {storiesOf} from '@storybook/react';
import {SignUpForm} from "../SignUpForm";

const noOp = (e) => {
    e.preventDefault();
};

storiesOf('Registration Form', module)
    .add('default', () => (
        <div><SignUpForm state="idle" onSubmit={noOp}/></div>
    ))
    .add('submitting', () => (
        <div><SignUpForm state="submitting" onSubmit={noOp}/></div>
    ))
    .add('submitted', () => (
        <div><SignUpForm state="submitted" onSubmit={noOp}/></div>
    ));

마지막으로 Storybook의 모든 스토리를 로드합니다.

// .storybook/config.js

import { configure } from '@storybook/react';

function loadStories() {
    require('../src/stories');
}

configure(loadStories, module);

이제 가입 양식은 완전히 "스토리북"입니다. 로컬 서버를 실행하여 스토리북에서 결과를 확인하세요. 내 변형은 다음과 같습니다.







이제 여러분의 앱에 대한 스타일 가이드를 만들기 위해 React 또는 다른 라이브러리와 함께 Storybook을 사용해 보고 싶은지 궁금하시기 바랍니다.

앱에 대한 스타일 가이드를 구현하는 방법에 대한 의견을 남겨주세요.

읽어 주셔서 감사합니다!

최선을 다해 코딩하세요 👩‍💻👨‍💻


Unsplash에 있는 Goran Ivos의 사진