feat: bug fix and add date notation

web/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.80",
+  "version": "0.4.81",
   "type": "module",
   "scripts": {
     "dev": "vite",

web/src/core/photo.ts

@@ -102,11 +102,51 @@ class Photo {
    */
   public get takenAt(): string {
     if (!this.metadata.takenAt) return '';
+
     const takenAt = new Date(this.metadata.takenAt);
-    return `${takenAt.getFullYear()}/${(takenAt.getMonth() + 1).toString().padStart(2, '0')}/${takenAt.getDate().toString().padStart(2, '0')} ${takenAt
-      .getHours()
-      .toString()
-      .padStart(2, '0')}:${takenAt.getMinutes().toString().padStart(2, '0')}:${takenAt.getSeconds().toString().padStart(2, '0')}`;
+    switch (localStorage.getItem('dateNotation') || '2001/01/01 01:01:01') {
+      case '2001/01/01 01:01:01':
+        return `${takenAt.getFullYear()}/${(takenAt.getMonth() + 1).toString().padStart(2, '0')}/${takenAt.getDate().toString().padStart(2, '0')} ${takenAt
+          .getHours()
+          .toString()
+          .padStart(2, '0')}:${takenAt.getMinutes().toString().padStart(2, '0')}:${takenAt.getSeconds().toString().padStart(2, '0')}`;
+
+      case '2001-01-01 01:01:01':
+        return `${takenAt.getFullYear()}-${(takenAt.getMonth() + 1).toString().padStart(2, '0')}-${takenAt.getDate().toString().padStart(2, '0')} ${takenAt
+          .getHours()
+          .toString()
+          .padStart(2, '0')}:${takenAt.getMinutes().toString().padStart(2, '0')}:${takenAt.getSeconds().toString().padStart(2, '0')}`;
+
+      case '2001年01月01日 01時01分':
+        return `${takenAt.getFullYear()}年${(takenAt.getMonth() + 1).toString().padStart(2, '0')}月${takenAt.getDate().toString().padStart(2, '0')}日 ${takenAt
+          .getHours()
+          .toString()
+          .padStart(2, '0')}時${takenAt.getMinutes().toString().padStart(2, '0')}分`;
+
+      case '2001년 01월 01일 01시 01분':
+        return `${takenAt.getFullYear()}년 ${(takenAt.getMonth() + 1).toString().padStart(2, '0')}월 ${takenAt.getDate().toString().padStart(2, '0')}일 ${takenAt
+          .getHours()
+          .toString()
+          .padStart(2, '0')}시 ${takenAt.getMinutes().toString().padStart(2, '0')}분`;
+
+      case '2001/01/01':
+        return `${takenAt.getFullYear()}/${(takenAt.getMonth() + 1).toString().padStart(2, '0')}/${takenAt.getDate().toString().padStart(2, '0')}`;
+
+      case '2001-01-01':
+        return `${takenAt.getFullYear()}-${(takenAt.getMonth() + 1).toString().padStart(2, '0')}-${takenAt.getDate().toString().padStart(2, '0')}`;
+
+      case '2001年01月01日':
+        return `${takenAt.getFullYear()}年${(takenAt.getMonth() + 1).toString().padStart(2, '0')}月${takenAt.getDate().toString().padStart(2, '0')}日`;
+
+      case '2001년 01월 01일':
+        return `${takenAt.getFullYear()}년 ${(takenAt.getMonth() + 1).toString().padStart(2, '0')}월 ${takenAt.getDate().toString().padStart(2, '0')}일`;
+
+      case 'Jan 1, 2001':
+        return `${['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][takenAt.getMonth()]} ${takenAt.getDate().toString().padStart(2, '0')}, ${takenAt.getFullYear()}`;
+
+      default:
+        return '';
+    }
   }
 }
 

web/src/icons/time.icon.tsx

@@ -0,0 +1,12 @@
+import { Icon } from 'konsta/react';
+import { IoMdTime } from 'react-icons/io';
+
+interface TimeIconProps {
+  size?: number;
+}
+
+const TimeIcon = ({ size }: TimeIconProps) => {
+  return <Icon ios={<IoMdTime size={size} />} />;
+};
+
+export default TimeIcon;

web/src/locales/translations/en.json

@@ -58,6 +58,7 @@
   "root.settings.export-to-jpeg": "Export to JPEG",
   "root.settings.quality": "Quality",
   "root.settings.fix-image-width": "Fix Image Width",
+  "root.settings.date-notation": "Date Notation",
   "root.settings.focal-length-35mm-mode": "Focal Length 35mm Mode",
   "root.settings.focal-length-ratio": "Crop Factor",
   "root.settings.focal-length-ratio-mode": "Fixed Crop Factor",
@@ -79,5 +80,8 @@
   "lab.description": "The experimental function may appear like the wind and disappear without a sound.",
   "lab.collage": "Collage",
   "lab.collage-description": "Create a collage with multiple photos.",
-  "lab.collage-options": "You can set the top, bottom, left, and right margins and the space between photos."
+  "lab.collage-options": "You can set the top, bottom, left, and right margins and the space between photos.",
+
+  "fail-to-load-photos": "Failed to load photos.",
+  "please-check-your-photo-extension": "Please check your photo file extension."
 }

