[Spring] (IntelliJ, vue.js) Vue를 이용하여! 아이콘을 누르면 화면 슬라이딩 만들기.

 

 

아이콘을 누르면,
화면이 슬라이딩되어
나타나도록 만들 것이다.

 

 

 

---

1.  화면 동작과 전체코드
2. 코드 이해를 돕기 위한 간략한 설명
3. RightSide.vue 작성
4. MainView.vue 작성
5. 흐름

---

 

 

 

 

1.  화면 동작과 전체코드

• 동작화면

 

 

 

• 전체코드

[MainView.vue에 메인화면 코드가 있습니다.]

Register-Web-frontend/src/views at master · hyeong-ing/Register-Web-frontend

 

 

[RightSide.vue에 오른쪽 사이드 뷰 코드가 들어있습니다.]

Register-Web-frontend/src/components/mainview/RightSide.vue at master · hyeong-ing/Register-Web-frontend

 

 

 

 

---

 

 

 

 

2.  코드 이해를 돕기 위한 간략한 설명

어찌저찌 만들긴 했지만... 코드 복붙하고 이것저것 시도하며 얻어 걸리다 보니, 저도 코드가 어떻게 진행되는지 모르겠더라고요. 그래서 제 이해를 돕기 위해(?) 짧막한 설명을 적어보았습니다.

 

 

 

 

---

 

 

 

 

 

3.  RightSide.vue 작성

• 화면 예시본

 

 

 

• 어떻게 만들까?

이번 포스팅에서는 슬라이딩 모션만 설명하고, 텍스트 컬러 변화는 다음 포스팅에 적겠습니다.

 

아이콘을 누르면 오른쪽 사이드에서 작은 뷰가 나오도록 할 것이다.MainView에 만들기보다 코드를 깔끔하게 유지하기 위해 따로 vue를 만들어 작성했다.SIGN IN은 로그인 페이지로 연동된다. 그리고 GUEST ORDER INQURY는 비회원 조회를 만들 것이다. 

 

아래에 있는 KAKAO와 전화번호는 형식적으로 넣은 것이고, 아직 어떤 기능을 추가할지 생각하진 않았다. 천천히 프로젝트를 진행하면서 어떻게 할지 결정할 것이다. (실제로 운영되는 페이지가 아니라서, 연동될 이유가 없기에 어떻게 할지 모르겠다.)

 

프론트를 대충할 생각은 없다. 어차피 하는거 제대로 하자는 주의라서 나의 취향을 최대한 담아볼 것이다. 각 버튼에 커서를 대면 컬러가 바뀌며 약간의 움직임을 추가할 것이고, 사소한 디테일도 신경쓸 것이다.

 

참고로 Vue를 처음 다뤄봐서 잘 모릅니다. 원하는 모습을 위해 코드 찾고 어떻게 보이는지 확인하며 작성하고 있어서 코드 효율이 떨어지거나 간결하지 않을 수 있습니다!

 

 

 

 

• template 코드

<div class="right-side" :class="{ open: open }">
    <div class="right-side-content">
      <p class="change-color" @click="$router.push('/simpleRegister')" style="cursor:pointer;"> SIGN UP </p>
      <p class="change-color" style="cursor:pointer;"> SIGN IN </p>
      <p class="change-color" style="cursor:pointer;"> GUEST ORDER INQUIRY </p>
      <div class="right-side-bottom">
        <p> KAKAO</p>
        <p> consultation call_ </p>
        <p> 02 - 0000 - 0000 </p>
      </div>
    </div>
  </div>

가장 상위 클래스는 right-side 클래스로 이 클래스에 움직임을 부여할 것이다. 움직임을 추가하기 위해 v-bind를 써야한다. v-bind는 동적 바인딩으로 어떤 상태의 값이 변화하면 화면이 자동을 바뀐다는 걸 의미한다. :open이 v-bind의 축약형이다. 원래는 v-bind: class--- 형태지만, 축약형으로 많이 쓰는 것 같다. open: open은 개발자가 설정하는 이름이며, 왼쪽 open은 클래스명 오른쪽 open은 변수명이다. script를 작성할 때, open에 true 값이 와야 보이도록 속성을 설정할 것이다.

