알림함 페이지 및 컴포넌트 다국어화 완료

- 알림함 페이지 다국어화
  * 헤더 타이틀: 알림함 → Notifications
  * 전체 탭 버튼 다국어화
- 알림 컴포넌트 다국어화
  * alarm-list: 90일 보관 안내 메시지
  * alarm-item: 바로가기 alt 텍스트 (파라미터 지원)
- 번역 키 추가: alarm 네임스페이스 4개 키
  * title, all, retentionNotice, goTo
- 파라미터화된 번역 지원 ({{category}})

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jay Sheen
2025-10-29 18:24:48 +09:00
parent f0a157b2c3
commit 9a73626422
5 changed files with 24 additions and 8 deletions

View File

@@ -6,6 +6,7 @@ import { useAppAlarmMarkMutation } from '../api/use-app-alarm-mark-mutation';
import { AppAlarmMarkParams, AppAlarmMarkResponse } from '../model/types'; import { AppAlarmMarkParams, AppAlarmMarkResponse } from '../model/types';
import { useStore } from '@/shared/model/store'; import { useStore } from '@/shared/model/store';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
export interface AlarmItemProps { export interface AlarmItemProps {
appNotificationSequence?: number; appNotificationSequence?: number;
@@ -27,6 +28,7 @@ export const AlarmItem = ({
appNotificationCategories appNotificationCategories
}: AlarmItemProps) => { }: AlarmItemProps) => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const { t } = useTranslation();
let userInfo = useStore.getState().UserStore.userInfo; let userInfo = useStore.getState().UserStore.userInfo;
const {mutateAsync: appAlarmMark} = useAppAlarmMarkMutation(); const {mutateAsync: appAlarmMark} = useAppAlarmMarkMutation();
@@ -107,9 +109,9 @@ export const AlarmItem = ({
</div> </div>
</div> </div>
<div className="notice-arrow"> <div className="notice-arrow">
<img <img
src={ IMAGE_ROOT + '/Forward.svg' } src={ IMAGE_ROOT + '/Forward.svg' }
alt={ appNotificationCategoryName + ' 바로가기' } alt={t('alarm.goTo', { category: appNotificationCategoryName })}
/> />
</div> </div>
</div> </div>

View File

@@ -123,7 +123,7 @@ export const AlarmList = ({
{ getAlarmItems() } { getAlarmItems() }
</div> </div>
<div ref={ setTarget }></div> <div ref={ setTarget }></div>
<div className="notice-alert"> 90 .</div> <div className="notice-alert">{t('alarm.retentionNotice')}</div>
</> </>
); );
}; };

View File

@@ -481,5 +481,11 @@
"location": "Location", "location": "Location",
"url": "URL", "url": "URL",
"serviceRegistrationNumber": "Service Registration Number" "serviceRegistrationNumber": "Service Registration Number"
},
"alarm": {
"title": "Notifications",
"all": "All",
"retentionNotice": "※ Notifications are kept for 90 days and then deleted.",
"goTo": "Go to {{category}}"
} }
} }

View File

@@ -485,5 +485,11 @@
"location": "소재지", "location": "소재지",
"url": "URL", "url": "URL",
"serviceRegistrationNumber": "서비스 등록번호" "serviceRegistrationNumber": "서비스 등록번호"
},
"alarm": {
"title": "알림함",
"all": "전체",
"retentionNotice": "※ 알림은 90일간 보관 후 삭제됩니다.",
"goTo": "{{category}} 바로가기"
} }
} }

View File

@@ -1,18 +1,20 @@
import { AlarmList } from '@/entities/alarm/ui/alarm-list'; import { AlarmList } from '@/entities/alarm/ui/alarm-list';
import { HeaderType } from '@/entities/common/model/types'; import { HeaderType } from '@/entities/common/model/types';
import { useStore } from '@/shared/model/store'; import { useStore } from '@/shared/model/store';
import { import {
useSetHeaderTitle, useSetHeaderTitle,
useSetHeaderType, useSetHeaderType,
useSetFooterMode useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout'; } from '@/widgets/sub-layout/use-sub-layout';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
export const ListPage = () => { export const ListPage = () => {
const { t } = useTranslation();
let totalAppNotificationCategories = useStore.getState().CommonStore.appNotificationCategories; let totalAppNotificationCategories = useStore.getState().CommonStore.appNotificationCategories;
const [appNotificationCategories, setAppNotificationCategories] = useState<Array<any>>(totalAppNotificationCategories); const [appNotificationCategories, setAppNotificationCategories] = useState<Array<any>>(totalAppNotificationCategories);
useSetHeaderTitle('알림함'); useSetHeaderTitle(t('alarm.title'));
useSetHeaderType(HeaderType.LeftArrow); useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false); useSetFooterMode(false);
@@ -37,10 +39,10 @@ export const ListPage = () => {
<main className="pop"> <main className="pop">
<div className="sub-wrap"> <div className="sub-wrap">
<div className="notice-tabs"> <div className="notice-tabs">
<button <button
className={ `tab36 ${(appNotificationCategory === '')? 'on': ''}`} className={ `tab36 ${(appNotificationCategory === '')? 'on': ''}`}
onClick={ () => setAppNotificationCategory('') } onClick={ () => setAppNotificationCategory('') }
></button> >{t('alarm.all')}</button>
{ !!appNotificationCategories && { !!appNotificationCategories &&
appNotificationCategories.map((value, index) => ( appNotificationCategories.map((value, index) => (
<button <button