From b70380afa8d33f9e457639a7049cf852488661f4 Mon Sep 17 00:00:00 2001 From: JeonDoGyun Date: Sat, 11 Nov 2023 01:29:45 +0900 Subject: [PATCH 1/4] =?UTF-8?q?remove:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EB=AA=A9=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/data/profileHomeMock.json | 59 -------------------------- public/data/profileNewMock.json | 67 ------------------------------ public/data/profileUrgentMock.json | 67 ------------------------------ 3 files changed, 193 deletions(-) delete mode 100644 public/data/profileHomeMock.json delete mode 100644 public/data/profileNewMock.json delete mode 100644 public/data/profileUrgentMock.json diff --git a/public/data/profileHomeMock.json b/public/data/profileHomeMock.json deleted file mode 100644 index 29d5a11a..00000000 --- a/public/data/profileHomeMock.json +++ /dev/null @@ -1,59 +0,0 @@ -{ - "success": true, - "response": { - "sosList": [ - { - "id": 1, - "name": "펫 이름", - "age": 2, - "shelter": "보호소 이름", - "state": "안락사 날짜" - }, - { - "id": 1, - "name": "펫 이름", - "age": 2, - "shelter": "보호소 이름", - "state": "안락사 날짜" - }, - { - "id": 1, - "name": "펫 이름", - "age": 2, - "shelter": "보호소 이름", - "state": "안락사 날짜" - }, - { - "id": 1, - "name": "펫 이름", - "age": 2, - "shelter": "보호소 이름", - "state": "안락사 날짜" - } - ], - "newList": [ - { - "id": 1, - "name": "펫 이름", - "age": 2, - "shelter": "보호소 이름", - "adoptionStatus": "NO" - }, - { - "id": 1, - "name": "펫 이름", - "age": 2, - "shelter": "보호소 이름", - "adoptionStatus": "NO" - }, - { - "id": 1, - "name": "펫 이름", - "age": 2, - "shelter": "보호소 이름", - "adoptionStatus": "NO" - } - ] - }, - "error": null - } \ No newline at end of file diff --git a/public/data/profileNewMock.json b/public/data/profileNewMock.json deleted file mode 100644 index ee64217c..00000000 --- a/public/data/profileNewMock.json +++ /dev/null @@ -1,67 +0,0 @@ -{ - "success": true, - "response": { - "newList": { - "pets": [ - { - "petId": "펫 아이디", - "petName": "펫 이름", - "shelterId": "보호소 아이디", - "shelterName": "보호소 이름", - "adoptionStatus": "NO" - }, - { - "petId": "펫 아이디", - "petName": "펫 이름", - "shelterId": "보호소 아이디", - "shelterName": "보호소 이름", - "adoptionStatus": "NO" - }, - { - "petId": "펫 아이디", - "petName": "펫 이름", - "shelterId": "보호소 아이디", - "shelterName": "보호소 이름", - "adoptionStatus": "NO" - }, - { - "petId": "펫 아이디", - "petName": "펫 이름", - "shelterId": "보호소 아이디", - "shelterName": "보호소 이름", - "protectionExpirationDate": "안락사 날짜" - }, - { - "petId": "펫 아이디", - "petName": "펫 이름", - "shelterId": "보호소 아이디", - "shelterName": "보호소 이름", - "protectionExpirationDate": "안락사 날짜" - }, - { - "petId": "펫 아이디", - "petName": "펫 이름", - "shelterId": "보호소 아이디", - "shelterName": "보호소 이름", - "protectionExpirationDate": "안락사 날짜" - }, - { - "petId": "펫 아이디", - "petName": "펫 이름", - "shelterId": "보호소 아이디", - "shelterName": "보호소 이름", - "protectionExpirationDate": "안락사 날짜" - }, - { - "petId": "펫 아이디", - "petName": "펫 이름", - "shelterId": "보호소 아이디", - "shelterName": "보호소 이름", - "protectionExpirationDate": "안락사 날짜" - } - ] - }, - "totalPages": "3" - }, - "error": null -} \ No newline at end of file diff --git a/public/data/profileUrgentMock.json b/public/data/profileUrgentMock.json deleted file mode 100644 index 64588f32..00000000 --- a/public/data/profileUrgentMock.json +++ /dev/null @@ -1,67 +0,0 @@ -{ - "success": true, - "response": { - "sosList": { - "pets": [ - { - "petId": "펫 아이디", - "petName": "펫 이름", - "shelterId": "보호소 아이디", - "shelterName": "보호소 아이디", - "protectionExpirationDate": "안락사 날짜" - }, - { - "petId": "펫 아이디", - "petName": "펫 이름", - "shelterId": "보호소 아이디", - "shelterName": "보호소 아이디", - "protectionExpirationDate": "안락사 날짜" - }, - { - "petId": "펫 아이디", - "petName": "펫 이름", - "shelterId": "보호소 아이디", - "shelterName": "보호소 아이디", - "protectionExpirationDate": "안락사 날짜" - }, - { - "petId": "펫 아이디", - "petName": "펫 이름", - "shelterId": "보호소 아이디", - "shelterName": "보호소 아이디", - "protectionExpirationDate": "안락사 날짜" - }, - { - "petId": "펫 아이디", - "petName": "펫 이름", - "shelterId": "보호소 아이디", - "shelterName": "보호소 아이디", - "protectionExpirationDate": "안락사 날짜" - }, - { - "petId": "펫 아이디", - "petName": "펫 이름", - "shelterId": "보호소 아이디", - "shelterName": "보호소 아이디", - "protectionExpirationDate": "안락사 날짜" - }, - { - "petId": "펫 아이디", - "petName": "펫 이름", - "shelterId": "보호소 아이디", - "shelterName": "보호소 아이디", - "protectionExpirationDate": "안락사 날짜" - }, - { - "petId": "펫 아이디", - "petName": "펫 이름", - "shelterId": "보호소 아이디", - "shelterName": "보호소 아이디", - "protectionExpirationDate": "안락사 날짜" - } - ] - }, - "totalPages": 4 - }, - "error": null -} \ No newline at end of file From 63e1e2b9ec83db1bbc1af67858e2061afca8db4c Mon Sep 17 00:00:00 2001 From: JeonDoGyun Date: Sat, 11 Nov 2023 01:31:02 +0900 Subject: [PATCH 2/4] =?UTF-8?q?rename:=20=ED=8C=8C=EC=9D=BC=20=ED=99=95?= =?UTF-8?q?=EC=9E=A5=EC=9E=90=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit jsx 문법을 안 써서 .ts로 변경했습니다. --- src/commons/apis/{useFetch.tsx => useFetch.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/commons/apis/{useFetch.tsx => useFetch.ts} (100%) diff --git a/src/commons/apis/useFetch.tsx b/src/commons/apis/useFetch.ts similarity index 100% rename from src/commons/apis/useFetch.tsx rename to src/commons/apis/useFetch.ts From 728af8e91da6fa1553b9f3c9b5d86141bc609e1e Mon Sep 17 00:00:00 2001 From: JeonDoGyun Date: Sat, 11 Nov 2023 01:31:54 +0900 Subject: [PATCH 3/4] =?UTF-8?q?style:=20border=20=EC=A4=91=EB=B3=B5=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/notFound/NotFound.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/notFound/NotFound.tsx b/src/pages/notFound/NotFound.tsx index 0e995904..da349cc6 100644 --- a/src/pages/notFound/NotFound.tsx +++ b/src/pages/notFound/NotFound.tsx @@ -14,7 +14,7 @@ const NotFound = () => {

집으로 돌아가요!

홈으로 From faa1ee360a8a69d294b47bc39ae6f6c792608772 Mon Sep 17 00:00:00 2001 From: JeonDoGyun Date: Sat, 11 Nov 2023 01:32:19 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20Safari=20=EB=B8=8C=EB=9D=BC?= =?UTF-8?q?=EC=9A=B0=EC=A0=80=20=EC=82=AC=EC=9A=A9=20=EC=8B=9C=20=EB=B3=B4?= =?UTF-8?q?=EC=9D=B4=EB=8A=94=20AutoplayGuideModal=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 브라우저가 Safari일 때, 로그인 후 최초 접근일 때를 고려해서 모달이 보여지도록 구현했습니다. 추가로 영상 가운데 아이콘 부분 커서 안 잡히는 문제 해결했습니다. --- src/commons/modals/AutoplayGuideModal.tsx | 7 -- .../modals/SafariAutoplayGuideModal.tsx | 87 +++++++++++++++++++ src/pages/home/components/HomeVideo.tsx | 3 + src/pages/home/components/VideoMuteIcon.tsx | 2 +- src/pages/login/components/LoginInputForm.tsx | 11 ++- 5 files changed, 101 insertions(+), 9 deletions(-) delete mode 100644 src/commons/modals/AutoplayGuideModal.tsx create mode 100644 src/commons/modals/SafariAutoplayGuideModal.tsx diff --git a/src/commons/modals/AutoplayGuideModal.tsx b/src/commons/modals/AutoplayGuideModal.tsx deleted file mode 100644 index 91aba743..00000000 --- a/src/commons/modals/AutoplayGuideModal.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -const AutoplayGuideModal = () => { - return
; -}; - -export default 'AutoplayGuideModal'; diff --git a/src/commons/modals/SafariAutoplayGuideModal.tsx b/src/commons/modals/SafariAutoplayGuideModal.tsx new file mode 100644 index 00000000..aea39f1d --- /dev/null +++ b/src/commons/modals/SafariAutoplayGuideModal.tsx @@ -0,0 +1,87 @@ +import { getCookie, setCookie } from 'commons/cookie/cookie'; +import React, { useEffect, useState } from 'react'; + +interface AutoplayGuideModalProps { + browserInfo: string; +} + +const SafariAutoplayGuideModal = ({ browserInfo }: AutoplayGuideModalProps) => { + const browsers = [ + 'Chrome', + 'Opera', + 'WebTV', + 'Whale', + 'Beonex', + 'Chimera', + 'NetPositive', + 'Phoenix', + 'Firefox', + 'Safari', + 'SkipStone', + 'Netscape', + 'Mozilla', + ]; + const [isSafari, setIsSafari] = useState(false); + const [currentBrowser, setCurrentBrowser] = useState(''); + const [isClose, setIsClose] = useState(false); + const isFirstTime = getCookie('isFirstTime'); + + const handleCloseButton = () => { + setIsClose(true); + setCookie('isFirstTime', 'false', { + maxAge: 60000 * 60 * 24 * 30, + }); + }; + + const handleBrowserInfo = async () => { + switch (true) { + case browserInfo.includes('edg'): + setCurrentBrowser('Edge'); + break; + case browserInfo.includes('trident') || browserInfo.includes('msie'): + setCurrentBrowser('Internet Explorer'); + break; + default: + if (currentBrowser === 'Safari') { + setIsSafari(true); + } + + setCurrentBrowser( + browsers.find((browser) => + browserInfo.includes(browser.toLowerCase()), + ) || 'Other', + ); + + break; + } + }; + + useEffect(() => { + handleBrowserInfo(); + }, [currentBrowser]); + + return isSafari && !isClose && Boolean(isFirstTime) ? ( + + +
+ Safari + 자동재생 가이드 +
+ +
+ 원활한 컨텐츠 사용을 위해 + Safari 환경설정의 자동 재생을 켜주세요. +
+ + ) : null; +}; + +export default SafariAutoplayGuideModal; diff --git a/src/pages/home/components/HomeVideo.tsx b/src/pages/home/components/HomeVideo.tsx index 3887f477..f760cb35 100644 --- a/src/pages/home/components/HomeVideo.tsx +++ b/src/pages/home/components/HomeVideo.tsx @@ -1,4 +1,5 @@ import { useState, useRef, useEffect } from 'react'; +import AutoplayGuideModal from 'commons/modals/SafariAutoplayGuideModal'; import VideoOverlay from './VideoOverlay'; import { HomeVideoProps, VideoOverlayProps } from '../homeType'; @@ -17,6 +18,7 @@ const HomeVideo = (props: HomeVideoProps) => { const videoRef = useRef(null); const videoPlayerRef = useRef(null); const [loading, setLoading] = useState(true); + const browserInfo = window.navigator.userAgent.toLowerCase(); useEffect(() => { if (videoPlayerRef.current) { @@ -110,6 +112,7 @@ const HomeVideo = (props: HomeVideoProps) => { + ); }; diff --git a/src/pages/home/components/VideoMuteIcon.tsx b/src/pages/home/components/VideoMuteIcon.tsx index 0e69b08e..6c74fd63 100644 --- a/src/pages/home/components/VideoMuteIcon.tsx +++ b/src/pages/home/components/VideoMuteIcon.tsx @@ -3,7 +3,7 @@ import { VideoMuteIconProps } from '../homeType'; const VideoMuteIcon = (props: VideoMuteIconProps) => { const { muted, opacity } = props; return ( -
+
{!muted && ( { const [userInfo, setUserInfo] = useRecoilState(shelterLoginState); @@ -21,6 +21,14 @@ const LoginInputForm = () => { password: Yup.string().required('비밀번호를 입력해주세요.'), }); + const setBeginnerState = () => { + if (!getCookie('isFirstTime')) { + setCookie('isFirstTime', 'True', { + maxAge: 60000 * 60 * 24 * 30, + }); + } + }; + const userFetch = async () => { const res = await fetch(`${process.env.REACT_APP_URI}/account/login`, { method: 'POST', @@ -82,6 +90,7 @@ const LoginInputForm = () => { setCookie('loginState', 'Login', { maxAge: 60000 * 60 * 24, }); + setBeginnerState(); navigate('/'); },