feat: 모달 컴포넌트 추가,캘린더 input 참조용

KDT1-FE · Jul 25, 2023 · 449e37a · 449e37a
1 parent 081fab8
commit 449e37a
Show file tree

Hide file tree

Showing 13 changed files with 286 additions and 8 deletions.
diff --git a/index2.html → index.html b/index2.html → index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-<<<<<<< HEAD
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@tanstack/react-query": "^4.32.0",
     "axios": "^1.4.0",
     "react": "^18.2.0",
+    "react-date-range": "^1.4.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
     "scss": "^0.2.4",
@@ -22,6 +23,7 @@
   "devDependencies": {
     "@types/node": "^20.4.4",
     "@types/react": "^18.0.37",
+    "@types/react-date-range": "^1.4.4",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,10 +1,12 @@
+import Main from "./pages/Main/main.tsx";
 
 
 function App() {
 
   return (
     <>
      <h1>라우터 필요시 생성</h1>
+      <Main />
     </>
   )
 }

diff --git a/src/Components/Calendar-input/Calendar.tsx b/src/Components/Calendar-input/Calendar.tsx
@@ -0,0 +1,32 @@
+import  { useState } from 'react';
+import { DateRange, Range } from 'react-date-range';
+import 'react-date-range/dist/styles.css';
+import 'react-date-range/dist/theme/default.css';
+
+export default function MyDateRangePicker() {
+  const [state, setState] = useState<Range[]>([
+    {
+      startDate: new Date(),
+      endDate: undefined,
+      key: 'selection'
+    }
+  ]);
+
+  // 선택한 날짜 범위를 받아 옵니다.
+  console.log(state[0].startDate);
+  console.log(state[0].endDate);
+
+  const handleSelect = (ranges: { [key: string]: Range }) => {
+    setState([ranges['selection']]);
+  }
+
+  return (
+    <DateRange
+      editableDateInputs={true}
+      onChange={handleSelect}
+      moveRangeOnFirstSelection={false}
+      ranges={state}
+    />
+  );
+}
+
diff --git a/src/Components/Common/Modal/Modal.css b/src/Components/Common/Modal/Modal.css
diff --git a/src/Components/Common/Modal/Modal.css.map b/src/Components/Common/Modal/Modal.css.map
diff --git a/src/Components/Common/Modal/Modal.scss b/src/Components/Common/Modal/Modal.scss
@@ -0,0 +1,45 @@
+.modal-overlay {
+  position: fixed;
+  min-width: 100vw;
+  min-height: 100vh;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  overflow: hidden;
+  //display: flex;
+  flex-direction: column;
+  align-items: center;
+  //justify-content: center;
+  background-color: rgba(0, 0, 0, 0.375);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+.modal-window {
+  // position: fixed;
+  margin: auto;
+  display: flex;
+  max-width: 100vw;
+  height: auto;
+  flex-direction: column;
+  justify-content: center;
+  background-color: #fff;
+  align-items: center;
+  border-radius: 12px;
+  overflow: hidden;
+  padding-bottom: 30px;
+}
+.modal-close {
+  bottom: 10px;
+  width: 164px;
+  height: 40px;
+  color: indianred;
+  font-size: 18px;
+  transition: 0.1s;
+  margin: 30px auto 10px;
+  background-color: var(--primary2);
+  &:hover {
+    transform: scale(1.03);
+    background-color: var(--primary3);
+  }
+}
diff --git a/src/Components/Common/Modal/Modal.tsx b/src/Components/Common/Modal/Modal.tsx
@@ -0,0 +1,29 @@
+import { PropsWithChildren } from "react";
+
+import "./Modal.scss";
+
+interface ModalProps {
+  visibility: boolean;
+  toggle: (param: boolean) => void;
+}
+
+export default function Modal(props: PropsWithChildren<ModalProps>) {
+  return (
+    <div
+      className="modal-overlay"
+      style={{ display: props.visibility ? "flex" : "none" }}
+    >
+      <div className="modal-window">
+        {props.children}
+        <button
+          className="modal-close"
+          onClick={() => {
+            props.toggle(false);
+          }}
+        >
+          닫기
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/Components/Sample/Sample.tsx b/src/Components/Sample/Sample.tsx
diff --git a/src/Components/Sample/sample.scss b/src/Components/Sample/sample.scss