Merge pull request #115 from sgdevcamp2025/fe/fix/114-image-url

[FE] fix: background-image의 url을 import해서 모듈로 수정

Author: chysis

src/frontend/src/components/layout/PublicOnlyLayout/styles.ts

@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 
+import BackgroundImage from '@/assets/background.svg';
+
 export const LayoutContainer = styled.div`
   position: relative;
   width: 100%;
@@ -15,7 +17,7 @@ export const Background = styled.div`
   width: 100vw;
   height: 100vh;
 
-  background-image: url('/src/assets/background.svg');
+  background-image: url(${BackgroundImage});
   background-repeat: no-repeat;
   background-size: cover;
 `;

src/frontend/src/pages/LandingPage/styles.ts

@@ -1,5 +1,8 @@
 import styled from 'styled-components';
 
+import LandingBackgroundImage from '@/assets/landingBackground.png';
+import LandingPreview from '@/assets/landingPreview.webp';
+import LandingStars from '@/assets/landingStars.webp';
 import { BodyRegularText, DisplayText } from '@/styles/Typography';
 
 export const PageContainer = styled.div`
@@ -9,7 +12,7 @@ export const PageContainer = styled.div`
 
   width: 100%;
 
-  background-image: url('/src/assets/landingBackground.png');
+  background-image: url(${LandingBackgroundImage});
   background-repeat: no-repeat;
   background-position: 0 1%;
   background-size: cover;
@@ -25,7 +28,7 @@ export const DescriptionContainer = styled.div`
   padding: 0 4rem;
   padding-top: 10rem;
 
-  background-image: url('/src/assets/landingStars.webp');
+  background-image: url(${LandingStars});
   background-repeat: no-repeat;
   background-size: 90%;
 `;
@@ -56,7 +59,7 @@ export const PreviewImageWrapper = styled.div`
   max-width: 60rem;
   min-height: 50rem;
 
-  background-image: url('/src/assets/landingPreview.webp');
+  background-image: url(${LandingPreview});
   background-repeat: no-repeat;
   background-position: 50%;
   background-size: contain;

src/frontend/src/pages/LoginPage/styles.ts

@@ -1,6 +1,7 @@
 import { motion } from 'motion/react';
 import styled from 'styled-components';
 
+import QRCodeAssetImage from '@/assets/qrcode.svg';
 import {
   BodyMediumText,
   BodyRegularText,
@@ -146,7 +147,7 @@ export const QRCodeWrapper = styled.div`
 export const QRCodeImage = styled.div`
   width: 100%;
   height: 100%;
-  background-image: url('/src/assets/qrcode.svg');
+  background-image: url(${QRCodeAssetImage});
   background-size: cover;
 `;