Skip to content

Commit 1f24c01

Browse files
jokj624jokj624
committed
Merge branch 'release/v1.0.0'
2 parents 2f6fa37 + 7073118 commit 1f24c01

File tree

11 files changed

+131
-77
lines changed

11 files changed

+131
-77
lines changed

‎src/components/DetailCheck/DetailCheck.module.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@
6262
&__image {
6363
width: 55vw;
6464

65+
@include wideDesktop {
66+
width: 45vw;
67+
}
68+
6569
@include tablet {
6670
width: 70vw;
6771
}

‎src/components/DetailCheck/DetailCheck.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
11
import React from 'react';
22
import Image from 'next/image';
33

4-
import useWindowSize from '@/hooks/useWindowSize';
5-
import { RESPONSIVE_VARIABLE } from '@/constants/objects/responsive';
4+
import withWindowSize, { DeviceProps } from '@/hocs/withWindowSize';
65

76
import checkImageLgSrc from '../../../public/static/images/check.webp';
87
import checkImageSmSrc from '../../../public/static/images/check-md.webp';
98

109
import Styles from './DetailCheck.module.scss';
1110

12-
export default function DetailCheck(): JSX.Element {
13-
const { width } = useWindowSize();
11+
function DetailCheck(props: DeviceProps): JSX.Element {
12+
const { isPc } = props;
1413

15-
const checkImageSrc =
16-
width >= RESPONSIVE_VARIABLE['pc'] ? checkImageLgSrc : checkImageSmSrc;
14+
const checkImageSrc = isPc ? checkImageLgSrc : checkImageSmSrc;
1715

1816
const Title = (): JSX.Element => {
19-
if (width >= RESPONSIVE_VARIABLE['pc']) {
17+
if (isPc) {
2018
return (
2119
<div className={Styles.DetailCheck__title}>
2220
잊기 쉬운 콘텐츠, 모두 확인 할 수 있도록
@@ -49,3 +47,5 @@ export default function DetailCheck(): JSX.Element {
4947
</div>
5048
);
5149
}
50+
51+
export default withWindowSize(DetailCheck);

‎src/components/DetailContent/DetailContent.module.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,10 @@
6060
left: 5vw;
6161
z-index: 1;
6262

63+
@include wideDesktop {
64+
left: 15vw;
65+
}
66+
6367
@include tablet {
6468
left: 15vw;
6569
height: 40rem;
@@ -133,6 +137,10 @@
133137
z-index: 0;
134138
overflow-x: hidden;
135139

140+
@include wideDesktop {
141+
right: 35vw;
142+
}
143+
136144
@include tablet {
137145
margin-bottom: 5rem;
138146
right: 0;

‎src/components/DetailContent/DetailContent.tsx‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React from 'react';
2-
import Image from 'next/image';
2+
import Image, { StaticImageData } from 'next/image';
33

4-
import useWindowSize from '@/hooks/useWindowSize';
5-
import { RESPONSIVE_VARIABLE } from '@/constants/objects/responsive';
4+
import withWindowSize, { DeviceProps } from '@/hocs/withWindowSize';
65

76
import mockupLgSrc from '../../../public/static/images/mockup-content-list-pc.webp';
87
import mockupMdSrc from '../../../public/static/images/mockup-content-list-md.webp';
@@ -12,23 +11,19 @@ import blurBackImageSmSrc from '../../../public/static/images/blur-bg-image-sm.w
1211

1312
import Styles from './DetailContent.module.scss';
1413

15-
export default function DetailContent(): JSX.Element {
16-
const { width } = useWindowSize();
14+
function DetailContent(props: DeviceProps): JSX.Element {
15+
const { isPc, isTablet, isMobile } = props;
1716

18-
const mockupSrc =
19-
width >= RESPONSIVE_VARIABLE['pc']
20-
? mockupLgSrc
21-
: width < RESPONSIVE_VARIABLE['tablet']
22-
? mockupSmSrc
23-
: mockupMdSrc;
17+
const mockupSrc = (): StaticImageData => {
18+
if (isPc) return mockupLgSrc;
19+
else if (isTablet) return mockupMdSrc;
20+
else return mockupSmSrc;
21+
};
2422

25-
const blurBackImageSrc =
26-
width <= RESPONSIVE_VARIABLE['tablet']
27-
? blurBackImageSmSrc
28-
: blurBackImageLgSrc;
23+
const blurBackImageSrc = isMobile ? blurBackImageSmSrc : blurBackImageLgSrc;
2924

3025
const TitleText = (): JSX.Element => {
31-
return width >= RESPONSIVE_VARIABLE['pc'] ? (
26+
return isPc ? (
3227
<span>
3328
저장한 콘텐츠를 <br /> 한눈에
3429
</span>
@@ -38,7 +33,7 @@ export default function DetailContent(): JSX.Element {
3833
};
3934

4035
const DetailText = (): JSX.Element => {
41-
return width >= RESPONSIVE_VARIABLE['pc'] ? (
36+
return isPc ? (
4237
<>
4338
<div>복잡한 콘텐츠 홍수 속에서</div>
4439
<div>내가 저장하고 읽은 콘텐츠 현황을</div>
@@ -57,7 +52,7 @@ export default function DetailContent(): JSX.Element {
5752
<div className={Styles.DetailContent__mainWrapper}>
5853
<div className={Styles.DetailContent__mainWrapper__mainImage}>
5954
<Image
60-
src={mockupSrc}
55+
src={mockupSrc()}
6156
alt="havit mockup content list"
6257
style={{ width: 'auto', height: '100%' }}
6358
/>
@@ -78,9 +73,9 @@ export default function DetailContent(): JSX.Element {
7873
style={{ width: '105%', height: 'auto' }}
7974
/>
8075
</div>
81-
{width >= RESPONSIVE_VARIABLE['pc'] && (
82-
<div className={Styles.DetailContent__blur} />
83-
)}
76+
{isPc && <div className={Styles.DetailContent__blur} />}
8477
</div>
8578
);
8679
}
80+
81+
export default withWindowSize(DetailContent);

‎src/components/Main/Main.module.scss‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@
66
align-items: center;
77
padding: 2rem 2rem 0 2rem;
88
width: 100%;
9-
height: 71.25rem;
9+
height: 56.85em;
1010
color: var(--white);
1111
background: var(--main-background);
1212
font-family: 'Pretendard';
1313

1414
@include tablet {
15-
height: 46.5rem;
15+
height: 51rem;
1616
}
1717

1818
@include mobile {
19-
height: 37.5rem;
19+
height: 39rem;
2020
}
2121

2222
&__title {
@@ -88,13 +88,15 @@
8888
}
8989

9090
&__image {
91+
width: 45rem;
9192
padding-right: 5rem;
9293

9394
@include tablet {
94-
padding: 0;
95+
width: 40rem;
9596
}
9697

9798
@include mobile {
99+
width: 22rem;
98100
padding: 0;
99101
}
100102
}

‎src/components/Main/Main.tsx‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,37 @@
11
import React from 'react';
2-
import Image from 'next/image';
2+
import Image, { StaticImageData } from 'next/image';
33

4+
import withWindowSize, { DeviceProps } from '@/hocs/withWindowSize';
45
import { Button } from '@/components/Common/Button';
5-
import useWindowSize from '@/hooks/useWindowSize';
6-
import { RESPONSIVE_VARIABLE } from '@/constants/objects/responsive';
76

87
import textLogo from '../../../public/static/images/text-logo.webp';
98
import playstoreLogo from '../../../public/static/images/playstore.webp';
109
import appstoreLogo from '../../../public/static/images/appstore.webp';
11-
import mockupPCSrc from '../../../public/static/images/mockup-main-lg.webp';
12-
import mockupTabletSrc from '../../../public/static/images/mockup-main-md.webp';
13-
import mockupMobileSrc from '../../../public/static/images/mockup-main-sm.webp';
10+
import mockupLgSrc from '../../../public/static/images/mockup-main-lg.webp';
11+
import mockupMdSrc from '../../../public/static/images/mockup-main-md.webp';
12+
import mockupSmSrc from '../../../public/static/images/mockup-main-sm.webp';
1413

1514
import Styles from './Main.module.scss';
1615

17-
export default function Main(): JSX.Element {
18-
const { width } = useWindowSize();
16+
function Main(props: DeviceProps): JSX.Element {
17+
const { isPc, isTablet, isMobile } = props;
1918

20-
const mockupSrc =
21-
width >= RESPONSIVE_VARIABLE['pc']
22-
? mockupPCSrc
23-
: width < RESPONSIVE_VARIABLE['tablet']
24-
? mockupMobileSrc
25-
: mockupTabletSrc;
19+
const mockupSrc = (): StaticImageData => {
20+
if (isPc) return mockupLgSrc;
21+
else if (isTablet) return mockupMdSrc;
22+
else return mockupSmSrc;
23+
};
2624

2725
return (
2826
<div className={Styles.Main}>
29-
{width > RESPONSIVE_VARIABLE['tablet'] ? (
27+
{isMobile ? (
3028
<div className={Styles.Main__title}>
31-
기억하고 싶은 모든 콘텐츠를 내 손안에
29+
<div>기억하고 싶은</div>
30+
<div>모든 콘텐츠를 내 손안에</div>
3231
</div>
3332
) : (
3433
<div className={Styles.Main__title}>
35-
<div>기억하고 싶은</div>
36-
<div>모든 콘텐츠를 내 손안에</div>
34+
기억하고 싶은 모든 콘텐츠를 내 손안에
3735
</div>
3836
)}
3937
<Image
@@ -42,14 +40,7 @@ export default function Main(): JSX.Element {
4240
alt="havit text logo"
4341
priority
4442
/>
45-
{width > RESPONSIVE_VARIABLE['tablet'] ? (
46-
<div className={Styles.Main__introText}>
47-
그때 봤던 그 콘텐츠 어디있지?&nbsp;
48-
<span className={Styles['Main__introText--strong']}>
49-
콘텐츠 저장, 해빗에서 쉽고 간편하게
50-
</span>
51-
</div>
52-
) : (
43+
{isMobile ? (
5344
<>
5445
<div className={Styles.Main__introText}>
5546
그때 봤던 그 콘텐츠 어디있지?
@@ -58,6 +49,13 @@ export default function Main(): JSX.Element {
5849
콘텐츠 저장, 해빗에서 쉽고 간편하게
5950
</div>
6051
</>
52+
) : (
53+
<div className={Styles.Main__introText}>
54+
그때 봤던 그 콘텐츠 어디있지?&nbsp;
55+
<span className={Styles['Main__introText--strong']}>
56+
콘텐츠 저장, 해빗에서 쉽고 간편하게
57+
</span>
58+
</div>
6159
)}
6260
<div className={Styles.Main__store}>
6361
<Button type="google" text="Google Play" imageSrc={playstoreLogo} />
@@ -69,12 +67,14 @@ export default function Main(): JSX.Element {
6967
</div>
7068
<div className={Styles.Main__image}>
7169
<Image
72-
src={mockupSrc}
70+
src={mockupSrc()}
7371
alt="havit mockup main"
74-
style={{ width: 'auto', height: 'auto' }}
72+
style={{ width: '100%', height: 'auto' }}
7573
priority
7674
/>
7775
</div>
7876
</div>
7977
);
8078
}
79+
80+
export default withWindowSize(Main);

‎src/components/TimeToHavit/TimeToHavit.module.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,19 @@
1616

1717
&__image {
1818
margin-top: 5rem;
19+
margin-left: 5rem;
1920
width: 50vw;
2021

22+
@include wideDesktop {
23+
width: 45vw;
24+
}
25+
2126
@include tablet {
2227
width: 70vw;
2328
}
2429

2530
@include mobile {
31+
margin-left: 0;
2632
width: 90vw;
2733
}
2834
}

‎src/components/TimeToHavit/TimeToHavit.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,32 @@
11
import React from 'react';
2-
import Image from 'next/image';
2+
import Image, { StaticImageData } from 'next/image';
33

4+
import withWindowSize, { DeviceProps } from '@/hocs/withWindowSize';
45
import { Button } from '@/components/Common/Button';
5-
import useWindowSize from '@/hooks/useWindowSize';
6-
import { RESPONSIVE_VARIABLE } from '@/constants/objects/responsive';
76

8-
import mockupLargeSrc from '../../../public/static/images/mockup-phone-lg.webp';
9-
import mockupMideumSrc from '../../../public/static/images/mockup-phone-md.webp';
10-
import mockupSmallSrc from '../../../public/static/images/mockup-phone-sm.webp';
7+
import mockupLgSrc from '../../../public/static/images/mockup-phone-lg.webp';
8+
import mockupMdSrc from '../../../public/static/images/mockup-phone-md.webp';
9+
import mockupSmSrc from '../../../public/static/images/mockup-phone-sm.webp';
1110
import playstoreLogo from '../../../public/static/images/playstore.webp';
1211
import appstoreLogo from '../../../public/static/images/appstore.webp';
1312

1413
import Styles from './TimeToHavit.module.scss';
1514
import { Line } from '../Common/Line';
1615

17-
export default function TimeToHavit(): JSX.Element {
18-
const { width } = useWindowSize();
16+
function TimeToHavit(props: DeviceProps): JSX.Element {
17+
const { isPc, isTablet, isMobile } = props;
1918

20-
const mockupSrc =
21-
width >= RESPONSIVE_VARIABLE['pc']
22-
? mockupLargeSrc
23-
: width < RESPONSIVE_VARIABLE['tablet']
24-
? mockupSmallSrc
25-
: mockupMideumSrc;
19+
const mockupSrc = (): StaticImageData => {
20+
if (isPc) return mockupLgSrc;
21+
else if (isTablet) return mockupMdSrc;
22+
else return mockupSmSrc;
23+
};
2624

2725
return (
2826
<div className={Styles.TimeToHavit}>
2927
<div className={Styles.TimeToHavit__image}>
3028
<Image
31-
src={mockupSrc}
29+
src={mockupSrc()}
3230
alt="mockup phone"
3331
style={{ width: '100%', height: 'auto' }}
3432
/>
@@ -39,7 +37,7 @@ export default function TimeToHavit(): JSX.Element {
3937
</div>
4038
<div className={Styles.TimeToHavit__detail}>
4139
<div>지금 바로 콘텐츠를 아카이빙하세요</div>
42-
{width < RESPONSIVE_VARIABLE['tablet'] && (
40+
{isMobile && (
4341
<Line classname={Styles.TimeToHavit__line} direction="row" />
4442
)}
4543
</div>
@@ -54,3 +52,5 @@ export default function TimeToHavit(): JSX.Element {
5452
</div>
5553
);
5654
}
55+
56+
export default withWindowSize(TimeToHavit);

‎src/hocs/withWindowSize.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React, { ComponentType } from 'react';
2+
3+
import useWindowSize from '@/hooks/useWindowSize';
4+
import { RESPONSIVE_VARIABLE } from '@/constants/objects/responsive';
5+
6+
export interface DeviceProps {
7+
isPc: boolean;
8+
isTablet: boolean;
9+
isMobile: boolean;
10+
}
11+
12+
export default function withWindowSize(Component: ComponentType<DeviceProps>) {
13+
const WithWindowSizeComponent = () => {
14+
const { width } = useWindowSize();
15+
16+
const isPc = width >= RESPONSIVE_VARIABLE['pc'];
17+
const isTablet =
18+
width >= RESPONSIVE_VARIABLE['tablet'] &&
19+
width < RESPONSIVE_VARIABLE['pc'];
20+
const isMobile = width < RESPONSIVE_VARIABLE['tablet'];
21+
22+
const deviceProps: DeviceProps = {
23+
isPc,
24+
isTablet,
25+
isMobile,
26+
};
27+
28+
return <Component {...deviceProps} />;
29+
};
30+
31+
return WithWindowSizeComponent;
32+
}

0 commit comments

Comments
 (0)