Merge pull request #17 from Yangjaecheon-Otter-Guardians/develop

fix: download image rounded
Yangjaecheon-Otter-Guardians · Feb 18, 2024 · 6981046 · 6981046
2 parents 3a99f68 + f2aa6c6
commit 6981046
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 26 deletions.
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -7,7 +7,7 @@ permissions: write-all
 
 jobs:
   deploy:
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
     env:
       working-directory: ./frontend
     steps:
@@ -16,7 +16,7 @@ jobs:
       - name: Setup Node
         uses: actions/[email protected]
         with:
-          node-version: '12.x'
+          node-version: "12.x"
 
       - name: Cache dependencies
         uses: actions/cache@v2
@@ -25,7 +25,6 @@ jobs:
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
-
       - name: Install dependencies
         run: npm install
         working-directory: ${{ env.working-directory }}

diff --git a/frontend/src/atom/textAtom.ts b/frontend/src/atom/textAtom.ts
@@ -11,7 +11,6 @@ export type TextSizeType =
   | 'tablet:text-[34px] text-[21px]'
   | 'tablet:text-[26px] text-[16px]'
   | 'tablet:text-[22px] text-[14px]';
-
 export type TextType = {
   id: number;
   content: string;

diff --git a/frontend/src/components/ImageUploader.tsx b/frontend/src/components/ImageUploader.tsx
@@ -1,7 +1,6 @@
 import { Icon } from '@iconify/react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { isImageBright, previewImage } from '../atom';
-import heic2jpeg from 'heic2any';
 import heic2any from 'heic2any';
 
 const ImageUploader = () => {

diff --git a/frontend/src/components/text/TextLayoutGroup.tsx b/frontend/src/components/text/TextLayoutGroup.tsx
@@ -16,7 +16,7 @@ const TextLayoutGroup = () => {
 
   return (
     <div className={styles.layoutButtonGroup}>
-      {getLayoutGroupList(count).map((item, index) => {
+      {getLayoutGroupList(count).map((item) => {
         return (
           <button
             key={item}

diff --git a/frontend/src/sections/Preview.tsx b/frontend/src/sections/Preview.tsx
@@ -48,31 +48,32 @@ export default function Preview({ previewRef }: Props) {
         }}
       >
         <div className="w-full h-[200px] tablet:h-[320px] flex justify-center items-center" ref={preview}>
-          <div
-            ref={previewRef}
-            style={{
-              width: `${previewWidth}px`,
-              height: '100%',
-              backgroundColor: `${tab === '1' ? currentColor.color : '#F0F0F0'}`,
-              backgroundImage:
-                tab !== '1' ? `url(${imageSrc})` : colorTab === '2' ? `${currentGradation.color}` : 'none',
-              backgroundSize: 'cover',
-              backgroundRepeat: 'no-repeat',
-              backgroundPosition: 'center',
-              borderRadius: '5px',
-            }}
-          >
-            <TextPreview />
+          <div className="rounded-[5px] h-full overflow-hidden">
             <div
+              ref={previewRef}
               style={{
-                position: 'relative',
-                bottom: '100%',
-                zIndex: 97,
                 width: `${previewWidth}px`,
                 height: '100%',
-                background: `${isBright || tab === '1' ? 'transparent' : 'rgba(0, 0, 0, 0.3)'}`,
+                backgroundColor: `${tab === '1' ? currentColor.color : '#F0F0F0'}`,
+                backgroundImage:
+                  tab !== '1' ? `url(${imageSrc})` : colorTab === '2' ? `${currentGradation.color}` : 'none',
+                backgroundSize: 'cover',
+                backgroundRepeat: 'no-repeat',
+                backgroundPosition: 'center',
               }}
-            ></div>
+            >
+              <TextPreview />
+              <div
+                style={{
+                  position: 'relative',
+                  bottom: '100%',
+                  zIndex: 97,
+                  width: `${previewWidth}px`,
+                  height: '100%',
+                  background: `${isBright || tab === '1' ? 'transparent' : 'rgba(0, 0, 0, 0.3)'}`,
+                }}
+              ></div>
+            </div>
           </div>
         </div>
         <div