Skip to content

Commit

Permalink
Refactor (/folder): useEffect, sessionStorage 이용
Browse files Browse the repository at this point in the history
  • Loading branch information
han-kimm committed Dec 10, 2023
1 parent 33c15ef commit f7b6586
Show file tree
Hide file tree
Showing 5 changed files with 16 additions and 41 deletions.
9 changes: 4 additions & 5 deletions components/Header/index/HomeHeader.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { CutLine, StyledHeader, StyledImage, Title, WrapperLink } from "@/components/Header/index/HomeHeader.styled";
import Link from "next/link";
import { useRef } from "react";

export default function HomeHeader() {
let locate = "/folder";
const locate = useRef("/signin");
const accessToken = typeof window !== "undefined" ? sessionStorage.getItem("accessToken") : null;
if (accessToken) {
locate = `/folder?a=${accessToken}`;
locate.current = `/folder`;
}

return (
Expand All @@ -20,9 +21,7 @@ export default function HomeHeader() {
<p>구경 해보기</p>
<Link href="/shared">폴더 공유하기</Link>
<CutLine />
<Link href={locate} as="/folder">
링크 추가하기
</Link>
<Link href={locate.current}>링크 추가하기</Link>
</WrapperLink>
<StyledImage priority width={1} height={1} src="index/_img.svg" alt="링크검색기능 예시이미지" />
</StyledHeader>
Expand Down
4 changes: 2 additions & 2 deletions components/Main/sign/SignForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@ const postSignData = async (obj: EventTarget, signin: boolean, router: NextRoute
const url = signin ? "/api/sign-in" : "/api/sign-up";
const res = await axios.post(url, { email, password });
const { accessToken, refreshToken } = res.data.data;
document.cookie = `accessToken=${accessToken}`;
document.cookie = `refreshToken=${refreshToken}`;
sessionStorage.setItem("accessToken", accessToken);
sessionStorage.setItem("refreshToken", refreshToken);

router.push(`/folder`);
} catch {
Expand Down
16 changes: 4 additions & 12 deletions components/Nav/Navigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,21 @@ import Avatar from "@/components/Nav/Avatar/Avatar";
import Logo from "@/components/Nav/Avatar/Logo";
import { Background, Nav } from "@/components/Nav/Navigation.styled";
import Link from "next/link";
import { memo } from "react";
import { memo, useRef } from "react";

interface Props {
id?: number;
$page?: string;
}

let locate = "/signin";

export default memo(function Navigation({ id, $page = "" }: Props) {
const locate = useRef("/signin");
const accessToken = typeof window !== "undefined" ? sessionStorage.getItem("accessToken") : null;
if (accessToken) {
locate = `/folder?a=${accessToken}`;
locate.current = `/folder`;
}

const Login = () =>
$page === "/" ? (
<Link href={locate} as={locate === "/signin" ? "/signin" : "/folder"}>
로그인
</Link>
) : (
<Avatar id={id} />
);
const Login = () => ($page === "/" ? <Link href={locate.current}>로그인</Link> : <Avatar id={id} />);

return (
<>
Expand Down
2 changes: 1 addition & 1 deletion hooks/useGetUserId.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const useGetUserId = () => {
const res = await axios.get("/api/users", { headers: { Authorization: accessToken } });
const { id } = res.data.data[0];
setId(id);
return;
return id;
}
router.push("/signin");
})();
Expand Down
26 changes: 5 additions & 21 deletions pages/folder.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,14 @@ import HeaderSearch from "@/components/Header/HeaderInput";
import LinkSection from "@/components/Main/LinkSection";
import Main from "@/components/Main/Main";
import Navigation from "@/components/Nav/Navigation";
import { useGetUserId } from "@/hooks/useGetUserId";
import useObserver from "@/hooks/useObserver";
import axios from "@/lib/axios";
import { GetServerSideProps } from "next";

export const getServerSideProps: GetServerSideProps = async (context) => {
const token = context.query["a"];
if (!token) {
return {
props: {},
redirect: { destination: "/signin" },
};
}

const res = await axios.get("/api/users", { headers: { Authorization: token } });
const { id } = res.data.data[0];
return {
props: {
id,
},
};
};

export default function FolderPage({ id }: { id: number }) {
export default function FolderPage() {
const { setRefForObserver } = useObserver();
const id = useGetUserId();

if (!id) return null;

return (
<>
Expand Down

0 comments on commit f7b6586

Please sign in to comment.