Feat: TimeLine 페이지 추가

haeyonghahn · May 20, 2024 · 827b0ad · 827b0ad
1 parent 441d2e9
commit 827b0ad
Show file tree

Hide file tree

Showing 12 changed files with 253 additions and 61 deletions.
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "prod": "SET NODE_ENV=production && vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
@@ -50,4 +51,4 @@
   "msw": {
     "workerDirectory": "public"
   }
-}
+}
diff --git a/public/images/level.svg b/public/images/level.svg
diff --git a/public/images/settings.svg b/public/images/settings.svg
diff --git a/public/images/vector.svg b/public/images/vector.svg
diff --git a/src/components/Button/Button.styled.tsx b/src/components/Button/Button.styled.tsx
@@ -25,10 +25,10 @@ export const Layout = styled.button<ILayoutProps>`
   border: none;
   background: ${colors.green50};
 
-  color: "#1C1D27";
+  color: ${colors.black};
   font-family: "Pretendard";
   font-style: normal;
-  font-weight: ${fontWeight.bold};
+  font-weight: ${fontWeight.semiBold};
   font-size: ${fontSize.h3};
   text-align: center;
   text-decoration: none;
@@ -91,7 +91,9 @@ export const Layout = styled.button<ILayoutProps>`
     props.none === "true"
       ? css`
           border: 1px solid ${colors.gray200};
-          background-color: ${props.theme === "dark" ? colors.black : colors.green50};
+          background-color: ${props.theme === "dark"
+            ? colors.black
+            : colors.green50};
           color: ${colors.white};
           &:hover {
             background: linear-gradient(

diff --git a/src/layout/GeneralLayout.tsx b/src/layout/GeneralLayout.tsx
@@ -1,14 +1,12 @@
-// import { getCurrentUserInfoWithToken } from "@/api/login";
-// import { interestAtom, userAtom } from "@/atoms/user";
+import { getCurrentUserInfoWithToken } from "@/api/login";
+import { interestAtom, userAtom } from "@/atoms/user";
 import Sidebar from "@/layout";
-// import Spinner from "@/components/Spinner";
-// import { useRouter } from "@/hooks/useRouter";
+import Spinner from "@/components/Spinner";
+import { useRouter } from "@/hooks/useRouter";
 import { SidebarContent } from "@/router";
-import { useRecoilState } from "recoil";
-// import { getAccessTokenFromLocalStorage } from "@/utils/accessTokenHandler";
-import { useEffect } from "react";
-import { userAtom } from "@/atoms/user";
-// import { useRecoilState, useSetRecoilState } from "recoil";
+import { getAccessTokenFromLocalStorage } from "@/utils/accessTokenHandler";
+import { useCallback, useEffect } from "react";
+import { useRecoilState, useSetRecoilState } from "recoil";
 
 interface GeneralLayoutProps {
   children: React.ReactNode;
@@ -19,40 +17,40 @@ const GeneralLayout: React.FC<GeneralLayoutProps> = ({
   children,
   withSidebar,
 }) => {
-  const [userProfile] = useRecoilState(userAtom);
-  // const setInterests = useSetRecoilState(interestAtom);
-  // const { routeTo } = useRouter();
+  const [userProfile, setUserProfile] = useRecoilState(userAtom);
+  const setInterests = useSetRecoilState(interestAtom);
+  const { routeTo } = useRouter();
 
-  // const fetchUserProfile = useCallback(async () => {
-  //   const userProfileResponse = await getCurrentUserInfoWithToken(
-  //     getAccessTokenFromLocalStorage()
-  //   );
+  const fetchUserProfile = useCallback(async () => {
+    const userProfileResponse = await getCurrentUserInfoWithToken(
+      getAccessTokenFromLocalStorage()
+    );
 
-  //   if (!userProfileResponse) {
-  //     routeTo("/login");
-  //     return;
-  //   }
+    if (!userProfileResponse) {
+      routeTo("/login");
+      return;
+    }
 
-  //   setUserProfile(userProfileResponse);
-  //   if (userProfileResponse.interests) {
-  //     setInterests(userProfileResponse.interests);
-  //   }
-  // }, []);
+    setUserProfile(userProfileResponse);
+    if (userProfileResponse.interests) {
+      setInterests(userProfileResponse.interests);
+    }
+  }, []);
 
   useEffect(() => {
     console.log("page changed!");
-    // fetchUserProfile();
+    fetchUserProfile();
   }, []);
 
-  // if (!userProfile?.id) {
-  //   return (
-  //     <div className="general-layout">
-  //       <div className="general-layout__body">
-  //         <Spinner />
-  //       </div>
-  //     </div>
-  //   );
-  // }
+  if (!userProfile?.id) {
+    return (
+      <div className="general-layout">
+        <div className="general-layout__body">
+          <Spinner />
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="general-layout">

diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx
@@ -12,11 +12,8 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
           {children.element}
         </GeneralLayout>
       ) : (
-        <GeneralLayout withSidebar={children.withSidebar}>
-          {children.element}
-        </GeneralLayout>
+        children.element
       )}
-      {/* <Switch /> */}
     </>
   );
 };

diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
@@ -1,18 +1,7 @@
 import { BASE_URL } from "@/api/const";
-import { saveAccessTokenToLocalStorage } from "@/utils/accessTokenHandler";
 import { rest } from "msw";
 
 export const handlers = [
-  rest.get(`${BASE_URL}/api/v1/oauth/login`, (req, res, ctx) => {
-    const searchParams = req.url.searchParams;
-    const code = searchParams.get("code");
-    const oAuthResponseData =
-      code +
-      "eyJhbGciOiJIUzM4NCJ9.eyJpZCI6InlvdWcxMzIyQG5hdmVyLmNvbSIsImlhdCI6MTcxNjIwNDA2NiwiZXhwIjoxNzE2MzA0MDY2fQ.lRGeWk3L25XP2Z49COO0vmH5HqtMzNjPccPpJCy1wVYwrTp8-AcHkcQrBlUWCstf";
-    saveAccessTokenToLocalStorage(oAuthResponseData);
-    return res(ctx.status(200), ctx.json("success"));
-  }),
-
   rest.get(`${BASE_URL}/api/v1/my/member`, (req, res, ctx) => {
     const authHeader = req.headers.get("Authorization");
 

diff --git a/src/pages/MyRecord/MyRecord.tsx b/src/pages/MyRecord/MyRecord.tsx
@@ -1,13 +1,57 @@
+import { colors } from "@/_shared/colors";
+import { fontWeight } from "@/_shared/typography";
 import { userAtom } from "@/atoms/user";
 import Avatar from "@/components/Avatar/Avatar";
 import Button from "@/components/Button";
 import Typography from "@/foundations/Typography/Typography";
+import { useRouter } from "@/hooks/useRouter";
+import { Link, Outlet } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 import styled from "styled-components";
 
-const MyRecordWrapper = styled.div``;
+const Wrapper = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
 
-const MyReocrdAvatar = styled.div``;
+const MyRecordWrapper = styled.div`
+  margin: 10% 0px 10% 0px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: ${fontWeight.semiBold};
+  font-size: 18px;
+`;
+
+const MyRecordWrapperTitle = styled.div`
+  flex: 1;
+  text-align: center;
+  margin-left: 30px;
+`;
+
+const MyRecordWrapperImage = styled.div`
+  float: right;
+  margin-right: 10px;
+`;
+
+const LevelWrapper = styled.div`
+  height: 60%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+`;
+
+const LevelTitle = styled.div`
+  padding: 5px;
+  border: 2px solid;
+  border-radius: 5px;
+  margin: 20px 0px;
+  width: fit-content;
+  font-weight: 600;
+  font-size: 12px;
+`;
 
 const MyRecordProfile = styled.div`
   display: flex;
