feat: UA 분기처리

.storybook/preview.tsx

@@ -7,6 +7,8 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { defaultColorTheme } from '../src/styles/theme/default.css';
 import React from 'react';
 import { ApolloWrapper } from '../src/apollo/apollo-wrapper';
+import { StaticContextUserAgent } from '../src/Provider/StaticContextUserAgent.context';
+import { UAParser } from 'ua-parser-js';
 
 export const customViewports = {
   'container-s': {
@@ -66,11 +68,14 @@ const preview: Preview = {
 
 export const decorators = [
   (Story) => {
+    const ua = new UAParser(window.navigator.userAgent).getResult();
     return (
       <ApolloWrapper>
-        <div className={defaultColorTheme}>
-          <Story />
-        </div>
+        <StaticContextUserAgent.Provider value={ua}>
+          <div className={defaultColorTheme}>
+            <Story />
+          </div>
+        </StaticContextUserAgent.Provider>
       </ApolloWrapper>
     );
   },

package.json

@@ -39,7 +39,8 @@
     "react-responsive": "^9.0.2",
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1",
-    "swiper": "^11.0.6"
+    "swiper": "^11.0.6",
+    "ua-parser-js": "^1.0.37"
   },
   "devDependencies": {
     "@babel/core": "^7.23.6",
@@ -69,6 +70,7 @@
     "@types/react-dom": "^18.2.7",
     "@types/react-slick": "^0.23.13",
     "@types/react-test-renderer": "^18.0.0",
+    "@types/ua-parser-js": "^0.7.39",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "@typescript-eslint/parser": "^6.4.0",
     "@typescript-eslint/utils": "^6.4.0",

src/Provider/StaticContextUserAgent.context.ts

@@ -0,0 +1,27 @@
+import UAParser from 'ua-parser-js';
+import { createStaticContext } from '@/utils/context/StaticContext';
+
+export const StaticContextUserAgent = createStaticContext<UAParser.IResult>({
+  ua: '',
+  browser: {
+    name: '',
+    version: '',
+    major: '',
+  },
+  device: {
+    model: '',
+    type: '',
+    vendor: '',
+  },
+  engine: {
+    name: '',
+    version: '',
+  },
+  os: {
+    name: '',
+    version: '',
+  },
+  cpu: {
+    architecture: '',
+  },
+});

src/app/admin/page.tsx

@@ -21,8 +21,6 @@ const Admin = () => {
     [],
   );
 
-  console.log(value);
-
   return (
     <div className={classNames(defaultColorTheme)}>
       <p>계속해서 줄바꿈을 하고 싶다면 \ 을 사용하세용</p>

src/app/api/user-agent/route.ts

@@ -0,0 +1,8 @@
+import { userAgent, type NextRequest } from 'next/server';
+
+export async function GET(req: NextRequest) {
+  console.log('userAgent', req.headers);
+  return new Response(JSON.stringify(req), {
+    status: 200,
+  });
+}

src/app/context.ts

@@ -1,3 +1,4 @@
+import UAParser from 'ua-parser-js';
 import { createStaticContext } from '@/utils/context/StaticContext';
 
 export interface UserInfoData {
@@ -17,11 +18,36 @@ export interface SectionData {
 }
 
 interface PageInfoData {
+  userAgent: UAParser.IResult;
   userInfo: UserInfoData;
   sections: SectionData[];
 }
 
 export const StaticContextPageInfo = createStaticContext<PageInfoData>({
+  userAgent: {
+    ua: '',
+    browser: {
+      name: '',
+      version: '',
+      major: '',
+    },
+    device: {
+      model: '',
+      type: '',
+      vendor: '',
+    },
+    engine: {
+      name: '',
+      version: '',
+    },
+    os: {
+      name: '',
+      version: '',
+    },
+    cpu: {
+      architecture: '',
+    },
+  },
   userInfo: {
     token: 'sungyeon',
     id: '',

src/app/sungyeon/page.tsx

@@ -1,5 +1,7 @@
 import classNames from 'classnames';
+import { headers } from 'next/headers';
 import React from 'react';
+import { UAParser } from 'ua-parser-js';
 import { getClient } from '@/apollo/apollo-client';
 import Container from '@/composable/Container/Container';
 import Contents from '@/containers/Contents';
@@ -10,6 +12,7 @@ import { sungyeonColorTheme } from '@/styles/theme/sungyeon.css';
 import { StaticContextPageInfo } from '../context';
 
 const Sungyeon = async () => {
+  const ua = new UAParser(headers().get('user-agent') || '').getResult();
   const apolloClient = getClient();
   const userByName = await getUserByNameQuery(apolloClient, '윤성연');
   const sectionByUserId = await getSectionsByUserIdQuery(
@@ -23,6 +26,7 @@ const Sungyeon = async () => {
   return (
     <StaticContextPageInfo.Provider
       value={{
+        userAgent: ua,
         userInfo: {
           token: 'sungyeon',
           id: getUserByName.id,

src/components/Card/History/Impact/HistoryImpactCard.tsx

@@ -3,7 +3,7 @@
 import classNames from 'classnames';
 import React, { PropsWithChildren } from 'react';
 import CommonIcon from '@/composable/Icon/CommonIcon';
-import { StaticContextUserInfo } from '@/containers/UserInfoProvider.context';
+import { StaticContextUserInfo } from '@/Provider/UserInfoProvider.context';
 import { getStaticContext } from '@/utils/context/StaticContext';
 import calcRemToPxNumber from '@/utils/style/calcRemToPxNumber';
 import CommonCard from '../../Common/CommonCard';

src/components/History/History.tsx

@@ -2,8 +2,10 @@
 
 import { useSuspenseQuery } from '@apollo/client';
 import React, { Suspense, useContext, useState } from 'react';
-import UserInfoProvider from '@/containers/UserInfoProvider';
+import UAParser from 'ua-parser-js';
 import { GET_HISTORY_ITEM_BY_HISTORY_ID } from '@/gql/queries/history_item';
+import { StaticContextUserAgent } from '@/Provider/StaticContextUserAgent.context';
+import UserInfoProvider from '@/Provider/UserInfoProvider';
 import {
   GetHistoryItemByHistoryIdQuery,
   GetHistoryItemByHistoryIdQueryVariables,
@@ -20,9 +22,11 @@ import {
 } from './History.context';
 import HistorySummary from './Summary/HistorySummary';
 
-interface Props extends HistorySectionContextProps {}
+interface Props extends HistorySectionContextProps {
+  userAgent: UAParser.IResult;
+}
 
-const History = ({ summary }: Props) => {
+const History = ({ summary, userAgent }: Props) => {
   const [selectInfo, setSelectInfo] = useState({
     isSelected: false,
     id: '',
@@ -32,32 +36,34 @@ const History = ({ summary }: Props) => {
 
   return (
     <UserInfoProvider>
-      <StaticContextHistory.Provider
-        value={{
-          summary,
-        }}
-      >
-        <DispatcherContextHistory.Provider
+      <StaticContextUserAgent.Provider value={userAgent}>
+        <StaticContextHistory.Provider
           value={{
-            setSelectInfo,
+            summary,
           }}
         >
-          <ValueContextHistory.Provider
+          <DispatcherContextHistory.Provider
             value={{
-              selectInfo,
+              setSelectInfo,
             }}
           >
-            <section>
-              {!selectInfo.isSelected && <History.Summary />}
-              {selectInfo.isSelected && (
-                <Suspense fallback={<></>}>
-                  <History.Carousel />
-                </Suspense>
-              )}
-            </section>
-          </ValueContextHistory.Provider>
-        </DispatcherContextHistory.Provider>
-      </StaticContextHistory.Provider>
+            <ValueContextHistory.Provider
+              value={{
+                selectInfo,
+              }}
+            >
+              <section suppressHydrationWarning>
+                {!selectInfo.isSelected && <History.Summary />}
+                {selectInfo.isSelected && (
+                  <Suspense fallback={<></>}>
+                    <History.Carousel />
+                  </Suspense>
+                )}
+              </section>
+            </ValueContextHistory.Provider>
+          </DispatcherContextHistory.Provider>
+        </StaticContextHistory.Provider>
+      </StaticContextUserAgent.Provider>
     </UserInfoProvider>
   );
 };
@@ -106,8 +112,6 @@ const Carousel = () => {
   ) as SummaryData;
 
   const handleClick = (id: string, summary_id: string, index: number) => {
-    console.log({ id, summary_id, index });
-
     setSelectInfo({
       isSelected: true,
       id,

src/components/History/Summary/HistorySummary.tsx

@@ -1,7 +1,9 @@
+'use client';
+
 import 'swiper/css';
 
 import classNames from 'classnames';
-import React, { Fragment, PropsWithChildren, useState } from 'react';
+import React, { Fragment, PropsWithChildren, useEffect, useState } from 'react';
 import HistoryCard from '@/components/Card/History/HistoryCard';
 import { HistoryCardContextProps } from '@/components/Card/History/HistoryCard.context';
 import { historyCardWrapWidthStyle } from '@/components/Card/History/HistoryCard.css';
@@ -10,6 +12,7 @@ import CommonIcon from '@/composable/Icon/CommonIcon';
 import Pagination from '@/composable/Pagination/Pagination';
 import Spacer from '@/composable/Spacer/Spacer';
 import { useODSBreakPoints } from '@/hook/useODSBreakPoints';
+import { StaticContextUserAgent } from '@/Provider/StaticContextUserAgent.context';
 import { createNestedArray } from '@/utils/array/createNestedArray';
 import { getStaticContext } from '@/utils/context/StaticContext';
 import OceanSwiper from '../../OceanSwiper/OceanSwiper';
@@ -30,7 +33,6 @@ import {
   listWrapStyle,
   swiperWrapVariants,
 } from './HistorySummary.css';
-
 export interface HistoryCardData extends HistoryCardContextProps {
   id: string;
 }
@@ -50,24 +52,31 @@ const HistorySummary = ({
   selectIndex,
   handleClick,
 }: CommonProps) => {
+  const ua = getStaticContext(StaticContextUserAgent);
   const { breakpointS } = useODSBreakPoints();
+  const [isMobile, setIsMobile] = useState(
+    ua.device?.type === 'mobile' || false,
+  );
 
+  useEffect(() => {
+    if (breakpointS === true) setIsMobile(true);
+  }, [breakpointS]);
   return (
     <StaticContextHistorySummary.Provider
       value={{
         handleClick,
         summary_id,
       }}
     >
-      {breakpointS && (
+      {isMobile && (
         <HistorySummary.List
           title={title}
           data={data}
           isDetailView={isDetailView}
           selectIndex={selectIndex}
         />
       )}
-      {!breakpointS && (
+      {!isMobile && (
         <HistorySummary.Swiper
           title={title}
           data={data}