Merge pull request #95 from Funssion-SWM/develop

Layout과 Link를 사용해 API요청횟수 최소화 : Me page

src/app/me/[slug]/layout.tsx

@@ -0,0 +1,139 @@
+import Header from '@/components/shared/Header';
+import {
+  getHistory,
+  getMemosByUserId,
+  getRankInfoByUserId,
+  getStatsByUserId,
+} from '@/service/me';
+import LayoutWrapper from '@/components/shared/LayoutWrapper';
+import { checkUser, getUserInfo } from '@/service/auth';
+import { cookies } from 'next/headers';
+import { ACCESS_TOKEN, MY_TAG_MAX_COUNT, REFRESH_TOKEN } from '@/utils/const';
+import MeSideBar from '@/components/me/MeSideBar';
+import { getUserTags } from '@/service/tag';
+import MeTagsContainer from '@/components/me/MeTagsContainer';
+import { getFollowers, getFollowings } from '@/service/follow';
+import FollowListModalProvider from '@/context/FollowListModalProvider';
+import FollowListModal from '@/components/me/FollowListModal';
+import { getNotificationsTop30 } from '@/service/notification';
+import { getScoreInfoByUserId } from '@/service/rank';
+import {
+  getCoverletterInfoByUserId,
+  getCoverletterVisibleMode,
+} from '@/service/coverletter';
+import { notFound } from 'next/navigation';
+
+type Props = {
+  children: React.ReactNode;
+  params: {
+    slug: string;
+  };
+};
+
+export default async function MeLayout({ children, params: { slug } }: Props) {
+  const accessToken = cookies().get(ACCESS_TOKEN)?.value;
+  const refreshToken = cookies().get(REFRESH_TOKEN)?.value;
+  const cookie = `${ACCESS_TOKEN}=${accessToken}; ${REFRESH_TOKEN}=${refreshToken}`;
+  const userId = Number(slug);
+
+  const userInfo = await getUserInfo(userId, cookie);
+  if (userInfo.userId === undefined) {
+    notFound();
+  }
+
+  const memosData = getMemosByUserId(userId);
+  const historyData = getHistory(
+    userId,
+    new Date().getFullYear(),
+    new Date().getMonth() + 1,
+    true
+  );
+  const myData = checkUser(cookie);
+  const tagData = getUserTags(slug, MY_TAG_MAX_COUNT);
+  const followingData = getFollowings(slug);
+  const followerData = getFollowers(slug);
+  const userRankData = getRankInfoByUserId(userId);
+  const userStatsData = getStatsByUserId(userId);
+  const userScoreData = getScoreInfoByUserId(userId);
+  const coverletterVisibleModeData = getCoverletterVisibleMode();
+
+  const [
+    history,
+    { id, isLogin, authority },
+    tags,
+    followings,
+    followers,
+    userRankInfo,
+    userStats,
+    { dailyScore },
+    coverletterIsVisible,
+  ] = await Promise.all([
+    historyData,
+    myData,
+    tagData,
+    followingData,
+    followerData,
+    userRankData,
+    userStatsData,
+    userScoreData,
+    coverletterVisibleModeData,
+  ]);
+
+  const myUserInfo = await getUserInfo(id);
+
+  const notifications = isLogin ? await getNotificationsTop30(cookie) : [];
+
+  const isCoverletterCreated = await getCoverletterInfoByUserId(
+    userId,
+    cookie
+  ).then((res) => {
+    if ('code' in res) {
+      return false;
+    }
+    return true;
+  });
+
+  return (
+    <section>
+      <Header
+        isLogin={isLogin}
+        notifications={notifications}
+        profileImageFilePath={myUserInfo?.profileImageFilePath}
+        authority={authority}
+      />
+      <LayoutWrapper paddingY="py-0">
+        <div className="flex flex-col sm:flex-row">
+          <FollowListModalProvider
+            followings={followings}
+            followers={followers}
+          >
+            <MeSideBar
+              userInfo={userInfo}
+              history={history}
+              userId={userId}
+              myId={id}
+              myUserInfo={myUserInfo}
+              userRankInfo={userRankInfo}
+              userStats={userStats}
+              dailyScore={dailyScore}
+              isCoverletterCreated={isCoverletterCreated}
+              coverletterIsVisible={coverletterIsVisible}
+            />
+            <FollowListModal isMine={id === userId} />
+          </FollowListModalProvider>
+          <div className="flex flex-col w-full">
+            {tags.length >= 2 && (
+              <MeTagsContainer
+                tags={tags}
+                userInfo={userInfo}
+                userId={userId}
+                isLogin={isLogin}
+              />
+            )}
+            {children}
+          </div>
+        </div>
+      </LayoutWrapper>
+    </section>
+  );
+}

