[25.05.14 / TASK-190] Refactor - UTC -> KST 변환 반영 (#34)

Author: six-standard

src/app/(auth-required)/main/Content.tsx

@@ -8,6 +8,7 @@ import { Button, Dropdown, Check } from '@/components';
 import { postList, postSummary } from '@/apis';
 import { PATHS, SORT_TYPE } from '@/constants';
 import { SortKey, SortValue } from '@/types';
+import { convertDateToKST } from '@/utils';
 import { Section, Summary } from './components';
 
 const sorts: Array<[SortKey, SortValue]> = Object.entries(SORT_TYPE) as Array<[SortKey, SortValue]>;
@@ -50,15 +51,17 @@ export const Content = () => {
       <div className="w-full flex flex-col gap-[30px] overflow-auto max-TBL:gap-[20px]">
         <div className="flex h-fit flex-col items-center p-[20px] bg-BG-SUB gap-5 rounded-[4px]">
           <span className="text-TEXT-ALT text-ST5 MBI:hidden">
-            마지막 업데이트 : {summaries?.stats?.lastUpdatedDate || 'NULL'}
+            마지막 업데이트 :{' '}
+            {convertDateToKST(summaries?.stats?.lastUpdatedDate)?.iso || '업데이트 중..'}
           </span>
           <div className="w-full flex items-center justify-between flex-wrap max-MBI:justify-center max-MBI:gap-4">
             <div className="flex items-center gap-3">
               <Button size="SMALL" disabled>
                 새로고침
               </Button>
               <span className="text-TEXT-ALT text-ST4 max-TBL:text-ST5 max-MBI:hidden">
-                마지막 업데이트 : {summaries?.stats?.lastUpdatedDate || '업데이트 중..'}
+                마지막 업데이트 :{' '}
+                {convertDateToKST(summaries?.stats?.lastUpdatedDate)?.iso || '업데이트 중..'}
               </span>
             </div>
             <div className="flex items-center gap-3">

src/app/(auth-required)/main/components/Section/Graph.tsx

@@ -18,6 +18,7 @@ import { Dropdown, Input } from '@/components';
 import { PostDetailValue } from '@/types';
 import { useResponsive } from '@/hooks';
 import { postDetail } from '@/apis';
+import { convertDateToKST } from '@/utils';
 
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
 
@@ -50,7 +51,7 @@ export const Graph = ({ id, releasedAt }: IProp) => {
     queryKey: [PATHS.DETAIL, type, id],
     queryFn: async () => await postDetail(id, type.start, type.end),
     select: ({ post }) => ({
-      labels: post.map((i) => i.date.split('T')[0]),
+      labels: post.map((i) => convertDateToKST(i.date)?.short),
       datasets: [
         {
           label: type.type,
@@ -87,7 +88,7 @@ export const Graph = ({ id, releasedAt }: IProp) => {
               size={isMBI ? 'SMALL' : 'MEDIUM'}
               form="SMALL"
               value={type.start}
-              min={releasedAt.split('T')[0]}
+              min={convertDateToKST(releasedAt)?.short}
               onChange={(e) => setType({ ...type, start: e.target.value })}
               placeholder="시작 날짜"
               type="date"
@@ -97,7 +98,7 @@ export const Graph = ({ id, releasedAt }: IProp) => {
               size={isMBI ? 'SMALL' : 'MEDIUM'}
               form="SMALL"
               value={type.end}
-              min={type.start ? type.start : releasedAt.split('T')[0]}
+              min={type.start ? type.start : convertDateToKST(releasedAt)?.short}
               onChange={(e) => setType({ ...type, end: e.target.value })}
               placeholder="종료 날짜"
               type="date"

src/app/(auth-required)/main/components/Section/index.tsx

@@ -6,6 +6,7 @@ import { COLORS, env, PATHS } from '@/constants';
 import { PostType, UserDto } from '@/types';
 import { Icon } from '@/components';
 import { getQueryClient } from '@/utils/queryUtil';
+import { convertDateToKST } from '@/utils';
 import { Graph } from './Graph';
 
 export const Section = (p: PostType) => {
@@ -39,12 +40,12 @@ export const Section = (p: PostType) => {
           </div>
 
           <span className="text-TEXT-ALT text-ST4 MBI:content-[attr(data-date)] max-MBI:hidden">
-            {p.releasedAt.split('T')[0]}
+            {convertDateToKST(p.releasedAt)?.short}
           </span>
         </div>
 
         <div className="flex items-center text-ST4 justify-between text-TEXT-ALT gap-1 max-TBL:text-ST5 max-MBI:w-full">
-          <span className="MBI:hidden">{p.releasedAt.split('T')[0]}</span>
+          <span className="MBI:hidden">{convertDateToKST(p.releasedAt)?.short}</span>
           <div className="flex flex-wrap items-center gap-[6px]">
             <span className='after:content-["/"] after:ml-2'>{parseNumber(p.views)}</span>
             <span className="flex items-center before:text-PRIMARY-SUB before:content-['↑'] before:mr-1 after:ml-2 after:content-['/']">

src/utils/dateUtil.ts

@@ -0,0 +1,30 @@
+const KST_DIFF = 9 * 60 * 60 * 1000;
+
+/**
+ * 주어진 날짜 문자열을 KST(한국 표준시) 기준으로 변환함.
+ *
+ * @param {string} [date] - 변환할 날짜 문자열 (예: "2025-05-15T08:00:00Z")
+ * @returns {{
+ *   short: string; // "YYYY-MM-DD" 형식의 날짜 문자열
+ *   iso: string;   // ISO 8601 형식 + KST 오프셋 포함 문자열
+ *   full: Date;    // KST로 보정된 Date 객체
+ * } | undefined} 날짜가 없으면 undefined 반환
+ */
+
+export const convertDateToKST = (date?: string) => {
+  if (!date) return;
+  const converted = new Date(new Date(date).getTime() + KST_DIFF);
+
+  const year = converted.getFullYear();
+  const month = (converted.getMonth() + 1).toString().padStart(2, '0');
+  const day = converted.getDate().toString().padStart(2, '0');
+  const hours = converted.getHours().toString().padStart(2, '0');
+  const minutes = converted.getMinutes().toString().padStart(2, '0');
+  const seconds = converted.getSeconds().toString().padStart(2, '0');
+
+  return {
+    short: `${converted.getFullYear()}-${(converted.getMonth() + 1).toString().padStart(2, '0')}-${converted.getDate()}`,
+    iso: `${year}-${month}-${day}T${hours}:${minutes}:${seconds}+09:00`,
+    full: converted,
+  };
+};

src/utils/index.tsx

@@ -1,2 +1,3 @@
 export * from './componentUtil';
 export * from './numberUtil';
+export * from './dateUtil';