[25.04.21 / TASK-171,TASK-172] Modify - UI Refactoring (#29)

Author: six-standard

next.config.mjs

@@ -1,18 +1,18 @@
 import { withSentryConfig } from '@sentry/nextjs';
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
   experimental: { forceSwcTransforms: true },
   output: 'standalone',
-
+  hideSourceMaps: true,
+  productionBrowserSourceMaps: false,
   webpack: (config, options) => {
     config.module.rules.push({
       test: /\.svg$/i,
-      use: [
-        options.defaultLoaders.babel,
-        { loader: '@svgr/webpack', options: { babel: false } },
-      ],
+      use: [options.defaultLoaders.babel, { loader: '@svgr/webpack', options: { babel: false } }],
     });
+
     return config;
   },
 

package.json

@@ -23,6 +23,7 @@
     "@next/third-parties": "^15.1.7",
     "@sentry/core": "^8.47.0",
     "@sentry/nextjs": "^8.47.0",
+    "@sentry/webpack-plugin": "^3.3.1",
     "@tailwindcss/typography": "^0.5.16",
     "@tanstack/react-query": "^5.69.0",
     "@tanstack/react-query-devtools": "^5.69.0",

pnpm-lock.yaml

@@ -4,11 +4,9 @@ import { COLORS } from '@/constants';
 import { useCustomNavigation } from '@/hooks';
 
 export const defaultStyle =
-  'w-[180px] h-[65px] px-9 transition-all duration-300 shrink-0 max-MBI:w-[65px] max-MBI:px-0 ';
-export const navigateStyle =
-  'gap-5 flex items-center justify-center cursor-pointer ';
-export const textStyle =
-  'text-ST4 shrink-0 transition-all duration-300 max-MBI:hidden ';
+  'w-[180px] h-[65px] px-9 transition-all duration-300 shrink-0 max-MBI:w-[65px] max-MBI:px-0';
+export const navigateStyle = 'gap-5 flex items-center justify-center cursor-pointer';
+export const textStyle = 'text-ST4 shrink-0 transition-all duration-300 max-MBI:hidden';
 
 type clickType = 'link' | 'function' | 'none';
 type BaseType = { icon: NameType };
@@ -44,23 +42,16 @@ export const Section = <T extends clickType>({
 
   if (clickType === 'link') {
     return (
-      <div
-        onClick={() => push(action)}
-        className={defaultStyle + navigateStyle}
-      >
+      <div onClick={() => push(action)} className={`${defaultStyle} ${navigateStyle}`}>
         <Icon
           size={25}
           color={
-            COLORS.TEXT[
-              typeof action === 'string' && action.includes(currentPath)
-                ? 'MAIN'
-                : 'ALT'
-            ]
+            COLORS.TEXT[typeof action === 'string' && action.includes(currentPath) ? 'MAIN' : 'ALT']
           }
           name={icon}
         />
         <span
-          className={`${action.split('?')[0] === currentPath ? 'text-TEXT-MAIN' : 'text-TEXT-ALT'} ${textStyle}`}
+          className={`${textStyle} ${action.split('?')[0] === currentPath ? 'text-TEXT-MAIN' : 'text-TEXT-ALT'}`}
         >
           {children}
         </span>
@@ -71,7 +62,7 @@ export const Section = <T extends clickType>({
   return (
     <div
       onClick={action}
-      className={`${defaultStyle + navigateStyle} TBL:min-w-[180px] rounded-t-[4px] w-[fit-content_!important] max-MBI:w-[65px_!important]`}
+      className={`${defaultStyle} ${navigateStyle} TBL:min-w-[180px] rounded-t-[4px] w-[fit-content_!important] max-MBI:w-[65px_!important]`}
     >
       {children}
     </div>

src/app/(auth-required)/compare/page.tsx

@@ -6,7 +6,7 @@ import { useEffect, useRef, useState } from 'react';
 import Image from 'next/image';
 import { revalidate } from '@/utils/revalidateUtil';
 import { PATHS, SCREENS } from '@/constants';
-import { NameType } from '@/components';
+import { Icon, NameType } from '@/components';
 import { useCustomNavigation, useResponsive } from '@/hooks';
 import { logout, me } from '@/apis';
 import { useModal } from '@/hooks/useModal';
@@ -25,7 +25,6 @@ const layouts: Array<{ icon: NameType; title: string; path: string }> = [
     title: '리더보드',
     path: `/leaderboards${PARAMS.LEADERBOARDS}`,
   },
-  { icon: 'Compare', title: '통계 비교', path: '/compare' },
 ];
 
 export const Header = () => {
@@ -84,7 +83,10 @@ export const Header = () => {
             </Section>
           ))}
         </div>
-
+        <Section clickType="function" action={() => ModalOpen(<Modal />)}>
+          <Icon name="Loudspeaker" size={25} />
+          <span className={`${textStyle} text-TEXT-ALT`}>공지사항</span>
+        </Section>
         <div className="w-fit h-fit flex flex-col relative z-50" ref={menu}>
           <Section clickType="function" action={() => setOpen((prev) => !prev)}>
             <Image
@@ -94,7 +96,7 @@ export const Header = () => {
               src={profiles?.profile.thumbnail || '/profile.jpg'}
               alt=""
             />
-            <span className={textStyle + 'text-TEXT-ALT'} id="profile">
+            <span className={`${textStyle} text-TEXT-ALT`} id="profile">
               {profiles?.username || 'NULL'}
             </span>
           </Section>
@@ -111,12 +113,6 @@ export const Header = () => {
                 >
                   로그아웃
                 </button>
-                <button
-                  className="text-TEXT-MAIN text-I3 p-5 max-MBI:p-4 flex whitespace-nowrap w-auto hover:bg-BG-ALT"
-                  onClick={() => ModalOpen(<Modal />)}
-                >
-                  공지사항
-                </button>
               </div>
             </div>
           )}