[Merge] 1차 스프린트 develop -> main

.github/workflows/autoSync-develop.yml

@@ -0,0 +1,32 @@
+name: (Develop) Synchronize to forked repo
+on:
+  push:
+    branches:
+      - develop
+
+jobs:
+  sync:
+    name: Sync forked repo
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout develop
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.DEV_AUTO_SYNC_TOKEN }}
+          fetch-depth: 0
+          ref: develop
+
+      - name: Add remote-url
+        run: |
+          git remote add forked-repo https://hyeonjin6530:${{ secrets.DEV_AUTO_SYNC_TOKEN }}@github.com/hyeonjin6530/billilge-frontend
+          git config user.name hyeonjin6530
+          git config user.email ${{ secrets.DEV_EMAIL }}
+
+      - name: Push changes to forked-repo
+        run: |
+          git push -f forked-repo develop
+
+      - name: Clean up
+        run: |
+          git remote remove forked-repo

.github/workflows/autoSync.yml → .github/workflows/autoSync-main.yml

@@ -1,21 +1,21 @@
-name: Synchronize to forked repo
+name: (Main) Synchronize to forked repo
 on:
   push:
     branches:
-      - develop
+      - main
 
 jobs:
   sync:
     name: Sync forked repo
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout develop
+      - name: Checkout main
         uses: actions/checkout@v4
         with:
           token: ${{ secrets.AUTO_SYNC_TOKEN }}
           fetch-depth: 0
-          ref: develop
+          ref: main
 
       - name: Add remote-url
         run: |
@@ -25,7 +25,7 @@ jobs:
 
       - name: Push changes to forked-repo
         run: |
-          git push -f forked-repo develop
+          git push -f forked-repo main
 
       - name: Clean up
         run: |

package.json

@@ -37,6 +37,7 @@
     "dotenv": "^16.4.5",
     "firebase": "^11.3.1",
     "js-base64": "^3.7.7",
+    "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "lucide-react": "^0.475.0",
     "next": "^15.0.3",
@@ -62,6 +63,7 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@types/jest": "^29.5.12",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

src/app/callback/page.tsx

@@ -3,6 +3,7 @@
 import { useEffect, Suspense } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
 import { handleLoginSuccess } from '@/utils/loginHandler';
