From 82aaa227a8e67243e4fe842978c935e06094269c Mon Sep 17 00:00:00 2001 From: kimmiso Date: Mon, 13 May 2024 09:34:27 +0900 Subject: [PATCH] =?UTF-8?q?Feat:=20react=20=ED=8C=8C=EC=9D=BC=20next.js?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20=EB=B0=8F=20=EC=84=A4=EC=A0=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .babelrc | 8 + components/common/Footer.tsx | 62 ++ components/common/Header.tsx | 46 ++ components/common/SocialLinkButton.tsx | 9 + components/common/atoms/Button.tsx | 31 + components/common/atoms/CheckBox.tsx | 33 + components/common/atoms/Input.tsx | 70 ++ components/common/atoms/LinkButton.tsx | 18 + components/common/atoms/LinkButtonStyle.ts | 43 + components/common/atoms/buttonStyle.ts | 87 ++ components/common/atoms/checkBoxStyle.ts | 56 ++ components/common/atoms/inputStyle.ts | 54 ++ components/common/footerStyle.ts | 55 ++ components/common/headerStyle.ts | 46 ++ components/common/interface.ts | 13 + components/folder/ContantList.tsx | 27 + components/folder/FolderButtonList.tsx | 44 + components/folder/FolderContentControll.tsx | 60 ++ components/folder/LinkAddHeader.tsx | 23 + components/folder/PostCard.tsx | 115 +++ components/folder/PostCardStyle.ts | 132 +++ components/folder/SearchInputBox.tsx | 28 + components/loading/Loading.tsx | 24 + components/modal/Modal.tsx | 73 ++ components/modal/interface.ts | 13 + components/modal/modalStyle.ts | 50 ++ components/share/ShareModal.tsx | 35 + components/share/shareStyle.ts | 4 + package-lock.json | 837 +++++++++++++++++++- package.json | 8 +- pages/404.tsx | 14 + pages/_app.tsx | 16 +- pages/_document.tsx | 2 +- pages/errorStyle.ts | 24 + pages/faq/index.tsx | 10 + pages/folder/folderStyle.ts | 188 +++++ pages/folder/index.tsx | 140 ++++ pages/folder/interface.ts | 29 + pages/folder/shared.tsx | 80 ++ pages/index.tsx | 10 +- pages/mainStyle.ts | 19 + pages/policy/index.tsx | 10 + public/assets/bg/bg-banner.svg | 21 + public/assets/bg/bg-sec-1.png | Bin 0 -> 332174 bytes public/assets/bg/bg-sec-2.png | Bin 0 -> 73269 bytes public/assets/bg/bg-sec-3.png | Bin 0 -> 353366 bytes public/assets/bg/bg-sec-4.png | Bin 0 -> 206343 bytes public/assets/bg/cat1.jpg | Bin 0 -> 21331 bytes public/assets/bg/cat2.jpg | Bin 0 -> 31383 bytes public/assets/bg/cat3.jpg | Bin 0 -> 59731 bytes public/assets/icon/icon-eye-off.svg | 4 + public/assets/icon/icon-eye-on.svg | 4 + public/assets/icon/icon_check.svg | 3 + public/assets/icon/icon_close.svg | 5 + public/assets/icon/icon_dotte.svg | 5 + public/assets/icon/icon_down.png | Bin 0 -> 266 bytes public/assets/icon/icon_google.png | Bin 0 -> 1886 bytes public/assets/icon/icon_google.svg | 9 + public/assets/icon/icon_gray_delete.svg | 8 + public/assets/icon/icon_gray_pen.svg | 5 + public/assets/icon/icon_gray_share.svg | 11 + public/assets/icon/icon_kakao.png | Bin 0 -> 1490 bytes public/assets/icon/icon_kakao.svg | 4 + public/assets/icon/icon_loading.svg | 12 + public/assets/icon/icon_primary_add.svg | 3 + public/assets/icon/icon_primaty_link.svg | 4 + public/assets/icon/icon_search.svg | 4 + public/assets/icon/icon_share_face.svg | 11 + public/assets/icon/icon_share_kakao.svg | 11 + public/assets/icon/icon_share_link.svg | 12 + public/assets/icon/icon_star_off.svg | 10 + public/assets/icon/icon_star_on.svg | 10 + public/assets/icon/icon_user.svg | 4 + public/assets/icon/icon_white_add.svg | 3 + public/assets/icon/icons_face.svg | 3 + public/assets/icon/icons_ins.svg | 3 + public/assets/icon/icons_twt.svg | 3 + public/assets/icon/icons_you.svg | 10 + public/assets/logo/logo.svg | 11 + public/assets/logo/logo_codeit.svg | 4 + public/assets/logo/logo_og.png | Bin 0 -> 11246 bytes src/constant/api.ts | 4 + src/constant/modal.ts | 49 ++ src/constant/share.ts | 20 + src/hook/useFetch.tsx | 26 + src/utils/calcTilmAgo.ts | 30 + styles/commonStyle.ts | 182 +++++ styles/globals.css | 79 ++ styles/styled.d.ts | 44 + styles/theme.ts | 57 ++ tsconfig.json | 23 +- 91 files changed, 3335 insertions(+), 22 deletions(-) create mode 100644 .babelrc create mode 100644 components/common/Footer.tsx create mode 100644 components/common/Header.tsx create mode 100644 components/common/SocialLinkButton.tsx create mode 100644 components/common/atoms/Button.tsx create mode 100644 components/common/atoms/CheckBox.tsx create mode 100644 components/common/atoms/Input.tsx create mode 100644 components/common/atoms/LinkButton.tsx create mode 100644 components/common/atoms/LinkButtonStyle.ts create mode 100644 components/common/atoms/buttonStyle.ts create mode 100644 components/common/atoms/checkBoxStyle.ts create mode 100644 components/common/atoms/inputStyle.ts create mode 100644 components/common/footerStyle.ts create mode 100644 components/common/headerStyle.ts create mode 100644 components/common/interface.ts create mode 100644 components/folder/ContantList.tsx create mode 100644 components/folder/FolderButtonList.tsx create mode 100644 components/folder/FolderContentControll.tsx create mode 100644 components/folder/LinkAddHeader.tsx create mode 100644 components/folder/PostCard.tsx create mode 100644 components/folder/PostCardStyle.ts create mode 100644 components/folder/SearchInputBox.tsx create mode 100644 components/loading/Loading.tsx create mode 100644 components/modal/Modal.tsx create mode 100644 components/modal/interface.ts create mode 100644 components/modal/modalStyle.ts create mode 100644 components/share/ShareModal.tsx create mode 100644 components/share/shareStyle.ts create mode 100644 pages/404.tsx create mode 100644 pages/errorStyle.ts create mode 100644 pages/faq/index.tsx create mode 100644 pages/folder/folderStyle.ts create mode 100644 pages/folder/index.tsx create mode 100644 pages/folder/interface.ts create mode 100644 pages/folder/shared.tsx create mode 100644 pages/mainStyle.ts create mode 100644 pages/policy/index.tsx create mode 100644 public/assets/bg/bg-banner.svg create mode 100644 public/assets/bg/bg-sec-1.png create mode 100644 public/assets/bg/bg-sec-2.png create mode 100644 public/assets/bg/bg-sec-3.png create mode 100644 public/assets/bg/bg-sec-4.png create mode 100644 public/assets/bg/cat1.jpg create mode 100644 public/assets/bg/cat2.jpg create mode 100644 public/assets/bg/cat3.jpg create mode 100644 public/assets/icon/icon-eye-off.svg create mode 100644 public/assets/icon/icon-eye-on.svg create mode 100644 public/assets/icon/icon_check.svg create mode 100644 public/assets/icon/icon_close.svg create mode 100644 public/assets/icon/icon_dotte.svg create mode 100644 public/assets/icon/icon_down.png create mode 100644 public/assets/icon/icon_google.png create mode 100644 public/assets/icon/icon_google.svg create mode 100644 public/assets/icon/icon_gray_delete.svg create mode 100644 public/assets/icon/icon_gray_pen.svg create mode 100644 public/assets/icon/icon_gray_share.svg create mode 100644 public/assets/icon/icon_kakao.png create mode 100644 public/assets/icon/icon_kakao.svg create mode 100644 public/assets/icon/icon_loading.svg create mode 100644 public/assets/icon/icon_primary_add.svg create mode 100644 public/assets/icon/icon_primaty_link.svg create mode 100644 public/assets/icon/icon_search.svg create mode 100644 public/assets/icon/icon_share_face.svg create mode 100644 public/assets/icon/icon_share_kakao.svg create mode 100644 public/assets/icon/icon_share_link.svg create mode 100644 public/assets/icon/icon_star_off.svg create mode 100644 public/assets/icon/icon_star_on.svg create mode 100644 public/assets/icon/icon_user.svg create mode 100644 public/assets/icon/icon_white_add.svg create mode 100644 public/assets/icon/icons_face.svg create mode 100644 public/assets/icon/icons_ins.svg create mode 100644 public/assets/icon/icons_twt.svg create mode 100644 public/assets/icon/icons_you.svg create mode 100644 public/assets/logo/logo.svg create mode 100644 public/assets/logo/logo_codeit.svg create mode 100644 public/assets/logo/logo_og.png create mode 100644 src/constant/api.ts create mode 100644 src/constant/modal.ts create mode 100644 src/constant/share.ts create mode 100644 src/hook/useFetch.tsx create mode 100644 src/utils/calcTilmAgo.ts create mode 100644 styles/commonStyle.ts create mode 100644 styles/styled.d.ts create mode 100644 styles/theme.ts diff --git a/.babelrc b/.babelrc new file mode 100644 index 000000000..a2abed852 --- /dev/null +++ b/.babelrc @@ -0,0 +1,8 @@ +{ + "presets": [ + "next/babel" + ], + "plugins": [ + "babel-plugin-styled-components" + ] +} \ No newline at end of file diff --git a/components/common/Footer.tsx b/components/common/Footer.tsx new file mode 100644 index 000000000..6f35c821e --- /dev/null +++ b/components/common/Footer.tsx @@ -0,0 +1,62 @@ +import Link from "next/link"; +import SocialLinkButton from "./SocialLinkButton"; +import { + FootInner, + FootNav, + FootSign, + FootSocial, + FootWrap, +} from "./footerStyle"; +export interface IImageSnsArr { + id: string; + src: string; + link: string; +} +const imageSnsArr: IImageSnsArr[] = [ + { + id: "Facebook", + src: "/assets/icon/icons_face.svg", + link: "https://www.facebook.com/?locale=ko_KR", + }, + { + id: "Twitter", + src: "/assets/icon/icons_twt.svg", + link: "https://twitter.com/?lang=ko", + }, + { + id: "YouTube", + src: "/assets/icon/icons_you.svg", + link: "https://www.youtube.com/", + }, + { + id: "Instagram", + src: "/assets/icon/icons_ins.svg", + link: "https://www.instagram.com/", + }, +]; + +function Footer() { + return ( + + + + + ©codeit - 2023 + + + + + Privacy Policy + FAQ + + + + {imageSnsArr.map((sns) => ( + + ))} + + + + ); +} +export default Footer; diff --git a/components/common/Header.tsx b/components/common/Header.tsx new file mode 100644 index 000000000..cc19c284e --- /dev/null +++ b/components/common/Header.tsx @@ -0,0 +1,46 @@ +import { useState } from "react"; +import useFetch from "@/src/hook/useFetch"; +import { IHeaderUserLoginInfoApi } from "./interface"; +import { BASE_URL } from "@/src/constant/api"; +import { Email, HeaderControl, HeaderInner, HeaderLogo, HeaderUserInfo, HeaderWrap } from "./headerStyle"; +import Link from "next/link"; +import { Profile } from "@/styles/commonStyle"; +import LinkButton from "./atoms/LinkButton"; + +const logo = '/assets/logo/logo.svg'; + +function Header() { + // const { pathname } = useLocation(); + const { value } = useFetch(BASE_URL); + const [fixed, setFixed] = useState(true); + // useEffect(() => { + // if (pathname === '/folder') { + // setFixed(false); + // } + // }, [pathname]); + const userInfo = value?.data[0] ?? undefined; + return ( + + + + + linkbrary + + + + {userInfo ? ( + + + {userInfo?.email} + + ) : ( + + 로그인 + + )} + + + + ); +} +export default Header; diff --git a/components/common/SocialLinkButton.tsx b/components/common/SocialLinkButton.tsx new file mode 100644 index 000000000..37812eb18 --- /dev/null +++ b/components/common/SocialLinkButton.tsx @@ -0,0 +1,9 @@ +import { IImageSnsArr } from "./Footer"; + +export default function SocialLinkButton({ id, src, link }: IImageSnsArr) { + return ( + + {id + + ); +} diff --git a/components/common/atoms/Button.tsx b/components/common/atoms/Button.tsx new file mode 100644 index 000000000..a8a6ca6f7 --- /dev/null +++ b/components/common/atoms/Button.tsx @@ -0,0 +1,31 @@ +import { ButtonModule } from './buttonStyle'; +interface IButtonModule { + children: React.ReactNode; + $btnClass: string; + $BeforButtonIcon?: string; + $id?: string | number; + $afterButtonIcon?: string; + $type?: 'button' | 'reset' | 'submit' | undefined; + onclick?: () => void; +} + +export default function Button({ + children, + $btnClass, + $type = 'button', + $BeforButtonIcon = '', + $afterButtonIcon = '', + onclick, +}: IButtonModule) { + return ( + + {children} + + ); +} diff --git a/components/common/atoms/CheckBox.tsx b/components/common/atoms/CheckBox.tsx new file mode 100644 index 000000000..5374db9d7 --- /dev/null +++ b/components/common/atoms/CheckBox.tsx @@ -0,0 +1,33 @@ +import { IModal } from '../../modal/interface'; +import { CheckBoxWrap } from './checkBoxStyle'; + +interface ICheckBoxData { + $data: IModal['$modalData']; +} + +function CheckBox({ $data }: ICheckBoxData) { + if (typeof $data) { + return ( + + {$data && + $data.data.map((list: any) => ( +
+ + +
+ ))} + + ); + } else { + return ( +
+ + +
+ ); + } +} +export default CheckBox; diff --git a/components/common/atoms/Input.tsx b/components/common/atoms/Input.tsx new file mode 100644 index 000000000..54a6a09d2 --- /dev/null +++ b/components/common/atoms/Input.tsx @@ -0,0 +1,70 @@ +import { ChangeEvent, ReactNode, useEffect, useRef, useState } from 'react'; +import { InputModule } from './inputStyle'; +import Button from './Button'; +import { SearchResults } from '@/pages/folder/folderStyle'; + +interface IButtonModule { + $type?: string; + $inputClass?: string; + $btnShow?: boolean; + $placeholder?: string; + $beforeBgIcon?: string; + $btnClass?: string; + children?: ReactNode; + $clickEvent?: string; + onchange?: (value: string) => void; +} + +function Input({ + $btnShow = false, + $type = 'text', + $inputClass, + $placeholder, + $beforeBgIcon = '', + $btnClass = '', + children, + $clickEvent, + onchange, +}: IButtonModule) { + const [value, setValue] = useState(''); + const refInput = useRef(null); + const handleChangInput = (e: ChangeEvent) => { + const { value } = e.target; + setValue(value); + + if (onchange) { + // value값 전달 + onchange(value); + } + }; + + const handleButtonEvent = (text: string) => { + if (!$clickEvent) return; + if ($clickEvent === 'reset') { + setValue(''); + } + }; + + return ( + <> +
+ + {$btnShow && ( + + )} +
+ {value && {value}으로 검색한 결과입니다.} + + ); +} +export default Input; diff --git a/components/common/atoms/LinkButton.tsx b/components/common/atoms/LinkButton.tsx new file mode 100644 index 000000000..3d262fc6c --- /dev/null +++ b/components/common/atoms/LinkButton.tsx @@ -0,0 +1,18 @@ +import { LinkModule } from "./LinkButtonStyle"; +interface IButtonModule { + children: React.ReactNode; + $link: string; + $linkClass: string; +} + +export default function LinkButton({ + children, + $link, + $linkClass, +}: IButtonModule) { + return ( + + {children} + + ); +} diff --git a/components/common/atoms/LinkButtonStyle.ts b/components/common/atoms/LinkButtonStyle.ts new file mode 100644 index 000000000..65518d78d --- /dev/null +++ b/components/common/atoms/LinkButtonStyle.ts @@ -0,0 +1,43 @@ +import styled from "styled-components"; +import { theme } from "@/styles/theme"; +import Link from "next/link"; + + +export const LinkModule = styled(Link)` + display: block; + text-align: center; + &.link { + &--gradient { + color: #fff; + font-weight: 600; + text-align:center; + background:${theme.bgColor.gradient}; + border-radius: 8px; + } + &--login { + width: 128px; + font-size: 18px; + @media screen and (max-width: ${theme.screenSize.moLarge}) { + width: 80px; + } + } + } + &.full { + width: 100% !important; + } + &.large { + font-size: 18px; + line-height: 53px; + font-weight: 600; + @media screen and (max-width: ${theme.screenSize.moLarge}) { + font-size: 14px; + line-height: 37px; + } + } + &.mideum { + width: 80px; + font-size: 14px; + line-height: 37px; + font-weight: 600; + } +` \ No newline at end of file diff --git a/components/common/atoms/buttonStyle.ts b/components/common/atoms/buttonStyle.ts new file mode 100644 index 000000000..4d53770ae --- /dev/null +++ b/components/common/atoms/buttonStyle.ts @@ -0,0 +1,87 @@ +import { theme } from '@/styles/theme'; +import styled from 'styled-components'; + +export const ButtonModule = styled.button<{ + $afterButtonIcon: string; + $BeforButtonIcon: string; +}>` + &.button { + &--outlined { + padding: 0 12px; + line-height: 33px; + background-color: transparent; + border: 1px solid ${theme.color.primary}; + border-radius: 5px; + &:hover { + background-color: ${theme.color.graye}; + } + &.active { + color: ${theme.color.white}; + background-color: ${theme.color.primary}; + } + @media screen and (max-width: ${theme.screenSize.moLarge}) { + padding: 0 10px; + font-size: 14px; + line-height: 27px; + } + } + &--icon-before { + display: inline-block; + padding-left: 22px; + background: url(${({ $BeforButtonIcon }) => $BeforButtonIcon || ''}) + no-repeat left center; + background-size: 18px 18px; + } + &--icon-after { + display: inline-block; + padding-right: 20px; + background: url(${({ $afterButtonIcon }) => $afterButtonIcon || ''}) + no-repeat right center; + background-size: 18px 18px; + } + &--gradient { + width: 100%; + color: #fff; + font-weight: 600; + text-align: center; + background: ${theme.bgColor.gradient}; + border-radius: 8px; + } + &--red { + width: 100%; + color: ${theme.color.white}; + border-radius: 8px; + background-color: ${theme.color.red}; + } + &--modal-close { + position: absolute; + width: auto; + top: 50%; + right: 16px; + transform: translateY(-50%); + } + &--sns-share { + display: flex; + align-items: center; + flex-direction: column; + .share--text { + padding-top: 10px; + } + } + } + + &.large { + font-size: 18px; + line-height: 53px; + font-weight: 600; + @media screen and (max-width: ${theme.screenSize.moLarge}) { + font-size: 14px; + line-height: 37px; + } + } + &.mideum { + font-size: 14px; + line-height: 37px; + font-weight: 600; + } +`; diff --git a/components/common/atoms/checkBoxStyle.ts b/components/common/atoms/checkBoxStyle.ts new file mode 100644 index 000000000..4fc65b9c9 --- /dev/null +++ b/components/common/atoms/checkBoxStyle.ts @@ -0,0 +1,56 @@ +import { theme } from '@/styles/theme'; +import styled from 'styled-components'; + +export const CheckBoxWrap = styled.div` + &.chk { + &--list { + &-type1 { + max-height: 240px; + overflow-y: auto; + text-align: left; + .inner { + cursor: pointer; + input { + display: none !important; + } + label { + position: relative; + display: block; + padding: 0 8px; + line-height: 40px; + &::after { + content: ''; + display: none; + position: absolute; + top: 13px; + right: 8px; + width: 14px; + height: 14px; + background: url('/assets/icon/icon_check.svg'); + } + strong { + font-size: 16px; + } + span { + font-size: 14px; + color: ${theme.color.gray9}; + padding-left: 8px; + } + } + input:checked + label { + background-color: ${theme.color.grayf}; + &::after { + display: block; + } + strong { + color: ${theme.color.primary}; + } + } + &:hover { + background-color: ${theme.color.grayf}; + } + } + } + } + } +`; diff --git a/components/common/atoms/inputStyle.ts b/components/common/atoms/inputStyle.ts new file mode 100644 index 000000000..4180227aa --- /dev/null +++ b/components/common/atoms/inputStyle.ts @@ -0,0 +1,54 @@ +import { theme } from '@/styles/theme'; +import styled from 'styled-components'; + +export const InputModule = styled.input<{ $beforeBgIcon: string }>` + padding: 0 15px; + width: 100%; + line-height: 58px; + border: 1px solid ${theme.color.primary}; + border-radius: 8px; + box-sizing: border-box; + font-size: 16px; + &::placeholder { + color: #9fa6b2; + } + &:-moz-placeholder { + color: #9fa6b2; + } + &:-ms-placeholder { + color: #9fa6b2; + } + &.input { + &__link { + &--search { + padding: 0 1rem 0 2.625rem; + width: 100%; + line-height: 54px; + color: ${theme.color.gray6}; + border-radius: 0.625rem; + background: #f5f5f5 url(${({ $beforeBgIcon }) => $beforeBgIcon || ''}) + no-repeat left 1rem center; + background-size: 1rem 1rem; + box-sizing: border-box; + @media screen and (max-width: ${theme.screenSize.moLarge}) { + line-height: 43px; + font-size: 14px; + } + } + &--add { + width: 100%; + padding: 0 120px 0 52px; + line-height: 67px; + background: #fff url(${({ $beforeBgIcon }) => $beforeBgIcon || ''}) + no-repeat left 20px center; + border-radius: 15px; + @media screen and (max-width: ${theme.screenSize.moLarge}) { + padding: 0 100px 0 34px; + background-position: left 10px center; + line-height: 51px; + font-size: 14px; + } + } + } + } +`; diff --git a/components/common/footerStyle.ts b/components/common/footerStyle.ts new file mode 100644 index 000000000..33efc5864 --- /dev/null +++ b/components/common/footerStyle.ts @@ -0,0 +1,55 @@ +import { DFlaxAlignCenter } from "@/styles/commonStyle"; +import { theme } from "@/styles/theme"; +import styled from "styled-components"; + +export const FootWrap = styled.footer` + background-color: ${theme.color.black}; +` +export const FootInner = styled.div` + display: grid; + grid-template-columns: repeat(3, 1fr); + width: 100%; + max-width: calc(100% - 4.75rem); + padding: 2rem 2rem 6.5rem; + margin: 0 auto; + @media screen and (max-width: ${theme.screenSize.moLarge}) { + grid-template-columns: auto; + grid-template-areas: "a2 a3" "a1 a1"; + max-width: 100%; + padding: 2rem; + gap: 3.75rem 1.25rem; + } +` +export const FootSign = styled.div` + a { + color: #676767; + } + @media screen and (max-width: ${theme.screenSize.moLarge}) { + grid-area: a1; + } +` +export const FootNav = styled(DFlaxAlignCenter)` + justify-content: center; + gap: 0.938rem; + a { + color: #CFCFCF; + } + @media screen and (max-width: ${theme.screenSize.moLarge}) { + justify-content: flex-start; + grid-area: a2; + flex-wrap: wrap; + } +` +export const FootSocial = styled(DFlaxAlignCenter)` + justify-content: flex-end; + gap: 0.75rem; + a { + display: block; + width: 1.25rem; + color: var(--color-light); + } + @media screen and (max-width: ${theme.screenSize.moLarge}) { + grid-area: a3; + flex-wrap: wrap; + } +` \ No newline at end of file diff --git a/components/common/headerStyle.ts b/components/common/headerStyle.ts new file mode 100644 index 000000000..5978cea15 --- /dev/null +++ b/components/common/headerStyle.ts @@ -0,0 +1,46 @@ +import { DFlaxAlignCenter, DFlaxAlignCenterBtw } from "@/styles/commonStyle"; +import { theme } from "@/styles/theme"; +import styled from "styled-components"; + +export const HeaderWrap = styled.header<{$position:boolean | undefined}>` + position: ${({$position})=> $position ? 'fixed' : 'absolute'}; + top: 0; + left: 0; + right: 0; + z-index: 10; + min-width: ${theme.screenSize.minWidth}; +` +export const HeaderInner = styled(DFlaxAlignCenterBtw)` + width: calc(100% - 21rem); + padding: 2.125rem 2rem; + margin: 0 auto; + transition: all 0.3s; + a { + display: block; + } + @media screen and (max-width: ${theme.screenSize.pc}) { + width: 100%; + } + @media screen and (max-width: ${theme.screenSize.moLarge}) { + padding: 0.813rem 2rem; + } +` +export const HeaderLogo = styled.h1` + @media screen and (max-width: ${theme.screenSize.moLarge}) { + img { + width: auto; + height: 1rem; + transition: all 0.3s; + } + } +` +export const HeaderControl = styled.div`` +export const HeaderUserInfo = styled(DFlaxAlignCenter)` + gap: 0.375rem; +` +export const Email = styled.span` + color: ${theme.color.gray3}; + @media screen and (max-width: ${theme.screenSize.moLarge}) { + display: none; + } +` diff --git a/components/common/interface.ts b/components/common/interface.ts new file mode 100644 index 000000000..26e97fa76 --- /dev/null +++ b/components/common/interface.ts @@ -0,0 +1,13 @@ +// user login info +export interface IHeaderUserLoginInfoApi { + data: [ + { + id:number, + email:string, + name?:string, + image_source?:string, + created_at?:string, + auth_id:string + } + ] +} \ No newline at end of file diff --git a/components/folder/ContantList.tsx b/components/folder/ContantList.tsx new file mode 100644 index 000000000..1c1e67f33 --- /dev/null +++ b/components/folder/ContantList.tsx @@ -0,0 +1,27 @@ +import { IFolderContent } from '@/pages/folder/interface'; +import PostCard from './PostCard'; +import { EmptyBox, PostCardWrap } from '@/pages/folder/folderStyle'; + + +interface IFolderList { + contant: IFolderContent[] | [] | undefined | null; +} + +function ContantList({ contant }: IFolderList) { + return ( +
+ { + contant ? ( + + {contant?.map((data) => ( + + ))} + + ) : ( + 저장된 링크가 없습니다. + ) + } +
+ ); +} +export default ContantList; diff --git a/components/folder/FolderButtonList.tsx b/components/folder/FolderButtonList.tsx new file mode 100644 index 000000000..e6f961449 --- /dev/null +++ b/components/folder/FolderButtonList.tsx @@ -0,0 +1,44 @@ +import { BookMarkBtnList } from '@/pages/folder/folderStyle'; +import { memo } from 'react'; +import Button from '../common/atoms/Button'; +import { IFolderMenuButtonApi } from '@/pages/folder/interface'; + +interface IButtonList { + $menu: IFolderMenuButtonApi | null; + $btnActive: number | string; + onClick: (id:number) => void; +} + +function FolderButtonList({ + $menu, + $btnActive, + onClick, +}: IButtonList) { + + return ( + + + {$menu && + $menu.data?.map((item) => ( + + ))} + + ); +} + +export default memo(FolderButtonList); diff --git a/components/folder/FolderContentControll.tsx b/components/folder/FolderContentControll.tsx new file mode 100644 index 000000000..ab5c6bd75 --- /dev/null +++ b/components/folder/FolderContentControll.tsx @@ -0,0 +1,60 @@ +import { memo } from 'react'; +import Button from '../common/atoms/Button'; +import Link from 'next/link'; +import { ShareBox } from '../share/shareStyle'; +import { ShareListBtn } from '@/pages/folder/folderStyle'; + +const folderControlBtn = [ + { + id: 'fcb1', + name: '공유', + imgSrc: '/assets/icon/icon_gray_share.svg', + body: 'folderShare', + }, + { + id: 'fcb2', + name: '이름 변경', + imgSrc: '/assets/icon/icon_gray_pen.svg', + body: 'folderChangeName', + }, + { + id: 'fcb3', + name: '삭제', + imgSrc: '/assets/icon/icon_gray_delete.svg', + body: 'folderDelete', + }, +]; + +interface iControll { + $title: string; + onclick: (type: any) => void; + $id?:number +} + +function FolderContentControll({ $title, onclick, $id }: iControll) { + const handleModalOpen = (type: any) => { + onclick(type); + }; + return ( + + {$title} + {$title === '전체' || ( + + {folderControlBtn.map((btn) => ( + + ))} + + )} + + ); +} + +export default memo(FolderContentControll); diff --git a/components/folder/LinkAddHeader.tsx b/components/folder/LinkAddHeader.tsx new file mode 100644 index 000000000..4dde93e1d --- /dev/null +++ b/components/folder/LinkAddHeader.tsx @@ -0,0 +1,23 @@ +import { LinkAddHeadInner } from "@/pages/folder/folderStyle"; +import Input from "../common/atoms/Input"; +import { memo } from "react"; + +function LinkAddHeader({$inputIconImg,}: {$inputIconImg: string;}) { + return ( + +
+ + 추가하기 + +
+ + ); +} + +export default memo(LinkAddHeader); diff --git a/components/folder/PostCard.tsx b/components/folder/PostCard.tsx new file mode 100644 index 000000000..0e0d543be --- /dev/null +++ b/components/folder/PostCard.tsx @@ -0,0 +1,115 @@ +import { IFolderContent, IFolderMenuButtonApi } from "@/pages/folder/interface"; +import useFetch from "@/src/hook/useFetch"; +import { useMemo, useState } from "react"; +import { IModal } from "../modal/interface"; +import { FOLDER_MENU_LIST_API } from "@/src/constant/api"; +import { BookMarkBtn, CardMenu, CardWrap } from "./PostCardStyle"; +import Link from "next/link"; +import { DFlaxAlignCenterBtw, EllipsisLine } from "@/styles/commonStyle"; +import { calculateTimeAgo } from "@/src/utils/calcTilmAgo"; +import Modal from "../modal/Modal"; +import { modalOrder } from "@/src/constant/modal"; + +const emptyImg = '/assets/logo/logo.svg'; + +function useFatchDataLoad(api: string) { + return useFetch(api); +} + +export default function PostCard({ image_source, description, created_at}: IFolderContent) { + const [bookMark, setBookMark] = useState(false); + const [cardMenuShow, setCardMenuShow] = useState(false); + const [modalShow, setModalShow] = useState(false); + const [modalInfo, setModalInfo] = useState({ + $title: '', + $titleDescText: null, + $body: null, + $buttonStyle: null, + $buttonText: null, + $modalData: null, + }); + const { value: menu, isLoading: menuLoading } = + useFatchDataLoad(FOLDER_MENU_LIST_API); + + const handelerBookMarkActive = () => setBookMark((prev) => !prev); + const handelerCardDropdown = () => setCardMenuShow((prev) => !prev); + + const handleModalOpen = (type: string) => { + let modalInfo = modalOrder[type]; + if (type === 'folderInAdd') { + modalInfo = { + ...modalInfo, + $modalData: menu, + }; + } + setModalInfo(modalInfo); + setModalShow(true); + setCardMenuShow(false); + }; + + const handleModalClose = () => { + setModalShow(false); + }; + + const date = useMemo(() => { + return new Date(`${created_at}`); + }, []); + + return ( + <> + + + 북마크버튼 + + +
+
+ {image_source ? ( + {image_source} + ) : ( + + )} +
+
+ + {calculateTimeAgo(`${created_at}`)} + + + {description} + +

{date.toLocaleString()}

+
+
+ + + + {cardMenuShow && ( +
+ + +
+ )} + + + + + ); +} diff --git a/components/folder/PostCardStyle.ts b/components/folder/PostCardStyle.ts new file mode 100644 index 000000000..7fb7393e2 --- /dev/null +++ b/components/folder/PostCardStyle.ts @@ -0,0 +1,132 @@ +import styled from "styled-components"; +import { theme } from '@/styles/theme'; + +export const CardWrap = styled.div` + position: relative; + .card__link { + display: block; + position: relative; + border: 1px solid transparent; + border-radius: 0.9375rem; + box-shadow: 0 0.3125rem 1.5625rem rgba(0,0,0,.08); + overflow: hidden; + &:hover { + border: 1px solid ${theme.color.primary}; + .card__image { + img { + transform: scale(1.3) translate(-40%,-40%); + } + } + } + } + .card { + &__image { + position: relative; + width: 100%; + height: 12.5rem; + overflow: hidden; + background-color: #DDDFFF; + img { + position: absolute; + left: 50%; + top: 50%; + width: 100%; + transform: translate(-50%,-50%); + transition: transform 0.3s; + &.empty { + left: 50%; + width: 133px; + opacity:.18; + transform: translateX(-50%); + } + } + } + &__info { + text-align: left; + padding: 0.9375rem 1.25rem; + background-color: ${theme.color.white}; + } + &__time-ago { + font-size: ${theme.font.sm}; + line-height: 1.0625rem; + color: ${theme.color.gray6}; + } + &__content { + padding-top: 0.625rem; + line-height: 1.5rem; + height: 3.44rem; + word-break: break-all; + } + &__date { + padding-top: 10px; + font-size: ${theme.font.s}; + line-height: 1.1875rem; + color: ${theme.color.gray3}; + } + } + + &:nth-of-type(3n) { + .card__dropdown-menu { + right: -10px; + } + } + + @media screen and (max-width: ${theme.screenSize.moLarge}){ + .card { + &__image { + height: 12rem; + } + } + } +` + +export const BookMarkBtn = styled.button` + position: absolute; + right: 16px; + top: 16px; + width: 32px; + height: 32px; + font-size: 12px; + color: transparent; + background: url('/assets/icon/icon_star_off.svg'); + z-index: 1; + &.active { + background: url('/assets/icon/icon_star_on.svg'); + } +` + +export const CardMenu = styled.div` + position: absolute; + right: 10px; + top: 205px; + padding: 10px; + cursor: pointer; + z-index: 2; + .card { + &__dropdown-contant { + width:21px; + height: 17px; + background: url(/assets/icon/icon_dotte.svg) no-repeat center; + } + &__dropdown-menu { + position: absolute; + right: -75px; + top: 15px; + z-index: 1; + } + &__menu-btn { + line-height: 32px; + width: 100px; + background-color: ${theme.color.white}; + &:last-of-type { + color: ${theme.color.primary}; + background-color: ${theme.color.grayf}; + } + } + } + @media screen and (max-width: ${theme.screenSize.tablet}){ + .card__dropdown-menu { + right: -10px; + } + } +` \ No newline at end of file diff --git a/components/folder/SearchInputBox.tsx b/components/folder/SearchInputBox.tsx new file mode 100644 index 000000000..54ea05d41 --- /dev/null +++ b/components/folder/SearchInputBox.tsx @@ -0,0 +1,28 @@ +import { BoxLinkSearch } from "@/pages/folder/folderStyle"; +import Input from "../common/atoms/Input"; +import { memo } from "react"; + +interface ISearch { + $inputIconImg: string; + onchange: (value: string) => void; +} + +function SearchInputBox({ $inputIconImg, onchange }: ISearch) { + return ( + + + 닫기 + + + ); +} + +export default memo(SearchInputBox); diff --git a/components/loading/Loading.tsx b/components/loading/Loading.tsx new file mode 100644 index 000000000..6d8ae962b --- /dev/null +++ b/components/loading/Loading.tsx @@ -0,0 +1,24 @@ +import styled from "styled-components" + +const LoadingWrap = styled.div` + position: fixed; + top:0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + background-color: rgba(0,0,0,.7); + z-index: 10; + img { + width: 150px; + } +` + +function Loading() { + return + loading + +} +export default Loading \ No newline at end of file diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx new file mode 100644 index 000000000..69b20702a --- /dev/null +++ b/components/modal/Modal.tsx @@ -0,0 +1,73 @@ +import { ModlaTitle } from "@/styles/commonStyle"; +import CheckBox from "../common/atoms/CheckBox"; +import Input from "../common/atoms/Input"; +import ShareModal from "../share/ShareModal"; +import { IModal } from "./interface"; +import { ModalBody, ModalContainer, ModalDim, ModalFoot, ModalHead, ModalWrap } from "./modalStyle"; +import Button from "../common/atoms/Button"; + +interface IModalInfo extends IModal { + onOpen: boolean; + onClose: () => void; + $folderId?:number | null +} + +function bodyContent(body: string, data: IModal['$modalData'], id :number|null = null) { + if (body === 'input') { + return ; + } else if (body === 'sns') { + return ; + } else if (body === 'checkbox') { + if (!data) return null; + return ; + } +} + +function Modal({ + onOpen, + onClose, + $folderId = null, + $title, + $titleDescText, + $body, + $buttonStyle, + $buttonText, + $modalData, +}: IModalInfo) { + + const modalClose = () => { + onClose(); + }; + + if (!onOpen) return null; + return ( + <> + + + + + {$title} + {$titleDescText &&
{$titleDescText}
} + + {$body && + {bodyContent($body, $modalData, $folderId)} + } + {$buttonStyle && ( + + + + )} + + + + + ); +} +export default Modal; diff --git a/components/modal/interface.ts b/components/modal/interface.ts new file mode 100644 index 000000000..5adb95b1b --- /dev/null +++ b/components/modal/interface.ts @@ -0,0 +1,13 @@ +import { IFolderMenuButtonApi } from "../../pages/folder/interface"; + +export interface IModalData { + data: any; +} +export interface IModal { + $title: string; + $titleDescText?: string | null; + $body?: string | null; + $buttonStyle?: string | null; + $buttonText?: string | null; + $modalData?: IModalData | null | IFolderMenuButtonApi; +} diff --git a/components/modal/modalStyle.ts b/components/modal/modalStyle.ts new file mode 100644 index 000000000..5cf9a8737 --- /dev/null +++ b/components/modal/modalStyle.ts @@ -0,0 +1,50 @@ +import styled from 'styled-components'; +import { theme } from '@/styles/theme'; + +export const ModalWrap = styled.section` + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + padding: 0 20px; + z-index: 100; +`; +export const ModalDim = styled.div` + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.4); + z-index: 1; +`; +export const ModalContainer = styled.div` + position: absolute; + top: 50%; + left: 50%; + padding: 32px 40px; + width: 100%; + max-width: 360px; + border-radius: 15px; + transform: translate(-50%, -50%); + background-color: ${theme.color.white}; + z-index: 2; + .button--modal-close { + top: 30px; + } +`; +export const ModalHead = styled.div` + .desc { + padding-top: 8px; + color: ${theme.color.gray9}; + line-height: 1.375rem; + text-align: center; + } +`; +export const ModalBody = styled.div` + padding-top: 24px; +`; +export const ModalFoot = styled.div` + padding-top: 24px; +`; diff --git a/components/share/ShareModal.tsx b/components/share/ShareModal.tsx new file mode 100644 index 000000000..4be74d641 --- /dev/null +++ b/components/share/ShareModal.tsx @@ -0,0 +1,35 @@ +import { snsShare } from '../../constant/share'; +import Button from '../common/atoms/Button'; +import { ShareBox } from './shareStyle'; + +const handleLinkCopy = async (id:number) => { + try { + navigator.clipboard.writeText(`${window.location.host}/shared/${id}`) + } catch (e) { + console.log(e) + } +} + +function ShareModal({sharedId}:{sharedId:number | null}) { + const handlerSns = (snsId:string) => { + if(sharedId && snsId === 'sh_link') { + handleLinkCopy(sharedId); + alert('주소를 복사하였습니다.'); + } else if (snsId === 'sh_kakao') { + // 추후 작업 예정.. + } else if (snsId === 'sh_face') { + // 추후 작업 예정.. + } + } + return ( + + {snsShare.map((sns) => ( + + ))} + + ); +} +export default ShareModal; diff --git a/components/share/shareStyle.ts b/components/share/shareStyle.ts new file mode 100644 index 000000000..2a5cee387 --- /dev/null +++ b/components/share/shareStyle.ts @@ -0,0 +1,4 @@ +import { DFlaxAlignCenterBtw } from "@/styles/commonStyle"; +import styled from "styled-components"; + +export const ShareBox = styled(DFlaxAlignCenterBtw)`` \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index baa2b6655..e3d06f454 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,12 +10,14 @@ "dependencies": { "next": "13.5.6", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "styled-components": "^6.1.11" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "babel-plugin-styled-components": "^2.1.4", "eslint": "^8", "eslint-config-next": "13.5.6", "typescript": "^5" @@ -30,6 +32,439 @@ "node": ">=0.10.0" } }, + "node_modules/@ampproject/remapping": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz", + "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==", + "dev": true, + "peer": true, + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.24" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/code-frame": { + "version": "7.24.2", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz", + "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/highlight": "^7.24.2", + "picocolors": "^1.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/compat-data": { + "version": "7.24.4", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.4.tgz", + "integrity": "sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==", + "dev": true, + "peer": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/core": { + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.5.tgz", + "integrity": "sha512-tVQRucExLQ02Boi4vdPp49svNGcfL2GhdTCT9aldhXgCJVAI21EtRfBettiuLUwce/7r6bFdgs6JFkcdTiFttA==", + "dev": true, + "peer": true, + "dependencies": { + "@ampproject/remapping": "^2.2.0", + "@babel/code-frame": "^7.24.2", + "@babel/generator": "^7.24.5", + "@babel/helper-compilation-targets": "^7.23.6", + "@babel/helper-module-transforms": "^7.24.5", + "@babel/helpers": "^7.24.5", + "@babel/parser": "^7.24.5", + "@babel/template": "^7.24.0", + "@babel/traverse": "^7.24.5", + "@babel/types": "^7.24.5", + "convert-source-map": "^2.0.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.3", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@babel/core/node_modules/json5": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", + "dev": true, + "peer": true, + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@babel/core/node_modules/semver": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "dev": true, + "peer": true, + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/@babel/generator": { + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.5.tgz", + "integrity": "sha512-x32i4hEXvr+iI0NEoEfDKzlemF8AmtOP8CcrRaEcpzysWuoEb1KknpcvMsHKPONoKZiDuItklgWhB18xEhr9PA==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/types": "^7.24.5", + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.25", + "jsesc": "^2.5.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-annotate-as-pure": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz", + "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==", + "dev": true, + "dependencies": { + "@babel/types": "^7.22.5" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-compilation-targets": { + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz", + "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/compat-data": "^7.23.5", + "@babel/helper-validator-option": "^7.23.5", + "browserslist": "^4.22.2", + "lru-cache": "^5.1.1", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", + "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "dev": true, + "peer": true, + "dependencies": { + "yallist": "^3.0.2" + } + }, + "node_modules/@babel/helper-compilation-targets/node_modules/semver": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "dev": true, + "peer": true, + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/@babel/helper-compilation-targets/node_modules/yallist": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", + "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", + "dev": true, + "peer": true + }, + "node_modules/@babel/helper-environment-visitor": { + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz", + "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==", + "dev": true, + "peer": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-function-name": { + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz", + "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/template": "^7.22.15", + "@babel/types": "^7.23.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-hoist-variables": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz", + "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/types": "^7.22.5" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-imports": { + "version": "7.24.3", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz", + "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==", + "dev": true, + "dependencies": { + "@babel/types": "^7.24.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-transforms": { + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.24.5.tgz", + "integrity": "sha512-9GxeY8c2d2mdQUP1Dye0ks3VDyIMS98kt/llQ2nUId8IsWqTF0l1LkSX0/uP7l7MCDrzXS009Hyhe2gzTiGW8A==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/helper-environment-visitor": "^7.22.20", + "@babel/helper-module-imports": "^7.24.3", + "@babel/helper-simple-access": "^7.24.5", + "@babel/helper-split-export-declaration": "^7.24.5", + "@babel/helper-validator-identifier": "^7.24.5" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-plugin-utils": { + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.5.tgz", + "integrity": "sha512-xjNLDopRzW2o6ba0gKbkZq5YWEBaK3PCyTOY1K2P/O07LGMhMqlMXPxwN4S5/RhWuCobT8z0jrlKGlYmeR1OhQ==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-simple-access": { + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.5.tgz", + "integrity": "sha512-uH3Hmf5q5n7n8mz7arjUlDOCbttY/DW4DYhE6FUsjKJ/oYC1kQQUvwEQWxRwUpX9qQKRXeqLwWxrqilMrf32sQ==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/types": "^7.24.5" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-split-export-declaration": { + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.5.tgz", + "integrity": "sha512-5CHncttXohrHk8GWOFCcCl4oRD9fKosWlIRgWm4ql9VYioKm52Mk2xsmoohvm7f3JoiLSM5ZgJuRaf5QZZYd3Q==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/types": "^7.24.5" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz", + "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.5.tgz", + "integrity": "sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-option": { + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz", + "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==", + "dev": true, + "peer": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helpers": { + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.5.tgz", + "integrity": "sha512-CiQmBMMpMQHwM5m01YnrM6imUG1ebgYJ+fAIW4FZe6m4qHTPaRHti+R8cggAwkdz4oXhtO4/K9JWlh+8hIfR2Q==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/template": "^7.24.0", + "@babel/traverse": "^7.24.5", + "@babel/types": "^7.24.5" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight": { + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.5.tgz", + "integrity": "sha512-8lLmua6AVh/8SLJRRVD6V8p73Hir9w5mJrhE+IPpILG31KKlI9iz5zmBYKcWPS59qSfgP9RaSBQSHHE81WKuEw==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/helper-validator-identifier": "^7.24.5", + "chalk": "^2.4.2", + "js-tokens": "^4.0.0", + "picocolors": "^1.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight/node_modules/ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "peer": true, + "dependencies": { + "color-convert": "^1.9.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "peer": true, + "dependencies": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "peer": true, + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/@babel/highlight/node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", + "dev": true, + "peer": true + }, + "node_modules/@babel/highlight/node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true, + "peer": true, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/@babel/highlight/node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "dev": true, + "peer": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "peer": true, + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/parser": { + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.5.tgz", + "integrity": "sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==", + "dev": true, + "peer": true, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/plugin-syntax-jsx": { + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.1.tgz", + "integrity": "sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.24.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/runtime": { "version": "7.23.4", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.4.tgz", @@ -42,6 +477,85 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/template": { + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz", + "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/code-frame": "^7.23.5", + "@babel/parser": "^7.24.0", + "@babel/types": "^7.24.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse": { + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.5.tgz", + "integrity": "sha512-7aaBLeDQ4zYcUFDUD41lJc1fG8+5IU9DaNSJAgal866FGvmD5EbWQgnEC6kO1gGLsX0esNkfnJSndbTXA3r7UA==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/code-frame": "^7.24.2", + "@babel/generator": "^7.24.5", + "@babel/helper-environment-visitor": "^7.22.20", + "@babel/helper-function-name": "^7.23.0", + "@babel/helper-hoist-variables": "^7.22.5", + "@babel/helper-split-export-declaration": "^7.24.5", + "@babel/parser": "^7.24.5", + "@babel/types": "^7.24.5", + "debug": "^4.3.1", + "globals": "^11.1.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse/node_modules/globals": { + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", + "dev": true, + "peer": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/types": { + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.5.tgz", + "integrity": "sha512-6mQNsaLeXTw0nxYUYu+NSa4Hx4BlF1x1x8/PMFbiR+GBSr+2DkECc69b8hgy2frEodNcvPffeH8YfWd3LI6jhQ==", + "dev": true, + "dependencies": { + "@babel/helper-string-parser": "^7.24.1", + "@babel/helper-validator-identifier": "^7.24.5", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -131,6 +645,59 @@ "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==", "dev": true }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", + "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", + "dev": true, + "peer": true, + "dependencies": { + "@jridgewell/set-array": "^1.2.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.24" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, + "peer": true, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/set-array": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", + "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", + "dev": true, + "peer": true, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.4.15", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", + "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", + "dev": true, + "peer": true + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.25", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", + "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", + "dev": true, + "peer": true, + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, "node_modules/@next/env": { "version": "13.5.6", "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.6.tgz", @@ -376,6 +943,11 @@ "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", "dev": true }, + "node_modules/@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==" + }, "node_modules/@typescript-eslint/parser": { "version": "6.12.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.12.0.tgz", @@ -735,6 +1307,22 @@ "dequal": "^2.0.3" } }, + "node_modules/babel-plugin-styled-components": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz", + "integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==", + "dev": true, + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.22.5", + "@babel/helper-module-imports": "^7.22.5", + "@babel/plugin-syntax-jsx": "^7.22.5", + "lodash": "^4.17.21", + "picomatch": "^2.3.1" + }, + "peerDependencies": { + "styled-components": ">= 2" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -763,6 +1351,39 @@ "node": ">=8" } }, + "node_modules/browserslist": { + "version": "4.23.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz", + "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "peer": true, + "dependencies": { + "caniuse-lite": "^1.0.30001587", + "electron-to-chromium": "^1.4.668", + "node-releases": "^2.0.14", + "update-browserslist-db": "^1.0.13" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, "node_modules/busboy": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", @@ -797,10 +1418,18 @@ "node": ">=6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-lite": { - "version": "1.0.30001564", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001564.tgz", - "integrity": "sha512-DqAOf+rhof+6GVx1y+xzbFPeOumfQnhYzVnZD6LAXijR77yPtm9mfOcqOnT3mpnJiZVT+kwLAFnRlZcIz+c6bg==", + "version": "1.0.30001617", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001617.tgz", + "integrity": "sha512-mLyjzNI9I+Pix8zwcrpxEbGlfqOkF9kM3ptzmKNw5tizSyYwMe+nGLTqMK9cO+0E+Bh6TsBxNAaHWEM8xwSsmA==", "funding": [ { "type": "opencollective", @@ -861,6 +1490,13 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, + "node_modules/convert-source-map": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", + "dev": true, + "peer": true + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -875,11 +1511,28 @@ "node": ">= 8" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/csstype": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", - "dev": true + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/damerau-levenshtein": { "version": "1.0.8", @@ -974,6 +1627,13 @@ "node": ">=6.0.0" } }, + "node_modules/electron-to-chromium": { + "version": "1.4.763", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.763.tgz", + "integrity": "sha512-k4J8NrtJ9QrvHLRo8Q18OncqBCB7tIUyqxRcJnlonQ0ioHKYB988GcDFF3ZePmnb8eHEopDs/wPHR/iGAFgoUQ==", + "dev": true, + "peer": true + }, "node_modules/emoji-regex": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", @@ -1108,6 +1768,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/escalade": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz", + "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==", + "dev": true, + "peer": true, + "engines": { + "node": ">=6" + } + }, "node_modules/escape-string-regexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", @@ -1696,6 +2366,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/gensync": { + "version": "1.0.0-beta.2", + "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", + "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", + "dev": true, + "peer": true, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/get-intrinsic": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz", @@ -2350,6 +3030,19 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/jsesc": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", + "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", + "dev": true, + "peer": true, + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/json-buffer": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz", @@ -2450,6 +3143,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "dev": true + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -2596,6 +3295,13 @@ } } }, + "node_modules/node-releases": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz", + "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==", + "dev": true, + "peer": true + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -2868,6 +3574,11 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -3156,6 +3867,11 @@ "node": ">= 0.4" } }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -3201,9 +3917,9 @@ } }, "node_modules/source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", "engines": { "node": ">=0.10.0" } @@ -3314,6 +4030,60 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/styled-components": { + "version": "6.1.11", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.11.tgz", + "integrity": "sha512-Ui0jXPzbp1phYij90h12ksljKGqF8ncGx+pjrNPsSPhbUUjWT2tD1FwGo2LF6USCnbrsIhNngDfodhxbegfEOA==", + "dependencies": { + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.38", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/postcss": { + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.0", + "source-map-js": "^1.2.0" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, "node_modules/styled-jsx": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz", @@ -3336,6 +4106,11 @@ } } }, + "node_modules/stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==" + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -3375,6 +4150,15 @@ "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, + "node_modules/to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", + "dev": true, + "engines": { + "node": ">=4" + } + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -3539,6 +4323,37 @@ "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", "dev": true }, + "node_modules/update-browserslist-db": { + "version": "1.0.15", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.15.tgz", + "integrity": "sha512-K9HWH62x3/EalU1U6sjSZiylm9C8tgq2mSvshZpqc7QE69RaA2qjhkW2HlNA0tFpEbtyFz7HTqbSdN4MSwUodA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "peer": true, + "dependencies": { + "escalade": "^3.1.2", + "picocolors": "^1.0.0" + }, + "bin": { + "update-browserslist-db": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", diff --git a/package.json b/package.json index 1ce24924f..ba2070910 100644 --- a/package.json +++ b/package.json @@ -9,16 +9,18 @@ "lint": "next lint" }, "dependencies": { + "next": "13.5.6", "react": "^18", "react-dom": "^18", - "next": "13.5.6" + "styled-components": "^6.1.11" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "babel-plugin-styled-components": "^2.1.4", "eslint": "^8", - "eslint-config-next": "13.5.6" + "eslint-config-next": "13.5.6", + "typescript": "^5" } } diff --git a/pages/404.tsx b/pages/404.tsx new file mode 100644 index 000000000..e9895ae98 --- /dev/null +++ b/pages/404.tsx @@ -0,0 +1,14 @@ +import Link from 'next/link'; +import { NotFoundWrap } from './errorStyle'; +import { TitleMs } from '@/styles/commonStyle'; + +export default function NotFound() { + return ( + + 페이지 작업 중 입니다. +
+ 페이지 이동 +
+ + ); +} \ No newline at end of file diff --git a/pages/_app.tsx b/pages/_app.tsx index 021681f4d..a3ddaf5aa 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,20 @@ import '@/styles/globals.css' import type { AppProps } from 'next/app' +import { Contatiner, Wrap } from './mainStyle' +import Header from '@/components/common/Header' +import Footer from '@/components/common/Footer' +import '@/styles/globals.css' export default function App({ Component, pageProps }: AppProps) { - return + return ( + <> + +
+ + + +