[merge] main <- main

Senity-Waved · Apr 9, 2024 · feb0abc · feb0abc
2 parents 34c39ae + 2f37db9
commit feb0abc
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 21 deletions.
diff --git a/.github/workflows/develop_waved-fe.yml b/.github/workflows/develop_waved-fe.yml
@@ -64,14 +64,13 @@ jobs:
 
       - name: Unzip artifact for deployment
         run: unzip release.zip
-        
+
       - name: Login to Azure
         uses: azure/login@v1
         with:
           client-id: ${{ secrets.AZUREAPPSERVICE_CLIENTID }}
           tenant-id: ${{ secrets.AZUREAPPSERVICE_TENANTID }}
-          subscription-id: ${{ secrets.AZUREAPPSERVICE_SUBSCRIPTIONID }}	
-
+          subscription-id: ${{ secrets.AZUREAPPSERVICE_SUBSCRIPTIONID }}
 
       - name: 'Deploy to Azure Web App'
         id: deploy-to-webapp
@@ -87,4 +86,4 @@ jobs:
           NEXT_PUBLIC_LOGIN_URL: ${{ secrets.NEXT_PUBLIC_LOGIN_URL }}
           NEXT_PUBLIC_CLIENT_BASE_URL: ${{ secrets.NEXT_PUBLIC_CLIENT_BASE_URL }}
           NEXT_PUBLIC_ADMIN_BASE_URL: ${{ secrets.NEXT_PUBLIC_ADMIN_BASE_URL }}