+import Cookies from 'js-cookie';
 
 function CallbackContent() {
   const searchParams = useSearchParams();
@@ -13,7 +14,7 @@ function CallbackContent() {
     const email = searchParams.get('email');
     const accessToken = searchParams.get('accessToken');
 
-    localStorage.setItem('email', email || '');
+    Cookies.set('email', email || '');
 
     if (!status) return;
 

src/app/mobile/admin/dashboard/_components/DashboardItem.tsx

@@ -9,7 +9,7 @@ export default function DashboardItem({
   renterName,
   studentId,
   status,
-  applicatedAt,
+  rentAt,
   rentedCount,
   handleApproveBtnClick,
   handleCancelBtnClick,
@@ -29,7 +29,7 @@ export default function DashboardItem({
     handleCancelBtnClick();
   };
 
-  const applicatedTime = convertTime(applicatedAt);
+  const applicatedTime = convertTime(rentAt);
 
   return (
     <section className="flex w-full items-center justify-between px-5 py-4">
@@ -59,9 +59,10 @@ export default function DashboardItem({
             </section>
 
             <section className="flex gap-1">
-              <div className="flex w-10">신청 시간</div>
+              <div className="flex w-10">대여 시간</div>
               <div className="">
-                {applicatedTime.formattedDate} {applicatedTime.formattedTime}
+                {applicatedTime.formattedDate}{' '}
+                {applicatedTime.formattedTime.split(':').slice(0, 2).join(':')}
               </div>
             </section>
           </section>

src/app/mobile/admin/dashboard/page.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import MobileLayout from '@/components/mobile/layout';
 import Header from '@/components/mobile/Header';
 import Dropdown from '@/components/mobile/Dropdown';
 import useDropdown from '@/hooks/useDropdown';
@@ -104,7 +103,7 @@ export default function Dashboard() {
   };
 
   return (
-    <MobileLayout>
+    <div>
       <Header title="관리자 대시보드" />
 
       <section className="itmes-center mt-2.5 flex w-full justify-between px-5">
@@ -139,7 +138,7 @@ export default function Dashboard() {
             renterName={item.renterName}
             studentId={item.studentId}
             status={item.status}
-            applicatedAt={item.applicatedAt}
+            rentAt={item.rentAt}
             rentedCount={item.rentedCount}
             handleApproveBtnClick={() => {
               if (item.rentalHistoryId !== undefined) {
@@ -171,6 +170,6 @@ export default function Dashboard() {
         hideDropdown={hideDropdown}
         positionClasses="top-[80px] right-5"
       />
-    </MobileLayout>
+    </div>
   );
 }

src/app/mobile/admin/notification/page.tsx

@@ -1,14 +1,13 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import MobileLayout from '@/components/mobile/layout';
 import NotificationItem from '@/components/mobile/NotificationItem';
 import Header from '@/components/mobile/Header';
 import { elapsedTime } from '@/utils/elapsedTime';
 import { NotificationProps } from '@/types/notificationType';
 import {
   adminNotificationGet,
-  readNotificationPost,
+  readNotificationPatch,
 } from '@/services/notification';
 
 type AdminNotificationType = NotificationProps;
@@ -28,11 +27,11 @@ export default function Notification() {
   }, []);
 
   const handleReadNotification = async (notificationId: number) => {
-    await readNotificationPost(notificationId);
+    await readNotificationPatch(notificationId);
   };
 
   return (
-    <MobileLayout>
+    <div>
       <Header title="관리자 알림" />
       {notificationDetail?.length === 0 ? (
         <div className="flex h-dvh items-center justify-center text-gray-secondary">
@@ -53,6 +52,6 @@ export default function Notification() {
           />
         ))
       )}
-    </MobileLayout>
+    </div>
   );
 }

src/app/mobile/history/page.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useEffect, useState, useMemo } from 'react';
-import MobileLayout from '@/components/mobile/layout';
 import Header from '@/components/mobile/Header';
 import ReturnItem from '@/app/mobile/history/_components/ReturnItem';
 import RentalItem from '@/app/mobile/history/_components/RentalItem';
@@ -194,7 +193,7 @@ export default function UserRentalList() {
   );
 
   return (
-    <MobileLayout>
+    <div>
       <Header title="대여 기록" menu />
 
       {/* 반납이 필요한 물품 */}
@@ -287,6 +286,6 @@ export default function UserRentalList() {
           <div className="text-body-2-normal_medi">© wink</div>
         </div>
       </div>
-    </MobileLayout>
+    </div>
   );
 }

src/app/mobile/layout.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import useAuthRedirect from '@/hooks/useAuthRedirect';
+import React, { useEffect } from 'react';
+import { usePathname } from 'next/navigation';
+
+export default function MobileLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+
+  // 제외할 경로 목록
+  const excludedRoutes = ['/mobile/sign-in', '/mobile/sign-up'];
+
+  const isExcluded = excludedRoutes.includes(pathname);
+
+  useAuthRedirect();
+
+  useEffect(() => {
+    if (!isExcluded) {
+      const originalBgColor = document.body.style.backgroundColor;
+      document.body.style.backgroundColor = '#F3F4F6';
+
+      return () => {
+        document.body.style.backgroundColor = originalBgColor;
+      };
+    }
+
+    return undefined;
+  }, [isExcluded]);
+
+  if (isExcluded) {
+    // 레이아웃 없이 children만 렌더링
+    return children;
+  }
+
+  return (
+    <div className="flex min-h-screen justify-center">
+      <div className="flex w-full max-w-md flex-col">{children}</div>
+    </div>
+  );
+}

src/app/mobile/main/_components/MainHeader/index.tsx

@@ -5,7 +5,9 @@ import Sidebar from '@/components/mobile/SidebarMenu/index';
 import { useEffect, useState } from 'react';
 import IconAlarm from 'public/assets/icons/icon-alarm.svg';
 import IconHamburger from 'public/assets/icons/icon-hamburger.svg';
+import IconFeeCheck from 'public/assets/icons/icon-fee-check.svg';
 import { getNotificationCount } from '@/apis/notification';
+import Cookies from 'js-cookie';
 
 export default function MainHeader() {
   const router = useRouter();
@@ -15,6 +17,7 @@ export default function MainHeader() {
     name: string;
     id: string;
     role: string;
+    isFeePaid: boolean;
   } | null>(null);
 
   useEffect(() => {
@@ -31,7 +34,7 @@ export default function MainHeader() {
   }, []);
 
   useEffect(() => {
-    const storedUser = localStorage.getItem('user');
+    const storedUser = Cookies.get('user');
     if (storedUser) {
       setUser(JSON.parse(storedUser));
     }
@@ -40,8 +43,8 @@ export default function MainHeader() {
   return (
     <>
       <section className="fixed top-0 z-10 flex h-10 w-full max-w-md items-center justify-between bg-[#F3F4F6] px-4 py-1.5">
-        <div className="text-heading-3_D font-semibold text-black-primary">
-          {user?.name}님
+        <div className="flex items-center gap-2 text-heading-3_D font-semibold text-black-primary">
+          {user?.name}님{user?.isFeePaid ? <IconFeeCheck /> : null}
         </div>
         <div className="flex gap-[7px]">
           <button

src/app/mobile/main/page.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import MobileLayout from '@/components/mobile/layout';
 import MainHeader from '@/app/mobile/main/_components/MainHeader';
 import Carousel from '@/app/mobile/main/_components/Carousel';
 import WelfareItem from '@/app/mobile/main/_components/WelfareItem';
@@ -12,6 +11,7 @@ import IconSearch from 'public/assets/icons/icon-search.svg';
 import { useRouter } from 'next/navigation';
 import { requestNotificationPermission } from '@/utils/pushNotification';
 import PopUp from '@/components/mobile/PopUp';
+import Cookies from 'js-cookie';
 
 export default function MobileMain() {
   const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
@@ -42,7 +42,7 @@ export default function MobileMain() {
   }, [searchQuery]);
 
   useEffect(() => {
-    if (!localStorage.getItem('token')) {
+    if (!Cookies.get('token')) {
       router.replace('/mobile/sign-in');
       return;
     }
@@ -51,7 +51,7 @@ export default function MobileMain() {
     requestNotificationPermission();
 
     // "다시 보지 않기" 플래그가 없으면 팝업 표시
-    if (!localStorage.getItem('popUpDismissed2')) {
+    if (!Cookies.get('popUpDismissed3')) {
       setShowPopUp(true);
     }
   }, []);
@@ -77,9 +77,9 @@ export default function MobileMain() {
   };
 
   return (
-    <MobileLayout>
+    <div>
       <MainHeader />
-      <div className="mt-10 flex flex-col gap-[50px] px-4 pt-4">
+      <div className="mt-10 flex flex-col gap-[50px] px-4 py-4">
         <Carousel images={images} />
 
         <section className="flex flex-col gap-4">
@@ -113,11 +113,11 @@ export default function MobileMain() {
       {showPopUp && (
         <PopUp
           title="🚨 공지사항 안내 🚨"
-          content={`시험기간(04.14.~04.28.) 동안\n복지물품 대여가 일시 중단됩니다.\n
+          content={`2025년 1학기 복지물품 대여는\n6월 2일(월)부로 종료됩니다.\n
 이용에 참고 부탁드립니다!`}
           onClickCta={() => setShowPopUp(false)}
           onClickOther={() => {
-            localStorage.setItem('popUpDismissed2', 'true');
+            Cookies.set('popUpDismissed3', 'true');
             setShowPopUp(false);
           }}
         />
@@ -129,6 +129,6 @@ export default function MobileMain() {
         onCloseAction={() => setIsBottomSheetOpen(false)}
         item={selectedItem}
       />
-    </MobileLayout>
+    </div>
   );
 }