fix: png format 기본 사용 & image config 수정 & 테스트 케이스 수정

Ocean-Portfolio · Nov 8, 2023 · 0a124d9 · 0a124d9
1 parent 6afb1ef
commit 0a124d9
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 13 deletions.
diff --git a/next.config.js b/next.config.js
@@ -3,6 +3,17 @@
 const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
 const withVanillaExtract = createVanillaExtractPlugin();
 
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**.brand-ing.me',
+      },
+    ],
+    // loader: 'custom',
+    // loaderFile: './utils/image/cloudFlareLoader.ts',
+  },
+};
 
 module.exports = withVanillaExtract(nextConfig);
diff --git a/src/components/storybook/IconBoard.tsx b/src/components/storybook/IconBoard.tsx
@@ -30,15 +30,17 @@ const IconBoard = () => {
 
 interface SocialProps {
   company: CompanyIconToken;
+  format?: 'png' | 'svg';
 }
 
-const Social = ({ company }: SocialProps) => {
+const Social = ({ company, format }: SocialProps) => {
   return (
     <>
       <Icon
         width={32}
         height={32}
         company={company}
+        format={format}
         color="BRAND"
         background="NONE"
         state="DEFAULT"
@@ -47,6 +49,7 @@ const Social = ({ company }: SocialProps) => {
         width={32}
         height={32}
         company={company}
+        format={format}
         color="BRAND"
         background="CIRCULAR"
         state="DEFAULT"
@@ -55,6 +58,7 @@ const Social = ({ company }: SocialProps) => {
         width={32}
         height={32}
         company={company}
+        format={format}
         color="BRAND"
         background="RECTANGLAR"
         state="DEFAULT"
@@ -64,6 +68,7 @@ const Social = ({ company }: SocialProps) => {
         width={32}
         height={32}
         company={company}
+        format={format}
         color="GRAY"
         background="NONE"
         state="DEFAULT"
@@ -72,6 +77,7 @@ const Social = ({ company }: SocialProps) => {
         width={32}
         height={32}
         company={company}
+        format={format}
         color="GRAY"
         background="CIRCULAR"
         state="DEFAULT"
@@ -80,6 +86,7 @@ const Social = ({ company }: SocialProps) => {
         width={32}
         height={32}
         company={company}
+        format={format}
         color="GRAY"
         background="RECTANGLAR"
         state="DEFAULT"
@@ -89,6 +96,7 @@ const Social = ({ company }: SocialProps) => {
         width={32}
         height={32}
         company={company}
+        format={format}
         color="GRAY"
         background="NONE"
         state="HOVER"
@@ -97,6 +105,7 @@ const Social = ({ company }: SocialProps) => {
         width={32}
         height={32}
         company={company}
+        format={format}
         color="GRAY"
         background="CIRCULAR"
         state="HOVER"
@@ -105,6 +114,7 @@ const Social = ({ company }: SocialProps) => {
         width={32}
         height={32}
         company={company}
+        format={format}
         color="GRAY"
         background="RECTANGLAR"
         state="HOVER"
@@ -114,6 +124,7 @@ const Social = ({ company }: SocialProps) => {
         width={32}
         height={32}
         company={company}
+        format={format}
         color="WHITE"
         background="NONE"
         state="DEFAULT"
@@ -122,6 +133,7 @@ const Social = ({ company }: SocialProps) => {
         width={32}
         height={32}
         company={company}
+        format={format}
         color="WHITE"
         background="CIRCULAR"
         state="DEFAULT"
@@ -130,6 +142,7 @@ const Social = ({ company }: SocialProps) => {
         width={32}
         height={32}
         company={company}
+        format={format}
         color="WHITE"
         background="RECTANGLAR"
         state="DEFAULT"
@@ -139,6 +152,7 @@ const Social = ({ company }: SocialProps) => {
         width={32}
         height={32}
         company={company}
+        format={format}
         color="WHITE"
         background="RECTANGLAR"
         state="HOVER"
@@ -147,6 +161,7 @@ const Social = ({ company }: SocialProps) => {
         width={32}
         height={32}
         company={company}
+        format={format}
         color="WHITE"
         background="RECTANGLAR"
         state="HOVER"
@@ -155,6 +170,7 @@ const Social = ({ company }: SocialProps) => {
         width={32}
         height={32}
         company={company}
+        format={format}
         color="WHITE"
         background="RECTANGLAR"
         state="HOVER"

diff --git a/src/composable/Icon/Icon.test.tsx b/src/composable/Icon/Icon.test.tsx
@@ -7,7 +7,7 @@ import {
   iconStateTokens,
 } from '@/mock/iconTokens.mock';
 import { randomIndex, randomBetweenNumber } from '@/utils/number/random';
-import iconResourceSrcFormat from '@/utils/string/iconResourceSrcFormat';
+import capitalizeFirstLetter from '@/utils/string/capitalizeFirstLetter';
 import Icon from './Icon';
 
 describe('Icon 컴포넌트', () => {
@@ -36,19 +36,24 @@ describe('Icon 컴포넌트', () => {
     expect(image).toHaveAttribute('height', testProps.size.toString());
     expect(image).toHaveAttribute('alt', testProps.company);
 
-    const resource = iconResourceSrcFormat({
-      company: testProps.company,
-      color: testProps.color,
-      background: testProps.background,
-      state: testProps.state,
-    });
+    expect(image).toHaveAttribute(
+      'src',
+      expect.stringContaining(`${capitalizeFirstLetter(testProps.company)}`),
+    );
+
+    expect(image).toHaveAttribute(
+      'src',
+      expect.stringContaining(`${capitalizeFirstLetter(testProps.color)}`),
+    );
 
-    const path = `${ASSET_ENDPOINT}/icons/${testProps.company.toLowerCase()}`;
-    const imageSrc = `${path}/${resource}`;
+    expect(image).toHaveAttribute(
+      'src',
+      expect.stringContaining(`${capitalizeFirstLetter(testProps.background)}`),
+    );
 
     expect(image).toHaveAttribute(
       'src',
-      expect.stringContaining(`${imageSrc}`),
+      expect.stringContaining(`${capitalizeFirstLetter(testProps.state)}`),
     );
   });
 });
diff --git a/src/composable/Icon/Icon.tsx b/src/composable/Icon/Icon.tsx
@@ -29,7 +29,7 @@ const Icon = ({
   return (
     <Image
       {...props}
-      src={`${path}/${resource}.${format || 'svg'}`}
+      src={`${path}/${resource}.${format || 'png'}`}
       alt={company}
     />
   );

diff --git a/src/utils/image/cloudFlareLoader.ts b/src/utils/image/cloudFlareLoader.ts
@@ -0,0 +1,15 @@
+import { ASSET_ENDPOINT } from '@/const/endpoint';
+
+// Docs: https://developers.cloudflare.com/images/url-format
+export default function cloudflareLoader({
+  src,
+  width,
+  quality,
+}: {
+  src: string;
+  width: number;
+  quality?: number;
+}) {
+  const params = [`width=${width}`, `quality=${quality || 75}`, 'format=auto'];
+  return `${ASSET_ENDPOINT}/cdn-cgi/image/${params.join(',')}/${src}`;
+}