Skip to content

마감시간 포맷 변경#845

Open
thgml05 wants to merge 3 commits intofe/devfrom
fe/hotfix/timezone
Open

마감시간 포맷 변경#845
thgml05 wants to merge 3 commits intofe/devfrom
fe/hotfix/timezone

Conversation

@thgml05
Copy link
Copy Markdown

@thgml05 thgml05 commented Mar 26, 2026

#️⃣ 연관된 이슈

📝 작업 내용

  • 마감시간 포맷 변경 (ex) 18:00:00Z -> 18:00)

📸 참고 이미지

수정 전
image
수정 후
image

💬 리뷰 요구사항

@thgml05 thgml05 self-assigned this Mar 26, 2026
@thgml05 thgml05 added FE Frontend 🚨 hotfix 핫픽스 labels Mar 26, 2026
@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 26, 2026

⚡️ Lighthouse Report

Category Score
🟠 Performance (성능) 74
🟢 Accessibility (접근성) 94
🟠 Best Practices (모범 사례) 75
🟢 SEO (검색엔진 최적화) 100

📊 Performance Details (성능 세부 지표)

Metric (지표) Value
🟢 First Contentful Paint (최초 콘텐츠 표시) 1.5 s
🟠 Largest Contentful Paint (최대 콘텐츠 표시) 3.4 s
🔴 Total Blocking Time (총 차단 시간) 680 ms
🟢 Cumulative Layout Shift (누적 레이아웃 이동) 0.002
🟠 Time To Interactive (상호작용 가능 시간) 6.4 s

@github-actions
Copy link
Copy Markdown

🚀 Storybook preview: https://687852cd7789368357f3bb71-wcnufpgsid.chromatic.com/

const [date, time] = deadline.split('T');
const replacedDeadline = new Date(deadline.replace('Z', ''));

const date = replacedDeadline.toLocaleDateString('sv-SE');
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

스워덴 날짜-시간을 쓰지 않고, 이런식으로 줄수 있을까요?

Suggested change
const date = replacedDeadline.toLocaleDateString('sv-SE');
const date = replacedDeadline.toLocaleDateString('ko-KR');

혹시 스웨덴쪽으로 한 이유가 무엇인지 궁금합니다!

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ko-KR 쪽으로 하면 2026.03.27 식으로 표현이 되고 sv-SE로 해야 2026-03-27로 표현돼서 스웨덴쪽으로 작성했습니다!

Copy link
Copy Markdown
Contributor

@spoyodevelop spoyodevelop Mar 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

기존것이 점인지, 대시(-)인지 확실히 기억은 나지 않는데요.
저는 양쪽다 크게 상관은 없는것 같지만, 딱히 options로 -이나 .는 변경할수 없어서 이렇게 도입했군요.
타임존 문제도 toLocaleDateString의 경우 브라우저의 타임존을 따라가서 크게 문제 없을듯 합니다.
다른 분들은 어떻게 생각하시나요?
@hoyyChoi @Db0111

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

비슷한 애로사항이 조금 존재했네요.
로컬 타임존 기준으로 2024-05-16T01:30:00.000Z → 2024-05-15 이렇게 만들고 싶은데 best practice가 뭔가요?
Temporal을 쓰라고 하지만, Safari가 아직 미지원이니 현재는

const toLocalDateString = date =>
  new Date(date - date.getTimezoneOffset() * 60_000)
    //오프셋 계산
    .toISOString()
    // 기존에 주던 (DATE)T(TIME) 방식으로 불러옴.
    .replace(/T.*/, "");
    // T이후의 string 다 짜르면 DATE만 남음.

이 정도의 유틸 함수를 하나 만들어서 sv-SE를 대체하는 것이 괜찮을것 같아요. Temporal이 크로스브라우저 지원을 완전히 갖추면 아래것도 생각해볼수 있지만.. 일단 이렇게 쓰는게 어떠할까요?

