Localize common UI components (bottom sheets)

Replace all hardcoded Korean text with i18n translation keys in
common bottom sheet components for email selection and download
type selection.

Components localized:
- email-bottom-sheet: Title, image save label, receive by email label,
  image requested snackbar message, close button alt, request button
- download-type-bottom-sheet: Title, download method selection labels,
  image/email alt texts, close button alt

Translation keys added to en.json:
- selectEmailAddress: "Select Email Address"
- imageSave: "Save as Image"
- receiveByEmail: "Receive by Email"
- mail: "Mail"
- image: "Image"
- request: "Request"
- imageRequested: "Image has been requested."
- selectDownloadMethod: "Select Download Method"

All bottom sheet UI text now supports internationalization.

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/entities/common/ui/download-type-bottom-sheet.tsx

@@ -1,6 +1,7 @@
 import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
 
 export interface DownloadTypeBottomSheetProps {
   bottomSheetOn: boolean;
@@ -13,6 +14,7 @@ export const DownloadTypeBottomSheet = ({
   setBottomSheetOn,
   onSelectType
 }: DownloadTypeBottomSheetProps) => {
+  const { t } = useTranslation();
 
   const onClickToClose = () => {
     setBottomSheetOn(false);
@@ -37,14 +39,14 @@ export const DownloadTypeBottomSheet = ({
       >
         <div className="bottomsheet-header">
           <div className="bottomsheet-title">
-            <h2>다운로드 방식을 선택하세요</h2>
+            <h2>{t('common.selectDownloadMethod')}</h2>
             <button
               className="close-btn"
               type="button"
             >
               <img
                 src={ IMAGE_ROOT + '/ico_close.svg' }
-                alt="닫기"
+                alt={t('common.close')}
                 onClick={ () => onClickToClose() }
               />
             </button>
@@ -62,10 +64,10 @@ export const DownloadTypeBottomSheet = ({
                 <div className="mail-icon-bg"></div>
                 <img
                   src={ IMAGE_ROOT + '/ico_pic.svg' }
-                  alt="이미지"
+                  alt={t('common.image')}
                 />
               </div>
-              <span className="label-text">이미지 저장</span>
+              <span className="label-text">{t('common.imageSave')}</span>
             </div>
 
             <div
@@ -77,10 +79,10 @@ export const DownloadTypeBottomSheet = ({
                 <div className="mail-icon-bg"></div>
                 <img
                   src={ IMAGE_ROOT + '/ico_email.svg' }
-                  alt='메일'
+                  alt={t('common.mail')}
                 />
               </div>
-              <span className="label-text">메일로 받기</span>
+              <span className="label-text">{t('common.receiveByEmail')}</span>
             </div>
           </div>
         </div>

src/entities/common/ui/email-bottom-sheet.tsx

@@ -5,6 +5,7 @@ import { motion } from 'framer-motion';
 import { ChangeEvent, useState } from 'react';
 import { toPng } from 'html-to-image';
 import { snackBar } from '@/shared/lib';
+import { useTranslation } from 'react-i18next';
 
 export interface EmailBottomSheetProps {
   bottomSheetOn: boolean;
@@ -21,6 +22,7 @@ export const EmailBottomSheet = ({
   sendEmail,
   sendRequest
 }: EmailBottomSheetProps) => {
+  const { t } = useTranslation();
   const optionsEmails = useStore.getState().UserStore.selectOptionsEmails;
   const email = useStore.getState().UserStore.email;
   const [userEmail, setUserEmail] = useState<string>(email);
@@ -39,7 +41,7 @@ export const EmailBottomSheet = ({
       link.download = 'downloadImage.png';
       link.href = image;
       link.click();
-      snackBar('이미지가 요청 되었습니다.');
+      snackBar(t('common.imageRequested'));
     });
   };
   const onDownloadImage = () => {
@@ -63,14 +65,14 @@ export const EmailBottomSheet = ({
       >
         <div className="bottomsheet-header">
           <div className="bottomsheet-title">
-            <h2>이메일 주소를 선택하세요</h2>
+            <h2>{t('common.selectEmailAddress')}</h2>
             <button
               className="close-btn"
               type="button"
             >
               <img
                 src={ IMAGE_ROOT + '/ico_close.svg' }
-                alt="닫기"
+                alt={t('common.close')}
                 onClick={ () => onClickToClose() }
               />
             </button>
@@ -88,10 +90,10 @@ export const EmailBottomSheet = ({
                 <div className="mail-icon-bg"></div>
                 <img
                   src={ IMAGE_ROOT + '/ico_pic.svg' }
-                  alt="이미지"
+                  alt={t('common.image')}
                 />
               </div>
-              <span className="label-text">이미지 저장</span>
+              <span className="label-text">{t('common.imageSave')}</span>
             </div>
             }
             { !!sendEmail &&
@@ -101,10 +103,10 @@ export const EmailBottomSheet = ({
                   <div className="mail-icon-bg"></div>
                   <img
                     src={ IMAGE_ROOT + '/ico_email.svg' }
-                    alt='메일'
+                    alt={t('common.mail')}
                   />
                 </div>
-                <span className="label-text">메일로 받기</span>
+                <span className="label-text">{t('common.receiveByEmail')}</span>
               </div>
               <div className="email-select">
                 <div className="select-wrapper">
@@ -139,7 +141,7 @@ export const EmailBottomSheet = ({
             className="btn-50 btn-blue flex-1"
             type="button"
             onClick={ onClickToRequest }
-          >신청</button>
+          >{t('common.request')}</button>
         </div>
       </motion.div>
     </>

src/locales/en.json

@@ -27,7 +27,15 @@
             "fri": "Fri",
             "sat": "Sat"
         },
-        "currencyUnit": ""
+        "currencyUnit": "",
+        "selectEmailAddress": "Select Email Address",
+        "imageSave": "Save as Image",
+        "receiveByEmail": "Receive by Email",
+        "mail": "Mail",
+        "image": "Image",
+        "request": "Request",
+        "imageRequested": "Image has been requested.",
+        "selectDownloadMethod": "Select Download Method"
     },
     "menu": {
         "home": "Home",