Vue로 만드는 대표기업 서비스

Vue 3 + ref로 상품 카드 그리드를 만들어줘.
각 카드: 이미지 / 제목 / 가격 / 장바구니 버튼.

Pinia로 장바구니 스토어를 설계해줘.
add / remove / clear / total 계산 +
localStorage persist + 수량 변경 디바운스.

Alibaba 수준 이커머스 Vue 아키텍처를 설계해줘.
포함: SSR(Nuxt) / 상품 캐시 / 가상 스크롤 /
트래픽 폭주 대응 / Edge 배포 / A/B 테스트.

v-for로 이슈 리스트를 보여주고,
v-on:click으로 클릭 시 상세 페이지 이동하는 컴포넌트.

Vue Router로 이슈 목록 ↔ 상세 페이지 전환 +
useRoute로 URL 파라미터 추출 +
뒤로가기 시 스크롤 위치 복원.

GitLab 수준 코드 리뷰 UI를 설계해줘.
포함: diff 뷰어 / 인라인 코멘트 / 가상 스크롤 /
실시간 업데이트(SSE) / Composable로 로직 재사용.

v-model로 채팅 입력창 + Enter 키로 메시지 추가.
메시지는 ref<string[]>로 관리.

Pinia + Composable로 useChat을 만들어줘.
메시지 큐 / 낙관적 업데이트 /
WebSocket 모킹 + 재연결 로직.

당근 채팅 수준 UI를 설계해줘.
포함: 채널 격리 / 가상 리스트 /
오프라인 큐 + 재전송 / 알림 / 접근성.

<Transition> 컴포넌트로 모달 등장 애니메이션을 만들어줘.
fade-in + scale-up 효과.

Teleport로 모달을 body 끝에 렌더링하고,
TransitionGroup으로 카드 그리드의 추가/삭제 애니메이션을 만들어줘.

게임적 UI를 위한 Vue 패턴을 설계해줘.
포함: GSAP 통합 / 사운드 트리거 /
prefers-reduced-motion 대응 / requestAnimationFrame 게임 루프.

Vue 3 + TypeScript로 props에 타입을 명시하는
컴포넌트 예시를 만들어줘.

Composable에 제네릭을 적용해서
useFetch<T>로 다양한 응답 타입을 안전하게 다루는 코드를 만들어줘.

Apple 수준의 디자인 시스템을 Vue로 설계해줘.
포함: 토큰 / 컴파운드 컴포넌트 /
다크 모드 / 접근성(WCAG AA) / Storybook 통합.

<!-- 기업 Vue 기법 5가지 — 미니 데모 -->
<script setup lang='ts'>
import { ref, computed } from 'vue';
import { defineStore } from 'pinia';

// 1. Alibaba: Pinia 장바구니 스토어
export const useCart = defineStore('cart', () => {
  const items = ref<Array<{id: number; price: number; qty: number}>>([]);
  const total = computed(() => items.value.reduce((s, i) => s + i.price * i.qty, 0));
  function add(item) {
    const found = items.value.find(i => i.id === item.id);
    if (found) found.qty += 1; else items.value.push({ ...item, qty: 1 });
  }
  return { items, total, add };
});

// 2. GitLab: useFetch composable
import { onMounted } from 'vue';
export function useFetch<T>(url: string) {
  const data = ref<T | null>(null);
  const loading = ref(true);
  onMounted(async () => {
    try {
      const r = await fetch(url);
      data.value = await r.json();
    } finally {
      loading.value = false;
    }
  });
  return { data, loading };
}

// 3. 당근: useChat (낙관적 + 재연결)
export function useChat(channelId: string) {
  const messages = ref<Array<{id: string; text: string; pending?: boolean}>>([]);
  function send(text: string) {
    const tempId = crypto.randomUUID();
    messages.value.push({ id: tempId, text, pending: true });
    // ws.send + 서버 ack 후 pending 제거 ...
  }
  return { messages, send };
}
</script>

<template>
  <!-- 4. Nintendo: Transition -->
  <Transition name='fade-scale'>
    <div v-if='showModal' class='modal'>모달 내용</div>
  </Transition>

  <!-- Teleport로 모달을 body 끝에 -->
  <Teleport to='body'>
    <div v-if='showOverlay' class='overlay' />
  </Teleport>
</template>

<style scoped>
.fade-scale-enter-active, .fade-scale-leave-active {
  transition: all 0.3s ease;
}
.fade-scale-enter-from, .fade-scale-leave-to {
  opacity: 0; transform: scale(0.95);
}
</style>