Skip to content

Commit 25e787f

Browse files
goodsmellgoodsmell
authored
fix: 랜딩페이지 반응형 수정 (#254)
* fix: 768 사이즈 완벽 맞춤 * fix: 468사이즈 정상
1 parent caeb0f7 commit 25e787f

File tree

8 files changed

+81
-38
lines changed

8 files changed

+81
-38
lines changed

‎src/components/landing/CardsContent.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -91,14 +91,17 @@ const CardsContent: React.FC<CardsContentProps> = ({
9191

9292
return isOpened ? (
9393
<div
94-
className="cards-wrap d-flex"
94+
className=" cards-wrap d-flex"
9595
onMouseEnter={onMouseEnter}
9696
onMouseLeave={onMouseLeave}
9797
>
98-
<div id="opened" className="cards-content f-dir-column j-content-between">
98+
<div
99+
id="opened"
100+
className=" cards-content f-dir-column j-content-between"
101+
>
99102
{/* 배경 이미지용 div */}
100103
<div
101-
className={`background-image ${showPhoto ? "visible" : ""}`}
104+
className={`background-image ${showPhoto ? "visible" : ""}`}
102105
style={{
103106
backgroundImage: `url(${organizationsExport[pageNum]?.photo?.src})`,
104107
...organizationsExport[pageNum]?.photo?.style,
@@ -114,7 +117,7 @@ const CardsContent: React.FC<CardsContentProps> = ({
114117
{organizationsExport[pageNum]?.keywords?.map((keyword, index) => (
115118
<Fragment key={index}>
116119
<div
117-
className={`label c-white ${
120+
className={`label c-white ${
118121
!widthConditions.isMobile
119122
? "p-medium-regular"
120123
: "p-xs-medium"

‎src/components/landing/Page3.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,4 +64,4 @@
6464
@include r.media-tablet {
6565
scroll-snap-align: start;
6666
}
67-
}
67+
}

‎src/components/landing/Page3.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,4 +84,4 @@ const Page3 = () => {
8484
);
8585
};
8686

87-
export default Page3;
87+
export default Page3;

‎src/components/landing/Page3Cards.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515

1616
width: 100%;
1717
height: 712px;
18+
19+
margin-top: 45px;
1820
}
1921
@include r.media-mobile {
2022
margin-top: 0;

‎src/components/landing/Page3Cards.tsx‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,30 +72,40 @@ const Page3Cards: React.FC<Page3CardsProps> = ({
7272
const cards = [];
7373
for (let i = pageStartNum; i < pageStartNum + slidesPerPage; ++i) {
7474
cards.push(
75-
<CardsContent key={i} pageNum={i} isOpened={isOpened[i]} setIsOpened={setIsOpened} />
75+
<CardsContent
76+
key={i}
77+
pageNum={i}
78+
isOpened={isOpened[i]}
79+
setIsOpened={setIsOpened}
80+
/>
7681
);
7782
}
7883
return cards;
7984
};
8085

8186
return (
8287
<div className="cards j-content-center">
83-
<div className="cards-arrow-wrap a-items-center">
88+
<div className=" cards-arrow-wrap a-items-center">
8489
{!setLeftArrowDisappear && (
8590
<img
8691
id="left"
87-
className="cards-arrow c-pointer"
92+
className=" cards-arrow c-pointer"
8893
src={rightArrow}
8994
alt="<"
9095
onClick={onPrevSlide}
9196
/>
9297
)}
9398
</div>
9499

95-
<div className="cards-content-wrap">{renderCardsContents()}</div>
100+
<div className=" cards-content-wrap">{renderCardsContents()}</div>
96101
<div className="cards-arrow-wrap a-items-center">
97102
{!setRightArrowDisappear && (
98-
<img className="cards-arrow c-pointer" src={rightArrow} alt=">" onClick={onNextSlide} />
103+
<img
104+
className="cards-arrow c-pointer"
105+
src={rightArrow}
106+
alt=">"
107+
onClick={onNextSlide}
108+
/>
99109
)}
100110
</div>
101111
</div>

‎src/pages/MainVer2.jsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -63,29 +63,29 @@ const MainVer2 = () => {
6363
<FloatingBtn />
6464

6565
<div>
66-
<div className=" page1 h-[1010px]">
67-
<section className="page1-width">
66+
<div className=" page1">
67+
<section className=" page1-width">
6868
<div
69-
className={`page1-title-img pt-[136px] ${
69+
className={`page1-title-img pt-[136px] ${
7070
isLaptop
7171
? " gap-[80px]"
7272
: isTablet
73-
? "gap-[60px]"
73+
? "gap-[60px] w-[768px]"
7474
: "gap-[42px]"
7575
} justify-between`}
7676
>
7777
<div
78-
className={` ${
78+
className={` ${
7979
isLaptop ? "" : ""
8080
} h-fit title-wrap f-dir-column p-relative`}
8181
>
82-
<h1 className="title">
82+
<h1 className=" title">
8383
대본과 {isLaptop && <br />}공연권 거래
8484
<br />
8585
포도상점에서
8686
</h1>
8787

88-
<h5 className="sub-title whitespace-nowrap">
88+
<h5 className=" sub-title whitespace-nowrap">
8989
편리하게 대본과 공연권을 거래해요.
9090
<br />
9191
여러분들이 원하던 스토리 IP 플랫폼,
@@ -96,26 +96,26 @@ const MainVer2 = () => {
9696
{!isTablet && !isMobile ? (
9797
<img src={circleIcon} alt="circle" className=" circle-icon" />
9898
) : (
99-
<div className="flex justify-end">
99+
<div className="flex justify-end w-full ">
100100
<img
101101
src={circleIcon}
102102
alt="circle"
103-
className="circle-icon w-[438px]"
103+
className=" circle-icon w-[438px]"
104104
/>
105105
</div>
106106
)}
107107
</div>
108+
<div className="flex justify-center w-full h-content mt-[50px] p">
109+
<img src={arrow} alt="First" className=" arrow" />
110+
</div>
108111
</section>
109-
<div className="flex justify-center w-full h-content mt-[50px]">
110-
<img src={arrow} alt="First" className=" arrow" />
111-
</div>
112112
</div>
113113

114-
<div className={`page2 ${window.innerWidth >= 1600 && "page-size"}`}>
115-
<h1 className="page2-title title_64px">
114+
<div className={`page2 `}>
115+
<h1 className=" page2-title title_64px">
116116
포도상점에서는 이런 것들이 가능해요
117117
</h1>
118-
<div className="page2-content-wrap j-content-center">
118+
<div className=" page2-content-wrap j-content-center">
119119
<div className="page2-content" onClick={() => navigate("/post")}>
120120
<img
121121
src={!isTablet ? null : title}
@@ -199,12 +199,12 @@ const MainVer2 = () => {
199199

200200
<Page3 />
201201

202-
<div className="page4 page-size">
203-
<div>
204-
<h1 className="title_64px">포도상점을 더 알고 싶다면?</h1>
202+
<div className=" page4 page-size">
203+
<div className=" page4-size">
204+
<h1 className=" title_64px">포도상점을 더 알고 싶다면?</h1>
205205
<h3 className="title_20px">포도상점만의 이야기를 들려드릴게요.</h3>
206206
</div>
207-
<div className="page4-button-wrap j-content-center">
207+
<div className=" page4-button-wrap j-content-center page4-size">
208208
<Page4Button
209209
src={instagram}
210210
alt="instagram"

‎src/pages/MainVer2.scss‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
.main-ver2 .page1 {
44
background: linear-gradient(180deg, #f5f0ff 0%, #fff 100%);
5-
5+
height: 1010px;
66
@include r.media-tablet {
77
display: flex;
88
flex-direction: column;
@@ -17,13 +17,20 @@
1717
.main-ver2 .page1-width {
1818
height: 85vh;
1919

20+
@include r.media-laptop {
21+
width: 1280px;
22+
margin: 0 auto;
23+
}
2024
@include r.media-tablet {
2125
// width: calc(100% - 80px);
22-
width: 100%;
26+
width: 768px;
27+
margin: 0 auto;
28+
2329
height: auto;
2430
}
2531
@include r.media-mobile {
26-
width: 100%;
32+
width: 480px;
33+
margin: 0 auto;
2734
}
2835
}
2936

@@ -207,6 +214,7 @@
207214
}
208215
@include r.media-tablet {
209216
height: calc(534px + 60px);
217+
width: fit;
210218
}
211219
@include r.media-mobile {
212220
height: calc(351px + 36px);
@@ -217,6 +225,16 @@
217225
}
218226
}
219227

228+
.page4-size {
229+
@include r.media-tablet {
230+
width: 768px;
231+
margin: auto;
232+
}
233+
@include r.media-mobile {
234+
width: 468px;
235+
margin: auto;
236+
}
237+
}
220238
.main-ver2 .page4 .title_64px {
221239
padding-top: 7.5vh; /* 81px */
222240
@include r.media-tablet {

‎src/pages/MainVer2Page2.scss‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
@use "./../styles/_responsive.scss" as r;
22

3+
.page2 {
4+
@include r.media-tablet {
5+
margin: 270px auto 105px;
6+
height: 1148px;
7+
width: 768px;
8+
}
9+
@include r.media-mobile {
10+
margin: 10px auto 72px;
11+
height: 1148px;
12+
width: 468px;
13+
}
14+
}
315
.main-ver2 .page2 .page2-title {
416
margin: 8.981vh 0; /* 97px */
5-
@media (max-width: 1920px) {
6-
margin: 8.981vh 0;
7-
}
8-
@media (max-width: 1600px) {
9-
margin: 4.5vh 0;
17+
18+
@include r.media-tablet {
19+
margin: 0 0 78px 0;
1020
}
1121
}
1222

0 commit comments

Comments
 (0)