piratezon_new/app/pages/index.vue

<template>
  <main class="user--main">
    <div class="home--wrap">
      <div class="home--tab--wrap">
        <button class="active"><span>전체</span></button>
        <button><span>챌린지</span></button>
        <button class=""><span>퀘스트</span></button>
        <button><span>참여중</span></button>
      </div>
      <div class="home--container">
        <div class="my--part--wrap">
          <div class="">
            <h2>내 참여 현황</h2>
            <NuxtLink to="/">전체 ›</NuxtLink>
          </div>
          <div>
            <div class="part--count">
              <span>3</span>
              <p>진행중</p>
            </div>
            <div class="part--count">
              <span>1,250</span>
              <p>포인트</p>
            </div>
            <div class="part--count">
              <span>항해사</span>
              <p>등급</p>
            </div>
          </div>
        </div>
        <div class="home--card--wrap">
          <div class="thumb--wrap no--image">
            <img src="" alt="챌린지/퀘스트 타이틀 이미지">
          </div>
          <div class="card--label">
            <span class="part--label">챌린지</span>
            <!-- <span class="part--bubble blue">퀘스트</span> -->
            <span class="status--label"><i class="ico"></i>진행중</span>
          </div>
          <h3 class="card--name">여름 대물 챌린지</h3>
          <p class="card--desc">전국에서 즐기는 여름 대물 낚시 챌린지 · 최대어로 순위 경쟁</p>
          <div class="card--info">
            <div class="area">
              <i class="ico"></i> 동해
            </div>
            <div class="date">
              <i class="ico"></i> 2026/5/20-2026/6/30
            </div>
          </div>
          <NuxtLink to="/" class="card--btn">신청하기</NuxtLink>
        </div>
        <div class="home--card--wrap">
          <div class="thumb--wrap no--image">
            <img src="" alt="챌린지/퀘스트 타이틀 이미지">
          </div>
          <div class="card--label">
            <span class="part--label blue">퀘스트</span>
            <span class="status--label closed"><i class="ico"></i>종료</span>
          </div>
          <h3 class="card--name">여름 대물 챌린지2</h3>
          <p class="card--desc">전국에서 즐기는 여름 대물 낚시 챌린지 · 최대어로 순위 경쟁</p>
          <div class="card--info">
            <div class="area">
              <i class="ico"></i> 동해
            </div>
            <div class="date">
              <i class="ico"></i> 2026/5/20-2026/6/30
            </div>
          </div>
          <NuxtLink to="/" class="card--btn closed">마감</NuxtLink>
        </div>
        <div class="user--btn--wrap">
          <button>
            더보기
          </button>
        </div>
        <BottomNav />
      </div>
    </div>
  </main>
</template>

<script setup></script>