diff --git a/package.json b/package.json index e4f3c5d9..a2062cbe 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "prettier": "^3.1.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-draggable": "^4.4.6", "react-query": "^3.39.3", "react-router-dom": "^6.21.1", "vite-plugin-svgr": "^4.2.0" diff --git a/src/Detail/api/getBookDetail.ts b/src/Detail/api/getBookDetail.ts new file mode 100644 index 00000000..ede46f10 --- /dev/null +++ b/src/Detail/api/getBookDetail.ts @@ -0,0 +1,14 @@ +import { api } from '../../libs/api'; + +export async function getBookDetail() { + const data = await api.get( + `/api/books/detail/ee4f66f9-9cf4-4b28-90f4-f71d0ecba021`, + { + headers: { + 'Content-Type': 'application/json', + }, + }, + ); + + return data.data.data; +} diff --git a/src/Detail/components/BookInfoBox/index.tsx b/src/Detail/components/BookInfoBox/index.tsx index 4fcaea64..348ac5bb 100644 --- a/src/Detail/components/BookInfoBox/index.tsx +++ b/src/Detail/components/BookInfoBox/index.tsx @@ -2,47 +2,47 @@ import { IcCrown, IcDate } from '../../../assets'; import * as S from './BookInfoBox.style'; interface BookInfoBoxProps { - profileImg: string; - date: string; - nickname: string; + favoriteImage: string; + bookDate: string; + bookNickname: string; title: string; - content: string; - backgroundColor: number; + description: string; + bookBackgroundColor: number; } function BookInfoBox({ - profileImg, - date, - nickname, + favoriteImage, + bookDate, + bookNickname, title, - content, - backgroundColor, + description, + bookBackgroundColor, }: BookInfoBoxProps) { return ( - + - + - - {date} + + {bookDate} - - {nickname} + + {bookNickname} - + {title} - - {content} + + {description} diff --git a/src/Detail/components/LecueNoteListContainer/LecueNoteListContainer.style.ts b/src/Detail/components/LecueNoteListContainer/LecueNoteListContainer.style.ts index 553b1ebb..24c569ab 100644 --- a/src/Detail/components/LecueNoteListContainer/LecueNoteListContainer.style.ts +++ b/src/Detail/components/LecueNoteListContainer/LecueNoteListContainer.style.ts @@ -13,12 +13,59 @@ export const LecueNoteListContainerWrapper = styled.div<{ return theme.colors.BG; } }}; + flex: 1; `; export const LecueNoteListViewWrapper = styled.div` display: flex; justify-content: center; + position: relative; width: 100%; `; + +export const StickerButton = styled.button` + position: fixed; + right: 2.057rem; + bottom: 9.8rem; + + width: 6.8rem; + height: 6.8rem; +`; + +export const WriteButton = styled.button` + position: fixed; + right: 2.057rem; + bottom: 2rem; + + width: 6.8rem; + height: 6.8rem; +`; + +export const ButtonWrapper = styled.div` + display: flex; + align-items: center; + flex-direction: column; + position: fixed; + bottom: 2rem; + + width: 92%; +`; + +export const AlertBanner = styled.div` + display: flex; + gap: 0.4rem; + justify-content: center; + + width: 90%; + padding: 1.1rem 2.35rem; + margin-bottom: 1rem; + + border-radius: 0.6rem; + background: ${({ theme }) => theme.colors.white}; + color: ${({ theme }) => theme.colors.key}; + + text-align: center; + ${({ theme }) => theme.fonts.Caption2_SB_12}; +`; diff --git a/src/Detail/components/LecueNoteListContainer/index.tsx b/src/Detail/components/LecueNoteListContainer/index.tsx index a06b4ccf..5ad8f9c1 100644 --- a/src/Detail/components/LecueNoteListContainer/index.tsx +++ b/src/Detail/components/LecueNoteListContainer/index.tsx @@ -1,33 +1,98 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; +import { DraggableData, DraggableEvent } from 'react-draggable'; +import { useLocation, useNavigate } from 'react-router-dom'; +import { + BtnFloatingSticker, + BtnFloatingStickerOrange, + BtnFloatingWrite, + BtnFloatingWriteOrange, + IcCaution, +} from '../../../assets'; +import Button from '../../../components/common/Button'; +import { NoteType, postedStickerType } from '../../type/lecueBookType'; import LecueNoteListHeader from '../LecueNoteLIstHeader'; import LinearView from '../LinearView'; import ZigZagView from '../ZigZagView'; import * as S from './LecueNoteListContainer.style'; -interface Note { - noteId: number; - renderType: number; - content: string; - noteDate: string; - noteNickname: string; - noteTextColor: number; - noteBackgroundColor: number; - noteBackgroundImage: string; -} - interface LecueNoteListContainerProps { noteNum: number; backgroundColor: number; - noteList: Note[]; + noteList: NoteType[]; + postedStickerList: postedStickerType[]; } function LecueNoteListContainer({ noteNum, backgroundColor, noteList, + postedStickerList, }: LecueNoteListContainerProps) { + //hooks + const location = useLocation(); + const navigate = useNavigate(); + //storage + const storedValue = sessionStorage.getItem('scrollPosition'); + const savedScrollPosition = + storedValue !== null ? parseInt(storedValue, 10) : 0; + //state const [isZigZagView, setIsZigZagView] = useState(true); + const [isEditable, setIsEditable] = useState(true); + const [stickerState, setStickerState] = useState({ + postedStickerId: 0, + stickerImage: '', + positionX: 0, + positionY: savedScrollPosition, + }); + + const { state } = location; + + useEffect(() => { + // editable 상태 변경 + if (state) { + window.scrollTo(0, savedScrollPosition); + const { stickerId, stickerImage } = state.sticker; + setStickerState((prev) => ({ + ...prev, + postedStickerId: stickerId, + stickerImage: stickerImage, + })); + } else { + // editable 상태 변경 + setIsEditable(false); + navigate('/lecue-book'); + } + }, [state]); + + // 스티커 위치 값 저장 + const handleDrag = (_e: DraggableEvent, ui: DraggableData) => { + const { positionX, positionY } = stickerState; + setStickerState((prev) => ({ + ...prev, + positionX: positionX + ui.deltaX, + positionY: positionY + ui.deltaY, + })); + }; + + const handleClickStickerButton = () => { + sessionStorage.setItem('scrollPosition', window.scrollY.toString()); + + setIsEditable(true); + + navigate('/sticker-pack'); + }; + + const handleClickWriteButton = () => { + alert('WriteBtn'); + }; + + const handleClickDone = () => { + setIsEditable(true); + sessionStorage.removeItem('scrollPosition'); + navigate('/lecue-book'); + }; + return ( {isZigZagView ? ( - + ) : ( )} + + {!isEditable && ( + <> + + {backgroundColor === 0 ? ( + + ) : ( + + )} + + + {backgroundColor === 0 ? ( + + ) : ( + + )} + + + )} + + {isEditable && ( + <> + + + + 스티커는 한 번 붙이면 수정/삭제할 수 없습니다 + + + + + )} ); } diff --git a/src/Detail/components/LinearView/index.tsx b/src/Detail/components/LinearView/index.tsx index e5d1c02a..298b3426 100644 --- a/src/Detail/components/LinearView/index.tsx +++ b/src/Detail/components/LinearView/index.tsx @@ -1,19 +1,9 @@ +import { NoteType } from '../../type/lecueBookType'; import BigLecueNote from '../BigLecueNote'; import * as S from './LinearView.style'; -interface Note { - noteId: number; - renderType: number; - content: string; - noteDate: string; - noteNickname: string; - noteTextColor: number; - noteBackgroundColor: number; - noteBackgroundImage: string; -} - interface LinearViewProps { - noteList: Note[]; + noteList: NoteType[]; } function LinearView({ noteList }: LinearViewProps) { diff --git a/src/Detail/components/ZigZagView/ZigZagView.style.ts b/src/Detail/components/ZigZagView/ZigZagView.style.ts index 07f3f26d..57031213 100644 --- a/src/Detail/components/ZigZagView/ZigZagView.style.ts +++ b/src/Detail/components/ZigZagView/ZigZagView.style.ts @@ -3,6 +3,7 @@ import styled from '@emotion/styled'; export const ZigZagViewWrapper = styled.div` display: grid; grid-template-columns: repeat(2, 1fr); + position: relative; width: 34.2rem; padding: 0.4rem 0 2rem; @@ -12,3 +13,21 @@ export const LecueNoteContainer = styled.div` width: 100%; height: 20.6rem; `; + +export const StickerContainer = styled.div` + position: absolute; + + width: 100%; + height: 100%; +`; + +export const Sticker = styled.div<{ stickerImage: string }>` + background-image: ${({ stickerImage }) => `url(${stickerImage})`}; + + width: 10rem; + height: 10rem; + background-repeat: no-repeat; + + background-position: center; + object-fit: cover; +`; diff --git a/src/Detail/components/ZigZagView/index.tsx b/src/Detail/components/ZigZagView/index.tsx index 61cb8158..ad09b933 100644 --- a/src/Detail/components/ZigZagView/index.tsx +++ b/src/Detail/components/ZigZagView/index.tsx @@ -1,21 +1,27 @@ +import { useRef } from 'react'; +import Draggable, { DraggableData, DraggableEvent } from 'react-draggable'; + +import { NoteType, postedStickerType } from '../../type/lecueBookType'; import SmallLecueNote from '../SmallLecueNote'; import * as S from './ZigZagView.style'; -interface Note { - noteId: number; - renderType: number; - content: string; - noteDate: string; - noteNickname: string; - noteBackgroundColor: number; - noteBackgroundImage: string; -} - interface ZigZagViewProps { - noteList: Note[]; + noteList: NoteType[]; + handleDrag: (e: DraggableEvent, ui: DraggableData) => void; + stickerState: postedStickerType; + isEditable: boolean; + postedStickerList: postedStickerType[]; } -function ZigZagView({ noteList }: ZigZagViewProps) { +function ZigZagView({ + noteList, + handleDrag, + stickerState, + isEditable, + postedStickerList, +}: ZigZagViewProps) { + const nodeRef = useRef(null); + return ( {noteList.map((note) => ( @@ -23,6 +29,34 @@ function ZigZagView({ noteList }: ZigZagViewProps) { ))} + {isEditable ? ( + + + + + + ) : ( + + {postedStickerList.map((data) => ( + false} + > + + + ))} + + )} ); } diff --git a/src/Detail/hooks/useGetBookDetail.ts b/src/Detail/hooks/useGetBookDetail.ts new file mode 100644 index 00000000..c4d6158f --- /dev/null +++ b/src/Detail/hooks/useGetBookDetail.ts @@ -0,0 +1,17 @@ +import { useQuery } from 'react-query'; + +import { getBookDetail } from '../api/getBookDetail'; + +export default function useGetBookDetail() { + const { data: bookDetail } = useQuery( + ['useGetBookDetail'], + () => getBookDetail(), + { + onError: () => { + console.error; + }, + }, + ); + + return { bookDetail }; +} diff --git a/src/Detail/page/DetailPage/DetailPage.style.ts b/src/Detail/page/DetailPage/DetailPage.style.ts index a1f6c1ac..628c4a79 100644 --- a/src/Detail/page/DetailPage/DetailPage.style.ts +++ b/src/Detail/page/DetailPage/DetailPage.style.ts @@ -16,21 +16,3 @@ export const DetailPageBodyWrapper = styled.div` export const LecueBookContainer = styled.div` margin-top: 4.4rem; `; - -export const StickerButton = styled.button` - position: fixed; - right: 2.057rem; - bottom: 9.8rem; - - width: 6.8rem; - height: 6.8rem; -`; - -export const WriteButton = styled.button` - position: fixed; - right: 2.057rem; - bottom: 2rem; - - width: 6.8rem; - height: 6.8rem; -`; diff --git a/src/Detail/page/DetailPage/index.tsx b/src/Detail/page/DetailPage/index.tsx index 5232b4e4..3867bb01 100644 --- a/src/Detail/page/DetailPage/index.tsx +++ b/src/Detail/page/DetailPage/index.tsx @@ -1,140 +1,32 @@ -import { - BtnFloatingSticker, - BtnFloatingStickerOrange, - BtnFloatingWrite, - BtnFloatingWriteOrange, -} from '../../../assets'; import Header from '../../../components/common/Header'; import BookInfoBox from '../../components/BookInfoBox'; import LecueNoteListContainer from '../../components/LecueNoteListContainer'; import SlideBanner from '../../components/SlideBanner'; +import useGetBookDetail from '../../hooks/useGetBookDetail'; import * as S from './DetailPage.style'; -// test - -const testProp = { - name: 'LeoJ', - profileImg: - 'https://s3-alpha-sig.figma.com/img/db13/905b/40596e7ff9d7e2c5d23d2b59eaed1a7f?Expires=1705276800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=YdVtmax5JokofS88zzvQYV8dhDYNr5gALJf1s0eyCl9siaRilm9ZtXOtCSOe~UsH~~K5jEkb81jG3ccCA9FJ25BvUgR9K388K7h90OcCHmn-Wo4enHTIV85J2U2yIiOqh8IDoKNxG9H2hHxKVBU8GzdNitXCkUHtAaxTZRN4taiMZkVFyrFCEw-04VBKywXmAAOd3EaWJ0rJgKqecBpOKnB6DT6HgHlX3wxWhHsQI1KKqueJmXLhT4n-AxWCVALVJDdoT3VvB9-AsecG5C6og89535kPkOmVxUhwhQunmAmWYev0bPDhaSQpVDUwyVDUHgVUmuENYB4Y017o5RjiFA__', - date: '2024.01.25', - nickname: '큐야', - title: '첫 예능 라디오스타 축하해!', - content: - '우리만의 스타 레오제이 !! 3년만에 첫 예능이자 라디오스타 출연 넘 축하해~!! 앞으로 계속 이렇게 우리 옆에 있어줘! 항상 응원할게! 어그래그래어엉', - noteNum: 123123243, - backgroundColor: 1, - noteList: [ - { - noteId: 1, - renderType: 1, - content: - '야야야양야야야양야양 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에야야야양야야야양야양 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에야야야양야야야양야양 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에야야야양야야야양야양 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에야야야양야야야양야양 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에야야야양야야야양야양 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에야야야양야야야양야양 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에야야야양야야야양야양 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에야야야양야야야양야양 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에야야야양야야야양야양 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에', - noteDate: '2024. 01. 09', - noteNickname: '웹팟이미래다크크', - noteTextColor: 0, - noteBackgroundColor: -1, - noteBackgroundImage: - 'https://lequu-server-bucket.s3.ap-northeast-2.amazonaws.com/notes/background_image/469456ec-5894-4014-8b90-332d453217ba.jpg', - }, - { - noteId: 2, - renderType: 2, - content: '야야야양야야야양야양 다음에 웨비고?', - noteDate: '2024. 01. 09', - noteNickname: '웹팟이미래다크크', - noteTextColor: 1, - noteBackgroundColor: -1, - noteBackgroundImage: - 'https://lequu-server-bucket.s3.ap-northeast-2.amazonaws.com/notes/background_image/912ac7e2-672a-4f26-b115-b90cda4d7cc3.jpg', - }, - { - noteId: 3, - renderType: 3, - content: - '야야야양야야야양야양 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에', - noteDate: '2024. 01. 09', - noteNickname: '웹팟이미래다크크', - noteTextColor: 0, - noteBackgroundColor: -1, - noteBackgroundImage: - 'https://lequu-server-bucket.s3.ap-northeast-2.amazonaws.com/notes/background_image/676c2ca3-f868-423f-8000-a0bcb67dc797.jpg', - }, - { - noteId: 4, - renderType: 4, - content: - '야야야양야야야양야양 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에', - noteDate: '2024. 01. 09', - noteNickname: '웹팟이미래다크크', - noteTextColor: 1, - noteBackgroundColor: 4, - noteBackgroundImage: '', - }, - { - noteId: 5, - renderType: 5, - content: - '야야야양야야야양야양 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에', - noteDate: '2024. 01. 09', - noteNickname: '웹팟이미래다크크', - noteTextColor: 0, - noteBackgroundColor: -1, - noteBackgroundImage: - 'https://lequu-server-bucket.s3.ap-northeast-2.amazonaws.com/notes/background_image/676c2ca3-f868-423f-8000-a0bcb67dc797.jpg', - }, - { - noteId: 6, - renderType: 6, - content: - '야야야양야야야양야양 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에 웨비고? 다음에', - noteDate: '2024. 01. 09', - noteNickname: '웹팟이미래다크크', - noteTextColor: 1, - noteBackgroundColor: -1, - noteBackgroundImage: - 'https://lequu-server-bucket.s3.ap-northeast-2.amazonaws.com/notes/background_image/469456ec-5894-4014-8b90-332d453217ba.jpg', - }, - ], -}; - function DetailPage() { - const handleClickStickerButton = () => { - // 스티커 페이지 이동 - }; - - const handleClickWriteButton = () => { - // 레큐노트 작성 페이지 이동 - }; + const { bookDetail } = useGetBookDetail(); - return ( + return bookDetail ? ( -
+
- + - + - - {testProp.backgroundColor === 0 ? ( - - ) : ( - - )} - - - {testProp.backgroundColor === 0 ? ( - - ) : ( - - )} - + ) : ( + //TODO 에러페이지로 route +
uuid가 틀려서 아무것도 안보임
); } diff --git a/src/Detail/type/lecueBookType.ts b/src/Detail/type/lecueBookType.ts new file mode 100644 index 00000000..a5ab7a7b --- /dev/null +++ b/src/Detail/type/lecueBookType.ts @@ -0,0 +1,17 @@ +export interface postedStickerType { + postedStickerId: number; + stickerImage: string; + positionX: number; + positionY: number; +} + +export interface NoteType { + noteId: number; + renderType: number; + content: string; + noteDate: string; + noteNickname: string; + noteTextColor: number; + noteBackgroundColor: number; + noteBackgroundImage: string; +} diff --git a/src/Router.tsx b/src/Router.tsx index dde1771e..f10530a3 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -7,6 +7,7 @@ import Login from './Login/page'; import Register from './Register/page'; import SelectBookPage from './SelectBook/page/SelectBookPage'; import SplashPage from './Splash/page/SplashPage'; +import StickerAttach from './StickerAttach/page'; import StickerPack from './StickerPack/page/StickerPack'; import TargetPage from './Target/page/TargetPage'; @@ -22,6 +23,7 @@ function Router() { } /> } /> } /> + } /> } /> diff --git a/src/Detail/components/.gitkeep b/src/StickerAttach/components/.gitkeep similarity index 100% rename from src/Detail/components/.gitkeep rename to src/StickerAttach/components/.gitkeep diff --git a/src/Detail/hooks/.gitkeep b/src/StickerAttach/constants/.gitkeep similarity index 100% rename from src/Detail/hooks/.gitkeep rename to src/StickerAttach/constants/.gitkeep diff --git a/src/StickerAttach/hooks/.gitkeep b/src/StickerAttach/hooks/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/src/StickerAttach/page/StickerAttach.style.ts b/src/StickerAttach/page/StickerAttach.style.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/StickerAttach/page/index.tsx b/src/StickerAttach/page/index.tsx new file mode 100644 index 00000000..adf45d9e --- /dev/null +++ b/src/StickerAttach/page/index.tsx @@ -0,0 +1,11 @@ +import DetailPage from '../../Detail/page/DetailPage'; + +function StickerAttach() { + return ( + <> + + + ); +} + +export default StickerAttach; diff --git a/src/StickerPack/page/StickerPack/index.tsx b/src/StickerPack/page/StickerPack/index.tsx index 5e45aed0..9a53fc9f 100644 --- a/src/StickerPack/page/StickerPack/index.tsx +++ b/src/StickerPack/page/StickerPack/index.tsx @@ -26,7 +26,9 @@ function StickerPack() { }; const handleClickDone = () => { - navigate('/sticker-attach', { state: { sticker: selectedStickerData } }); + navigate('/sticker-attach', { + state: { sticker: selectedStickerData }, + }); }; return ( diff --git a/src/assets/icon/ic_caution.svg b/src/assets/icon/ic_caution.svg new file mode 100644 index 00000000..d4a07623 --- /dev/null +++ b/src/assets/icon/ic_caution.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/index.ts b/src/assets/index.ts index 788fb95c..27350661 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -9,6 +9,7 @@ import BtnKakaologin from './button/btn_kakaologin.svg?react'; import IcArrowLeftBlack from './icon/ic_arrow_left_black.svg?react'; import IcArrowLeftWhite from './icon/ic_arrow_left_white.svg?react'; import IcCamera from './icon/ic_camera.svg?react'; +import IcCaution from './icon/ic_caution.svg?react'; import IcCheck from './icon/ic_check.svg?react'; import IcCrown from './icon/ic_crown.svg?react'; import IcDate from './icon/ic_date.svg?react'; @@ -49,6 +50,7 @@ export { IcArrowLeftBlack, IcArrowLeftWhite, IcCamera, + IcCaution, IcCheck, IcCrown, IcDate, diff --git a/yarn.lock b/yarn.lock index 2a0abfc3..da146088 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1200,6 +1200,11 @@ chalk@^4.0.0: ansi-styles "^4.1.0" supports-color "^7.1.0" +clsx@^1.1.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" + integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== + color-convert@^1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" @@ -2800,6 +2805,14 @@ react-dom@^18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" +react-draggable@^4.4.6: + version "4.4.6" + resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.6.tgz#63343ee945770881ca1256a5b6fa5c9f5983fe1e" + integrity sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw== + dependencies: + clsx "^1.1.1" + prop-types "^15.8.1" + react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"