Merge pull request #342 from boostcampwm-2022/refactor/month-label

Refactor: month label

Author: asdf99245

frontend/src/components/Profile/CommitHistory/index.tsx

@@ -1,8 +1,7 @@
 import styled from 'styled-components';
 import { HistoryType, RANK } from '@type/common';
 import { colors } from '@styles/theme';
-import { MONTH_LABEL_MAPPING } from '@utils/constants';
-import { getDate } from '@utils/utils';
+import { getDate, getMonthLabel } from '@utils/utils';
 
 const COMMIT_LEFT_BOUNDARY = 5;
 
@@ -31,6 +30,7 @@ function CommitHistory({ history, tier }: CommitHistoryProps) {
         {historyBlocks.map(([dateString, { level, count }], idx) => {
           const weeks = (idx + firstDay) / 7;
           const { month, date, day } = getDate(dateString);
+
           let isMonthLabelChange = false;
           if (prevMonth !== month && day === 0) {
             isMonthLabelChange = true;
@@ -42,7 +42,7 @@ function CommitHistory({ history, tier }: CommitHistoryProps) {
               style={{ backgroundColor: level === 0 ? colors.commit0 : colors[`${tier}${level}`] }}
             >
               {date < 24 && day === 0 && isMonthLabelChange ? (
-                <MonthLabel>{MONTH_LABEL_MAPPING[month]}</MonthLabel>
+                <MonthLabel>{getMonthLabel(new Date(dateString))}</MonthLabel>
               ) : null}
               <ToolTip className='tooltip' weeks={weeks}>
                 <strong>{count || 'No'}</strong> contribution on <strong>{dateString}</strong>
@@ -164,7 +164,6 @@ const MonthLabel = styled.div`
 
 const DayLabel = styled.ul`
   position: absolute;
-  top: 0;
   left: -20px;
   font-size: 16px;
   height: 100%;

frontend/src/components/Profile/PinnedRepository/index.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 import styled from 'styled-components';
 import { PinnedRepositoryType } from '@type/common';
 import { LanguageIcon } from '@components/common';
-import { numberCompactFormatter } from '@utils/utils';
+import { getCompactNumber } from '@utils/utils';
 
 interface PinnedRepositoryProps {
   repositories: PinnedRepositoryType[];
@@ -30,11 +30,11 @@ function PinnedRepository({ repositories }: PinnedRepositoryProps) {
               <Info>
                 <li>
                   <Image src={'/icons/star.svg'} alt='star' width={24} height={24} />
-                  {numberCompactFormatter(stargazerCount)}
+                  {getCompactNumber(stargazerCount)}
                 </li>
                 <li>
                   <Image src={'/icons/fork.svg'} alt='star' width={24} height={24} />
-                  {numberCompactFormatter(forkCount)}
+                  {getCompactNumber(forkCount)}
                 </li>
               </Info>
             </Meta>

frontend/src/components/Ranking/RisingRanking/index.tsx

@@ -6,7 +6,7 @@ import { RankingResponse } from '@type/response';
 import { RankingTable } from '@components/Ranking';
 import { Avatar, CubeIcon } from '@components/common';
 import { requestTopRankingByRising } from '@apis/ranking';
-import { numberCompactFormatter } from '@utils/utils';
+import { getCompactNumber } from '@utils/utils';
 
 interface RisingRankingProps {
   searchUser: (username: string) => void;
@@ -46,7 +46,7 @@ function RisingRanking({ searchUser }: RisingRankingProps) {
                 {scoreDifference > 0 ? (
                   <Change>
                     <Image src='/icons/arrow-up.svg' width={16} height={16} alt='down' />
-                    <span>{numberCompactFormatter(scoreDifference)}</span>
+                    <span>{getCompactNumber(scoreDifference)}</span>
                   </Change>
                 ) : (
                   <NotChange src='/icons/arrow-bar.svg' width={10} height={10} alt='not change' />

frontend/src/utils/constants.ts

@@ -86,23 +86,6 @@ export const DEVELOPER_INFORMATION = [
   },
 ];
 
-export const MONTH_LABEL_MAPPING: {
-  [key: string]: string;
-} = {
-  1: 'Jan',
-  2: 'Feb',
-  3: 'Mar',
-  4: 'Apr',
-  5: 'May',
-  6: 'Jun',
-  7: 'Jul',
-  8: 'Aug',
-  9: 'Sep',
-  10: 'Oct',
-  11: 'Nov',
-  12: 'Dec',
-};
-
 export const CUBE_COLOR_MAP: {
   [key in RANK]: string;
 } = {

frontend/src/utils/utils.ts

@@ -9,8 +9,12 @@ export const languageToURL = (language: string): string => {
   return `${LANGUAGE_ICON_URL}/file_type_${LANGUAGE_MAP[language] || language}.svg`;
 };
 
-export const numberCompactFormatter = (num: number): string => {
-  return new Intl.NumberFormat('en-US', { notation: 'compact' }).format(num);
+export const getCompactNumber = (num: number): string => {
+  return Intl.NumberFormat('en', { notation: 'compact' }).format(num);
+};
+
+export const getMonthLabel = (date: Date) => {
+  return Intl.DateTimeFormat('en', { month: 'short' }).format(date);
 };
 
 export const getDate = (dateString: string) => {