ref: Refactoring

client/src/components/CardModal/Activities/Item.jsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { useTranslation, Trans } from 'react-i18next';
 import { Comment } from 'semantic-ui-react';
 
+import getDateFormat from '../../../utils/get-date-format';
 import { ActivityTypes } from '../../../constants/Enums';
 import ItemComment from './ItemComment';
 import User from '../../User';
@@ -13,10 +14,6 @@ import styles from './Item.module.scss';
 const Item = React.memo(({ type, data, createdAt, user }) => {
   const [t] = useTranslation();
 
-  const thisYear = new Date().getFullYear();
-  const targetYear = createdAt.getFullYear();
-  const dateFormat = (targetYear == thisYear) ? "longDateTime" : "fullDateTime";
-
   let contentNode;
   switch (type) {
     case ActivityTypes.CREATE_CARD:
@@ -70,7 +67,7 @@ const Item = React.memo(({ type, data, createdAt, user }) => {
       <div className={classNames(styles.content)}>
         <div>{contentNode}</div>
         <span className={styles.date}>
-          {t(`format:${dateFormat}`, {
+          {t(`format:${getDateFormat(createdAt)}`, {
             postProcess: 'formatDate',
             value: createdAt,
           })}

client/src/components/CardModal/Activities/ItemComment.jsx

@@ -6,6 +6,7 @@ import { Comment } from 'semantic-ui-react';
 import { usePopup } from '../../../lib/popup';
 import { Markdown } from '../../../lib/custom-ui';
 
+import getDateFormat from '../../../utils/get-date-format';
 import CommentEdit from './CommentEdit';
 import User from '../../User';
 import DeleteStep from '../../DeleteStep';
@@ -16,10 +17,6 @@ const ItemComment = React.memo(
   ({ data, createdAt, isPersisted, user, canEdit, onUpdate, onDelete }) => {
     const [t] = useTranslation();
 
-    const thisYear = new Date().getFullYear();
-    const targetYear = createdAt.getFullYear();
-    const dateFormat = (targetYear == thisYear) ? "longDateTime" : "fullDateTime";
-
     const commentEdit = useRef(null);
 
     const handleEditClick = useCallback(() => {
@@ -37,7 +34,7 @@ const ItemComment = React.memo(
           <div className={styles.title}>
             <span className={styles.author}>{user.name}</span>
             <span className={styles.date}>
-              {t(`format:${dateFormat}`, {
+              {t(`format:${getDateFormat(createdAt)}`, {
                 postProcess: 'formatDate',
                 value: createdAt,
               })}

client/src/components/DueDate/DueDate.jsx

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
+import getDateFormat from '../../utils/get-date-format';
+
 import styles from './DueDate.module.scss';
 
 const SIZES = {
@@ -12,13 +14,13 @@ const SIZES = {
   MEDIUM: 'medium',
 };
 
-const FORMATS = {
+const LONG_DATE_FORMAT_BY_SIZE = {
   tiny: 'longDate',
   small: 'longDate',
   medium: 'longDateTime',
 };
 
-const OTHERWISE_FORMATS = {
+const FULL_DATE_FORMAT_BY_SIZE = {
   tiny: 'fullDate',
   small: 'fullDate',
   medium: 'fullDateTime',
@@ -27,9 +29,11 @@ const OTHERWISE_FORMATS = {
 const DueDate = React.memo(({ value, size, isDisabled, onClick }) => {
   const [t] = useTranslation();
 
-  const thisYear = new Date().getFullYear();
+  const dateFormat = getDateFormat(
-  const targetYear = value.getFullYear();
+    value,
-  const dateFormats = (targetYear == thisYear) ? FORMATS : OTHERWISE_FORMATS;
+    LONG_DATE_FORMAT_BY_SIZE[size],
+    FULL_DATE_FORMAT_BY_SIZE[size],
+  );
 
   const contentNode = (
     <span
@@ -39,7 +43,7 @@ const DueDate = React.memo(({ value, size, isDisabled, onClick }) => {
         onClick && styles.wrapperHoverable,
       )}
     >
-      {t(`format:${dateFormats[size]}`, {
+      {t(`format:${dateFormat}`, {
         value,
         postProcess: 'formatDate',
       })}

client/src/locales/ja/core.js

@@ -10,7 +10,7 @@ export default {
     longDate: 'MMMMd日',
     longDateTime: "MMMMd'日 ' HH:mm",
     fullDate: 'yyyy年M月d日',
-    fullDateTime: "yyyy年M月d日 HH:mm",
+    fullDateTime: 'yyyy年M月d日 HH:mm',
   },
 
   translation: {

client/src/locales/ko/core.js

@@ -9,9 +9,8 @@ export default {
     dateTime: '$t(format:date) $t(format:time)',
     longDate: "MMMMd'일'",
     longDateTime: "MMMMd'일 ' a hh시 mm분",
-    fullDate: "yyyy년M월d일",
+    fullDate: 'yyyy년M월d일',
-    fullDateTime: "yyyy년M월d일 a hh시 mm분",
+    fullDateTime: 'yyyy년M월d일 a hh시 mm분',
-
   },
 
   translation: {

client/src/utils/get-date-format.js

@@ -0,0 +1,6 @@
+export default (value, longDateFormat = 'longDateTime', fullDateFormat = 'fullDateTime') => {
+  const year = value.getFullYear();
+  const currentYear = new Date().getFullYear();
+
+  return year === currentYear ? longDateFormat : fullDateFormat;
+};