diff --git a/package.json b/package.json index ef5f0de..5cc5415 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "next": "14.1.0", "react": "^18", "react-dom": "^18", + "react-youtube": "^10.1.0", "styled-components": "^6.1.8" }, "devDependencies": { diff --git a/public/main/Cross.svg b/public/main/Cross.svg new file mode 100644 index 0000000..5c0761a --- /dev/null +++ b/public/main/Cross.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/main/intro1.png b/public/main/intro1.png new file mode 100644 index 0000000..e8fbba5 Binary files /dev/null and b/public/main/intro1.png differ diff --git a/public/main/intro2.png b/public/main/intro2.png new file mode 100644 index 0000000..8b4f481 Binary files /dev/null and b/public/main/intro2.png differ diff --git a/public/main/intro3.png b/public/main/intro3.png new file mode 100644 index 0000000..3510b81 Binary files /dev/null and b/public/main/intro3.png differ diff --git a/public/main/intro4.png b/public/main/intro4.png new file mode 100644 index 0000000..f5d25ba Binary files /dev/null and b/public/main/intro4.png differ diff --git a/public/main/intro5.png b/public/main/intro5.png new file mode 100644 index 0000000..a770a27 Binary files /dev/null and b/public/main/intro5.png differ diff --git a/public/main/intro6.png b/public/main/intro6.png new file mode 100644 index 0000000..066664a Binary files /dev/null and b/public/main/intro6.png differ diff --git a/public/main/introBg.png b/public/main/introBg.png new file mode 100644 index 0000000..9bb591d Binary files /dev/null and b/public/main/introBg.png differ diff --git a/src/app/main/page.tsx b/src/app/main/page.tsx index 19e9f10..c68bee3 100644 --- a/src/app/main/page.tsx +++ b/src/app/main/page.tsx @@ -1,8 +1,4 @@ -import ContentBlock from "@/components/main/ContentBlock"; -import CopyBlock from "@/components/main/CopyBlock"; -import Intro from "@/components/main/Intro"; -import StoryBlock from "@/components/main/StoryBlock"; -import { mainPageData } from "@/lib/data"; +import MainPage from "@/components/main/MainPage"; import { Metadata } from "next"; export const metadata: Metadata = { @@ -10,24 +6,6 @@ export const metadata: Metadata = { description: "Kobaco Ai analysis System for Ad Creation", }; -const MainPage = async () => { - return ( - <> - - - - - - - ); -}; +const Main = async () => ; -export default MainPage; +export default Main; diff --git a/src/app/page.tsx b/src/app/page.tsx index d2c63a4..aed3895 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,4 +1,5 @@ import Image from "next/image"; +import Link from "next/link"; import styles from "./page.module.css"; export default function Home() { @@ -90,6 +91,7 @@ export default function Home() {

+ main page link ); } diff --git a/src/components/common/ButtonStyle.tsx b/src/components/common/ButtonStyle.tsx new file mode 100644 index 0000000..5aa4520 --- /dev/null +++ b/src/components/common/ButtonStyle.tsx @@ -0,0 +1,23 @@ +import { colors } from "@/styles/theme"; +import { motion } from "framer-motion"; +import styled from "styled-components"; + +export const Button = styled(motion.button)<{ + bgColor: string; + textColor: string; +}>` + display: inline-flex; + padding: 0.75rem 2.5rem; + justify-content: center; + align-items: center; + gap: 0.625rem; + border-radius: 2.1875rem; + border: 1px solid ${colors.main}; + background: ${(props) => props.bgColor}; + color: ${(props) => props.textColor}; + font-size: 0.875rem; + font-style: normal; + font-weight: 500; + line-height: normal; + cursor: pointer; +`; diff --git a/src/components/common/ModalStyle.tsx b/src/components/common/ModalStyle.tsx new file mode 100644 index 0000000..6739e8b --- /dev/null +++ b/src/components/common/ModalStyle.tsx @@ -0,0 +1,31 @@ +import styled from "styled-components"; + +// 모달 창 뒷배경 +export const SearchModalBox = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.4); + display: flex; + justify-content: center; + align-items: center; + z-index: 100; +`; + +// 모달 스타일 +export const SearchModalContent = styled.div<{ + width: string; + height: string; +}>` + padding: 1.62rem; + width: ${(props) => props.width}; + height: ${(props) => props.height}; + flex-shrink: 0; + border-radius: 0.875rem; + background: #1e1e1e; + display: flex; + flex-direction: column; + z-index: 100; +`; diff --git a/src/components/main/ContentBlock.tsx b/src/components/main/ContentBlock.tsx index 0d8f239..bb0d3f6 100644 --- a/src/components/main/ContentBlock.tsx +++ b/src/components/main/ContentBlock.tsx @@ -18,6 +18,8 @@ interface Card { } export default function ContentBlock(props: ContentBlockProps) { + const { title, description, card } = props; + const Variants = { default: { scale: 1, @@ -30,28 +32,27 @@ export default function ContentBlock(props: ContentBlockProps) { }, }, }; + return ( - <> - - {props.title} - {props.description} - - {props.card.map((v, i) => ( - - - {`card-image.${i}`} - - {v.title} - {v.description} - - ))} - - - + + {title} + {description} + + {card.map((v, i) => ( + + + {`card-image.${i}`} + + {v.title} + {v.description} + + ))} + + ); } const Layout = styled.div` @@ -105,6 +106,7 @@ const CardWrapper = styled(motion.div)` ), #262525; backdrop-filter: blur(2px); + cursor: pointer; `; const ImageWrapper = styled.div` position: relative; diff --git a/src/components/main/CopyBlock.tsx b/src/components/main/CopyBlock.tsx index ec22956..aa94877 100644 --- a/src/components/main/CopyBlock.tsx +++ b/src/components/main/CopyBlock.tsx @@ -5,6 +5,7 @@ import { motion } from "framer-motion"; import Image from "next/image"; import { useState } from "react"; import styled from "styled-components"; +import { Button } from "../common/ButtonStyle"; export default function CopyBlock() { const [active, setActive] = useState(1); @@ -35,6 +36,19 @@ export default function CopyBlock() { }, ]; + const Variants = { + default: { + scale: 1, + }, + scaleUp: { + scale: 1.1, + transition: { + duration: 0.2, + delay: 0, + }, + }, + }; + return ( <> @@ -45,10 +59,22 @@ export default function CopyBlock() { } - - @@ -144,20 +170,6 @@ const ButtonWrapper = styled.div` gap: 1rem; margin-top: 2rem; `; -const Button = styled.button<{ bgColor: string; textColor: string }>` - padding: 0.75rem 2.5rem; - justify-content: center; - align-items: center; - gap: 0.625rem; - border-radius: 2.1875rem; - border: 1px solid ${colors.main}; - background: ${(props) => props.bgColor}; - color: ${(props) => props.textColor}; - font-size: 0.875rem; - font-style: normal; - font-weight: 500; - line-height: normal; -`; const CardBlock = styled.div` display: inline-flex; gap: 5rem; diff --git a/src/components/main/Intro.tsx b/src/components/main/Intro.tsx index c5bb7e2..d733979 100644 --- a/src/components/main/Intro.tsx +++ b/src/components/main/Intro.tsx @@ -4,8 +4,16 @@ import { colors } from "@/styles/theme"; import { motion } from "framer-motion"; import Image from "next/image"; import styled from "styled-components"; +import { Button } from "../common/ButtonStyle"; +import { useState } from "react"; +import IntroModal from "./IntroModal"; export default function Intro() { + // 모달 버튼 클릭 유무를 저장할 state + const [showModal, setShowModal] = useState(false); + // 버튼 클릭시 모달 버튼 클릭 유무를 설정하는 state 함수 + const clickModal = () => setShowModal(!showModal); + const Variants = { offscreen: { y: +50, @@ -19,57 +27,148 @@ export default function Intro() { delay: 0.1, }, }, + default: { + scale: 1, + }, + scaleUp: { + scale: 1.2, + transition: { + duration: 0.2, + delay: 0, + }, + }, }; return ( - <> - - + + + + + + + + + + + AI analysis System for AD Creation + + + 어려웠던 광고제작, + AI 기반 광고 + + + 창작 지원서비스 + AiSAC + 이 도와드려요 ! + + - - AI analysis System for AD Creation - - - 어려웠던 광고제작, - AI 기반 광고 - - - 창작 지원서비스 - AiSAC - 이 도와드려요 ! - - - {`여기에 짦은 설명이 들어가면 좋을 것 같네요! 여기에 짦은 설명이 들어가면 좋을 것 같네요! - 여기에 짦은 설명이 들어가면 좋을 것 같네요!`} - - - 아이작 소개 영상 바로가기 - right-arrow - - - - + 아이작 소개 영상 바로가기 + right-arrow + + + 도움이 필요하신가요? + + {showModal && } + + ); } const Layout = styled.div` - margin-top: 12rem; + margin-top: 122px; margin-bottom: 16rem; + display: flex; + flex-direction: column; + align-items: center; + position: relative; +`; +const IconBack = styled.div` + position: absolute; + width: 100%; + height: 40rem; + padding: 0; +`; +const Icon1 = styled(Image)` + position: absolute; + left: 0; + top: 0; +`; +const Icon2 = styled(Image)` + position: absolute; + left: 25%; + top: 0; +`; +const Icon3 = styled(Image)` + position: absolute; + right: 3%; + top: -20%; +`; +const Icon4 = styled(Image)` + position: absolute; + left: 10%; + bottom: 0%; +`; +const Icon5 = styled(Image)` + position: absolute; + right: 20%; + bottom: 30%; +`; +const Icon6 = styled(Image)` + position: absolute; + right: 0; + bottom: 0; `; const Contents = styled(motion.div)` display: flex; flex-direction: column; - width: 100%; justify-content: center; align-items: center; + background-image: url("main/introBg.png"); + background-size: contain; + width: 77.125rem; + height: 37.825rem; `; const ButtonWrapper = styled.div` height: 2.875rem; @@ -147,28 +246,20 @@ const Title3 = styled.span` const IntroMiniTextBlock = styled.div` color: ${colors.greyTypeMain}; text-align: center; - font-family: "Noto Sans KR"; - font-size: 1.25rem; + font-size: 0.875rem; font-style: normal; - font-weight: 400; - line-height: 2.875rem; - margin-top: 1.5rem; - margin-bottom: 4rem; - white-space: pre-line; + font-weight: 500; + line-height: normal; + text-decoration-line: underline; + z-index: 1; + cursor: pointer; `; -const LinkButtonWrapper = styled.div` - display: inline-flex; - padding: 1rem 2.125rem 1rem 2.5rem; - justify-content: center; - align-items: center; - gap: 0.25rem; - border-radius: 3.6875rem; - border: 0.5px solid ${colors.main}; - background: ${colors.main}; - - color: ${colors.white}; +const LinkButtonWrapper = styled(Button)` font-size: 1rem; font-style: normal; font-weight: 500; line-height: normal; + margin: 3.75rem 0; + z-index: 1; + padding: 1rem 2.5rem; `; diff --git a/src/components/main/IntroModal.tsx b/src/components/main/IntroModal.tsx new file mode 100644 index 0000000..5510f73 --- /dev/null +++ b/src/components/main/IntroModal.tsx @@ -0,0 +1,111 @@ +import { useState } from "react"; +import { SearchModalBox, SearchModalContent } from "../common/ModalStyle"; +import styled from "styled-components"; +import Image from "next/image"; +import { Button } from "../common/ButtonStyle"; +import { colors } from "@/styles/theme"; + +const IntroModal = (props) => { + // 전달받은 state 함수 + const { clickModal } = props; + + return ( + // 뒷배경을 클릭하면 모달을 나갈 수 있게 해야하므로 뒷 배경 onClick에 state함수를 넣는다. + + e.stopPropagation()} + > + + + close + + 광고 제작이 처음이신가요? + + { + "광고는 아래와 같은 순서로 만들어져요.\n광고 아카이브를 통해 참고영상부터 빠르게 찾아보세요!" + } + + + 광고 아카이브 + right-arrow + 트렌드 분석 + right-arrow + 광고카피 제작 + right-arrow + 스토리보드 제작 + + + + + ); +}; + +export default IntroModal; + +const ModalContent = styled.div` + position: relative; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + padding: 5rem 0; + justify-content: center; + align-items: center; +`; +const CloseButton = styled.button` + position: absolute; + top: 0; + right: 0; + display: flex; + width: 2.125rem; + height: 2.125rem; + padding: 0.625rem; + justify-content: center; + align-items: center; + flex-shrink: 0; + border: 0px; + border-radius: 6.25rem; + background: #343434; + cursor: pointer; +`; +const Title = styled.h1` + color: #efefef; + text-align: center; + font-size: 1.375rem; + font-style: normal; + font-weight: 700; + line-height: normal; + margin-bottom: 1rem; +`; +const SubTitle = styled.h1` + color: #b4b4b4; + text-align: center; + font-size: 1rem; + font-style: normal; + font-weight: 400; + line-height: 1.875rem; + white-space: pre-line; +`; +const BottomButton = styled(Button)` + padding: 0.625rem 1.5rem; + gap: 0.125rem; + font-size: 1rem; + margin-top: 2.5rem; +`; diff --git a/src/components/main/MainPage.tsx b/src/components/main/MainPage.tsx new file mode 100644 index 0000000..199e342 --- /dev/null +++ b/src/components/main/MainPage.tsx @@ -0,0 +1,29 @@ +"use client"; + +import ContentBlock from "@/components/main/ContentBlock"; +import CopyBlock from "@/components/main/CopyBlock"; +import Intro from "@/components/main/Intro"; +import StoryBlock from "@/components/main/StoryBlock"; +import { mainPageData } from "@/lib/data"; + +const MainPage = () => { + return ( + <> + + + + + + + ); +}; + +export default MainPage; diff --git a/src/components/main/StoryBlock.tsx b/src/components/main/StoryBlock.tsx index d340972..bea8494 100644 --- a/src/components/main/StoryBlock.tsx +++ b/src/components/main/StoryBlock.tsx @@ -4,70 +4,107 @@ import { storyBoardData } from "@/lib/data"; import { colors } from "@/styles/theme"; import { motion } from "framer-motion"; import Image from "next/image"; -import { useState } from "react"; import styled from "styled-components"; +import { Button } from "../common/ButtonStyle"; +import { useState } from "react"; +import StoryModal from "./StoryModal"; export default function StoryBlock() { + // 모달 버튼 클릭 유무를 저장할 state + const [showModal, setShowModal] = useState(false); + // 버튼 클릭시 모달 버튼 클릭 유무를 설정하는 state 함수 + const clickModal = () => setShowModal(!showModal); + + const Variants = { + default: { + scale: 1, + }, + scaleUp: { + scale: 1.1, + transition: { + duration: 0.2, + delay: 0, + }, + }, + }; return ( - <> - - 스토리보드 제작 - - { - "텍스트를 입력하면 Ai가 맞춤형 이미지를 생성해주고,\n외부 오픈소스를 넣거나 직접 그림을 그려 스토리보드를 만들 수 있어요." - } - - - - - - - {storyBoardData[0].map((v, i) => ( - - - - {`storyboard-image.${i}`} - - - - - {v.writer} | {v.name} - - - - ))} - - - {storyBoardData[1].map((v, i) => ( - - - - {`storyboard-image.${i}`} - - - - - {v.writer} | {v.name} - - - - ))} - - - 더 많은 스토리보드 보기 - right-arrow - - - + + 스토리보드 제작 + + { + "텍스트를 입력하면 Ai가 맞춤형 이미지를 생성해주고,\n외부 오픈소스를 넣거나 직접 그림을 그려 스토리보드를 만들 수 있어요." + } + + + + + {showModal && } + + + {storyBoardData[0].map((v, i) => ( + + + + {`storyboard-image.${i}`} + + + + + {v.writer} | {v.name} + + + + ))} + + + {storyBoardData[1].map((v, i) => ( + + + + {`storyboard-image.${i}`} + + + + + {v.writer} | {v.name} + + + + ))} + + + 더 많은 스토리보드 보기 + right-arrow + + ); } const Layout = styled.div` @@ -100,20 +137,6 @@ const ButtonWrapper = styled.div` display: inline-flex; gap: 1rem; margin-top: 2rem; -`; -const Button = styled.button<{ bgColor: string; textColor: string }>` - padding: 0.75rem 2.5rem; - justify-content: center; - align-items: center; - gap: 0.625rem; - border-radius: 2.1875rem; - border: 1px solid ${colors.main}; - background: ${(props) => props.bgColor}; - color: ${(props) => props.textColor}; - font-size: 0.875rem; - font-style: normal; - font-weight: 500; - line-height: normal; margin-bottom: 6.25rem; `; const CardBlock = styled.div` @@ -156,18 +179,7 @@ const ImageWrapper = styled.div` height: 100%; margin-bottom: 0.75rem; `; -const LinkButtonWrapper = styled.div` - display: inline-flex; - padding: 0.75rem 2.125rem 0.75rem 2.5rem; - justify-content: center; - align-items: center; - gap: 0.625rem; - border-radius: 2.1875rem; - background: #252525; - color: ${colors.greyTypeMain}; - font-size: 0.875rem; - font-style: normal; - font-weight: 500; - line-height: normal; - margin-top: 3.5rem; +const LinkButtonWrapper = styled(Button)` + border-color: #252525; + margin-top: 3rem; `; diff --git a/src/components/main/StoryModal.tsx b/src/components/main/StoryModal.tsx new file mode 100644 index 0000000..999ee85 --- /dev/null +++ b/src/components/main/StoryModal.tsx @@ -0,0 +1,86 @@ +import { useState } from "react"; +import { SearchModalBox, SearchModalContent } from "../common/ModalStyle"; +import styled from "styled-components"; +import Image from "next/image"; +import { Button } from "../common/ButtonStyle"; +import { colors } from "@/styles/theme"; +import { videoKey } from "@/constants/videoKey"; +import YouTube from "react-youtube"; + +const StoryModal = (props) => { + // 전달받은 state 함수 + const { clickModal } = props; + + return ( + // 뒷배경을 클릭하면 모달을 나갈 수 있게 해야하므로 뒷 배경 onClick에 state함수를 넣는다. + + e.stopPropagation()} + > + + + close + + 스토리보드 제작 이용 가이드 + { + e.target.stopVideo(0); + }} + /> + + + + ); +}; + +export default StoryModal; + +const ModalContent = styled.div` + position: relative; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + padding: 110px 0; + justify-content: center; + align-items: center; +`; +const CloseButton = styled.button` + position: absolute; + top: 0; + right: 0; + display: flex; + width: 2.125rem; + height: 2.125rem; + padding: 0.625rem; + justify-content: center; + align-items: center; + flex-shrink: 0; + border: 0px; + border-radius: 6.25rem; + background: #343434; + cursor: pointer; +`; +const Title = styled.h1` + color: ${colors.grey4}; + text-align: center; + font-family: "Noto Sans KR"; + font-size: 22px; + font-style: normal; + font-weight: 700; + line-height: normal; + margin-bottom: 38px; +`; diff --git a/src/constants/videoKey.ts b/src/constants/videoKey.ts new file mode 100644 index 0000000..4ce0a8b --- /dev/null +++ b/src/constants/videoKey.ts @@ -0,0 +1,2 @@ +// 스토리보드 이용가이드 영상 +export const videoKey = "XXx5-2Pi09I"; diff --git a/src/lib/data.ts b/src/lib/data.ts index 77c3ecf..2d2d132 100644 --- a/src/lib/data.ts +++ b/src/lib/data.ts @@ -1,4 +1,6 @@ -//************************************ 메인 페이지 *************************************/ +"use client"; + +// 메인페이지 export const mainPageData = [ { title: "광고 아카이브", diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 692013f..d17dd3d 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -14,6 +14,9 @@ export const colors = { white: "#ffffff", greyTypeMain: "#B4B4B4", background: "#1A1A1A", + grey1: "#7f7f7f", + grey3: "#cecece", + grey4: "#efefef", } as const; interface Font { diff --git a/yarn.lock b/yarn.lock index 2f1d760..ccdcc76 100644 --- a/yarn.lock +++ b/yarn.lock @@ -778,6 +778,13 @@ damerau-levenshtein@^1.0.8: resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7" integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA== +debug@^2.6.6: + version "2.6.9" + resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" + integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA== + dependencies: + ms "2.0.0" + debug@^3.2.7: version "3.2.7" resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a" @@ -1228,7 +1235,7 @@ esutils@^2.0.2: resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64" integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g== -fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: +fast-deep-equal@3.1.3, fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== @@ -1810,6 +1817,11 @@ levn@^0.4.1: prelude-ls "^1.2.1" type-check "~0.4.0" +load-script@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4" + integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA== + locate-path@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286" @@ -1883,6 +1895,11 @@ minimist@^1.2.0, minimist@^1.2.6: resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.0.4.tgz#dbce03740f50a4786ba994c1fb908844d27b038c" integrity sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ== +ms@2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8" + integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A== + ms@2.1.2: version "2.1.2" resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" @@ -2109,7 +2126,7 @@ prettier@3.2.5: resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368" integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A== -prop-types@^15.8.1: +prop-types@15.8.1, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -2141,6 +2158,15 @@ react-is@^16.13.1, react-is@^16.7.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-youtube@^10.1.0: + version "10.1.0" + resolved "https://registry.yarnpkg.com/react-youtube/-/react-youtube-10.1.0.tgz#7e5670c764f12eb408166e8eb438d788dc64e8b5" + integrity sha512-ZfGtcVpk0SSZtWCSTYOQKhfx5/1cfyEW1JN/mugGNfAxT3rmVJeMbGpA9+e78yG21ls5nc/5uZJETE3cm3knBg== + dependencies: + fast-deep-equal "3.1.3" + prop-types "15.8.1" + youtube-player "5.5.2" + react@^18: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" @@ -2315,6 +2341,11 @@ signal-exit@^4.0.1: resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04" integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw== +sister@^3.0.0: + version "3.0.2" + resolved "https://registry.yarnpkg.com/sister/-/sister-3.0.2.tgz#bb3e39f07b1f75bbe1945f29a27ff1e5a2f26be4" + integrity sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA== + slash@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634" @@ -2673,3 +2704,12 @@ yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== + +youtube-player@5.5.2: + version "5.5.2" + resolved "https://registry.yarnpkg.com/youtube-player/-/youtube-player-5.5.2.tgz#052b86b1eabe21ff331095ffffeae285fa7f7cb5" + integrity sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ== + dependencies: + debug "^2.6.6" + load-script "^1.0.0" + sister "^3.0.0"