Merge pull request #310 from boostcampwm2025/dev

FE 개선사항 배포

Author: myc0603

apps/api/src/modules/noti/noti.controller.ts

@@ -20,6 +20,21 @@ export class NotiController {
     return await this.notiService.getNotisByUserId(userId);
   }
 
+  @UseGuards(AuthGuard)
+  @Patch()
+  async readAll(@UserId() userId: string) {
+    await this.notiService.readAllNotis(userId);
+    return { ok: true };
+  }
+
+  @UseGuards(AuthGuard)
+  @Delete()
+  async deleteAll(@UserId() userId: string) {
+    await this.notiService.deleteAllNotis(userId);
+
+    return { ok: true };
+  }
+
   @UseGuards(AuthGuard)
   @Patch(':id')
   async readNoti(@UserId() userId: string, @Param('id') notiId: string) {

apps/api/src/modules/noti/noti.service.ts

@@ -133,6 +133,13 @@ export class NotiService {
     await this.notiRepo.update({ id: notiId }, { isRead: true });
   }
 
+  async readAllNotis(userId: string): Promise<void> {
+    await this.notiRepo.update(
+      { receiver: { id: userId }, isRead: false },
+      { isRead: true },
+    );
+  }
+
   async deleteNoti(userId: string, notiId: string): Promise<void> {
     const noti = await this.notiRepo.findOne({
       where: { id: notiId },
@@ -147,6 +154,10 @@ export class NotiService {
     await this.notiRepo.delete({ id: notiId });
   }
 
+  async deleteAllNotis(userId: string): Promise<void> {
+    await this.notiRepo.delete({ receiver: { id: userId } });
+  }
+
   private async toNotiResponseDto(noti: Noti): Promise<NotiResponseDto> {
     // imgUrl - related의 img 없으면 null
     // like, comment - related: post

apps/web/app/globals.css

@@ -28,10 +28,23 @@
   }
 }
 
+/* ⚠️ 리캡 기능 구현 이후 삭제 예정 - 리캡 '준비중' 둥실 안내용 */
+@keyframes float-up {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-24px);
+    opacity: 0;
+  }
+}
+
 @theme {
   --animate-slide-up: slide-up 0.3s ease-out;
   --animate-fade-in: fade-in 0.2s ease-out;
   --animate-slide-in-right: slide-in-right 0.3s ease-out;
+  --animate-float-up: float-up 1.8s ease-out forwards; /* ⚠️ 리캡 기능 구현 이후 삭제 예정 */
 
   --color-primary: #00214d;
   --color-accent-cyan: #00ebc7;
@@ -52,7 +65,7 @@
 }
 
 @utility sidebar-icon {
-  @apply w-6 aspect-square;
+  @apply w-6 aspect-square shrink-0;
 }
 
 * {

apps/web/app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata, Viewport } from 'next';
 import './globals.css';
-import { Header, Sidebar, RightPanel, ModalContainer, LoadingSpinner, MobileBottomNav } from '@/components';
+import { Header, Sidebar, ResizableRightPanel, ModalContainer, LoadingSpinner, MobileBottomNav } from '@/components';
 import MobileNotiOverlay from '@/components/layout/MobileNotiOverlay';
 import { Suspense } from 'react';
 import NotiPollingGate from '@/components/noti/NotiPollingGate';
@@ -31,8 +31,6 @@ export const viewport: Viewport = {
   themeColor: '#111111',
 };
 
-const MINI_PLAYER_BAR_HEIGHT_HEIGHT = 'h-16';
-
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -60,7 +58,7 @@ export default function RootLayout({
         <NotiPollingGate />
 
         <ToastProvider>
-          <div className="flex h-screen">
+          <div className="flex h-dvh overflow-hidden">
             {/* 좌측 사이드바 (데스크탑 전용) */}
             <div className="hidden lg:flex h-full">
               <Sidebar />
@@ -74,12 +72,8 @@ export default function RootLayout({
                 <main className="flex-1 overflow-y-auto min-w-0">{children}</main>
               </div>
 
-              {/* 플레이어: 모바일 하단 스트립 / 데스크탑 우측 패널 */}
-              <aside
-                className={`relative flex-shrink-0 min-w-0 w-full ${MINI_PLAYER_BAR_HEIGHT_HEIGHT} border-t-1 border-primary lg:w-95 lg:h-full lg:border-t-0 lg:border-l-2`}
-              >
-                <RightPanel />
-              </aside>
+              {/* 플레이어: 모바일 하단 스트립 / 데스크탑 우측 패널 (너비 드래그 조절) */}
+              <ResizableRightPanel />
 
               {/* 모바일 하단 네비게이션 (flex 흐름 안에서 자연스럽게 맨 아래) */}
               <MobileBottomNav />

apps/web/src/api/internal/noti.ts

@@ -8,3 +8,11 @@ export async function fetchNotis() {
 export async function markNotiRead(notiId: string) {
   await internalClient.patch(`/noti/${notiId}`);
 }
+
+export async function markAllNotiRead() {
+  await internalClient.patch('/noti');
+}
+
+export async function deleteAllNotis() {
+  await internalClient.delete('/noti');
+}

apps/web/src/components/ConfirmOverlay.tsx

@@ -38,7 +38,7 @@ export default function ConfirmOverlay({
   if (!open) return null;
 
   const overlay = (
-    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/30" onClick={onCancel}>
+    <div data-drawer-keep className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/30" onClick={onCancel}>
       <div
         ref={ref}
         className="w-[280px] bg-white border-2 border-primary rounded-lg shadow-[4px_4px_0px_0px_#00214D] p-4"

apps/web/src/components/archive/ArchiveViewHeader.tsx

@@ -1,6 +1,6 @@
 import { createNewPlaylist } from '@/api';
 import { usePlaylistRefreshStore } from '@/stores';
-import { PlusCircle } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { toast } from 'react-toastify';
 
 export default function ArchiveViewHeader() {
@@ -27,8 +27,8 @@ export default function ArchiveViewHeader() {
         className="mt-4 md:mt-0 flex items-center bg-primary text-white px-6 py-3 rounded-xl font-bold hover:bg-accent-pink hover:shadow-[4px_4px_0px_0px_#00EBC7] transition-all border-2 border-transparent hover:border-black"
         onClick={onCreateNewPlaylist}
       >
-        <PlusCircle className="w-5 h-5 mr-2" />
-        <span>즉시 추가하기</span>
+        <Plus className="w-5 h-5 mr-2" />
+        <span>플레이리스트 추가</span>
       </button>
     </div>
   );

apps/web/src/components/layout/Header.tsx

@@ -23,7 +23,7 @@ export default function Header() {
   };
 
   return (
-    <header className="sticky top-0 z-10 bg-white/95 backdrop-blur-sm border-b-2 border-primary px-6 py-4 flex items-center justify-between">
+    <header className="sticky top-0 z-10 bg-white/95 backdrop-blur-sm border-b-2 border-primary px-6 h-16 flex items-center justify-between">
       <button type="button" onClick={handleLogoClick} className="text-2xl font-black italic tracking-tighter text-primary uppercase">
         VIBR
       </button>

apps/web/src/components/layout/MobileBottomNav.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState, useCallback, lazy, Suspense, useEffect } from 'react';
 import { usePathname, useRouter } from 'next/navigation';
-import { Home, Box, PlusCircle, Search, User } from 'lucide-react';
+import { Home, Box, Plus, Search, User } from 'lucide-react';
 
 import { SidebarItemType } from '@/types';
 import { useModalStore, MODAL_TYPES, useAuthStore } from '@/stores';
@@ -21,7 +21,7 @@ type NavItem = {
 const navItems: NavItem[] = [
   { key: SidebarItemType.HOME, icon: Home, label: '홈' },
   { key: SidebarItemType.ARCHIVE, icon: Box, label: '보관함' },
-  { key: 'create', icon: PlusCircle, label: '생성', special: true },
+  { key: 'create', icon: Plus, label: '추천', special: true },
   { key: SidebarItemType.SEARCH, icon: Search, label: '검색' },
   { key: SidebarItemType.PROFILE, icon: User, label: '프로필' },
 ];

apps/web/src/components/layout/ResizeHandle.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+type ResizeHandleProps = {
+  onPointerDown: (e: React.PointerEvent) => void;
+  /** 핸들이 붙는 가장자리 */
+  side: 'left' | 'right';
+  isDragging?: boolean;
+};
+
+/**
+ * 패널 가장자리에 놓이는 얇은 세로 드래그 바.
+ * 로직은 없고 onPointerDown만 부모(useResizable)로 전달한다.
+ */
+export default function ResizeHandle({ onPointerDown, side, isDragging }: ResizeHandleProps) {
+  return (
+    <div
+      onPointerDown={onPointerDown}
+      role="separator"
+      aria-orientation="vertical"
+      className={`
+        absolute top-0 ${side === 'right' ? '-right-1' : '-left-1'} w-2 h-full z-50
+        cursor-col-resize transition-colors
+        ${isDragging ? 'bg-primary/30' : 'hover:bg-primary/20'}
+      `}
+    />
+  );
+}