🧬 Atomic 디자인을 적용해보자.

# 아토믹 디자인 왜 사용하고 싶은지?  

팀 프로젝트에서  pages, components 폴더로 나누고 공통으로 사용하는 컴포넌트들은 components 폴더에, 해당 페이지에 사용하는 컴포넌트들은 페이지 폴더에서 관리하도록 하였다.  아토믹 구조를 적용하고 싶었지만, 적용하지 못했는데 그 이유는

 

1. 피그마가 완벽히 되지 않은 상태, 그리고 계속 구현하면서 변경될 확률이 높음.

-> 잘게 쪼개는 방식인 아토믹 구조를 적용하기에는 어려움이 생길 것 같은 생각이 들었다.

2. 개인 프로젝트가 아닌 팀 프로젝트, 정해진 기간 내에 프로젝트 마무리.

-> 구조적인 측면에 시간을 쏟는 것보다 다른 코드 부분에 집중하는 것이 맞다는 생각이 들었다.

 

이러한 이유로 과할 수도 있지만, TodoApp에 적용해보기로 하였다! 

# 아토믹 디자인

아토믹 디자인 은 화학적 관점에서 영감을 얻은 디자인 시스템으로  원자에서 분자 , 분자에서 유기체, 궁극적으로 물질로 구성되는 이런 화학점 관점에서 영감을 얻었다고 한다.

아토믹 디자인은 총 다섯 가지의 단계로 컴포넌트를 관리한다. 

 

1. Atom : 더 이상 분해할 수 없는 기본 컴포넌트. (ex : button, input, text... )

2. Molecules :  여러 개의 atom을 결합. (ex  button 과 input 결합한 search 컴포넌트 )

label + input + button = molecules

3. Organisms : Molecules 과 Atom들을 조합한 컴포넌트.

4. Templates : 실제 컴포넌트를 레이아웃에 배치하고 구조를 잡는 와이어 프레임.

5. Pages : 실제 페이지.

# Todo 에 적용해보자! 

## 🤔 고민  Todo 에 모든 단계를 적용해야 할까?  

사실 Todo 자체도 Atom 디자인을 적용하는 것이 많이 과하기에.. 모든 단계를 적용할 필요가 있는지에 대한 고민이 생겼다.

그래서 고민 끝에 organisms 단계를 제외하고 적용해보기로 하였다! 

##  ✔️ 적용

### Atoms

TodoApp 페이지는 총 6개다. (랜딩 / 회원가입 / 로그인 / Todos / 상세 Todo / Todo 생성 )

페이지에 사용되는 컴포넌트들을 모두 atoms 으로 구분하지 않고, 공통으로 사용하는 컴포넌트들만 Atoms 폴더에 구현하였다.

그리고 styled-components 를 사용해서 받아온 props.type 별로 style을 적용하여 재사용성을 높일 수 있었다! 

const ButtonWrapper = styled.button<{ btnType: string }>`
  width: ${(props) => (props.btnType === 'home' ? '50px' : '100px')};
  height: ${(props) => (props.btnType === 'home' ? '50px' : '40px')};
  background-color: ${(props) => {
    switch (props.btnType) {
      case 'add':
        return '#0a86f7';
      case 'logout':
        return 'white';
      case 'delete':
        return '#e7f5ff';
      default:
        return '#0a86f7';
    }
  }};
  color: ${(props) => {
    switch (props.btnType) {
      case 'logout':
        return '#228be6';
      case 'delete':
        return '#228be6';
      default:
        return 'white';
    }
  }};
  border: none;
  border-radius: ${(props) => (props.btnType === 'home' ? '50%' : '10px')};
  cursor: pointer;
`;

interface TitleProps {
  title: string;
  type: string;
}

const Title = ({ title, type }: TitleProps) => {
  return <TitleWrapper type={type}>{title}</TitleWrapper>;
};

export default Title;

const TitleWrapper = styled.h1<{ type: string }>`
  font-size: ${(props) => (props.type === 'card' ? '20px' : '30px')};
`;

