[WebUI]Tailwind + nextjs(card) – 2

👉🏻 카드는 웹 앱이나 모바일 앱에서 매우 많이 쓰이는 요소입니다.
Cards are a widely used element in web and mobile apps.

👉🏻 데이터를 화면에 표시할 때 카드 요소에 데이터를 담아 화면에 표현하는 경우가 매우 많습니다.
When displaying data on the screen, it is very common to present it using card elements.

👉🏻 tailwind는 아래의 웹사이트의 검색을 통해서 자세한 내용을 확인 할 수 있습니다.
You can find detailed information about Tailwind by searching on the website below.

https://tailwindcss.com/docs/installation/using-vite

👉🏻 전체 코드는 깃허브에서 확인 할 수 있습니다.
You can find the full code on GitHub.

https://github.com/gideonslife01/flm-webui

---

📁 타입스크립트 / Typescript

✔️ page.tsx는 타입스크립트를 사용합니다.
page.tsx uses TypeScript.

✔️ 만약에 에디터로 코드 오픈시 태그 부분에 빨간 줄이 생기면 아래처럼 모듈을 설치합니다.
If a red line appears under the tag section when opening the code in the editor, install the module as shown below.

✔️ vscode나 에디터가 타입스크립트를 인식할 수 있게 다음처럼 설치합니다.
Install the following so that VS Code or your editor can recognize TypeScript.

npm install -D @types/react @types/node

📁 태그 구조 / Tag structure

✔️ 카드 부분의 HTML기본 구조는 아래와 같습니다.
The basic HTML structure for the card section is as follows.

