log weekly april 2024 angular typescript

비활성화 기능 만들기

2024년 4월 22일 월요일

Today I Learned

날짜

2024년 4월 22일 월요일

내용

서비스 비활성화 기능

앱 비활성화 기능을 추가하는 태스크를 맡았다. 비활성화라고 하면, (1) 서비스 내 사용하도록 설정한 옵션들을 모두 끄고 (2) 코어스크립트를 비활성화하도록 안내 해야한다. 프론트, 백 모두 맡아서 기능 단위로 개발하게 됐다.

기존 상태에서 서버는 클라이언트에게 사용중인 서비스의 값들만 제공한다. 무슨 말이냐면, 클라이언트의 요청에 대한 응답으로 use_apps에 [100,300] 만 담아 보낸다면 이 유저는 프로덕트 리뷰와 리스트 디자이너만 사용하는 유저라는 뜻이다. 유저에 따라 이 배열의 길이와 내용은 달라진다.

우선 이 부분에 대한 수정을 고민했다. 서비스에 대한 유저의 상태는 가입과 미가입 중 양자택일이 아니라, 비활성화라는 제 3의 상태를 가질 수 있게 되었기 때문에 그 값이 있는지 없는지로 결정하거나 boolean 값으로 다룰 수 없었다. 앞으로 서버는 클라이언트에게 각 서비스의 가입 여부와 활성화 여부를 모두 보내도록 변경해야 했다.

따라서 프론트쪽에서 유저의 서비스 상태를 다루는 코드를 변경해야 했다. 기존에는 배열에 값이 있는지를 찾기 위해 this.shopDetail.use_apps.includes(AlphaApps.REVIEW) 를 이용했다. 하지만 객체를 선언하고 정확한 값을 지정해 boolean값을 참조했다.

인터페이스도 shop_detail 내에 use_apps: AlphaApps[] 로 설정해 enum으로 이루어진 배열이었던 것을 새로운 UseApps 라는 인터페이스를 만들고 이 객체인 것으로 설정해주었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

export interface ShopDetail {
	...
	use_apps: UseApps;
}

export interface UseApps {
    100: {
      'is_use': boolean;
      'is_active': boolean;
    };
    200: {
      'is_use': boolean;
      'is_active': boolean;
    };
    300: {
      'is_use': boolean;
      'is_active': boolean;
    }
}

자세한 key값은 나중에 변경해야겠지만 우선은 편하게 설정해뒀다.

화면에서 버튼도 경우가 2개에서 3개로 늘어나서 변경했다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!-- 기존 -->
<div (click)="onClickStarted(AlphaApps.AI)" class="apps-btn btn-black">
        @if (!shopDetail.use_apps.includes(AlphaApps.AI)) { Get Started } 
        @else if(shopDetail.use_apps.includes(AlphaApps.AI)) { Open }
      </div>
      
<!-- 변경 -->
<div (click)="onClickStarted(AlphaApps.AI)" class="apps-btn btn-black">
        <!-- 가입하지 않고 비활성화일 때 -->
        @if ((!shopDetail.use_apps[200]['is_use'] && 
        !shopDetail.use_apps[200]['is_active'])) 
        { Get Started }
        <!-- 가입했으나 비활성화일 때 -->
        @if (shopDetail.use_apps[200]['is_use'] && 
        !shopDetail.use_apps[200]['is_active']) 
        { Active }
        <!-- 가입했고 활성화일 때 -->
        @else if(shopDetail.use_apps[200]['is_use'] && 
        shopDetail.use_apps[200]['is_active']) 
        { Open }
      </div>

클릭시 실행되는 함수도 기존에는 가입 여부에 따라 페이지 이동하는 곳만 다르게 처리하는 로직이었다. 가입했으면 어드민 페이지, 아니면 초기 설정 페이지로. 경우를 추가해서 활성화하는 요청만 서버에게 보내는 함수를 추가했다.

이제 비활성화하는 모달 만들고, 서버에서 모든 설정값들을 False로 바꾸는 함수 만들고, 다시 활성화하면 기본상태로 변경해주는 함수만 만들면 된다. 얏호! 아직 멀었다!

회고

아직도 요청을 만들때 데이터를 쿼리에 담기는지 바디에 담기는지 헷갈린다…

CATALOG
    weekly