WelKo

텍스트 정렬

      <div>
        {data.map((reservation) => (
          <div className="my-[20px] border-b pb-[20px]" key={reservation.id}>
            <div className="mb-[16px] flex text-[14px]">
              <span className="min-w-[80px] text-[12px] text-grayscale-500">Number</span>
              <span className="flex-grow text-left">{reservation.id}</span>
            </div>
            <div className="mb-[16px] flex text-[14px]">
              <span className="min-w-[80px] text-[12px] text-grayscale-500">Nickname</span>
              <span className="flex-grow text-left">{reservation.users.name}</span>
            </div>
            <div className="mb-[16px] flex text-[14px]">
              <span className="min-w-[80px] text-[12px] text-grayscale-500">Email</span>
              <span className="flex-grow text-left">{reservation.users.email}</span>
            </div>
            <div className="mb-[16px] flex text-[14px]">
              <span className="min-w-[80px] text-[12px] text-grayscale-500">Date</span>
              <span className="flex-grow text-left">{new Date(reservation.created_at).toLocaleString()}</span>
            </div>
            <div className="mb-[16px] flex text-[14px]">
              <span className="min-w-[80px] text-[12px] text-grayscale-500">Tourist</span>
              <span className="flex-grow text-left">{reservation.people}</span>
            </div>
            <div className="mb-[16px] flex text-[14px]">
              <span className="min-w-[80px] text-[12px] text-grayscale-500">Amount</span>
              <span className="flex-grow text-left">{formatPrice(reservation.total_price)}</span>
            </div>
            <div className="mb-[16px] flex text-[14px]">
              <span className="min-w-[80px] text-[12px] text-grayscale-500">State</span>
              <span className="flex-grow text-left">{reservation.pay_state}</span>
            </div>
            <button
              className="w-full rounded-lg border p-2 text-[14px] font-semibold text-grayscale-700"
              onClick={() => handleChat(reservation.posts, reservation.users.id)}
            >
              Message Tourist
            </button>
          </div>
        ))}
      </div>

min-w-[80px]:

• min-w-[80px]는 최소 너비를 80픽셀로 설정합니다.
• Number, Nickname, Email 등의 라벨이 동일한 위치에 정렬될 수 있도록 최소 너비를 설정하여 라벨들이 일정한 간격으로 나열되도록 합니다.

flex-grow:

• flex-grow는 해당 요소가 가용 공간을 얼마나 많이 차지할지를 결정하는 속성입니다.
• 이 예제에서는 라벨과 값 사이의 공간을 채우기 위해 사용됩니다. flex-grow를 적용한 값 <span> 요소는 가능한 한 오른쪽으로 확장되어 라벨과 값 사이의 간격을 일정하게 유지합니다.
• 이 속성을 사용함으로써 값이 라벨로부터 일정한 거리에서 시작하게 되어 보기 좋은 레이아웃을 만들 수 있습니다.

text-left:

• text-left는 텍스트를 왼쪽 정렬합니다.
• 이 속성은 값을 왼쪽 정렬되게 하여, flex-grow로 인해 텍스트가 전체적으로 오른쪽으로 밀리는 현상을 방지합니다.