@@ -27,11 +71,71 @@ const MyRecordProfileName = styled.div`
 
 const MyRecordProfileButton = styled.div``;
 
+const Tabs = styled.div`
+  height: 30%;
+  background-color: #282932;
+  border-radius: 24px 24px 0px 0px;
+  overflow: auto;
+`;
+
+const TabTitle = styled.div`
+  display: flex;
+  color: #75777b;
+`;
+
+const Tab = styled.div`
+  margin: 20px;
+  font-weight: 600;
+  font-size: 16px;
+`;
+
+const Divider = styled.div`
+  height: 1px;
+  background-color: #3e4049;
+`;
+
+const TimeLineMonth = styled.div`
+  margin: 20px;
+  font-weight: 600;
+  font-size: 18px;
+`;
+
+const TimeLineArrow = styled.img`
+  margin-left: 10px;
+`;
+
+const TimeLineDescription = styled.div`
+  text-align: center;
+  color: #75777b;
+  font-weight: 600;
+  font-size: 14px;
+`;
+
+const ButtonWrapper = styled.div`
+  margin: 20px;
+  text-align: center;
+`;
+
 const MyRecord = () => {
   const user = useRecoilValue(userAtom);
+  const { currentPath } = useRouter();
+  const tabClickHandler = (path: string) => {
+    console.log(path);
+  };
   return (
-    <MyRecordWrapper>
-      <MyReocrdAvatar></MyReocrdAvatar>
+    <Wrapper>
+      <MyRecordWrapper>
+        <MyRecordWrapperTitle>
+          <span>마이 굳잉</span>
+        </MyRecordWrapperTitle>
+        <MyRecordWrapperImage>
+          <img src="/images/settings.svg" />
+        </MyRecordWrapperImage>
+      </MyRecordWrapper>
+      <LevelWrapper>
+        <img src="/images/level.svg" />
+        <LevelTitle>LV1. 초보 낭만러</LevelTitle>
+      </LevelWrapper>
       <MyRecordProfile>
         <MyRecordProfileInfo>
           <Avatar
@@ -47,7 +151,29 @@ const MyRecord = () => {
           <Button text="프로필 수정" width=""></Button>
         </MyRecordProfileButton>
       </MyRecordProfile>
-    </MyRecordWrapper>
+      <Tabs>
+        <TabTitle>
+          <Tab>
+            <Link to="timeline">타임라인</Link>
+          </Tab>
+          <Tab>
+            <Link to="save">저장</Link>
+          </Tab>
+        </TabTitle>
+        <Divider className="line"></Divider>
+        <TimeLineMonth>
+          2023.08
+          <TimeLineArrow src="/images/vector.svg" />
+        </TimeLineMonth>
+        <TimeLineDescription>
+          이번달의 첫번째 굳이데이 기록을 남겨보세요.
+        </TimeLineDescription>
+        <ButtonWrapper>
+          <Button width="100%" text="기록하기"></Button>
+        </ButtonWrapper>
+      </Tabs>
+      <Outlet />
+    </Wrapper>
   );
 };
 

diff --git a/src/pages/TimeLine/TimeLine.tsx b/src/pages/TimeLine/TimeLine.tsx
@@ -0,0 +1,9 @@
+const TimeLine = () => {
+  return (
+    <>
+      <h2>타임라인</h2>
+    </>
+  );
+};
+
+export default TimeLine;