Skip to content

Commit

Permalink
Create eventCalendar layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@hyun1211
hyun1211 committed Sep 22, 2024
1 parent efb5932 commit 7478068
Show file tree
Hide file tree
Showing 7 changed files with 375 additions and 0 deletions.
10 changes: 10 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"react-dom": "^18.3.1",
"react-router-dom": "^6.26.2",
"react-scripts": "5.0.1",
"react-swipeable": "^7.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
Expand Down
4 changes: 4 additions & 0 deletions public/downArrow.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions public/upArrow.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import './App.css';
import MonthView from "./pages/MonthView";
import WeekView from "./pages/WeekView";
import Invite from "./pages/invite";
import EventCalendar from "./pages/eventCalendar";


import LandingPage from "./pages/LandingPage";
Expand Down Expand Up @@ -31,6 +32,11 @@ function App() {
<Invite />
</>}
/>
<Route path="/eventCalendar"
element={<>
<EventCalendar />
</>}
/>
</Routes>
</div>
</Router>
Expand Down
224 changes: 224 additions & 0 deletions src/pages/eventCalendar.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
.event-calendar {
padding: 20px;
height: auto;
height: 1vh;

}
.event-calendar-header{
display: flex;
flex-direction: row;
background-color:rgb(255, 255, 255);
}
.event-calendar-header-text{
color: #242424;
font-family: "Pretendard-SemiBold", Helvetica;
font-size: 20px;
font-weight: 600;
display: block;
margin-right: 60px;
}
.dropdown-container {
position: relative;
display: block;
width: auto;
}
.arrow-button {
background-color: var(--variable-collection-f2);
border: none;
border-radius: 8px;
height: 16px;
width: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px; /* 화살표 크기 조정 */
background-color: rgba(242, 242, 242, 1);
border-radius: 8px;
height: 16px;
}
.dropdown-button {
background-color: white;
border: none;
cursor: pointer;
color: #444444;
font-family: "Pretendard-Medium", Helvetica;
font-size: 12px;
font-weight: 500;
padding: 1px;
line-height: 0;
}

.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background-color: white;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
border-radius: 8px;
width: 150px;
z-index: 1;
}

.dropdown-item {
padding: 16px 29px 16px 16px;
display: flex;
align-items: center;
background-color: #ffffff;
border: 1px solid;
border-color: rgba(242, 242, 242, 1);
border-radius: 6px;
height: 49px;
width: 110px; color: #444444;
font-size: 14px;
font-weight: 500;
color: #444444;
font-family: "Pretendard-Medium", Helvetica;
font-weight: 500;
border: none;
}
.arrow-icon{
vertical-align: middle;
}
.user-icon {
color: white;
border-radius: 50%;
padding: 5px;
margin-right: 10px;
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
font-size: 12px;
background-color: rgba(68, 68, 68, 1);
border: 1px solid;
border-color:rgba(68, 68, 68, 1);
border-radius: 20.5px;

}

.event-date-tabs {
display: flex;
overflow-x: auto;
/* overflow-x: hidden; */
padding: 10px 0;
scrollbar-width: none;
white-space: nowrap;
width: auto;
background-color: rgb(255, 255, 255);

}

.event-date-tabs::-webkit-scrollbar {
display: none;
}

.event-date-tab {
/* display: inline-block;
flex: 0 0 auto; */
flex: 0 0 10%;
padding: 10px;
cursor: pointer;
/* border-bottom: 2px solid transparent; */
border:none;
/* margin-right: 15px; */
width:74px !important;
color: #767676;
font-family: "Pretendard-Regular", Helvetica;
font-size: 14px;
font-weight: 400;
border-bottom: 1px solid #e4e4e4;

}

.event-date-tab.active {
border-bottom: 2px solid black;
border-radius: 0;
color: #242424;
font-family: "Pretendard-SemiBold", Helvetica;
font-size: 14px;
font-weight: 600;
background-color: none;
}
.event-date-tab.active:hover{
background-color: none;
}

.time-selection {
display: flex;
flex-direction: column;
align-items: center;
background-color:#fafafa;

}

.time-row {
display: flex;
align-items: center;
margin-bottom: 10px;
}

.time {
/* background-color: #ffffff; */
/* border: 1px solid;
border-color: #444444;
border-radius: 28px; */
height: 36px;
width: 36px;
text-align: center;
color: #444444;
font-family: "Pretendard-Regular", Helvetica;
font-size: 12px;
font-weight: 400;
line-height: 36px;
margin-right:8px;
}

.eventCalendar-time-buttons {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
gap: 0;


}

.eventCalendar-time-button {
margin: 0px;
background-color: #f0f0f0;
border: 1px solid #000000;
cursor: pointer;
height: 38px;
width: 45px;
background-color: #ffffff;
border: 1px solid;
border-color: #e4e4e4;
border-radius: 2px;
}

.eventCalendar-time-button.selected {
background-color: #d8f7ff;
border: 1px solid;
border-color: #81a1b2;
border-radius: 2px;
}

.save-button {
display: block;
margin: 20px auto;
padding: 10px 20px;

cursor: pointer;
background-color: #fff2c4;
border: 1px solid;
border-color: rgba(68, 68, 68, 1);;
border-radius: 24px;
box-shadow: 1px 2px 0px #444444;
height: 48px;
width:180px;

color: rgba(36, 36, 36, 1);
font-family: "Pretendard-SemiBold", Helvetica;
font-size: 14px;
font-weight: 600;
}

Loading

0 comments on commit 7478068

Please sign in to comment.