[JR-737] 워크스페이스간 연동 이슈 해결

apps/chooz/app/my/components/UserInfoContainer.tsx

@@ -10,9 +10,8 @@ import Image from "next/image";
 function UserInfoContainer() {
   const { data: userInfo } = useGetUserInfo();
 
-  if (!userInfo) return <></>;
-
-  const { gender, username, age, mbti, imageUrl } = userInfo;
+  if (!userInfo) return null;
+  const { gender, username, age, mbti, imageUrl } = userInfo!;
 
   return (
     <>

apps/chooz/app/my/components/VoteItemDesktop.tsx

@@ -128,7 +128,10 @@ const Message = styled.span`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 46px;
+  /**
+  * 디자인이 깨져 임시 주석처리
+  * width: 46px;
+  */
   padding: 4px 6px;
   border-radius: 4px;
   ${({ theme }) => css`

apps/chooz/app/my/edit/services/useEditProfileService.ts

@@ -10,12 +10,12 @@ export default function useEditProfileService() {
 
   const { categoryList, onClickCategory } = useClickCategory();
 
-  const { userInfo, setUserInfo } = useGetUserInfo();
+  const { data: userInfo, setUserInfo } = useGetUserInfo();
 
-  const { username, mbti, imageUrl } = userInfo;
+  const { username, mbti, imageUrl } = userInfo!;
 
   const onChangeUsername = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setUserInfo((prevUserInfo) => ({ ...prevUserInfo, username: e.target.value }));
+    setUserInfo({ ...userInfo, username: e.target.value });
   };
 
   const onChangeMbti = (value: string) => {

apps/chooz/app/my/page.tsx

@@ -2,14 +2,15 @@
 
 import { media } from "@monorepo/ui/styles/media";
 import { MY_PAGE_VOTE_TYPE } from "lib/constants";
-import { useState } from "react";
+import { Suspense, useState } from "react";
 import styled, { css } from "styled-components";
 import TabContainer from "./components/TabContainer";
 import VoteList from "./components/VoteList";
 import CountVoteContainer from "./components/VoteCountContainer";
 import { MyVoteListType } from "types/my";
 import useInfiniteMyVoteListService from "./services/useInfiniteMyPageVoteListService";
 import UserInfoContainer from "./components/UserInfoContainer";
+import { AsyncBoundary } from "../../lib/AsyncBoundary";
 
 function MyPage() {
   const [selectedTab, setSelectedTab] = useState<MyVoteListType>("created");
@@ -26,7 +27,9 @@ function MyPage() {
   return (
     <PageWrapper>
       <PageInner>
-        <UserInfoContainer />
+        <AsyncBoundary>
+          <UserInfoContainer />
+        </AsyncBoundary>
         <CountVoteContainer />
       </PageInner>
       <TabContainerWrapper>

apps/chooz/hooks/useGetUserInfo.ts

@@ -1,25 +1,20 @@
 import { reactQueryKeys } from "lib/queryKeys";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { getUserInfo } from "lib/apis/user";
-import { useState } from "react";
+import { GetUserInfoResponse } from "types/user";
 
-export function useGetUserInfo() {
-  const [userInfo, setUserInfo] = useState({
-    gender: "MALE",
-    username: "",
-    age: "",
-    mbti: "",
-    imageUrl: "",
-  });
+type SetUserInfoProps = Omit<GetUserInfoResponse, "userId" | "provider" | "providerId" | "email">;
 
+export function useGetUserInfo() {
   const { data } = useQuery(reactQueryKeys.userInfo(), getUserInfo, {
-    onSuccess: (data) => {
-      /**
-       * @Todo state를 사용 안하고 할 수 있는 방법 없을까?
-       */
-      setUserInfo(data);
-    },
+    suspense: true,
   });
 
-  return { data, userInfo, setUserInfo };
+  const qc = useQueryClient();
+
+  const setUserInfo = (userInfo: SetUserInfoProps) => {
+    qc.setQueryData(reactQueryKeys.userInfo(), userInfo);
+  };
+
+  return { data, setUserInfo };
 }

apps/chooz/lib/AsyncBoundary.tsx

@@ -0,0 +1,10 @@
+import { PropsWithChildren, Suspense } from "react";
+import GlobalErrorBoundary from "./ErrorBoundary";
+
+export const AsyncBoundary = ({ children }: PropsWithChildren) => {
+  return (
+    <GlobalErrorBoundary errorComponent={<></>}>
+      <Suspense fallback={<></>}>{children}</Suspense>
+    </GlobalErrorBoundary>
+  );
+};

apps/chooz/lib/ErrorBoundary.tsx

@@ -0,0 +1,41 @@
+import type { ErrorInfo, ReactNode } from "react";
+import { Component } from "react";
+
+interface State {
+  hasError: boolean;
+}
+
+interface Props {
+  errorComponent: ReactNode;
+  children: ReactNode;
+  /**
+   * onError에서 callback으로 받은 error, errorInfo를 이용하여 에러를 수집합니다.
+   * ex) sentry, datadog 등
+   * */
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+class GlobalErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(_: Error): State {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    this.props.onError?.(error, errorInfo);
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      return this.props.errorComponent;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default GlobalErrorBoundary;

apps/chooz/package.json

@@ -35,6 +35,7 @@
     "@svgr/webpack": "^6.5.1",
     "@types/node": "20.5.7",
     "@types/react": "18.2.21",
+    "@types/styled-components": "^5",
     "typescript": "4.9.3"
   }
 }

apps/jurumarble/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.1",
     "@monorepo/hooks": "workspace:*",
+    "@monorepo/ui": "workspace:*",
     "@tanstack/react-query": "^4.33.0",
     "@tanstack/react-query-devtools": "^4.33.0",
     "axios": "^1.5.0",

apps/jurumarble/src/lib/styles/StyledComponents.tsx

@@ -2,30 +2,18 @@
 
 import StyledComponentsRegistry from "lib/registory";
 import { PropsWithChildren } from "react";
-import { StyleSheetManager, ThemeProvider } from "styled-components";
+import { ThemeProvider } from "styled-components";
 import { jurumarbleTheme } from "./theme";
-import isPropValid from "@emotion/is-prop-valid";
 import GlobalStyles from "./globalStyles";
+import { theme } from "@monorepo/ui";
 
 function StyledComponents({ children }: PropsWithChildren) {
   return (
     <StyledComponentsRegistry>
-      {/*
-         @NOTE : 참고 https://styled-components.com/docs/api#stylesheetmanagers
-         porps를 전달할 때 isPropValid를 사용하여 styled-components에서 지원하지 않는 props를 제거한다.
-      */}
-      {/* <StyleSheetManager
-        shouldForwardProp={(propName, elementToBeRendered) => {
-          return typeof elementToBeRendered === "string" ? isPropValid(propName) : true;
-        }}
-      > */}
-      <ThemeProvider theme={jurumarbleTheme}>
-        <>
-          <GlobalStyles />
-          {children}
-        </>
+      <ThemeProvider theme={{ ...jurumarbleTheme, ...theme }}>
+        <GlobalStyles />
+        {children}
       </ThemeProvider>
-      {/* </StyleSheetManager> */}
     </StyledComponentsRegistry>
   );
 }

apps/jurumarble/src/lib/styles/styled-components.d.ts → apps/jurumarble/src/types/styled.d.ts

@@ -1,5 +1,5 @@
 import "styled-components";
-import { ThemeColors, ThemeMedia, ThemeTypography } from "./theme";
+import { ThemeColors, ThemeMedia, ThemeTypography } from "../lib/styles/theme";
 
 declare module "styled-components" {
   export interface DefaultTheme {

packages/ui/package.json

@@ -6,17 +6,17 @@
   "main": "index.ts",
   "author": "",
   "license": "ISC",
-  "dependencies": {
-    "@monorepo/hooks": "workspace:*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-is": "^18.2.0",
-    "styled-components": "^5.3.6"
-  },
   "devDependencies": {
     "@types/node": "20.5.7",
     "@types/react": "18.2.21",
     "@types/styled-components": "^5",
     "typescript": "4.9.3"
+  },
+  "peerDependencies": {
+    "@monorepo/hooks": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "styled-components": "^5.3.6"
   }
 }

yarn.lock

@@ -1561,6 +1561,7 @@ __metadata:
     "@tanstack/react-query-devtools": ^4.20.4
     "@types/node": 20.5.7
     "@types/react": 18.2.21
+    "@types/styled-components": ^5
     axios: ^1.3.2
     babel-plugin-styled-components: ^2.0.7
     babel-preset-next: ^1.4.0
@@ -1596,6 +1597,7 @@ __metadata:
   dependencies:
     "@emotion/is-prop-valid": ^1.2.1
     "@monorepo/hooks": "workspace:*"
+    "@monorepo/ui": "workspace:*"
     "@svgr/cli": ^8.0.1
     "@svgr/core": ^8.0.0
     "@svgr/plugin-jsx": ^8.0.1
@@ -1624,15 +1626,16 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@monorepo/ui@workspace:packages/ui"
   dependencies:
-    "@monorepo/hooks": "workspace:*"
     "@types/node": 20.5.7
     "@types/react": 18.2.21
     "@types/styled-components": ^5
+    typescript: 4.9.3
+  peerDependencies:
+    "@monorepo/hooks": "workspace:*"
     react: ^18.2.0
     react-dom: ^18.2.0
     react-is: ^18.2.0
     styled-components: ^5.3.6
-    typescript: 4.9.3
   languageName: unknown
   linkType: soft