Skip to content

Commit

Permalink
Merge pull request #481 from bomin0830/part3-김보민-week15
Browse files Browse the repository at this point in the history
[김보민] week15
  • Loading branch information
o-seung-yeon authored May 29, 2024
2 parents 2812ee7 + 3bf2356 commit 5f80be0
Show file tree
Hide file tree
Showing 74 changed files with 366 additions and 240 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@

# misc
.DS_Store
._.DS_Store
**/.DS_Store
**/._.DS_Store
*.pem

# debug
Expand Down
1 change: 0 additions & 1 deletion components/SinginForm/index.js

This file was deleted.

1 change: 0 additions & 1 deletion components/SingupForm/index.js

This file was deleted.

1 change: 0 additions & 1 deletion components/SocalLogin/index.js

This file was deleted.

4 changes: 2 additions & 2 deletions jsconfig.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"compilerOptions": {
"baseUrl": "5-Weekly-Mission"
"baseUrl": "src"
},
"include": ["5-Weekly-Mission"]
"include": ["src"]
}
8 changes: 4 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -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 <Component {...pageProps} />;
Expand Down
95 changes: 0 additions & 95 deletions pages/folder.js

This file was deleted.

83 changes: 83 additions & 0 deletions pages/folder/[folderId].js
Original file line number Diff line number Diff line change
@@ -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 (
<div>
<Header userEmail={user.email} />
<LinkInput folders={Folders} />
<div className={cx("contents-wrapper")}>
<SearchBar
searchKeyWord={searchKeyWord}
setSearchKeyWord={setSearchKeyWord}
/>
<div className={cx("links-wrapper")}>
<Sorting folders={Folders} folderId={folderId} />
<FolderTitle name={name} />
{checkArrayBlank(linksByQuery) ? (
<ErrorComponent />
) : (
<LinkList
searchKeyWord={searchKeyWord}
links={linksByQuery}
createdTime="created_at"
image="image_source"
/>
)}
</div>
</div>
<Footer />
</div>
);
}

export default FolderPage;
75 changes: 75 additions & 0 deletions pages/folder/index.js
Original file line number Diff line number Diff line change
@@ -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 (
<div>
<Header userEmail={user.email} />
<LinkInput folders={Folders} />
<div className={cx("contents-wrapper")}>
<SearchBar
searchKeyWord={searchKeyWord}
setSearchKeyWord={setSearchKeyWord}
/>
<div className={cx("links-wrapper")}>
<Sorting folders={Folders} />
<FolderTitle name={"전체"} />
{checkArrayBlank(AllLinks) ? (
<ErrorComponent />
) : (
<LinkList
searchKeyWord={searchKeyWord}
links={AllLinks}
createdTime="created_at"
image="image_source"
/>
)}
</div>
</div>
<Footer />
</div>
);
}

export default FolderPage;
52 changes: 52 additions & 0 deletions pages/shared.js
Original file line number Diff line number Diff line change
@@ -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 (
<>
<Header userEmail={user.email} />
<FolderInfo userName={user.name} />
<div className={cx("contents-wrapper")}>
<SearchBar
searchKeyWord={searchKeyWord}
setSearchKeyWord={setSearchKeyWord}
/>
<LinkList
searchKeyWord={searchKeyWord}
links={links}
createdTime="createdAt"
image="imageSource"
/>
</div>
<Footer />
</>
);
}

export default SharedPage;
Loading

0 comments on commit 5f80be0

Please sign in to comment.