Merge branch 'dev' into refactoring/#308

.github/workflows/chromatic.yml

@@ -0,0 +1,18 @@
+name: "Chromatic Deployment"
+run-name: ${{ github.actor }}의 스토리북 배포
+
+on: push
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v1
+      - run: yarn
+
+      - uses: chromaui/action@v1
+
+        with:
+          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/main.yml

@@ -20,7 +20,7 @@ jobs:
         env:
           API_TOKEN_GITHUB: ${{ secrets.TEST }}
         with:
-          source-directory: 'output'
+          source-directory: "output"
           destination-github-username: OhWonJu
           destination-repository-name: Team-SilverTown-MasilGasil-FE
           user-email: ${{ secrets.TEST_EMAIL }}

build-storybook.log

@@ -0,0 +1,43 @@
+@storybook/cli v8.0.6
+
+info => Cleaning outputDir: ../../../var/folders/2b/yxbhgn2s0lsc7bwp2jj82r100000gn/T/chromatic--98723-Uz50qJYBqFzg
+info => Loading presets
+WARN The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Storybook 8.0; and will likely be removed in a future version.
+WARN It's recommended you read this document:
+WARN https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm
+WARN 
+WARN Once you've made the necessary changes, you can remove the addon from your package.json and storybook config.
+info => Building manager..
+info => Manager built (128 ms)
+info => Building preview..
+info Addon-docs: using MDX3
+info => Using implicit CSS loaders
+info => Using SWC as compiler
+info => Using default Webpack5 setup
+info Using tsconfig paths for react-docgen
+WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
+WARN This can impact web performance.
+WARN Assets: 
+WARN   static/media/Maplestory_Light.9d949758.ttf (1.29 MiB)
+WARN   static/media/Pretendard-Black.6ffb4c12.ttf (2.54 MiB)
+WARN   static/media/Pretendard-Bold.be4e300c.ttf (2.54 MiB)
+WARN   static/media/Pretendard-ExtraBold.cffbbae6.ttf (2.55 MiB)
+WARN   static/media/Pretendard-ExtraLight.3a1f8545.ttf (2.71 MiB)
+WARN   static/media/Pretendard-Light.be916151.ttf (2.68 MiB)
+WARN   static/media/Pretendard-Medium.07e5324d.ttf (2.58 MiB)
+WARN   static/media/Pretendard-Regular.fbe5b096.ttf (2.6 MiB)
+WARN   static/media/Pretendard-SemiBold.8ae7df0e.ttf (2.55 MiB)
+WARN   static/media/Pretendard-Thin.23965237.ttf (2.74 MiB)
+WARN   930.18f3dd63.iframe.bundle.js (247 KiB)
+WARN   664.8060e2ba.iframe.bundle.js (622 KiB)
+WARN   898.4e51cdbe.iframe.bundle.js (1.68 MiB)
+WARN   589.49d6c4a8.iframe.bundle.js (628 KiB)
+WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
+WARN Entrypoints:
+WARN   main (1.76 MiB)
+WARN       runtime~main.411d4294.iframe.bundle.js
+WARN       898.4e51cdbe.iframe.bundle.js
+WARN       main.e58a6988.iframe.bundle.js
+WARN 
+info => Preview built (11 s)
+info => Output directory: /var/folders/2b/yxbhgn2s0lsc7bwp2jj82r100000gn/T/chromatic--98723-Uz50qJYBqFzg

package.json

