Skip to content

Commit

Permalink
page (#7)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ksh5324
ksh5324 authored May 17, 2022
1 parent c85b634 commit c8f8a40
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 27 deletions.
53 changes: 43 additions & 10 deletions frontend/src/components/choose/Choose.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,49 @@ import { ChooseContainer } from "./chooseStyle";
const Choose: NextComponentType = () => {
return (
<ChooseContainer>
<Link href="class2">
<a>
<button>2-2</button>
</a>
</Link>
<Link href="class3">
<a>
<button>2-3</button>
</a>
</Link>
<svg
width="149"
height="32"
viewBox="0 0 149 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.2676 1.09375C23.5462 1.22396 25.418 2.10286 26.8828 3.73047C28.3477 5.32552 29.4056 7.14844 30.0566 9.19922C30.7077 11.25 31.0332 13.3496 31.0332 15.498C31.0332 17.6465 30.7077 19.7461 30.0566 21.7969C29.4382 23.8477 28.3802 25.6868 26.8828 27.3145C25.418 28.9095 23.5462 29.7721 21.2676 29.9023H3.29883C2.41992 29.8698 1.67122 29.5605 1.05273 28.9746C0.466797 28.3561 0.157552 27.6074 0.125 26.7285V14.6191C0.157552 13.7077 0.499349 12.959 1.15039 12.373C1.80143 11.7546 2.58268 11.4453 3.49414 11.4453C4.37305 11.4779 5.12174 11.8034 5.74023 12.4219C6.35872 13.0078 6.68424 13.7402 6.7168 14.6191V22.041C6.7168 22.9199 7.17253 23.3594 8.08398 23.3594H19.6074C20.8444 23.2943 21.8698 22.8223 22.6836 21.9434C23.4974 21.0645 24.0833 20.0716 24.4414 18.9648C24.832 17.8255 25.0273 16.6699 25.0273 15.498C25.0273 14.3262 24.832 13.1868 24.4414 12.0801C24.0833 10.9408 23.4974 9.93164 22.6836 9.05273C21.8698 8.17383 20.8444 7.70182 19.6074 7.63672H3.29883C1.3457 7.47396 0.28776 6.41602 0.125 4.46289C0.125 3.55143 0.417969 2.77018 1.00391 2.11914C1.6224 1.4681 2.38737 1.1263 3.29883 1.09375H21.2676ZM45.6328 1.09375H66.2383C67.1497 1.1263 67.8984 1.4681 68.4844 2.11914C69.1029 2.77018 69.4121 3.55143 69.4121 4.46289C69.2493 6.41602 68.1914 7.47396 66.2383 7.63672H47.293C46.056 7.70182 45.0306 8.17383 44.2168 9.05273C43.403 9.93164 42.8008 10.9408 42.4102 12.0801C42.0521 13.1868 41.873 14.3262 41.873 15.498C41.873 16.6699 42.0521 17.8255 42.4102 18.9648C42.8008 20.0716 43.403 21.0645 44.2168 21.9434C45.0306 22.8223 46.056 23.2943 47.293 23.3594H62.1367C62.7227 23.3268 63.0319 23.0013 63.0645 22.3828V19.5508C63.0319 18.8997 62.7227 18.5742 62.1367 18.5742H49.6367C48.7253 18.5742 47.944 18.265 47.293 17.6465C46.6745 16.9954 46.3652 16.2142 46.3652 15.3027C46.3652 14.3913 46.6745 13.61 47.293 12.959C47.944 12.3405 48.7253 12.0312 49.6367 12.0312H66.3359C67.2474 12.0312 68.0286 12.3405 68.6797 12.959C69.2656 13.5775 69.5749 14.3262 69.6074 15.2051V15.3027V26.7285C69.5749 27.6074 69.2656 28.3398 68.6797 28.9258C68.0612 29.5443 67.3125 29.8698 66.4336 29.9023H45.6328C43.3542 29.7721 41.4661 28.9095 39.9688 27.3145C38.5039 25.6868 37.446 23.8477 36.7949 21.7969C36.1764 19.7461 35.8672 17.6465 35.8672 15.498C35.8672 13.3496 36.1927 11.25 36.8438 9.19922C37.4948 7.14844 38.5527 5.32552 40.0176 3.73047C41.4824 2.10286 43.3542 1.22396 45.6328 1.09375ZM107.254 4.36523C107.254 5.27669 106.928 6.04167 106.277 6.66016C105.659 7.3112 104.894 7.63672 103.982 7.63672H84.4512C83.8327 7.66927 83.3118 7.81576 82.8887 8.07617C82.498 8.30404 82.2051 8.58073 82.0098 8.90625C81.8145 9.19922 81.7168 9.50846 81.7168 9.83398C81.7168 10.1595 81.8145 10.485 82.0098 10.8105C82.2051 11.1035 82.498 11.3802 82.8887 11.6406C83.3118 11.8685 83.8327 11.9987 84.4512 12.0312H98.3184C100.597 12.0964 102.469 12.6335 103.934 13.6426C105.431 14.6191 106.489 15.7585 107.107 17.0605C107.758 18.3301 108.084 19.6322 108.084 20.9668C108.084 22.2689 107.758 23.571 107.107 24.873C106.456 26.1426 105.398 27.2819 103.934 28.291C102.469 29.2676 100.597 29.7559 98.3184 29.7559H98.0254C97.8301 29.7884 97.6348 29.8047 97.4395 29.8047H78.9824C78.071 29.8047 77.2897 29.4954 76.6387 28.877C76.0202 28.2259 75.7109 27.4447 75.7109 26.5332C75.7109 25.6217 76.0365 24.8568 76.6875 24.2383C77.306 23.5872 78.071 23.2617 78.9824 23.2617H98.6113C99.2298 23.2943 99.7344 23.1803 100.125 22.9199C100.548 22.6595 100.857 22.3665 101.053 22.041C101.248 21.6829 101.346 21.3249 101.346 20.9668C101.346 20.7389 101.248 20.4297 101.053 20.0391C100.857 19.6159 100.548 19.2741 100.125 19.0137C99.7344 18.7533 99.2298 18.6068 98.6113 18.5742H84.7441C82.4655 18.5091 80.5775 17.9883 79.0801 17.0117C77.6152 16.0352 76.5573 14.9284 75.9062 13.6914C75.2878 12.4219 74.9785 11.1361 74.9785 9.83398C74.9785 8.56445 75.304 7.3112 75.9551 6.07422C76.6061 4.80469 77.6641 3.68164 79.1289 2.70508C80.5938 1.72852 82.4655 1.20768 84.7441 1.14258H85.0371C85.2324 1.11003 85.4277 1.09375 85.623 1.09375H103.982C104.894 1.09375 105.659 1.41927 106.277 2.07031C106.928 2.6888 107.254 3.45378 107.254 4.36523ZM123.904 31.0254C122.798 31.0254 121.691 30.8301 120.584 30.4395C119.51 30.0488 118.468 29.4792 117.459 28.7305C116.45 27.9492 115.571 26.9238 114.822 25.6543C114.074 24.3848 113.667 22.8711 113.602 21.1133V3.48633C113.602 2.57487 113.927 1.82617 114.578 1.24023C115.262 0.621745 116.059 0.3125 116.971 0.3125C118.924 0.47526 119.982 1.5332 120.145 3.48633V20.7227C120.177 21.5039 120.34 22.1712 120.633 22.7246C120.926 23.2454 121.251 23.6686 121.609 23.9941C121.967 24.2871 122.326 24.515 122.684 24.6777C123.074 24.8079 123.465 24.873 123.855 24.873C124.246 24.873 124.637 24.8079 125.027 24.6777C125.418 24.515 125.792 24.2871 126.15 23.9941C126.508 23.6686 126.834 23.2454 127.127 22.7246C127.42 22.1712 127.566 21.5039 127.566 20.7227V3.48633C127.566 2.57487 127.892 1.82617 128.543 1.24023C129.227 0.621745 130.024 0.3125 130.936 0.3125C132.889 0.47526 133.963 1.5332 134.158 3.48633V20.7227C134.191 21.5039 134.354 22.1549 134.646 22.6758C134.939 23.2292 135.265 23.6686 135.623 23.9941C135.981 24.2871 136.339 24.515 136.697 24.6777C137.088 24.8079 137.479 24.873 137.869 24.873C138.26 24.873 138.65 24.8079 139.041 24.6777C139.432 24.515 139.806 24.2871 140.164 23.9941C140.522 23.6686 140.848 23.2454 141.141 22.7246C141.434 22.1712 141.58 21.5039 141.58 20.7227V3.48633C141.58 2.57487 141.906 1.82617 142.557 1.24023C143.24 0.621745 144.038 0.3125 144.949 0.3125C146.902 0.47526 147.977 1.5332 148.172 3.48633V21.1133C148.172 22.8711 147.781 24.3848 147 25.6543C146.251 26.9238 145.372 27.9492 144.363 28.7305C143.387 29.4792 142.345 30.0488 141.238 30.4395C140.164 30.8301 139.057 31.0254 137.918 31.0254C136.811 31.0254 135.704 30.8301 134.598 30.4395C133.523 30.0488 132.482 29.4629 131.473 28.6816C131.277 28.5514 131.098 28.4049 130.936 28.2422C130.74 28.4049 130.561 28.5514 130.398 28.6816C129.389 29.4629 128.331 30.0488 127.225 30.4395C126.15 30.8301 125.044 31.0254 123.904 31.0254Z"
fill="url(#paint0_linear_197_5)"
/>
<defs>
<linearGradient
id="paint0_linear_197_5"
x1="-3"
y1="12"
x2="152"
y2="12"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#10C500" />
<stop offset="0.642997" stop-color="#003BAD" />
</linearGradient>
</defs>
</svg>
<div className="des">반을 선택하세요.</div>
<div className="button-con">
<Link href="class1">
<a>
<button>1반</button>
</a>
</Link>
<Link href="class2">
<a>
<button>2반</button>
</a>
</Link>
<Link href="class3">
<a>
<button>3반</button>
</a>
</Link>
</div>
</ChooseContainer>
);
};
Expand Down
64 changes: 47 additions & 17 deletions frontend/src/components/choose/chooseStyle.ts
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,60 @@
import styled from "styled-components";

export const ChooseContainer = styled.div`
width: 750px;
width: 1104px;
height: 579px;
position: relative;
border: 4px solid transparent;
border-radius: 40px;
background-image: linear-gradient(#fff, #fff),
linear-gradient(90deg, #10c500 0%, #003bad 65.63%);
background-origin: border-box;
background-clip: content-box, border-box;
display: flex;
justify-content: space-between;
justify-content: center;
align-items: center;
flex-direction: column;
button {
width: 325px;
height: 125px;
background: #ffffff;
box-shadow: 4px 4px 15px rgba(1, 0, 0, 0.15);
border-radius: 15px;
.des {
margin-top: 59px;
width: 723px;
border-bottom: 3px solid black;
text-align: center;
padding-bottom: 9px;
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-weight: 800;
font-size: 30px;
line-height: 36px;
text-align: center;
color: #000000;
transition: 0.15s;
}
.button-con {
width: 723px;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 47px;
}
button {
background: #e9eaef;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 30px;
width: 189px;
cursor: pointer;
&:hover {
background: #1556f7;
color: white;
transition: 0.15s;
transform: scale(1.05);
}
height: 144px;
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 19px;
color: #000000;
transition: 0.5s;
}
button:hover {
background: #d9dadf;
font-size: 17px;
}
`;

0 comments on commit c8f8a40

Please sign in to comment.