diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..c9867ccd2 Binary files /dev/null and b/.DS_Store differ diff --git a/.env b/.env new file mode 100644 index 000000000..a33403f17 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +REACT_APP_KAKAO_KEY = "b95afa4b872322082f58d1e2ca1623f2" \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index baa2b6655..f4561d625 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "clsx": "^2.0.0", "eslint": "^8", "eslint-config-next": "13.5.6", "typescript": "^5" @@ -837,6 +838,15 @@ "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" }, + "node_modules/clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", diff --git a/package.json b/package.json index 1ce24924f..83b8305ad 100644 --- a/package.json +++ b/package.json @@ -9,16 +9,17 @@ "lint": "next lint" }, "dependencies": { + "next": "13.5.6", "react": "^18", - "react-dom": "^18", - "next": "13.5.6" + "react-dom": "^18" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "clsx": "^2.0.0", "eslint": "^8", - "eslint-config-next": "13.5.6" + "eslint-config-next": "13.5.6", + "typescript": "^5" } } diff --git a/pages/_app.tsx b/pages/_app.tsx index 021681f4d..2b4e1d3c5 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,14 @@ -import '@/styles/globals.css' -import type { AppProps } from 'next/app' +import "@/src/assets/global.css"; +import type { AppProps } from "next/app"; +import Head from "next/head"; export default function App({ Component, pageProps }: AppProps) { - return + return ( + <> + + linkbrary + + ; + + ); } diff --git a/pages/_document.tsx b/pages/_document.tsx index 54e8bf3e2..057c8a57b 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,13 +1,13 @@ -import { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from "next/document"; export default function Document() { return ( - +
- ) + ); } diff --git a/pages/folder.module.css b/pages/folder.module.css new file mode 100644 index 000000000..14145798c --- /dev/null +++ b/pages/folder.module.css @@ -0,0 +1,42 @@ +.root { + display: flex; + flex-direction: column; + align-items: center; + padding: 4rem 3.2rem; +} +.addLink { + display: flex; + justify-content: center; + padding: 6rem 3.2rem 9rem 3.2rem; + background: var(--linkbrary-bg, #f0f6ff); + + @media (max-width: 767px) { + padding-top: 2.4rem; + padding-bottom: 4rem; + } +} +.section { + display: flex; + flex-direction: column; + align-items: start; + gap: 4rem; +} +.folderSection { + width: 100%; + display: flex; + flex-direction: column; + gap: 2.4rem; +} +.emptyLink { + width: 106rem; + padding: 4.1rem 0 3.5rem; + text-align: center; + font-size: 1.6rem; + @media (max-width: 1124px) { + width: 100%; + } + @media (max-width: 767px) { + width: 100%; + font-size: 1.4rem; + } +} diff --git a/pages/folder.tsx b/pages/folder.tsx new file mode 100644 index 000000000..0c455ec57 --- /dev/null +++ b/pages/folder.tsx @@ -0,0 +1,69 @@ +import { createContext, useEffect, useState } from "react"; +import AddLink from "@/src/components/AddLink/AddLink"; +import FolderPageCards from "@/src/components/Cards/FolderPageCards"; +import FolderList from "@/src/components/FolderList/FolderList"; +import Search from "@/src/components/Search/Search"; +// import useAsync from "../hooks/useAsync"; +import { Nav, Footer } from "@/src/containers"; +import { Link, getLink } from "@/src/api/getLink"; +import { Folder, getFolder } from "@/src/api/getFolder"; +import style from "./folder.module.css"; +import { useSearchParams } from "next/navigation"; +import CurrentFolder from "@/src/components/CurrentFolder/CurrentFolder"; + +export const FolderPageContext = createContext([]); + +function FolderPage() { + const [links, setLinks] = useState([]); + const [folders, setFolders] = useState([]); + // const { wrappedFunction:getLinkAsync} = useAsync(getLink); + // const {wrappedFunction:getFolderAsync} = useAsync(getFolder); + const searchParams = useSearchParams(); + const folderParam = searchParams.get("folderId"); + + useEffect(() => { + const handleLinkLoad = async () => { + const links = await getLink({ + id: 1, + folderId: folderParam || "", + }); + setLinks([...links]); + }; + handleLinkLoad(); + }, [folderParam]); + + useEffect(() => { + const handleFolderLoad = async () => { + const folders = await getFolder({ id: 1 }); + setFolders([...folders]); + }; + handleFolderLoad(); + }, []); + return ( + <> +