컴포넌트 코드:

<script lang="ts">
  // 기본 컴포넌트 예제
  let name = $state<string>('world');
</script>

<div class="bg-slate-700 p-4 rounded">
  <h3 class="text-lg text-sky-400 mb-2">기본 컴포넌트</h3>
  <h1 class="text-sky-600">Hello {name}!</h1>
  <div class="mt-4">
    <label for="name-change-input" class="block text-white mb-2">이름 변경:</label>
    <input 
      id="name-change-input"
      type="text" 
      bind:value={name} 
      class="bg-slate-800 text-white border border-slate-600 p-2 rounded"
    />
  </div>
</div>

컴포넌트 코드:

<script lang="ts">
  // 컴포넌트 구조 예제
  import { onMount } from 'svelte';
  import ChildComponent from './ChildComponent.svelte';
  
  let count = $state<number>(0);
  let doubledCount = $derived<number>(count * 2);
  
  // 라이프사이클 예제
  onMount(() => {
    console.log('컴포넌트가 마운트되었습니다');
  });
  
  function increment(): void {
    count += 1;
  }
</script>

<div class="bg-slate-700 p-4 rounded">
  <h3 class="text-lg text-sky-400 mb-2">컴포넌트 구조 예제</h3>
  
  <div class="bg-slate-800 p-4 rounded">
    <h1 class="text-xl text-sky-500">컴포넌트 구조 데모</h1>
    <p class="text-white mt-2">카운트: {count}, 두 배: {doubledCount}</p>
    <button 
      onclick={increment} 
      class="bg-sky-600 text-white py-2 px-4 rounded mt-3 hover:bg-sky-500"
    >
      증가
    </button>
    
    <!-- 자식 컴포넌트 사용 -->
    <div class="mt-4">
      <ChildComponent message={`현재 카운트: ${count}`} />
    </div>
  </div>
</div>

컴포넌트 코드:

<script lang="ts">
  // 반응성 예제
  let count = $state<number>(0);
  
  function increment(): void {
    count += 1;
  }
</script>

<div class="bg-slate-700 p-4 rounded">
  <h3 class="text-lg text-sky-400 mb-2">반응성 예제</h3>
  <button 
    onclick={increment} 
    class="bg-orange-600 text-white border-none py-2 px-4 rounded cursor-pointer text-base mr-2 mb-2 hover:bg-orange-500"
  >
    클릭 횟수: {count}
  </button>
  <p class="text-gray-200">버튼을 클릭할 때마다 카운터가 증가합니다.</p>
</div>

컴포넌트 코드:

<script lang="ts">
  // Props 예제
  let greeting = $state<string>('Hello');
  let propsName = $state<string>('visitor');
</script>

<div class="bg-slate-700 p-4 rounded">
  <h3 class="text-lg text-sky-400 mb-2">Props 예제</h3>
  <div class="mb-4">
    <div class="flex items-center mb-4">
      <label for="greeting-input" class="mr-2 min-w-20 text-gray-200">인사말:</label>
      <input 
        id="greeting-input"
        type="text" 
        bind:value={greeting} 
        class="bg-slate-800 text-white border border-slate-600 p-2 rounded text-base"
      />
    </div>
    <div class="flex items-center mb-4">
      <label for="name-input" class="mr-2 min-w-20 text-gray-200">이름:</label>
      <input 
        id="name-input"
        type="text" 
        bind:value={propsName} 
        class="bg-slate-800 text-white border border-slate-600 p-2 rounded text-base"
      />
    </div>
  </div>
  <div class="bg-slate-800 p-4 rounded">
    <h1 class="m-0 text-xl text-sky-500">{greeting}, {propsName}!</h1>
  </div>
</div>

컴포넌트 코드:

<script lang="ts">
  // 이벤트 처리 예제
  function handleClick(): void {
    alert('버튼이 클릭되었습니다!');
  }
</script>

