diff --git a/.gitignore b/.gitignore index 8f322f0d8..acd03f6cc 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,9 @@ # misc .DS_Store +._.DS_Store +**/.DS_Store +**/._.DS_Store *.pem # debug diff --git a/components/SinginForm/index.js b/components/SinginForm/index.js deleted file mode 100644 index cb1c03248..000000000 --- a/components/SinginForm/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from "./SinginForm"; diff --git a/components/SingupForm/index.js b/components/SingupForm/index.js deleted file mode 100644 index cb1c03248..000000000 --- a/components/SingupForm/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from "./SinginForm"; diff --git a/components/SocalLogin/index.js b/components/SocalLogin/index.js deleted file mode 100644 index e22f2f9c7..000000000 --- a/components/SocalLogin/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from "./SocalLogin"; diff --git a/jsconfig.json b/jsconfig.json index eb1cb0947..5875dc5b6 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "baseUrl": "5-Weekly-Mission" + "baseUrl": "src" }, - "include": ["5-Weekly-Mission"] + "include": ["src"] } diff --git a/package-lock.json b/package-lock.json index fb04282ec..786131932 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.1.0", "dependencies": { "@hookform/error-message": "^2.0.1", - "axios": "^1.6.8", + "axios": "^1.7.2", "classnames": "^2.5.1", "next": "^13.5.6", "react": "^18", @@ -783,9 +783,9 @@ } }, "node_modules/axios": { - "version": "1.6.8", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", - "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz", + "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==", "dependencies": { "follow-redirects": "^1.15.6", "form-data": "^4.0.0", diff --git a/package.json b/package.json index 466efc393..fac454890 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@hookform/error-message": "^2.0.1", - "axios": "^1.6.8", + "axios": "^1.7.2", "classnames": "^2.5.1", "next": "^13.5.6", "react": "^18", diff --git a/pages/_app.tsx b/pages/_app.tsx index 0258bb32a..248bf29c9 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,5 +1,5 @@ import type { AppProps } from "next/app"; -import "styles/giobal.css"; +import "src/styles/global.css"; export default function App({ Component, pageProps }: AppProps) { return ; diff --git a/pages/folder.js b/pages/folder.js deleted file mode 100644 index f32368ef5..000000000 --- a/pages/folder.js +++ /dev/null @@ -1,95 +0,0 @@ -import { - Header, - SearchBar, - Footer, - LinkInput, - LinkList, - Sorting, - ErrorComponent, - FolderTitle, -} from "components"; -import { getData, ApiUrl } from "../utils"; -import styles from "../styles/folder.module.scss"; -import { useEffect, useState } from "react"; -import classNames from "classnames/bind"; - -const cx = classNames.bind(styles); - -export async function getServerSideProps() { - const user = await getData(ApiUrl.sampleUser); - const Folders = await getData(ApiUrl.usersFolders); - const AllLinks = await getData(ApiUrl.usersLinks); - - return { - props: { - user, - Folders, - AllLinks, - }, - }; -} - -function FolderPage({ user, Folders, AllLinks }) { - const [selectedId, setSelectedId] = useState("1"); - const [urlBySelectedId, setUrlBySelectedId] = useState(""); - const [name, setName] = useState(""); - const [links, setLinks] = useState(AllLinks.data); - const [searchKeyWord, setSearchKeyWord] = useState(""); - - function checkArrayBlank(array) { - return array ? array.length === 0 : true; - } - - async function fetchData() { - if (selectedId) { - const newLinks = await getData(urlBySelectedId); - setLinks(newLinks.data); - } else setLinks(AllLinks.data); - } - - useEffect(() => { - const newUrl = `${ApiUrl.usersLinks}?folderId=${selectedId}`; - setUrlBySelectedId(newUrl); - }, [selectedId]); - - useEffect(() => { - fetchData(); - }, [urlBySelectedId, selectedId]); - - return ( -
-
- -
- -
- - - {checkArrayBlank(links) ? ( - - ) : ( - - )} -
-
-
-
- ); -} - -export default FolderPage; diff --git a/pages/folder/[folderId].js b/pages/folder/[folderId].js new file mode 100644 index 000000000..bed974574 --- /dev/null +++ b/pages/folder/[folderId].js @@ -0,0 +1,83 @@ +import { + Header, + SearchBar, + Footer, + LinkInput, + LinkList, + Sorting, + ErrorComponent, + FolderTitle, +} from "../../src/components"; +import { getData } from "../../src/utils"; +import styles from "src/styles/folder.module.scss"; +import { useEffect, useState } from "react"; +import classNames from "classnames/bind"; +import { useRouter } from "next/router"; + +const cx = classNames.bind(styles); + +function FolderPage() { + const [linksByQuery, setLinksByQuery] = useState([]); + const [Folders, setFolders] = useState([]); + const [user, setUser] = useState([]); + const [searchKeyWord, setSearchKeyWord] = useState(""); + const [name, setName] = useState(""); + + const router = useRouter(); + const { folderId } = router.query; + + /* 받아온 배열이 비어있을 경우 체크. */ + function checkArrayBlank(array) { + return !Array.isArray(array) || array.length === 0; + } + + /* 쿼리id로 받은 링크들, 유저데이터, 선택한 폴더 이름 데이터 가져오기*/ + async function fetchData() { + const linkUrl = `/links?folderId=${folderId}`; + const FolderUrl = `/folders/${folderId}`; + + const Folders = await getData("/folders"); + const linksByQuery = await getData(linkUrl); + const user = await getData("/users"); + const name = await getData(FolderUrl); + + setLinksByQuery(linksByQuery.data.folder); + setUser(user.data[0]); + setName(name.data[0].name); + setFolders(Folders.data.folder); + } + + useEffect(() => { + fetchData(); + }, [folderId]); + + return ( +
+
+ +
+ +
+ + + {checkArrayBlank(linksByQuery) ? ( + + ) : ( + + )} +
+
+
+
+ ); +} + +export default FolderPage; diff --git a/pages/folder/index.js b/pages/folder/index.js new file mode 100644 index 000000000..18e647135 --- /dev/null +++ b/pages/folder/index.js @@ -0,0 +1,75 @@ +import { + Header, + SearchBar, + Footer, + LinkInput, + LinkList, + Sorting, + ErrorComponent, + FolderTitle, +} from "../../src/components"; +import { checkAccessToken, getData } from "../../src/utils"; +import styles from "src/styles/folder.module.scss"; +import { useEffect, useState } from "react"; +import classNames from "classnames/bind"; + +const cx = classNames.bind(styles); + +function FolderPage() { + const [searchKeyWord, setSearchKeyWord] = useState(""); + const [user, setUser] = useState(""); + const [Folders, setFolders] = useState(""); + const [AllLinks, setAllLinks] = useState(""); + + function checkArrayBlank(array) { + return array.length && array.length !== 0 ? false : true; + } + + async function fetchData() { + const user = await getData("/users"); + const Folders = await getData("/folders"); + const AllLinks = await getData("/links"); + + setUser(user.data[0]); + setFolders(Folders.data.folder); + setAllLinks(AllLinks.data.folder); + } + + useEffect(() => { + /* AccessToken없으면 signin페이지로 이동*/ + if (!checkAccessToken("signInToken")) { + location.href = "signin"; + } + fetchData(); + }, []); + + return ( +
+
+ +
+ +
+ + + {checkArrayBlank(AllLinks) ? ( + + ) : ( + + )} +
+
+
+
+ ); +} + +export default FolderPage; diff --git a/pages/shared.js b/pages/shared.js new file mode 100644 index 000000000..5473acd50 --- /dev/null +++ b/pages/shared.js @@ -0,0 +1,52 @@ +import styles from "src/styles/SharedPage.module.scss"; +import classNames from "classnames/bind"; +import { + Header, + FolderInfo, + SearchBar, + LinkList, + Footer, +} from "../src/components"; +import { getLinkList, getData, ApiUrl } from "../src/utils"; +import { useEffect, useState } from "react"; + +const cx = classNames.bind(styles); + +function SharedPage() { + const [links, setLinks] = useState([]); + const [user, setUser] = useState([]); + const [searchKeyWord, setSearchKeyWord] = useState(""); + + const getUserData = async () => { + const { links } = await getLinkList(); + const user = await getData(ApiUrl.sampleUser); + setLinks(links); + setUser(user); + }; + + useEffect(() => { + getUserData(); + }, []); + + return ( + <> +
+ +
+ + +
+