Merge pull request #276 from boostcampwm-2022/develop

v0.1.5 배포

backend/src/batch/batch.service.ts

@@ -1,12 +1,11 @@
 import { logger } from '@libs/utils';
-import { Injectable, Logger } from '@nestjs/common';
+import { Injectable } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { Cron } from '@nestjs/schedule';
 import { UserService } from '../user/user.service';
 
 @Injectable()
 export class BatchService {
-  private readonly logger = new Logger(BatchService.name);
   constructor(private readonly userService: UserService, private readonly configService: ConfigService) {}
 
   @Cron('0 0 0 * * *', { name: 'cronTask' })

backend/src/user/user.service.ts

@@ -127,7 +127,7 @@ export class UserService {
         if (!updatedUser.scoreHistory) updatedUser.scoreHistory = [];
         updatedUser.scoreHistory.push({
           date: new Date(),
-          score: user.score,
+          score: updatedUser.score,
         });
         if (updatedUser.scoreHistory.length > 1) {
           updatedUser.scoreDifference =

frontend/package.json

@@ -24,6 +24,7 @@
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.8",
     "@types/styled-components": "^5.1.26",
+    "@vercel/og": "^0.0.21",
     "axios": "^1.1.3",
     "eslint": "8.27.0",
     "eslint-config-next": "13.0.3",

frontend/public/locales/en/header.json

@@ -1,4 +1,4 @@
 {
-  "navigate-about": "About",
+  "navigate-about": "Intro",
   "navigate-ranking": "Leaderboard"
 }

frontend/public/locales/ko/header.json

@@ -1,4 +1,4 @@
 {
-  "navigate-about": "About",
+  "navigate-about": "소개",
   "navigate-ranking": "랭킹"
 }

frontend/public/locales/ko/profile.json

@@ -4,6 +4,6 @@
   "register-wakatime-button-label": "등록",
   "maximum-continuous-commit-history": "최대 연속 커밋 일수",
   "day": "일",
-  "total": "전체 등수",
+  "total": "전체",
   "rank": "등급"
 }

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

@@ -1,19 +1,17 @@
 import styled from 'styled-components';
-import { CommitLevelType, HistoryType, RANK } from '@type/common';
+import { HistoryType, RANK } from '@type/common';
+import { colors } from '@styles/theme';
 import { MONTH_LABEL_MAPPING } from '@utils/constants';
 import { getDate } from '@utils/utils';
 
 const COMMIT_LEFT_BOUNDARY = 5;
 
 const COMMIT_RIGHT_BOUNDARY = 48;
+
 interface CommitHistoryProps {
   history: HistoryType;
   tier: RANK;
 }
-interface StyledHistoryBlockProps {
-  level: CommitLevelType;
-  tier: RANK;
-}
 interface StyledTooltipProps {
   weeks: number;
 }
@@ -39,7 +37,10 @@ function CommitHistory({ history, tier }: CommitHistoryProps) {
             prevMonth = month;
           }
           return (
-            <CommitHistoryBlock key={idx} tier={tier} level={level}>
+            <CommitHistoryBlock
+              key={dateString}
+              style={{ backgroundColor: level === 0 ? colors.commit0 : colors[`${tier}${level}`] }}
+            >
               {date < 24 && day === 0 && isMonthLabelChange ? (
                 <MonthLabel>{MONTH_LABEL_MAPPING[month]}</MonthLabel>
               ) : null}
@@ -49,19 +50,20 @@ function CommitHistory({ history, tier }: CommitHistoryProps) {
             </CommitHistoryBlock>
           );
         })}
-        <DayLabel>
-          <div>Mon</div>
-          <div>Wed</div>
-          <div>Fri</div>
-        </DayLabel>
       </CommitHistoryGroup>
+      <DayLabel>
+        <li>Mon</li>
+        <li>Wed</li>
+        <li>Fri</li>
+      </DayLabel>
     </Container>
   );
 }
 
 export default CommitHistory;
 
 const Container = styled.div`
+  position: relative;
   ${({ theme }) => theme.common.flexCenterColumn};
   width: 100%;
   padding-top: 20px;
@@ -77,12 +79,10 @@ const CommitHistoryGroup = styled.ul`
   width: 100%;
 `;
 
-const CommitHistoryBlock = styled.li<StyledHistoryBlockProps>`
+const CommitHistoryBlock = styled.li`
   width: 16px;
   aspect-ratio: 1;
   position: relative;
-  background-color: ${({ theme, level, tier }) =>
-    level === 0 ? theme.colors.commit0 : `${theme.colors[`${tier}${level}`]}`};
   border-radius: 2px;
   &:hover .tooltip {
     display: block;
@@ -162,9 +162,10 @@ const MonthLabel = styled.div`
   pointer-events: none;
 `;
 
-const DayLabel = styled.div`
+const DayLabel = styled.ul`
   position: absolute;
-  left: -45px;
+  top: 0;
+  left: -20px;
   font-size: 16px;
   height: 100%;
   ${({ theme }) => theme.common.flexCenterColumn};

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

@@ -33,6 +33,7 @@ function EXPbar({ tier, exp, startExp, needExp }: EXPbarProps) {
 export default EXPbar;
 
 const Score = styled.div`
