우리 매장은 맛있게 먹는 방법이 있다. 깻잎에 마요네즈가 섞인 천사채와 날치알, 환상의 마요네즈 소스까지 곁들여 쭈꾸미와 함께 쏙하면 기가막힌 천상의 맛이다. 하지만, 외국인들에게 이 맛있는 조합을 소개하기가 매우 어려운 사실.. 이를 해결하기 위해 만들어 보도록 하겠다.
현재 메뉴판은 한 줄로 쭉 나열되어있고 메뉴 카드마다 메뉴명, 메뉴 한국어명, 메뉴 디테일, 가격 이렇게 정보가 한꺼번에 나와있다. 내 생각에는 정보가 한 번에 다 나오면 귀찮은 동작없이 메뉴를 살필 수 있다고 생각하는데 아무래도 메뉴가 하나씩 나오게 되면 사용자 입장에서는 더 많은 스크롤을 내려야 한다. 따라서, N * 2 로 메뉴 리스트를 바꾸고 각 메뉴를 눌렀을 때 디테일 모달이 나오도록 변경하려고 한다.
우선, 모달 띄우기 전 화면에 출력할 내용은 외국어 메뉴명, 한국어 메뉴명, 가격이다. 이후 각 메뉴의 Element 에 onClick 을 부여해 데이터를 모달에 디테일 한 작업을 추가할 예정이다. 추후에 디테일 모달에는 Carousel 을 넣고 싶다.
필자는 열정도 쭈꾸미 음식점에서 일하고 있다. 일을 하면서 외국인 손님이 하루에 한 팀은 꼭 오는 것을 알게 되었다. 일본인 비중이 많아 일본인 전용 메뉴판을 하나 만들어 두었다. 하지만, 가끔, 중국, 대만, 태국, 등 다양한 국적의 사람들이 오고 쭈꾸미라는 상상하기 어려운 음식을 사진없이 메뉴판만으로는 어렵다는 생각이 들었다. 메뉴판을 일일이 만들기 어려워 웹 사이트로 간단히 QR 코드 한방에 확인가능 하면 좋을 것 같아. 계획했다.
개발환경
프론트엔드 개발자를 목표로 하고 있기에 왠만하면 서버없이 구동을 하려고 한다. 혹시나, 서버를 사용할 수도 있기에 요새 배우고 있는 NextJS 를 이용하고자 한다. 배포 서버는 역시 무료 업체인 Vercel에 배포를 하려고 한다.
사용 프레임워크 : NextJS 배포 환경 : Vercel
요구사항
우선, 요구사항을 분석해보겠다.
외국인 손님을 위한 언어변환이 가능한 메뉴판
이해하기 쉬운 메뉴와 사진 제공
당장에 구현해야할 요구사항은 다음과 같다고 생각한다.
1. 언어변환
처음에는 실시간 변환을 하는게 어떨까 생각이 들었는데 Next에 대한 이해가 부족해서 그런지 Next i18 을 사용하기엔 조금 개발이 걸릴 것 같아 노가다로 진행하기로 했다.
Dropdown Button
한국어, 영어, 일본어, 중국어, 태국어 총 5가지 언어를 지원하기로 했다. 일해본 결과 5개언어면 될 것 같다.
사진은 아직 직원친구가 이쁜 사진들을 안보내줘서 대체사진을 사용중이다. 이정도면 쓸만하겠지?
3. 메뉴별 이동버튼
개발을 하고나니 스크롤이 너무 길다는 불편함이 있었다. 그래서 버튼 두개를 만들어 하나는 맨위로 올라가는 버튼과 하나는 누를 때 마다 다음 메뉴 카테고리로 이동하는 버튼을 구현했다.
현재 위치 확인
useEffect를 통해 현재 위치와 가장가까운 title id를 찾는다.
useEffect(() => {
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
const handleScroll = () => {
const offsets = titles.map(title => {
const element = document.getElementById(title);
// 요소가 존재하지 않는 경우, 매우 큰 값을 반환하여 화면 밖으로 간주하도록 합니다.
return element ? window.pageYOffset + element.getBoundingClientRect().top : Number.MAX_VALUE;
});
const closest = offsets.reduce((prev, curr, index) => {
if (curr !== Number.MAX_VALUE && (Math.abs(curr - window.pageYOffset) < Math.abs(offsets[prev] - window.pageYOffset))) {
return index;
}
return prev;
}, 0);
setCurrentIndex(closest);
};
titles 배열에서 각 타이틀의 ID를 사용하여 해당하는 DOM 요소를 찾는다. document.getElementById(title)는 ID가 title인 요소를 반환한다.
각 요소의 위치는 element.getBoundingClientRect().top + window.pageYOffset을 통해 계산된다. 여기서 getBoundingClientRect().top은 요소의 상단 경계로부터 뷰포트 상단까지의 거리를 제공하고, window.pageYOffset은 문서가 수직으로 얼마나 스크롤 되었는지를 나타낸다. 이 두 값을 더하면 페이지 최상단으로부터의 절대적인 거리가 된다.
만약 특정 타이틀의 요소가 없다면(element가 null인 경우), Number.MAX_VALUE를 반환하여, 해당 타이틀을 스크롤 위치 계산에서 제외시킨다.
reduce 함수는 offsets 배열을 순회하면서 각 요소와 현재 스크롤 위치와의 차이가 가장 작은 요소의 인덱스를 찾는다. 이 인덱스는 현재 뷰포트에 가장 가까운 요소를 나타낸다.
계산된 closest 인덱스는 setCurrentIndex를 통해 상태로 저장되어, 다른 부분의 렌더링이나 로직에서 사용될 수 있다.