<div class="bg-slate-700 p-4 rounded">
  <h3 class="text-lg text-sky-400 mb-2">이벤트 처리 예제</h3>
  <button 
    onclick={handleClick} 
    class="bg-orange-600 text-white border-none py-2 px-4 rounded cursor-pointer text-base mr-2 mb-2 hover:bg-orange-500"
  >
    클릭하세요
  </button>
  <button 
    onclick={() => alert('인라인 핸들러!')} 
    class="bg-orange-600 text-white border-none py-2 px-4 rounded cursor-pointer text-base mr-2 mb-2 hover:bg-orange-500"
  >
    또 클릭하세요
  </button>
</div>

컴포넌트 코드:

<script lang="ts">
  // 조건부 렌더링 예제
  let showContent = $state<boolean>(false);
  
  function toggleContent(): void {
    showContent = !showContent;
  }
</script>

<div class="bg-slate-700 p-4 rounded">
  <h3 class="text-lg text-sky-400 mb-2">조건부 렌더링 예제</h3>
  <button 
    onclick={toggleContent} 
    class="bg-orange-600 text-white border-none py-2 px-4 rounded cursor-pointer text-base hover:bg-orange-500"
  >
    {showContent ? '내용 숨기기' : '내용 보기'}
  </button>
  
  {#if showContent}
    <div class="mt-4 p-4 bg-slate-800 rounded transition-all duration-300 ease-in-out">
      <p class="text-white">조건부로 렌더링된 내용입니다.</p>
      <p class="text-white mt-2">이 내용은 버튼을 클릭할 때만 표시됩니다.</p>
    </div>
  {/if}
</div>

컴포넌트 코드:

<script lang="ts">
  // 반복 렌더링 예제
  type Item = {
    id: number;
    name: string;
  };
  
  let items = $state<Item[]>([
    { id: 1, name: '사과' },
    { id: 2, name: '바나나' },
    { id: 3, name: '오렌지' }
  ]);
  
  function addItem(): void {
    const id = items.length + 1;
    items = [...items, { id, name: `아이템 ${id}` }];
  }
</script>

<div class="bg-slate-700 p-4 rounded">
  <h3 class="text-lg text-sky-400 mb-2">반복 렌더링 예제</h3>
  <button 
    onclick={addItem} 
    class="bg-orange-600 text-white border-none py-2 px-4 rounded cursor-pointer text-base hover:bg-orange-500"
  >
    아이템 추가
  </button>
  
  <ul class="mt-4 space-y-2">
    {#each items as item (item.id)}
      <li class="p-2 bg-slate-800 rounded text-white flex justify-between items-center">
        <span>{item.name}</span>
        <span class="text-xs text-gray-400">ID: {item.id}</span>
      </li>
    {/each}
  </ul>
</div>

컴포넌트 코드:

<script lang="ts">
  // HTML 속성 바인딩 예제
  let inputValue = $state<string>("");
  let isDisabled = $state<boolean>(false);
  let bgColor = $state<string>("bg-orange-600");
</script>

<div class="bg-slate-700 p-4 rounded">
  <h3 class="text-lg text-sky-400 mb-2">HTML 속성 바인딩 예제</h3>
  <div class="space-y-4">
    <div>
      <label for="input-value" class="block text-white mb-2">입력값:</label>
      <input
        id="input-value"
        bind:value={inputValue}
        class="p-2 rounded bg-slate-800 text-white border border-slate-600 w-full"
        placeholder="텍스트를 입력하세요"
      />
      <p class="mt-2 text-white">입력된 값: {inputValue}</p>
    </div>
  
    <div>
      <label class="flex items-center text-white">
        <input type="checkbox" bind:checked={isDisabled} class="mr-2" />
        버튼 비활성화
      </label>
    </div>
  
    <div>
      <label for="button-color" class="block text-white mb-2">버튼 색상:</label>
      <select
        id="button-color"
        bind:value={bgColor}
        class="p-2 rounded bg-slate-800 text-white border border-slate-600"
      >
        <option value="bg-orange-600">주황색</option>
        <option value="bg-blue-600">파란색</option>
        <option value="bg-green-600">초록색</option>
        <option value="bg-red-600">빨간색</option>
      </select>
    </div>
  
    <button
      disabled={isDisabled}
      class="{bgColor} text-white py-2 px-4 rounded hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed"
    >
      스타일이 적용된 버튼
    </button>
  </div>
</div>

Tailwind CSS 클래스 설명:

* 버튼 색상 클래스(bg-orange-600, bg-blue-600 등)는 각각 해당 색상의 배경색을 설정합니다.

* py-2는 위아래 패딩(padding-top, padding-bottom)을 0.5rem(8px)만큼 추가합니다.

* px-4는 좌우 패딩(padding-left, padding-right)을 1rem(16px)만큼 추가합니다.

컴포넌트 코드:

<script lang="ts">
  // 스타일링 예제
  let selectedColor = $state<string>("orange");

  // 색상 옵션
  const colorOptions = [
    {
      name: "주황색",
      value: "orange",
      bg: "bg-orange-600",
      text: "text-sky-600",
    },
    {
      name: "파란색",
      value: "blue",
      bg: "bg-blue-600",
      text: "text-blue-600",
    },
    {
      name: "초록색",
      value: "green",
      bg: "bg-green-600",
      text: "text-green-600",
    },
    {
      name: "빨간색",
      value: "red",
      bg: "bg-red-600",
      text: "text-red-600",
    },
  ];

  // 현재 선택된 색상 클래스 가져오기
  function getColorClass(type: "bg" | "text"): string {
    const colorOption = colorOptions.find((c) => c.value === selectedColor);
    return colorOption
      ? type === "bg"
        ? colorOption.bg
        : colorOption.text
      : "";
  }
</script>

<div class="bg-slate-700 p-4 rounded">
  <h3 class="text-lg text-sky-400 mb-2">Tailwind CSS 스타일링 예제</h3>

  <div class="bg-slate-800 p-4 rounded">
    <!-- Tailwind CSS를 사용한 스타일링 -->
    <div class="space-y-4">
      <h2 class={getColorClass("text") + " text-xl font-bold"}>
        Tailwind CSS 스타일링 예제
      </h2>

      <div class="space-y-2">
        <p class="text-gray-200">색상 선택:</p>
        <div class="flex gap-2 flex-wrap">
          {#each colorOptions as color}
            <button
              class={`${color.bg} text-white px-3 py-1 rounded ${selectedColor === color.value ? "ring-2 ring-white" : ""}`}
              onclick={() => (selectedColor = color.value)}
            >
              {color.name}
            </button>
          {/each}
        </div>
      </div>

      <div
        class={`p-4 rounded-lg shadow-md ${getColorClass("bg")} bg-opacity-20 border border-gray-300`}
      >
        <p class="text-white">
          선택된 색상: <span class={getColorClass("text")}>{selectedColor}</span>
        </p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div
          class="p-4 bg-slate-800 rounded-lg hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
        >
          <p class="text-white">호버 효과와 트랜지션</p>
        </div>
        <div
          class="p-4 bg-slate-800 rounded-lg hover:scale-105 transition-transform"
        >
          <p class="text-white">호버 시 확대 효과</p>
        </div>
      </div>
    </div>
  </div>
</div>

Tailwind CSS 클래스 설명:

* Tailwind CSS는 유틸리티 우선 CSS 프레임워크로, 미리 정의된 클래스를 조합하여 스타일을 적용합니다.

* 반응형 접두사(md:)는 특정 화면 크기 이상에서만 스타일을 적용합니다. (md = 768px 이상)

* 상태 접두사(hover:)는 특정 상태일 때만 스타일을 적용합니다.