From 9398d1698ff3c8aa7633b04d06b8e30e13b8bd8e Mon Sep 17 00:00:00 2001 From: kimmiso Date: Sun, 26 May 2024 03:53:15 +0900 Subject: [PATCH 1/5] =?UTF-8?q?refactor:=20page=EB=9D=BC=EC=9A=B0=ED=84=B0?= =?UTF-8?q?=20=EB=B0=A9=EC=8B=9D=EC=9D=84=20app=EB=9D=BC=EC=9A=B0=ED=84=B0?= =?UTF-8?q?=EB=A1=9C=20=EC=A0=84=EC=B2=B4=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/folder.api.ts | 39 +++++++ pages/faq/index.tsx => app/faq/page.tsx | 1 + .../folder/[[...id]]/FolderClient.tsx | 102 ++++++------------ app/folder/[[...id]]/page.tsx | 30 ++++++ app/layout.tsx | 20 ++++ pages/404.tsx => app/not-found.tsx | 1 + pages/index.tsx => app/page.tsx | 1 + pages/policy/index.tsx => app/policy/page.tsx | 1 + .../shared/[id]/SharedClient.tsx | 54 +++------- app/shared/[id]/page.tsx | 22 ++++ pages/signin/index.tsx => app/signin/page.tsx | 63 ++--------- pages/signup/index.tsx => app/signup/page.tsx | 59 ++-------- components/common/Footer.tsx | 9 +- components/common/Header.tsx | 15 +-- components/folder/FolderButtonList.tsx | 20 ++-- components/folder/FolderContentControll.tsx | 6 +- components/folder/PostCard.tsx | 6 +- lib/{auto.context.tsx => auto.provider.tsx} | 1 + lib/theme.provider.tsx | 22 ++++ pages/_app.tsx | 19 ---- pages/_document.tsx | 13 --- styles/folderStyle.ts | 2 +- tsconfig.json | 12 ++- 23 files changed, 241 insertions(+), 277 deletions(-) create mode 100644 api/folder.api.ts rename pages/faq/index.tsx => app/faq/page.tsx (92%) rename pages/folder/index.tsx => app/folder/[[...id]]/FolderClient.tsx (60%) create mode 100644 app/folder/[[...id]]/page.tsx create mode 100644 app/layout.tsx rename pages/404.tsx => app/not-found.tsx (96%) rename pages/index.tsx => app/page.tsx (99%) rename pages/policy/index.tsx => app/policy/page.tsx (93%) rename pages/shared/[id].tsx => app/shared/[id]/SharedClient.tsx (52%) create mode 100644 app/shared/[id]/page.tsx rename pages/signin/index.tsx => app/signin/page.tsx (84%) rename pages/signup/index.tsx => app/signup/page.tsx (88%) rename lib/{auto.context.tsx => auto.provider.tsx} (98%) create mode 100644 lib/theme.provider.tsx delete mode 100644 pages/_app.tsx delete mode 100644 pages/_document.tsx diff --git a/api/folder.api.ts b/api/folder.api.ts new file mode 100644 index 000000000..e406b44a7 --- /dev/null +++ b/api/folder.api.ts @@ -0,0 +1,39 @@ +import { instance } from '@/lib/axios'; + +const FOLDERS = '/folders'; +const LINKS = '/links'; + +// folder name +export async function getFolderProps() { + try { + const res = await instance.get(FOLDERS); + const { data } = res.data; + return data; + } catch (error) { + console.log('ERROR IN SERVER FETCHING DATA: ', error); + return; + } +} +export async function getFolderDetailProps(id: string) { + try { + const res = await instance.get(`${FOLDERS}/${id}`); + const { data } = res.data; + return data; + } catch (error) { + console.log('ERROR IN SERVER FETCHING DATA: ', error); + return; + } +} + +// folder content list +export async function getLinkProps(id?: string) { + try { + let endPoint = id ? `${LINKS}?folderId=${id}` : LINKS; + const res = await instance.get(endPoint); + const { data } = res.data; + return data; + } catch (error) { + console.log('ERROR IN SERVER FETCHING DATA: ', error); + return; + } +} diff --git a/pages/faq/index.tsx b/app/faq/page.tsx similarity index 92% rename from pages/faq/index.tsx rename to app/faq/page.tsx index e851de0c0..0a86136c0 100644 --- a/pages/faq/index.tsx +++ b/app/faq/page.tsx @@ -1,3 +1,4 @@ +'use client'; import { Container, InnerLarge } from '@/styles/commonStyle'; export default function Faq() { diff --git a/pages/folder/index.tsx b/app/folder/[[...id]]/FolderClient.tsx similarity index 60% rename from pages/folder/index.tsx rename to app/folder/[[...id]]/FolderClient.tsx index 945a1d25e..22787c051 100644 --- a/pages/folder/index.tsx +++ b/app/folder/[[...id]]/FolderClient.tsx @@ -1,80 +1,51 @@ -import { useEffect, useState } from 'react'; -import { useRouter } from 'next/router'; -import { GetServerSidePropsContext } from 'next'; -import { ContainBody, Container } from '@/styles/commonStyle'; -import LinkAddHeader from '@/components/folder/LinkAddHeader'; -import SearchInputBox from '@/components/folder/SearchInputBox'; -import FolderButtonList from '@/components/folder/FolderButtonList'; +'use client'; import Button from '@/components/common/atoms/Button'; +import FolderButtonList from '@/components/folder/FolderButtonList'; import FolderContentControll from '@/components/folder/FolderContentControll'; +import LinkAddHeader from '@/components/folder/LinkAddHeader'; import PostCardList from '@/components/folder/PostCardList'; +import SearchInputBox from '@/components/folder/SearchInputBox'; +import { IFolderContent, IFolderMenuButton } from '@/components/folder/interface'; import Modal from '@/components/modal/Modal'; -import Loading from '@/components/loading/Loading'; -import { BodyInner, BookmarkBox, EmptyBox, FolderContainHead } from '../../styles/folderStyle'; -import { IFolderContentApi, IFolderMenuButtonApi } from '../../components/folder/interface'; -import { instance } from '@/lib/axios'; +import { ContainBody, Container } from '@/styles/commonStyle'; +import { BodyInner, BookmarkBox, FolderContainHead } from '@/styles/folderStyle'; +import { useRouter } from 'next/navigation'; +import { useEffect, useState } from 'react'; const ADD_IMAGE = '/assets/icon/icon_primary_add.svg'; const SEARCH_IMAGE = '/assets/icon/icon_search.svg'; const LINK_IMAGE = '/assets/icon/icon_primaty_link.svg'; -export async function getServerSideProps(contaxt: GetServerSidePropsContext) { - const { query } = contaxt; - try { - let resContent; - const resMenu = await instance.get(`/folders`); - if (query.id) { - resContent = await instance.get(`/links?folderId=${query.id}`); - } else { - resContent = await instance.get(`/links`); - } - - const $menu = resMenu.data; - const $content = resContent.data; - return { - props: { - $menu, - $content, - }, - }; - } catch (error) { - console.log('ERROR IN SERVER FETCHING DATA: ', error); - return { - notFound: true, - }; - } +export interface IFolderClientProps { + menuData: IFolderMenuButton[]; + contentData: IFolderContent[]; + pageId?: string; } - -export default function Folder({ $menu, $content }: { $menu: IFolderMenuButtonApi; $content: IFolderContentApi }) { +export default function FolderClient({ menuData, contentData, pageId }: IFolderClientProps) { + const [menu, setMenu] = useState(menuData); + const [content, setContent] = useState(contentData); const router = useRouter(); - const [tabTitle, setTabTitle] = useState('전체'); - const [activeBtn, setActiveBtn] = useState(-1); + const [tabTitle, setTabTitle] = useState('전체'); + const [activeBtn, setActiveBtn] = useState('전체'); const [isModalShow, setIsModalShow] = useState(false); const [modalType, setModalType] = useState(''); const [searchContatn, setSearchContent] = useState(); const [isStylesLoaded, setIsStylesLoaded] = useState(false); // 폴더리스트버튼 - const handleClick = (id: number) => { + const handleClick = (id: string) => { if (!id) return; + let title = menu.find((data) => { + return `${data.id}` === `${id}` && data; + }); + const result = title ? title.name : '전체'; - if (id === -1) { - router.push(``); - setTabTitle('전체'); - } else { - router.push(`?id=${id}`); - let title = $menu.data.filter((data) => `${data.id}` === `${id}`); - setTabTitle(`${title[0].name}`); - } + setTabTitle(result); setActiveBtn(id); }; - // modal open const handleModalOpen = (type: string) => { setIsModalShow(true); - if (type === 'folderDelete') { - let aaa = tabTitle; - } setModalType(type); }; @@ -83,32 +54,29 @@ export default function Folder({ $menu, $content }: { $menu: IFolderMenuButtonAp setIsModalShow(false); }; - // Search + // // Search const handelSearch = (value: string) => { let filter; if (value) { - filter = $content?.data.filter((con) => { + filter = content?.filter((con) => { if (!con) return; return con.description?.includes(value) || con.title?.includes(value) || con.url?.includes(value); }); setSearchContent(filter); return; } - setSearchContent($content?.data); + setSearchContent(content); }; - // search - const contentSearch = searchContatn ?? $content?.data; + // // search + const contentSearch = searchContatn ?? content; useEffect(() => { let idExists; - - if (router.query.id) { - // folder가 있을때 - idExists = $menu.data.some((item: any) => `${item.id}` === `${router.query.id}`); - } else if (router.query.id === '-1') { - // 전체 일때 + if (!pageId) { router.push(`/folder`); + } else { + idExists = menu.some((item: any) => `${item.id}` === `${pageId}`); } if (idExists === false) { @@ -118,9 +86,7 @@ export default function Folder({ $menu, $content }: { $menu: IFolderMenuButtonAp } setIsStylesLoaded(true); - }, [$menu, router]); - - if (!isStylesLoaded) return ; + }, [menu, router, pageId]); return ( @@ -138,7 +104,7 @@ export default function Folder({ $menu, $content }: { $menu: IFolderMenuButtonAp {/* 폴더 리스트 버튼 */} diff --git a/app/folder/[[...id]]/page.tsx b/app/folder/[[...id]]/page.tsx new file mode 100644 index 000000000..5f36626fd --- /dev/null +++ b/app/folder/[[...id]]/page.tsx @@ -0,0 +1,30 @@ +import { getFolderProps, getLinkProps } from '@/api/folder.api'; +import { redirect } from 'next/navigation'; +import FolderClient from './FolderClient'; +import { IFolderContent, IFolderMenuButton } from '@/components/folder/interface'; + +export interface IFolderClientProps { + menuData: IFolderMenuButton[]; + contentData: IFolderContent[]; +} + +export async function getFolderProp(id: string): Promise { + try { + const [menuData, contentData] = await Promise.all([getFolderProps(), getLinkProps(id)]); + return { menuData, contentData }; + } catch (error) { + console.log('ERROR IN SERVER FETCHING DATA: ', error); + return { + menuData: [], + contentData: [], + }; + } +} + +export default async function Folder({ params }: { params: { id: string } }) { + const { menuData, contentData } = await getFolderProp(params.id); + const { id: pageId } = params; + const props = { menuData, contentData, pageId }; + if (!menuData || !contentData) return
데이터가 없습니다.
; + return ; +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 000000000..ca3daafb3 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,20 @@ +import ThemeProvider from '@/lib/theme.provider'; +import '@/styles/globals.css'; +import { Metadata } from 'next'; + +export const metadata: Metadata = { + title: { + template: '%s | LinkBrary', + default: 'LinkBrary', + }, +}; + +export default function RootLayout({ children }: { children: React.ReactNode }) { + return ( + + + {children} + + + ); +} diff --git a/pages/404.tsx b/app/not-found.tsx similarity index 96% rename from pages/404.tsx rename to app/not-found.tsx index 619ff392d..f33d3571e 100644 --- a/pages/404.tsx +++ b/app/not-found.tsx @@ -1,3 +1,4 @@ +'use client'; import Link from 'next/link'; import { NotFoundWrap } from '../styles/errorStyle'; import { TitleMs } from '@/styles/commonStyle'; diff --git a/pages/index.tsx b/app/page.tsx similarity index 99% rename from pages/index.tsx rename to app/page.tsx index 509dfcbd2..8500bf3e0 100644 --- a/pages/index.tsx +++ b/app/page.tsx @@ -1,3 +1,4 @@ +'use client'; import { Container, TitleLs, TitleMs } from '@/styles/commonStyle'; import { Section } from '../styles/mainStyle'; import LinkButton from '@/components/common/atoms/LinkButton'; diff --git a/pages/policy/index.tsx b/app/policy/page.tsx similarity index 93% rename from pages/policy/index.tsx rename to app/policy/page.tsx index e78590e67..815f54f08 100644 --- a/pages/policy/index.tsx +++ b/app/policy/page.tsx @@ -1,3 +1,4 @@ +'use client'; import { Container, InnerLarge } from '@/styles/commonStyle'; export default function Policy() { diff --git a/pages/shared/[id].tsx b/app/shared/[id]/SharedClient.tsx similarity index 52% rename from pages/shared/[id].tsx rename to app/shared/[id]/SharedClient.tsx index fedc4c171..8b4660623 100644 --- a/pages/shared/[id].tsx +++ b/app/shared/[id]/SharedClient.tsx @@ -1,70 +1,40 @@ -import { ContainBody, ContainHead, Container, TitleMs } from '@/styles/commonStyle'; -import { BodyInner, ShareHeadInner } from '../../styles/folderStyle'; -import { IFolderContentApi, IFolderMenuButton } from '../../components/folder/interface'; +'use client'; import PostCardList from '@/components/folder/PostCardList'; -import { instance } from '@/lib/axios'; -import { useRouter } from 'next/router'; -import { GetServerSidePropsContext } from 'next'; import SearchInputBox from '@/components/folder/SearchInputBox'; -import { useState } from 'react'; +import { IFolderContent, IFolderMenuButton } from '@/components/folder/interface'; +import { ContainBody, ContainHead, Container, TitleMs } from '@/styles/commonStyle'; +import { BodyInner, ShareHeadInner } from '@/styles/folderStyle'; import Image from 'next/image'; +import { useRouter } from 'next/navigation'; +import { useState } from 'react'; const LOGO_IMAGE = '/assets/logo/logo_codeit.svg'; const SEARCH_IMAGE = '/assets/icon/icon_search.svg'; -export async function getServerSideProps(contaxt: GetServerSidePropsContext) { - const { query } = contaxt; - try { - const [resTitle, resContent] = await Promise.all([instance.get(`/folders/${query.id}`), instance.get(`/links?folderId=${query.id}`)]); - const $title = resTitle.data; - const $content = resContent.data; - - if (!$title.data[0]) { - return { - notFound: true, - }; - } - - return { - props: { - $title, - $content, - }, - }; - } catch (error) { - console.log('ERROR IN SERVER FETCHING DATA: ', error); - return { - notFound: true, - }; - } -} - export interface IShareTitle { data: Omit; } -export default function Shared({ $title, $content }: { $title: IShareTitle; $content: IFolderContentApi }) { +export default function SharedClient({ menuData, contentData, pageId }: { menuData: IFolderMenuButton[]; contentData: IFolderContent[]; pageId: string }) { const router = useRouter(); const [searchContatn, setSearchContent] = useState(); - + console.log('menuData', menuData); // Search const handelSearch = (value: string) => { let filter; if (value) { - filter = $content?.data.filter((con) => { + filter = contentData.filter((con: IFolderContent) => { if (!con) return; return con.description?.includes(value) || con.title?.includes(value) || con.url?.includes(value); }); setSearchContent(filter); return; } - setSearchContent($content?.data); + setSearchContent(contentData); }; // search - const contentSearch = searchContatn ?? $content?.data; - - if (!$title.data[0]) router.push('/notfound'); + const contentSearch = searchContatn ?? contentData; return ( @@ -77,7 +47,7 @@ export default function Shared({ $title, $content }: { $title: IShareTitle; $con height={60} />

@코드잇

- {$title?.data[0]?.name && {$title?.data[0]?.name}} + {menuData[0]?.name && {menuData[0]?.name}} diff --git a/app/shared/[id]/page.tsx b/app/shared/[id]/page.tsx new file mode 100644 index 000000000..bc476ab9f --- /dev/null +++ b/app/shared/[id]/page.tsx @@ -0,0 +1,22 @@ +import { getFolderDetailProps, getLinkProps } from '@/api/folder.api'; +import { revalidatePath } from 'next/cache'; +import { redirect } from 'next/navigation'; +import SharedClient from './SharedClient'; + +export async function getSharedProp(id: string) { + try { + const [menuData, contentData] = await Promise.all([getFolderDetailProps(id), getLinkProps(id)]); + return { menuData, contentData }; + } catch (error) { + console.log('ERROR IN SERVER FETCHING DATA: ', error); + } + revalidatePath('/folder'); + redirect('/folder'); +} + +export default async function Shared({ params: { id } }: { params: { id: string } }) { + const pageId = id; + const { menuData, contentData } = await getSharedProp(pageId); + const props = { menuData, contentData, pageId }; + return ; +} diff --git a/pages/signin/index.tsx b/app/signin/page.tsx similarity index 84% rename from pages/signin/index.tsx rename to app/signin/page.tsx index 1464538cb..41d42f19e 100644 --- a/pages/signin/index.tsx +++ b/app/signin/page.tsx @@ -1,63 +1,21 @@ -import { useContext, useEffect, useState } from 'react'; -import { FontSM, Relative } from '@/styles/commonStyle'; -import { JoinBody, JoinAccessControlBox, JoinSocial, JoinTitle, JoinWrap } from '../../styles/loginStyle'; -import { ErrorText, FormRowBox, FormWrap } from '@/components/join/formStyle'; -import LinkButton from '@/components/common/atoms/LinkButton'; +'use client'; import Button from '@/components/common/atoms/Button'; +import LinkButton from '@/components/common/atoms/LinkButton'; +import { ErrorText, FormRowBox, FormWrap } from '@/components/join/formStyle'; import { loginForm } from '@/components/join/interfase'; +import Loading from '@/components/loading/Loading'; +import { AuthContext } from '@/lib/auto.provider'; import { joinInstance } from '@/lib/axios'; -import { AuthContext } from '@/lib/auto.context'; -import { GetServerSidePropsContext } from 'next'; -import { useRouter } from 'next/router'; -import { useForm } from 'react-hook-form'; +import { FontSM, Relative } from '@/styles/commonStyle'; import Image from 'next/image'; -import Loading from '@/components/loading/Loading'; +import { useRouter } from 'next/navigation'; +import { useContext, useEffect, useState } from 'react'; +import { useForm } from 'react-hook-form'; +import { JoinAccessControlBox, JoinBody, JoinSocial, JoinTitle, JoinWrap } from '../../styles/loginStyle'; const BASE_PAGE_URL = '/'; const SIGNIN_PAGE_URL = '/signin'; -export async function getServerSideProps(context: GetServerSidePropsContext) { - const { req, resolvedUrl } = context; - if (!req) return { props: {} }; - - const isSigninPage = resolvedUrl === SIGNIN_PAGE_URL; - - if (req.headers.referer) { - // 내부 접속 - if (req.headers.cookie) { - return { - redirect: { - destination: req.headers.referer, - permanent: false, - }, - }; - } - } - - if (!req.headers.referer) { - //외부 접속 - if (req.headers.cookie) { - return { - redirect: { - destination: BASE_PAGE_URL, - permanent: false, - }, - }; - } - } - - if (!req.headers.cookie && !isSigninPage) { - return { - redirect: { - destination: SIGNIN_PAGE_URL, - permanent: false, - }, - }; - } - - return { props: {} }; -} - export default function SignIn() { const router = useRouter(); const { handleLogin } = useContext(AuthContext); @@ -100,7 +58,6 @@ export default function SignIn() { }, [router]); if (!isStylesLoaded) return ; - return ( diff --git a/pages/signup/index.tsx b/app/signup/page.tsx similarity index 88% rename from pages/signup/index.tsx rename to app/signup/page.tsx index d5dc0b456..a5c41b028 100644 --- a/pages/signup/index.tsx +++ b/app/signup/page.tsx @@ -1,60 +1,20 @@ -import { FontSM, Relative } from '@/styles/commonStyle'; -import LinkButton from '@/components/common/atoms/LinkButton'; +'use client'; import Button from '@/components/common/atoms/Button'; +import LinkButton from '@/components/common/atoms/LinkButton'; import { ErrorText, FormRowBox, FormWrap } from '@/components/join/formStyle'; -import { JoinAccessControlBox, JoinBody, JoinTitle, JoinWrap, JoinSocial } from '../../styles/loginStyle'; -import { useEffect, useState } from 'react'; -import { useForm } from 'react-hook-form'; -import { joinInstance } from '@/lib/axios'; -import { useRouter } from 'next/router'; import { IJoinForm } from '@/components/join/interfase'; -import { GetServerSidePropsContext } from 'next'; -import Image from 'next/image'; import Loading from '@/components/loading/Loading'; +import { joinInstance } from '@/lib/axios'; +import { FontSM, Relative } from '@/styles/commonStyle'; +import Image from 'next/image'; +import { useRouter } from 'next/navigation'; +import { useEffect, useState } from 'react'; +import { useForm } from 'react-hook-form'; +import { JoinAccessControlBox, JoinBody, JoinSocial, JoinTitle, JoinWrap } from '../../styles/loginStyle'; const BASE_PAGE_URL = '/'; const SIGNUP_PAGE_URL = '/signup'; -export async function getServerSideProps(contaxt: GetServerSidePropsContext) { - const { req, resolvedUrl } = contaxt; - const isSignupPage = resolvedUrl === SIGNUP_PAGE_URL; - - if (req.headers.referer) { - // 내부 접속 - if (req.headers.cookie) { - return { - redirect: { - destination: req.headers.referer, - permanent: false, - }, - }; - } - } - - if (!req.headers.referer) { - //외부 접속 - if (req.headers.cookie) { - return { - redirect: { - destination: BASE_PAGE_URL, - permanent: false, - }, - }; - } - } - - if (!req.headers.cookie && !isSignupPage) { - return { - redirect: { - destination: SIGNUP_PAGE_URL, - permanent: false, - }, - }; - } - - return { props: {} }; -} - export default function SignUp() { const router = useRouter(); const [pwVisibility, setPwVisibility] = useState(false); @@ -83,6 +43,7 @@ export default function SignUp() { const handlePassWordCheck = (password: IJoinForm['password'], passwordConfirm: IJoinForm['passwordConfirm']) => { if (password !== passwordConfirm) { setError('passwordConfirm', { message: '비밀번호가 다릅니다.' }, { shouldFocus: true }); + return; } }; diff --git a/components/common/Footer.tsx b/components/common/Footer.tsx index 5b3935674..c1a8432b9 100644 --- a/components/common/Footer.tsx +++ b/components/common/Footer.tsx @@ -1,9 +1,10 @@ +'use client'; import { useEffect, useState } from 'react'; import { FootInner, FootNav, FootSign, FootSocial, FootWrap } from './footerStyle'; import LinkButton from './atoms/LinkButton'; import Link from 'next/link'; import Image from 'next/image'; -import { useRouter } from 'next/router'; +import { usePathname } from 'next/navigation'; export const snsIconSrc = [ { @@ -31,12 +32,12 @@ export const snsIconSrc = [ const hidePages = ['/signin', '/signup']; function Footer() { - const { pathname } = useRouter(); + const pathName = usePathname(); const [isHideFooter, setIsHideFooter] = useState(true); useEffect(() => { - setIsHideFooter(hidePages.includes(pathname)); - }, [pathname]); + setIsHideFooter(hidePages.includes(pathName)); + }, [pathName]); if (isHideFooter) return null; diff --git a/components/common/Header.tsx b/components/common/Header.tsx index 19a13b782..4ada06542 100644 --- a/components/common/Header.tsx +++ b/components/common/Header.tsx @@ -1,13 +1,15 @@ +'use client'; import { useContext, useEffect, useState } from 'react'; import { Email, HeaderControl, HeaderInner, HeaderLogo, HeaderWrap } from './headerStyle'; import { Profile } from '@/styles/commonStyle'; -import { AuthContext } from '@/lib/auto.context'; + import { joinInstance } from '@/lib/axios'; import LinkButton from './atoms/LinkButton'; import Button from './atoms/Button'; import Link from 'next/link'; import Image from 'next/image'; -import { useRouter } from 'next/router'; +import { usePathname } from 'next/navigation'; +import { AuthContext } from '@/lib/auto.provider'; const LOGO_IMAGE = '/assets/logo/logo.svg'; @@ -24,8 +26,7 @@ const hidePages = ['/signin', '/signup']; const noHeaderFixed = ['/folder']; function Header() { - const router = useRouter(); - const { pathname } = router; + const pathName = usePathname(); const { isLoggedIn, handleLogout } = useContext(AuthContext); const [isfixed, setIsFixed] = useState(true); const [isHideHeader, setIsHideHeader] = useState(true); @@ -38,9 +39,9 @@ function Header() { useEffect(() => { handleUserInfo(); - setIsHideHeader(hidePages.includes(pathname)); - setIsFixed(noHeaderFixed.includes(pathname)); - }, [pathname]); + setIsHideHeader(hidePages.includes(pathName)); + setIsFixed(noHeaderFixed.includes(pathName)); + }, [pathName]); if (isHideHeader) return null; diff --git a/components/folder/FolderButtonList.tsx b/components/folder/FolderButtonList.tsx index 29503d0be..d05d4a0e1 100644 --- a/components/folder/FolderButtonList.tsx +++ b/components/folder/FolderButtonList.tsx @@ -1,30 +1,30 @@ import { BookMarkBtnList } from '@/styles/folderStyle'; import { memo } from 'react'; import Button from '../common/atoms/Button'; -import { IFolderMenuButtonApi } from './interface'; +import { IFolderMenuButton } from './interface'; interface IButtonList { - $menu: IFolderMenuButtonApi | null; - $activeBtnId: number; - onClick: (id: number) => void; + $menu?: IFolderMenuButton[]; + $activeBtnId: string; + onClick: (id: string) => void; } function FolderButtonList({ $menu, $activeBtnId, onClick }: IButtonList) { return ( {$menu && - $menu.data?.map((item) => ( + $menu.map((item) => ( ))} diff --git a/components/folder/FolderContentControll.tsx b/components/folder/FolderContentControll.tsx index bcf145e10..7869b1b1f 100644 --- a/components/folder/FolderContentControll.tsx +++ b/components/folder/FolderContentControll.tsx @@ -27,9 +27,9 @@ const folderControlBtn = [ ]; interface iControll { - $title: string; + $title?: string; onclick: (type: string) => void; - $id?: number; + $id?: string; } function FolderContentControll({ $title, onclick, $id }: iControll) { @@ -39,7 +39,7 @@ function FolderContentControll({ $title, onclick, $id }: iControll) { return ( - {$id && $id === -1 ? ( + {$id && $id === `전체` ? ( diff --git a/components/folder/PostCard.tsx b/components/folder/PostCard.tsx index 96fd1e99f..848ec8e29 100644 --- a/components/folder/PostCard.tsx +++ b/components/folder/PostCard.tsx @@ -47,10 +47,6 @@ export default function PostCard({ id, folder_id, image_source, description, cre setIsModalShow(false); }; - const date = useMemo(() => { - return new Date(`${created_at}`); - }, []); - const handleModalProps = async () => { // 클릭한 link의 폴더명 const resMenu = await instance.get(`/folders`); @@ -101,7 +97,7 @@ export default function PostCard({ id, folder_id, image_source, description, cre className='card__content'> {description} -

{date.toLocaleString()}

+

{new Date(`${created_at}`).toLocaleString()}

diff --git a/lib/auto.context.tsx b/lib/auto.provider.tsx similarity index 98% rename from lib/auto.context.tsx rename to lib/auto.provider.tsx index 1db5da213..49c3cbb16 100644 --- a/lib/auto.context.tsx +++ b/lib/auto.provider.tsx @@ -1,3 +1,4 @@ +'use client'; import React, { createContext, useEffect, useState } from 'react'; type login = boolean | undefined; diff --git a/lib/theme.provider.tsx b/lib/theme.provider.tsx new file mode 100644 index 000000000..625c92bd5 --- /dev/null +++ b/lib/theme.provider.tsx @@ -0,0 +1,22 @@ +'use client'; +import { createContext } from 'react'; +import AuthProvider from './auto.provider'; +import { Wrap } from '@/styles/mainStyle'; +import Header from '@/components/common/Header'; +import Footer from '@/components/common/Footer'; + +export const ThemeContext = createContext({}); + +export default function ThemeProvider({ children }: { children: React.ReactNode }) { + return ( + + + +
+ {children} +