@@ -8,7 +8,8 @@
     "start": "next start",
     "lint": "next lint",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_27f3b4fb19773c2"
   },
   "dependencies": {
     "@babel/core": "^7.23.9",
@@ -92,6 +93,7 @@
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "autoprefixer": "^10.0.1",
     "babel-plugin-styled-components": "^2.1.4",
+    "chromatic": "^11.3.0",
     "eslint": "^8.0.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",

src/app/api/auth/[...nextauth]/options.ts

@@ -1,36 +1,11 @@
-import { authenticate, getMe, refreshToken } from "@/lib/api/User/server";
+// import { authenticate, getMe, refreshToken } from "@/lib/api/User/server";
+import { getMe, kakaoAuth, refreshAccessToken } from "@/lib/api/User/server";
+import apiClient from "@/lib/client/apiClient";
+import { parseJwt } from "@/lib/utils/parseJwt";
 
 import { NextAuthOptions } from "next-auth";
 import KakaoProvider from "next-auth/providers/kakao";
 
-export const parseJwt = (
-  token: string,
-): { iss: string; iat: number; exp: number; user_id: number; authorities: string } => {
-  const base64Url = token.split(".")[1];
-  const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
-  const jsonPayload = decodeURIComponent(
-    atob(base64)
-      .split("")
-      .map(function (c) {
-        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
-      })
-      .join(""),
-  );
-
-  return JSON.parse(jsonPayload);
-};
-
-export async function refreshAccessToken(token: any) {
-  const refreshedToken = await refreshToken({
-    serviceToken: token.serviceToken,
-    refreshToken: token.refreshToken,
-  });
-
-  return {
-    serviceToken: refreshedToken,
-  };
-}
-
 export const authOptions: NextAuthOptions = {
   providers: [
     KakaoProvider({
@@ -53,7 +28,7 @@ export const authOptions: NextAuthOptions = {
         // 카카오 인증 로그인 시
         // 서비스 서버로부터 새로운 accessToken, refreshToken 을 발급
 
-        const tokenData = await authenticate({ accessToken: account.access_token });
+        const tokenData = await kakaoAuth({ accessToken: account.access_token });
 
         token.serviceToken = tokenData?.accessToken;
         token.refreshToken = tokenData?.refreshToken;
@@ -68,25 +43,30 @@ export const authOptions: NextAuthOptions = {
           const shouldRefreshTime = serviceTokenExp - nowTime - TEN_MINUTES_AGO_IN_MS;
 
           if (shouldRefreshTime <= 0) {
-            token.serviceToken = await refreshAccessToken(token);
+            token.serviceToken = await refreshAccessToken({
+              serviceToken: token.serviceToken as string,
+              refreshToken: token.refreshToken as string,
+            });
           }
 
-          const me = await getMe(token.serviceToken as string);
+          apiClient.setDefaultHeader("Authorization", `Bearer ${token.serviceToken}`);
+
+          const me = await getMe();
           token.nickname = me?.nickname;
         }
       }
       return token;
     },
     async session({ session, token, trigger, newSession }) {
       if (trigger === "update") {
-        console.log("UPDATE", newSession);
         newSession.serviceToken && (session.serviceToken = newSession.serviceToken);
         session.nickname = newSession.nickname;
       }
 
       if (token.serviceToken) {
         session.serviceToken = token.serviceToken as string;
         session.nickname = token.nickname as string;
+        apiClient.setDefaultHeader("Authorization", `Bearer ${token.serviceToken}`);
       } else {
         session.serviceToken = undefined;
         session.nickname = undefined;

src/app/auth/kakao/Kakao.tsx

@@ -3,6 +3,9 @@
 import React, { useEffect } from "react";
 
 import { getMe } from "@/lib/api/User/client";
+import apiClient from "@/lib/client/apiClient";
+import useAuthStore from "@/lib/stores/useAuthStore";
+import useMeStore from "@/lib/stores/useMeStore";
 import { MeResponse } from "@/types/Response";
 import { useQuery } from "@tanstack/react-query";
 
@@ -14,11 +17,8 @@ const Kakao = () => {
 
   const { data: session } = useSession();
 
-  // useEffect(() => {
-  //   if (session) {
-  //     console.log("kakao (session)", session);
-  //   }
-  // }, [session]);
+  const { setAuth } = useAuthStore();
+  const { setMe, initMe } = useMeStore();
 
   const {
     data: meData,
@@ -31,15 +31,20 @@ const Kakao = () => {
   });
 
   useEffect(() => {
-    console.log("kakao 분기처리 (meData)", meData, session);
+    // console.log("kakao 분기처리 (meData)", meData, session);
 
     if (!meData) return;
 
     if (meData && !meData.nickname) {
-      console.log("가가입 유저->회훤가입뷰");
+      // console.log("가가입 유저->회훤가입뷰");
+      setAuth({ isLogIn: false, serviceToken: undefined });
+      initMe();
       router.replace("/signup", { scroll: false });
     } else {
-      console.log("가입 유저->홈뷰");
+      // console.log("가입 유저->홈뷰");
+      setAuth({ isLogIn: true, serviceToken: session?.serviceToken });
+      setMe({ ...meData });
+      apiClient.setDefaultHeader("Authorization", `Bearer ${session?.serviceToken}`);
       router.replace("/home");
     }
   }, [meData, session]);

src/app/error.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  console.log(error);
+
+  return (
+    <html>
+      <body>
+        <main>
+          <section className="flex h-full flex-col items-center justify-center">
+            <h2 className="text-center">앗 문제가 생겼어요!</h2>
+            <button
+              className="mt-4 rounded-md bg-green-500 px-4 py-2 text-small text-white transition-colors"
+              onClick={() => reset()}
+            >
+              다시 시도하기
+            </button>
+          </section>
+        </main>
+      </body>
+    </html>
+  );
+}

src/app/home/page.tsx

@@ -14,7 +14,7 @@ const Home = async () => {
 
   const session = await getServerSession(authOptions);
   const popularWalkingTrails = await getPopularWalkingTrails(session?.serviceToken!);
-  const userInfo = await getMe(session?.serviceToken!).then((user) => {
+  const userInfo = await getMe().then((user) => {
     if (!user) {
       return;
     }

src/app/layout.tsx

@@ -45,7 +45,10 @@ export default async function RootLayout({
   children: React.ReactNode;
 }>) {
   const session = await getServerSession(authOptions);
-  const me = session?.serviceToken ? await getMe(session.serviceToken) : undefined;
+  // if (session && session.serviceToken)
+  //   apiClient.setDefaultHeader("Authorization", `Bearer ${session.serviceToken}`);
+
+  const me = session?.serviceToken ? await getMe() : undefined;
 
   return (
     <html lang="ko">

src/app/user/[id]/MyPage.controller.tsx

@@ -15,7 +15,7 @@ interface MyPageControllerProps {
 
 const MyPageController = async ({ userId }: MyPageControllerProps) => {
   const session = await getServerSession(authOptions);
-  const me = session?.serviceToken ? await getMe(session.serviceToken) : undefined;
+  const me = session?.serviceToken ? await getMe() : undefined;
   const isMe = me && me.userId == userId;
 
   const userProfile = await getUserProfile(userId);

src/app/user/[id]/setting/edit/page.tsx

@@ -1,20 +1,11 @@
-import { authOptions } from "@/app/api/auth/[...nextauth]/options";
 import { TopNavigator } from "@/components/navigators/TopNavigator";
 import { GoBackButton } from "@/components/navigators/TopNavigator/components";
 import { getMe } from "@/lib/api/User/server";
 
 import UserEditView from "./UserEdit.view";
 
-import { getServerSession } from "next-auth";
-
 const UserEdit = async () => {
-  const session = await getServerSession(authOptions);
-
-  if (!session?.serviceToken) {
-    return;
-  }
-
-  const defaultData = await getMe(session.serviceToken);
+  const defaultData = await getMe();
 
   if (!defaultData) {
     return;

src/components/navigators/BottomNavigator/BottomNavigator.tsx

@@ -2,6 +2,8 @@
 
 import * as S from "./BottomNavigator.styles";
 
+import { useEffect } from "react";
+
 import userProfile from "@/assets/userProfile.svg";
 import { Avatar } from "@/components";
 import useMeStore from "@/lib/stores/useMeStore";