Merge pull request #1766 from sopt-makers/feat/#1729

hotfix: 인스타그램 스토리 이미지 업로드 오류 해결
sopt-makers · Feb 9, 2025 · cf21a81 · cf21a81
2 parents fc5ea83 + 455e6b1
commit cf21a81
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 23 deletions.
diff --git a/src/components/mySoptReport/MiniReportCard/index.tsx b/src/components/mySoptReport/MiniReportCard/index.tsx
@@ -75,7 +75,11 @@ const index = ({ type, value }: MiniReportCardProps) => {
               </div>
             </>
           ) : (
-            <ReportValue $marginTop={60} $color={cardConfig.strongColor!}>
+            <ReportValue
+              $marginTop={60}
+              $color={cardConfig.strongColor!}
+              $fontSize={cardConfig?.miniValue && cardConfig?.miniValue?.length >= 6 ? '50px' : '60px'}
+            >
               {cardConfig.miniValue}
             </ReportValue>
           )}

diff --git a/src/components/mySoptReport/ReportCard/CardHeader/index.tsx b/src/components/mySoptReport/ReportCard/CardHeader/index.tsx
@@ -1,12 +1,13 @@
-import { getCardConfig } from '@/components/mySoptReport/constants';
-import useImageDownload from '@/components/resolution/read/hooks/useImageDownload';
-import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
 import { fonts } from '@sopt-makers/fonts';
 import { useToast } from '@sopt-makers/ui';
 import { StaticImageData } from 'next/image';
 
+import { getCardConfig } from '@/components/mySoptReport/constants';
+import useImageDownload from '@/components/resolution/read/hooks/useImageDownload';
+import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
+
 interface CardHeaderProps {
   title?: string;
   image?: StaticImageData;
@@ -31,12 +32,35 @@ const CardHeader = ({ title = 'SOPT Playground', image, type, value }: CardHeade
         reader.onloadend = () => {
           const base64data = reader.result as string;
 
-          const link = document.createElement('a');
-          link.href = base64data;
-          link.download = '마이 플그 활동 유형.png';
-          document.body.appendChild(link);
-          link.click();
-          document.body.removeChild(link);
+          const img = new Image();
+          img.src = base64data;
+          img.onload = () => {
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+
+            if (!ctx) return;
+
+            // 캔버스 크기 설정 (원본 이미지 크기와 동일)
+            canvas.width = img.width;
+            canvas.height = img.height;
+
+            // 흰색 배경을 먼저 그림
+            ctx.fillStyle = 'white';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            // 원본 이미지를 캔버스에 그림
+            ctx.drawImage(img, 0, 0);
+
+            // 캔버스를 Base64로 변환
+            const whiteBgBase64 = canvas.toDataURL('image/png');
+
+            const link = document.createElement('a');
+            link.href = whiteBgBase64;
+            link.download = '마이 플그 활동 유형.png';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+          };
         };
       } catch (error) {
         console.error('이미지 다운로드 오류:', error);
@@ -45,7 +69,9 @@ const CardHeader = ({ title = 'SOPT Playground', image, type, value }: CardHeade
       // 이미지가 없는 경우 HTML -> PNG 변환 후 다운로드
       const element = document.getElementById(`downloadableContent-${cardConfig?.strongColor}`);
       if (element) {
+        element.style.borderRadius = '0';
         onDownloadButtonClick();
+        element.style.borderRadius = '12px';
       }
     }
 
@@ -178,7 +204,7 @@ const HiddenContent = styled.div<{ $bgColor?: string }>`
   background-color: ${({ $bgColor }) => $bgColor || colors.gray100};
   padding: 28.8px;
   width: 294px;
-  height: 403.2px;
+  height: 404px;
 
   @media ${MOBILE_MEDIA_QUERY} {
     border-radius: 10px;

diff --git a/src/components/mySoptReport/ReportCard/MyDataCard/index.tsx b/src/components/mySoptReport/ReportCard/MyDataCard/index.tsx
@@ -2,9 +2,8 @@ import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
 import { fonts } from '@sopt-makers/fonts';
 
-import CardHeader from '@/components/mySoptReport/ReportCard/CardHeader';
-
 import { getCardConfig, Value } from '@/components/mySoptReport/constants';
+import CardHeader from '@/components/mySoptReport/ReportCard/CardHeader';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 
 interface MyTypeCardProps {

diff --git a/src/components/mySoptReport/constants.ts b/src/components/mySoptReport/constants.ts
@@ -1,7 +1,10 @@
 import { colors } from '@sopt-makers/colors';
-
 import { StaticImageData } from 'next/image';
 
+import gameOff from '@/public/icons/img/mySoptReport/game_off.png';
+import gameOn from '@/public/icons/img/mySoptReport/game_on.png';
+import heartOff from '@/public/icons/img/mySoptReport/heart_off.png';
+import heartOn from '@/public/icons/img/mySoptReport/heart_on.png';
 import personOff from '@/public/icons/img/mySoptReport/person_off.png';
 import personOn from '@/public/icons/img/mySoptReport/person_on.png';
 import searchOff from '@/public/icons/img/mySoptReport/search_off.png';
@@ -11,11 +14,6 @@ import studyOn from '@/public/icons/img/mySoptReport/study_on.png';
 import timeOff from '@/public/icons/img/mySoptReport/time_off.png';
 import timeOn from '@/public/icons/img/mySoptReport/time_on.png';
 
-import gameOff from '@/public/icons/img/mySoptReport/game_off.png';
-import gameOn from '@/public/icons/img/mySoptReport/game_on.png';
-import heartOff from '@/public/icons/img/mySoptReport/heart_off.png';
-import heartOn from '@/public/icons/img/mySoptReport/heart_on.png';
-
 export const menuList: {
   title: string;
   mainColor: keyof typeof colors;
@@ -69,10 +67,10 @@ export const getCardConfig = (type: string, value: Value): CardConfig => {
   const cardConfigs: { [key: string]: CardConfig } = {
     totalVisitCount: {
       index: 1,
-      title: `작년 한 해 동안\n<span class=highlight>${value}회</span> 방문했어요`,
+      title: `작년 한 해 동안\n<span class=highlight>${value.toLocaleString()}회</span> 방문했어요`,
       miniTitle: '플그에\n방문했던 횟수는',
       description: '앞으로도 플그에\n자주 놀러와주세요!',
-      miniValue: `${value}번`,
+      miniValue: `${value.toLocaleString()}번`,
       bgColor: colors.yellow400,
       subImage: '/icons/img/mySoptReport/card_sub_visit.png',
       strongColor: '#6F5508',
@@ -89,10 +87,12 @@ export const getCardConfig = (type: string, value: Value): CardConfig => {
     },
     myProfileStats: {
       index: 3,
-      title: `멤버들의 프로필 카드를\n<span class=highlight>${(value as ProfileStats).viewCount}번</span> 클릭했어요`,
+      title: `멤버들의 프로필 카드를\n<span class=highlight>${
+        (value as ProfileStats).viewCount?.toLocaleString() ?? '0'
+      }번</span> 클릭했어요`,
       miniTitle: '멤버들의 프로필을\n조회한 횟수는',
       description: '어떤 멤버가\n가장 기억에 남으시나요?',
-      miniValue: `${(value as ProfileStats).viewCount}번`,
+      miniValue: `${(value as ProfileStats).viewCount?.toLocaleString() ?? '0'}번`,
       bgColor: '#5CDBFE',
       subImage: '/icons/img/mySoptReport/card_sub_click.png',
       strongColor: '#0E5A6F',