src/app/me/[slug]/like/layout.tsx

@@ -0,0 +1,21 @@
+import MeNavigator from '@/components/me/MeNavigator';
+
+type Props = {
+  children: React.ReactNode;
+  params: {
+    slug: string;
+  };
+};
+
+export default async function MeLikeLayout({
+  children,
+  params: { slug },
+}: Props) {
+  const userId = +slug;
+  return (
+    <div className="w-full grow sm:px-4 sm:py-2">
+      <MeNavigator userId={userId} type="like" />
+      {children}
+    </div>
+  );
+}

src/app/me/[slug]/like/memo/page.tsx

@@ -0,0 +1,21 @@
+import MeMemosContainer from '@/components/me/MeMemosContainer';
+import MePostCategories from '@/components/me/MePostCategories';
+import { getLikedMemosByUserId } from '@/service/me';
+
+type Props = {
+  params: {
+    slug: string;
+  };
+};
+
+export default async function MeLikedMemoPage({ params: { slug } }: Props) {
+  const userId = +slug;
+  const memos = await getLikedMemosByUserId(userId);
+
+  return (
+    <>
+      <MePostCategories userId={userId} selected="memo" bigCategory="like" />
+      <MeMemosContainer memos={memos} userId={userId} bigCategory="like" />
+    </>
+  );
+}

src/app/me/[slug]/like/page.tsx

@@ -0,0 +1,21 @@
+import MeMemosContainer from '@/components/me/MeMemosContainer';
+import MePostCategories from '@/components/me/MePostCategories';
+import { getLikedMemosByUserId } from '@/service/me';
+
+type Props = {
+  params: {
+    slug: string;
+  };
+};
+
+export default async function MeLikepage({ params: { slug } }: Props) {
+  const userId = +slug;
+  const memos = await getLikedMemosByUserId(userId);
+
+  return (
+    <>
+      <MePostCategories userId={userId} selected="memo" bigCategory="like" />
+      <MeMemosContainer memos={memos} userId={userId} bigCategory="like" />
+    </>
+  );
+}

src/app/me/[slug]/like/question/page.tsx

@@ -0,0 +1,29 @@
+import MePostCategories from '@/components/me/MePostCategories';
+import MeQuestionsContainer from '@/components/me/MeQuestionsContainer';
+import { getLikedQuestionsByUserId, getQuestionsByUserId } from '@/service/me';
+
+type Props = {
+  params: {
+    slug: string;
+  };
+};
+
+export default async function MeLikedQuestionPage({ params: { slug } }: Props) {
+  const userId = +slug;
+  const questions = await getLikedQuestionsByUserId(userId);
+
+  return (
+    <>
+      <MePostCategories
+        userId={userId}
+        selected="question"
+        bigCategory="like"
+      />
+      <MeQuestionsContainer
+        questions={questions}
+        userId={userId}
+        bigCategory="like"
+      />
+    </>
+  );
+}

src/app/me/[slug]/like/series/page.tsx

@@ -0,0 +1,25 @@
+import MePostCategories from '@/components/me/MePostCategories';
+import MeSeriesContainer from '@/components/me/MeSeriesContainer';
+import { getLikedSeriesByUserId } from '@/service/me';
+
+type Props = {
+  params: {
+    slug: string;
+  };
+};
+
+export default async function MeLikedSeriesPage({ params: { slug } }: Props) {
+  const userId = +slug;
+  const series = await getLikedSeriesByUserId(userId);
+
+  return (
+    <>
+      <MePostCategories userId={userId} selected="series" bigCategory="like" />
+      <MeSeriesContainer
+        seriesArr={series}
+        userId={userId}
+        bigCategory="like"
+      />{' '}
+    </>
+  );
+}