메뉴 및 슬라이드 메뉴 다국어화
- MenuItems에 영문 메뉴명(menuNameEng) 추가 - MenuCategory 컴포넌트에 i18n 적용하여 언어별 메뉴 표시 - SlideMenu 컴포넌트 다국어 지원 추가 - ko.json, en.json에 slideMenu 번역 키 추가 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jay Sheen
@@ -1,4 +1,5 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
interface SlideMenuProps {
|
||||
isOpen: boolean;
|
||||
@@ -6,6 +7,8 @@ interface SlideMenuProps {
|
||||
}
|
||||
|
||||
const SlideMenu: React.FC<SlideMenuProps> = ({ isOpen, onClose }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// ESC 키로 메뉴 닫기
|
||||
useEffect(() => {
|
||||
const handleEscape = (event: KeyboardEvent) => {
|
||||
@@ -50,7 +53,7 @@ const SlideMenu: React.FC<SlideMenuProps> = ({ isOpen, onClose }) => {
|
||||
paddingTop: `calc(1rem + env(safe-area-inset-top, 0px))`
|
||||
}}
|
||||
>
|
||||
<h2 className="text-xl font-bold text-gray-900">메뉴</h2>
|
||||
<h2 className="text-xl font-bold text-gray-900">{t('slideMenu.title')}</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 rounded-md hover:bg-gray-100 transition-colors"
|
||||
@@ -65,14 +68,14 @@ const SlideMenu: React.FC<SlideMenuProps> = ({ isOpen, onClose }) => {
|
||||
<div className="p-4 flex-1 overflow-y-scroll pb-16 scrollbar-hide">
|
||||
<div className="space-y-6">
|
||||
<div className="border border-gray-200 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4">계정 관리</h3>
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4">{t('slideMenu.accountManagement')}</h3>
|
||||
<ul className="space-y-3">
|
||||
<li>
|
||||
<a href="#" className="flex items-center text-gray-700 hover:text-blue-600 transition-colors">
|
||||
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
프로필 설정
|
||||
{t('slideMenu.profileSettings')}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@@ -80,7 +83,7 @@ const SlideMenu: React.FC<SlideMenuProps> = ({ isOpen, onClose }) => {
|
||||
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
비밀번호 변경
|
||||
{t('slideMenu.changePassword')}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@@ -88,21 +91,21 @@ const SlideMenu: React.FC<SlideMenuProps> = ({ isOpen, onClose }) => {
|
||||
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-5 5v-5zM8 17H3l5 5v-5zM12 3v3m6.364-.636l-2.121 2.121M21 12h-3M18.364 18.364l-2.121-2.121M12 21v-3m-6.364.636l2.121-2.121M3 12h3M5.636 5.636l2.121 2.121" />
|
||||
</svg>
|
||||
알림 설정
|
||||
{t('slideMenu.notificationSettings')}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="border border-gray-200 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4">결제 서비스</h3>
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4">{t('slideMenu.paymentService')}</h3>
|
||||
<ul className="space-y-3">
|
||||
<li>
|
||||
<a href="#" className="flex items-center text-gray-700 hover:text-blue-600 transition-colors">
|
||||
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
결제 내역
|
||||
{t('slideMenu.paymentHistory')}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@@ -110,7 +113,7 @@ const SlideMenu: React.FC<SlideMenuProps> = ({ isOpen, onClose }) => {
|
||||
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
|
||||
</svg>
|
||||
환불 요청
|
||||
{t('slideMenu.refundRequest')}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@@ -118,21 +121,21 @@ const SlideMenu: React.FC<SlideMenuProps> = ({ isOpen, onClose }) => {
|
||||
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
|
||||
</svg>
|
||||
결제 방법 관리
|
||||
{t('slideMenu.paymentMethodManagement')}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="border border-gray-200 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4">고객 지원</h3>
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4">{t('slideMenu.customerSupport')}</h3>
|
||||
<ul className="space-y-3">
|
||||
<li>
|
||||
<a href="#" className="flex items-center text-gray-700 hover:text-blue-600 transition-colors">
|
||||
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
FAQ
|
||||
{t('slideMenu.faq')}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@@ -140,7 +143,7 @@ const SlideMenu: React.FC<SlideMenuProps> = ({ isOpen, onClose }) => {
|
||||
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
||||
</svg>
|
||||
1:1 문의
|
||||
{t('slideMenu.inquiry')}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@@ -148,21 +151,21 @@ const SlideMenu: React.FC<SlideMenuProps> = ({ isOpen, onClose }) => {
|
||||
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
이용약관
|
||||
{t('slideMenu.termsOfService')}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="border border-gray-200 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4">기타</h3>
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4">{t('slideMenu.other')}</h3>
|
||||
<ul className="space-y-3">
|
||||
<li>
|
||||
<a href="#" className="flex items-center text-gray-700 hover:text-blue-600 transition-colors">
|
||||
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
앱 정보
|
||||
{t('slideMenu.appInfo')}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@@ -170,7 +173,7 @@ const SlideMenu: React.FC<SlideMenuProps> = ({ isOpen, onClose }) => {
|
||||
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
||||
</svg>
|
||||
개발자 정보
|
||||
{t('slideMenu.developerInfo')}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@@ -178,7 +181,7 @@ const SlideMenu: React.FC<SlideMenuProps> = ({ isOpen, onClose }) => {
|
||||
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
||||
</svg>
|
||||
로그아웃
|
||||
{t('slideMenu.logout')}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user