[Vue] ButtonGroup 만들기

나의 목표..

커뮤니티 글을 태그에 따라 조회할 수 있도록 하기 위해 만든 TagButton이다.
이거 어제부터 만들기 시작했는데 이 작은 거 만드는 게 왜이리 열받니..ㅋㅋ
아무튼 현재까지의 상황을 설명해보겠다.

- 문제 상황

버튼 그룹 컴포넌트화

• TagButton.vue : 각 버튼을 나타내는 컴포넌트
• TagButtonGroup.vue : 버튼들을 묶는 그룹 컴포넌트
• Community.vue : 버튼그룹이 들어갈 메인뷰

나중에 버튼 모양을 수정할 때 편리한 유지보수를 위해 그리고 vue.js의 컴포넌트화의 편리성을 느끼기 위해 컴포넌트화를 하였다.

그리고 지금까지 만든 현재 상태는 위 사진과 같다.
(배경색이 주황색인건 버튼그룹의 영역을 보기 위해서 잠깐 설정해놓은 것)
버튼이 화면 밖으로 넘쳐서 스크롤 할 수 있게 만들어야 하는데 왜인지 절대 안 된다.

기존 TagButton.vue 스타일 코드

<style scoped>
.tag-button-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: orange;
  gap: 5px
}
</style>

flex-wrap: nowrap; 을 사용하면 당연하게 버튼이 넘칠 줄 알았는데 적용이 안 된다.
이유가 뭘까... 뭔가 컨테이너가 상위 하위가 꼬여서 생긴 오류인 것 같은데...

- 문제 원인 생각

1. 자식 요소의 크기 문제
: 자식 요소들이 고정된 너비를 가지고 있지 않아서, 한 줄로 나열되지 않았을 수도..

-> 버튼 크기를 고정하였더니 되긴 되는데 글자 길이가 다른 버튼이 있어서 한 크기로 고정하기엔 디자인적 아쉬움이 생김. 버튼 글자 길이에 맞는 버튼 크기로 맞추고 싶음.

2. 다른 CSS 속성과의 충돌
: 다른 스타일 속성들이 충돌해서 그른가..

-> 그러기 다른 속성을 적용해봤더니 잘 적용됨.

- 문제 해결

'문제 원인 생각 1번'에서 더 고민하다보니 자식 요소인 Button의 크기 고정 문제였음.
근데 버튼 자체의 크기를 고정해야 하는게 아니라 버튼 속 텍스트를 고정해야 함.

수정한 TagButton.vue와 TagButtonGroup.vue 스타일 코드

TagButton.vue

<style lang="scss" scoped>
  .tag-button {
    background: none;
    border-radius: 20px;
    border: 1px solid #E5E5E5;
    padding: 13px 14px;
    @include custom-text($font-weight: 600);
    font-size: 12px;
    white-space: nowrap; /* 버튼 텍스트 줄바꿈 방지 */
  }

  .tag-button.active {
    background-color: $primary-color-light;
    border-color: $primary-color-default;
    color: $primary-color-default;
  }
</style>



TagButtonGroup.vue

<style scoped lang="scss">
.tag-button-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: orange;
  overflow-x: auto; /* 수평 스크롤 활성화 */
  gap: 5px
}
</style>

1. white-space: nowrap; 추가 - TagButton.vue
   : 버튼 속 글자의 줄바꿈이 생기지 않게 하여 버튼의 모양도 바뀌지 않게 되었다.

2. overflow-x: auto; 추가 - TagButtonGroup.vue
   : 수평 스크롤을 활성화하여 넘친 버튼의 모양까지 볼 수 있게 되었다.

배경색 지우고 패딩까지 넣어서 완성!