[Release] 2025.07.22 Ver 1.1.6

src/App.tsx

@@ -114,7 +114,7 @@ function App() {
             email: decodedToken.sub.email,
             role: decodedToken.sub.role,
           };
-          console.log(user);
+
           setAuth(newAccessToken, user);
         } catch (error) {
           // 실패 시 (유효한 RT 없음) 로그아웃 상태
@@ -166,7 +166,11 @@ function App() {
       <Modal isOpen={isAlbumModalOpen} onClose={closeAlbumModal}>
         <AlbumModalContent onClose={closeAlbumModal} />
       </Modal>
-      <Modal isOpen={isHelpModalOpen} onClose={handleCloseHelpModal} fullWidth={true}>
+      <Modal
+        isOpen={isHelpModalOpen}
+        onClose={handleCloseHelpModal}
+        fullWidth={true}
+      >
         <HelpModalContent />
       </Modal>
       <Modal isOpen={isGameModalOpen} onClose={closeGameModal}>

src/api/CanvasAPI.ts

@@ -56,7 +56,6 @@ export const canvasService = {
       const response = await apiClient.get('/canvas/pixels', {
         params: { canvas_id: canvasId },
       });
-      console.log(response);
       return response.data;
     } catch (error) {
       console.error(`Failed to fetch pixels for canvas ${canvasId}:`, error);
@@ -97,7 +96,6 @@ export const canvasService = {
   async getGameCanvases(): Promise<Canvas[]> {
     try {
       const response = await apiClient.get<Canvas[]>(`/game/list`);
-      console.log(response.data);
       return response.data;
     } catch (error) {
       console.error('Error fetching canvas:', error);

src/api/GroupAPI.ts

@@ -12,7 +12,6 @@ export const groupServices = {
       const response = await apiClient.get(`/group/list`, {
         params: { canvas_id: canvasId },
       });
-      console.log(response);
       return response.data;
     } catch (error) {
       console.error(`Failed to fetch getGroupList ${canvasId}:`, error);
@@ -29,7 +28,6 @@ export const groupServices = {
       const response = await apiClient.get(`/group/search`, {
         params: { groupName: groupName, canvas_id: canvas_id },
       });
-      console.log(response);
       return response.data;
     } catch (error) {
       console.error(`Failed to fetch searchGroups ${groupName}:`, error);
@@ -49,7 +47,6 @@ export const groupServices = {
         maxParticipants: maxMumber,
         canvasId: canvas_id,
       });
-      console.log(response);
       return response.data;
     } catch (error) {
       console.error(`Failed to fetch create group ${title}:`, error);
@@ -69,7 +66,6 @@ export const groupServices = {
         group_id: groupId,
         canvas_id: canvasId,
       });
-      console.log(response);
       return response.data;
     } catch (error) {
       console.error(`Failed to join group ${groupId}:`, error);
@@ -82,7 +78,6 @@ export const groupServices = {
       const response = await apiClient.delete(`/group/quit`, {
         data: { group_id: groupId },
       });
-      console.log(response);
       return response.data;
     } catch (error) {
       console.error(`Failed to join group ${groupId}:`, error);

src/api/canvasFetch.ts

@@ -59,8 +59,6 @@ export const fetchCanvasData = async ({
       throw new Error(json.message || 'API request was not successful');
     }
 
-    console.log(json.data);
-
     const {
       canvas_id: fetchedId,
       pixels,
@@ -82,17 +80,10 @@ export const fetchCanvasData = async ({
         const minutes = Math.floor((timeLeft / (1000 * 60)) % 60);
         const hours = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);
         const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
-
-        console.log(
-          `Time left for canvas ${fetchedId}: ${days} days, ${hours} hours, ${minutes} minutes, ${seconds} seconds`
-        );
       } else {
-        console.log(`Canvas ${fetchedId} has ended.`);
       }
     }
 
-    // console.log('Fetched pixels:', pixels);
-
     setCanvasId(fetchedId);
     setCanvasSize(fetchedCanvasSize);
 

src/components/canvas/CanvasUIPC.tsx

@@ -190,7 +190,7 @@ export default function CanvasUIPC({
         {/* 항상 보이는 메뉴 토글 버튼 (햄버거 아이콘) */}
         <button
           onClick={() => setIsMenuOpen(!isMenuOpen)}
-          className='font-press-start relative inline-block bg-[#E76E55] px-6 py-2 text-xs text-white no-underline shadow-[inset_-2px_-2px_0px_0px_#8C2022] before:absolute before:-top-[4px] before:left-0 before:box-content before:h-full before:w-full before:border-t-[4px] before:border-b-[4px] before:border-gray-700 before:content-[""] after:absolute after:top-0 after:-left-[4px] after:box-content after:h-full after:w-full after:border-r-[4px] after:border-l-[4px] after:border-gray-700 after:content-[""] hover:bg-[#CE372B] hover:shadow-[inset_-3px_-3px_0px_0px_#8C2022] active:shadow-[inset_2px_2px_0px_0px_#8C2022]'
+          className='font-press-start relative inline-block bg-[#E76E55] px-7 py-2 text-xs text-white no-underline shadow-[inset_-2px_-2px_0px_0px_#8C2022] before:absolute before:-top-[4px] before:left-0 before:box-content before:h-full before:w-full before:border-t-[4px] before:border-b-[4px] before:border-gray-700 before:content-[""] after:absolute after:top-0 after:-left-[4px] after:box-content after:h-full after:w-full after:border-r-[4px] after:border-l-[4px] after:border-gray-700 after:content-[""] hover:bg-[#CE372B] hover:shadow-[inset_-3px_-3px_0px_0px_#8C2022] active:shadow-[inset_2px_2px_0px_0px_#8C2022]'
         >
           <span style={{ fontFamily: '"Press Start 2P", cursive' }}>Menu</span>
         </button>
@@ -255,7 +255,7 @@ export default function CanvasUIPC({
             {/* BGM 버튼 */}
             <button
               onClick={toggleBgm}
-              className='font-press-start relative inline-block w-full bg-[#92CD41] px-4 py-2 text-center text-[8px] text-white no-underline shadow-[inset_-2px_-2px_0px_0px_#45841B] before:absolute before:-top-[4px] before:left-0 before:box-content before:h-full before:w-full before:border-t-[4px] before:border-b-[4px] before:border-gray-700 before:content-[""] after:absolute after:top-0 after:-left-[4px] after:box-content after:h-full after:w-full after:border-r-[4px] after:border-l-[4px] after:border-gray-700 after:content-[""] hover:bg-[#7CB342] hover:shadow-[inset_-3px_-3px_0px_0px_#366915] active:shadow-[inset_2px_2px_0px_0px_#366915]'
+              className='font-press-start relative inline-block w-full bg-[#92CD41] px-4 py-2 text-center text-[10px] text-white no-underline shadow-[inset_-2px_-2px_0px_0px_#45841B] before:absolute before:-top-[4px] before:left-0 before:box-content before:h-full before:w-full before:border-t-[4px] before:border-b-[4px] before:border-gray-700 before:content-[""] after:absolute after:top-0 after:-left-[4px] after:box-content after:h-full after:w-full after:border-r-[4px] after:border-l-[4px] after:border-gray-700 after:content-[""] hover:bg-[#7CB342] hover:shadow-[inset_-3px_-3px_0px_0px_#366915] active:shadow-[inset_2px_2px_0px_0px_#366915]'
             >
               <span style={{ fontFamily: '"Press Start 2P", cursive' }}>
                 {isBgmPlaying ? 'BGM Off' : 'BGM On'}

src/components/chat/Chat.tsx

@@ -190,7 +190,6 @@ function Chat() {
 
   // isOpen True 시, canvasId 변경시
   useEffect(() => {
-    console.log(`modal open, ${canvas_id}`);
     if (isOpen && canvas_id) {
       const fetchInitialData = async () => {
         console.log(`start fetch, ${canvas_id}`);

src/components/chat/ChatAPI.tsx

@@ -9,11 +9,10 @@ export const chatService = {
   async getChatInitMessages(canvasId: string) {
     console.log('getChatInitMessages 호출됨:', canvasId);
     try {
-      console.log('API 요청 시작');
       const response = await apiClient.get('/group/init/chat', {
         params: { canvas_id: canvasId },
       });
-      console.log(response);
+
       const { defaultGroupId, groups, messages } = response.data.data;
       // 메시지를 시간순으로 정렬 (오래된 것부터)
       const sortedMessages = messages.sort(

src/components/game/GameCanvas.tsx

@@ -948,6 +948,12 @@ function GameCanvas({
 
           // 캔버스 표시
           setShowCanvas(true);
+
+          // 게임 모드에서는 기본적으로 (0, 0) 픽셀 선택
+          setTimeout(() => {
+            fixedPosRef.current = { x: 0, y: 0, color: 'transparent' };
+            draw();
+          }, 200);
         }
       } catch (error) {
         console.error('게임 데이터 가져오기 실패:', error);

src/hooks/useCanvasInteraction.ts

@@ -103,6 +103,11 @@ export const useCanvasInteraction = ({
   const dragStartInfoRef = useRef<{ x: number; y: number } | null>(null);
   const pinchDistanceRef = useRef<number>(0);
   const lastTouchPosRef = useRef<{ x: number; y: number } | null>(null);
+
+  // 더블탭 감지를 위한 ref들
+  const lastTapTimeRef = useRef<number>(0);
+  const lastTapPosRef = useRef<{ x: number; y: number } | null>(null);
+
   const { isChatOpen } = useModalStore();
   const cooldown = useCanvasUiStore((state) => state.cooldown);
   const { isLoggedIn } = useAuthStore();
@@ -280,9 +285,37 @@ export const useCanvasInteraction = ({
               color: 'transparent',
             };
 
-            // 게임 모드일 경우 팔레트를 표시하지 않고 노란색 테두리만 표시
+            // 게임 모드에서 더블탭 감지
             if (isGameMode) {
-              // 확정 버튼을 클릭할 때까지 대기
+              const currentTime = Date.now();
+              const timeDiff = currentTime - lastTapTimeRef.current;
+              const posDiff = lastTapPosRef.current
+                ? Math.sqrt(
+                    Math.pow(sx - lastTapPosRef.current.x, 2) +
+                      Math.pow(sy - lastTapPosRef.current.y, 2)
+                  )
+                : 0;
+
+              // 300ms 이내이고 같은 위치에서의 탭이면 더블탭으로 인식
+              if (timeDiff < 300 && posDiff < 50) {
+                // 더블탭으로 확정 실행
+                if (
+                  !isChatOpen &&
+                  !cooldown &&
+                  isLoggedIn &&
+                  !showQuestionModal
+                ) {
+                  handleConfirm();
+                }
+                // 더블탭 감지 후 초기화
+                lastTapTimeRef.current = 0;
+                lastTapPosRef.current = null;
+              } else {
+                // 첫 번째 탭 정보 저장
+                lastTapTimeRef.current = currentTime;
+                lastTapPosRef.current = { x: sx, y: sy };
+              }
+
               draw();
             } else {
               setShowPalette(true);
@@ -312,6 +345,12 @@ export const useCanvasInteraction = ({
       setIsDraggingImage,
       setIsResizing,
       setResizeHandle,
+      isGameMode,
+      isChatOpen,
+      cooldown,
+      isLoggedIn,
+      showQuestionModal,
+      handleConfirm,
     ]
   );
 

src/hooks/useChatSocket.ts

@@ -22,7 +22,6 @@ export const useChatSocket = (
   useEffect(() => {
     // 유효하지 않은 group_id이면 소켓 연결 안 함
     if (!group_id || group_id === '0' || !user_id) {
-      console.log('소켓 연결 스킵: 유효하지 않은 group_id 또는 user_id');
       return;
     }
 
@@ -37,7 +36,6 @@ export const useChatSocket = (
 
     // 채팅방 참여
     socketService.joinChat({ group_id });
-    console.log(`채팅방 참여: group_id=${group_id}`);
 
     return () => {
       // 클린업 시 이벤트 리스너 제거
@@ -83,7 +81,6 @@ export const useChatSocket = (
   const leaveChat = useCallback(() => {
     if (!group_id) return;
     socketService.leaveChat({ group_id });
-    console.log(`채팅방 나가기: group_id=${group_id}`);
   }, [group_id]);
 
   return { sendMessage, sendImageMessage, leaveChat };

src/hooks/useSocket.ts

@@ -71,7 +71,6 @@ export const useSocket = (
         started_at: string;
         remain_time: number;
       }) => {
-        console.log('onCanvasOpenAlarm:', data);
         updateServerTimeOffset(
           data.started_at,
           data.remain_time ?? 0, // Ensure remaining_time is a number
@@ -92,7 +91,6 @@ export const useSocket = (
         server_time: string;
         remain_time: number;
       }) => {
-        console.log('onCanvasCloseAlarm:', data);
         updateServerTimeOffset(
           data.ended_at,
           data.remain_time ?? 0, // Ensure remaining_time is a number

src/pages/admin/CanvasManagement.tsx

@@ -83,7 +83,6 @@ const CanvasManagement: React.FC = () => {
     };
 
     try {
-      console.log('생성 요청 canvasData:', canvasData);
       const createdCanvas = await AdminAPI.createCanvas(canvasData);
       toast.success('캔버스가 성공적으로 생성되었습니다.');
       setNewCanvas({
@@ -182,7 +181,7 @@ const CanvasManagement: React.FC = () => {
   }
 
   return (
-    <div className='min-h-screen bg-gray-900 text-white overflow-y-auto'>
+    <div className='min-h-screen overflow-y-auto bg-gray-900 text-white'>
       <div className='container mx-auto px-4 py-8'>
         <div className='mb-8 flex items-center justify-between'>
           <h1 className='text-3xl font-bold'>캔버스 관리</h1>
@@ -288,14 +287,14 @@ const CanvasManagement: React.FC = () => {
         {/* 캔버스 목록 */}
         <div className='rounded-lg bg-gray-800 p-6 shadow'>
           <div className='mb-4 flex items-center justify-between'>
-          <h2 className='text-xl font-semibold'>캔버스 목록</h2>
-          <button
-            onClick={fetchCanvases}
-            className='rounded bg-blue-600 px-3 py-1 text-sm text-white transition duration-300 hover:bg-blue-700'
-          >
-            새로고침
-          </button>
-        </div>
+            <h2 className='text-xl font-semibold'>캔버스 목록</h2>
+            <button
+              onClick={fetchCanvases}
+              className='rounded bg-blue-600 px-3 py-1 text-sm text-white transition duration-300 hover:bg-blue-700'
+            >
+              새로고침
+            </button>
+          </div>
           {canvases.length === 0 ? (
             <p className='text-gray-400'>등록된 캔버스가 없습니다.</p>
           ) : (

src/services/authService.ts

@@ -67,13 +67,11 @@ export const authService = {
       const accessToken = authHeader?.split(' ')[1];
 
       const decodedToken = jwtDecode<DecodedToken>(accessToken);
-      console.log('--------로그인sub:', decodedToken.sub);
       const user = {
         userId: decodedToken.sub.userId,
         nickname: decodedToken.sub.nickName,
         role: decodedToken.sub.role,
       };
-      console.log('응답결과:', user);
       // 응답에서 AT와 사용자 정보를 추출하여 반환
       return { accessToken, user };
     } catch (error) {
@@ -93,16 +91,15 @@ export const authService = {
       const response = await apiClient.post('/auth/refresh');
       const authHeader = response.headers['authorization'];
       const newAccessToken = authHeader?.split(' ')[1];
-      
+
       // 토큰에서 사용자 정보 추출
       const decodedToken = jwtDecode<DecodedToken>(newAccessToken);
       const user = {
         userId: decodedToken.sub.userId,
         nickname: decodedToken.sub.nickName,
         role: decodedToken.sub.role,
       };
-
-      console.log('Refresh token user:', user);
+
       return { accessToken: newAccessToken, user };
     } catch (error) {
       console.error('Failed to refresh token', error);
@@ -132,7 +129,6 @@ export const guestLogin = async (nickname: string) => {
     const response = await apiClient.post('/user/signup', {
       userName: nickname,
     });
-    console.log(response);
     const authHeader = response.headers['authorization'];
     const accessToken = authHeader?.split(' ')[1];
 

src/services/myPageService.ts

@@ -22,7 +22,6 @@ export const myPageService = {
   async fetchUserInfo(): Promise<UserInfoResponse> {
     try {
       const response = await apiClient.get<UserInfoResponse>('/user/info');
-      console.log(response);
       return response.data;
     } catch (error) {
       console.error('Failed to fetch user info:', error);

src/services/socketService.ts

@@ -28,13 +28,10 @@ class SocketService {
     );
 
     this.socket.on('connect', () => {
-      console.log('소켓 연결됨');
       this.socket!.emit('join_canvas', { canvas_id });
     });
 
-    this.socket.on('disconnect', () => {
-      console.log('소켓 연결 끊김');
-    });
+    this.socket.on('disconnect', () => {});
 
     this.socket.on('connect_error', (error) => {
       console.error('소켓 연결 실패:', error.message);

src/store/timeSyncStore.ts

@@ -39,18 +39,5 @@ export const useTimeSyncStore = create<TimeSyncState>((set, get) => ({
       serverTimeOffset: newOffset,
       lastSyncTime: Date.now(), // 마지막 동기화 시간 기록
     });
-
-    console.log(`TimeSync: Event Timestamp: ${eventTimestampString}`);
-    console.log(`TimeSync: Remaining Time (server): ${remain_time}s`);
-    console.log(
-      `TimeSync: Server Time at Send (calculated): ${new Date(serverTimeAtSend).toISOString()}`
-    );
-    console.log(
-      `TimeSync: Client Receive Time: ${new Date(clientReceiveTimestamp).toISOString()}`
-    );
-    console.log(`TimeSync: New Offset calculated: ${newOffset}ms`);
-    console.log(
-      `TimeSync: Estimated server time now: ${new Date(get().getSynchronizedServerTime()).toISOString()}`
-    );
   },
 }));