Skip to content
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

결과보기 페이지 완성 및 기타 스타일 수정 #10

Merged
merged 5 commits into from
Aug 31, 2024
Merged

결과보기 페이지 완성 및 기타 스타일 수정 #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d5e7ea9
feat: 결과 페이지 레이아웃 수정
ArpaAP Aug 31, 2024
624db0e
feat: 결과보기 페이지 완성
ArpaAP Aug 31, 2024
fc1ba01
fix: Button 컬러 스타일 수정
ArpaAP Aug 31, 2024
85d52ba
feat: RootLayout height 설정
ArpaAP Aug 31, 2024
12d1dee
fix: 문구 수정
ArpaAP Aug 31, 2024
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
6 changes: 3 additions & 3 deletions src/components/form/Button.style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ export const ButtonElement = styled.button<ButtonProps>`
width: ${(props) => props.width};
height: ${(props) => props.height};

border: 1px solid #37cdcd;
border: 1px solid var(--color-primary);
border-radius: 12px;

background-color: ${(props) => {
switch (props.variants) {
case "primary":
return "#37cdcd";
return "var(--color-primary)";
case "secondary":
return "#fff";
}
Expand All @@ -22,7 +22,7 @@ export const ButtonElement = styled.button<ButtonProps>`
case "primary":
return "#fff";
case "secondary":
return "#37cdcd";
return "var(--color-primary)";
}
}};
`;
1 change: 1 addition & 0 deletions src/components/layout/RootLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import styled from "@emotion/styled";

export const Layout = styled.main`
width: min(100%, 800px);
height: 100vh;

margin: 0px auto;
padding: 1.25rem;
Expand Down
54 changes: 54 additions & 0 deletions src/pages/ResultPage.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
import styled from "@emotion/styled";

export const ResultWrapper = styled.div`
display: flex;
flex-direction: column;
height: calc(100% - 60px);
`;

export const ResultContainer = styled.div`
flex-grow: 1;
`;

export const TitleContainer = styled.div`
display: flex;
flex-direction: column;
Expand All @@ -12,3 +22,47 @@ export const Line = styled.hr`
height: 1px;
border: 1px solid #e0e0e0;
`;

export const ClubItems = styled.div`
display: flex;
flex-direction: column;
margin: 1.5rem 0;
gap: 1rem;
`;

export const ClubItem = styled.div`
position: relative;
border-radius: 1rem;
background-color: white;
padding: 0.75rem 0 0.75rem 3.2rem;
margin-left: 1.6rem;
`;

export const ClubImage = styled.img`
position: absolute;
top: 50%;
left: -32px;
transform: translateY(-50%);
width: 64px;
height: 64px;
border-radius: 50%;
`;

export const ClubTitle = styled.div`
font-size: 18px;
color: var(--color-primary);
font-weight: 900;
padding-bottom: 0.5rem;
`;

export const ClubDescription = styled.div`
display: flex;
flex-direction: column;
line-height: 1.35;
`;

export const ButtonGroup = styled.div`
display: flex;
gap: 0.5rem;
margin-top: 1.5rem;
`;
91 changes: 81 additions & 10 deletions src/pages/ResultPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,92 @@
import { Button } from "@/components/form/Button";
import TopBar from "@/components/layout/TopBar";
import { Text } from "@/components/typography";

import { Line, TitleContainer } from "./ResultPage.styled";
import aaa from "@/assets/images/dongari.png";

import {
ButtonGroup,
ClubDescription,
ClubImage,
ClubItem,
ClubItems,
ClubTitle,
Line,
ResultContainer,
ResultWrapper,
TitleContainer,
} from "./ResultPage.styled";

export default function ResultPage() {
return (
<>
<TopBar title="결과 보기" />
<TitleContainer>
<Text size="s" color="gray">
OOO님의 동BTI는...
</Text>
<Text size="xl" color="primary" weight="bold">
무대를 좋아하는 연주가형
</Text>
</TitleContainer>
<Line />
<ResultWrapper>
<ResultContainer>
<TitleContainer>
<Text size="s" color="gray">
OOO님의 동BTI는...
</Text>
<Text size="l" color="primary" weight="bold">
유니크한 체육을 즐기는 스포츠맨형
</Text>
</TitleContainer>
<Line />
<Text size="m" weight="bold">
OOO님을 위한 추천 동아리
</Text>
Comment on lines +27 to +37
Copy link
Member

Choose a reason for hiding this comment

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

시간나시면 useSearchParams 사용해서
/result?name=홍길동&type=AAA 이런식으로 받아서 결과를 표시할수 있도록 기능 구현해두면 좋을것 같아요~


<ClubItems>
<ClubItem>
<ClubTitle>수중탐사대</ClubTitle>
<ClubDescription>
<Text size="xs">더 넓고, 더 깊은 바다로!</Text>
<Text size="xs" weight="bold">
경북대학교 유일무이 스킨스쿠버 동아리
</Text>
</ClubDescription>
<ClubImage src={aaa} alt="수중탐사대" />
</ClubItem>
<ClubItem>
<ClubTitle>싸울아비</ClubTitle>
<ClubDescription>
<Text size="xs">조선시대 무기를 직접 휘두르는</Text>
<Text size="xs" weight="bold">
경북대학교 유일무이 병장기 동아리
</Text>
</ClubDescription>
<ClubImage src={aaa} alt="수중탐사대" />
</ClubItem>
<ClubItem>
<ClubTitle>인질범</ClubTitle>
<ClubDescription>
<Text size="xs">한 번 타면 영원히 질주해요. 앉을 시간이 없! 어! 요!</Text>
<Text size="xs" weight="bold">
인라인, 보드 동아리
</Text>
</ClubDescription>
<ClubImage src={aaa} alt="수중탐사대" />
</ClubItem>
</ClubItems>

<Text size="xs" weight="light">
<b>3,800명</b>의 참가자 중 <b>38명</b>이 이 유형이 나왔어요!
</Text>
</ResultContainer>

<ButtonGroup>
<Button width="100%" height="50px" variants="secondary">
<Text size="s" weight="extrabold">
다시 검사하기
</Text>
</Button>
<Button width="100%" height="50px" variants="primary">
<Text size="s" weight="extrabold">
공유하기
</Text>
</Button>
</ButtonGroup>
</ResultWrapper>
</>
);
}