[team-31][FE] Muffin & Park 3주차 수요일 (#245)

* feat: apply published calendar (#55) * [Park] person modal button 기능 추가 및 Big Menu 에 반영 (#57) * feat: render by persons data * feat: person button dispatch event * feat: big menu string update * [Muffin] 차트 관련 리팩토링 * refactor: 차트 관련 리팩토링 1. Slider 두 번 선택시에만 값이 렌더링 되었었는데 -> 한 번만 선택시에도 해당 값이 화면에 렌더링되도록 수정 (handleSlider 함수 내 로직 수정) 2. Slider active 색상 변경 => 슬라이더 이동시 active색상 부자연스러운 부분 색상 변경 3. 미니 서치바 금액대 입력 클릭 시 바로 요금 빅서치바에 렌더링되는 문제 해결 => 날짜가 선택했을때만 요금 차트가 보여지도록 수정 4. 초기 최소,최대값 state로 관리하도록 수정 => 날짜를 선택했을때 비동기로 요금을 가져와야 하기 때문에 초기 최소,최대값도 provider 에서 관리하도록 수정 5. 날짜 체크아웃 선택시에만 차트가 나오도록 수정 (날짜 선택이 안되면 0원 표시, 차트 안보임) 6. 빅서치바 차트 x 버튼 클릭 시 날짜, 차트 모든 값 리셋 미해결 TODO 날짜 선택 후 차트에서 슬라이더 이동 -> 모달창 닫은 이후 다시 차트를 열었을때 데이터 동기화 * refactor: 네이밍 수정 및 if문 조정 * refactor: 차트 모달창을 닫고 다시 열어도 => 슬라이드와 차트가 이전에 내가 동작했던 데이터 그대로 그려주기 slider 값에 0, 100을 초기화해주는 부분을 기존 priceProvider에서 관리하고 있는 minPrice, maxPrice 값만큼 슬라이더 값을 가져오도록 셋팅 하여 해결 * [Park] SearchResultPage layout + kakao map (#66) * feat: complete skeleton ui * feat: 사용자 geo location 기반 kakao map 띄우기 Co-authored-by: Muffin <jinlog9@gmail.com>
codesquad-members-2022 · Jun 9, 2022 · 614d8e7 · 614d8e7
1 parent a0711f2
commit 614d8e7
Show file tree

Hide file tree

Showing 39 changed files with 744 additions and 859 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,6 @@ node_modules/
 dist/
 # Local Netlify folder
 .netlify
+
+# environment
+.env
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "emotion-normalize": "^11.0.1",
     "lodash": "^4.17.21",
     "react": "^18.1.0",
+    "react-carousel-calendar": "^0.0.3",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0"
   },
@@ -41,6 +42,7 @@
     "@typescript-eslint/eslint-plugin": "^5.26.0",
     "@typescript-eslint/parser": "^5.26.0",
     "babel-loader": "^8.2.5",
+    "dotenv": "^16.0.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-typescript": "^2.7.1",

diff --git a/public/index.html b/public/index.html
@@ -9,6 +9,10 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script
+      type="text/javascript"
+      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<%= htmlWebpackPlugin.options.env.KAKAO_MAP_KEY%>&autoload=false"
+    ></script>
     <div id="root"></div>
   </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -8,6 +8,7 @@ import Layout from '@components/Layout';
 import color from '@constants/color';
 import { HeaderProvider, useHeaderState } from '@contexts/HeaderProvider';
 import MainPage from '@pages/MainPage';
+import SearchResultPage from '@pages/SearchResultPage';
 
 function MyGlobalStyles() {
   const { isFocus } = useHeaderState();
@@ -49,6 +50,7 @@ export default function App() {
             <Routes>
               <Route path="/" element={<Layout />}>
                 <Route index element={<MainPage />} />
+                <Route path="rooms" element={<SearchResultPage />} />
               </Route>
             </Routes>
           </Router>

diff --git a/src/common/util.ts b/src/common/util.ts
@@ -0,0 +1,11 @@
+export const getGeoLocation = () =>
+  new Promise((resolve, reject) => {
+    navigator.geolocation.getCurrentPosition(
+      position => {
+        resolve(position);
+      },
+      error => {
+        reject(error.message);
+      },
+    );
+  });
diff --git a/src/components/Calendar/MonthCards/MonthCard/CardBody/ClickableDate.jsx b/src/components/Calendar/MonthCards/MonthCard/CardBody/ClickableDate.jsx