Fix/mock channel connect persistence

src/shared/api/msw/handlers/authHandlers.ts

@@ -1,6 +1,11 @@
 import { http, HttpResponse } from 'msw'
 
-import { mockAccessToken, mockUser } from '@/shared/api/mock/mockUser'
+import {
+  mockAccessToken,
+  mockUser,
+  mockUserChannelDetails,
+} from '@/shared/api/mock/mockUser'
+import { isMockChannelConnected } from './channelConnectHandlers'
 
 // 서비스 워커 컨텍스트에서 mock 로그인 상태를 추적하는 플래그
 // httpOnly 쿠키는 서비스 워커에서 읽을 수 없으므로 모듈 변수로 관리
@@ -15,7 +20,12 @@ export const authHandlers = [
 
     return HttpResponse.json({
       success: true,
-      responseDto: mockUser,
+      responseDto: {
+        ...mockUser,
+        userChannelDetails: isMockChannelConnected()
+          ? mockUserChannelDetails
+          : null,
+      },
       error: null,
     })
   }),

src/shared/api/msw/handlers/channelConnectHandlers.ts

@@ -1,5 +1,25 @@
 import { http, HttpResponse } from 'msw'
 
+const STORAGE_KEY = 'mock:channelConnected'
+
+// mock 연동 상태는 새로고침 시 모듈 변수가 초기화되므로 localStorage로 유지
+// (node 테스트 환경 등 localStorage가 없으면 항상 미연동으로 동작)
+export function isMockChannelConnected() {
+  return (
+    typeof localStorage !== 'undefined' &&
+    localStorage.getItem(STORAGE_KEY) === 'true'
+  )
+}
+
+function setMockChannelConnected(connected: boolean) {
+  if (typeof localStorage === 'undefined') return
+  if (connected) {
+    localStorage.setItem(STORAGE_KEY, 'true')
+  } else {
+    localStorage.removeItem(STORAGE_KEY)
+  }
+}
+
 const mockChannelConnectResponse = {
   success: true,
   responseDto: {
@@ -14,6 +34,7 @@ export const channelConnectHandlers = [
   http.post(
     `${process.env.NEXT_PUBLIC_API_URL}/channels/connect`,
     async () => {
+      setMockChannelConnected(true)
       return HttpResponse.json(mockChannelConnectResponse)
     }
   ),
@@ -28,6 +49,7 @@ export const channelConnectHandlers = [
   http.delete(
     `${process.env.NEXT_PUBLIC_API_URL}/channels/connect/:channelId`,
     async () => {
+      setMockChannelConnected(false)
       return HttpResponse.json({ success: true, responseDto: null, error: null })
     }
   ),

src/shared/ui/toggle/Toggle.tsx

@@ -29,7 +29,7 @@ function Toggle({ label, pressed, onClick, className, children }: ToggleProps) {
         'text-noto-label-sm-thin whitespace-nowrap text-text-and-icon-secondary',
 
         /* 색상 */
-        'border border-stroke-border-gray-default bg-transparent',
+        'border border-stroke-border-gray-default bg-white',
 
         /* 기본 상태 */
         'cursor-pointer transition-all outline-none select-none',