### Molecules

Molecules 폴더는 todo 폴더와 user 폴더로 나누어 사용하는 컴포넌트들을 구현하였다.

Molecules로 나누는 기준은 Atoms 가 두 개 이상 포함되고, 최소한 하나 이상의 기능을 수행하도록 구현하였다.

또, 재사용을 할 수 있는지 고려해서 , 재사용이 가능하도록 구현하였는데 예를 들어 회원가입 페이지와 로그인 페이지에서 input과 button으로 구성되었기 때문에 공통 컴포넌트로 구현하였는데, page에서 AccountForm에 url을 props로 전달해서 url에 따라 회원 가입 or 로그인으로 구별해서 post 요청을 보내는 방식으로 해보았다. (-> 이 방법이 괜찮은 것인지.. 잘 모르겠다..)

회원가입, 로그인 텍스트를 제외하고는 똑같은 것을 볼 수 있다!

  const onClick = async () => {
    if (url == 'create') {
      try {
        await instance.post(`/users/${url}`, {
          email: account.email,
          password: account.password,
        });
        navigate('/signin');
      } catch (err) {
        if (err instanceof Error) {
          SnackBar(err.message, 'error');
        }
      }
    } else {
      try {
        const res = await instance.post(`/users/${url}`, {
          email: account.email,
          password: account.password,
        });
        window.localStorage.setItem('token', res.data.token);
        setLoginState(true);
        navigate('/todolist');
      } catch (err) {
        if (err instanceof Error) {
          SnackBar(err.message, 'error');
        }
      }
    }
  };

pages / 로그인 , 회원가입

### Template

레이아웃! Todo 생성 / 리스트 / 상세보기에서 적용되는 레이아웃이 모두 똑같기 때문에 한번 만들어 보았다.

import React from 'react';
import styled from 'styled-components';

const Template = ({ children }: { children: React.ReactNode }) => {
  return <Container>{children}</Container>;
};

export default Template;

const Container = styled.div`
  display: grid;
  justify-items: center;
  padding-top: 60px;
`;

 

  return (
    <Template>
      <TodoHeader />
      <TodoCreateForm />
    </Template>
  );

### Pages 

 

# 아쉬운 점 = 부족한 점 = 유의할 점 

1. 컴포넌트 재사용성이 높아졌으나, Props Drilling 이 자칫하면 많아질 수 있어서 주의하면서 사용해야 할 것 같다. 

-> 이 부분을 주의하기 위해 모든 컴포넌트를 atoms 로 구분하지 않고, 공통적으로 많이 사용하는 컴포넌트들만 atoms 폴더에 따로 구현하였다.  다만 이런 부분도 주관적인 기준에서 분리한 것이기에, 잘했다고는 확실할 수 없다.

 

2. 단계별 분리 기준.

-> Atoms 을 구분하는 데 있어서는 어렵지 않았지만, molecules을 컴포넌트를 구현하는 기준을 정하는 것에 있어서 어려움이 있었다.

 일단 Atoms 컴포넌트가 2개 이상 들어있고, 나름의 기준으로 하나의 기능을 수행! 을 기준으로 구현하긴 했는데, TodoApp 은 구성 자체가 간단하고 Organisms 단계를 제외했기 때문에 그나마 괜찮았다. 만약 팀프로젝트 같은 복잡한 구조에서 Organisms 단계를 포함시켰다면, Molecules와 Organisms를 분리하기 위한 기준을 정하기 위해 엄청난... 고민을 했을 것 같다.

 

마지막으로 팀 프로젝트에서 아토믹 구조를 적용하지 못해서 궁금증만 커져갔는데, 작은 Todo 프로젝트지만 이렇게 적용해보고 아토믹 구조의 장단점을 체감하고 궁금증이 해소되었다! 😊 만약 다음에 아토믹 구조를 사용할 일이 생긴다면, 지금 느낀 장단점을 기억하면서!  최대한 단점을 줄일 수 있도록 노력하자 !