[Release] 2025년 8월 개발 + 게임 추가 통합 배포 릴리즈

.github/workflows/deploy.yml

@@ -30,10 +30,18 @@ jobs:
           git config user.name farmsystem-account
           git config user.email ${{ secrets.EMAIL }}
 
+      # 게임 애들꺼 push 제외
+      - name: Exclude Unity WebGL build (deploy-only)
+        run: |
+          # Remove from index if present, but do not fail if missing
+          git rm -r --cached --ignore-unmatch apps/farminglog/public/WebGLBuild || true
+          # Create a temporary commit only in the workflow context
+          git commit -m "chore(ci): exclude apps/farminglog/public/WebGLBuild from deploy sync" || echo "No changes to commit"
+
       - name: Push changes to forked-repo
         run: |
           git push -f forked-repo ${{ env.TARGET_BRANCH }}
 
       - name: Clean up
         run: |
-          git remote remove forked-repo
+          git remote remove forked-repo

.gitignore

@@ -36,3 +36,4 @@ dist-ssr
 *.sln
 *.sw?
 .vercel
+

apps/farminglog/src/components/Header/Header.tsx

@@ -7,6 +7,7 @@ import mainIcon from "@/assets/logos/logo.basic.png"; // 메인 아이콘
 import crownIcon from "@/assets/Icons/tabler_crown.png"; // 랭킹 아이콘
 import pencilIcon from "@/assets/Icons/edit-3.png"; // 파밍 아이콘
 import thumbsUpIcon from "@/assets/Icons/goodgood.png"; // 응원 아이콘
+import gameIcon from "@/assets/Icons/Seed.png"; // 게임 아이콘 (씨앗 아이콘 사용)
 
 import useMediaQueries from "@/hooks/useMediaQueries";
 import Popup from "@/components/Popup/popup";
@@ -17,6 +18,7 @@ const navItems = [
   { label: "홈", path: "/home" },
   { label: "응원", path: "/cheer" },
   { label: "파밍로그", path: "/farminglog/view" },
+  { label: "게임", path: "/game" },
   { label: "랭킹", path: "/rankingDetail" },
 ];
 
@@ -149,6 +151,16 @@ export default function Header() {
                   } as React.CSSProperties}
                   onClick={() => handleNavigation("/farminglog/view")}
                 />
+                <S.MobileNavButton
+                  style={{
+                    top: "50px",
+                    right: "50px",
+                    backgroundImage: `url(${gameIcon})`,
+                    opacity: isMenuOpen ? 1 : 0,
+                    transform: isMenuOpen ? "scale(1)" : "scale(0.5)",
+                  } as React.CSSProperties}
+                  onClick={() => handleNavigation("/game")}
+                />
               </>
             )}
             <S.MobileMainButton onClick={() => setMenuOpen((prev) => !prev)}>

