Front-Vue-SCSS) AlramBox

목표

UI 구성 및 배치 (기능x)

미리보기

전체 코드

<script setup lang="ts"></script>

<template>
  <div class="main-container">
    <div class="header-container">
      <div class="alramList">알람!</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import '@/assets/Components/AlramModal.scss';
</style>

후기

AlramBox 쪽 코드가 아니라 Sidebar 쪽에 코드가 더 늘었지만, 그것까지 같이 넣기엔 너무 지저분해질 것 같았다. 자세한건 깃허브로...

애니메이션에 시간을 너무 많이 낭비했다. 심지어 실패...
모든 컴포넌트에 transition을 0.4s를 줬었는데, 다른건 다 잘 작동하는데 AlramBox 컴포넌트가 생성되고 제거되는 때에 안먹었었다. 열심히 구글링을 해봤지만 그냥 안된다는 말만 잔뜩... 원래는 router-link 태그를 이용했었는데 생각해보니 페이징이 아니라 컴포넌트만 새로 생성하고 제거하면 되서 a 태그로 변경했다. 그리고 수십번 삽질해봤지만 역시나... 며칠동안 이것만 매달렸더니 글도 커밋도 너무 밀려서 포기했다. 일단 기능적으로는 문제없고 심미성의 문제이니 나중으로 미루기로 했다.

깃 허브 링크

Github