chore: image 수정

T1F5 · Apr 6, 2024 · ba3f36f · ba3f36f
1 parent 97b10dd
commit ba3f36f
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 110 deletions.
diff --git a/src/components/CardFooter.tsx b/src/components/CardFooter.tsx
@@ -3,39 +3,28 @@ import styled from '@emotion/styled';
 import { colors } from '@theme';
 import getFontStyle from '@theme/font/getFontSize';
 import { getReactionCount } from '@utils/getReactionCount';
-
+import chuang from '../assets/images/chuang.png';
+import great from '../assets/images/great.png';
+import thankyou from '../assets/images/thankyou.png';
 interface CardFooterProps {
   reactions: ReactionObject[];
 }
 // TODO: API 연결
 const CardFooter = ({ reactions }: CardFooterProps) => {
-
   const { ADMIRE, GREAT, MOVING } = getReactionCount(reactions);
 
   return (
     <Wrapper>
       <ReactionButton>
-        <img
-          src="/src/assets/images/chuang.png"
-          width={'88px'}
-          alt="추앙해요~"
-        />
+        <img src={chuang} width={'88px'} alt="추앙해요~" />
         <ButtonText>추앙해요 {ADMIRE}</ButtonText>
       </ReactionButton>
       <ReactionButton>
-        <img
-          src="/src/assets/images/great.png"
-          width={'88px'}
-          alt="추앙해요~"
-        />
+        <img src={great} width={'88px'} alt="추앙해요~" />
         <ButtonText>대단해요 {GREAT}</ButtonText>
       </ReactionButton>
       <ReactionButton>
-        <img
-          src="/src/assets/images/thankyou.png"
-          width={'88px'}
-          alt="추앙해요~"
-        />
+        <img src={thankyou} width={'88px'} alt="추앙해요~" />
         <ButtonText>감동이에요 {MOVING}</ButtonText>
       </ReactionButton>
     </Wrapper>

diff --git a/src/pages/Auth.tsx b/src/pages/Auth.tsx
@@ -1,27 +1,25 @@
-import { useEffect, useState } from "react";
-import PreLogin from "./auth/PreLogin";
-import PostLogin from "./auth/PostLogin";
+import { useEffect, useState } from 'react';
+import PreLogin from './auth/PreLogin';
+import PostLogin from './auth/PostLogin';
 
-export type LandingFunnelStateProps = "pre-login" | "post-login";
+export type LandingFunnelStateProps = 'pre-login' | 'post-login';
 
 const Auth = () => {
+  const [landingFunnelState, setLandingFunnelState] =
+    useState<LandingFunnelStateProps>('pre-login');
 
-    const [landingFunnelState, setLandingFunnelState] = useState<LandingFunnelStateProps>("pre-login");
+  const userId = localStorage.getItem('userId');
 
-    const userId = localStorage.getItem('userId')
+  useEffect(() => {
+    if (!userId) return;
+    setLandingFunnelState('post-login');
+  }, [userId]);
 
-    useEffect(() => {
-        if (!userId) return;
-        setLandingFunnelState("post-login")
-    }, [userId]);
+  if (landingFunnelState === 'post-login') {
+    return <PostLogin />;
+  }
 
-    if (landingFunnelState === 'post-login') {
-        return <PostLogin />
-    }
-
-    return (
-        <PreLogin setLandingFunnelState={setLandingFunnelState} />
-    );
+  return <PreLogin setLandingFunnelState={setLandingFunnelState} />;
 };
 
-export default Auth;
+export default Auth;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,87 +1,90 @@
 import styled from '@emotion/styled';
-import { css } from '@emotion/react'
+import { css } from '@emotion/react';
 import getFontStyle from '@theme/font/getFontSize';
 import Header from '@components/Header';
 import HomeSwiper from '@components/HomeSwiper';
-import HumanSVG from "@assets/svg/human.svg?react";
-import AddIconSVG from "@assets/svg/ico_add.svg?react";
+import HumanSVG from '@assets/svg/human.svg?react';
+import AddIconSVG from '@assets/svg/ico_add.svg?react';
 import { colors } from '@theme';
 import { Link } from 'react-router-dom';
+import headerImage from '../assets/images/home_header.png';
 
 const Home = () => {
-    return (
-        <Wrapper>
-            <Header>
-                <img src="/src/assets/images/home_header.png" alt='home_header' width={"160px"} />
-            </Header>
-            <p
-                css={css`
-                margin-left: 16px;
-                margin-top: 20px;
-            white-space: pre-wrap;
-            ${getFontStyle('header1')}
-          `}
-            >
-                {`현재 3명의` + '\n' + '일지를 볼 수 있어요'}
-            </p>
+  return (
+    <Wrapper>
+      <Header>
+        <img src={headerImage} alt="home_header" width={'160px'} />
+      </Header>
+      <p
+        css={css`
+          margin-left: 16px;
+          margin-top: 20px;
+          white-space: pre-wrap;
+          ${getFontStyle('header1')}
+        `}
+      >
+        {`현재 3명의` + '\n' + '일지를 볼 수 있어요'}
+      </p>
 
-            <HomeSwiper />
+      <HomeSwiper />
 
-            <Footer css={css`
-                margin-left: 16px;
-                margin-right: 16px;
-            `}>
-                <Link to={'/my'}>
-                    <button>
-                        <HumanSVG />
-                        내 일지보기
-                    </button>
-                </Link>
-                <Link to={'/write'}>
-                    <button css={css`
-                    background-color: ${colors.primaryDark};
-                    border: none;
-                    color: white;
-                `}>
-                        <AddIconSVG />
-                        일지작성
-                    </button>
-                </Link>
-            </Footer>
-        </Wrapper>
-    );
+      <Footer
+        css={css`
+          margin-left: 16px;
+          margin-right: 16px;
+        `}
+      >
+        <Link to={'/my'}>
+          <button>
+            <HumanSVG />내 일지보기
+          </button>
+        </Link>
+        <Link to={'/write'}>
+          <button
+            css={css`
+              background-color: ${colors.primaryDark};
+              border: none;
+              color: white;
+            `}
+          >
+            <AddIconSVG />
+            일지작성
+          </button>
+        </Link>
+      </Footer>
+    </Wrapper>
+  );
 };
 
 export default Home;
 
-
 const Wrapper = styled.div`
-    padding-top: 20px;
-    width: 100%;
-    height: 100vh;
-`
+  padding-top: 20px;
+  width: 100%;
+  height: 100vh;
+`;
 
 const Footer = styled.footer`
-    width: calc(100% - 32px);
-    position: absolute;
-    bottom: 0;
-    max-width: 768px;
-    height: 100px;
+  width: calc(100% - 32px);
+  position: absolute;
+  bottom: 0;
+  max-width: 768px;
+  height: 100px;
+
+  display: flex;
+  justify-content: center;
+  gap: 8px;
 
+  button {
+    width: 171px;
+    height: 56px;
     display: flex;
     justify-content: center;
+    align-items: center;
     gap: 8px;
+  }
 
-    button {
-        width: 171px;
-        height: 56px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 8px;
-    }
-
-    a {
-        text-decoration: none;
-    }
-`
+  a {
+    text-decoration: none;
+  }
+`;
diff --git a/src/pages/auth/PostLogin.tsx b/src/pages/auth/PostLogin.tsx
@@ -2,6 +2,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';
+import kakao from '../../assets/images/kakao_landing_after.png';
 
 const PostLogin = () => {
   return (
@@ -27,11 +28,7 @@ const PostLogin = () => {
           }
         `}
       >
-        <img
-          src="/src/assets/images/kakao_landing_after.png"
-          alt="kakao login complete background"
-          width={'100%'}
-        />
+        <img src={kakao} alt="kakao login complete background" width={'100%'} />
       </section>
       <div
         css={css`

diff --git a/src/pages/auth/PreLogin.tsx b/src/pages/auth/PreLogin.tsx
@@ -4,6 +4,7 @@ import KakaoLoginButton, {
 import { css } from '@emotion/react';
 import { FC } from 'react';
 import background from '../../assets/images/background_landing.png';
+import kakao from '../../assets/images/kakao_landing.png';
 
 interface PreLoginTemplateProps extends KakaoLoginButtonProps {}
 
@@ -31,11 +32,7 @@ const PreLogin: FC<PreLoginTemplateProps> = ({ setLandingFunnelState }) => {
           }
         `}
       >
-        <img
-          src="/src/assets/images/kakao_landing.png"
-          alt="kakao login background"
-          width={'100%'}
-        />
+        <img src={kakao} alt="kakao login background" width={'100%'} />
       </section>
       <KakaoLoginButton setLandingFunnelState={setLandingFunnelState} />
     </div>