apps/farminglog/src/components/UnityWebGL/UnityWebGL.styled.ts

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+export const UnityContainer = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin: 20px 0;
+`;
+
+export const UnityWrapper = styled.iframe`
+  max-width: 100%;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+
+  &:hover {
+    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
+  }
+`;
+
+// 반응형 디자인을 위한 미디어 쿼리
+export const ResponsiveUnityWrapper = styled(UnityWrapper)`
+  @media (max-width: 768px) {
+    width: 100% !important;
+    height: 400px !important;
+  }
+
+  @media (max-width: 480px) {
+    height: 300px !important;
+  }
+`;

apps/farminglog/src/components/UnityWebGL/UnityWebGL.tsx

@@ -0,0 +1,134 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { UnityContainer, UnityWrapper } from './UnityWebGL.styled';
+
+interface UnityWebGLProps {
+  width?: string | number;
+  height?: string | number;
+  className?: string;
+}
+
+const UnityWebGL: React.FC<UnityWebGLProps> = ({
+  width = '100%',
+  height = '1000px',
+  className
+}) => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    // 타임아웃 설정 (30초)
+    const timeoutId = setTimeout(() => {
+      if (isLoading) {
+        setIsLoading(false);
+        setHasError(true);
+      }
+    }, 30000);
+
+    const handleLoad = () => {
+      clearTimeout(timeoutId);
+      setIsLoading(false);
+      setHasError(false);
+    };
+
+    const handleError = () => {
+      clearTimeout(timeoutId);
+      setIsLoading(false);
+      setHasError(true);
+    };
+
+    iframe.addEventListener('load', handleLoad);
+    iframe.addEventListener('error', handleError);
+
+    return () => {
+      clearTimeout(timeoutId);
+      iframe.removeEventListener('load', handleLoad);
+      iframe.removeEventListener('error', handleError);
+    };
+  }, [isLoading]);
+
+  if (hasError) {
+    return (
+      <UnityContainer className={className}>
+        <div style={{ 
+          display: 'flex', 
+          flexDirection: 'column',
+          alignItems: 'center', 
+          justifyContent: 'center', 
+          height: height,
+          backgroundColor: '#f8f9fa',
+          border: '1px solid #e9ecef',
+          borderRadius: '12px',
+          color: '#6c757d',
+          padding: '20px',
+          textAlign: 'center'
+        }}>
+          <h3>Unity WebGL 게임을 로드할 수 없습니다</h3>
+          <p>가능한 해결 방법:</p>
+          <ul style={{ textAlign: 'left', margin: '10px 0' }}>
+            <li>브라우저를 새로고침해보세요</li>
+            <li>WebGL을 지원하는 브라우저를 사용하세요 (Chrome, Firefox, Safari)</li>
+            <li>개발자 도구 콘솔에서 에러 메시지를 확인하세요</li>
+          </ul>
+          <button 
+            onClick={() => window.location.reload()} 
+            style={{
+              padding: '10px 20px',
+              backgroundColor: '#2d5016',
+              color: 'white',
+              border: 'none',
+              borderRadius: '8px',
+              cursor: 'pointer',
+              marginTop: '10px'
+            }}
+          >
+            페이지 새로고침
+          </button>
+        </div>
+      </UnityContainer>
+    );
+  }
+
+  return (
+    <UnityContainer className={className}>
+      {isLoading && (
+        <div style={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          zIndex: 1,
+          backgroundColor: 'rgba(255, 255, 255, 0.95)',
+          padding: '20px',
+          borderRadius: '12px',
+          boxShadow: '0 4px 20px rgba(0,0,0,0.1)',
+          border: '1px solid #e9ecef'
+        }}>
+          <p style={{ margin: 0, color: '#495057' }}>Unity 게임 로딩 중...</p>
+        </div>
+      )}
+      <UnityWrapper
+        ref={iframeRef}
+        src="/WebGLBuild/BuildTest/index.html"
+        width={width}
+        height={height}
+        frameBorder="0"
+        title="Unity WebGL Game"
+        allow="fullscreen; autoplay; microphone; camera"
+        sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"
+        style={{ 
+          border: 'none',
+          borderRadius: '12px',
+          opacity: isLoading ? 0.3 : 1,
+          transition: 'opacity 0.3s ease'
+        }}
+      />
+
+    </UnityContainer>
+  );
+};
+
+export default UnityWebGL;

apps/farminglog/src/components/UnityWebGL/index.ts

@@ -0,0 +1,2 @@
+export { default as UnityWebGL } from './UnityWebGL';
+export * from './UnityWebGL.styled';

apps/farminglog/src/hooks/useNotificationSSE.ts

@@ -35,6 +35,7 @@ export const useNotificationSSE = () => {
           .getReader();
 
         let buffer = '';
+        // eslint-disable-next-line no-constant-condition
         while (true) {
           const { value, done } = await reader.read();
           if (done) break;
@@ -54,8 +55,8 @@ export const useNotificationSSE = () => {
 
           buffer = lines[lines.length - 1];
         }
-      } catch (err: any) {
-        if (err.name === 'AbortError') {
+      } catch (err: unknown) {
+        if (err instanceof Error && err.name === 'AbortError') {
           console.log('SSE 연결 중단됨');
         } else {
           console.error('SSE 연결 오류:', err);

apps/farminglog/src/pages/UnityGame/index.styled.ts

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+export const GameContainer = styled.div`
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 20px;
+  min-height: 1000px;
+`;
+
+export const GameTitle = styled.h1`
+  font-size: 2.5rem;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 20px;
+  color: #333;
+
+  @media (max-width: 768px) {
+    font-size: 2rem;
+  }
+`;
+
+export const GameDescription = styled.p`
+  font-size: 1.1rem;
+  text-align: center;
+  color: #666;
+  margin-bottom: 30px;
+  line-height: 1.6;
+
+  @media (max-width: 768px) {
+    font-size: 1rem;
+  }
+`;

apps/farminglog/src/pages/UnityGame/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { UnityWebGL } from '../../components/UnityWebGL';
+import { GameContainer, GameTitle, GameDescription } from './index.styled';
+
+const UnityGame: React.FC = () => {
+  return (
+    <GameContainer>
+      <GameTitle>Unity WebGL 게임</GameTitle>
+      <GameDescription>
+        아래에서 Unity로 제작된 WebGL 게임을 플레이할 수 있습니다.
+        게임이 로드되지 않는 경우 브라우저를 새로고침해주세요.
+      </GameDescription>
+
+      <UnityWebGL 
+        width="100%"
+        height="1000px"
+      />
+    </GameContainer>
+  );
+};
+
+export default UnityGame;

apps/farminglog/src/pages/auth/SocialRedirect.tsx

@@ -30,8 +30,8 @@ export default function SocialRedirect() {
       try {
         await socialLogin({ code, socialType: provider });
         navigate('/home');
-      } catch (error: any) {
-        const status = error?.status;
+      } catch (error: unknown) {
+        const status = (error as { status?: number })?.status;
 
         if (status === 404) {
           setErrorTitle(

apps/farminglog/src/pages/auth/components/StepInputStudentId.tsx

@@ -36,8 +36,8 @@ const handleNext = () => {
           setErrorMessage('회원 인증에 실패했습니다.');
         }
       },
-      onError: (err: any) => {
-        if (err.status === 401 || err.status === 404) {
+      onError: (err: unknown) => {
+        if ((err as { status?: number })?.status === 401 || (err as { status?: number })?.status === 404) {
           setStep('not-member');
         } else {
           setErrorMessage('서버 오류입니다. 운영진에게 문의해주세요.');

apps/farminglog/src/pages/cheer/write/cheer.tsx

@@ -109,7 +109,7 @@ export default function CheerMessageEditor({ searchedUser }: CheerMessageEditorP
           await queryClient.invalidateQueries({ queryKey: ['cheerList'] });
           await queryClient.invalidateQueries({ queryKey: ['user', 'today-seed'] });
 
-          const updatedSeed = queryClient.getQueryData<any>(['user', 'today-seed']);
+          const updatedSeed = queryClient.getQueryData<{ isCheer?: boolean }>(['user', 'today-seed']);
           const isFirstCheer = !todaySeed?.isCheer && updatedSeed?.isCheer;
 
           setPopupMessage({