+  font-size: 20px;
   margin-top: 10px;
   margin-left: 10px;
 `;

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

@@ -5,7 +5,9 @@ import styled from 'styled-components';
 import ProfileRefreshButton from '../ProfileRefreshButton';
 import { OrganizationType, RANK } from '@type/common';
 import { ProfileLabel } from '@components/Profile';
-import { Avatar, CubeIcon, Paper } from '@components/common';
+import { Avatar, Paper } from '@components/common';
+import CubeLogo from '@components/common/CubeLogo';
+import { CUBE_COLOR_MAP } from '@utils/constants';
 import { getRankingUnit } from '@utils/utils';
 
 interface ProfileCardProps {
@@ -29,7 +31,7 @@ interface ProfileCardProps {
 }
 
 interface StyledColorProps {
-  tier: RANK;
+  color: string;
 }
 
 function ProfileCard({ profileData }: ProfileCardProps) {
@@ -110,16 +112,18 @@ function ProfileCard({ profileData }: ProfileCardProps) {
         )}
       </ProfileInfos>
       <ProfileRank>
-        <CubeIcon tier={tier} size={160} />
-        <p>
-          {t('profile:total')}&nbsp;{totalRank}
-          {getRankingUnit(locale, totalRank)}
-        </p>
-        <p>
-          <ColorPoint tier={tier}>{t(`tier:${tier}`)}</ColorPoint>
-          &nbsp;{tierRank}
-          {getRankingUnit(locale, tierRank)}
-        </p>
+        <CubeLogo tier={tier} size={'sm'} />
+        <div>
+          <p>
+            {t('profile:total')}&nbsp;{totalRank}
+            {getRankingUnit(locale, totalRank)}
+          </p>
+          <p>
+            <ColorPoint color={CUBE_COLOR_MAP[tier]}>{t(`tier:${tier}`)}</ColorPoint>
+            &nbsp;{tierRank}
+            {getRankingUnit(locale, tierRank)}
+          </p>
+        </div>
       </ProfileRank>
     </Paper>
   );
@@ -128,7 +132,7 @@ function ProfileCard({ profileData }: ProfileCardProps) {
 export default ProfileCard;
 
 const ColorPoint = styled.span<StyledColorProps>`
-  color: ${({ theme, tier }) => theme.colors[`${tier}2`]};
+  color: ${({ color }) => color};
 `;
 
 const ProfileInfos = styled.ul`
@@ -159,12 +163,14 @@ const ProfileInfos = styled.ul`
 `;
 
 const ProfileRank = styled.div`
-  ${({ theme }) => theme.common.flexCenterColumn};
   max-width: 300px;
   width: 100%;
-
-  p {
-    margin-top: 8px;
+  div {
+    margin-top: 20px;
+    ${({ theme }) => theme.common.flexCenterColumn};
+    p {
+      margin-top: 8px;
+    }
   }
 
   transform: translateZ(-50);

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

@@ -1,10 +1,11 @@
 import { useTranslation } from 'next-i18next';
+import Image from 'next/image';
 import { useQuery } from '@tanstack/react-query';
 import { RankingPaginationResponse } from '@type/response';
 import { RankingTable } from '@components/Ranking';
 import { Avatar, CubeIcon } from '@components/common';
 import { requestTopRankingByScore } from '@apis/ranking';
-import { MAIN_PAGE_RANK_COUNT } from '@utils/constants';
+import { MAIN_PAGE_RANK_COUNT, MEDAL_IMG } from '@utils/constants';
 
 interface OverallRankingProps {
   searchUser: (username: string) => void;
@@ -33,13 +34,13 @@ function OverallRanking({ searchUser }: OverallRankingProps) {
           <RankingTable.Element>{t('common:table-user')}</RankingTable.Element>
           <RankingTable.Element>{t('common:table-score')}</RankingTable.Element>
         </RankingTable.Head>
-        {rankingByScore?.users.map(({ id, tier, avatarUrl, username, score }, index) => (
+        {rankingByScore?.users.map(({ id, tier, avatarUrl, username, score }, idx) => (
           <RankingTable.Row key={id} onClick={() => searchUser(username)}>
             <RankingTable.Element>
               <CubeIcon tier={tier} />
             </RankingTable.Element>
             <RankingTable.Element>
-              <span>{index + 1}</span>
+              <span> {idx < 3 ? <Image src={MEDAL_IMG[idx]} width={20} height={30} alt='medal' /> : idx + 1}</span>
             </RankingTable.Element>
             <RankingTable.Element>
               <Avatar src={avatarUrl} name={username} />

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

@@ -30,13 +30,13 @@ function ViewsRanking({ searchUser }: ViewsRankingProps) {
           <RankingTable.Element>{t('common:table-user')}</RankingTable.Element>
           <RankingTable.Element>{t('common:table-views')}</RankingTable.Element>
         </RankingTable.Head>
-        {rankingByViews?.map(({ id, tier, username, avatarUrl, dailyViews }, index) => (
+        {rankingByViews?.map(({ id, tier, username, avatarUrl, dailyViews }, idx) => (
           <RankingTable.Row key={id} onClick={() => searchUser(username)}>
             <RankingTable.Element>
               <CubeIcon tier={tier} />
             </RankingTable.Element>
             <RankingTable.Element>
-              <span>{index + 1}</span>
+              <span>{idx + 1}</span>
             </RankingTable.Element>
             <RankingTable.Element>
               <Avatar src={avatarUrl} name={username} />