Merge pull request #29 from TEAM-WHEN-WILL-WE-MEET/develop

[FIX] Web Share API 버그 픽스

package.json

@@ -27,6 +27,7 @@
     "path-browserify": "^1.0.1",
     "react": "^18.3.1",
     "react-calendar": "^5.0.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",
     "react-scripts": "5.0.1",
@@ -67,6 +68,7 @@
     "autoprefixer": "^10.4.20",
     "firebase-tools": "^13.29.1",
     "postcss": "^8.5.1",
-    "tailwindcss": "^3.4.17"
+    "tailwindcss": "^3.4.17",
+    "ua-parser-js": "^2.0.0"
   }
 }

src/App.css

@@ -63,35 +63,43 @@ You can apply the theme on any DOM node, not just the `body`
   margin: 0 auto;
   padding: 0;  
 }
-
-/* Android 최소 사이즈 (360x640) */
-@media only screen and (min-device-width: 360px) and (max-device-width: 640px) and (-webkit-device-pixel-ratio: 3) {
-  .App {
-    width: 360px;
-    height: 640px;
+ /* 안드로이드 최소 사이즈 (360 x 640) 
+  w 360px 이상, h 640px 이하인 기기에서 h 640px로 적용  */
+   @media screen and (min-width: 360px) and (max-height: 640px) {
+    .App {
+      height: 640px;
+      width:auto;
+      /* background-color:#c30010; */
+    }
   }
-}
+
+
+  /* iOS 최소 사이즈 (375 x 667)
+     iOS 기기 중 h 667px 이하인 경우 적용 */
+  @media screen and (min-width: 375px) and (max-height: 667px) {
+    .App {
+      height: 667px;
+      /* background-color:#c30010; */
 
-/* Android 기본 작업 사이즈 (360x800) */
-/* @media only screen and (min-device-width: 360px) and (max-device-width: 800px) and (-webkit-device-pixel-ratio: 3) {
-  .App {
-    width: 360px;
-    height: 800px;
+    }
   }
-} */
-
-/* iOS 최소 사이즈 (375x667) */
-@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 3) {
-  .App {
-    width: 375px;
-    height: 667px;
+
+  /* iOS 기본 작업 사이즈 (375 x 812)
+     iOS 기기 중 h가 668px 이상인 경우 기본 작업 사이즈로 적용 */
+  @media screen and (min-width: 375px) and (min-height: 668px) {
+    .App {
+      height: 812px;
+      /* background-color:#c30010; */
+/* 왜 여기서 pc가 적용되지..?? */
+    }
   }
-}
+
+  /* PC 버전 또는 LandPage 전용 스타일: 
+     뷰포트 너비가 768px 이상인 경우, LandPage 디자인 요구에 따라 430px로 변경 */
+  @media screen and (min-width: 768px) {
+    .App {
+      width: 430px;
+      /* background-color:#c30010; */
 
-/* iOS 기본 작업 사이즈 (375x812) */
-@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
-  .App {
-    width: 375px;
-    height: 812px;
-  }
-}
+    }
+  }

src/App.js

@@ -8,8 +8,6 @@ import GetAppointmentRedirect from './pages/GetAppointmentRedirect';
 import IndividualCalendar from './pages/individualCalendar';
 import MyPage from './pages/MyPage';
 import AccountManagement from './pages/AccountManagement';
-
-// import LandingPage from "./components/LandingPage";
 import LandingPage from "./components/LandingPage";
 
 function App() {

src/components/TimePicker.js

@@ -8,7 +8,7 @@ import { cn } from '../utils/cn';
 
 const TimePicker = ({ startTime, endTime, setStartTime, setEndTime, onCreateCalendar,isFormReady, setIsFormReady  }) => {
 
-  console.log('[TimePicker] isFormReady:', isFormReady);
+  // console.log('[TimePicker] isFormReady:', isFormReady);
 
   const startMeridiemDialRef = useRef(null);
   const startHourDialRef = useRef(null);

src/components/copyToClipBoard.ts

@@ -0,0 +1,58 @@
+const getDummyTextarea = () => {
+    const textarea = document.createElement("textarea") as HTMLTextAreaElement;
+    textarea.style.top = "0";
+    textarea.style.left = "0";
+    textarea.style.display = "fixed";
+
+    return textarea;
+  };
+
+  export const isClipboardSupported = () => navigator?.clipboard != null;
+  export const isClipboardCommandSupported = () =>
+    document.queryCommandSupported?.("copy") ?? false;
+
+  /**
+   * 인자로 받은 텍스트를 클립보드에 복사합니다.
+   * @param text 복사할 텍스트
+   *
+   * @example
+   * ```ts
+   * const result = await copyToClipboard('하이');
+   * if (result) {
+   *   console.log('클립보드에 복사 성공');
+   * } else {
+   *   console.log('클립보드에 복사 실패');
+   * }
+   * ```
+   */
+  export const copyToClipboard = (text: string) => {
+    return new Promise<boolean>(async (resolve) => {
+      const rootElement = document.body;
+
+      // if (isClipboardSupported()) {
+      //   await navigator.clipboard.writeText(text);
+      //   resolve(true);
+      //   return;
+      // }
+
+      if (isClipboardCommandSupported()) {
+        const textarea = getDummyTextarea();
+        textarea.value = text;
+
+        rootElement.appendChild(textarea);
+
+        textarea.focus();
+        textarea.select();
+
+        document.execCommand("copy");
+        rootElement.removeChild(textarea);
+        resolve(true);
+        return;
+      }
+
+      resolve(false);
+      return;
+    });
+  };
+
+  export default copyToClipboard;