방금 open은 클래스명이라고 적었는데, 이게 무슨 말인지 설명할 것이다. open의 값이 false면 클래스 이름은 그냥 right-side가 된다. 그런데 open에 true값이 오면 right-side open이 된다. 그렇게 클래스 목록에 두 개의 클래스가 있게된다. 아래 vue 공식문서를 남겨놓을테니 천천히 읽어보면 도움이 될 것이다. (물론 읽기 싫게 생겼다!)

그 다음은 코드는 간단하다. 텍스트에 커서를 대면 색이 변하도록 만들기 위해 class = "chage.color"로 동일시켰다.(이 부분은 다음 포스트로 설명하겠다) 그리고 회원가입 페이지를 현재 시점에는 만들었기 때문에, @click을 통해 텍스트 클릭시 simpleRegister 경로로 가도록 설정했다.

 

 

- v-bind

Vue.js

Vue.js

 

 

• style 코드 

.right-side {
  position: fixed;
  top: 0;
  right: 0;
  width:22vw;
  height: 100vh;
  background: #9f9f9f;
  border-left: 4px solid #020202;
  border-radius: 10px;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.23);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(.71,1.7,.58,.98);
  z-index: 1000;
}

.right-side.open {
  transform: translateX(0%);
}

position은 fixed로 화면을 고정시켰다. 나중에 메인화면에 게시글이 넘쳐서 스크롤을 내려도, 요소가 고정되어 있길 바래서 일단 그렇게 설정해두긴 했다.

right-side는 main-view의 하위 클래스가 될 것이다. width는 너비 크기를 나타낸다. 22vw로 상위 클래스의 22% 정도 차지 하는 비율이다. 그러니까 main-view에 설정한 화면 크기의 22%를 차지한다는 것이다. height는 높이로 100vh를 설정하여 상위 클래스의 높이와 똑같이 유지되도록 했다.

background는 배경색이된다. 이 코드에 없지만 color는 텍스트 색이 된다.

border은 테두리를 설정하는 것으로 왼쪽 테두리만 설정하고 싶어서 border-left를 적었다. solid는 테두리 선의 형태를 나타내며 아래 사진으로 다양한 선의 형태의 이름을 알 수 있다. 4px는 굵기를 설정하며 #으로 시작하는 코드는 컬러 코드가 된다.

box-shadow는 이 프레임의 그림자를 설정했다. -4px는 x축, 0은 y축, 12px는 blur가 된다. rgba는 컬러를 설정한다.

현재 right-side 클래스는 true라는 값이 오기 전에는 보이면 안된다. 그래서 transform: translateX(100%);로 설정했다. transform은 설정된 현재 위치에서 움직이도록 한다. translateX(100%)는 현재 위치에서 x축 끝에 도달하여 right-side가 안보이도록 설정했다. 이 값을 90%로 조정하면 약간은 보이도록 만들 수 있다.

transition은 움직임을 주고 싶을 때 사용한다. 코드를 살펴보면 transition: transform 0.4s cubic-bezier(.71,1.7,.58,.98);은  transform이 0.4초 동안 cubic-bezier 즉, 특정 곡선을 따라 변화한다는 의미이다. 아래 도움이 될 사이트를 넣어두겠다. 앞의 .71과 1.7은 출발할 때 모션이고, .58과 .98은 도착할 때의 모션이다. 이 모션은 직접 설정한 움직임이다. transition: transform 0.4s linear; 혹은 transition: transform 0.4s ease-out; 등 이미 설정되어 있는 움직임도 사용할 수 있다.

right-side.open을 보면 open 클래스가 붙을 시, x축이 0%가 되어 해당 뷰가 완전히 보이도록 설정하고 있다. 그러니까 설정한 transition으로 화면의 x축이 움직이도록 설정한 것이다.

다시 right-side 클래스로 돌아가면 z-index가 있다. 이건 지금 어떤 코드인지 크게 눈으로 보이진 않는다. 만약 메인화면에 여러 요소들이 쌓이게 되면 right-side 뷰가 그 요소들에 가려저 안보일수도 있다. 그걸 방지하고자 다른 요소들보다 앞에 보이도록 설정해둔 것이다.

 

