[tailwind CSS] card component 만들기

React와 Tailwind CSS를 활용하여 간단한 배송 상태 UI 컴포넌트를 만들어보겠습니다. 이 컴포넌트는 배송의 현재 상태를 시각적으로 표시하며, 사용자 친화적인 디자인을 제공합니다. 아래 코드는 실제로 구현된 예제이며, 이를 하나씩 분석해보겠습니다.

export default function Home() {
  return (
    <main className="bg-gray-300 h-screen flex items-center justify-center p-5">
      <div className="bg-white shadow-md w-full max-w-[500px] p-5 rounded-xl">
        <div className="flex items-center justify-between">
          <div className="flex flex-col">
            <span className="text-gray-600 font-semibold -mb-1">In transit</span>
            <span className="text-4xl font-semibold">Coolblue</span>
          </div>
          <div className="size-12 rounded-full bg-orange-400" />
        </div>
        <div className="my-2 flex items-center gap-2">
          <span className="bg-green-400 px-2.5 py-1.5 uppercase text-white font-semibold text-sm rounded-full">Today</span>
          <span>9:30 - 10:30</span>
        </div>
        <div className="relative mb-5">
          <div className="w-full h-2 bg-gray-200 rounded-full absolute" />
          <div className="bg-green-400 h-2 w-2/4 rounded-full absolute" />
        </div>
        <div className="flex justify-between text-gray-600 items-center">
          <span>Expected</span>
          <span>Sorting center</span>
          <span>In Transit</span>
          <span className="text-gray-400">Delivered</span>
        </div>
      </div>
    </main>
  );
}

📌 코드 분석 및 설명

1. 전체 레이아웃 설정

<main className="bg-gray-300 h-screen flex items-center justify-center p-5">

'main' 태그는 화면 전체를 감싸는 컨테이너 역할을 합니다.
Tailwind CSS 클래스를 사용하여 다음과 같은 스타일을 적용했습니다

• bg-gray-300: 배경색을 연한 회색으로 설정.
• h-screen: 화면 높이를 100%로 설정.
• flex items-center justify-center: Flexbox를 사용해 수-직, 수평 중앙 정렬.
• p-5: 내부 여백(padding)을 설정.

2. 카드 스타일

<div className="bg-white shadow-md w-full max-w-[500px] p-5 rounded-xl">

• bg-white: 배경색을 흰색으로 설정.
• shadow-md: 카드에 그림자 효과를 추가하여 입체감을 줌.
• w-full max-w-[500px]: 카드의 너비를 화면 크기에 맞추되, 최대 500px로 제한.
• p-5 rounded-xl: 내부 여백(padding)과 모서리를 둥글게 처리.

3. 배송 상태 헤더

<div className="flex items-center justify-between">
  //배송 상태 텍스트
  <div className="flex flex-col">
    <span className="text-gray-600 font-semibold -mb-1">In transit</span>
    <span className="text-4xl font-semibold">Coolblue</span>
  </div>
  // 오른쪽 원형 아이콘
  <div className="size-12 rounded-full bg-orange-400"/>
</div>

1) 배송 상태 텍스트

• text-gray-600: 텍스트 색상을 회색으로 설정.
• font-semibold: 폰트를 굵게 설정.
• text-4xl: 폰트 크기를 크게 설정하여 브랜드명을 강조.

2) 오른쪽 원형 아이콘:

• rounded-full: 원형 모양으로 설정.
• bg-orange-400: 주황색 배경.

4. 배송 시간 표시

<div className="my-2 flex items-center gap-2">
  <span className="bg-green-400 px-2.5 py-1.5 uppercase text-white font-semibold text-sm rounded-full">Today</span>
  <span>9:30 - 10:30</span>
</div>

배송 시간을 강조하는 부분입니다.
1)"Today" 배지

• bg-green-400: 초록색 배경으로 강조.
• uppercase: 텍스트를 대문자로 변환.
• rounded-full: 둥근 모양의 배지 스타일.

2)시간 텍스트

• 단순히 9:30 - 10:30 형식으로 시간대를 표시.

5. 진행 상태 바

<div className="relative mb-5">
  <div className="w-full h-2 bg-gray-200 rounded-full absolute"/>
  <div className="bg-green-400 h-2 w-2/4 rounded-full absolute"/>
</div>

진행 상태 바는 현재 배송 진행 상황을 시각적으로 보여줍니다.
1)기본 바

• w-full h-2 bg-gray-200: 전체 길이의 회색 바를 생성.

2)진행된 부분

• w-2/4 bg-green-400: 진행된 부분은 초록색으로 표시하며, 길이를 50% (2/4)로 설정.

6. 상태 라벨

<div className="flex justify-between text-gray-600 items-center">
  <span>Expected</span>
  <span>Sorting center</span>
  <span>In Transit</span>
  <span className="text-gray-400">Delivered</span>
</div>

배송 상태의 각 단계를 텍스트로 표시합니다.
1) 각 단계는 Flexbox를 사용해 균등하게 분배(justify-between)했습니다.
2)
완료되지 않은 단계(예: "Delivered")는 text-gray-400으로 비활성화된 느낌을 줍니다.

결과 화면

📌 주요 포인트

• Tailwind CSS의 강력함
  Tailwind CSS는 유틸리티 클래스 기반으로 빠르고 간결하게 스타일링할 수 있습니다.
• 재사용 가능한 컴포넌트 설계
  이 코드는 다른 프로젝트에서도 쉽게 재사용할 수 있는 구조로 설계되었습니다.
• 사용자 경험(UX) 향상
  진행 상태 바(progress bar)와 명확한 텍스트 구조로 사용자에게 직관적인 정보를 제공합니다.