♻️ Refactor: Card 컴포넌트에서 image, create_at 에러 수정

Chaemin-153 · Apr 3, 2024 · a5e66d7 · a5e66d7
1 parent 04dddcd
commit a5e66d7
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git a/src/components/Folder/MainContent/FolderCards/Card/Card.tsx b/src/components/Folder/MainContent/FolderCards/Card/Card.tsx
@@ -10,23 +10,23 @@ import SelectMenu from '../../../../SelectMenu/SelectMenu';
 interface FolderCardProps {
   id: number;
   imageSource: string;
-  createdAt: string;
+  created_at: string;
   description: string;
   url: string;
 }
 
 export default function Card({
   id,
   imageSource,
-  createdAt,
+  created_at,
   description,
   url,
 }: FolderCardProps) {
   const [selectMenuIsOpen, setSelectMenuIsOpen] = useState(false);
   const kebabRef = useRef<HTMLImageElement>(null);
 
-  const date = new Date(createdAt).toLocaleDateString();
-  const dataStatus = updateStatus(createdAt);
+  const date = new Date(created_at).toLocaleDateString();
+  const dataStatus = updateStatus(created_at);
 
   const openSelectMenu = () => {
     setSelectMenuIsOpen(true);
@@ -53,7 +53,7 @@ export default function Card({
         height={34}
       />
       <div className={styles.textContainer}>
-        <span>{createdAt ? dataStatus : null}</span>
+        <span>{created_at ? dataStatus : null}</span>
         {description ? (
           <p>{description}</p>
         ) : (

diff --git a/src/components/Folder/MainContent/FolderCards/FolderCards.tsx b/src/components/Folder/MainContent/FolderCards/FolderCards.tsx
@@ -3,8 +3,8 @@ import styles from './FolderCards.module.scss';
 
 interface FolderCardProps {
   id: number;
-  imageSource: string;
-  createdAt: string;
+  image_source: string;
+  created_at: string;
   description: string;
   url: string;
 }
@@ -22,15 +22,15 @@ export const FolderCards = ({ folder }: FolderProps) => {
         folder.map(
           ({
             id,
-            imageSource,
-            createdAt,
+            image_source,
+            created_at,
             description,
             url,
           }: FolderCardProps) => (
             <Card
               id={id}
-              imageSource={imageSource}
-              createdAt={createdAt}
+              imageSource={image_source}
+              created_at={created_at}
               description={description}
               url={url}
             />

diff --git a/src/utils/cardUpdate.ts b/src/utils/cardUpdate.ts
@@ -1,6 +1,6 @@
-export const updateStatus = (createdAt: string) => {
+export const updateStatus = (created_at: string) => {
   const currentTime = new Date().getTime();
-  const createdTime = new Date(createdAt).getTime();
+  const createdTime = new Date(created_at).getTime();
   const timeDiffMinute = (currentTime - createdTime) / (1000 * 60);
   const { timeLength, timeUnit } = determineTimeUnit(timeDiffMinute);
   const updatedTime = getPluralWord(timeLength, timeUnit);
@@ -20,16 +20,19 @@ const determineTimeUnit = (minute: number) => {
     return { timeLength: 1, timeUnit: 'minute' };
   }
   if (minute < 60) {
-    return { timeLength: minute, timeUnit: 'minute' };
+    return { timeLength: Math.floor(minute), timeUnit: 'minute' };
   }
   if (minute < 60 * 24) {
-    return { timeLength: minute / 60, timeUnit: 'hour' };
+    return { timeLength: Math.floor(minute / 60), timeUnit: 'hour' };
   }
   if (minute < 60 * 24 * 30) {
-    return { timeLength: minute / (60 * 24), timeUnit: 'day' };
+    return { timeLength: Math.floor(minute / (60 * 24)), timeUnit: 'day' };
   }
   if (minute < 60 * 24 * 30 * 12) {
-    return { timeLength: minute / (60 * 24 * 30), timeUnit: 'month' };
+    return {
+      timeLength: Math.floor(minute / (60 * 24 * 30)),
+      timeUnit: 'month',
+    };
   }
   return {
     timeLength: minute / (60 * 24 * 30 * 12),