출처: https://www.w3.org/wiki/Css/Training/borders

 

 

- cubic-bezier

cubic-bezier.com

 

 

.right-side-content {
  padding: 40px 32px  32px 32px;
  font-size: 1.0rem;
  color: #020202;
  height: 100%;
  display: flex;
  gap: 7px;
  flex-direction: column;
}

padding은 여백 공간을 설정한 것이다. 여백을 설정하지 않고 right-side-content의 너비와 크기를 정한 뒤, top과 left로 위치를 조정해도 되지만 그건 위에서 했으니 이번엔 padding을 사용하여 원하는 위치를 설정했다. 

gap은 right-side-content에 들어갈 각 요소들이 얼마나 떨어져있으면 좋을지 설정한 것이다. flex-direction은 어떤 방향으로 요소들을 배치할건지 정하는 것이다. column은 위에서 아래로 요소가 들어가는 것으로 생각하면 된다.(한 줄에 하나의 요소가 들어간다) 그러면 가로로 요소들을 배치하고 싶다면? row 값을 주면 된다. 그러면 요소가 좌에서 우로 배치된다.

 

 

 

 

• script 코드

<script>
export default {
  name: 'RightSide',
  props: {
    open: {
      type: Boolean,
      required: true,
    }
  }
}
</script>

export는 이 파일의 컴포넌트를 외부에서 사용할 수 있게 내보내라는 의미로, default를 붙여 이 파일의 대표 export는 하나만 지정된다고 덧붙였다. 이 컴포넌트의 이름은 RightSide로 지정했다.

props는 부모 컴포넌트가 이 컴포넌트에게 데이터를 전달할 수 있게 해주는 속성이다. open이라는 이름의 props는 반드시 Boolean 타입의 true 값을 받아야 한다고 명시했다. open에 true 값이 오면 transform: translateX(0%)이 적용되어 패널이 보이게 된다.

 

 

 

 

---

 

 

 

 

 

4.  MainView.vue 작성

 

• template 코드

<template>
  <div class="main-view">
  
    /* 하트 아이콘 이미지 */
    <img src="../assets/leftHeartBar.png" alt="왼쪽하트" class="left-sideBar" :class="{isLeftSideOpen: isLeftSideOpen}"
          @click="toggleLeft" :style="heartLeftStyle"/>
    <LeftSide :open="isLeftSideOpen" />   
    <img src="../assets/rightHeartBar.png" alt="오른쪽하트" class="right-sideBar" :class="{isRightSideOpen : isRightSideOpen}"
         @click="toggleRight" :style="heartRightStyle"/>
    <RightSide :open="isRightSideOpen" />     
         
    <div class="center-icon">
      <img src="../assets/wings.png" alt="날개아이콘" class="wings" @click="$router.push('/main')" style="cursor:pointer;" />
      <div class="shop-name">
        <p class="change-color01" @click="$router.push('/main')"> sori </p>
      </div>
    </div>
    
  </div>
</template>

 

main-view에 하트 아이콘을 이미지로 등록했다.  src에 경로를 적었다. 해당 이미지 경로는 src 디렉토리 안에 있는 assets 디렉토리에 해당 이미지가 있다. "@/assets/leftHearBar.png"라고 해도 괜찮고, "../assets/leftHeartBar.png"라고 해도 좋다. alt는 굳이 적지 않아도 괜찮다. 해당 파일을 불러올 수 없을 때 텍스트로 대체하는 역할을 하는데, 깨진 파일이 어떤 이미지였는지 알기 쉽게 해주지만 적지 않아도 코드를 실행시키는데 문제는 없다.  right-sideBar 클래스에는 위치값이 들어갈 것이다.

현재 설정해야할 가장 중요한 것은 MainView가 RightView에 있는 :open 값을 전달해야한다는 것이다. 아이콘이 눌리면 false로 설정된 open의 값을 true로 반전시켜야한다. 그 값을 반전시켜야하기 때문에 아이콘에 isRightSideOpen이란 동적 바인딩을 줬다. 

