Skip to content

Commit ba3f36f

Browse files
kyoung-jnnkyoung-jnn
committed
chore: image 수정
1 parent 97b10dd commit ba3f36f

File tree

5 files changed

+94
-110
lines changed

5 files changed

+94
-110
lines changed

‎src/components/CardFooter.tsx

+6-17
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,28 @@ import styled from '@emotion/styled';
33
import { colors } from '@theme';
44
import getFontStyle from '@theme/font/getFontSize';
55
import { getReactionCount } from '@utils/getReactionCount';
6-
6+
import chuang from '../assets/images/chuang.png';
7+
import great from '../assets/images/great.png';
8+
import thankyou from '../assets/images/thankyou.png';
79
interface CardFooterProps {
810
reactions: ReactionObject[];
911
}
1012
// TODO: API 연결
1113
const CardFooter = ({ reactions }: CardFooterProps) => {
12-
1314
const { ADMIRE, GREAT, MOVING } = getReactionCount(reactions);
1415

1516
return (
1617
<Wrapper>
1718
<ReactionButton>
18-
<img
19-
src="/src/assets/images/chuang.png"
20-
width={'88px'}
21-
alt="추앙해요~"
22-
/>
19+
<img src={chuang} width={'88px'} alt="추앙해요~" />
2320
<ButtonText>추앙해요 {ADMIRE}</ButtonText>
2421
</ReactionButton>
2522
<ReactionButton>
26-
<img
27-
src="/src/assets/images/great.png"
28-
width={'88px'}
29-
alt="추앙해요~"
30-
/>
23+
<img src={great} width={'88px'} alt="추앙해요~" />
3124
<ButtonText>대단해요 {GREAT}</ButtonText>
3225
</ReactionButton>
3326
<ReactionButton>
34-
<img
35-
src="/src/assets/images/thankyou.png"
36-
width={'88px'}
37-
alt="추앙해요~"
38-
/>
27+
<img src={thankyou} width={'88px'} alt="추앙해요~" />
3928
<ButtonText>감동이에요 {MOVING}</ButtonText>
4029
</ReactionButton>
4130
</Wrapper>

‎src/pages/Auth.tsx

+16-18
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,25 @@
1-
import { useEffect, useState } from "react";
2-
import PreLogin from "./auth/PreLogin";
3-
import PostLogin from "./auth/PostLogin";
1+
import { useEffect, useState } from 'react';
2+
import PreLogin from './auth/PreLogin';
3+
import PostLogin from './auth/PostLogin';
44

5-
export type LandingFunnelStateProps = "pre-login" | "post-login";
5+
export type LandingFunnelStateProps = 'pre-login' | 'post-login';
66

77
const Auth = () => {
8+
const [landingFunnelState, setLandingFunnelState] =
9+
useState<LandingFunnelStateProps>('pre-login');
810

9-
const [landingFunnelState, setLandingFunnelState] = useState<LandingFunnelStateProps>("pre-login");
11+
const userId = localStorage.getItem('userId');
1012

11-
const userId = localStorage.getItem('userId')
13+
useEffect(() => {
14+
if (!userId) return;
15+
setLandingFunnelState('post-login');
16+
}, [userId]);
1217

13-
useEffect(() => {
14-
if (!userId) return;
15-
setLandingFunnelState("post-login")
16-
}, [userId]);
18+
if (landingFunnelState === 'post-login') {
19+
return <PostLogin />;
20+
}
1721

18-
if (landingFunnelState === 'post-login') {
19-
return <PostLogin />
20-
}
21-
22-
return (
23-
<PreLogin setLandingFunnelState={setLandingFunnelState} />
24-
);
22+
return <PreLogin setLandingFunnelState={setLandingFunnelState} />;
2523
};
2624

27-
export default Auth;
25+
export default Auth;

‎src/pages/Home.tsx

+68-65
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,90 @@
11
import styled from '@emotion/styled';
2-
import { css } from '@emotion/react'
2+
import { css } from '@emotion/react';
33
import getFontStyle from '@theme/font/getFontSize';
44
import Header from '@components/Header';
55
import HomeSwiper from '@components/HomeSwiper';
6-
import HumanSVG from "@assets/svg/human.svg?react";
7-
import AddIconSVG from "@assets/svg/ico_add.svg?react";
6+
import HumanSVG from '@assets/svg/human.svg?react';
7+
import AddIconSVG from '@assets/svg/ico_add.svg?react';
88
import { colors } from '@theme';
99
import { Link } from 'react-router-dom';
10+
import headerImage from '../assets/images/home_header.png';
1011

1112
const Home = () => {
12-
return (
13-
<Wrapper>
14-
<Header>
15-
<img src="/src/assets/images/home_header.png" alt='home_header' width={"160px"} />
16-
</Header>
17-
<p
18-
css={css`
19-
margin-left: 16px;
20-
margin-top: 20px;
21-
white-space: pre-wrap;
22-
${getFontStyle('header1')}
23-
`}
24-
>
25-
{`현재 3명의` + '\n' + '일지를 볼 수 있어요'}
26-
</p>
13+
return (
14+
<Wrapper>
15+
<Header>
16+
<img src={headerImage} alt="home_header" width={'160px'} />
17+
</Header>
18+
<p
19+
css={css`
20+
margin-left: 16px;
21+
margin-top: 20px;
22+
white-space: pre-wrap;
23+
${getFontStyle('header1')}
24+
`}
25+
>
26+
{`현재 3명의` + '\n' + '일지를 볼 수 있어요'}
27+
</p>
2728

28-
<HomeSwiper />
29+
<HomeSwiper />
2930

30-
<Footer css={css`
31-
margin-left: 16px;
32-
margin-right: 16px;
33-
`}>
34-
<Link to={'/my'}>
35-
<button>
36-
<HumanSVG />
37-
내 일지보기
38-
</button>
39-
</Link>
40-
<Link to={'/write'}>
41-
<button css={css`
42-
background-color: ${colors.primaryDark};
43-
border: none;
44-
color: white;
45-
`}>
46-
<AddIconSVG />
47-
일지작성
48-
</button>
49-
</Link>
50-
</Footer>
51-
</Wrapper>
52-
);
31+
<Footer
32+
css={css`
33+
margin-left: 16px;
34+
margin-right: 16px;
35+
`}
36+
>
37+
<Link to={'/my'}>
38+
<button>
39+
<HumanSVG />내 일지보기
40+
</button>
41+
</Link>
42+
<Link to={'/write'}>
43+
<button
44+
css={css`
45+
background-color: ${colors.primaryDark};
46+
border: none;
47+
color: white;
48+
`}
49+
>
50+
<AddIconSVG />
51+
일지작성
52+
</button>
53+
</Link>
54+
</Footer>
55+
</Wrapper>
56+
);
5357
};
5458

5559
export default Home;
5660

57-
5861
const Wrapper = styled.div`
59-
padding-top: 20px;
60-
width: 100%;
61-
height: 100vh;
62-
`
62+
padding-top: 20px;
63+
width: 100%;
64+
height: 100vh;
65+
`;
6366

6467
const Footer = styled.footer`
65-
width: calc(100% - 32px);
66-
position: absolute;
67-
bottom: 0;
68-
max-width: 768px;
69-
height: 100px;
68+
width: calc(100% - 32px);
69+
position: absolute;
70+
bottom: 0;
71+
max-width: 768px;
72+
height: 100px;
73+
74+
display: flex;
75+
justify-content: center;
76+
gap: 8px;
7077
78+
button {
79+
width: 171px;
80+
height: 56px;
7181
display: flex;
7282
justify-content: center;
83+
align-items: center;
7384
gap: 8px;
85+
}
7486
75-
button {
76-
width: 171px;
77-
height: 56px;
78-
display: flex;
79-
justify-content: center;
80-
align-items: center;
81-
gap: 8px;
82-
}
83-
84-
a {
85-
text-decoration: none;
86-
}
87-
`
87+
a {
88+
text-decoration: none;
89+
}
90+
`;

‎src/pages/auth/PostLogin.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Button from '@components/Button';
22
import { css } from '@emotion/react';
33
import { Link } from 'react-router-dom';
44
import background from '../../assets/images/background_landing.png';
5+
import kakao from '../../assets/images/kakao_landing_after.png';
56

67
const PostLogin = () => {
78
return (
@@ -27,11 +28,7 @@ const PostLogin = () => {
2728
}
2829
`}
2930
>
30-
<img
31-
src="/src/assets/images/kakao_landing_after.png"
32-
alt="kakao login complete background"
33-
width={'100%'}
34-
/>
31+
<img src={kakao} alt="kakao login complete background" width={'100%'} />
3532
</section>
3633
<div
3734
css={css`

‎src/pages/auth/PreLogin.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import KakaoLoginButton, {
44
import { css } from '@emotion/react';
55
import { FC } from 'react';
66
import background from '../../assets/images/background_landing.png';
7+
import kakao from '../../assets/images/kakao_landing.png';
78

89
interface PreLoginTemplateProps extends KakaoLoginButtonProps {}
910

@@ -31,11 +32,7 @@ const PreLogin: FC<PreLoginTemplateProps> = ({ setLandingFunnelState }) => {
3132
}
3233
`}
3334
>
34-
<img
35-
src="/src/assets/images/kakao_landing.png"
36-
alt="kakao login background"
37-
width={'100%'}
38-
/>
35+
<img src={kakao} alt="kakao login background" width={'100%'} />
3936
</section>
4037
<KakaoLoginButton setLandingFunnelState={setLandingFunnelState} />
4138
</div>

0 commit comments

Comments
 (0)