From 1a3599837b37b11459a93ade199b5f433ce427fb Mon Sep 17 00:00:00 2001 From: gominzip Date: Sun, 9 Jun 2024 21:19:21 +0900 Subject: [PATCH 01/20] =?UTF-8?q?feat=20:=20favicon=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 34a3a12..e9579f4 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -11,9 +11,6 @@ export const metadata: Metadata = { authors: [{ name: '중하하 2기' }], creator: '중하하 2기', publisher: '중하하 2기', - icons: { - icon: '/img/icon.png', - }, keywords: ['중앙대학교', '멋쟁이 사자처럼', '멋사', '멋사 위키', '중앙대학교 멋사'], openGraph: { title: '멋사 중앙대 위키', @@ -33,6 +30,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) + From f7b8d6020463d7f8f8b7caf03e860557a7157d1b Mon Sep 17 00:00:00 2001 From: gominzip Date: Sun, 9 Jun 2024 21:19:54 +0900 Subject: [PATCH 02/20] =?UTF-8?q?chore=20:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?= =?UTF-8?q?=20=EC=95=88=EB=82=B4=EB=AC=B8=EA=B5=AC=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/login/GoogleLogin.tsx | 2 +- src/components/login/Login.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/login/GoogleLogin.tsx b/src/components/login/GoogleLogin.tsx index e5d9231..f0a99b1 100644 --- a/src/components/login/GoogleLogin.tsx +++ b/src/components/login/GoogleLogin.tsx @@ -48,7 +48,7 @@ const GoogleLogin = () => { } } catch (error) { // console.error('An error occurred during login:', error); - alert('likelion.org 계정으로만 로그인이 가능합니다. 다시 시도해주세요.'); + alert('로그인 과정에서 문제가 발생했습니다. 다시 시도해주세요.'); setTimeout(() => { route.push('/login'); }, 500); diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx index 292f66c..0cb5030 100644 --- a/src/components/login/Login.tsx +++ b/src/components/login/Login.tsx @@ -23,7 +23,7 @@ const Login = () => {
구글로 로그인하기
-
LIKE LION 계정으로 로그인이 가능합니다
+
기등록된 멋사 회원만 로그인이 가능합니다
 From 96ef577c8bdf1e045620afabf0af03b79b9f7397 Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Tue, 18 Jun 2024 02:16:08 +0900 Subject: [PATCH 03/20] =?UTF-8?q?chore:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EB=94=94=EB=A0=89=ED=86=A0=EB=A6=AC=20?= =?UTF-8?q?=EB=B0=8F=20=ED=8C=8C=EC=9D=BC=20=EB=B6=84=EB=A6=AC(#120)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/search/page.tsx | 6 +- .../search/AutoCompleteContainer.tsx | 63 ----------- src/components/search/SearchForm.tsx | 4 +- src/components/search/SearchFound.tsx | 104 ------------------ src/components/search/SearchHeadSection.tsx | 33 ------ src/components/search/SearchHeaderForm.tsx | 54 --------- src/components/search/SearchNotFound.tsx | 46 -------- src/components/search/SearchResult.tsx | 4 +- .../AutoCompleteContainer.styled.ts | 27 +++++ .../AutoCompleteContainer.tsx | 36 ++++++ .../SearchBodySection.styled.ts | 19 ++++ .../SearchBodySection.tsx | 35 ++---- .../search/searchFound/SearchFound.styled.ts | 62 +++++++++++ .../search/searchFound/SearchFound.tsx | 35 ++++++ .../search/searchFound/SearchFound.utils.ts | 9 ++ .../SearchHeaderForm.styled.ts | 26 +++++ .../searchHeaderForm/SearchHeaderForm.tsx | 30 +++++ .../SearchHeaderSection.styled.ts | 19 ++++ .../SearchHeaderSection.tsx | 15 +++ .../searchNotFound/SearchNotFound.styled.ts | 31 ++++++ .../search/searchNotFound/SearchNotFound.tsx | 16 +++ .../searchPageForm/SearchPageForm.styled.ts | 20 ++++ .../{ => searchPageForm}/SearchPageForm.tsx | 31 +----- 23 files changed, 366 insertions(+), 359 deletions(-) delete mode 100644 src/components/search/AutoCompleteContainer.tsx delete mode 100644 src/components/search/SearchFound.tsx delete mode 100644 src/components/search/SearchHeadSection.tsx delete mode 100644 src/components/search/SearchHeaderForm.tsx delete mode 100644 src/components/search/SearchNotFound.tsx create mode 100644 src/components/search/autoCompleteContainer/AutoCompleteContainer.styled.ts create mode 100644 src/components/search/autoCompleteContainer/AutoCompleteContainer.tsx create mode 100644 src/components/search/searchBodySection/SearchBodySection.styled.ts rename src/components/search/{ => searchBodySection}/SearchBodySection.tsx (66%) create mode 100644 src/components/search/searchFound/SearchFound.styled.ts create mode 100644 src/components/search/searchFound/SearchFound.tsx create mode 100644 src/components/search/searchFound/SearchFound.utils.ts create mode 100644 src/components/search/searchHeaderForm/SearchHeaderForm.styled.ts create mode 100644 src/components/search/searchHeaderForm/SearchHeaderForm.tsx create mode 100644 src/components/search/searchHeaderSection/SearchHeaderSection.styled.ts create mode 100644 src/components/search/searchHeaderSection/SearchHeaderSection.tsx create mode 100644 src/components/search/searchNotFound/SearchNotFound.styled.ts create mode 100644 src/components/search/searchNotFound/SearchNotFound.tsx create mode 100644 src/components/search/searchPageForm/SearchPageForm.styled.ts rename src/components/search/{ => searchPageForm}/SearchPageForm.tsx (69%) diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx index 6e7a947..28be5ec 100644 --- a/src/app/search/page.tsx +++ b/src/app/search/page.tsx @@ -1,10 +1,10 @@ -import SearchBodySection from '@/components/search/SearchBodySection'; -import SearchHeadSection from '@/components/search/SearchHeadSection'; +import SearchBodySection from '@/components/search/searchBodySection/SearchBodySection'; +import SearchHeaderSection from '@/components/search/searchHeaderSection/SearchHeaderSection'; const SearchPage = () => { return ( <> - + ); diff --git a/src/components/search/AutoCompleteContainer.tsx b/src/components/search/AutoCompleteContainer.tsx deleted file mode 100644 index 415084f..0000000 --- a/src/components/search/AutoCompleteContainer.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { useSearchAutoCompleteQuery } from '@/hooks/useSearchAutoCompleteQuery'; -import { useRouter } from 'next/navigation'; -import styled from 'styled-components'; - -interface AutoProps { - searchInput: string; -} - -const AutoCompleteContainer = ({ searchInput }: AutoProps) => { - const router = useRouter(); - const { data: dropdownList, isLoading } = useSearchAutoCompleteQuery(searchInput); - - if (isLoading) { - return ( - - 검색중... - - ); - } - - return ( - - {dropdownList && dropdownList.length > 0 ? ( - dropdownList.map((title, idx) => ( - router.push(`search/?search=${title}`)}> - {title} - - )) - ) : ( - 검색결과가 없습니다. - )} - - ); -}; - -const BoxWrapper = styled.div` - // position: absolute; - display: flex; - flex-direction: column; - width: 40vw; - background-color: white; - margin-left: 2%; - gap: 10px; - box-shadow: 2px 2px 2px black; - z-index: 1; -`; - -const ItemWrapper = styled.div` - padding: 15px; - font-size: 1.4rem; - cursor: pointer; - &:hover { - background-color: lightgrey; - } -`; - -const NoResultWrapper = styled.div` - padding: 15px; - font-size: 1.4rem; - box-shadow: 2px 2px 2px black; -`; - -export default AutoCompleteContainer; diff --git a/src/components/search/SearchForm.tsx b/src/components/search/SearchForm.tsx index d11d616..658c86b 100644 --- a/src/components/search/SearchForm.tsx +++ b/src/components/search/SearchForm.tsx @@ -1,5 +1,5 @@ -import SearchHeaderForm from './SearchHeaderForm'; -import SearchPageForm from './SearchPageForm'; +import SearchHeaderForm from './searchHeaderForm/SearchHeaderForm'; +import SearchPageForm from './searchPageForm/SearchPageForm'; interface SearchFormProps { type: string; diff --git a/src/components/search/SearchFound.tsx b/src/components/search/SearchFound.tsx deleted file mode 100644 index 62dc65a..0000000 --- a/src/components/search/SearchFound.tsx +++ /dev/null @@ -1,104 +0,0 @@ -'use client'; - -import { IGenerations } from '@/types/request'; -import type { SearchResult } from '@/types/search'; -import Image from 'next/image'; -import { useRouter } from 'next/navigation'; -import styled from 'styled-components'; - -const SearchFound = ({ searchResult }: { searchResult: SearchResult[] }) => { - const router = useRouter(); - - const handleClickSearchResult = (id: number) => { - const selectedDocTitle = searchResult.filter((result) => result.id === id)[0].title; - const encodedTitle = encodeURIComponent(selectedDocTitle); - router.push(`viewer?title=${encodedTitle}`); - }; - - return ( - - {searchResult.map((result) => ( - - - - - handleClickSearchResult(result.id)}> - {result.title} - {result.content} - {getGenerationFormat(result.generations)} - - - ))} - - ); -}; - -const getGenerationFormat = (generations: IGenerations[]) => { - const genFormat: string[] = []; - generations.forEach((data) => { - genFormat.push(data.generation); - }); - return genFormat.join(', '); -}; - -const SearchFoundWrapper = styled.div` - display: flex; - flex-direction: column; - align-items: center; - margin-top: 20px; - @media screen and (max-width: 540px) { - margin-left: 15rem; - } -`; - -const SearchResult = styled.div` - display: flex; - align-items: end; - justify-content: center; - gap: 20px; - margin: 30px; -`; - -const LionImageWrapper = styled.div` - width: 13rem; - display: flex; - align-items: center; -`; - -const StyledImage = styled(Image)` - position: relative !important; - height: unset !important; -`; - -const SearchResultBox = styled.div` - width: 65vw; - display: flex; - flex-direction: column; - justify-content: center; - background-color: white; - border: 3px solid black; - border-radius: 10px; - padding: 30px; - cursor: pointer; -`; - -const SearchResultTitle = styled.div` - font-size: 1.8rem; - font-weight: bold; -`; - -const SearchResultContent = styled.div` - height: 6rem; - overflow: hidden; - line-height: 2rem; - margin-top: 10px; - margin-bottom: 10px; - font-size: 1.4rem; -`; - -const SearchResultDirectory = styled.div` - font-size: 1.6rem; - font-weight: bold; -`; - -export default SearchFound; diff --git a/src/components/search/SearchHeadSection.tsx b/src/components/search/SearchHeadSection.tsx deleted file mode 100644 index a6f80ad..0000000 --- a/src/components/search/SearchHeadSection.tsx +++ /dev/null @@ -1,33 +0,0 @@ -'use client'; - -import Image from 'next/image'; -import styled from 'styled-components'; - -const SearchHeadSection = () => { - return ( - - - - - - ); -}; - -const SearchHeadWrapper = styled.div` - display: flex; - flex-direction: column; - gap: 10px; - padding: 50px; -`; - -const StyledImage = styled(Image)` - position: relative !important; - height: unset !important; -`; - -const HeartImageWrapper = styled.div` - position: relative; - width: 25rem; -`; - -export default SearchHeadSection; diff --git a/src/components/search/SearchHeaderForm.tsx b/src/components/search/SearchHeaderForm.tsx deleted file mode 100644 index 3e437a6..0000000 --- a/src/components/search/SearchHeaderForm.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import useSearchForm from '@/hooks/useSearchForm'; -import Image from 'next/image'; -import React from 'react'; -import styled from 'styled-components'; - -const SearchHeaderForm = ({ searchKeyword }: { searchKeyword?: string }) => { - const { values, handleChange, handleSearchSubmit } = useSearchForm({ - initialValue: { searchInput: '', searchHeaderInput: '' }, - searchKeyword, - }); - - return ( - - - - {'search'} - - - - - ); -}; -const FormWrapper = styled.form``; - -const SearchWrapper = styled.div` - display: flex; - align-items: center; - border-bottom: 1px solid black; - padding: 2px 0rem; -`; - -const SearchHeaderInput = styled.input` - font-family: NeoDunggeunmo Pro; - width: 100%; - height: 100%; - font-size: 1.5rem; - border: none; - outline: none; - padding-left: 1rem; -`; - -const ImageButtonWrapper = styled.button` - border: none; - outline: none; - background-color: inherit; -`; - -export default SearchHeaderForm; diff --git a/src/components/search/SearchNotFound.tsx b/src/components/search/SearchNotFound.tsx deleted file mode 100644 index 6b345f3..0000000 --- a/src/components/search/SearchNotFound.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import Image from 'next/image'; -import styled from 'styled-components'; - -const SearchNotFound = ({ searchKeyword }: { searchKeyword: string }) => { - return ( - - 해당 문서가 없습니다. 위키에 {searchKeyword} 문서를 만드세요! - - - - - - - ); -}; - -const SearchNotFoundWrapper = styled.div` - margin-top: 10px; -`; - -const NotFoundSearchText = styled.div` - font-size: 1.5rem; - font-weight: bold; - color: red; - margin-left: 12%; -`; - -const BottomImageWrapper = styled.div` - display: flex; - justify-content: center; - align-items: flex-end; -`; - -const LionImageWrapper = styled.div` - width: 65vw; - position: absolute; - bottom: 0; -`; - -const StyledImage = styled(Image)` - position: relative !important; - height: unset !important; - object-fit: cover; -`; - -export default SearchNotFound; diff --git a/src/components/search/SearchResult.tsx b/src/components/search/SearchResult.tsx index 639f527..1eb1ea1 100644 --- a/src/components/search/SearchResult.tsx +++ b/src/components/search/SearchResult.tsx @@ -1,8 +1,8 @@ import { ISearchResult, ISearchResultList } from '@/types/search'; import React from 'react'; import Loading from '../common/Loading'; -import SearchFound from './SearchFound'; -import SearchNotFound from './SearchNotFound'; +import SearchFound from './searchFound/SearchFound'; +import SearchNotFound from './searchNotFound/SearchNotFound'; interface SearchResultProps { searchResult: ISearchResult | ISearchResultList | undefined; diff --git a/src/components/search/autoCompleteContainer/AutoCompleteContainer.styled.ts b/src/components/search/autoCompleteContainer/AutoCompleteContainer.styled.ts new file mode 100644 index 0000000..295c124 --- /dev/null +++ b/src/components/search/autoCompleteContainer/AutoCompleteContainer.styled.ts @@ -0,0 +1,27 @@ +import styled from 'styled-components'; + +export const BoxWrapper = styled.div` + display: flex; + flex-direction: column; + width: 40vw; + background-color: white; + margin-left: 2%; + gap: 10px; + box-shadow: 2px 2px 2px black; + z-index: 1; +`; + +export const ItemWrapper = styled.div` + padding: 15px; + font-size: 1.4rem; + cursor: pointer; + &:hover { + background-color: lightgrey; + } +`; + +export const NoResultWrapper = styled.span` + padding: 15px; + font-size: 1.4rem; + box-shadow: 2px 2px 2px black; +`; diff --git a/src/components/search/autoCompleteContainer/AutoCompleteContainer.tsx b/src/components/search/autoCompleteContainer/AutoCompleteContainer.tsx new file mode 100644 index 0000000..ee92815 --- /dev/null +++ b/src/components/search/autoCompleteContainer/AutoCompleteContainer.tsx @@ -0,0 +1,36 @@ +import { useSearchAutoCompleteQuery } from '@/hooks/useSearchAutoCompleteQuery'; +import { useRouter } from 'next/navigation'; +import * as S from './AutoCompleteContainer.styled'; + +interface AutoProps { + searchInput: string; +} + +const AutoCompleteContainer = ({ searchInput }: AutoProps) => { + const router = useRouter(); + const { data: dropdownList, isLoading } = useSearchAutoCompleteQuery(searchInput); + + if (isLoading) { + return ( + + 검색중... + + ); + } + + return ( + + {dropdownList && dropdownList.length > 0 ? ( + dropdownList.map((title, idx) => ( + router.push(`search/?search=${title}`)}> + {title} + + )) + ) : ( + 검색결과가 없습니다. + )} + + ); +}; + +export default AutoCompleteContainer; diff --git a/src/components/search/searchBodySection/SearchBodySection.styled.ts b/src/components/search/searchBodySection/SearchBodySection.styled.ts new file mode 100644 index 0000000..d76eb43 --- /dev/null +++ b/src/components/search/searchBodySection/SearchBodySection.styled.ts @@ -0,0 +1,19 @@ +import Image from 'next/image'; +import styled from 'styled-components'; + +export const SearchBarWrapper = styled.div` + display: flex; + flex-direction: column; + gap: 20px; + margin-left: 10%; +`; + +export const TextImageWrapper = styled.div` + position: relative; + width: 30rem; +`; + +export const StyledImage = styled(Image)` + position: relative !important; + height: unset !important; +`; diff --git a/src/components/search/SearchBodySection.tsx b/src/components/search/searchBodySection/SearchBodySection.tsx similarity index 66% rename from src/components/search/SearchBodySection.tsx rename to src/components/search/searchBodySection/SearchBodySection.tsx index 921914b..1004033 100644 --- a/src/components/search/SearchBodySection.tsx +++ b/src/components/search/searchBodySection/SearchBodySection.tsx @@ -2,12 +2,10 @@ import { useRouter, useSearchParams } from 'next/navigation'; import React, { useEffect, useState } from 'react'; -import styled from 'styled-components'; -import SearchForm from './SearchForm'; -import Image from 'next/image'; - +import SearchForm from '../SearchForm'; +import * as S from './SearchBodySection.styled'; import { useSearchQuery } from '@/hooks/useSearchQuery'; -import SearchResultContainer from './SearchResult'; +import SearchResultContainer from '../SearchResult'; const SearchBodySection = () => { const router = useRouter(); @@ -29,38 +27,21 @@ const SearchBodySection = () => { return ( <> - - - + + - + - + ); }; -const SearchBarWrapper = styled.div` - display: flex; - flex-direction: column; - gap: 20px; - margin-left: 10%; -`; - -const TextImageWrapper = styled.div` - position: relative; - width: 30rem; -`; - -const StyledImage = styled(Image)` - position: relative !important; - height: unset !important; -`; - export default SearchBodySection; diff --git a/src/components/search/searchFound/SearchFound.styled.ts b/src/components/search/searchFound/SearchFound.styled.ts new file mode 100644 index 0000000..2d5cfaa --- /dev/null +++ b/src/components/search/searchFound/SearchFound.styled.ts @@ -0,0 +1,62 @@ +import styled from 'styled-components'; +import Image from 'next/image'; + +export const SearchFoundWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + margin-top: 20px; + @media screen and (max-width: 540px) { + margin-left: 15rem; + } +`; + +export const SearchResultWrapper = styled.div` + display: flex; + align-items: end; + justify-content: center; + gap: 20px; + margin: 30px; +`; + +export const LionImageWrapper = styled.div` + width: 13rem; + display: flex; + align-items: center; +`; + +export const StyledImage = styled(Image)` + position: relative !important; + height: unset !important; +`; + +export const SearchResultBox = styled.div` + width: 65vw; + display: flex; + flex-direction: column; + justify-content: center; + background-color: white; + border: 3px solid black; + border-radius: 10px; + padding: 30px; + cursor: pointer; +`; + +export const SearchResultTitle = styled.div` + font-size: 1.8rem; + font-weight: bold; +`; + +export const SearchResultContent = styled.div` + height: 6rem; + overflow: hidden; + line-height: 2rem; + margin-top: 10px; + margin-bottom: 10px; + font-size: 1.4rem; +`; + +export const SearchResultDirectory = styled.div` + font-size: 1.6rem; + font-weight: bold; +`; diff --git a/src/components/search/searchFound/SearchFound.tsx b/src/components/search/searchFound/SearchFound.tsx new file mode 100644 index 0000000..fb98f8c --- /dev/null +++ b/src/components/search/searchFound/SearchFound.tsx @@ -0,0 +1,35 @@ +'use client'; + +import { useRouter } from 'next/navigation'; +import * as S from './SearchFound.styled'; +import type { SearchResult } from '@/types/search'; +import { getGenerationFormat } from './SearchFound.utils'; + +const SearchFound = ({ searchResult }: { searchResult: SearchResult[] }) => { + const router = useRouter(); + + const handleClickSearchResult = (id: number) => { + const selectedDocTitle = searchResult.filter((result) => result.id === id)[0].title; + const encodedTitle = encodeURIComponent(selectedDocTitle); + router.push(`viewer?title=${encodedTitle}`); + }; + + return ( + + {searchResult.map((result) => ( + + + + + handleClickSearchResult(result.id)}> + {result.title} + {result.content} + {getGenerationFormat(result.generations)} + + + ))} + + ); +}; + +export default SearchFound; diff --git a/src/components/search/searchFound/SearchFound.utils.ts b/src/components/search/searchFound/SearchFound.utils.ts new file mode 100644 index 0000000..16ec2d3 --- /dev/null +++ b/src/components/search/searchFound/SearchFound.utils.ts @@ -0,0 +1,9 @@ +import { IGenerations } from '@/types/request'; + +export const getGenerationFormat = (generations: IGenerations[]) => { + const genFormat: string[] = []; + generations.forEach((data) => { + genFormat.push(data.generation); + }); + return genFormat.join(', '); +}; diff --git a/src/components/search/searchHeaderForm/SearchHeaderForm.styled.ts b/src/components/search/searchHeaderForm/SearchHeaderForm.styled.ts new file mode 100644 index 0000000..0171103 --- /dev/null +++ b/src/components/search/searchHeaderForm/SearchHeaderForm.styled.ts @@ -0,0 +1,26 @@ +import styled from 'styled-components'; + +export const FormWrapper = styled.form``; + +export const SearchWrapper = styled.div` + display: flex; + align-items: center; + border-bottom: 1px solid black; + padding: 2px 0rem; +`; + +export const SearchHeaderInput = styled.input` + font-family: NeoDunggeunmo Pro; + width: 100%; + height: 100%; + font-size: 1.5rem; + border: none; + outline: none; + padding-left: 1rem; +`; + +export const ImageButtonWrapper = styled.button` + border: none; + outline: none; + background-color: inherit; +`; diff --git a/src/components/search/searchHeaderForm/SearchHeaderForm.tsx b/src/components/search/searchHeaderForm/SearchHeaderForm.tsx new file mode 100644 index 0000000..e7aa0c6 --- /dev/null +++ b/src/components/search/searchHeaderForm/SearchHeaderForm.tsx @@ -0,0 +1,30 @@ +import useSearchForm from '@/hooks/useSearchForm'; +import Image from 'next/image'; +import React from 'react'; +import * as S from './SearchHeaderForm.styled'; + +const SearchHeaderForm = ({ searchKeyword }: { searchKeyword?: string }) => { + const { values, handleChange, handleSearchSubmit } = useSearchForm({ + initialValue: { searchInput: '', searchHeaderInput: '' }, + searchKeyword, + }); + + return ( + + + + {'search'} + + + + + ); +}; + +export default SearchHeaderForm; diff --git a/src/components/search/searchHeaderSection/SearchHeaderSection.styled.ts b/src/components/search/searchHeaderSection/SearchHeaderSection.styled.ts new file mode 100644 index 0000000..4a14efa --- /dev/null +++ b/src/components/search/searchHeaderSection/SearchHeaderSection.styled.ts @@ -0,0 +1,19 @@ +import Image from 'next/image'; +import styled from 'styled-components'; + +export const SearchHeaderWrapper = styled.div` + display: flex; + flex-direction: column; + gap: 10px; + padding: 50px; +`; + +export const StyledImage = styled(Image)` + position: relative !important; + height: unset !important; +`; + +export const HeartImageWrapper = styled.div` + position: relative; + width: 25rem; +`; diff --git a/src/components/search/searchHeaderSection/SearchHeaderSection.tsx b/src/components/search/searchHeaderSection/SearchHeaderSection.tsx new file mode 100644 index 0000000..c9d7cfb --- /dev/null +++ b/src/components/search/searchHeaderSection/SearchHeaderSection.tsx @@ -0,0 +1,15 @@ +'use client'; + +import * as S from './SearchHeaderSection.styled'; + +const SearchHeaderSection = () => { + return ( + + + + + + ); +}; + +export default SearchHeaderSection; diff --git a/src/components/search/searchNotFound/SearchNotFound.styled.ts b/src/components/search/searchNotFound/SearchNotFound.styled.ts new file mode 100644 index 0000000..dfd5533 --- /dev/null +++ b/src/components/search/searchNotFound/SearchNotFound.styled.ts @@ -0,0 +1,31 @@ +import Image from 'next/image'; +import styled from 'styled-components'; + +export const SearchNotFoundWrapper = styled.div` + margin-top: 10px; +`; + +export const NotFoundSearchText = styled.div` + font-size: 1.5rem; + font-weight: bold; + color: red; + margin-left: 12%; +`; + +export const BottomImageWrapper = styled.div` + display: flex; + justify-content: center; + align-items: flex-end; +`; + +export const LionImageWrapper = styled.div` + width: 65vw; + position: absolute; + bottom: 0; +`; + +export const StyledImage = styled(Image)` + position: relative !important; + height: unset !important; + object-fit: cover; +`; diff --git a/src/components/search/searchNotFound/SearchNotFound.tsx b/src/components/search/searchNotFound/SearchNotFound.tsx new file mode 100644 index 0000000..90600e1 --- /dev/null +++ b/src/components/search/searchNotFound/SearchNotFound.tsx @@ -0,0 +1,16 @@ +import * as S from './SearchNotFound.styled'; + +const SearchNotFound = ({ searchKeyword }: { searchKeyword: string }) => { + return ( + + 해당 문서가 없습니다. 위키에 {searchKeyword} 문서를 만드세요! + + + + + + + ); +}; + +export default SearchNotFound; diff --git a/src/components/search/searchPageForm/SearchPageForm.styled.ts b/src/components/search/searchPageForm/SearchPageForm.styled.ts new file mode 100644 index 0000000..db27540 --- /dev/null +++ b/src/components/search/searchPageForm/SearchPageForm.styled.ts @@ -0,0 +1,20 @@ +import styled from 'styled-components'; + +export const FormWrapper = styled.form``; + +export const SearchBarInput = styled.input` + background: url('/img/search_bar.png'); + background-repeat: no-repeat; + background-size: contain; + border: none; + font-size: 2rem; + font-family: Pretendard; + padding: 10px; + padding-left: 30px; + width: 55rem; + height: 2.5rem; + + &:focus { + outline: none; + } +`; diff --git a/src/components/search/SearchPageForm.tsx b/src/components/search/searchPageForm/SearchPageForm.tsx similarity index 69% rename from src/components/search/SearchPageForm.tsx rename to src/components/search/searchPageForm/SearchPageForm.tsx index c8a3467..f9ca4a4 100644 --- a/src/components/search/SearchPageForm.tsx +++ b/src/components/search/searchPageForm/SearchPageForm.tsx @@ -1,8 +1,8 @@ +import { useEffect } from 'react'; import useDebounceValue from '@/hooks/useDebounce'; import useSearchForm from '@/hooks/useSearchForm'; -import { useEffect } from 'react'; -import styled from 'styled-components'; -import AutoCompleteContainer from './AutoCompleteContainer'; +import AutoCompleteContainer from '../autoCompleteContainer/AutoCompleteContainer'; +import * as S from './SearchPageForm.styled'; const SearchPageForm = ({ searchKeyword }: { searchKeyword?: string }) => { const { values, isFocused, handleFocus, handleBlur, handleChange, handleSearchSubmit } = useSearchForm({ @@ -26,8 +26,8 @@ const SearchPageForm = ({ searchKeyword }: { searchKeyword?: string }) => { }, []); return ( - - + { autoComplete="off" /> {isFocused && values.searchInput.length > 0 && } - + ); }; -const FormWrapper = styled.form``; - -const SearchBarInput = styled.input` - background: url('/img/search_bar.png'); - background-repeat: no-repeat; - background-size: contain; - border: none; - font-size: 2rem; - font-family: Pretendard; - padding: 10px; - padding-left: 30px; - width: 55rem; - height: 2.5rem; - - &:focus { - outline: none; - } -`; - export default SearchPageForm; From 9f50ac5717a63f1ee829f56aaec7ed1a9dd77a33 Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Tue, 18 Jun 2024 15:07:56 +0900 Subject: [PATCH 04/20] =?UTF-8?q?refactor:=20=EC=82=BC=ED=95=AD=EC=97=B0?= =?UTF-8?q?=EC=82=B0=EC=9E=90=EB=A1=9C=20=EB=B3=B5=EC=9E=A1=ED=95=9C=20JSX?= =?UTF-8?q?=20=EB=B0=98=ED=99=98=ED=95=98=EB=8A=94=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=EC=A1=B0=20=EA=B0=9C=EC=84=A0(#1?= =?UTF-8?q?20)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/search/SearchResult.tsx | 21 ++++++------ .../AutoCompleteContainer.styled.ts | 11 ------ .../AutoCompleteContainer.tsx | 34 ++++++++----------- .../searchPageForm/SearchPageForm.styled.ts | 11 ++++++ .../search/searchPageForm/SearchPageForm.tsx | 4 ++- 5 files changed, 39 insertions(+), 42 deletions(-) diff --git a/src/components/search/SearchResult.tsx b/src/components/search/SearchResult.tsx index 1eb1ea1..38e330f 100644 --- a/src/components/search/SearchResult.tsx +++ b/src/components/search/SearchResult.tsx @@ -7,20 +7,19 @@ import SearchNotFound from './searchNotFound/SearchNotFound'; interface SearchResultProps { searchResult: ISearchResult | ISearchResultList | undefined; searchKeyword: string; + isPending: boolean; } -const SearchResultContainer = ({ searchResult, searchKeyword }: SearchResultProps) => { - if (!searchResult) return ; +const SearchResultContainer = ({ searchResult, searchKeyword, isPending }: SearchResultProps) => { + if (isPending) { + return ; + } - return ( - <> - {searchResult.kind === 'searchResultList' && searchResult.data.length > 0 ? ( - - ) : ( - searchResult.kind !== 'searchResult' && - )} - - ); + if (!searchResult) { + return ; + } + + return <>{searchResult.kind === 'searchResultList' && }; }; export default SearchResultContainer; diff --git a/src/components/search/autoCompleteContainer/AutoCompleteContainer.styled.ts b/src/components/search/autoCompleteContainer/AutoCompleteContainer.styled.ts index 295c124..deb3d26 100644 --- a/src/components/search/autoCompleteContainer/AutoCompleteContainer.styled.ts +++ b/src/components/search/autoCompleteContainer/AutoCompleteContainer.styled.ts @@ -1,16 +1,5 @@ import styled from 'styled-components'; -export const BoxWrapper = styled.div` - display: flex; - flex-direction: column; - width: 40vw; - background-color: white; - margin-left: 2%; - gap: 10px; - box-shadow: 2px 2px 2px black; - z-index: 1; -`; - export const ItemWrapper = styled.div` padding: 15px; font-size: 1.4rem; diff --git a/src/components/search/autoCompleteContainer/AutoCompleteContainer.tsx b/src/components/search/autoCompleteContainer/AutoCompleteContainer.tsx index ee92815..a479718 100644 --- a/src/components/search/autoCompleteContainer/AutoCompleteContainer.tsx +++ b/src/components/search/autoCompleteContainer/AutoCompleteContainer.tsx @@ -2,34 +2,30 @@ import { useSearchAutoCompleteQuery } from '@/hooks/useSearchAutoCompleteQuery'; import { useRouter } from 'next/navigation'; import * as S from './AutoCompleteContainer.styled'; -interface AutoProps { +interface AutoCompleteContainerProps { searchInput: string; } -const AutoCompleteContainer = ({ searchInput }: AutoProps) => { +const AutoCompleteContainer = ({ searchInput }: AutoCompleteContainerProps) => { const router = useRouter(); - const { data: dropdownList, isLoading } = useSearchAutoCompleteQuery(searchInput); + const { data: dropdownTitleList, isLoading } = useSearchAutoCompleteQuery(searchInput); if (isLoading) { - return ( - - 검색중... - - ); + return 검색중...; + } + + if (dropdownTitleList && dropdownTitleList.length === 0) { + return 검색 결과가 없습니다.; } return ( - - {dropdownList && dropdownList.length > 0 ? ( - dropdownList.map((title, idx) => ( - router.push(`search/?search=${title}`)}> - {title} - - )) - ) : ( - 검색결과가 없습니다. - )} - + <> + {dropdownTitleList?.map((title, idx) => ( + router.push(`search/?search=${title}`)}> + {title} + + ))} + ); }; diff --git a/src/components/search/searchPageForm/SearchPageForm.styled.ts b/src/components/search/searchPageForm/SearchPageForm.styled.ts index db27540..9ca3052 100644 --- a/src/components/search/searchPageForm/SearchPageForm.styled.ts +++ b/src/components/search/searchPageForm/SearchPageForm.styled.ts @@ -18,3 +18,14 @@ export const SearchBarInput = styled.input` outline: none; } `; + +export const BoxWrapper = styled.div` + display: flex; + flex-direction: column; + width: 40vw; + background-color: white; + margin-left: 2%; + gap: 10px; + box-shadow: 2px 2px 2px black; + z-index: 1; +`; diff --git a/src/components/search/searchPageForm/SearchPageForm.tsx b/src/components/search/searchPageForm/SearchPageForm.tsx index f9ca4a4..638d7cf 100644 --- a/src/components/search/searchPageForm/SearchPageForm.tsx +++ b/src/components/search/searchPageForm/SearchPageForm.tsx @@ -36,7 +36,9 @@ const SearchPageForm = ({ searchKeyword }: { searchKeyword?: string }) => { onFocus={handleFocus} autoComplete="off" /> - {isFocused && values.searchInput.length > 0 && } + + {isFocused && values.searchInput.length > 0 && } + ); }; From 4c5934d65f3b09555fc87da066e480959a296dcc Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Tue, 18 Jun 2024 15:09:43 +0900 Subject: [PATCH 05/20] =?UTF-8?q?fix:=20=EA=B0=99=EC=9D=80=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=EA=B2=B0=EA=B3=BC=20=EB=B0=98=ED=99=98=EA=B0=92?= =?UTF-8?q?=EC=9D=84=20=EC=BA=90=EC=8B=B1=ED=95=98=EB=8F=84=EB=A1=9D=20que?= =?UTF-8?q?ryKey=20=EC=88=98=EC=A0=95(#120)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useSearchAutoCompleteQuery.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/hooks/useSearchAutoCompleteQuery.ts b/src/hooks/useSearchAutoCompleteQuery.ts index 59317f7..8a5c829 100644 --- a/src/hooks/useSearchAutoCompleteQuery.ts +++ b/src/hooks/useSearchAutoCompleteQuery.ts @@ -1,23 +1,23 @@ import { getSearchResult } from '@/apis/docs'; import { useQuery } from '@tanstack/react-query'; -export const useSearchAutoCompleteQuery = (searchInput: string) => { +export const useSearchAutoCompleteQuery = (searchKeyword: string) => { const { data, isLoading } = useQuery({ - queryKey: ['autoComplete', searchInput], - queryFn: () => getSearchResult(searchInput), + queryKey: ['search', searchKeyword], + queryFn: () => getSearchResult(searchKeyword), select: (search) => { if (search.kind === 'searchResultList') { const titleList: string[] = []; search.data.forEach((data) => { - if (data.title.includes(searchInput)) titleList.push(data.title); - else if (data.content.includes(searchInput)) titleList.push(data.title); + if (data.title.includes(searchKeyword)) titleList.push(data.title); + else if (data.content.includes(searchKeyword)) titleList.push(data.title); }); return titleList; } else if (search.kind === 'searchResult') { return [search.data.title]; } }, - staleTime: 30 * 1000, + staleTime: 60 * 1000, }); return { data, isLoading }; }; From 5d2fe97eff3e00f1106603322149b2f003a53d39 Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Tue, 18 Jun 2024 15:10:10 +0900 Subject: [PATCH 06/20] =?UTF-8?q?chore:=20=EC=82=AC=EC=9A=A9=EC=B2=98?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=84=A4=EC=9D=B4=EB=B0=8D=EC=9D=84=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95(#120)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/search/searchBodySection/SearchBodySection.tsx | 4 ++-- src/hooks/useSearchQuery.ts | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/search/searchBodySection/SearchBodySection.tsx b/src/components/search/searchBodySection/SearchBodySection.tsx index 1004033..75a10c6 100644 --- a/src/components/search/searchBodySection/SearchBodySection.tsx +++ b/src/components/search/searchBodySection/SearchBodySection.tsx @@ -11,7 +11,7 @@ const SearchBodySection = () => { const router = useRouter(); const params = useSearchParams(); const [searchKeyword, setSearchKeyword] = useState(''); - const searchResult = useSearchQuery(searchKeyword); + const { data: searchResult, isPending } = useSearchQuery(searchKeyword); useEffect(() => { const searchParams = params.get('search')!; @@ -39,7 +39,7 @@ const SearchBodySection = () => { - + ); }; diff --git a/src/hooks/useSearchQuery.ts b/src/hooks/useSearchQuery.ts index 6cae2ef..8ba2f11 100644 --- a/src/hooks/useSearchQuery.ts +++ b/src/hooks/useSearchQuery.ts @@ -2,11 +2,10 @@ import { getSearchResult } from '@/apis/docs'; import { useQuery } from '@tanstack/react-query'; export const useSearchQuery = (searchKeyword: string) => { - const { data: searchResult } = useQuery({ + return useQuery({ queryKey: ['search', searchKeyword], queryFn: () => getSearchResult(searchKeyword), enabled: !!searchKeyword, staleTime: 60 * 1000, }); - return searchResult; }; From 881e47c19a2667c7afcad947a1b78a3df8a1bdd1 Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Tue, 18 Jun 2024 17:53:47 +0900 Subject: [PATCH 07/20] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EB=A6=AC=EB=A0=8C=EB=8D=94=EB=A7=81=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0(#120)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../search/searchBodySection/SearchBodySection.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/search/searchBodySection/SearchBodySection.tsx b/src/components/search/searchBodySection/SearchBodySection.tsx index 75a10c6..ae9fc2a 100644 --- a/src/components/search/searchBodySection/SearchBodySection.tsx +++ b/src/components/search/searchBodySection/SearchBodySection.tsx @@ -1,7 +1,7 @@ 'use client'; import { useRouter, useSearchParams } from 'next/navigation'; -import React, { useEffect, useState } from 'react'; +import React, { Suspense, useEffect, useState } from 'react'; import SearchForm from '../SearchForm'; import * as S from './SearchBodySection.styled'; import { useSearchQuery } from '@/hooks/useSearchQuery'; @@ -10,13 +10,9 @@ import SearchResultContainer from '../SearchResult'; const SearchBodySection = () => { const router = useRouter(); const params = useSearchParams(); - const [searchKeyword, setSearchKeyword] = useState(''); - const { data: searchResult, isPending } = useSearchQuery(searchKeyword); - useEffect(() => { - const searchParams = params.get('search')!; - setSearchKeyword(searchParams); - }, [params]); + const searchKeyword = params.get('search') || '멋쟁이사자처럼'; + const { data: searchResult } = useSearchQuery(searchKeyword); useEffect(() => { if (searchResult && searchResult.kind === 'searchResult') { @@ -39,7 +35,7 @@ const SearchBodySection = () => { - + ); }; From 29e86cf0b460ee75e6432756afefcc427bb5d451 Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Tue, 18 Jun 2024 21:08:30 +0900 Subject: [PATCH 08/20] =?UTF-8?q?chore:=20react-query=20=EC=A4=91=EB=B3=B5?= =?UTF-8?q?=20=EC=84=A4=EC=B9=98=20=EC=A0=9C=EA=B1=B0(#120)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 94 +----- package.json | 1 - src/apis/docs.ts | 1 + src/apis/history.ts | 4 +- src/hooks/useSearchForm.ts | 14 +- yarn.lock | 624 +++++++++++++++++++++++++------------ 6 files changed, 436 insertions(+), 302 deletions(-) diff --git a/package-lock.json b/package-lock.json index b40d27b..e8523f0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,6 @@ "react-icons": "^4.12.0", "react-markdown": "^9.0.1", "react-markdown-editor-lite": "^1.3.4", - "react-query": "^3.39.3", "react-quill": "^2.0.0", "react-responsive": "^9.0.2", "react-select": "^5.8.0", @@ -4148,6 +4147,7 @@ "version": "1.6.52", "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz", "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==", + "dev": true, "engines": { "node": ">=0.6" } @@ -4197,21 +4197,6 @@ "node": ">=8" } }, - "node_modules/broadcast-channel": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz", - "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==", - "dependencies": { - "@babel/runtime": "^7.7.2", - "detect-node": "^2.1.0", - "js-sha3": "0.8.0", - "microseconds": "0.2.0", - "nano-time": "1.0.0", - "oblivious-set": "1.0.0", - "rimraf": "3.0.2", - "unload": "2.2.0" - } - }, "node_modules/browserslist": { "version": "4.23.0", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz", @@ -4805,11 +4790,6 @@ "node": ">=6" } }, - "node_modules/detect-node": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz", - "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==" - }, "node_modules/devlop": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz", @@ -7373,11 +7353,6 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, - "node_modules/js-sha3": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz", - "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==" - }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -7668,15 +7643,6 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/match-sorter": { - "version": "6.3.4", - "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.4.tgz", - "integrity": "sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==", - "dependencies": { - "@babel/runtime": "^7.23.8", - "remove-accents": "0.5.0" - } - }, "node_modules/matchmediaquery": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz", @@ -11084,11 +11050,6 @@ "node": ">=8.6" } }, - "node_modules/microseconds": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz", - "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==" - }, "node_modules/mime-db": { "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", @@ -11153,14 +11114,6 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, - "node_modules/nano-time": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz", - "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==", - "dependencies": { - "big-integer": "^1.6.16" - } - }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -11575,11 +11528,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/oblivious-set": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz", - "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==" - }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -12184,31 +12132,6 @@ "uuid": "dist/bin/uuid" } }, - "node_modules/react-query": { - "version": "3.39.3", - "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz", - "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==", - "dependencies": { - "@babel/runtime": "^7.5.5", - "broadcast-channel": "^3.4.1", - "match-sorter": "^6.0.2" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/tannerlinsley" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - }, - "react-native": { - "optional": true - } - } - }, "node_modules/react-quill": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz", @@ -13546,11 +13469,6 @@ "url": "https://opencollective.com/unified" } }, - "node_modules/remove-accents": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz", - "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==" - }, "node_modules/require-from-string": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", @@ -13605,6 +13523,7 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", + "dev": true, "dependencies": { "glob": "^7.1.3" }, @@ -14811,15 +14730,6 @@ "node": ">= 10.0.0" } }, - "node_modules/unload": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz", - "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==", - "dependencies": { - "@babel/runtime": "^7.6.2", - "detect-node": "^2.0.4" - } - }, "node_modules/untildify": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz", diff --git a/package.json b/package.json index 362c791..fc16be0 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,6 @@ "react-icons": "^4.12.0", "react-markdown": "^9.0.1", "react-markdown-editor-lite": "^1.3.4", - "react-query": "^3.39.3", "react-quill": "^2.0.0", "react-responsive": "^9.0.2", "react-select": "^5.8.0", diff --git a/src/apis/docs.ts b/src/apis/docs.ts index 8fcb089..597f9dd 100644 --- a/src/apis/docs.ts +++ b/src/apis/docs.ts @@ -16,6 +16,7 @@ export const getSearchResult = async (keyword: string): Promise { - console.log(title); try { const response = await axios.get(`${baseURL}history/${title}/`); return response.data; } catch (error) { - console.log(error); - return false; + console.error(error); } }; diff --git a/src/hooks/useSearchForm.ts b/src/hooks/useSearchForm.ts index eea93c6..4103966 100644 --- a/src/hooks/useSearchForm.ts +++ b/src/hooks/useSearchForm.ts @@ -1,15 +1,13 @@ import { useRouter } from 'next/navigation'; -import { useEffect, useState } from 'react'; +import { useState } from 'react'; type SearchInputType = 'searchInput' | 'searchHeaderInput'; + interface useFormProps { - initialValue: { - [k in SearchInputType]: string; - }; - searchKeyword?: string; + initialValue: Record; } -const useSearchForm = ({ initialValue, searchKeyword }: useFormProps) => { +const useSearchForm = ({ initialValue }: useFormProps) => { const router = useRouter(); const [values, setValues] = useState(initialValue); @@ -43,10 +41,6 @@ const useSearchForm = ({ initialValue, searchKeyword }: useFormProps) => { } }; - useEffect(() => { - if (searchKeyword) setValues({ searchInput: searchKeyword, searchHeaderInput: '' }); - }, [searchKeyword]); - return { values, isFocused, handleChange, handleSearchSubmit, handleFocus, handleBlur }; }; diff --git a/yarn.lock b/yarn.lock index 6b5022c..ade5329 100644 --- a/yarn.lock +++ b/yarn.lock @@ -37,7 +37,7 @@ resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz" integrity sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw== -"@babel/core@^7.11.1", "@babel/core@^7.22.9": +"@babel/core@^7.0.0", "@babel/core@^7.0.0-0", "@babel/core@^7.0.0-0 || ^8.0.0-0 <8.0.0", "@babel/core@^7.11.1", "@babel/core@^7.12.0", "@babel/core@^7.13.0", "@babel/core@^7.22.9", "@babel/core@^7.4.0 || ^8.0.0-0 <8.0.0": version "7.23.6" resolved "https://registry.npmjs.org/@babel/core/-/core-7.23.6.tgz" integrity sha512-FxpRyGjrMJXh7X3wGLGhNDCRiwpWEF74sKjTLDJSG5Kyvow3QZaG0Adbqzi9ZrVjTWpsX+2cxWXD71NMg93kdw== @@ -915,7 +915,7 @@ resolved "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz" integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA== -"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.17.2", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.8", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": +"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.17.2", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": version "7.24.0" resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz" integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw== @@ -989,13 +989,6 @@ resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz" integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ== -"@emotion/is-prop-valid@1.2.1": - version "1.2.1" - resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz" - integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw== - dependencies: - "@emotion/memoize" "^0.8.1" - "@emotion/is-prop-valid@^0.8.2": version "0.8.8" resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz" @@ -1003,16 +996,23 @@ dependencies: "@emotion/memoize" "0.7.4" -"@emotion/memoize@0.7.4": - version "0.7.4" - resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz" - integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== +"@emotion/is-prop-valid@1.2.1": + version "1.2.1" + resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz" + integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw== + dependencies: + "@emotion/memoize" "^0.8.1" "@emotion/memoize@^0.8.1": version "0.8.1" resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz" integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA== +"@emotion/memoize@0.7.4": + version "0.7.4" + resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz" + integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== + "@emotion/react@^11.8.1": version "11.11.1" resolved "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz" @@ -1043,16 +1043,16 @@ resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz" integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA== -"@emotion/unitless@0.8.0": - version "0.8.0" - resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz" - integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw== - "@emotion/unitless@^0.8.1": version "0.8.1" resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz" integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ== +"@emotion/unitless@0.8.0": + version "0.8.0" + resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz" + integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw== + "@emotion/use-insertion-effect-with-fallbacks@^1.0.1": version "1.0.1" resolved "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz" @@ -1193,49 +1193,9 @@ "@next/swc-darwin-arm64@13.5.6": version "13.5.6" - resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.6.tgz#b15d139d8971360fca29be3bdd703c108c9a45fb" + resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.6.tgz" integrity sha512-5nvXMzKtZfvcu4BhtV0KH1oGv4XEW+B+jOfmBdpFI3C7FrB/MfujRpWYSBBO64+qbW8pkZiSyQv9eiwnn5VIQA== -"@next/swc-darwin-x64@13.5.6": - version "13.5.6" - resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.6.tgz#9c72ee31cc356cb65ce6860b658d807ff39f1578" - integrity sha512-6cgBfxg98oOCSr4BckWjLLgiVwlL3vlLj8hXg2b+nDgm4bC/qVXXLfpLB9FHdoDu4057hzywbxKvmYGmi7yUzA== - -"@next/swc-linux-arm64-gnu@13.5.6": - version "13.5.6" - resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.6.tgz#59f5f66155e85380ffa26ee3d95b687a770cfeab" - integrity sha512-txagBbj1e1w47YQjcKgSU4rRVQ7uF29YpnlHV5xuVUsgCUf2FmyfJ3CPjZUvpIeXCJAoMCFAoGnbtX86BK7+sg== - -"@next/swc-linux-arm64-musl@13.5.6": - version "13.5.6" - resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.6.tgz#f012518228017052736a87d69bae73e587c76ce2" - integrity sha512-cGd+H8amifT86ZldVJtAKDxUqeFyLWW+v2NlBULnLAdWsiuuN8TuhVBt8ZNpCqcAuoruoSWynvMWixTFcroq+Q== - -"@next/swc-linux-x64-gnu@13.5.6": - version "13.5.6" - resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.6.tgz#339b867a7e9e7ee727a700b496b269033d820df4" - integrity sha512-Mc2b4xiIWKXIhBy2NBTwOxGD3nHLmq4keFk+d4/WL5fMsB8XdJRdtUlL87SqVCTSaf1BRuQQf1HvXZcy+rq3Nw== - -"@next/swc-linux-x64-musl@13.5.6": - version "13.5.6" - resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.6.tgz#ae0ae84d058df758675830bcf70ca1846f1028f2" - integrity sha512-CFHvP9Qz98NruJiUnCe61O6GveKKHpJLloXbDSWRhqhkJdZD2zU5hG+gtVJR//tyW897izuHpM6Gtf6+sNgJPQ== - -"@next/swc-win32-arm64-msvc@13.5.6": - version "13.5.6" - resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.6.tgz#a5cc0c16920485a929a17495064671374fdbc661" - integrity sha512-aFv1ejfkbS7PUa1qVPwzDHjQWQtknzAZWGTKYIAaS4NMtBlk3VyA6AYn593pqNanlicewqyl2jUhQAaFV/qXsg== - -"@next/swc-win32-ia32-msvc@13.5.6": - version "13.5.6" - resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.6.tgz#6a2409b84a2cbf34bf92fe714896455efb4191e4" - integrity sha512-XqqpHgEIlBHvzwG8sp/JXMFkLAfGLqkbVsyN+/Ih1mR8INb6YCc2x/Mbwi6hsAgUnqQztz8cvEbHJUbSl7RHDg== - -"@next/swc-win32-x64-msvc@13.5.6": - version "13.5.6" - resolved "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.6.tgz" - integrity sha512-Cqfe1YmOS7k+5mGu92nl5ULkzpKuxJrP3+4AEuPmrpFZ3BHxTY3TnHmU1On3bFmFFs6FbTcdF58CCUProGpIGQ== - "@nodelib/fs.scandir@2.1.5": version "2.1.5" resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz" @@ -1244,7 +1204,7 @@ "@nodelib/fs.stat" "2.0.5" run-parallel "^1.1.9" -"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2": +"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5": version "2.0.5" resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz" integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A== @@ -1359,6 +1319,22 @@ dependencies: "@types/ms" "*" +"@types/eslint-scope@^3.7.3": + version "3.7.7" + resolved "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz" + integrity sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg== + dependencies: + "@types/eslint" "*" + "@types/estree" "*" + +"@types/eslint@*", "@types/eslint@>=8.0.0": + version "8.56.0" + resolved "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.0.tgz" + integrity sha512-FlsN0p4FhuYRjIxpbdXovvHQhtlG05O1GG/RNWvdAxTboR438IOTwmrY/vLA+Xfgg06BTkP045M3vpFwTMv1dg== + dependencies: + "@types/estree" "*" + "@types/json-schema" "*" + "@types/estree-jsx@^1.0.0": version "1.0.3" resolved "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.3.tgz" @@ -1398,7 +1374,7 @@ dependencies: "@types/unist" "*" -"@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9": +"@types/json-schema@*", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9": version "7.0.15" resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz" integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA== @@ -1480,7 +1456,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^18.2.38": +"@types/react@*", "@types/react@^18.2.38", "@types/react@>=16", "@types/react@>=18": version "18.2.45" resolved "https://registry.npmjs.org/@types/react/-/react-18.2.45.tgz" integrity sha512-TtAxCNrlrBp8GoeEp1npd5g+d/OejJHFxS3OWmrPBMFaVQMSN0OFySozJio5BHxTuTeug00AVXVAjfDSfk+lUg== @@ -1609,12 +1585,148 @@ resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz" integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ== +"@webassemblyjs/ast@^1.11.5", "@webassemblyjs/ast@1.11.6": + version "1.11.6" + resolved "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz" + integrity sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q== + dependencies: + "@webassemblyjs/helper-numbers" "1.11.6" + "@webassemblyjs/helper-wasm-bytecode" "1.11.6" + +"@webassemblyjs/floating-point-hex-parser@1.11.6": + version "1.11.6" + resolved "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz" + integrity sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw== + +"@webassemblyjs/helper-api-error@1.11.6": + version "1.11.6" + resolved "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz" + integrity sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q== + +"@webassemblyjs/helper-buffer@1.11.6": + version "1.11.6" + resolved "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz" + integrity sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA== + +"@webassemblyjs/helper-numbers@1.11.6": + version "1.11.6" + resolved "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz" + integrity sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g== + dependencies: + "@webassemblyjs/floating-point-hex-parser" "1.11.6" + "@webassemblyjs/helper-api-error" "1.11.6" + "@xtuc/long" "4.2.2" + +"@webassemblyjs/helper-wasm-bytecode@1.11.6": + version "1.11.6" + resolved "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz" + integrity sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA== + +"@webassemblyjs/helper-wasm-section@1.11.6": + version "1.11.6" + resolved "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz" + integrity sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g== + dependencies: + "@webassemblyjs/ast" "1.11.6" + "@webassemblyjs/helper-buffer" "1.11.6" + "@webassemblyjs/helper-wasm-bytecode" "1.11.6" + "@webassemblyjs/wasm-gen" "1.11.6" + +"@webassemblyjs/ieee754@1.11.6": + version "1.11.6" + resolved "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz" + integrity sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg== + dependencies: + "@xtuc/ieee754" "^1.2.0" + +"@webassemblyjs/leb128@1.11.6": + version "1.11.6" + resolved "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz" + integrity sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ== + dependencies: + "@xtuc/long" "4.2.2" + +"@webassemblyjs/utf8@1.11.6": + version "1.11.6" + resolved "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz" + integrity sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA== + +"@webassemblyjs/wasm-edit@^1.11.5": + version "1.11.6" + resolved "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz" + integrity sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw== + dependencies: + "@webassemblyjs/ast" "1.11.6" + "@webassemblyjs/helper-buffer" "1.11.6" + "@webassemblyjs/helper-wasm-bytecode" "1.11.6" + "@webassemblyjs/helper-wasm-section" "1.11.6" + "@webassemblyjs/wasm-gen" "1.11.6" + "@webassemblyjs/wasm-opt" "1.11.6" + "@webassemblyjs/wasm-parser" "1.11.6" + "@webassemblyjs/wast-printer" "1.11.6" + +"@webassemblyjs/wasm-gen@1.11.6": + version "1.11.6" + resolved "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz" + integrity sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA== + dependencies: + "@webassemblyjs/ast" "1.11.6" + "@webassemblyjs/helper-wasm-bytecode" "1.11.6" + "@webassemblyjs/ieee754" "1.11.6" + "@webassemblyjs/leb128" "1.11.6" + "@webassemblyjs/utf8" "1.11.6" + +"@webassemblyjs/wasm-opt@1.11.6": + version "1.11.6" + resolved "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz" + integrity sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g== + dependencies: + "@webassemblyjs/ast" "1.11.6" + "@webassemblyjs/helper-buffer" "1.11.6" + "@webassemblyjs/wasm-gen" "1.11.6" + "@webassemblyjs/wasm-parser" "1.11.6" + +"@webassemblyjs/wasm-parser@^1.11.5", "@webassemblyjs/wasm-parser@1.11.6": + version "1.11.6" + resolved "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz" + integrity sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ== + dependencies: + "@webassemblyjs/ast" "1.11.6" + "@webassemblyjs/helper-api-error" "1.11.6" + "@webassemblyjs/helper-wasm-bytecode" "1.11.6" + "@webassemblyjs/ieee754" "1.11.6" + "@webassemblyjs/leb128" "1.11.6" + "@webassemblyjs/utf8" "1.11.6" + +"@webassemblyjs/wast-printer@1.11.6": + version "1.11.6" + resolved "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz" + integrity sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A== + dependencies: + "@webassemblyjs/ast" "1.11.6" + "@xtuc/long" "4.2.2" + +"@xtuc/ieee754@^1.2.0": + version "1.2.0" + resolved "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz" + integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA== + +"@xtuc/long@4.2.2": + version "4.2.2" + resolved "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz" + integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ== + +acorn-import-assertions@^1.9.0: + version "1.9.0" + resolved "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz" + integrity sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA== + acorn-jsx@^5.3.2: version "5.3.2" resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz" integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ== -acorn@^8.8.2, acorn@^8.9.0: +"acorn@^6.0.0 || ^7.0.0 || ^8.0.0", acorn@^8, acorn@^8.7.1, acorn@^8.8.2, acorn@^8.9.0: version "8.11.2" resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz" integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w== @@ -1638,7 +1750,7 @@ ajv-keywords@^5.1.0: dependencies: fast-deep-equal "^3.1.3" -ajv@^6.12.4, ajv@^6.12.5: +ajv@^6.12.4, ajv@^6.12.5, ajv@^6.9.1: version "6.12.6" resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz" integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g== @@ -1648,7 +1760,27 @@ ajv@^6.12.4, ajv@^6.12.5: json-schema-traverse "^0.4.1" uri-js "^4.2.2" -ajv@^8.0.0, ajv@^8.6.0, ajv@^8.9.0: +ajv@^8.0.0: + version "8.12.0" + resolved "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz" + integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA== + dependencies: + fast-deep-equal "^3.1.1" + json-schema-traverse "^1.0.0" + require-from-string "^2.0.2" + uri-js "^4.2.2" + +ajv@^8.6.0, ajv@>=8: + version "8.12.0" + resolved "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz" + integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA== + dependencies: + fast-deep-equal "^3.1.1" + json-schema-traverse "^1.0.0" + require-from-string "^2.0.2" + uri-js "^4.2.2" + +ajv@^8.8.2, ajv@^8.9.0: version "8.12.0" resolved "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz" integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA== @@ -1904,7 +2036,7 @@ bcp-47-match@^2.0.0: resolved "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-2.0.3.tgz" integrity sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ== -big-integer@^1.6.16, big-integer@^1.6.44: +big-integer@^1.6.44: version "1.6.52" resolved "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz" integrity sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg== @@ -1948,21 +2080,7 @@ braces@^3.0.2: dependencies: fill-range "^7.0.1" -broadcast-channel@^3.4.1: - version "3.7.0" - resolved "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz" - integrity sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg== - dependencies: - "@babel/runtime" "^7.7.2" - detect-node "^2.1.0" - js-sha3 "0.8.0" - microseconds "0.2.0" - nano-time "1.0.0" - oblivious-set "1.0.0" - rimraf "3.0.2" - unload "2.2.0" - -browserslist@^4.22.2, browserslist@^4.22.3: +browserslist@^4.14.5, browserslist@^4.22.2, browserslist@^4.22.3, "browserslist@>= 4.21.0": version "4.23.0" resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz" integrity sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ== @@ -2062,6 +2180,11 @@ character-reference-invalid@^2.0.0: resolved "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz" integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw== +chrome-trace-event@^1.0.2: + version "1.0.3" + resolved "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz" + integrity sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg== + classnames@^2.2.6: version "2.3.2" resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz" @@ -2098,16 +2221,16 @@ color-convert@^2.0.1: dependencies: color-name "~1.1.4" -color-name@1.1.3: - version "1.1.3" - resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz" - integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw== - color-name@~1.1.4: version "1.1.4" resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== +color-name@1.1.3: + version "1.1.3" + resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz" + integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw== + combined-stream@^1.0.8: version "1.0.8" resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz" @@ -2211,16 +2334,16 @@ css-to-react-native@3.2.0: css-color-keywords "^1.0.0" postcss-value-parser "^4.0.2" -csstype@3.1.2: - version "3.1.2" - resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz" - integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== - csstype@^3.0.2: version "3.1.3" resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz" integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw== +csstype@3.1.2: + version "3.1.2" + resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz" + integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== + damerau-levenshtein@^1.0.8: version "1.0.8" resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz" @@ -2333,11 +2456,6 @@ dequal@^2.0.0, dequal@^2.0.3: resolved "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz" integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA== -detect-node@^2.0.4, detect-node@^2.1.0: - version "2.1.0" - resolved "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz" - integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g== - devlop@^1.0.0, devlop@^1.1.0: version "1.1.0" resolved "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz" @@ -2406,7 +2524,7 @@ emojis-list@^3.0.0: resolved "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz" integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q== -enhanced-resolve@^5.12.0: +enhanced-resolve@^5.12.0, enhanced-resolve@^5.15.0: version "5.15.0" resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz" integrity sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg== @@ -2486,6 +2604,11 @@ es-iterator-helpers@^1.0.12, es-iterator-helpers@^1.0.15: iterator.prototype "^1.1.2" safe-array-concat "^1.0.1" +es-module-lexer@^1.2.1: + version "1.4.1" + resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz" + integrity sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w== + es-set-tostringtag@^2.0.1: version "2.0.2" resolved "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz" @@ -2546,7 +2669,7 @@ eslint-config-next@^13.4.19: eslint-plugin-react "^7.31.7" eslint-plugin-react-hooks "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705" -eslint-config-prettier@^9.0.0: +eslint-config-prettier@*, eslint-config-prettier@^9.0.0: version "9.1.0" resolved "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz" integrity sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw== @@ -2580,7 +2703,7 @@ eslint-module-utils@^2.7.4, eslint-module-utils@^2.8.0: dependencies: debug "^3.2.7" -eslint-plugin-import@^2.26.0: +eslint-plugin-import@*, eslint-plugin-import@^2.26.0: version "2.29.1" resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz" integrity sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw== @@ -2668,12 +2791,20 @@ eslint-scope@^7.2.2: esrecurse "^4.3.0" estraverse "^5.2.0" +eslint-scope@5.1.1: + version "5.1.1" + resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz" + integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw== + dependencies: + esrecurse "^4.3.0" + estraverse "^4.1.1" + eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3: version "3.4.3" resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz" integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag== -eslint@^8.49.0: +eslint@*, "eslint@^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8", "eslint@^3 || ^4 || ^5 || ^6 || ^7 || ^8", "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0", "eslint@^6.0.0 || ^7.0.0 || >=8.0.0", "eslint@^7.0.0 || ^8.0.0", "eslint@^7.23.0 || ^8.0.0", eslint@^8.49.0, eslint@>=7.0.0, eslint@>=8.0.0: version "8.49.0" resolved "https://registry.npmjs.org/eslint/-/eslint-8.49.0.tgz" integrity sha512-jw03ENfm6VJI0jA9U+8H5zfl5b+FvuU3YYvZRdZHOlU2ggJkxrlkJH4HcDrZpj6YwD8kuYqvQM8LyesoazrSOQ== @@ -2739,6 +2870,11 @@ esrecurse@^4.3.0: dependencies: estraverse "^5.2.0" +estraverse@^4.1.1: + version "4.3.0" + resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz" + integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw== + estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0: version "5.3.0" resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz" @@ -2769,6 +2905,11 @@ eventemitter3@^4.0.0: resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz" integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw== +events@^3.2.0: + version "3.3.0" + resolved "https://registry.npmjs.org/events/-/events-3.3.0.tgz" + integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q== + execa@^5.0.0: version "5.1.1" resolved "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz" @@ -2809,16 +2950,16 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz" integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== -fast-diff@1.1.2: - version "1.1.2" - resolved "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz" - integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig== - fast-diff@^1.1.2: version "1.3.0" resolved "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz" integrity sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw== +fast-diff@1.1.2: + version "1.1.2" + resolved "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz" + integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig== + fast-glob@^3.2.9, fast-glob@^3.3.0, fast-glob@^3.3.1: version "3.3.2" resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz" @@ -2854,7 +2995,7 @@ file-entry-cache@^6.0.1: dependencies: flat-cache "^3.0.4" -file-loader@^6.2.0: +file-loader@*, file-loader@^6.2.0: version "6.2.0" resolved "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz" integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw== @@ -2983,7 +3124,7 @@ fs.realpath@^1.0.0: fsevents@~2.3.2: version "2.3.3" - resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6" + resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz" integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw== function-bind@^1.1.1, function-bind@^1.1.2: @@ -3070,7 +3211,7 @@ glob-to-regexp@^0.4.1: resolved "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz" integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw== -glob@7.1.7, glob@^7.0.3, glob@^7.1.3, glob@^7.1.6: +glob@^7.0.3, glob@^7.1.3, glob@^7.1.6, glob@7.1.7: version "7.1.7" resolved "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz" integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ== @@ -3131,7 +3272,7 @@ gopd@^1.0.1: dependencies: get-intrinsic "^1.1.3" -graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4: +graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.9: version "4.2.11" resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz" integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ== @@ -3764,11 +3905,6 @@ jest-worker@^27.4.5: merge-stream "^2.0.0" supports-color "^8.0.0" -js-sha3@0.8.0: - version "0.8.0" - resolved "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz" - integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q== - "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz" @@ -3796,7 +3932,7 @@ json-buffer@3.0.1: resolved "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz" integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ== -json-parse-even-better-errors@^2.3.0: +json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1: version "2.3.1" resolved "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz" integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w== @@ -3828,7 +3964,12 @@ json5@^1.0.2: dependencies: minimist "^1.2.0" -json5@^2.1.2, json5@^2.2.0, json5@^2.2.3: +json5@^2.1.2, json5@^2.2.0: + version "2.2.3" + resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz" + integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== + +json5@^2.2.3: version "2.2.3" resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz" integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== @@ -3899,6 +4040,11 @@ lines-and-columns@^1.1.6: resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz" integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg== +loader-runner@^4.2.0: + version "4.3.0" + resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz" + integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg== + loader-utils@^2.0.0: version "2.0.4" resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz" @@ -3994,14 +4140,6 @@ markdown-table@^3.0.0: resolved "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz" integrity sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw== -match-sorter@^6.0.2: - version "6.3.4" - resolved "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.4.tgz" - integrity sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg== - dependencies: - "@babel/runtime" "^7.23.8" - remove-accents "0.5.0" - matchmediaquery@^0.3.0: version "0.3.1" resolved "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz" @@ -4209,7 +4347,21 @@ mdast-util-to-hast@^13.0.0: unist-util-position "^5.0.0" unist-util-visit "^5.0.0" -mdast-util-to-markdown@^1.0.0, mdast-util-to-markdown@^1.3.0: +mdast-util-to-markdown@^1.0.0: + version "1.5.0" + resolved "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-1.5.0.tgz" + integrity sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A== + dependencies: + "@types/mdast" "^3.0.0" + "@types/unist" "^2.0.0" + longest-streak "^3.0.0" + mdast-util-phrasing "^3.0.0" + mdast-util-to-string "^3.0.0" + micromark-util-decode-string "^1.0.0" + unist-util-visit "^4.0.0" + zwitch "^2.0.0" + +mdast-util-to-markdown@^1.3.0: version "1.5.0" resolved "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-1.5.0.tgz" integrity sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A== @@ -4266,7 +4418,29 @@ merge2@^1.3.0, merge2@^1.4.1: resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz" integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg== -micromark-core-commonmark@^1.0.0, micromark-core-commonmark@^1.0.1: +micromark-core-commonmark@^1.0.0: + version "1.1.0" + resolved "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-1.1.0.tgz" + integrity sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw== + dependencies: + decode-named-character-reference "^1.0.0" + micromark-factory-destination "^1.0.0" + micromark-factory-label "^1.0.0" + micromark-factory-space "^1.0.0" + micromark-factory-title "^1.0.0" + micromark-factory-whitespace "^1.0.0" + micromark-util-character "^1.0.0" + micromark-util-chunked "^1.0.0" + micromark-util-classify-character "^1.0.0" + micromark-util-html-tag-name "^1.0.0" + micromark-util-normalize-identifier "^1.0.0" + micromark-util-resolve-all "^1.0.0" + micromark-util-subtokenize "^1.0.0" + micromark-util-symbol "^1.0.0" + micromark-util-types "^1.0.1" + uvu "^0.5.0" + +micromark-core-commonmark@^1.0.1: version "1.1.0" resolved "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-1.1.0.tgz" integrity sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw== @@ -4741,11 +4915,6 @@ micromatch@^4.0.4: braces "^3.0.2" picomatch "^2.3.1" -microseconds@0.2.0: - version "0.2.0" - resolved "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz" - integrity sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA== - mime-db@1.52.0: version "1.52.0" resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz" @@ -4792,18 +4961,11 @@ mri@^1.1.0: resolved "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz" integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA== -ms@2.1.2, ms@^2.1.1: +ms@^2.1.1, ms@2.1.2: version "2.1.2" resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz" integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== -nano-time@1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz" - integrity sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA== - dependencies: - big-integer "^1.6.16" - nanoid@^3.3.6: version "3.3.7" resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz" @@ -4814,6 +4976,11 @@ natural-compare@^1.4.0: resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz" integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw== +neo-async@^2.6.2: + version "2.6.2" + resolved "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz" + integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw== + next-compose-plugins@^2.2.1: version "2.2.1" resolved "https://registry.npmjs.org/next-compose-plugins/-/next-compose-plugins-2.2.1.tgz" @@ -4829,7 +4996,7 @@ next-images@^1.8.5: next-pwa@^5.6.0: version "5.6.0" - resolved "https://registry.yarnpkg.com/next-pwa/-/next-pwa-5.6.0.tgz#f7b1960c4fdd7be4253eb9b41b612ac773392bf4" + resolved "https://registry.npmjs.org/next-pwa/-/next-pwa-5.6.0.tgz" integrity sha512-XV8g8C6B7UmViXU8askMEYhWwQ4qc/XqJGnexbLV68hzKaGHZDMtHsm2TNxFcbR7+ypVuth/wwpiIlMwpRJJ5A== dependencies: babel-loader "^8.2.5" @@ -4853,7 +5020,7 @@ next-seo@^6.1.0: resolved "https://registry.npmjs.org/next-seo/-/next-seo-6.4.0.tgz" integrity sha512-XQFxkOL2hw0YE+P100HbI3EAvcludlHPxuzMgaIjKb7kPK0CvjGvLFjd9hszZFEDc5oiQkGFA8+cuWcnip7eYA== -next@^13.5.6: +next@^13.5.6, "next@^8.1.1-canary.54 || >=9.0.0", next@>=9.0.0: version "13.5.6" resolved "https://registry.npmjs.org/next/-/next-13.5.6.tgz" integrity sha512-Y2wTcTbO4WwEsVb4A8VSnOsG1I9ok+h74q0ZdxkwM3EODqrs4pasq7O0iUxbcS9VtWMicG7f3+HAj0r1+NtKSw== @@ -4985,11 +5152,6 @@ object.values@^1.1.6, object.values@^1.1.7: define-properties "^1.2.0" es-abstract "^1.22.1" -oblivious-set@1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz" - integrity sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw== - once@^1.3.0: version "1.4.0" resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz" @@ -5243,7 +5405,7 @@ prettier-linter-helpers@^1.0.0: dependencies: fast-diff "^1.1.2" -prettier@^3.0.3: +prettier@^3.0.3, prettier@>=3.0.0: version "3.1.1" resolved "https://registry.npmjs.org/prettier/-/prettier-3.1.1.tgz" integrity sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw== @@ -5310,7 +5472,7 @@ randombytes@^2.1.0: dependencies: safe-buffer "^5.1.0" -react-dom@^18.2.0: +"react-dom@^16 || ^17 || ^18", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18.0.0, react-dom@^18.2.0, "react-dom@>= 16.8.0", react-dom@>=16.0.0, react-dom@>=16.6.0, react-dom@>=16.8.0: version "18.2.0" resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz" integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g== @@ -5380,15 +5542,6 @@ react-markdown@~8.0.0: unist-util-visit "^4.0.0" vfile "^5.0.0" -react-query@^3.39.3: - version "3.39.3" - resolved "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz" - integrity sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g== - dependencies: - "@babel/runtime" "^7.5.5" - broadcast-channel "^3.4.1" - match-sorter "^6.0.2" - react-quill@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz" @@ -5433,7 +5586,7 @@ react-transition-group@^4.3.0: loose-envify "^1.4.0" prop-types "^15.6.2" -react@^18.2.0: +react@*, "react@^16 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.9.0 || ^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.2.0, "react@>= 16.8.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16, react@>=16.0.0, react@>=16.13.1, react@>=16.6.0, react@>=16.8.0, react@>=18: version "18.2.0" resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz" integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== @@ -5445,7 +5598,7 @@ recoil-persist@^5.1.0: resolved "https://registry.npmjs.org/recoil-persist/-/recoil-persist-5.1.0.tgz" integrity sha512-sew4k3uBVJjRWKCSFuBw07Y1p1pBOb0UxLJPxn4G2bX/9xNj+r2xlqYy/BRfyofR/ANfqBU04MIvulppU4ZC0w== -recoil@^0.7.7: +recoil@^0.7.2, recoil@^0.7.7: version "0.7.7" resolved "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz" integrity sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ== @@ -5566,7 +5719,7 @@ rehype-parse@^8.0.0, rehype-parse@^8.0.2: parse5 "^6.0.0" unified "^10.0.0" -rehype-prism-plus@1.6.3, rehype-prism-plus@~1.6.1: +rehype-prism-plus@~1.6.1, rehype-prism-plus@1.6.3: version "1.6.3" resolved "https://registry.npmjs.org/rehype-prism-plus/-/rehype-prism-plus-1.6.3.tgz" integrity sha512-F6tn376zimnvy+xW0bSnryul+rvVL7NhDIkavc9kAuzDx5zIZW04A6jdXPkcFBhojcqZB8b6pHt6CLqiUx+Tbw== @@ -5678,11 +5831,6 @@ remark-rehype@^11.0.0: unified "^11.0.0" vfile "^6.0.0" -remove-accents@0.5.0: - version "0.5.0" - resolved "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz" - integrity sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A== - require-from-string@^2.0.2: version "2.0.2" resolved "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz" @@ -5721,13 +5869,6 @@ reusify@^1.0.4: resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz" integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw== -rimraf@3.0.2, rimraf@^3.0.2: - version "3.0.2" - resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz" - integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA== - dependencies: - glob "^7.1.3" - rimraf@^2.6.3: version "2.7.1" resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz" @@ -5735,6 +5876,13 @@ rimraf@^2.6.3: dependencies: glob "^7.1.3" +rimraf@^3.0.2: + version "3.0.2" + resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz" + integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA== + dependencies: + glob "^7.1.3" + rollup-plugin-terser@^7.0.0: version "7.0.2" resolved "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz" @@ -5745,7 +5893,7 @@ rollup-plugin-terser@^7.0.0: serialize-javascript "^4.0.0" terser "^5.0.0" -rollup@^2.43.1: +"rollup@^1.20.0 || ^2.0.0", rollup@^1.20.0||^2.0.0, rollup@^2.0.0, rollup@^2.43.1: version "2.79.1" resolved "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz" integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw== @@ -5813,7 +5961,7 @@ schema-utils@^2.6.5: ajv "^6.12.4" ajv-keywords "^3.5.2" -schema-utils@^3.0.0, schema-utils@^3.1.1: +schema-utils@^3.0.0, schema-utils@^3.1.1, schema-utils@^3.2.0: version "3.3.0" resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz" integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg== @@ -5832,7 +5980,12 @@ schema-utils@^4.0.0: ajv-formats "^2.1.1" ajv-keywords "^5.1.0" -semver@^6.0.0, semver@^6.3.1: +semver@^6.0.0: + version "6.3.1" + resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz" + integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA== + +semver@^6.3.1: version "6.3.1" resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz" integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA== @@ -6139,7 +6292,7 @@ synckit@^0.8.5: "@pkgr/utils" "^2.4.2" tslib "^2.6.2" -tapable@^2.2.0: +tapable@^2.1.1, tapable@^2.2.0: version "2.2.1" resolved "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz" integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ== @@ -6159,7 +6312,7 @@ tempy@^0.6.0: type-fest "^0.16.0" unique-string "^2.0.0" -terser-webpack-plugin@^5.3.3: +terser-webpack-plugin@^5.3.3, terser-webpack-plugin@^5.3.7: version "5.3.9" resolved "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz" integrity sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA== @@ -6234,16 +6387,16 @@ tsconfig-paths@^3.15.0: minimist "^1.2.6" strip-bom "^3.0.0" -tslib@2.5.0: - version "2.5.0" - resolved "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz" - integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg== - tslib@^2.4.0, tslib@^2.6.0, tslib@^2.6.2: version "2.6.2" resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz" integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== +tslib@2.5.0: + version "2.5.0" + resolved "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz" + integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg== + type-check@^0.4.0, type-check@~0.4.0: version "0.4.0" resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz" @@ -6300,7 +6453,7 @@ typed-array-length@^1.0.4: for-each "^0.3.3" is-typed-array "^1.1.9" -typescript@^5.3.2: +typescript@^5.3.2, typescript@>=3.3.1, typescript@>=4.2.0: version "5.3.3" resolved "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz" integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw== @@ -6343,7 +6496,20 @@ unicode-property-aliases-ecmascript@^2.0.0: resolved "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz" integrity sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w== -unified@^10.0.0, unified@^10.1.2, unified@~10.1.1: +unified@^10.0.0: + version "10.1.2" + resolved "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz" + integrity sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q== + dependencies: + "@types/unist" "^2.0.0" + bail "^2.0.0" + extend "^3.0.0" + is-buffer "^2.0.0" + is-plain-obj "^4.0.0" + trough "^2.0.0" + vfile "^5.0.0" + +unified@^10.1.2: version "10.1.2" resolved "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz" integrity sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q== @@ -6369,6 +6535,19 @@ unified@^11.0.0: trough "^2.0.0" vfile "^6.0.0" +unified@~10.1.1: + version "10.1.2" + resolved "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz" + integrity sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q== + dependencies: + "@types/unist" "^2.0.0" + bail "^2.0.0" + extend "^3.0.0" + is-buffer "^2.0.0" + is-plain-obj "^4.0.0" + trough "^2.0.0" + vfile "^5.0.0" + unique-string@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz" @@ -6440,7 +6619,15 @@ unist-util-stringify-position@^4.0.0: dependencies: "@types/unist" "^3.0.0" -unist-util-visit-parents@^5.0.0, unist-util-visit-parents@^5.1.1: +unist-util-visit-parents@^5.0.0: + version "5.1.3" + resolved "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz" + integrity sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg== + dependencies: + "@types/unist" "^2.0.0" + unist-util-is "^5.0.0" + +unist-util-visit-parents@^5.1.1: version "5.1.3" resolved "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz" integrity sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg== @@ -6456,7 +6643,16 @@ unist-util-visit-parents@^6.0.0: "@types/unist" "^3.0.0" unist-util-is "^6.0.0" -unist-util-visit@^4.0.0, unist-util-visit@^4.1.0, unist-util-visit@^4.1.2, unist-util-visit@~4.1.0: +unist-util-visit@^4.0.0, unist-util-visit@^4.1.0: + version "4.1.2" + resolved "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.2.tgz" + integrity sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg== + dependencies: + "@types/unist" "^2.0.0" + unist-util-is "^5.0.0" + unist-util-visit-parents "^5.1.1" + +unist-util-visit@^4.1.2: version "4.1.2" resolved "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.2.tgz" integrity sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg== @@ -6474,19 +6670,20 @@ unist-util-visit@^5.0.0: unist-util-is "^6.0.0" unist-util-visit-parents "^6.0.0" +unist-util-visit@~4.1.0: + version "4.1.2" + resolved "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.2.tgz" + integrity sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg== + dependencies: + "@types/unist" "^2.0.0" + unist-util-is "^5.0.0" + unist-util-visit-parents "^5.1.1" + universalify@^2.0.0: version "2.0.1" resolved "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz" integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw== -unload@2.2.0: - version "2.2.0" - resolved "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz" - integrity sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA== - dependencies: - "@babel/runtime" "^7.6.2" - detect-node "^2.0.4" - untildify@^4.0.0: version "4.0.0" resolved "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz" @@ -6589,7 +6786,7 @@ vfile@^6.0.0: unist-util-stringify-position "^4.0.0" vfile-message "^4.0.0" -watchpack@2.4.0: +watchpack@^2.4.0, watchpack@2.4.0: version "2.4.0" resolved "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz" integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg== @@ -6615,6 +6812,41 @@ webpack-sources@^1.4.3: source-list-map "^2.0.0" source-map "~0.6.1" +webpack-sources@^3.2.3: + version "3.2.3" + resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz" + integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w== + +"webpack@^4.0.0 || ^5.0.0", "webpack@^4.4.0 || ^5.9.0", webpack@^5.1.0, webpack@>=2, "webpack@>=4.0.0 <6.0.0", webpack@>=5: + version "5.89.0" + resolved "https://registry.npmjs.org/webpack/-/webpack-5.89.0.tgz" + integrity sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw== + dependencies: + "@types/eslint-scope" "^3.7.3" + "@types/estree" "^1.0.0" + "@webassemblyjs/ast" "^1.11.5" + "@webassemblyjs/wasm-edit" "^1.11.5" + "@webassemblyjs/wasm-parser" "^1.11.5" + acorn "^8.7.1" + acorn-import-assertions "^1.9.0" + browserslist "^4.14.5" + chrome-trace-event "^1.0.2" + enhanced-resolve "^5.15.0" + es-module-lexer "^1.2.1" + eslint-scope "5.1.1" + events "^3.2.0" + glob-to-regexp "^0.4.1" + graceful-fs "^4.2.9" + json-parse-even-better-errors "^2.3.1" + loader-runner "^4.2.0" + mime-types "^2.1.27" + neo-async "^2.6.2" + schema-utils "^3.2.0" + tapable "^2.1.1" + terser-webpack-plugin "^5.3.7" + watchpack "^2.4.0" + webpack-sources "^3.2.3" + whatwg-url@^7.0.0: version "7.1.0" resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz" @@ -6842,7 +7074,7 @@ workbox-webpack-plugin@^6.5.4: webpack-sources "^1.4.3" workbox-build "6.6.0" -workbox-window@6.6.0, workbox-window@^6.5.4: +workbox-window@^6.5.4, workbox-window@6.6.0: version "6.6.0" resolved "https://registry.npmjs.org/workbox-window/-/workbox-window-6.6.0.tgz" integrity sha512-L4N9+vka17d16geaJXXRjENLFldvkWy7JyGxElRD0JvBxvFEd8LOhr+uXCcar/NzAmIBRv9EZ+M+Qr4mOoBITw== From 62fdf911cb0a7cfc132e025fa782c802f6b169bd Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Tue, 18 Jun 2024 23:53:39 +0900 Subject: [PATCH 09/20] =?UTF-8?q?refactor:=20useSuspenseQuery=EC=99=80=20S?= =?UTF-8?q?uspense=EB=A5=BC=20=ED=99=9C=EC=9A=A9=ED=95=98=EC=97=AC=20?= =?UTF-8?q?=EB=A1=9C=EB=94=A9=20UI=20=EC=B2=98=EB=A6=AC(#120)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/landing/Landing.tsx | 2 -- src/components/search/SearchResult.tsx | 27 +++++++++---------- .../AutoCompleteContainer.tsx | 10 +++---- .../searchBodySection/SearchBodySection.tsx | 8 ++++-- .../searchHeaderForm/SearchHeaderForm.tsx | 3 +-- .../searchPageForm/SearchPageForm.styled.ts | 6 +++++ .../search/searchPageForm/SearchPageForm.tsx | 9 ++++--- 7 files changed, 33 insertions(+), 32 deletions(-) diff --git a/src/components/landing/Landing.tsx b/src/components/landing/Landing.tsx index dd0fddc..836a23e 100644 --- a/src/components/landing/Landing.tsx +++ b/src/components/landing/Landing.tsx @@ -5,10 +5,8 @@ import LandingSection1 from './LandingSection1'; import LandingSection2 from './LandingSection2'; import LandingSection3 from './LandingSection3'; import { styled } from 'styled-components'; -import { getRecentDocs } from '@/apis/docs'; import Image from 'next/image'; import { RecentDocs } from '@/types/request'; -import { QueryClient, useQuery } from 'react-query'; import { useGetRecent } from '@/hooks/useGetRecent'; const Landing = () => { diff --git a/src/components/search/SearchResult.tsx b/src/components/search/SearchResult.tsx index 38e330f..fa62d32 100644 --- a/src/components/search/SearchResult.tsx +++ b/src/components/search/SearchResult.tsx @@ -1,25 +1,22 @@ -import { ISearchResult, ISearchResultList } from '@/types/search'; -import React from 'react'; -import Loading from '../common/Loading'; +import { ISearchResultList } from '@/types/search'; import SearchFound from './searchFound/SearchFound'; import SearchNotFound from './searchNotFound/SearchNotFound'; interface SearchResultProps { - searchResult: ISearchResult | ISearchResultList | undefined; + searchResult: ISearchResultList; searchKeyword: string; - isPending: boolean; } -const SearchResultContainer = ({ searchResult, searchKeyword, isPending }: SearchResultProps) => { - if (isPending) { - return ; - } - - if (!searchResult) { - return ; - } - - return <>{searchResult.kind === 'searchResultList' && }; +const SearchResultContainer = ({ searchResult, searchKeyword }: SearchResultProps) => { + return ( + <> + {searchResult.data.length > 0 ? ( + + ) : ( + + )} + + ); }; export default SearchResultContainer; diff --git a/src/components/search/autoCompleteContainer/AutoCompleteContainer.tsx b/src/components/search/autoCompleteContainer/AutoCompleteContainer.tsx index a479718..154d336 100644 --- a/src/components/search/autoCompleteContainer/AutoCompleteContainer.tsx +++ b/src/components/search/autoCompleteContainer/AutoCompleteContainer.tsx @@ -8,19 +8,15 @@ interface AutoCompleteContainerProps { const AutoCompleteContainer = ({ searchInput }: AutoCompleteContainerProps) => { const router = useRouter(); - const { data: dropdownTitleList, isLoading } = useSearchAutoCompleteQuery(searchInput); + const { data: dropdownTitleList } = useSearchAutoCompleteQuery(searchInput); - if (isLoading) { - return 검색중...; - } - - if (dropdownTitleList && dropdownTitleList.length === 0) { + if (dropdownTitleList.length === 0) { return 검색 결과가 없습니다.; } return ( <> - {dropdownTitleList?.map((title, idx) => ( + {dropdownTitleList.map((title, idx) => ( router.push(`search/?search=${title}`)}> {title} diff --git a/src/components/search/searchBodySection/SearchBodySection.tsx b/src/components/search/searchBodySection/SearchBodySection.tsx index ae9fc2a..85eac09 100644 --- a/src/components/search/searchBodySection/SearchBodySection.tsx +++ b/src/components/search/searchBodySection/SearchBodySection.tsx @@ -1,7 +1,7 @@ 'use client'; import { useRouter, useSearchParams } from 'next/navigation'; -import React, { Suspense, useEffect, useState } from 'react'; +import { useEffect } from 'react'; import SearchForm from '../SearchForm'; import * as S from './SearchBodySection.styled'; import { useSearchQuery } from '@/hooks/useSearchQuery'; @@ -19,7 +19,11 @@ const SearchBodySection = () => { const encodedTitle = encodeURIComponent(searchKeyword); router.push(`viewer?title=${encodedTitle}`); } - }, [searchResult]); + }, [searchResult, router, searchKeyword]); + + if (searchResult.kind === 'searchResult') { + return; + } return ( <> diff --git a/src/components/search/searchHeaderForm/SearchHeaderForm.tsx b/src/components/search/searchHeaderForm/SearchHeaderForm.tsx index e7aa0c6..9fc1ccc 100644 --- a/src/components/search/searchHeaderForm/SearchHeaderForm.tsx +++ b/src/components/search/searchHeaderForm/SearchHeaderForm.tsx @@ -5,8 +5,7 @@ import * as S from './SearchHeaderForm.styled'; const SearchHeaderForm = ({ searchKeyword }: { searchKeyword?: string }) => { const { values, handleChange, handleSearchSubmit } = useSearchForm({ - initialValue: { searchInput: '', searchHeaderInput: '' }, - searchKeyword, + initialValue: { searchInput: searchKeyword || '', searchHeaderInput: searchKeyword || '' }, }); return ( diff --git a/src/components/search/searchPageForm/SearchPageForm.styled.ts b/src/components/search/searchPageForm/SearchPageForm.styled.ts index 9ca3052..1f98cbd 100644 --- a/src/components/search/searchPageForm/SearchPageForm.styled.ts +++ b/src/components/search/searchPageForm/SearchPageForm.styled.ts @@ -29,3 +29,9 @@ export const BoxWrapper = styled.div` box-shadow: 2px 2px 2px black; z-index: 1; `; + +export const NoResultWrapper = styled.span` + padding: 15px; + font-size: 1.4rem; + box-shadow: 2px 2px 2px black; +`; diff --git a/src/components/search/searchPageForm/SearchPageForm.tsx b/src/components/search/searchPageForm/SearchPageForm.tsx index 638d7cf..18fd33e 100644 --- a/src/components/search/searchPageForm/SearchPageForm.tsx +++ b/src/components/search/searchPageForm/SearchPageForm.tsx @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import { Suspense, useEffect } from 'react'; import useDebounceValue from '@/hooks/useDebounce'; import useSearchForm from '@/hooks/useSearchForm'; import AutoCompleteContainer from '../autoCompleteContainer/AutoCompleteContainer'; @@ -6,8 +6,7 @@ import * as S from './SearchPageForm.styled'; const SearchPageForm = ({ searchKeyword }: { searchKeyword?: string }) => { const { values, isFocused, handleFocus, handleBlur, handleChange, handleSearchSubmit } = useSearchForm({ - initialValue: { searchInput: '', searchHeaderInput: '' }, - searchKeyword, + initialValue: { searchInput: searchKeyword || '', searchHeaderInput: searchKeyword || '' }, }); const debounceSearchInput = useDebounceValue(values.searchInput, 300); @@ -37,7 +36,9 @@ const SearchPageForm = ({ searchKeyword }: { searchKeyword?: string }) => { autoComplete="off" /> - {isFocused && values.searchInput.length > 0 && } + 검색중...}> + {isFocused && values.searchInput.length > 0 && } + ); From 6e0b709940fa7869e3f6ad640c91e72ce1b8094a Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Tue, 18 Jun 2024 23:54:28 +0900 Subject: [PATCH 10/20] =?UTF-8?q?fix:=20searchKeyword=EA=B0=80=20=EB=B9=88?= =?UTF-8?q?=20=EB=AC=B8=EC=9E=90=EC=97=B4=EC=9D=BC=20=EB=95=8C=20API=20?= =?UTF-8?q?=ED=98=B8=EC=B6=9C=EC=9D=84=20=EB=A7=89=EA=B8=B0=20=EC=9C=84?= =?UTF-8?q?=ED=95=B4=20Promise=20=EB=B0=98=ED=99=98(#120)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useSearchAutoCompleteQuery.ts | 13 ++++++++----- src/hooks/useSearchQuery.ts | 9 ++++++--- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/hooks/useSearchAutoCompleteQuery.ts b/src/hooks/useSearchAutoCompleteQuery.ts index 8a5c829..2f90a82 100644 --- a/src/hooks/useSearchAutoCompleteQuery.ts +++ b/src/hooks/useSearchAutoCompleteQuery.ts @@ -1,8 +1,12 @@ import { getSearchResult } from '@/apis/docs'; -import { useQuery } from '@tanstack/react-query'; +import { useQuery, useSuspenseQuery } from '@tanstack/react-query'; export const useSearchAutoCompleteQuery = (searchKeyword: string) => { - const { data, isLoading } = useQuery({ + if (!searchKeyword) { + throw new Promise(() => {}); + } + + return useSuspenseQuery({ queryKey: ['search', searchKeyword], queryFn: () => getSearchResult(searchKeyword), select: (search) => { @@ -13,11 +17,10 @@ export const useSearchAutoCompleteQuery = (searchKeyword: string) => { else if (data.content.includes(searchKeyword)) titleList.push(data.title); }); return titleList; - } else if (search.kind === 'searchResult') { - return [search.data.title]; } + + return [search.data.title]; }, staleTime: 60 * 1000, }); - return { data, isLoading }; }; diff --git a/src/hooks/useSearchQuery.ts b/src/hooks/useSearchQuery.ts index 8ba2f11..0cdcf0c 100644 --- a/src/hooks/useSearchQuery.ts +++ b/src/hooks/useSearchQuery.ts @@ -1,11 +1,14 @@ import { getSearchResult } from '@/apis/docs'; -import { useQuery } from '@tanstack/react-query'; +import { useSuspenseQuery } from '@tanstack/react-query'; export const useSearchQuery = (searchKeyword: string) => { - return useQuery({ + if (!searchKeyword) { + throw new Promise(() => {}); + } + + return useSuspenseQuery({ queryKey: ['search', searchKeyword], queryFn: () => getSearchResult(searchKeyword), - enabled: !!searchKeyword, staleTime: 60 * 1000, }); }; From 1575188248b5ffcb11a622134e3f42c45829f9ac Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Wed, 19 Jun 2024 15:11:02 +0900 Subject: [PATCH 11/20] =?UTF-8?q?refactor:=20=EC=9E=90=EB=8F=99=EC=99=84?= =?UTF-8?q?=EC=84=B1=EC=B0=BD=20=EC=99=B8=EB=B6=80=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=EC=8B=9C=20=EC=B0=BD=EB=8B=AB=EA=B8=B0=20=EB=A1=9C=EC=A7=81?= =?UTF-8?q?=EC=9D=84=20id=20=EB=8C=80=EC=8B=A0=20ref=20=EB=A5=BC=20?= =?UTF-8?q?=ED=99=9C=EC=9A=A9=ED=95=98=EC=97=AC=20=EC=88=98=EC=A0=95(#120)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AutoCompleteContainer.styled.ts | 25 ++++++++++-- .../AutoCompleteContainer.tsx | 28 +++++++------ .../AutoCompleteLoading.tsx | 11 +++++ .../searchPageForm/SearchPageForm.styled.ts | 26 +++++------- .../search/searchPageForm/SearchPageForm.tsx | 40 +++++++++++-------- 5 files changed, 80 insertions(+), 50 deletions(-) create mode 100644 src/components/search/autoCompleteContainer/AutoCompleteLoading.tsx diff --git a/src/components/search/autoCompleteContainer/AutoCompleteContainer.styled.ts b/src/components/search/autoCompleteContainer/AutoCompleteContainer.styled.ts index deb3d26..a3d751c 100644 --- a/src/components/search/autoCompleteContainer/AutoCompleteContainer.styled.ts +++ b/src/components/search/autoCompleteContainer/AutoCompleteContainer.styled.ts @@ -1,8 +1,10 @@ import styled from 'styled-components'; -export const ItemWrapper = styled.div` - padding: 15px; +export const OptionWrapper = styled.div` + padding: 16px; + font-size: 1.4rem; + cursor: pointer; &:hover { background-color: lightgrey; @@ -10,7 +12,24 @@ export const ItemWrapper = styled.div` `; export const NoResultWrapper = styled.span` - padding: 15px; + padding: 16px; + font-size: 1.4rem; + + box-shadow: 2px 2px 2px black; +`; + +export const AutoCompleteWrapper = styled.div` + position: absolute; + display: flex; + flex-direction: column; + gap: 10px; + + width: 320px; + margin: 0 0 0 20px; + + background-color: white; + box-shadow: 2px 2px 2px black; + z-index: 1; `; diff --git a/src/components/search/autoCompleteContainer/AutoCompleteContainer.tsx b/src/components/search/autoCompleteContainer/AutoCompleteContainer.tsx index 154d336..318060b 100644 --- a/src/components/search/autoCompleteContainer/AutoCompleteContainer.tsx +++ b/src/components/search/autoCompleteContainer/AutoCompleteContainer.tsx @@ -1,27 +1,29 @@ import { useSearchAutoCompleteQuery } from '@/hooks/useSearchAutoCompleteQuery'; import { useRouter } from 'next/navigation'; import * as S from './AutoCompleteContainer.styled'; +import { RefObject } from 'react'; interface AutoCompleteContainerProps { searchInput: string; + autoCompleteRef: RefObject; } -const AutoCompleteContainer = ({ searchInput }: AutoCompleteContainerProps) => { +const AutoCompleteContainer = ({ searchInput, autoCompleteRef }: AutoCompleteContainerProps) => { const router = useRouter(); - const { data: dropdownTitleList } = useSearchAutoCompleteQuery(searchInput); - - if (dropdownTitleList.length === 0) { - return 검색 결과가 없습니다.; - } + const { data: autoCompleteList } = useSearchAutoCompleteQuery(searchInput); return ( - <> - {dropdownTitleList.map((title, idx) => ( - router.push(`search/?search=${title}`)}> - {title} - - ))} - + + {autoCompleteList.length > 0 ? ( + autoCompleteList.map((title, idx) => ( + router.push(`search/?search=${title}`)}> + {title} + + )) + ) : ( + 검색 결과가 없습니다. + )} + ); }; diff --git a/src/components/search/autoCompleteContainer/AutoCompleteLoading.tsx b/src/components/search/autoCompleteContainer/AutoCompleteLoading.tsx new file mode 100644 index 0000000..613e9ec --- /dev/null +++ b/src/components/search/autoCompleteContainer/AutoCompleteLoading.tsx @@ -0,0 +1,11 @@ +import * as S from './AutoCompleteContainer.styled'; + +const AutoCompleteLoading = () => { + return ( + + 검색중... + + ); +}; + +export default AutoCompleteLoading; diff --git a/src/components/search/searchPageForm/SearchPageForm.styled.ts b/src/components/search/searchPageForm/SearchPageForm.styled.ts index 1f98cbd..43f052b 100644 --- a/src/components/search/searchPageForm/SearchPageForm.styled.ts +++ b/src/components/search/searchPageForm/SearchPageForm.styled.ts @@ -1,35 +1,27 @@ import styled from 'styled-components'; -export const FormWrapper = styled.form``; +export const FormWrapper = styled.form` + position: relative; +`; export const SearchBarInput = styled.input` + width: 32rem; + height: 2.5rem; + padding: 10px 10px 10px 30px; + border: none; + background: url('/img/search_bar.png'); background-repeat: no-repeat; background-size: contain; - border: none; + font-size: 2rem; font-family: Pretendard; - padding: 10px; - padding-left: 30px; - width: 55rem; - height: 2.5rem; &:focus { outline: none; } `; -export const BoxWrapper = styled.div` - display: flex; - flex-direction: column; - width: 40vw; - background-color: white; - margin-left: 2%; - gap: 10px; - box-shadow: 2px 2px 2px black; - z-index: 1; -`; - export const NoResultWrapper = styled.span` padding: 15px; font-size: 1.4rem; diff --git a/src/components/search/searchPageForm/SearchPageForm.tsx b/src/components/search/searchPageForm/SearchPageForm.tsx index 18fd33e..e711057 100644 --- a/src/components/search/searchPageForm/SearchPageForm.tsx +++ b/src/components/search/searchPageForm/SearchPageForm.tsx @@ -1,8 +1,9 @@ -import { Suspense, useEffect } from 'react'; +import { Suspense, useEffect, useRef } from 'react'; import useDebounceValue from '@/hooks/useDebounce'; import useSearchForm from '@/hooks/useSearchForm'; import AutoCompleteContainer from '../autoCompleteContainer/AutoCompleteContainer'; import * as S from './SearchPageForm.styled'; +import AutoCompleteLoading from '../autoCompleteContainer/AutoCompleteLoading'; const SearchPageForm = ({ searchKeyword }: { searchKeyword?: string }) => { const { values, isFocused, handleFocus, handleBlur, handleChange, handleSearchSubmit } = useSearchForm({ @@ -10,36 +11,41 @@ const SearchPageForm = ({ searchKeyword }: { searchKeyword?: string }) => { }); const debounceSearchInput = useDebounceValue(values.searchInput, 300); + const inputRef = useRef(null); + const autoCompleteRef = useRef(null); + + const isSearching = isFocused && values.searchInput.length > 0; + useEffect(() => { - const body = document.querySelector('body')!; - body.addEventListener('click', (e: MouseEvent) => { - if (e.target instanceof HTMLDivElement && e.target.id !== 'complete') { - handleBlur(); - } - }); - return body.removeEventListener('click', (e) => { - if (e.target instanceof HTMLDivElement && e.target.id !== 'complete') { + const handleOutsideClose = (e: MouseEvent) => { + const isOutsideDropdown = + isFocused && + !autoCompleteRef.current?.contains(e.target as Node) && + !inputRef.current?.contains(e.target as Node); + + if (isOutsideDropdown) { handleBlur(); } - }); - }, []); + }; + document.addEventListener('click', handleOutsideClose); + + return () => document.removeEventListener('click', handleOutsideClose); + }, [isFocused]); return ( - - 검색중...}> - {isFocused && values.searchInput.length > 0 && } - - + }> + {isSearching && } + ); }; From 83088d28c0047bc3dda47be3a24954ba4f33387a Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Wed, 19 Jun 2024 15:21:52 +0900 Subject: [PATCH 12/20] =?UTF-8?q?refactor:=20=EC=9E=90=EB=8F=99=EC=99=84?= =?UTF-8?q?=EC=84=B1=EC=B0=BD=20=EA=B4=80=EB=A6=AC=ED=95=98=EB=8A=94=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=EC=9D=84=20useFocusSearchInput=20=EC=BB=A4?= =?UTF-8?q?=EC=8A=A4=ED=85=80=20=ED=9B=85=EC=9C=BC=EB=A1=9C=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC=ED=95=98=EA=B3=A0=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20form=20=ED=98=95=EC=8B=9D=20=EC=A0=9C=EA=B1=B0(#120?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../searchPageForm/SearchPageForm.styled.ts | 2 +- .../search/searchPageForm/SearchPageForm.tsx | 56 ++++++++----------- src/hooks/useFocusSearchInput.ts | 33 +++++++++++ src/hooks/useInput.ts | 31 ++++++++++ src/hooks/useSearchForm.ts | 47 ---------------- 5 files changed, 89 insertions(+), 80 deletions(-) create mode 100644 src/hooks/useFocusSearchInput.ts create mode 100644 src/hooks/useInput.ts delete mode 100644 src/hooks/useSearchForm.ts diff --git a/src/components/search/searchPageForm/SearchPageForm.styled.ts b/src/components/search/searchPageForm/SearchPageForm.styled.ts index 43f052b..7f88976 100644 --- a/src/components/search/searchPageForm/SearchPageForm.styled.ts +++ b/src/components/search/searchPageForm/SearchPageForm.styled.ts @@ -1,6 +1,6 @@ import styled from 'styled-components'; -export const FormWrapper = styled.form` +export const SearchInputWrapper = styled.div` position: relative; `; diff --git a/src/components/search/searchPageForm/SearchPageForm.tsx b/src/components/search/searchPageForm/SearchPageForm.tsx index e711057..1ac05d8 100644 --- a/src/components/search/searchPageForm/SearchPageForm.tsx +++ b/src/components/search/searchPageForm/SearchPageForm.tsx @@ -1,52 +1,44 @@ -import { Suspense, useEffect, useRef } from 'react'; +import { Suspense } from 'react'; +import * as S from './SearchPageForm.styled'; import useDebounceValue from '@/hooks/useDebounce'; -import useSearchForm from '@/hooks/useSearchForm'; import AutoCompleteContainer from '../autoCompleteContainer/AutoCompleteContainer'; -import * as S from './SearchPageForm.styled'; import AutoCompleteLoading from '../autoCompleteContainer/AutoCompleteLoading'; +import useFocusSearchInput from '@/hooks/useFocusSearchInput'; +import useInput from '@/hooks/useInput'; const SearchPageForm = ({ searchKeyword }: { searchKeyword?: string }) => { - const { values, isFocused, handleFocus, handleBlur, handleChange, handleSearchSubmit } = useSearchForm({ - initialValue: { searchInput: searchKeyword || '', searchHeaderInput: searchKeyword || '' }, + const { + value: searchInput, + isFocused, + handleChange, + handleFocus, + handleBlur, + handleKeydown, + } = useInput(searchKeyword || ''); + + const debounceSearchInput = useDebounceValue(searchInput, 300); + + const { inputRef, autoCompleteRef, isSearching } = useFocusSearchInput({ + isFocused, + searchInput, + handleBlur, }); - const debounceSearchInput = useDebounceValue(values.searchInput, 300); - - const inputRef = useRef(null); - const autoCompleteRef = useRef(null); - - const isSearching = isFocused && values.searchInput.length > 0; - - useEffect(() => { - const handleOutsideClose = (e: MouseEvent) => { - const isOutsideDropdown = - isFocused && - !autoCompleteRef.current?.contains(e.target as Node) && - !inputRef.current?.contains(e.target as Node); - - if (isOutsideDropdown) { - handleBlur(); - } - }; - document.addEventListener('click', handleOutsideClose); - - return () => document.removeEventListener('click', handleOutsideClose); - }, [isFocused]); return ( - + }> {isSearching && } - + ); }; diff --git a/src/hooks/useFocusSearchInput.ts b/src/hooks/useFocusSearchInput.ts new file mode 100644 index 0000000..ba88615 --- /dev/null +++ b/src/hooks/useFocusSearchInput.ts @@ -0,0 +1,33 @@ +import { useEffect, useRef } from 'react'; + +interface UseFocusSearchInputProps { + isFocused: boolean; + searchInput: string; + handleBlur: () => void; +} + +const useFocusSearchInput = ({ isFocused, searchInput, handleBlur }: UseFocusSearchInputProps) => { + const inputRef = useRef(null); + const autoCompleteRef = useRef(null); + const isSearching = isFocused && searchInput.length > 0; + + useEffect(() => { + const handleOutsideClose = (e: MouseEvent) => { + const isOutsideArea = + isFocused && + !autoCompleteRef.current?.contains(e.target as Node) && + !inputRef.current?.contains(e.target as Node); + + if (isOutsideArea) { + handleBlur(); + } + }; + document.addEventListener('click', handleOutsideClose); + + return () => document.removeEventListener('click', handleOutsideClose); + }, [isFocused, handleBlur]); + + return { inputRef, autoCompleteRef, isSearching }; +}; + +export default useFocusSearchInput; diff --git a/src/hooks/useInput.ts b/src/hooks/useInput.ts new file mode 100644 index 0000000..50f7d1d --- /dev/null +++ b/src/hooks/useInput.ts @@ -0,0 +1,31 @@ +import { useRouter } from 'next/navigation'; +import { ChangeEvent, useCallback, useState } from 'react'; + +const useInput = (initialValue: string) => { + const router = useRouter(); + const [value, setValue] = useState(initialValue); + const [isFocused, setIsFocused] = useState(false); + + const handleChange = (e: ChangeEvent) => { + setValue(e.target.value); + }; + + const handleFocus = () => { + setIsFocused(true); + }; + + const handleBlur = useCallback(() => { + setIsFocused(false); + }, []); + + const handleKeydown = (e: React.KeyboardEvent) => { + if (e.code === 'Enter') { + handleBlur(); + router.push(`search/?search=${value}`); + } + }; + + return { value, isFocused, handleChange, handleFocus, handleBlur, handleKeydown }; +}; + +export default useInput; diff --git a/src/hooks/useSearchForm.ts b/src/hooks/useSearchForm.ts deleted file mode 100644 index 4103966..0000000 --- a/src/hooks/useSearchForm.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { useRouter } from 'next/navigation'; -import { useState } from 'react'; - -type SearchInputType = 'searchInput' | 'searchHeaderInput'; - -interface useFormProps { - initialValue: Record; -} - -const useSearchForm = ({ initialValue }: useFormProps) => { - const router = useRouter(); - const [values, setValues] = useState(initialValue); - - const [isFocused, setIsFocused] = useState(false); - - const handleFocus = () => { - setIsFocused(true); - }; - - const handleBlur = () => { - setIsFocused(false); - }; - - const handleChange = (e: React.ChangeEvent) => { - const { name, value } = e.target; - setValues({ ...values, [name]: value }); - }; - - const handleSearchSubmit = (e: React.ChangeEvent) => { - e.preventDefault(); - setIsFocused(false); - const { name } = e.target; - - if (name === 'searchInput' || name === 'searchHeaderInput') { - if (values[name].length === 0) { - alert('검색어를 입력해주세요'); - return; - } - setValues({ ...values, searchInput: values[name], searchHeaderInput: '' }); - router.push(`search/?search=${values[name]}`); - } - }; - - return { values, isFocused, handleChange, handleSearchSubmit, handleFocus, handleBlur }; -}; - -export default useSearchForm; From 057f2345b797acf71ddf95de0fe288c17722cbb8 Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Wed, 19 Jun 2024 16:28:08 +0900 Subject: [PATCH 13/20] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20file=20deps=EB=A5=BC=20=EC=A0=9C=EA=B1=B0=ED=95=98?= =?UTF-8?q?=EA=B3=A0,=20params=EB=A5=BC=20=EA=B0=81=EA=B0=81=EC=9D=98=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=9D=BD=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95(#120)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/NavBar.tsx | 6 ++-- src/components/search/SearchForm.tsx | 18 ---------- .../searchBodySection/SearchBodySection.tsx | 11 +++--- .../SearchHeaderForm.styled.ts | 2 -- .../searchHeaderForm/SearchHeaderForm.tsx | 36 +++++++++---------- .../search/searchPageForm/SearchPageForm.tsx | 7 ++-- src/hooks/useKeywordParams.ts | 11 ++++++ 7 files changed, 40 insertions(+), 51 deletions(-) delete mode 100644 src/components/search/SearchForm.tsx create mode 100644 src/hooks/useKeywordParams.ts diff --git a/src/components/common/NavBar.tsx b/src/components/common/NavBar.tsx index 8e7e1d4..30a7242 100644 --- a/src/components/common/NavBar.tsx +++ b/src/components/common/NavBar.tsx @@ -2,13 +2,13 @@ import { styled } from 'styled-components'; import Image from 'next/image'; -import SearchForm from '../search/SearchForm'; import { useRouter } from 'next/navigation'; import { token } from '@/app/recoilContextProvider'; import { useRecoilValue } from 'recoil'; import { getRandomDoc } from '@/apis/viewer'; import { useEffect, useState } from 'react'; import { useMediaQuery } from 'react-responsive'; +import SearchHeaderForm from '../search/searchHeaderForm/SearchHeaderForm'; export interface IMenu { src: string; @@ -65,11 +65,11 @@ const NavBar = () => { {isMobile ? ( - + ) : ( - + )} diff --git a/src/components/search/SearchForm.tsx b/src/components/search/SearchForm.tsx deleted file mode 100644 index 658c86b..0000000 --- a/src/components/search/SearchForm.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import SearchHeaderForm from './searchHeaderForm/SearchHeaderForm'; -import SearchPageForm from './searchPageForm/SearchPageForm'; - -interface SearchFormProps { - type: string; - searchKeyword?: string; -} - -const SearchForm = ({ type, searchKeyword }: SearchFormProps) => { - return ( - <> - {type === 'search' && } - {type === 'header' && } - - ); -}; - -export default SearchForm; diff --git a/src/components/search/searchBodySection/SearchBodySection.tsx b/src/components/search/searchBodySection/SearchBodySection.tsx index 85eac09..7997bc7 100644 --- a/src/components/search/searchBodySection/SearchBodySection.tsx +++ b/src/components/search/searchBodySection/SearchBodySection.tsx @@ -1,17 +1,16 @@ 'use client'; -import { useRouter, useSearchParams } from 'next/navigation'; +import { useRouter } from 'next/navigation'; import { useEffect } from 'react'; -import SearchForm from '../SearchForm'; import * as S from './SearchBodySection.styled'; import { useSearchQuery } from '@/hooks/useSearchQuery'; import SearchResultContainer from '../SearchResult'; +import SearchPageForm from '../searchPageForm/SearchPageForm'; +import useKeywordParams from '@/hooks/useKeywordParams'; const SearchBodySection = () => { const router = useRouter(); - const params = useSearchParams(); - - const searchKeyword = params.get('search') || '멋쟁이사자처럼'; + const { searchKeyword } = useKeywordParams(); const { data: searchResult } = useSearchQuery(searchKeyword); useEffect(() => { @@ -37,7 +36,7 @@ const SearchBodySection = () => { sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" /> - + diff --git a/src/components/search/searchHeaderForm/SearchHeaderForm.styled.ts b/src/components/search/searchHeaderForm/SearchHeaderForm.styled.ts index 0171103..75dbbb2 100644 --- a/src/components/search/searchHeaderForm/SearchHeaderForm.styled.ts +++ b/src/components/search/searchHeaderForm/SearchHeaderForm.styled.ts @@ -1,7 +1,5 @@ import styled from 'styled-components'; -export const FormWrapper = styled.form``; - export const SearchWrapper = styled.div` display: flex; align-items: center; diff --git a/src/components/search/searchHeaderForm/SearchHeaderForm.tsx b/src/components/search/searchHeaderForm/SearchHeaderForm.tsx index 9fc1ccc..8ae2656 100644 --- a/src/components/search/searchHeaderForm/SearchHeaderForm.tsx +++ b/src/components/search/searchHeaderForm/SearchHeaderForm.tsx @@ -1,28 +1,26 @@ -import useSearchForm from '@/hooks/useSearchForm'; import Image from 'next/image'; import React from 'react'; import * as S from './SearchHeaderForm.styled'; +import useInput from '@/hooks/useInput'; +import useKeywordParams from '@/hooks/useKeywordParams'; -const SearchHeaderForm = ({ searchKeyword }: { searchKeyword?: string }) => { - const { values, handleChange, handleSearchSubmit } = useSearchForm({ - initialValue: { searchInput: searchKeyword || '', searchHeaderInput: searchKeyword || '' }, - }); +const SearchHeaderForm = () => { + const { searchKeyword } = useKeywordParams(); + const { value: searchHeaderInput, handleChange, handleKeydown } = useInput(searchKeyword); return ( - - - - {'search'} - - - - + + + {'search'} + + + ); }; diff --git a/src/components/search/searchPageForm/SearchPageForm.tsx b/src/components/search/searchPageForm/SearchPageForm.tsx index 1ac05d8..75e44d8 100644 --- a/src/components/search/searchPageForm/SearchPageForm.tsx +++ b/src/components/search/searchPageForm/SearchPageForm.tsx @@ -5,8 +5,10 @@ import AutoCompleteContainer from '../autoCompleteContainer/AutoCompleteContaine import AutoCompleteLoading from '../autoCompleteContainer/AutoCompleteLoading'; import useFocusSearchInput from '@/hooks/useFocusSearchInput'; import useInput from '@/hooks/useInput'; +import useKeywordParams from '@/hooks/useKeywordParams'; -const SearchPageForm = ({ searchKeyword }: { searchKeyword?: string }) => { +const SearchPageForm = () => { + const { searchKeyword } = useKeywordParams(); const { value: searchInput, isFocused, @@ -14,8 +16,7 @@ const SearchPageForm = ({ searchKeyword }: { searchKeyword?: string }) => { handleFocus, handleBlur, handleKeydown, - } = useInput(searchKeyword || ''); - + } = useInput(searchKeyword); const debounceSearchInput = useDebounceValue(searchInput, 300); const { inputRef, autoCompleteRef, isSearching } = useFocusSearchInput({ diff --git a/src/hooks/useKeywordParams.ts b/src/hooks/useKeywordParams.ts new file mode 100644 index 0000000..25452df --- /dev/null +++ b/src/hooks/useKeywordParams.ts @@ -0,0 +1,11 @@ +import { useSearchParams } from 'next/navigation'; + +const useKeywordParams = () => { + const params = useSearchParams(); + + const searchKeyword = params.get('search') || '멋쟁이사자처럼'; + + return { searchKeyword }; +}; + +export default useKeywordParams; From e8dfa5e208700aad682f96d41bc8f3fd51fe9a7a Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Wed, 19 Jun 2024 16:29:11 +0900 Subject: [PATCH 14/20] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20API=20?= =?UTF-8?q?=ED=98=B8=EC=B6=9C=20=EC=8B=9C,=20=EA=B2=80=EC=83=89=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9E=85=EB=A0=A5=EA=B0=92?= =?UTF-8?q?=EA=B3=BC=20Navbar=20=EC=9E=85=EB=A0=A5=EA=B0=92=20=EB=8F=99?= =?UTF-8?q?=EA=B8=B0=ED=99=94=ED=95=98=EA=B8=B0(#120)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useInput.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/hooks/useInput.ts b/src/hooks/useInput.ts index 50f7d1d..61d5006 100644 --- a/src/hooks/useInput.ts +++ b/src/hooks/useInput.ts @@ -1,5 +1,5 @@ import { useRouter } from 'next/navigation'; -import { ChangeEvent, useCallback, useState } from 'react'; +import { ChangeEvent, useCallback, useEffect, useState } from 'react'; const useInput = (initialValue: string) => { const router = useRouter(); @@ -25,6 +25,11 @@ const useInput = (initialValue: string) => { } }; + // SearchInput과 HeaderSearchInput 동기화 + useEffect(() => { + setValue(initialValue); + }, [initialValue]); + return { value, isFocused, handleChange, handleFocus, handleBlur, handleKeydown }; }; From bfd53610b7edd79f455b8ab7ea4d5db730992b6d Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Wed, 19 Jun 2024 16:31:35 +0900 Subject: [PATCH 15/20] =?UTF-8?q?chore:=20form=20=ED=83=9C=EA=B7=B8=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0=EB=A1=9C=20=EC=9D=B8=ED=95=B4=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=EB=AA=85=20=EB=B3=80=EA=B2=BD(#120)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/NavBar.tsx | 6 +++--- .../search/searchBodySection/SearchBodySection.tsx | 4 ++-- .../searchHeaderInput.styled.ts} | 0 .../searchHeaderInput.tsx} | 6 +++--- .../SearchInput.styled.ts} | 0 .../SearchPageForm.tsx => searchInput/SearchInput.tsx} | 6 +++--- 6 files changed, 11 insertions(+), 11 deletions(-) rename src/components/search/{searchHeaderForm/SearchHeaderForm.styled.ts => searchHeaderInput/searchHeaderInput.styled.ts} (100%) rename src/components/search/{searchHeaderForm/SearchHeaderForm.tsx => searchHeaderInput/searchHeaderInput.tsx} (85%) rename src/components/search/{searchPageForm/SearchPageForm.styled.ts => searchInput/SearchInput.styled.ts} (100%) rename src/components/search/{searchPageForm/SearchPageForm.tsx => searchInput/SearchInput.tsx} (92%) diff --git a/src/components/common/NavBar.tsx b/src/components/common/NavBar.tsx index 30a7242..c547e7c 100644 --- a/src/components/common/NavBar.tsx +++ b/src/components/common/NavBar.tsx @@ -8,7 +8,7 @@ import { useRecoilValue } from 'recoil'; import { getRandomDoc } from '@/apis/viewer'; import { useEffect, useState } from 'react'; import { useMediaQuery } from 'react-responsive'; -import SearchHeaderForm from '../search/searchHeaderForm/SearchHeaderForm'; +import SearchHeaderInput from '../search/searchHeaderInput/searchHeaderInput'; export interface IMenu { src: string; @@ -65,11 +65,11 @@ const NavBar = () => { {isMobile ? ( - + ) : ( - + )} diff --git a/src/components/search/searchBodySection/SearchBodySection.tsx b/src/components/search/searchBodySection/SearchBodySection.tsx index 7997bc7..c4ab82e 100644 --- a/src/components/search/searchBodySection/SearchBodySection.tsx +++ b/src/components/search/searchBodySection/SearchBodySection.tsx @@ -5,7 +5,7 @@ import { useEffect } from 'react'; import * as S from './SearchBodySection.styled'; import { useSearchQuery } from '@/hooks/useSearchQuery'; import SearchResultContainer from '../SearchResult'; -import SearchPageForm from '../searchPageForm/SearchPageForm'; +import SearchInput from '../searchInput/SearchInput'; import useKeywordParams from '@/hooks/useKeywordParams'; const SearchBodySection = () => { @@ -36,7 +36,7 @@ const SearchBodySection = () => { sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" /> - + diff --git a/src/components/search/searchHeaderForm/SearchHeaderForm.styled.ts b/src/components/search/searchHeaderInput/searchHeaderInput.styled.ts similarity index 100% rename from src/components/search/searchHeaderForm/SearchHeaderForm.styled.ts rename to src/components/search/searchHeaderInput/searchHeaderInput.styled.ts diff --git a/src/components/search/searchHeaderForm/SearchHeaderForm.tsx b/src/components/search/searchHeaderInput/searchHeaderInput.tsx similarity index 85% rename from src/components/search/searchHeaderForm/SearchHeaderForm.tsx rename to src/components/search/searchHeaderInput/searchHeaderInput.tsx index 8ae2656..b31840f 100644 --- a/src/components/search/searchHeaderForm/SearchHeaderForm.tsx +++ b/src/components/search/searchHeaderInput/searchHeaderInput.tsx @@ -1,10 +1,10 @@ import Image from 'next/image'; import React from 'react'; -import * as S from './SearchHeaderForm.styled'; +import * as S from './searchHeaderInput.styled'; import useInput from '@/hooks/useInput'; import useKeywordParams from '@/hooks/useKeywordParams'; -const SearchHeaderForm = () => { +const SearchHeaderInput = () => { const { searchKeyword } = useKeywordParams(); const { value: searchHeaderInput, handleChange, handleKeydown } = useInput(searchKeyword); @@ -24,4 +24,4 @@ const SearchHeaderForm = () => { ); }; -export default SearchHeaderForm; +export default SearchHeaderInput; diff --git a/src/components/search/searchPageForm/SearchPageForm.styled.ts b/src/components/search/searchInput/SearchInput.styled.ts similarity index 100% rename from src/components/search/searchPageForm/SearchPageForm.styled.ts rename to src/components/search/searchInput/SearchInput.styled.ts diff --git a/src/components/search/searchPageForm/SearchPageForm.tsx b/src/components/search/searchInput/SearchInput.tsx similarity index 92% rename from src/components/search/searchPageForm/SearchPageForm.tsx rename to src/components/search/searchInput/SearchInput.tsx index 75e44d8..9a19ab0 100644 --- a/src/components/search/searchPageForm/SearchPageForm.tsx +++ b/src/components/search/searchInput/SearchInput.tsx @@ -1,5 +1,5 @@ import { Suspense } from 'react'; -import * as S from './SearchPageForm.styled'; +import * as S from './SearchInput.styled'; import useDebounceValue from '@/hooks/useDebounce'; import AutoCompleteContainer from '../autoCompleteContainer/AutoCompleteContainer'; import AutoCompleteLoading from '../autoCompleteContainer/AutoCompleteLoading'; @@ -7,7 +7,7 @@ import useFocusSearchInput from '@/hooks/useFocusSearchInput'; import useInput from '@/hooks/useInput'; import useKeywordParams from '@/hooks/useKeywordParams'; -const SearchPageForm = () => { +const SearchInput = () => { const { searchKeyword } = useKeywordParams(); const { value: searchInput, @@ -43,4 +43,4 @@ const SearchPageForm = () => { ); }; -export default SearchPageForm; +export default SearchInput; From 98d45cbe3b3d34f8deedec3abb98b8f27373e2b8 Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Wed, 19 Jun 2024 16:41:25 +0900 Subject: [PATCH 16/20] =?UTF-8?q?refactor:=20=EA=B2=80=EC=83=89=EC=96=B4?= =?UTF-8?q?=EC=99=80=20100%=20=EC=9D=BC=EC=B9=98=ED=95=98=EB=8A=94=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=EA=B0=80=20=EC=9E=88=EB=8A=94=20?= =?UTF-8?q?=EA=B2=BD=EC=9A=B0=20=EB=9D=BC=EC=9A=B0=ED=8C=85=ED=95=98?= =?UTF-8?q?=EB=8A=94=20=EC=BB=A4=EC=8A=A4=ED=85=80=20=ED=9B=85=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC(#120)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../searchBodySection/SearchBodySection.tsx | 13 +++--------- src/hooks/useDetermineDirectRouter.ts | 20 +++++++++++++++++++ 2 files changed, 23 insertions(+), 10 deletions(-) create mode 100644 src/hooks/useDetermineDirectRouter.ts diff --git a/src/components/search/searchBodySection/SearchBodySection.tsx b/src/components/search/searchBodySection/SearchBodySection.tsx index c4ab82e..a52e0a3 100644 --- a/src/components/search/searchBodySection/SearchBodySection.tsx +++ b/src/components/search/searchBodySection/SearchBodySection.tsx @@ -1,27 +1,20 @@ 'use client'; -import { useRouter } from 'next/navigation'; -import { useEffect } from 'react'; import * as S from './SearchBodySection.styled'; import { useSearchQuery } from '@/hooks/useSearchQuery'; import SearchResultContainer from '../SearchResult'; import SearchInput from '../searchInput/SearchInput'; import useKeywordParams from '@/hooks/useKeywordParams'; +import useDetermineDirectRouter from '@/hooks/useDetermineDirectRouter'; const SearchBodySection = () => { - const router = useRouter(); const { searchKeyword } = useKeywordParams(); const { data: searchResult } = useSearchQuery(searchKeyword); - useEffect(() => { - if (searchResult && searchResult.kind === 'searchResult') { - const encodedTitle = encodeURIComponent(searchKeyword); - router.push(`viewer?title=${encodedTitle}`); - } - }, [searchResult, router, searchKeyword]); + useDetermineDirectRouter({ searchKeyword, kind: searchResult.kind }); if (searchResult.kind === 'searchResult') { - return; + return null; } return ( diff --git a/src/hooks/useDetermineDirectRouter.ts b/src/hooks/useDetermineDirectRouter.ts new file mode 100644 index 0000000..5146e84 --- /dev/null +++ b/src/hooks/useDetermineDirectRouter.ts @@ -0,0 +1,20 @@ +import { useRouter } from 'next/navigation'; +import { useEffect } from 'react'; + +interface UseDetermineDirectRouterProps { + kind: 'searchResult' | 'searchResultList'; + searchKeyword: string; +} + +const useDetermineDirectRouter = ({ kind, searchKeyword }: UseDetermineDirectRouterProps) => { + const router = useRouter(); + + useEffect(() => { + if (kind === 'searchResult') { + const encodedTitle = encodeURIComponent(searchKeyword); + router.push(`viewer?title=${encodedTitle}`); + } + }, [kind, router, searchKeyword]); +}; + +export default useDetermineDirectRouter; From a897c572e089963d4268457654268e25dad7b9c8 Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Wed, 19 Jun 2024 16:49:50 +0900 Subject: [PATCH 17/20] =?UTF-8?q?chore:=20=ED=8C=8C=EC=9D=BC=EB=AA=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95(#120)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../search/{SearchResult.tsx => SearchResultContainer.tsx} | 0 src/components/search/searchBodySection/SearchBodySection.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/components/search/{SearchResult.tsx => SearchResultContainer.tsx} (100%) diff --git a/src/components/search/SearchResult.tsx b/src/components/search/SearchResultContainer.tsx similarity index 100% rename from src/components/search/SearchResult.tsx rename to src/components/search/SearchResultContainer.tsx diff --git a/src/components/search/searchBodySection/SearchBodySection.tsx b/src/components/search/searchBodySection/SearchBodySection.tsx index a52e0a3..c77ee72 100644 --- a/src/components/search/searchBodySection/SearchBodySection.tsx +++ b/src/components/search/searchBodySection/SearchBodySection.tsx @@ -2,7 +2,7 @@ import * as S from './SearchBodySection.styled'; import { useSearchQuery } from '@/hooks/useSearchQuery'; -import SearchResultContainer from '../SearchResult'; +import SearchResultContainer from '../SearchResultContainer'; import SearchInput from '../searchInput/SearchInput'; import useKeywordParams from '@/hooks/useKeywordParams'; import useDetermineDirectRouter from '@/hooks/useDetermineDirectRouter'; From b7d9a4e27fc03b4168fae8aeee38f9480fa602a4 Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Wed, 19 Jun 2024 16:59:42 +0900 Subject: [PATCH 18/20] =?UTF-8?q?fix:=20=EB=AC=B8=EC=84=9C=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99=ED=95=B4?= =?UTF-8?q?=EB=8F=84=20Navbar=20=EC=9E=85=EB=A0=A5=EA=B0=92=20=EC=9C=A0?= =?UTF-8?q?=EC=A7=80(#120)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useKeywordParams.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useKeywordParams.ts b/src/hooks/useKeywordParams.ts index 25452df..e383fd6 100644 --- a/src/hooks/useKeywordParams.ts +++ b/src/hooks/useKeywordParams.ts @@ -3,7 +3,7 @@ import { useSearchParams } from 'next/navigation'; const useKeywordParams = () => { const params = useSearchParams(); - const searchKeyword = params.get('search') || '멋쟁이사자처럼'; + const searchKeyword = params.get('search') || params.get('title') || '멋쟁이사자처럼'; return { searchKeyword }; }; From 46b89461fcdc7ad400d747fa72ffcdfaec3628e2 Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Wed, 19 Jun 2024 17:30:12 +0900 Subject: [PATCH 19/20] =?UTF-8?q?design:=20=EA=B2=80=EC=83=89=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EB=B0=98=EC=9D=91=ED=98=95=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EC=88=98=EC=A0=95(#120)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/global.css | 116 +++++++++--------- .../AutoCompleteContainer.styled.ts | 2 +- .../SearchBodySection.styled.ts | 2 +- .../searchBodySection/SearchBodySection.tsx | 8 +- .../search/searchFound/SearchFound.styled.ts | 13 +- src/styles/global.css | 73 ----------- 6 files changed, 70 insertions(+), 144 deletions(-) delete mode 100644 src/styles/global.css diff --git a/src/app/global.css b/src/app/global.css index b2d0044..0a6ec55 100644 --- a/src/app/global.css +++ b/src/app/global.css @@ -4,24 +4,28 @@ font-weight: normal; font-style: normal; } + @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff'); font-weight: 300; font-style: normal; } + @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal; } + @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; } + @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff'); @@ -30,75 +34,75 @@ } html { - -webkit-text-size-adjust​: none; - width: 100%; - height: 100%; - margin: 0; - font-size: 62.5%; - overflow: scroll; - scroll-snap-type: y mandatory; - scroll-padding-top: 65px; - scrollbar-width: none; - -ms-overflow-style: none; - display: flex; - justify-content: center; - background: #4c4df5; - background-image: linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px), - linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px); - background-size: - 100px 100px, - 100px 100px; - background-position: - -1px -1px, - -1px -1px; + -webkit-text-size-adjust​: none; + width: 100%; + height: 100%; + margin: 0; + font-size: 62.5%; + overflow: scroll; + scroll-snap-type: y mandatory; + scroll-padding-top: 65px; + scrollbar-width: none; + -ms-overflow-style: none; + display: flex; + justify-content: center; + background: #4c4df5; + background-image: linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px); + background-size: + 100px 100px, + 100px 100px; + background-position: + -1px -1px, + -1px -1px; } html::-webkit-scrollbar { - display: none; + display: none; } body { - width: 100%; - height: fit-content; - /* 화면 스크롤 방지를 위해 최소높이 지정 */ - min-height: 100%; - margin: 0; - padding: 0; - /* 드래그 방지 */ - /* -webkit-user-select: none; + width: 100%; + height: fit-content; + /* 화면 스크롤 방지를 위해 최소높이 지정 */ + min-height: 100%; + margin: 0; + padding: 0; + /* 드래그 방지 */ + /* -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; */ - } +} - @media (min-width:0px) { - html { - font-size: 8px; - } +@media (min-width:0px) { + html { + font-size: 8px; } +} -/* 타블렛) 화면 너비: 576 ~ */ - @media (min-width:576px) { - html { - font-size: 10px; - } +/* 타블렛) 화면 너비: 768 ~ */ +@media (min-width: 768px) { + html { + font-size: 10px; } +} - /* 데스크톱) 화면 너비: 1024 ~ */ - @media (min-width: 1024px) { - html { - font-size: 10px; - } +/* 데스크톱) 화면 너비: 1024 ~ */ +@media (min-width: 1024px) { + html { + font-size: 10px; } +} - img { - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -o-user-select: none; - user-select: none; - -webkit-user-drag: none; - -khtml-user-drag: none; - -moz-user-drag: none; - -o-user-drag: none; - } +img { + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -o-user-select: none; + user-select: none; + -webkit-user-drag: none; + -khtml-user-drag: none; + -moz-user-drag: none; + -o-user-drag: none; +} diff --git a/src/components/search/autoCompleteContainer/AutoCompleteContainer.styled.ts b/src/components/search/autoCompleteContainer/AutoCompleteContainer.styled.ts index a3d751c..5ca166a 100644 --- a/src/components/search/autoCompleteContainer/AutoCompleteContainer.styled.ts +++ b/src/components/search/autoCompleteContainer/AutoCompleteContainer.styled.ts @@ -25,7 +25,7 @@ export const AutoCompleteWrapper = styled.div` flex-direction: column; gap: 10px; - width: 320px; + width: 32rem; margin: 0 0 0 20px; background-color: white; diff --git a/src/components/search/searchBodySection/SearchBodySection.styled.ts b/src/components/search/searchBodySection/SearchBodySection.styled.ts index d76eb43..2aeac13 100644 --- a/src/components/search/searchBodySection/SearchBodySection.styled.ts +++ b/src/components/search/searchBodySection/SearchBodySection.styled.ts @@ -5,7 +5,7 @@ export const SearchBarWrapper = styled.div` display: flex; flex-direction: column; gap: 20px; - margin-left: 10%; + margin-left: 64px; `; export const TextImageWrapper = styled.div` diff --git a/src/components/search/searchBodySection/SearchBodySection.tsx b/src/components/search/searchBodySection/SearchBodySection.tsx index c77ee72..f382381 100644 --- a/src/components/search/searchBodySection/SearchBodySection.tsx +++ b/src/components/search/searchBodySection/SearchBodySection.tsx @@ -21,13 +21,7 @@ const SearchBodySection = () => { <> - + diff --git a/src/components/search/searchFound/SearchFound.styled.ts b/src/components/search/searchFound/SearchFound.styled.ts index 2d5cfaa..d8bd3b2 100644 --- a/src/components/search/searchFound/SearchFound.styled.ts +++ b/src/components/search/searchFound/SearchFound.styled.ts @@ -6,21 +6,18 @@ export const SearchFoundWrapper = styled.div` flex-direction: column; align-items: center; margin-top: 20px; - @media screen and (max-width: 540px) { - margin-left: 15rem; - } `; export const SearchResultWrapper = styled.div` display: flex; align-items: end; justify-content: center; - gap: 20px; + gap: 2rem; margin: 30px; `; export const LionImageWrapper = styled.div` - width: 13rem; + width: 12rem; display: flex; align-items: center; `; @@ -38,8 +35,12 @@ export const SearchResultBox = styled.div` background-color: white; border: 3px solid black; border-radius: 10px; - padding: 30px; + padding: 2.5rem; cursor: pointer; + + @media screen and (max-width: 540px) { + width: 50vw; + } `; export const SearchResultTitle = styled.div` diff --git a/src/styles/global.css b/src/styles/global.css deleted file mode 100644 index fb20c70..0000000 --- a/src/styles/global.css +++ /dev/null @@ -1,73 +0,0 @@ - -@font-face { - font-family: 'NeoDunggeunmo Pro'; - src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/NeoDunggeunmoPro-Regular.woff2') format('woff2'); - font-weight: normal; - font-style: normal; -} - -html { - -webkit-text-size-adjust​: none; - width: 100%; - height: 100%; - margin: 0; - font-size: 62.5%; - overflow: scroll; - scroll-snap-type: y mandatory; - scroll-padding-top: 65px; - scrollbar-width: none; - -ms-overflow-style: none; - display: flex; - justify-content: center; - font-family: 'Pretendard'; -} - -html::-webkit-scrollbar { - display: none; -} - -body { - width: 100%; - height: fit-content; - /* 화면 스크롤 방지를 위해 최소높이 지정 */ - min-height: 100%; - margin: 0; - padding: 0; - /* 드래그 방지 */ - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - } - - @media (min-width:0px) { - html { - font-size: 8px; - } - } - -/* 타블렛) 화면 너비: 576 ~ */ - @media (min-width:576px) { - html { - font-size: 10px; - } - } - - /* 데스크톱) 화면 너비: 1024 ~ */ - @media (min-width: 1024px) { - html { - font-size: 10px; - } - } - - img { - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -o-user-select: none; - user-select: none; - -webkit-user-drag: none; - -khtml-user-drag: none; - -moz-user-drag: none; - -o-user-drag: none; - } \ No newline at end of file From 2ff5eeaff4c4b64bbc42cdd10beb8b355cd6d7dc Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Wed, 19 Jun 2024 18:05:18 +0900 Subject: [PATCH 20/20] =?UTF-8?q?chore:=20=EC=A4=91=EB=B3=B5=EB=90=98?= =?UTF-8?q?=EB=8A=94=20css=20=EC=A0=9C=EA=B1=B0(#120)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/search/searchInput/SearchInput.styled.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/components/search/searchInput/SearchInput.styled.ts b/src/components/search/searchInput/SearchInput.styled.ts index 7f88976..90a605f 100644 --- a/src/components/search/searchInput/SearchInput.styled.ts +++ b/src/components/search/searchInput/SearchInput.styled.ts @@ -21,9 +21,3 @@ export const SearchBarInput = styled.input` outline: none; } `; - -export const NoResultWrapper = styled.span` - padding: 15px; - font-size: 1.4rem; - box-shadow: 2px 2px 2px black; -`;