그러면 isRightSideOpen의 값을 RightSide로 전달해야하는데, RightSide의 props에는 open이란 값 밖에 없다. 그래서 <RightSide :open="isRightSideOpen"/> 추가하여 MainView에서 isRightSideOpen이라는 변수를 open이라는 props로 RightSide.vue에 전달한다고 명시했다. (isRightSideOpen에 true나 false의 값을 담고, isRightSideOpen은 RightSide.vue에 있는 open에 자신의 값을 전달했다는 것.) 뒤에 흐름에 대해서 더욱 자세하게 설명해놓겠다.

@Click="toggleRight"는 이미지를 클릭 시 MainView에서 toggleRight( ) 메서드가 실행되도록 했다.

:style="heartRightStyle"은 이 이미지의 스타일을 동적으로 바꾸도록 했다. 오른쪽 패널이 나오면 아이콘도 그 위치에 맞춰 움직여야한다. 설정을 안하면 패널 위에 아이콘이 있는 상황인 연출된다. 그걸 방지하고자 이미 설정된 style을 동적으로 바꾸도록 만들것이다. 이 부분은 script의 computed 속성에서 해결할 것이다.

이미지 위치

 

 

 

• style

.right-sideBar {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 53px;
  height: 48px;
  cursor: pointer;
  z-index: 1100;
  transition:  transform 0.15s cubic-bezier(.71, 1.7, .58, .98);
}

 

top: 50%는 전체의 반절에 위치하겠다는 이야기인데, 실제로 top: 50%를 해보면 가운데에 위치하지 않는 걸 알 수 있다. 그 이유가운데를 딱 찍으면, 딱 찍은 지점에 내 요소의 왼쪽 위 모서리가 닿는다. 그래서 치우친 모양으로 존재한다. 그걸 바로 잡기 위해 transform: translateY(-50%)를 해준다.

 

 

- 왜 중앙에 안오는가

[Vue.js] transform: translate로 텍스트 중앙에 배치하기.

 

 

 

 

• script

import RightSide from "@/components/mainview/RightSide.vue";
import LeftSide from "@/components/mainview/LeftSide.vue";

아까 RightSide.vue에서 export 했던 것을 MainView에서 import 하겠다. 이때 위치도 함께 적어줘야한다. import 뒤에 붙은 RightSide는 MainView에서 "@/components/mainview/RightSide.vue"; 이 경로에 위치한 RightSide.vue의 이름을 적은 것이다. 꼭 vue의 이름과 같지 않아도 된다. (하지만 남들이 봤을 때 어떤 파일인지 알기 쉽도록 이름을 적는 것이 좋다)

이 다음 코드부터는 export default 안에 적은 코드이다.

 

 

  name: 'MainView',
  components: {RightSide, LeftSide},

방금 받아온 컴포넌트를 MainView에서 쓸 수 있도록 등록했다. 그리고 MainView를 export한 이유는 (여기 코드에 없지만 export default 안에 해당 코드가 들어있음) 라우터로 받아서 화면에 보여줘야 하기 때문에 한 것이다.

 

 

data() {
    return {
      isRightSideOpen: false,
      isLeftSideOpen: false,
    }
  },

받아온 컴포넌트의 값을 false로 설정하여, 평소에는 보이지 않도록 만들었다. (right-side.open은 transform: translateX(0%)을 설정했고 true 값을 받아야 이 코드가 활성화된다)

 

 

