Front-Vue-SCSS) HomeView

목표

UI 구성 및 배치 (기능x)

미리보기

전체 코드

<script setup lang="ts">
import { ref } from 'vue'

const sortState = ref('trend')
const sortChange = (state: string) => {
  sortState.value = state
  /*
   * 정렬 상태에 따른 api 요청
   */
}
</script>

<template>
  <div class="main-container">
    <div class="top-container">
      <div class="left-container">
        <div
          @click="sortChange('trend')"
          :class="sortState === 'trend' ? `sort select-sort` : `sort`"
        >
          <svg
            width="20"
            height="14"
            viewBox="0 0 20 14"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M19.9921 1.16667C20.0026 1.08537 20.0026 1.00296 19.9921 0.921666C19.9825 0.85317 19.9638 0.78642 19.9366 0.723333C19.9072 0.666315 19.8738 0.611715 19.8366 0.56C19.7944 0.486212 19.742 0.419381 19.6812 0.361667L19.5479 0.28C19.4838 0.229783 19.4126 0.190417 19.3369 0.163333H19.1148C19.0471 0.0944941 18.9681 0.0391505 18.8816 0H13.3287C13.0342 9.22141e-09 12.7517 0.122917 12.5434 0.341709C12.3352 0.560501 12.2182 0.857247 12.2182 1.16667C12.2182 1.47609 12.3352 1.77283 12.5434 1.99162C12.7517 2.21042 13.0342 2.33333 13.3287 2.33333H16.4716L12.0294 7.82833L7.23173 4.83C7.00449 4.68802 6.73648 4.63586 6.47591 4.68291C6.21533 4.72996 5.97928 4.87312 5.81021 5.08667L0.257385 12.0867C0.163873 12.2046 0.0934188 12.3407 0.0500574 12.4872C0.00669601 12.6337 -0.00872061 12.7878 0.00469042 12.9406C0.0181015 13.0934 0.0600767 13.242 0.128212 13.3777C0.196347 13.5134 0.289304 13.6337 0.401758 13.7317C0.601562 13.9056 0.853034 14.0005 1.11252 14C1.27567 14.0003 1.43688 13.9628 1.58468 13.8902C1.73248 13.8176 1.86324 13.7117 1.96765 13.58L6.90967 7.35L11.6518 10.3367C11.8767 10.4768 12.1415 10.5291 12.3995 10.4843C12.6575 10.4394 12.8922 10.3004 13.0622 10.0917L17.771 4.31667V7C17.771 7.30942 17.888 7.60616 18.0963 7.82496C18.3045 8.04375 18.587 8.16667 18.8816 8.16667C19.1761 8.16667 19.4586 8.04375 19.6668 7.82496C19.8751 7.60616 19.9921 7.30942 19.9921 7V1.16667Z"
              fill="#555555"
            />
          </svg>
          Trend
        </div>
        <div
          @click="sortChange('newest')"
          :class="sortState === 'newest' ? `sort select-sort` : `sort`"
        >
          <svg
            width="20"
            height="20"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10 20C4.48372 20 0 15.5163 0 10C0 4.48372 4.48372 0 10 0C15.5163 0 20 4.48372 20 10C20 15.5163 15.5163 20 10 20ZM10 1.39535C5.25581 1.39535 1.39535 5.25581 1.39535 10C1.39535 14.7442 5.25581 18.6047 10 18.6047C14.7442 18.6047 18.6047 14.7442 18.6047 10C18.6047 5.25581 14.7442 1.39535 10 1.39535Z"
              fill="#555555"
            />
            <path
              d="M13.4508 13.6558C13.3298 13.6558 13.2089 13.6279 13.0973 13.5535L10.2136 11.8326C9.49729 11.4047 8.96706 10.4651 8.96706 9.63721V5.82327C8.96706 5.44187 9.28334 5.1256 9.66473 5.1256C10.0461 5.1256 10.3624 5.44187 10.3624 5.82327V9.63721C10.3624 9.9721 10.6415 10.4651 10.9298 10.6326L13.8136 12.3535C14.1485 12.5488 14.2508 12.9767 14.0554 13.3116C13.9159 13.5349 13.6833 13.6558 13.4508 13.6558Z"
              fill="#555555"
            />
          </svg>
          Recent
        </div>
      </div>
      <div class="right-container">
        <div class="view-change">
          <svg
            width="22"
            height="22"
            viewBox="0 0 30 27"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.74998 1.40625V6.09375C8.74998 6.87041 8.12039 7.5 7.34373 7.5H1.40625C0.62959 7.5 0 6.87041 0 6.09375V1.40625C0 0.62959 0.62959 0 1.40625 0H7.34373C8.12039 0 8.74998 0.62959 8.74998 1.40625ZM19.375 15.4687V10.7812C19.375 10.0046 18.7454 9.375 17.9688 9.375H12.0312C11.2546 9.375 10.625 10.0046 10.625 10.7812V15.4687C10.625 16.2454 11.2546 16.875 12.0312 16.875H17.9687C18.7454 16.875 19.375 16.2454 19.375 15.4687ZM21.25 1.40625V6.09375C21.25 6.87041 21.8796 7.5 22.6563 7.5H28.5938C29.3704 7.5 30 6.87041 30 6.09375V1.40625C30 0.62959 29.3704 0 28.5938 0H22.6563C21.8796 0 21.25 0.62959 21.25 1.40625ZM19.375 6.09375V1.40625C19.375 0.62959 18.7454 0 17.9688 0H12.0312C11.2546 0 10.625 0.62959 10.625 1.40625V6.09375C10.625 6.87041 11.2546 7.5 12.0312 7.5H17.9687C18.7454 7.5 19.375 6.87041 19.375 6.09375ZM7.34373 9.375H1.40625C0.62959 9.375 0 10.0046 0 10.7812V15.4687C0 16.2454 0.62959 16.875 1.40625 16.875H7.34373C8.12039 16.875 8.74998 16.2454 8.74998 15.4687V10.7812C8.74998 10.0046 8.12039 9.375 7.34373 9.375ZM0 20.1562V24.8437C0 25.6204 0.62959 26.25 1.40625 26.25H7.34373C8.12039 26.25 8.74998 25.6204 8.74998 24.8437V20.1562C8.74998 19.3796 8.12039 18.75 7.34373 18.75H1.40625C0.62959 18.75 0 19.3796 0 20.1562ZM22.6563 16.875H28.5938C29.3704 16.875 30 16.2454 30 15.4687V10.7812C30 10.0046 29.3704 9.375 28.5938 9.375H22.6563C21.8796 9.375 21.25 10.0046 21.25 10.7812V15.4687C21.25 16.2454 21.8796 16.875 22.6563 16.875ZM22.6563 26.25H28.5938C29.3704 26.25 30 25.6204 30 24.8437V20.1562C30 19.3796 29.3704 18.75 28.5938 18.75H22.6563C21.8796 18.75 21.25 19.3796 21.25 20.1562V24.8437C21.25 25.6204 21.8796 26.25 22.6563 26.25ZM10.625 20.1562V24.8437C10.625 25.6204 11.2546 26.25 12.0312 26.25H17.9687C18.7454 26.25 19.375 25.6204 19.375 24.8437V20.1562C19.375 19.3796 18.7454 18.75 17.9687 18.75H12.0312C11.2546 18.75 10.625 19.3796 10.625 20.1562Z"
              fill="#555555"
            />
          </svg>
        </div>
      </div>
    </div>
    <div class="contents-container">
      <div class="contents-box" v-for="i in 12">
        <div class="contents-box-top"></div>
        <div class="contents-box-middle">
          <div class="title">제목</div>
          <div class="preview-text">내용</div>
        </div>
        <div class="contents-box-bottom">
          <div class="writer">😀 by OOO</div>
          <div class="board-info">2023.01.01</div>
        </div>
      </div>
    </div>
  </div>
  <div class="clickEventGrey btn-gotop">
    <svg
      width="33"
      height="18"
      viewBox="0 0 33 18"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M1.5 16.5L16.5 1.5L31.5 16.5"
        stroke="#777777"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </div>
</template>

<style scoped lang="scss">
@import '@/assets/View/HomeView.scss';
</style>

제일 먼저 나왔어야 할 메인화면인 HomeView다. 변수에 따라 스타일 클래스를 변경하는 부분에서 조금 애먹었다. 사실 한 번 해봤던거지만 까먹어서...

현재 임시 데이터로 대충 구조만 만들어놨다. 나중에 api 연결하면서 수정할 예정!

깃 허브 링크

Github