-          NEXT_PUBLIC_IMAGE_TOKEN: ${{ secrets.NEXT_PUBLIC_IMAGE_TOKEN }}
+          NEXT_PUBLIC_IMAGE_TOKEN: ${{ secrets.NEXT_PUBLIC_IMAGE_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -39,3 +39,5 @@ next-env.d.ts
 # pwa
 sw.js
 workbox-*.js
+sw.js.map
+workbox-*.js.map
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,6 +1,12 @@
 import withPWA from 'next-pwa';
 
-const prod = process.env.NODE_ENV === 'production';
+const isProd = process.env.NODE_ENV === 'production';
+
+const pwaConfig = withPWA({
+  dest: 'public',
+  disable: !isProd,
+  runtimeCaching: [],
+});
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -21,7 +27,4 @@ const nextConfig = {
   },
 };
 
-export default withPWA({
-  dest: 'public',
-  disable: prod ? false : true,
-})(nextConfig);
+export default pwaConfig(nextConfig);
diff --git a/public/icons/icon-mychallenge-disabled.svg b/public/icons/icon-mychallenge-disabled.svg
diff --git a/public/icons/index.ts b/public/icons/index.ts
@@ -2,5 +2,6 @@ export * as homeNormal from './icon-home-normal.svg';
 export * as homeFilled from './icon-home-filled.svg';
 export * as myChallengeNormal from './icon-mychallenge-normal.svg';
 export * as myChallengeFilled from './icon-mychallenge-filled.svg';
+export * as myChallengeDisabled from './icon-mychallenge-disabled.svg';
 export * as profileNormal from './icon-profile-normal.svg';
 export * as profileFilled from './icon-profile-filled.svg';
diff --git a/src/components/common/Footer.tsx b/src/components/common/Footer.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import styled from '@emotion/styled';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
@@ -6,19 +7,31 @@ import {
   homeFilled,
   myChallengeNormal,
   myChallengeFilled,
+  myChallengeDisabled,
   profileNormal,
   profileFilled,
 } from '../../../public/icons';
 import screenSize from '@/constants/screenSize';
 
-export default function Footer() {
+interface IFooterProps {
+  isLogined: boolean;
+}
+
+export default function Footer({ isLogined }: IFooterProps) {
   const router = useRouter();
+  // const cookieToken = getCookie('accessToken');
+  // const isLogined = !!cookieToken;
 
   const navigate = (
     e: React.MouseEvent<HTMLElement, MouseEvent>,
     path: string,
   ) => {
     e.preventDefault();
+
+    if (!isLogined && path === '/mychallenge') {
+      return;
+    }
+
     if (router.pathname !== path) {
       router.push(path).catch((error) => console.error('이동 실패', error));
     }
@@ -39,20 +52,25 @@ export default function Footer() {
         </SFooterNavItem>
       </SFooterNavLink>
       <SFooterNavLink onClick={(e) => navigate(e, '/mychallenge')}>
-        <SFooterNavItem isActive={router.pathname === '/mychallenge'}>
+        <SMyChallengeNavItem
+          isActive={router.pathname === '/mychallenge'}
+          isLogined={isLogined}
+        >
           <Image
             src={
-              router.pathname === '/mychallenge'
-                ? myChallengeFilled
-                : myChallengeNormal
+              isLogined
+                ? router.pathname === '/mychallenge'
+                  ? myChallengeFilled
+                  : myChallengeNormal
+                : myChallengeDisabled
             }
             alt="마이 챌린지 아이콘"
             width={24}
             height={24}
             blurDataURL="/icons/icon-mychallenge-normal"
           />
           <p>마이챌린지</p>
-        </SFooterNavItem>
+        </SMyChallengeNavItem>
       </SFooterNavLink>
       <SFooterNavLink onClick={(e) => navigate(e, '/profile')}>
         <SFooterNavItem isActive={router.pathname === '/profile'}>
@@ -98,7 +116,27 @@ const SFooterNavItem = styled.div<{ isActive: boolean }>`
   flex-flow: column nowrap;
   align-items: center;
   justify-content: space-between;
-  color: ${({ isActive, theme }) => !isActive && theme.color.gray_83};
+  color: ${({ isActive, theme }) =>
+    !isActive ? theme.color.gray_83 : theme.color.gray_3c};
+  font-size: ${({ theme }) => theme.fontSize.caption1};
+  font-weight: ${({ theme }) => theme.fontWeight.caption1};
+`;
+
+const SMyChallengeNavItem = styled.div<{
+  isActive: boolean;
+  isLogined: boolean;
+}>`
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: space-between;
+  cursor: ${({ isLogined }) => (isLogined ? 'pointer' : 'not-allowed')};
+  color: ${({ isActive, isLogined, theme }) =>
+    !isActive
+      ? isLogined
+        ? theme.color.gray_83
+        : theme.color.gray_bf
+      : theme.color.gray_3c};
   font-size: ${({ theme }) => theme.fontSize.caption1};
   font-weight: ${({ theme }) => theme.fontWeight.caption1};
 `;
diff --git a/src/components/common/Layout.tsx b/src/components/common/Layout.tsx
@@ -15,6 +15,7 @@ interface ILayout {
   noHeader?: boolean;
   withBottomFixedBtn?: boolean;
   rightOnClick?: () => void;
+  isLogined?: boolean;
 }
 
 export default function Layout({
@@ -27,6 +28,7 @@ export default function Layout({
   noHeader,
   withBottomFixedBtn,
   rightOnClick,
+  isLogined,
 }: ILayout) {
   return (
     <SLayoutWrapper
@@ -55,7 +57,7 @@ export default function Layout({
         />
       )}
       <main>{children}</main>
-      {noFooter || <Footer />}
+      {noFooter || <Footer isLogined={isLogined !== undefined && isLogined} />}
     </SLayoutWrapper>
   );
 }

diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
@@ -81,6 +81,8 @@ export default function Home({
       const currentTime = Date.now();
       const timeUntilExpiry = expiresTime - currentTime;
 
+      console.log(timeUntilExpiry);
+
       if (timeUntilExpiry < 60000) {
         setReadyReconnect(true);
       }
@@ -98,6 +100,7 @@ export default function Home({
         console.log('eventSource :', eventSource);
         console.log('기존 eventSoruce close');
       }
+      console.log('SSE 연동 !');
       const urlEndPoint = `${process.env.NEXT_PUBLIC_BASE_URL}/event/subscribe`;
       eventSource = new EventSource(urlEndPoint, {
         headers: {
@@ -108,9 +111,10 @@ export default function Home({
         withCredentials: true,
       });
 
-      eventSource.addEventListener('event', () => {
+      eventSource.addEventListener('event', (event) => {
         openSnackBar('새로운 알림이 있습니다.');
         setNotificationUpdate(true);
+        console.log(event);
       });
     };
 
@@ -125,7 +129,7 @@ export default function Home({
             },
           },
         );
-
+        console.log('토큰 재발급 및 SSE 재연동');
         connectEventSource(data.accessToken);
         timeoutId = setTimeout(
           // eslint-disable-next-line @typescript-eslint/no-misused-promises
@@ -142,6 +146,7 @@ export default function Home({
       // eslint-disable-next-line @typescript-eslint/no-misused-promises
       timeoutId = setTimeout(refreshTokenAndReconnect, 60 * 1000 * 9);
     } else if (readyReconnect) {
+      console.log('토큰 만료 시간 전 재발급 및 재연동 시도');
       refreshTokenAndReconnect().catch(console.error);
     }
 
@@ -233,7 +238,7 @@ export default function Home({
         )}
       </main>
       <FloatingBtn type={isLogined ? 'challengeRequest' : 'register'} />
-      <Footer />
+      <Footer isLogined={isLogined} />
     </SHomeWrapper>
   );
 }

diff --git a/src/pages/mychallenge/index.tsx b/src/pages/mychallenge/index.tsx
@@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
 import Link from 'next/link';
 import styled from '@emotion/styled';
 import axios from 'axios';
+import { getCookie } from 'cookies-next';
 import REVIEW_SNACKBAR_TEXT from '@/constants/reviewSnackBarText';
 import ISnackBarState from '@/types/snackbar';
 import { TMyChallengeInfo } from '@/types/myChallenge';
@@ -22,6 +23,7 @@ interface IMyChallenges {
   getMyCompletedChallenges?: TMyChallengeInfo[];
   requireSnackBar?: boolean;
   errorMsg?: string;
+  isLogined: boolean;
 }
 
 export default function MyChallenge({
@@ -30,6 +32,7 @@ export default function MyChallenge({
   getMyCompletedChallenges,
   requireSnackBar,
   errorMsg,
+  isLogined,
 }: IMyChallenges) {
   const [completedData, setCompletedData] = useState<TMyChallengeInfo[]>(
     getMyCompletedChallenges || [],
@@ -134,6 +137,7 @@ export default function MyChallenge({
       headerText="MY 챌린지"
       title="마이챌린지"
       description="나의 챌린지 내역을 확인해보세요."
+      isLogined={isLogined}
     >
       <TabMenu
         tabs={[
@@ -182,6 +186,8 @@ export default function MyChallenge({
 
 async function getServerSidePropsFunction(context: GetServerSidePropsContext) {
   const serverInstance = createServerInstance(context);
+  const cookieToken = getCookie('accessToken', context);
+  const isLogined = !!cookieToken;
 
   const fetchMyChallenges = async (status: string) => {
     const response = await serverInstance.get<TMyChallengeInfo[]>(
@@ -201,6 +207,7 @@ async function getServerSidePropsFunction(context: GetServerSidePropsContext) {
       getMyProgressChallenges: myProgressChallenges,
       getMyWaitingChallenges: myWaitingChallenges,
       getMyCompletedChallenges: myCompletedChallenges,
+      isLogined,
     },
   };
 }

diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
@@ -187,6 +187,7 @@ export default function Profile({
       noHeader
       title="프로필"
       description="WAVED 회원의 프로필 페이지입니다. 챌린지 기록, 계정 설정, 고객 센터 등을 확인할 수 있습니다. "
+      isLogined={isLogined}
     >
       <SProfileWrapper>
         <h2 className="a11yHidden">프로필</h2>
@@ -370,7 +371,7 @@ export default function Profile({
         <SProfileEtc>
           <div>
             <p>현재 버전</p>
-            <p>1.0.0</p>
+            <p>1.0.1</p>
           </div>
         </SProfileEtc>
         <SwithdrawalBtnWrapper>