diff --git a/public/assets/icon/icon_loading.svg b/public/assets/icon/icon_loading.svg new file mode 100644 index 000000000..e2dddfc6c --- /dev/null +++ b/public/assets/icon/icon_loading.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/common/atoms/Button.tsx b/src/components/common/atoms/Button.tsx index d36d2a3df..a8a6ca6f7 100644 --- a/src/components/common/atoms/Button.tsx +++ b/src/components/common/atoms/Button.tsx @@ -3,7 +3,7 @@ interface IButtonModule { children: React.ReactNode; $btnClass: string; $BeforButtonIcon?: string; - $id?: string; + $id?: string | number; $afterButtonIcon?: string; $type?: 'button' | 'reset' | 'submit' | undefined; onclick?: () => void; diff --git a/src/components/common/atoms/Input.tsx b/src/components/common/atoms/Input.tsx index d604281b9..273a79123 100644 --- a/src/components/common/atoms/Input.tsx +++ b/src/components/common/atoms/Input.tsx @@ -1,6 +1,7 @@ import { ChangeEvent, ReactNode, useEffect, useRef, useState } from 'react'; import Button from './Button'; import { InputModule } from './inputStyle'; +import { SearchResults } from '../../../pages/folder/folderStyle'; interface IButtonModule { $type?: string; $inputClass?: string; @@ -44,22 +45,25 @@ function Input({ }; return ( - <> - - {$btnShow && ( - - )} - + <> +
+ + {$btnShow && ( + + )} +
+ {value && {value}으로 검색한 결과입니다.} + ); } export default Input; diff --git a/src/components/folder/ContantList.tsx b/src/components/folder/ContantList.tsx index 007431fea..0cc1e3f2e 100644 --- a/src/components/folder/ContantList.tsx +++ b/src/components/folder/ContantList.tsx @@ -4,23 +4,22 @@ import { IFolderContent } from '../../pages/folder/interface'; interface IFolderList { contant: IFolderContent[] | [] | undefined | null; - loading: boolean; } -function ContantList({ contant, loading }: IFolderList) { +function ContantList({ contant }: IFolderList) { return (
- {loading ? ( - Loading... - ) : contant ? ( - - {contant?.map((data) => ( - - ))} - - ) : ( - 저장된 링크가 없습니다. - )} + { + contant ? ( + + {contant?.map((data) => ( + + ))} + + ) : ( + 저장된 링크가 없습니다. + ) + }
); } diff --git a/src/components/folder/FolderButtonList.tsx b/src/components/folder/FolderButtonList.tsx index 110128bc4..3190fd2e5 100644 --- a/src/components/folder/FolderButtonList.tsx +++ b/src/components/folder/FolderButtonList.tsx @@ -5,44 +5,38 @@ import { IFolderMenuButtonApi } from '../../pages/folder/interface'; interface IButtonList { $menu: IFolderMenuButtonApi | null; - $loading: boolean; - $btnActive: number; + $btnActive: number | string; onClick: (id:number) => void; } function FolderButtonList({ $menu, - $loading, $btnActive, onClick, }: IButtonList) { return ( - {$loading ? null : ( - <> + + {$menu && + $menu.data?.map((item) => ( - {$menu && - $menu.data?.map((item, i) => ( - - ))} - - )} + ))} ); } diff --git a/src/components/folder/FolderContentControll.tsx b/src/components/folder/FolderContentControll.tsx index 6def16e86..a4d018bdb 100644 --- a/src/components/folder/FolderContentControll.tsx +++ b/src/components/folder/FolderContentControll.tsx @@ -1,7 +1,7 @@ import { memo } from 'react'; import { ShareBox, ShareListBtn } from '../../pages/folder/folderStyle'; -import { SubTitle } from '../../styles/commonStyle'; import Button from '../common/atoms/Button'; +import { Link } from 'react-router-dom'; const folderControlBtn = [ { @@ -27,15 +27,16 @@ const folderControlBtn = [ interface iControll { $title: string; onclick: (type: any) => void; + $id?:number } -function FolderContentControll({ $title, onclick }: iControll) { +function FolderContentControll({ $title, onclick, $id }: iControll) { const handleModalOpen = (type: any) => { onclick(type); }; return ( - {$title} + {$title} {$title === '전체' || ( {folderControlBtn.map((btn) => ( diff --git a/src/components/loading/Loading.tsx b/src/components/loading/Loading.tsx new file mode 100644 index 000000000..6d8ae962b --- /dev/null +++ b/src/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/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx index bd42c5368..c1d9fdffd 100644 --- a/src/components/modal/Modal.tsx +++ b/src/components/modal/Modal.tsx @@ -14,23 +14,23 @@ import CheckBox from '../common/atoms/CheckBox'; import { ModlaTitle } from '../../styles/commonStyle'; 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 ; + return ; } else if (body === 'checkbox') { if (!data) return null; return ; } } -interface IModalInfo extends IModal { - onOpen: boolean; - onClose: () => void; - $folderId?:number | null -} - function Modal({ onOpen, onClose, @@ -42,6 +42,7 @@ function Modal({ $buttonText, $modalData, }: IModalInfo) { + const modalClose = () => { onClose(); }; @@ -56,7 +57,9 @@ function Modal({ {$title} {$titleDescText &&
{$titleDescText}
} - {$body && {bodyContent($body, $modalData, $folderId)}} + {$body && + {bodyContent($body, $modalData, $folderId)} + } {$buttonStyle && ( - - {/* 설정 버튼 */} - - {/* 컨텐츠 리스트 */} - - - - + + {loading ? + + + {/* 검색창 */} + + {/* 폴더 리스트 버튼 */} + + + + + {/* 설정 버튼 */} + + {/* 컨텐츠 리스트 */} + + + + : + } + + ); } diff --git a/src/pages/folder/Shared.tsx b/src/pages/folder/Shared.tsx index 8fbfeb07c..7690ac168 100644 --- a/src/pages/folder/Shared.tsx +++ b/src/pages/folder/Shared.tsx @@ -2,10 +2,12 @@ import { ContainBody, ContainHead } from '../../styles/commonStyle'; import { BodyInner, ShareHeadInner, BoxLinkSearch } from './folderStyle'; import { TitleMs } from '../../styles/commonStyle'; import Input from '../../components/common/atoms/Input'; -import { SHAREDCONTANTAPI } from '../../constant/api'; +import { FOLDER_CONTANT_LIST_API, FOLDER_MENU_LIST_API } from '../../constant/api'; import useFetch from '../../hook/useFetch'; -import { IFolderContent } from './interface'; +import { IFolderContentApi, IFolderMenuButtonApi } from './interface'; import ContantList from '../../components/folder/ContantList'; +import { useNavigate, useParams } from 'react-router-dom'; +import Loading from '../../components/loading/Loading'; const logo = '/assets/logo/logo_codeit.svg'; const search = '/assets/icon/icon_search.svg'; @@ -30,19 +32,35 @@ function useFatchDataLoad(api: string) { } function Shared() { - const { value, isLoading } = - useFatchDataLoad(SHAREDCONTANTAPI); + const {id} = useParams(); + const navigate = useNavigate(); + const { value: menus, isLoading: menusLoading } = + useFatchDataLoad(`${FOLDER_MENU_LIST_API}`); + const { value: title } = + useFatchDataLoad(`${FOLDER_MENU_LIST_API}/${id}`); + const { value: contant, isLoading: contantLoading } = + useFatchDataLoad(`${FOLDER_CONTANT_LIST_API}?folderId=${id}`); + + const filter = menus?.data.some(data => `${data.id}` === id) + if(filter === false) { + navigate('/not-found'); + return null; + } + + const loading = menusLoading === false || contantLoading === false; return ( <> - - + { + loading ? + - + + : + } + ); } diff --git a/src/pages/folder/folderStyle.ts b/src/pages/folder/folderStyle.ts index 39dcc1fd3..2c752f66c 100644 --- a/src/pages/folder/folderStyle.ts +++ b/src/pages/folder/folderStyle.ts @@ -131,7 +131,14 @@ export const BookmarkBox = styled.div` export const ShareBox = styled.div` ${FolderBtnBox} - + a { + font-size: 1.5rem; + line-height: 1.8125rem; + font-weight: 600; + &:hover { + text-decoration: underline; + } + } @media screen and (max-width: ${theme.screenSize.moLarge}) { flex-direction: column; align-items: flex-start; @@ -167,4 +174,15 @@ export const BoxLinkSearch = styled.div` @media screen and (max-width: ${theme.screenSize.moLarge}) { margin-bottom: 32px; } -`; \ No newline at end of file +`; + +export const SearchResults = styled.div` + margin-top: 40px; + color: ${theme.color.grayc}; + text-align: left; + font-size: 32px; + font-weight: 600; + span { + font-weight: 600; + } +` \ No newline at end of file diff --git a/src/router.tsx b/src/router.tsx index 08f07f76f..7a03eb8fd 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -19,10 +19,7 @@ export const router = createBrowserRouter([ path: "folder", element: , }, - { - path: "Shared", - element: , - }, + { path: "privacy", element: , @@ -31,6 +28,10 @@ export const router = createBrowserRouter([ path: "faq", element: , }, + { + path: "shared/:id", + element: , + }, ], }, {