web/src/locales/translations/ja.json

@@ -58,6 +58,7 @@
   "root.settings.export-to-jpeg": "JPEGにエクスポート",
   "root.settings.quality": "画質",
   "root.settings.fix-image-width": "画像幅を固定",
+  "root.settings.date-notation": "日付表記",
   "root.settings.focal-length-35mm-mode": "35mm換算焦点距離",
   "root.settings.focal-length-ratio": "焦点距離比率",
   "root.settings.focal-length-ratio-mode": "焦点距離比率モード",
@@ -79,5 +80,8 @@
   "lab.description": "実験室機能は風のように現れ、音もなく消えることがあります。",
   "lab.collage": "コラージュ",
   "lab.collage-description": "写真をコラージュします。",
-  "lab.collage-options": "上下左右の余白と写真間の余白を設定できます。"
+  "lab.collage-options": "上下左右の余白と写真間の余白を設定できます。",
+
+  "fail-to-load-photos": "写真の読み込みに失敗しました。",
+  "please-check-your-photo-extension": "写真の拡張子を確認してください。"
 }

web/src/locales/translations/ko.json

@@ -59,6 +59,7 @@
   "root.settings.export-to-jpeg": "JPEG로 내보내기",
   "root.settings.quality": "품질",
   "root.settings.fix-image-width": "사진 너비 고정",
+  "root.settings.date-notation": "날짜 표기법",
   "root.settings.focal-length-35mm-mode": "35mm 환산 화각 표시",
   "root.settings.focal-length-ratio": "크롭 팩터",
   "root.settings.focal-length-ratio-mode": "크롭 팩터 강제 변경",
@@ -80,5 +81,8 @@
   "lab.description": "실험실 기능은 바람처럼 나타났다 소리없이 사라질 수 있습니다.",
   "lab.collage": "콜라주",
   "lab.collage-description": "여러 장의 사진을 한 장으로 합치는 기능입니다.",
-  "lab.collage-options": "상하좌우 여백과 사진 간 여백을 설정할 수 있습니다."
+  "lab.collage-options": "상하좌우 여백과 사진 간 여백을 설정할 수 있습니다.",
+
+  "fail-to-load-photos": "사진을 불러오는데 실패했습니다",
+  "please-check-your-photo-extension": "사진 확장자를 확인해주세요"
 }

web/src/pages/convert/components/add-photo-error.dialog.tsx

@@ -0,0 +1,20 @@
+import { Dialog, DialogButton } from 'konsta/react';
+import { useStore } from '../../../store';
+import { useTranslation } from 'react-i18next';
+
+const AddPhotoErrorDialog = () => {
+  const { t } = useTranslation();
+  const { openedAddPhotoErrorDialog, setOpenedAddPhotoErrorDialog } = useStore();
+
+  return (
+    <Dialog
+      opened={openedAddPhotoErrorDialog}
+      onBackdropClick={() => setOpenedAddPhotoErrorDialog(false)}
+      title={t('fail-to-load-photos')}
+      content={t('please-check-your-photo-extension')}
+      buttons={<DialogButton onClick={() => setOpenedAddPhotoErrorDialog(false)}>{t('close')}</DialogButton>}
+    />
+  );
+};
+
+export default AddPhotoErrorDialog;

