🚤 성장일지 7.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!

⚛ (7.0)<완전 개편> 파인만 학습법을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다.

Toast 컴포넌트 구현하기

살짝 애매한 감이 있지만, tailwindcss를 사용해서 Toast 컴포넌트를 구현해보았다. 우선 브라우저 하단에서 위로 튀어나오는 토스트와 그 반대로 이동하는 토스트를 구현하고 싶었기 때문에 아래와 같이 tailwindcss config를 설정하였다.

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    keyframes: {
      slideUpFadeOut: {
        '0%': { transform: 'translateY(0)', opacity: '100' },
        '90%': { transform: 'translateY(-90%)', opacity: '100' },
        '100%': { transform: 'translateY(-100%)', opacity: '0' },
      },
      slideDownFadeOut: {
        '0%': { transform: 'translateY(-100%)', opacity: '100' },
        '90%': { transform: 'translateY(-10%)', opacity: '100' },
        '100%': { transform: 'translateY(0)', opacity: '0' },
      },
    },
    animation: {
      slideUpFadeOut: 'slideUpFadeOut 1s ease-in-out forwards',
      slideDownFadeOut: 'slideDownFadeOut 1s ease-in-out forwards',
    },
  },
  plugins: [],
};

export default config;

이렇게만 하면 사실 거의 끝이 났다. 이제는 토스트 컴포넌트를 구현하면 된다. 토스트 컴포넌트는 아래와 같이 구현하였다.

type Props = {
  children: React.ReactNode;
  direction: 'up' | 'down';
};

export default function Toast({ children, direction = 'up' }: Props) {
  if (direction === 'down') {
    return (
      <div className="fixed bottom-0 z-50 flex h-20 w-32 animate-slideDownFadeOut items-center justify-center rounded-lg bg-yellow">
        <span className="text-xl font-bold leading-xl text-black_100">{children}</span>
      </div>
    );
  }

  return (
    <div className="fixed bottom-0 z-50 flex h-20 w-32 animate-slideUpFadeOut items-center justify-center rounded-lg bg-blue">
      <span className="text-xl font-bold leading-xl text-white_100">{children}</span>
    </div>
  );
}

props로 children과 direction을 받아서 토스트의 내용은 children으로 전달하고 위에서 구현했던 애니메이션 중 하나를 direction에 따라서 적용하도록 하였다. 이제 토스트를 사용해보자.

export default function ToastMachine() {
  const [upToast, setUpToast] = useState(false);
  const [downToast, setDownToast] = useState(false);

  return (
    <>
      {upToast && <Toast direction="up">스크랩 완료!</Toast>}
      {downToast && <Toast direction="down">스크랩 취소!</Toast>}
    </>
  );
}

위와 같이 각각의 방향에 맞는 상태를 설정해주고 사용하면 된다. 이 때, 각 토스트의 상태는 특정 이벤트에 따라서 변경되도록 하면 된다. ex) 어떤 버튼을 클릭했을 때, 토스트 상태를 변경하는 handler를 전달하면 된다.

📝 회고

후아... 프로젝트를 하는 동안 코드는 엉망이지만... 그래도 어지저찌 필수 기능과 내가 좀더 욕심 냈던 부분들까지 구현을 마칠 수 있었다. 생각보다 프로젝트 기간 동안 받는 압박감(?)이 작지 않은 것 같다. 일주일을 휘리릭 보낸만큼 다시 계획부터 재정비하고 내일부터 또 열심히 달려봐야지.

참고

undefined