Skip to content
Snippets Groups Projects
Commit e0ffce7a authored by 환희 최's avatar 환희 최
Browse files

Merge branch 'mainpage' into 'main' 

main, login/signup, listing, search page UI design

See merge request !7
parents 1f0d2032 7f1a9931
No related branches found
No related tags found
1 merge request!7main, login/signup, listing, search page UI design
Show whitespace changes
Inline Side-by-side
Showing
with 531 additions and 5 deletions
webapp/frontend/package-lock.json
+ 42
− 0
View file @ e0ffce7a
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-router-dom": "^6.28.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
} }
...@@ -3138,6 +3139,15 @@ ...@@ -3138,6 +3139,15 @@
} }
} }
}, },
"node_modules/@remix-run/router": {
"version": "1.21.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz",
"integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==",
"license": "MIT",
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/@rollup/plugin-babel": { "node_modules/@rollup/plugin-babel": {
"version": "5.3.1", "version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
...@@ -14117,6 +14127,38 @@ ...@@ -14117,6 +14127,38 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/react-router": {
"version": "6.28.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
"integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==",
"license": "MIT",
"dependencies": {
"@remix-run/router": "1.21.0"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.28.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz",
"integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==",
"license": "MIT",
"dependencies": {
"@remix-run/router": "1.21.0",
"react-router": "6.28.0"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-scripts": { "node_modules/react-scripts": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
......
webapp/frontend/package.json
+ 1
− 0
View file @ e0ffce7a
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-router-dom": "^6.28.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
......
webapp/frontend/public/barbell.png 0 → 100644
+ 0
− 0
View file @ e0ffce7a
webapp/frontend/public/barbell.png

61 KiB

webapp/frontend/public/benchpress.png 0 → 100644
+ 0
− 0
View file @ e0ffce7a
webapp/frontend/public/benchpress.png

109 KiB

webapp/frontend/public/create.png 0 → 100644
+ 0
− 0
View file @ e0ffce7a
webapp/frontend/public/create.png

3.17 KiB

webapp/frontend/public/flag.png 0 → 100644
+ 0
− 0
View file @ e0ffce7a
webapp/frontend/public/flag.png

30.9 KiB

webapp/frontend/public/football.png 0 → 100644
+ 0
− 0
View file @ e0ffce7a
webapp/frontend/public/football.png

48.5 KiB

webapp/frontend/public/index.html
+ 1
− 1
View file @ e0ffce7a
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Crewup</title> <title>Crewup</title>
</head> </head>
<body> <body>
......
webapp/frontend/public/listing.png 0 → 100644
+ 0
− 0
View file @ e0ffce7a
webapp/frontend/public/listing.png

1.08 MiB

webapp/frontend/public/location.png 0 → 100644
+ 0
− 0
View file @ e0ffce7a
webapp/frontend/public/location.png

935 B

webapp/frontend/public/people.png 0 → 100644
+ 0
− 0
View file @ e0ffce7a
webapp/frontend/public/people.png

613 B

webapp/frontend/public/sports.png 0 → 100644
+ 0
− 0
View file @ e0ffce7a
webapp/frontend/public/sports.png

147 KiB

webapp/frontend/public/sportsSmall.png 0 → 100644
+ 0
− 0
View file @ e0ffce7a
webapp/frontend/public/sportsSmall.png

52.8 KiB

webapp/frontend/public/sporttype.png 0 → 100644
+ 0
− 0
View file @ e0ffce7a
webapp/frontend/public/sporttype.png

1.02 KiB

webapp/frontend/src/assets/App.css
+ 22
− 4
View file @ e0ffce7a
.App { .App {
margin: 0; margin: 0;
width: 100vw; max-width: 100vw;
height: 100vh; height: 150vh;
background-color: var(--color-bg); background-color: var(--color-bg);
} }
.App-header{ * {
color: var(--color-main); box-sizing : border-box;
margin: 0;
font-family: var(--main-font);
user-select: none;
} }
button {
background: none;
border: none;
padding: 0;
margin: 0;
font: inherit;
font-weight: 500;
box-shadow: none;
cursor: pointer;
border-radius: 25px;
}
webapp/frontend/src/assets/list.css 0 → 100644
+ 49
− 0
View file @ e0ffce7a
.list {
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
flex-wrap: wrap;
}
.listItem {
position: relative;
display: inline-block;
background-color: var(--color-white);
border-radius: 25px;
width: 270px;
height: 195px;
padding: 15px;
}
.title {
text-align: center;
margin-bottom: 10px;
font-size: 20px;
}
.location {
margin-top: 7px;
margin-left: 15px;
font-size: 17px;
}
.type {
margin-top: 7px;
margin-left: 15px;
font-size: 17px;
}
.people {
margin-top: 7px;
margin-left: 15px;
font-size: 17px;
}
.registerButton {
position: absolute;
background-color: var(--color-main);
left: 53%;
width: 100px;
height: 35px;
}
.listItemImage {
width: 22px;
height: 23px;
margin-right: 3px;
}
\ No newline at end of file
webapp/frontend/src/assets/listing.css 0 → 100644
+ 201
− 0
View file @ e0ffce7a
.listing {
position: relative;
}
.listingImage {
overflow: hidden;
}
.listingMessage {
position: absolute;
color: var(--color-white);
text-align: center;
font-size: 25px;
top: 28%;
left: 40%;
}
.goSearchButton {
padding-top: 5px;
padding-bottom: 8px;
padding-left: 25px;
padding-right: 25px;
margin-top: 20px;
border-radius: 25px;
font-size: 22px;
font-weight: bold;
background-color: var(--color-white);
}
.listingFind {
display: flex;
flex-direction: row;
padding: 10px;
}
.listingFindMessage {
display: inline-block;
color: var(--color-white);
text-align: left;
font-size: 20px;
margin-top: 30px;
margin-left: 50px;
margin-right: 20px;
}
.createButton{
position: absolute;
top: 50%;
left: 93%;
background-color: var(--color-main);
padding: 0 3px;
border-radius: 100px;
}
[type="radio"] {
appearance: none;
}
[type="radio"] + span{
border-radius: 25px;
padding: 2px 25px;
font-size: 18px;
background-color: var(--color-white);
margin-right: 10px;
cursor: pointer;
}
.listingTotal:checked + span{
background-color: var(--color-main);
font-weight: 500;
}
.listingInstant:checked + span{
background-color: var(--color-main);
font-weight: 500;
}
/* 모집공고 리스트 */
.listingItems {
display: flex;
justify-content: center;
margin-top: 60px;
gap: 40px;
}
.listingItem {
position: relative;
display: inline-block;
background-color: var(--color-white);
border-radius: 25px;
width: 270px;
height: 195px;
padding: 15px;
}
.title {
text-align: center;
margin-bottom: 10px;
font-size: 20px;
}
.location {
margin-top: 7px;
margin-left: 15px;
font-size: 17px;
}
.type {
margin-top: 7px;
margin-left: 15px;
font-size: 17px;
}
.people {
margin-top: 7px;
margin-left: 15px;
font-size: 17px;
}
.registerButton {
position: absolute;
background-color: var(--color-main);
left: 53%;
width: 100px;
height: 35px;
}
.listingItemImage {
width: 22px;
height: 23px;
margin-right: 3px;
}
/*모달창 css*/
.modalContainer {
top : 0;
left :0;
position: fixed;
z-index: 100;
display: flex;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.modalContent {
display: flex;
align-items: left;
justify-content: center;
flex-direction: column;
margin: 0 auto;
padding: 0px 80px;
padding-top: 20px;
width: 700px;
height: 500px;
background-color: var(--color-white);
border-radius: 25px;
}
.modalContent span {
font-size: 23px;
font-weight: bold;
margin-bottom: 30px;
}
.modalContent label {
font-weight: bold;
font-size: 20px;
}
.crewNameInput, .crewRegionInput, .crewTypeInput, .crewFeeInput,
.crewCapacityInput, .crewBioInput {
display: flex;
gap: 100px;
font-size: 20px;
border-bottom: 1px solid rgb(180, 180, 180);
padding: 10px;
}
.modalCloseButton {
position: fixed;
top: 172px;
left: 1050px;
background-color: var(--color-main);
font-weight: bold;
font-size: 18px;
width: 70px;
height: 40px;
}
.createDoneButton {
background-color: var(--color-main);
font-weight: bold;
font-size: 18px;
width: 150px;
height: 45px;
margin-top: 20px;
margin-left: 180px;
}
webapp/frontend/src/assets/login.css 0 → 100644
+ 45
− 0
View file @ e0ffce7a
.login {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 150px;
}
.userEmail, .userPassword {
background-color: var(--color-bg);
border-radius: 25px;
width: 400px;
height: 55px;
border: 2px solid var(--color-main);
font-size: 15px;
padding: 20px;
margin-bottom: 20px;
color: var(--color-white);
}
.userEmail:focus, .userPassword:focus {
outline: none;
border: 4px solid var(--color-main);
}
.loginButton {
background-color: var(--color-main);
border-radius: 25px;
width: 400px;
height: 55px;
border: 2px solid var(--color-main);
font-size: 20px;
margin-bottom: 10px;
}
.ifNotUser {
font-size: 18px;
color: var(--color-white);
}
.ifNotUser a{
font-weight: 500;
text-decoration-line: underline;
color: var(--color-white);
}
\ No newline at end of file
webapp/frontend/src/assets/navbar.css 0 → 100644
+ 142
− 0
View file @ e0ffce7a
* {
box-sizing : border-box;
margin: 0;
font-family: var(--main-font);
user-select: none;
}
button {
background: none;
border: none;
padding: 0;
margin: 0;
font: inherit;
font-weight: 500;
box-shadow: none;
cursor: pointer;
border-radius: 25px;
}
a {
display: inline-block;
}
.navBar{
display: flex;
height: 100px;
padding: 30px;
width: 100%;
max-width: 100vw;
color: var(--color-white);
font-family: var(--main-font);
}
.navBarLogo{
margin-left: 50px;
font-size: 25px;
margin-bottom: 30px;
}
.navBarLogo-1{
text-decoration: none;
color: var(--color-main);
}
.navBarMenu{
margin: auto;
font-size: 18px;
}
.navBarMenu-1{
text-decoration: none;
padding: 5px;
font-size: 18px;
color: var(--color-white);
transition: transform 0.3s ease;
}
.navBarMenu-2{
text-decoration: none;
padding: 5px;
margin: 0 100px;
font-size: 18px;
color: var(--color-white);
transition: transform 0.3s ease;
}
.navBarMenu-3{
text-decoration: none;
padding: 5px;
font-size: 18px;
color: var(--color-white);
transition: transform 0.3s ease;
}
.navBarMenu-1:hover{
color: var(--color-main);
transform: scale(1.1);
}
.navBarMenu-2:hover{
color: var(--color-main);
transform: scale(1.1);
}
.navBarMenu-3:hover{
color: var(--color-main);
transform: scale(1.1);
}
.loginAndSignUp{
margin-top: 8px;
margin-right: 80px;
display:flex;
gap: 10px;
}
.navBarLogin{
text-decoration: none;
color: var(--color-white);
}
.navBarSignUp{
text-decoration: none;
color: var(--color-white);
}
.main {
color: var(--color-white);
text-align: center;
font-size: 20px;
display: flex;
justify-content: center;
height: 100vh;
}
.mainMessage {
text-align: left;
font-size: 50px;
margin-top: 150px;
margin-left: 100px;
}
.mainMessage span {
color: var(--color-main);
}
.mainImages {
margin-left: 250px;
margin-top: 50px;
}
.search {
color: var(--color-white);
text-align: center;
font-size: 20px;
}
.myPage {
color: var(--color-white);
text-align: center;
font-size: 20px;
}
.signUp {
color: var(--color-white);
text-align: center;
font-size: 20px;
}
webapp/frontend/src/assets/search.css 0 → 100644
+ 28
− 0
View file @ e0ffce7a
.crewSearch, .meetingSearch {
margin-top: 180px;
display: flex;
gap: 100px;
align-items: center;
justify-content: center;
}
.meetingSearch {
margin-top: 100px;
}
#crewSportType, #crewSportRegion, #meetingSportType, #meetingSportRegion, #meetingDate {
cursor: pointer;
background-color: var(--color-sub);
border: 2px solid var(--color-main);
width: 200px;
padding: 10px;
border-radius: 25px;
}
.crewSearchButton, .meetingSearchButton {
background-color: var(--color-main);
border: 2px solid var(--color-main);
width: 120px;
padding: 10px 25px;
border-radius: 25px;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr