Skip to content

style: Report와 Share 합치기 #254

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
henization wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

style: Report와 Share 합치기 #254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fed6be2
style: Report와 Share 합치기
henization Apr 4, 2022
f2ac98d
fix: Report와 Share 합체 완료
henization Apr 4, 2022
2e1882a
fix: 메인페이지 편집
henization Apr 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 63 additions & 21 deletions components/main/MainReport/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ import {
getLectureRequestNumber,
getLectureTotalNumber,
} from "apis/count.api";
import Modal from "components/common/Modal";
import ReportSection from "components/main/MainReport/ReportSection";
import Image from "next/image";
import {
FindIcon,
FindIcon_mobile,
Expand All @@ -14,11 +16,19 @@ import {
TotalIcon,
TotalIcon_mobile,
} from "public/assets/icons";
import { GrowtoLogo } from "public/assets/images";
import React, { useEffect, useState } from "react";
import Screen from "styles/Screen";

import { LineWrapper, StyledRoot, Wrapper } from "./style";

import {
ButtonWrapper,
LineWrapper,
ReportBox,
ShareBox,
ShareButton,
StyledRoot,
Wrapper,
} from "./style";
export default function MainReport() {
const [totalNumber, setTotalNumber] = useState(0);
const [findNumber, setFindNumber] = useState(0);
Expand Down Expand Up @@ -60,28 +70,60 @@ export default function MainReport() {
unit: "건",
};

const [isModalOpen, setIsModalOpen] = useState(false);

const shareUrl = async () => {
try {
await navigator.clipboard.writeText(
"https://www.growto.kr/?utm_source=Growto&utm_medium=share&utm_campaign=share",
);
setIsModalOpen(true);
document.body.style.overflow = "hidden";
} catch {
alert("복사 실패!");
}
};

return (
<StyledRoot>
<Wrapper>
<ReportSection reportInfo={TotalCompare} />
<LineWrapper>
<Screen desktop>
<ReportLine />
</Screen>
<Screen mobile>
<ReportLine_mobile />
</Screen>
</LineWrapper>
<ReportSection reportInfo={CustomSearch} />
<LineWrapper>
<Screen desktop>
<ReportLine />
</Screen>
<Screen mobile>
<ReportLine_mobile />
</Screen>
</LineWrapper>
<ReportSection reportInfo={RequestCompare} />
<ReportBox>
<ReportSection reportInfo={TotalCompare} />
<LineWrapper>
<Screen desktop>
<ReportLine />
</Screen>
<Screen mobile>
<ReportLine_mobile />
</Screen>
</LineWrapper>
<ReportSection reportInfo={CustomSearch} />
<LineWrapper>
<Screen desktop>
<ReportLine />
</Screen>
<Screen mobile>
<ReportLine_mobile />
</Screen>
</LineWrapper>
<ReportSection reportInfo={RequestCompare} />
</ReportBox>
<ShareBox>
<ButtonWrapper>
<div>
<Image src={GrowtoLogo} alt="그로투" />
<p>가 필요한 친구에게</p>
</div>

<ShareButton onClick={shareUrl}>공유하기</ShareButton>
</ButtonWrapper>
</ShareBox>
<Modal
isModalOpen={isModalOpen}
setIsModalOpen={setIsModalOpen}
mainText="공유 링크가 복사 되었어요 ☺️"
subText="모두가 편하게 강의를 찾을 수 있도록 주변에 알려주세요."
/>
</Wrapper>
</StyledRoot>
);
Expand Down
64 changes: 62 additions & 2 deletions components/main/MainReport/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { applyMediaQuery } from "styles/mediaQuery";
export const StyledRoot = styled.section`
box-sizing: border-box;
width: 100vw;
height: 60.3rem;
height: 104.125rem;
max-width: 100%;
background-color: ${colors.skyBlue};
background-image: url("/assets/images/mainReportBackground.png");
Expand All @@ -17,7 +17,9 @@ export const StyledRoot = styled.section`
}
`;

export const Wrapper = styled.article`
export const Wrapper = styled.div``;
Copy link
Contributor

@small-j small-j Apr 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wrapper안에 style코드가 들어가지 않고 그냥 태그를 명시하는 용도로만 사용되었는데 이 부분은 styled component가 아니라 그냥 div로 명시하는건 어떨까요?!

Copy link
Contributor

@mogamogua mogamogua Apr 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

흠 그러게 나도 이런 경우엔 div태그를 그냥 사용하긴 하는데 코드스타일마다 다른 것 같기도하고, , 합의가필요하려나?!

Copy link
Contributor

@small-j small-j May 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아 그렇긴하네요 스타일로 더 명확한 의미로 표시한것 같기도 하고!


export const ReportBox = styled.article`
width: 96rem;
height: 40rem;
background: rgba(255, 255, 255, 0.36);
Expand All @@ -42,3 +44,61 @@ export const LineWrapper = styled.figure`
margin-top: 0;
}
`;

export const ShareBox = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 14.6337rem;
/* margin: 0 auto; */
width: 96rem;
${applyMediaQuery("mobile")} {
width: 32.8rem;
}
`;

export const ButtonWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;

div {
display: flex;
& > p {
color: ${colors.subBlack};
font-size: 3.6rem;
font-family: "Pretendard-ExtraBold";
padding-top: 3.5rem;
margin-left: 1.5rem;
margin-right: 3rem;
}
}

${applyMediaQuery("mobile")} {
flex-direction: column;
div > p {
font-size: 1.8rem;
font-family: "Pretendard-Bold";
margin: 2rem;
}
}
`;

export const ShareButton = styled.button`
width: 26rem;
height: 8.8rem;
background: ${colors.mainBlue};
border-radius: 5rem;
font-size: 2.4rem;
font-family: "Pretendard-SemiBold";
color: white;
:hover {
cursor: pointer;
}
${applyMediaQuery("mobile")} {
width: 12rem;
height: 4rem;
font-size: 1.4rem;
}
`;
4 changes: 2 additions & 2 deletions pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ const Home: NextPage = () => {
<Banner />
<MainLectureCategory />
<MainReport />
<MainReview />
<Share />
{/* <MainReview />
<Share /> */}
</div>
);
};
Expand Down
1 change: 1 addition & 0 deletions public/assets/images/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ export { default as CategoryClickImg } from "./categoryClickImg.png";
export { default as ComparisonImg } from "./comparisonImg.png";
export { default as ICDeveloper } from "./ic_developer.png";
export { default as MainBannerCompass } from "./mainBannerCompass.png";
export { default as GrowtoLogo } from "./mainGrowtoLogo.png";
export { default as MainLectureDataIcon } from "./mainLectureCategoryDataIcon.png";
export { default as MainLectureDesignIcon } from "./mainLectureCategoryDesignIcon.png";
export { default as MainLectureDevelopIcon } from "./mainLectureCategoryDevIcon.png";
Expand Down
Binary file added public/assets/images/mainGrowtoLogo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/assets/images/mainReportBackground.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.