computed: {
    heartRightStyle() {
      if (this.isRightSideOpen === true) {
        return{ 
          right: '23vw',
          transition: 'right 0.4s cubic-bezier(.71, 1.7, .58, .98)'
        }
      }else { 
        return {
          right: '32px',
          transition: 'right 0.4s cubic-bezier(.71, 1.7, .58, .98)'
        }
      }
    },

* template 코드 *
<img src="../assets/rightHeartBar.png" alt="오른쪽하트" class="right-sideBar" :class="{isRightSideOpen : isRightSideOpen}"
         @click="toggleRight" :style="heartRightStyle"/>

template에서 :style을 heartRightStyle로 정의했다.

this.isRightSideOpen은 data에 적은 isRightSideOpen을 가리킨다. this를 적지 않으면 오류가 발생한다. 왜냐하면 외부,내부, 함수 등 여러 곳에 해당 변수가 같은 이름으로 존재할 수 있기 때문이다. 그래서 지금 이 컴포넌트를 가리키며 내부에서 접근할 때, 항상 this.를 붙여야한다.

this.isRightSideOpen이 true이면 오른쪽에서 23vw만큼 하트 아이콘이 움직이도록 설정했다. 그리고 else(false)면 32px에 위치하도록 했다. 그래서 닫혀있으면 오른쪽에서 32px 떨어진 위치에 하트 아이콘이 있다. 움직임은 패널의 움직임과 똑같이 적었다. 

 

 

 methods: {
    toggleRight() {
      this.isRightSideOpen = !this.isRightSideOpen;
    },
    toggleLeft() {
      this.isLeftSideOpen = !this.isLeftSideOpen;
    },
  },
}

* template 코드 *
<img src="../assets/rightHeartBar.png" alt="오른쪽하트" class="right-sideBar" :class="{isRightSideOpen : isRightSideOpen}"
         @click="toggleRight" :style="heartRightStyle"/>

toggleRight는 아이콘을 클릭했을때 발생할 메서드이다. toggleRight에서 isRightSideOpen의 값을 반전시킬 것이다. isRightSideOpen의 기본값은 false였고, 클릭하면 false의 값이 반전되어 true로 바뀐다. 그러면 isRightSideOpen의 값은 true가 된다. 다시 클릭을 하게 되면 true의 값이 반전되어 false가 된다. 

 

 

 

 

---

 

 

 

5. 흐름

• RightSide.vue

* template *
<div class="right-side" :class="{ open: open }">

open이란 이름으로 값을 받아 동적 바인딩을 줄 것이다. 어떤 움직임을 줄까?

* style *
.right-side.open {
  transform: translateX(0%);
}

원래의 값에서 x축을 0%로 옮긴 움직임을 준다.

* script *
props: {
    open: {
      type: Boolean,
      required: true,
    }

부모 클래스인 MainView.vue에게 값을 받아올 수 있도록 정의한다.

 

 

 

• MainView.vue

* template *
<img src="../assets/rightHeartBar.png" alt="오른쪽하트" class="right-sideBar" :class="{isRightSideOpen: isRightSideOpen}"
         @click="toggleRight" :style="heartRightStyle"/>
    <RightSide :open="isRightSideOpen" />

 

:class="{isRightSideOpen: isRightSideOpen}
: 어떤 상태값이 바뀌면 화면이 자동을 함께 바뀌는게 동적 바인딩. 아이콘이 눌리면 false 값이 true로, true 값이 false로 바뀌도록 한다.

<RightSide :open="isRightSideOpen" />
: isRightSideOpen을 RightSide의 props에 있는 open으로 값이 가도록 설정했다.

@click="toggleRight"
: 클릭하면 toggleRight 메서드가 실행된다.

:style="heartRightStyle"
: 아이콘의 위치를 패널의 움직임에 맞춰 바꾸기 위해 설정했다.

 

data() {
    return {
      isRightSideOpen: false,
      isLeftSideOpen: false,
    }
  },

data( )에 컴포넌트 값 설정했다.

 

* script *

methods: {
    toggleRight() {
      this.isRightSideOpen = !this.isRightSideOpen;
    },

버튼이 눌리면 isRightSideOpen 값이 반전된다. 여기서 true로 값이 변하면 그 값이 open에게 전달된다. 그러면 아까 .open에 설정했던 x축의 변동이 나타난다.

 

  computed: {
    heartRightStyle() {
      if (this.isRightSideOpen === true) {
        return{
          right: '23vw',
          transition: 'right 0.4s cubic-bezier(.71, 1.7, .58, .98)'
        }
      }else {
        return {
          right: '32px',
          transition: 'right 0.4s cubic-bezier(.71, 1.7, .58, .98)'
        }
      }
    },

아이콘도 같이 움직인다. isRightSideOpen이 true의 값이면 23vw만큼 움직인다. 그리고 false 값이 되면 32px 위치로 다시 움직인다.