-
+
폴더 추가 +
diff --git a/pages/index.tsx b/pages/index.tsx
index 1ddf2524a..04f134341 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,90 +1,7 @@
-import Footer from "@/components/sharing/Footer";
-import React, { useEffect, useState } from "react";
-import { getSampleFolder, getUser } from "@/utils/api";
-import SearchInputForm from "@/components/folder/input/SearchInputForm";
-import CardList from "@/components/folder/card/CardList";
-import FolderHeaderLayout from "@/components/folder/layout/FolderHeaderLayout";
-import MainLayout from "@/components/folder/layout/MainLayout";
-import styled from "styled-components";
-import { TSampleFolder, TUser } from "@/utils/types";
-import Header from "@/components/sharing/Header";
-import Avatar from "@/components/sharing/user/Avatar";
-import { useRouter } from "next/router";
-import { FILTER_LINKS } from "@/utils/constants";
-import { SearchMessage } from "@/pages/folder";
+import React from "react";
-export async function getServerSideProps() {
- const folderInfo = await getSampleFolder();
- const userInfo = await getUser();
-
- return {
- props: {
- folderInfo,
- userInfo,
- },
- };
+function Index() {
+ return
Index
;
}
-const FolderOwner = styled.div`
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 12px;
-`;
-
-const Index = ({
- folderInfo,
- userInfo,
-}: {
- folderInfo: TSampleFolder;
- userInfo: TUser;
-}) => {
- const router = useRouter();
- const keyword = (router.query["keyword"] as string) || null;
- const [links, setLinks] = useState(folderInfo.links);
-
- const loadNewLinks = () => {
- if (keyword) {
- const loweredKeyword = keyword.toLowerCase();
- setLinks((prevState) => FILTER_LINKS(prevState, loweredKeyword));
- } else {
- setLinks(folderInfo.links);
- }
- };
-
- useEffect(() => {
- loadNewLinks();
- }, [keyword]);
- return (
- <>
-
-
-
-
-
- @{folderInfo.owner.name}
-
-
- {folderInfo?.name}
-
-
-
-
- {keyword ? (
-
- {keyword}
- 으로 검색한 결과입니다.
-
- ) : null}
-
-
-
-
-
- );
-};
export default Index;
diff --git a/pages/shared/[folderId].tsx b/pages/shared/[folderId].tsx
new file mode 100644
index 000000000..b6752de72
--- /dev/null
+++ b/pages/shared/[folderId].tsx
@@ -0,0 +1,118 @@
+import Footer from "@/components/sharing/Footer";
+import React, { useEffect, useState } from "react";
+import { getFolderInfo, getSharedPageData, getUser } from "@/utils/api";
+import SearchInputForm from "@/components/folder/input/SearchInputForm";
+import FolderHeaderLayout from "@/components/folder/layout/FolderHeaderLayout";
+import MainLayout from "@/components/folder/layout/MainLayout";
+import styled from "styled-components";
+import { TFolder, TLink, TUser } from "@/utils/types";
+import Header from "@/components/sharing/Header";
+import Avatar from "@/components/sharing/user/Avatar";
+import { useRouter } from "next/router";
+import { SearchMessage } from "@/pages/folder/[folderId]";
+import CardList from "@/components/folder/card/CardList";
+import { useMyInfo } from "@/contexts/MyInfoContext";
+
+export async function getServerSideProps(context: any) {
+ const { folderId } = context.query;
+
+ return {
+ props: {
+ folderId,
+ },
+ };
+}
+
+const FolderOwner = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 12px;
+`;
+
+const Index = ({ folderId }: { folderId: number }) => {
+ const router = useRouter();
+ const keyword = (router.query["keyword"] as string) || null;
+ const [links, setLinks] = useState
();
+ const [folderInfo, setFolderInfo] = useState({
+ id: 0,
+ created_at: "",
+ name: "",
+ user_id: 0,
+ favorite: false,
+ });
+ const [ownerId, setOwnerId] = useState(0);
+ const [folderOwner, setFolderOwner] = useState();
+ const { myInfo } = useMyInfo();
+
+ const loadFolderInfo = async () => {
+ const res = await getFolderInfo(folderId);
+ setFolderInfo(res);
+ setOwnerId(res.user_id);
+ };
+
+ const loadUserInfo = async () => {
+ const res = await getUser(ownerId);
+ setFolderOwner(res);
+ };
+
+ const loadLinks = async () => {
+ const res = await getSharedPageData(ownerId, folderId);
+ setLinks(res);
+ };
+
+ // const loadNewLinks = () => {
+ // if (keyword) {
+ // const loweredKeyword = keyword.toLowerCase();
+ // setLinks((prevState: TLink[]) => FILTER_LINKS(prevState, loweredKeyword));
+ // } else {
+ // setLinks(folderInfo.links);
+ // }
+ // };
+
+ // useEffect(() => {
+ // loadNewLinks();
+ // }, [keyword]);
+
+ useEffect(() => {
+ loadFolderInfo();
+ }, []);
+
+ useEffect(() => {
+ loadUserInfo();
+ loadLinks();
+ }, [ownerId]);
+
+ return (
+ <>
+
+
+
+
+
+ @{folderOwner?.name}
+
+
+ {folderInfo?.name}
+
+
+
+
+ {keyword ? (
+
+ {keyword}
+ 으로 검색한 결과입니다.
+
+ ) : null}
+
+
+