web/src/pages/convert/components/add-photo.button.tsx

@@ -7,7 +7,7 @@ import AddIcon from '../../../icons/add.icon';
 
 const AddPhotoButton = () => {
   const { t } = useTranslation();
-  const { photos, setPhotos, setLoading } = useStore();
+  const { photos, setPhotos, setLoading, setOpenedAddPhotoErrorDialog } = useStore();
 
   const onDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
@@ -30,9 +30,14 @@ const AddPhotoButton = () => {
     e.stopPropagation();
     const { files } = e.dataTransfer;
     if (!files) return;
-    await Promise.all(Array.from(files).map(Photo.create)).then((newPhotos) => {
-      setPhotos([...photos, ...newPhotos]);
-    });
+    try {
+      await Promise.all(Array.from(files).map(Photo.create)).then((newPhotos) => {
+        setPhotos([...photos, ...newPhotos]);
+      });
+    } catch (e) {
+      console.error(e);
+      setOpenedAddPhotoErrorDialog(true);
+    }
     setLoading(false);
   };
 
@@ -41,9 +46,14 @@ const AddPhotoButton = () => {
     await new Promise((resolve) => setTimeout(resolve, 100));
     const { files } = event.target;
     if (!files) return;
-    await Promise.all(Array.from(files).map(Photo.create)).then((newPhotos) => {
-      setPhotos([...photos, ...newPhotos]);
-    });
+    try {
+      await Promise.all(Array.from(files).map(Photo.create)).then((newPhotos) => {
+        setPhotos([...photos, ...newPhotos]);
+      });
+    } catch (e) {
+      console.error(e);
+      setOpenedAddPhotoErrorDialog(true);
+    }
     setLoading(false);
   };
 

web/src/pages/convert/page.tsx

@@ -12,6 +12,7 @@ import RemoveAllPhotoButton from './components/remove-all-photo.button';
 import SettingsIcon from '../../icons/settings.icon';
 import ImageIcon from '../../icons/image.icon';
 import GenerateIcon from '../../icons/generate.icon';
+import AddPhotoErrorDialog from './components/add-photo-error.dialog';
 
 const FramePage = () => {
   const { t } = useTranslation();
@@ -61,6 +62,8 @@ const FramePage = () => {
       <OverrideMetadataPopup />
 
       <Loading />
+
+      <AddPhotoErrorDialog />
     </Page>
   );
 };

web/src/pages/lab/collage/components/add-photo.button.tsx

@@ -4,10 +4,12 @@ import { useTranslation } from 'react-i18next';
 import Photo from '../../../../core/photo';
 import AddIcon from '../../../../icons/add.icon';
 import { useStore } from '../store';
+import * as Root from '../../../../store';
 
 const AddPhotoButton = () => {
   const { t } = useTranslation();
   const { photos, setPhotos, setLoading } = useStore();
+  const { setOpenedAddPhotoErrorDialog } = Root.useStore();
 
   const onDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
@@ -30,9 +32,14 @@ const AddPhotoButton = () => {
     e.stopPropagation();
     const { files } = e.dataTransfer;
     if (!files) return;
-    await Promise.all(Array.from(files).map(Photo.create)).then((newPhotos) => {
-      setPhotos([...photos, ...newPhotos]);
-    });
+    try {
+      await Promise.all(Array.from(files).map(Photo.create)).then((newPhotos) => {
+        setPhotos([...photos, ...newPhotos]);
+      });
+    } catch (e) {
+      console.error(e);
+      setOpenedAddPhotoErrorDialog(true);
+    }
     setLoading(false);
   };
 
@@ -41,9 +48,14 @@ const AddPhotoButton = () => {
     await new Promise((resolve) => setTimeout(resolve, 100));
     const { files } = event.target;
     if (!files) return;
-    await Promise.all(Array.from(files).map(Photo.create)).then((newPhotos) => {
-      setPhotos([...photos, ...newPhotos]);
-    });
+    try {
+      await Promise.all(Array.from(files).map(Photo.create)).then((newPhotos) => {
+        setPhotos([...photos, ...newPhotos]);
+      });
+    } catch (e) {
+      console.error(e);
+      setOpenedAddPhotoErrorDialog(true);
+    }
     setLoading(false);
   };
 

web/src/pages/lab/page.tsx

@@ -2,6 +2,7 @@ import { Navbar, NavbarBackLink, Page } from 'konsta/react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import Collage from './collage/main';
+import AddPhotoErrorDialog from '../convert/components/add-photo-error.dialog';
 
 const LabPage = () => {
   const navigator = useNavigate();
@@ -13,6 +14,8 @@ const LabPage = () => {
         <Navbar title={t('lab')} subtitle={t('lab.description')} left={<NavbarBackLink text={t('back')} onClick={() => navigator(-1)} />} />
 
         <Collage />
+
+        <AddPhotoErrorDialog />
       </Page>
     </>
   );

web/src/pages/setting/components/date-notation.list-item.tsx

@@ -0,0 +1,17 @@
+import { ListItem } from 'konsta/react';
+import { useStore } from '../../../store';
+import { useTranslation } from 'react-i18next';
+import TimeIcon from '../../../icons/time.icon';
+
+const DateNotationListItem = () => {
+  const { t } = useTranslation();
+  const { dateNotation, setDateNotationPopover } = useStore();
+
+  return (
+    <>
+      <ListItem title={t('root.settings.date-notation')} media={<TimeIcon size={26} />} after={<div className="date-notation">{dateNotation}</div>} onClick={() => setDateNotationPopover(true)} link />
+    </>
+  );
+};
+
+export default DateNotationListItem;

web/src/pages/setting/components/date-notation.popover.tsx

@@ -0,0 +1,38 @@
+import { List, ListItem, Popover } from 'konsta/react';
+import { useStore } from '../../../store';
+
+const DateNotationPopover = () => {
+  const { dateNotationPopover, setDateNotationPopover, setDateNotation } = useStore();
+
+  return (
+    <Popover opened={dateNotationPopover} target={'.date-notation'} onBackdropClick={() => setDateNotationPopover(false)}>
+      <List nested>
+        {[
+          'empty',
+          'Jan 1, 2001',
+          '2001/01/01 01:01:01',
+          '2001-01-01 01:01:01',
+          '2001年01月01日 01時01分',
+          '2001년 01월 01일 01시 01분',
+          '2001/01/01',
+          '2001-01-01',
+          '2001年01月01日',
+          '2001년 01월 01일',
+        ].map((ratio) => (
+          <ListItem
+            key={ratio}
+            title={ratio}
+            link
+            chevronIos={false}
+            onClick={() => {
+              setDateNotation(ratio as never);
+              setDateNotationPopover(false);
+            }}
+          />
+        ))}
+      </List>
+    </Popover>
+  );
+};
+
+export default DateNotationPopover;

web/src/pages/setting/page.tsx

@@ -31,6 +31,8 @@ import SponsorKakaopayListItem from './components/sponsor-kakaopay.list-item';
 import SponsorsListItem from './components/sponsors.list-item';
 import FocalLengthRatioModeListItem from './components/focal-length-ratio-mode.list-item';
 import LabListItem from './components/lab.list-item';
+import DateNotationListItem from './components/date-notation.list-item';
+import DateNotationPopover from './components/date-notation.popover';
 
 const ExportSettingsPage = () => {
   const { t } = useTranslation();
@@ -53,6 +55,7 @@ const ExportSettingsPage = () => {
         <FocalLengthRatioModeListItem />
         <FocalLength35mmModeListItem />
         <RatioListItem />
+        <DateNotationListItem />
       </List>
 
       <List strongIos inset>
@@ -97,6 +100,7 @@ const ExportSettingsPage = () => {
 
       <LanguagePopover />
       <RatioPopover />
+      <DateNotationPopover />
     </Page>
   );
 };

web/src/pages/sponsors.tsx

@@ -23,6 +23,7 @@ const SponsorsPage = () => {
           <li>FEMMK</li> {/* 2024-05-02 KakaoPay */}
           <li>잠실귀요밍</li> {/* 2024-05-02 KakaoPay */}
           <li>장비그래퍼</li> {/* 2024-05-03 KakaoPay */}
+          <li>iPhone_</li> {/* 2024-05-04 KakaoPay */}
         </Block>
 
         <Block>