[Fix/BAR-253] 랜딩 페이지 svg 아이콘 미반영 푸터 위치 문제 해결 (#81)

* fix: svg 이미지 사이 흰색 선 제거

* fix: svg icon 반영

* fix: 최소 너비 반영 및 푸터 이슈 해결

src/components/Layout/components/Footer.tsx

@@ -8,8 +8,8 @@ import * as styles from '../style.css';
 const Footer = () => {
   return (
     <footer className={styles.footerWrapper}>
-      <div>
-        <div>
+      <div className={styles.footerContent}>
+        <div className={styles.footerLinks}>
           <Link href="mailto:[email protected]" className={styles.footerButton}>
             서비스메일
           </Link>
@@ -31,7 +31,7 @@ const Footer = () => {
           <span className={styles.instagramText}>인스타그램</span>
         </Link>
       </div>
-      <div>
+      <div className={styles.footerContent}>
         <div className={styles.baroIcon}>
           <Icon icon="logo32" width={32} height={36} />
         </div>

src/components/Layout/style.css.ts

@@ -14,6 +14,7 @@ export const header = style({
   padding: '0 24px',
   backgroundColor: COLORS['Grey/900'],
   zIndex: 100,
+  minWidth: '768px',
 });
 
 export const logo = style({
@@ -94,6 +95,15 @@ export const footerWrapper = style({
   backgroundColor: COLORS['Grey/700'],
   display: 'flex',
   justifyContent: 'space-between',
+  minWidth: '768px',
+});
+
+export const footerContent = style({
+  height: '80px',
+});
+
+export const footerLinks = style({
+  marginBottom: '8px',
 });
 
 const dot = style({
@@ -130,7 +140,6 @@ export const instagramLink = style([
   }),
   {
     color: COLORS['Grey/400'],
-    marginTop: '8px',
   },
 ]);
 
@@ -156,6 +165,7 @@ export const copyright = style([
   }),
   {
     color: COLORS['Grey/400'],
+    whiteSpace: 'nowrap',
   },
 ]);
 
@@ -178,6 +188,8 @@ export const backgroundColorMain = createVar();
 export const mainWrapper = style({
   backgroundColor: backgroundColorMain,
   paddingTop: '64px',
+  minWidth: '768px',
+  minHeight: 'calc(100vh - 160px)',
 });
 
 export const tab = style({

src/domain/landing/index.tsx

@@ -76,9 +76,7 @@ const Landing = () => {
       <SecondLanding className={styles.ladingImage} />
       <ThirdLanding className={styles.ladingImage} />
       <FourthLanding className={styles.ladingImage} />
-      <FifthLanding
-        className={clsx(styles.ladingImage, styles.lastLandingImage)}
-      />
+      <FifthLanding className={styles.ladingImage} />
       <Button className={styles.startButton} onClick={handleLoginButtonClick}>
         <div className={styles.buttonText}>바로 시작하기</div>
       </Button>

src/domain/landing/style.css.ts

@@ -54,10 +54,6 @@ export const ladingImage = style({
   display: 'block',
 });
 
-export const lastLandingImage = style({
-  marginBottom: '-2px',
-});
-
 export const firstImageWrapper = style({
   position: 'relative',
   height: '880px',