✔️ 여기서 중요하게봐야하는건 각 요소(div,p,button…)들의 배치 부분입니다.
The key aspect to focus on here is the layout of the individual elements (div, p, button, etc.).

    <main className="min-h-screen flex items-center justify-center bg-gray-50 p-4">

      {/* 카드 시작 / Start Card */}
      <div className="w-full max-w-sm bg-white rounded-2xl shadow-lg overflow-hidden">

        {/* 이미지 영역 / Image Area */}
        <div className="h-48 bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center">
          <span className="text-5xl">🚀</span>
        </div>

        {/* 텍스트 영역 / Text area */}
        <div className="p-6">
          <div className="flex items-center justify-between">
            <h2 className="text-xl font-bold text-gray-900">Freelifemakers</h2>
            <span className="px-2 py-1 text-xs font-bold bg-blue-100 text-blue-600 rounded-full">NEW</span>
          </div>
          <p className="mt-2 text-sm text-gray-400">
            Next.js + Tailwind로 만든 소개 카드입니다.<br></br>
            This is an introductory card built with Next.js and Tailwind.
          </p>

          {/* 버튼 / Button */}
          <div className="mt-6 flex gap-3">
            <button
              onClick={() => setLiked(!liked)}
              className={`flex-1 py-3 rounded-xl font-bold transition-all active:scale-95 ${liked ? 'bg-red-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}
            >
              {liked ? '❤️ 좋아요/like' : '🤍 좋아요/like'}
            </button>
            <button className="flex-1 py-3 bg-blue-500 text-white rounded-xl font-bold shadow-md hover:bg-blue-600 hover:-translate-y-0.5 transition-all active:scale-95">
              시작하기 / Start
            </button>
          </div>
          
        </div>
      </div>
      {/* 카드 끝 / card end */}
    </main>

📁 가로배치 / Horizontal layout

✔️ 각 요소들은 기본적으로 세로로 배치됩니다.
Each element is arranged vertically by default.

✔️ 요소들의 배치를 코드로 조정하려면 flex를 사용합니다.
Use flex to adjust the layout of elements via code.

✔️ 카드가 시작되는 부분에 flex를 사용하지 않은 경우입니다. 이 경우 기본 값으로 각 요소는 세로로 배치됩니다.
This is a case where flex is not used at the start of the card. In this instance, the elements are arranged vertically by default.

      {/* 카드 시작 / Start Card */}
      <div className="w-full max-w-sm bg-white rounded-2xl shadow-lg overflow-hidden">
              ... ...
      </div>

✔️ flex를 사용한 경우입니다. 이 경우 이미지와 텍스트가 가로 배치되는 것을 볼 수 있습니다.

      {/* 카드 시작 / Start Card */}
      <div className="w-full flex max-w-sm bg-white rounded-2xl shadow-lg overflow-hidden">
              ... ...
      </div>

📁 세로배치 / Vertical layout

✔️ 기본값은 세로 배치지만 정렬기능을 사용하기 위해서 flex-col를 사용합니다.

✔️ 아래처럼 버튼 부분에 아래 처럼 flex-1로 적용하고 <div className=”mt-6 flex gap-3″> 이렇게 적용하면 레이아웃이 깨질 수 있습니다.

✔️ flex-1 가로 모드에서 아이템이 차지하는 공간이 1:1 비율로 배치하는 코드입니다.

 <button
       onClick={() => setLiked(!liked)}
       className={`flex-1 py-3 rounded-xl ... ... > ... ... </button>

✔️ 그래서 코드를 다음과 같이 바꿉니다. w-full은 요소가 전체 공간을 차지하게 합니다.

✔️ 버튼이 두개 있다면 가로모드에서 w-full을 적용하면 1:1비율로 배치되고 세로 모드에서는 전체 공간을 차지 합니다.

   <button
        onClick={() => setLiked(!liked)}
        className={`w-full py-3 rounded-xl ... ...> ... ... </button?

✔️ 아래는 flex-col을 이용해서 세로 배치를 적용한 모습입니다.

— 코드 / Code

       {/* 버튼 / Button */}
          <div className="mt-6 flex-col gap-3">
            <button
              onClick={() => setLiked(!liked)}
              className={`w-full py-3 rounded-xl font-bold transition-all active:scale-95 ${liked ? 'bg-red-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}
            >
              {liked ? '❤️ 좋아요/like' : '🤍 좋아요/like'}
            </button>
            <button className="w-full py-3 bg-blue-500 text-white rounded-xl font-bold shadow-md hover:bg-blue-600 hover:-translate-y-0.5 transition-all active:scale-95">
              시작하기 / Start
            </button>
          </div>

       {/* 버튼 flex / Button flex *}
          <div className="mt-6 flex">
            <button
              onClick={() => setLiked(!liked)}
              className={`w-full py-3  ${liked ? 'bg-red-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}
            >
              {liked ? '❤️ 좋아요/like' : '🤍 좋아요/like'}
            </button>
            <button className="w-full py-3 bg-blue-500 ">
              시작하기 / Start
            </button>
          </div>

💡 flex에서 설정 값
 
1.flex 
- 요소 가로 배치 / Horizontal element layout

2.flex-col 
-  요소 세로 배치 / Vertical element arrangement

3.justify-center 
- 가로 중앙 정렬 / Center-aligned horizontally

4.items-center 
- 위 아래 중앙 정렬 / Vercital center alignment 

5.gap-3 
- 요소 사이 간격 12px / 12px spacing between elements

6.justify-between 
- 요소를 양쪽 끝으로 배치 (ex. 제목은 왼쪽, 뱃지는 오른쪽)
Position elements at both ends (e.g., title on the left, badge on the right).

📁 CSS

✔️ 세로 정렬(기본 값) / Vertical alignment (default)

        
        <style> ...
        /* 카드 본체 / Card body */
        .card {
          width: 100%;
          max-width: 384px; /* max-w-sm = 384px */
          background-color: white;
          border-radius: 16px; /* rounded-2xl */
          box-shadow: 0 10px 15px rgba(0,0,0,0.1);
          overflow: hidden;
        } ...
        </style>

✔️ 가로정렬 / Horizontal alignment(flex)

        <style> ...
        .card-actions {
          margin-top: 24px;
          display: flex;
          gap: 12px;
        } ... ...
        </style>

✔️ 세로정렬 flex / Vertical alignment flex

        <style> ...
         .card-actions {
          display: flex;
          flex-direction: column; /* vertical */
          gap: 12px;
        } ... ...
        </style>