Merge pull request #55 from ghojeong/fe/45/recoil

[FE] recoil: atoms, atom types 추가 (#45)

frontend/package.json

@@ -17,6 +17,7 @@
     "react-icons": "^4.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "recoil": "^0.3.1",
     "styled-components": "^5.3.0",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"

frontend/src/App.tsx

@@ -0,0 +1,23 @@
+import { Route } from "react-router-dom";
+import MainPage from "components/pages/MainPage";
+import ResultPage from "components/pages/ResultPage";
+import LoadingPage from "components/pages/LoadingPage";
+import {
+  RecoilRoot,
+  atom,
+  selector,
+  useRecoilState,
+  useRecoilValue
+} from 'recoil';
+
+function App() {
+  return (
+    <RecoilRoot>
+      <Route path="/" exact component={MainPage} />
+      <Route path="/search" component={ResultPage} />
+      <Route path="/login" component={LoadingPage} />
+    </RecoilRoot>
+  );
+}
+
+export default App;

frontend/src/components/Header/Header.tsx

@@ -37,7 +37,7 @@ const NavigatorList = styled.li`
   width: 8rem;
   text-align: center;
   padding: 10px;
-  font-size: 1rem;
+  font-size: 1.6rem;
   &:hover {
     font-weight: bold;
     text-decoration-line: underline;

frontend/src/components/Header/LoginModal.tsx

@@ -33,7 +33,7 @@ const LoginModal = () => {
 
 const LoginModalLayout = styled.ul`
   position: absolute;
-  margin-top: 1rem;
+  margin-top: 1.6rem;
   right: 0%;
   width: 250px;
   background-color: #fff;
@@ -42,12 +42,12 @@ const LoginModalLayout = styled.ul`
   cursor: pointer;
   box-shadow: rgb(0 0 0 12%) 0px 2px 16px;
   list-style: none;
-  padding: 1rem 2rem;
-  font-size: 1rem;
+  padding: 1.6rem 2rem;
+  font-size: 1.6rem;
   z-index: 99;
 
   & > li {
-    padding: 1rem 0;
+    padding: 1.6rem 0;
     &:not(:last-child) {
       border-bottom: 1px solid #c4c4c4;
     }

frontend/src/components/SearchBar/Calendar/CalendarStyles.tsx

@@ -28,7 +28,7 @@ const CalendarSelector = styled.div`
   & > div {
     background-color: #e6e6e6;
     border-radius: 100px;
-    margin-top: 1rem;
+    margin-top: 1.6rem;
     & > button {
       border-radius: 100px;
       border: none;
@@ -55,9 +55,9 @@ const CalendarSelector = styled.div`
 const CalendarLayout = styled.div`
   outline: red solid 1px;
   width: 90%;
-  margin: 1rem;
+  margin: 1.6rem;
   padding: 1.5rem;
-  font-size: 1rem;
+  font-size: 1.6rem;
   font-weight: 600;
   display: flex;
 

frontend/src/components/SearchBar/SearchBarStyles.tsx

@@ -7,7 +7,7 @@ type TSearchBarBox = {
 const SearchBarTitle = styled.div`
   font-size: 1.2rem;
   font-weight: bold;
-  margin-bottom: 1rem;
+  margin-bottom: 1.6rem;
   padding: 0 10%;
 `;
 const SearchBarText = styled.div`

frontend/src/recoil/AtomTypes.tsx

@@ -0,0 +1,34 @@
+export type SearchBarToggle = {
+    calendar: boolean,
+    roomPrice: boolean,
+    guests: boolean
+}
+
+export type Date = {
+    year?: number | null,
+    month: number | null,
+    date: number | null
+}
+
+export type CalendarModal = {
+    year: number,
+    month: number,
+    today: Date
+}
+
+export type CalendarFilter = {
+    checkIn:  Date,
+    checkOut: Date,
+}
+
+export type RoomPriceFilter ={
+    min: number | null,
+    max: number | null,
+}
+
+export type GuestsState = {
+    adult:  number | null,
+    child:  number | null,
+    toddler:  number | null,
+}
+

frontend/src/recoil/Atoms.tsx

@@ -0,0 +1,58 @@
+import { atom } from 'recoil';
+import * as T from './AtomTypes';
+
+
+export const searchBarToggleState = atom<T.SearchBarToggle>({
+    key: "",
+    default:{
+        calendar: false,
+        roomPrice: false,
+        guests: false
+    }
+})
+
+export const calendarModalState = atom<T.CalendarModal>({
+    key: 'calendarModalState',
+    default: {
+        year: new Date().getFullYear(), //2021
+        month: new Date().getMonth() + 1, //5
+        today: {
+            year: new Date().getFullYear(),
+            month: new Date().getMonth() + 1,
+            date: new Date().getDate()
+        }
+    }
+})
+
+export const calendarFilterState = atom <T.CalendarFilter>({
+    key: "calendarFilterState",
+    default:{
+        checkIn: {
+            month: null,
+            date: null,
+        },
+        checkOut: {
+            month: null,
+            date: null,
+        }
+    }
+})
+
+
+
+export const roomPriceFilterState = atom<T.RoomPriceFilter>({
+    key: "roomPriceFilterState",
+    default:{
+        min: null,
+        max: null
+    }
+})
+
+export const guestFilterState = atom<T.GuestsState>({
+    key: "geustFilterState",
+    default: {
+        adult: null,
+        child: null,
+        toddler:null
+    }
+})

frontend/yarn.lock

@@ -5472,6 +5472,11 @@ [email protected]:
     duplexer "^0.1.1"
     pify "^4.0.1"
 
+[email protected]:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hamt_plus/-/hamt_plus-1.0.2.tgz#e21c252968c7e33b20f6a1b094cd85787a265601"
+  integrity sha1-4hwlKWjH4zsg9qGwlM2FeHomVgE=
+
 handle-thing@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
@@ -9184,6 +9189,11 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-icons@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
+  integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
+
 react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -9376,6 +9386,13 @@ readdirp@~3.5.0:
   dependencies:
     picomatch "^2.2.1"
 
+recoil@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/recoil/-/recoil-0.3.1.tgz#40ef544160d19d76e25de8929d7e512eace13b90"
+  integrity sha512-KNA3DRqgxX4rRC8E7fc6uIw7BACmMPuraIYy+ejhE8tsw7w32CetMm8w7AMZa34wzanKKkev3vl3H7Z4s0QSiA==
+  dependencies:
+    hamt_plus "1.0.2"
+
 [email protected]:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f"