// Temporal 완전 지원 이후(지금은 쓰지 못함.)
const toLocalDateString = date =>
  Temporal.Instant.from(date.toISOString())
    .toZonedDateTimeISO(Temporal.Now.timeZoneId())
    .toPlainDate()
    .toString(); // "2025-03-27"

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저는 유틸함수를 따로 빼서 대체하는 것도 좋을 것 같습니다 ! Temporal 부분에 대해서는 조금 더 고민해야겠지만 ,, 우선 현재로서는 마빈이 말한 방법이 최선일 것 같아요~!

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

유틸함수 분리 좋을 것 같아요! 수정해보겠습니다👍
근데 지금 방 생성 페이지에서 설정한 데드라인 날짜, 시간 그대로 서버에서도 보내주고 있습니다.
예를들어 2026/03/29 13:00 -> "2026-03-29T13:00:00" 이렇게 오고 있습니다!
그래서 9시간 조정 없이 아래와 같은 형태로 작성될 것 같은데 어떻게 생각하시나요?

const formatUTCDateTime = (isoString: string) => {
  const iso = new Date(isoString).toISOString();

  const [date, timeWithMs] = iso.split('T');
  const time = timeWithMs.slice(0, 5);

  return { date, time };
};

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오, 그방법이 있으면 그렇게 하면 됩니다!

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

굿~

@hoyyChoi
Copy link
Copy Markdown
Contributor

hoyyChoi commented Mar 29, 2026

@thgml05 고생하셨습니다 해삐
지금 날짜 같은 경우에는 스웨덴으로 표기되어있는 것도 확인했습니다! 다만 추후에 코드를 봤을 때 정확한 원인 파악하지 못할 것 같은데요!

  1. 주석을 달아서 원인을 표기해두는 방법
  2. ko-kr 로 변환한다음 파싱로직을 따로 붙인다. (ex. 2026.03.30 -> (별도의 파싱로직) 2026-03-30 )
  3. 로케일 값을 사용하지 않고 직접 조립한다. (유틸함수 이용)

어떻게 생각하실까요.?

hoyyChoi
hoyyChoi previously approved these changes Mar 29, 2026
Comment on lines +18 to +25
const replacedDeadline = new Date(deadline.replace('Z', ''));

const date = replacedDeadline.toLocaleDateString('sv-SE');
const time = replacedDeadline.toLocaleTimeString('ko-KR', {
hour: '2-digit',
minute: '2-digit',
hour12: false,
});
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const replacedDeadline = new Date(deadline.replace('Z', ''));
const date = replacedDeadline.toLocaleDateString('sv-SE');
const time = replacedDeadline.toLocaleTimeString('ko-KR', {
hour: '2-digit',
minute: '2-digit',
hour12: false,
});
function parseDeadline(deadline: string) {
const d = new Date(deadline.replace('Z', ''));
return {
date: `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`,
time: `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`,
};
}

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

혹시 원인을 정확히 파악하기 힘들다고 이야기해준 부분이 예를들어 어떤 걸 이야기하는지 알 수 있을까요??🧐

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

원인이라기보단 의도파악에 조금 더 가까울 것 같습니다! 추후에 코드만 보면 왜 스웨덴 로케일이 여기에 있는지 하고 의아해질 것 같습니다! YYYY-MM-DD 포맷을 얻기 위한 트릭이라는 걸 알려면 sv-SE의 날짜 포맷 특성을 별도로 알고 있어야하고, 주석도 없다면 나중에 더더욱 헷갈리지 않을까요!?

그리고 단순히 생각해보면, 서버에서 내려온 날짜를 우리 화면에 맞게 표시하기 위해 가공하는 로직인데, 이때 sv-SE라는 스웨덴 로케일의 포맷 특성을 빌려 쓰는 방식이 직관적이지 않다고 느꼈습니다. YYYY-MM-DD 포맷이 필요하다면 직접 조립하는 게 의도가 더 명확할 것 같습니다.~

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sv-SE 포맷 특성을 바로 알지 못한다고 가정하면 호이초이가 제안해준 코드가 더 직관적인 방향일 수 있겠네요!
그럼 이 방향으로 수정해보도록 하겠습니다!

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

감사합니다~ 해삐

@github-actions
Copy link
Copy Markdown

🚀 Storybook preview: https://687852cd7789368357f3bb71-dnalvjvklm.chromatic.com/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

FE Frontend 🚨 hotfix 핫픽스

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

5 participants