탭만 보고 어떤 페이지인지 알 수 있게 하기
카테고리
Empty
백오피스 서비스를 개발하다보면, 장시간 어드민 페이지에서 잔류할 경우가 많은데 이때 여러 다중 탭들을 많이 생성해서 띄어놓게 된다. 그 중에 가장 불편했던 점이 여러 탭들이 있으면 탭 별로 구분이 잘 안가서 탭을 하나씩 클릭하게 되는 상황이 발생한다.
같은 탭이 5개 이상 ^,^
데스크탑에 많이 앉아있는 사람이라면 탭을 여러 개 띄어놓는 구조는 당연하다. 근데 기존에 구현되어있는 백오피스는 특히 새 창으로 띄워 상태를 관리하는 기능들이 참 많았고, 메뉴에 들어가 게시글 작성이나, 조회를 할 때마다 새 탭이 열리는 구조였다. 그러다보니, 엄청나게 많은 탭들이 개발을 마친 후나 테스트를 마친 후에는 정~말 많아진다 ^,^
탭의 개수가 작으면 클릭할 탭이 몇개없어 문제가 되진 않으나, 탭이 정말 많아지면 이게 어떤 탭인지 공황장애 상태가 온다. 이 문제를 해결하는 방법은 현재 페이지의 상태를 외부로 노출을 시키는 것인데, 클릭을 하지 않고 확인할 수 있는 방법은 탭의 문서(HTML Document) 별 타이틀을 변경하는 것이다.
문서 (HTML Document) 타이틀 변경하기
페이지 단에서 접속할 때마다 단순하게 해당 페이지가 어떤 페이지를 의미하는지 변경만 해주면되는 간단한 작업이다.
나 같은 경우, 여러 페이지에서 다중적으로 사용하기 때문에 useSetDocumentTitle 컴포저블을 만들어 사용해주었다.
관련 옵션 및 매개변수들에 대한 내용들은 JSDOC 에 담아놓았다.
사실 페이지 별로 일일히 해당 컴포저블의 코드를 달기가 무척이나 힘들다. 구조를 어떻게 설계하느냐에 따라 다르겠지만, Vue 에서는 createRouter 에서 각 routes 에 name 값을 지정할 수 있기 때문에 사이드 바에 해당 컴포저블을 삽입해두고 (공통적으로 모두 들어가기 떄문에) 라우트가 변경될 때마다 현재 route 의 name 값을 가져와 문서의 타이틀을 변경해주는 형식으로 해결했다.
import {
onBeforeUnmount, onMounted, watch, type Ref, unref, ref,
} from 'vue';
type RefGuard<T> = T | Ref<T>;
interface UseSetPageTitleOptions {
restoreOnUnmount?: boolean;
enabled?: RefGuard<boolean>;
}
/**
* @description 페이지 타이틀 제어 유틸을 제공합니다.
* @param title 설정할 타이틀(문자열 또는 Ref)
* @param options 추가 옵션
* @param options.restoreOnUnmount 언마운트 시 이전 제목 복구 여부(기본값: true)
* @param options.enabled 사용 여부 (기본 값: true);
*/
export default function useSetDocumentTitle(
title: RefGuard<string> = import.meta.env.VITE_TITLE,
options: UseSetPageTitleOptions = {},
) {
const { restoreOnUnmount = true, enabled = true } = options;
const prevTitle = ref('');
/**
* @description enabled 옵션의 현재 활성화 상태를 반환합니다.
* @returns 활성화 여부
*/
const isEnabled = () => Boolean(unref(enabled));
/**
* @description 전달된 값으로 페이지 타이틀을 즉시 설정합니다.
* @param nextTitle 설정할 타이틀
*/
const setTitle = (nextTitle: string) => {
document.title = nextTitle || '';
};
/**
* @description 초기 입력(title)의 현재 값을 기준으로 페이지 타이틀을 적용합니다.
*/
const applyTitle = () => {
setTitle(unref(title) || '');
};
/**
* @description 페이지 진입 이전 타이틀로 복구합니다.
*/
const restoreTitle = () => {
document.title = prevTitle.value || '';
};
/**
* @description 타이틀을 빈 문자열로 초기화합니다.
*/
const clearTitle = () => {
document.title = '';
};
onMounted(() => {
prevTitle.value = document.title;
if (isEnabled()) {
applyTitle();
}
});
watch(() => unref(title), (nextTitle) => {
if (!isEnabled()) return;
setTitle(nextTitle || '');
});
watch(() => isEnabled(), (nextEnabled) => {
if (nextEnabled) {
applyTitle();
return;
}
if (restoreOnUnmount) {
restoreTitle();
}
});
onBeforeUnmount(() => {
if (restoreOnUnmount) {
restoreTitle();
}
});
return {
applyTitle,
setTitle,
restoreTitle,
clearTitle,
prevTitle,
};
}