From 97b10dd7e5ed94d731ed44621359753504b54dba Mon Sep 17 00:00:00 2001
From: kyoung-jnn <55469709+kyoung-jnn@users.noreply.github.com>
Date: Sun, 7 Apr 2024 02:32:36 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20url=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Card.tsx                       | 17 ++++-
 src/pages/auth/PostLogin.tsx                  |  3 +-
 src/pages/auth/PreLogin.tsx                   | 63 +++++++++++--------
 .../pages/write/\354\223\260\352\270\260.tsx" |  7 ++-
 src/theme/GlobalStyles.tsx                    |  3 +-
 5 files changed, 60 insertions(+), 33 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 4c41419..6ae3b6b 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -16,6 +16,9 @@ import hashtagIcon, { HashTagType } from '@assets/svg';
 import useImageDownload from '@hooks/useImageDownload';
 import { deleteDaybookById } from '@api';
 
+import monunImage from '../assets/images/monun_background.png';
+import linenoteImage from '../assets/images/linenote_background.png';
+
 interface Props {
   daybook: GetDaybookResponse;
   isHome?: boolean;
@@ -30,7 +33,15 @@ const Card = ({
   isCurrent = true,
 }: Props) => {
   const { target, asyncDownload } = useImageDownload();
-  const { hearts, paperType, createdAt, content, hashtags, boardId, reactions } = daybook;
+  const {
+    hearts,
+    paperType,
+    createdAt,
+    content,
+    hashtags,
+    boardId,
+    reactions,
+  } = daybook;
   const hashtag = hashtags[0] as HashTagType;
   const Icon = hashtagIcon[hashtag];
 
@@ -80,8 +91,8 @@ const Card = ({
           opacity: ${!isCurrent ? 0.5 : 1};
 
           background-image: ${paperType === '모눈종이'
-            ? css`url('/src/assets/images/monun_background.png')`
-            : css`url('/src/assets/images/linenote_background.png')`};
+            ? css`url(${monunImage})`
+            : css`url(${linenoteImage})`};
         `}
       >
         <CardHeader>
diff --git a/src/pages/auth/PostLogin.tsx b/src/pages/auth/PostLogin.tsx
index d3dad87..181d5f2 100644
--- a/src/pages/auth/PostLogin.tsx
+++ b/src/pages/auth/PostLogin.tsx
@@ -1,6 +1,7 @@
 import Button from '@components/Button';
 import { css } from '@emotion/react';
 import { Link } from 'react-router-dom';
+import background from '../../assets/images/background_landing.png';
 
 const PostLogin = () => {
   return (
@@ -11,7 +12,7 @@ const PostLogin = () => {
         height: 100vh;
         position: relative;
 
-        background-image: url('/src/assets/images/background_landing.png');
+        background-image: url(${background});
         background-size: cover;
       `}
     >
diff --git a/src/pages/auth/PreLogin.tsx b/src/pages/auth/PreLogin.tsx
index 7c48587..3d118a5 100644
--- a/src/pages/auth/PreLogin.tsx
+++ b/src/pages/auth/PreLogin.tsx
@@ -1,34 +1,45 @@
-import KakaoLoginButton, { KakaoLoginButtonProps } from '@components/KakaoLoginButton';
+import KakaoLoginButton, {
+  KakaoLoginButtonProps,
+} from '@components/KakaoLoginButton';
 import { css } from '@emotion/react';
 import { FC } from 'react';
+import background from '../../assets/images/background_landing.png';
 
-interface PreLoginTemplateProps extends KakaoLoginButtonProps { }
+interface PreLoginTemplateProps extends KakaoLoginButtonProps {}
 
 const PreLogin: FC<PreLoginTemplateProps> = ({ setLandingFunnelState }) => {
-    return (
-        <div css={css`
-            padding-left: 16px;
-            padding-right: 16px;
-            height: 100vh;
-            position: relative;
+  return (
+    <div
+      css={css`
+        padding-left: 16px;
+        padding-right: 16px;
+        height: 100vh;
+        position: relative;
 
-            background-image: url('/src/assets/images/background_landing.png');
-            background-size: cover;
-        `}>
-            <section css={css`
-                padding-top: 20vh;
-                padding-left: 20%;
-                padding-right: 20%;
-                @media screen and (max-width: 480px) {
-                    padding-left: 10px;
-                    padding-right: 10px;
-                }
-            `}>
-                <img src="/src/assets/images/kakao_landing.png" alt="kakao login background" width={"100%"} />
-            </section>
-            <KakaoLoginButton setLandingFunnelState={setLandingFunnelState} />
-        </div>
-    );
+        background-image: url(${background});
+        background-size: cover;
+      `}
+    >
+      <section
+        css={css`
+          padding-top: 20vh;
+          padding-left: 20%;
+          padding-right: 20%;
+          @media screen and (max-width: 480px) {
+            padding-left: 10px;
+            padding-right: 10px;
+          }
+        `}
+      >
+        <img
+          src="/src/assets/images/kakao_landing.png"
+          alt="kakao login background"
+          width={'100%'}
+        />
+      </section>
+      <KakaoLoginButton setLandingFunnelState={setLandingFunnelState} />
+    </div>
+  );
 };
 
-export default PreLogin;
\ No newline at end of file
+export default PreLogin;
diff --git "a/src/pages/write/\354\223\260\352\270\260.tsx" "b/src/pages/write/\354\223\260\352\270\260.tsx"
index 88f5464..0d1917a 100644
--- "a/src/pages/write/\354\223\260\352\270\260.tsx"
+++ "b/src/pages/write/\354\223\260\352\270\260.tsx"
@@ -6,6 +6,9 @@ import { paperTypeState } from '@state/paperType';
 import { fadeLeftAnimation } from '@theme/animation';
 import { useAtom, useAtomValue } from 'jotai';
 
+import memo from '../../assets/images/memo.png';
+import monun from '../../assets/images/monun.png';
+
 function 쓰기() {
   const paperTypeAtom = useAtomValue(paperTypeState);
   const [daybook, setDaybook] = useAtom(daybookAtom);
@@ -18,10 +21,10 @@ function 쓰기() {
             ? css`
                 line-height: 30.24px;
                 padding-left: 40px;
-                background-image: url('/src/assets/images/memo.png');
+                background-image: url(${memo});
               `
             : css`
-                background-image: url('/src/assets/images/monun.png');
+                background-image: url(${monun});
               `};
         `}
         value={daybook?.content}
diff --git a/src/theme/GlobalStyles.tsx b/src/theme/GlobalStyles.tsx
index d4503dd..ee73753 100644
--- a/src/theme/GlobalStyles.tsx
+++ b/src/theme/GlobalStyles.tsx
@@ -2,6 +2,7 @@ import { Global } from '@emotion/react';
 import emotionNormalize from 'emotion-normalize';
 import { css } from '@emotion/react';
 import { colors } from './colors';
+import background from '../assets/images/background.png';
 
 function GlobalStyles() {
   const globalStyle = css`
@@ -14,7 +15,7 @@ function GlobalStyles() {
       font-family: 'Nanum Myeongjo', serif;
       font-weight: 700;
 
-      background-image: url('/src/assets/images/background.png');
+      background-image: url(${background});
       background-size: cover;
       overflow: hidden;
     }