[DEPLOY] dev에서 main으로 merge

.github/workflows/deploy-development.yml

@@ -9,6 +9,7 @@ on:
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
+    if: github.event.pull_request.merged == true
     environment: DEPLOY_DEV
 
     steps:

.github/workflows/deploy-production.yml

@@ -9,6 +9,7 @@ on:
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
+    if: github.event.pull_request.merged == true
     environment: DEPLOY_PROD
 
     steps:

package.json

@@ -23,6 +23,7 @@
     "axios": "^1.7.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-ga4": "^2.1.0",
     "react-icons": "^5.4.0",
     "react-router-dom": "^7.1.0",
     "vite-bundle-visualizer": "^1.2.1"

src/apis/apis.ts

@@ -7,7 +7,7 @@ import {
   PostUserResponseType,
   PutDebateTableResponseType,
 } from './responseTypes';
-import { DebateInfo } from '../type/type';
+import { DetailDebateInfo, TimeBoxInfo } from '../type/type';
 import { setAccessToken } from '../util/accessToken';
 
 // String type identifier for TanStack Query's 'useQuery' function
@@ -68,22 +68,19 @@ export async function getParliamentaryTableData(
 
 // POST /api/table/parliamentary
 export async function postParliamentaryDebateTable(
-  tableName: string,
-  tableAgenda: string,
-  warningBell: boolean,
-  finishBell: boolean,
-  tables: DebateInfo[],
+  info: DetailDebateInfo,
+  tables: TimeBoxInfo[],
 ): Promise<PostDebateTableResponseType> {
   const requestUrl: string = ApiUrl.parliamentary;
   const response = await request<PostDebateTableResponseType>(
     'POST',
     requestUrl,
     {
       info: {
-        name: tableName === '' ? '테이블 1' : tableName,
-        agenda: tableAgenda,
-        warningBell: warningBell,
-        finishBell: finishBell,
+        name: info.name === '' ? '테이블 1' : info.name,
+        agenda: info.agenda,
+        warningBell: info.warningBell,
+        finishBell: info.finishBell,
       },
       table: tables,
     },
@@ -96,22 +93,19 @@ export async function postParliamentaryDebateTable(
 // PUT /api/table/parliamentary/{tableId}
 export async function putParliamentaryDebateTable(
   tableId: number,
-  tableName: string,
-  tableAgenda: string,
-  warningBell: boolean,
-  finishBell: boolean,
-  tables: DebateInfo[],
+  info: DetailDebateInfo,
+  tables: TimeBoxInfo[],
 ): Promise<PutDebateTableResponseType> {
   const requestUrl: string = ApiUrl.parliamentary;
   const response = await request<PutDebateTableResponseType>(
     'PUT',
     requestUrl + `/${tableId}`,
     {
       info: {
-        name: tableName,
-        agenda: tableAgenda,
-        warningBell: warningBell,
-        finishBell: finishBell,
+        name: info.name,
+        agenda: info.agenda,
+        warningBell: info.warningBell,
+        finishBell: info.finishBell,
       },
       table: tables,
     },

src/apis/primitives.ts

@@ -13,11 +13,11 @@ export async function request<T>(
   data: object | null,
   params: object | null,
 ): Promise<AxiosResponse<T>> {
-  // console.log(`# endpoint = ${endpoint}`);
+  const instance = axiosInstance;
 
   try {
     // Get response
-    const response: AxiosResponse<T> = await axiosInstance({
+    const response: AxiosResponse<T> = await instance({
       method,
       url: endpoint,
       data: data ? JSON.stringify(data) : null,

src/apis/responseTypes.ts

@@ -1,4 +1,4 @@
-import { DebateInfo, DebateTable } from '../type/type';
+import { TimeBoxInfo, DebateTable, DetailDebateInfo } from '../type/type';
 
 // POST "/api/member"
 export interface PostUserResponseType {
@@ -14,37 +14,22 @@ export interface GetDebateTableListResponseType {
 // GET /api/table/parliamentary/{tableId}
 export interface GetTableDataResponseType {
   id: number;
-  info: {
-    name: string;
-    agenda: string;
-    warningBell: boolean;
-    finishBell: boolean;
-  };
-  table: DebateInfo[];
+  info: DetailDebateInfo;
+  table: TimeBoxInfo[];
 }
 
 // POST /api/table/parliamentary
 export interface PostDebateTableResponseType {
   id: number;
-  info: {
-    name: string;
-    agenda: string;
-    warningBell: boolean;
-    finishBell: boolean;
-  };
-  table: DebateInfo[];
+  info: DetailDebateInfo;
+  table: TimeBoxInfo[];
 }
 
 // PUT /api/table/parliamentary/{tableId}
 export interface PutDebateTableResponseType {
   id: number;
-  info: {
-    name: string;
-    agenda: string;
-    warningBell: boolean;
-    finishBell: boolean;
-  };
-  table: DebateInfo[];
+  info: DetailDebateInfo;
+  table: TimeBoxInfo[];
 }
 
 // DELETE /api/table/parliamentary/{tableId}

src/components/GoogleButton.tsx

@@ -1,19 +1,46 @@
 import { ButtonHTMLAttributes } from 'react';
 import { FcGoogle } from 'react-icons/fc';
+import { isEmbeddedWebView } from '../util/validateUserAgent';
+import { MdOutlineErrorOutline } from 'react-icons/md';
 export default function GoogleButton(
   props: ButtonHTMLAttributes<HTMLButtonElement>,
 ) {
+  // Check whether user-agent is acceptable and set background color
+  const isDisabled = isEmbeddedWebView();
+  const bgColor = isDisabled ? 'bg-gray-300' : 'bg-slate-100';
+  const hoverBgColor = isDisabled ? '' : 'hover:bg-slate-200';
+  console.log(isDisabled);
+
   return (
-    <button
-      {...props}
-      className="
+    <div className="flex flex-col items-center space-y-2">
+      {/* Google login button */}
+      <button
+        {...props}
+        className={`
         mx-auto my-4 flex scale-150 transform items-center
         justify-center
-        rounded bg-white  px-2 py-3 text-sm shadow hover:bg-gray-100
-      "
-    >
-      <FcGoogle className="mr-5 h-5 w-5" />
-      <span className="text-black-54 font-semibold">구글 계정으로 로그인</span>
-    </button>
+        rounded-full ${bgColor} px-8 py-2 text-sm shadow-lg ${hoverBgColor}
+      `}
+        disabled={isDisabled}
+      >
+        <div className="flex flex-row items-center">
+          <FcGoogle size={24} className="mr-5" />
+          <span className="font-semibold text-slate-900">
+            Google 계정으로 로그인
+          </span>
+        </div>
+      </button>
+
+      {/* Error message */}
+      {isDisabled && (
+        <div className="flex w-max flex-row items-center space-x-2 text-red-500">
+          <MdOutlineErrorOutline size={20} />
+          <p className="text-sm font-normal">
+            이 브라우저에서는 로그인이 불가능해요. 다른 웹 브라우저로
+            접속해주세요.
+          </p>
+        </div>
+      )}
+    </div>
   );
 }

src/constants/languageMapping.ts

@@ -2,5 +2,4 @@ import { Type } from '../type/type';
 
 export const typeMapping: Record<Type, string> = {
   PARLIAMENTARY: '의회식 토론',
-  TIMEBASED: '시간 총량제 토론',
 };

src/hooks/mutations/useAddTable.ts

@@ -1,24 +1,23 @@
 import { useMutation } from '@tanstack/react-query';
 import { postParliamentaryDebateTable } from '../../apis/apis';
-import { DebateInfo } from '../../type/type';
+import { DetailDebateInfo, TimeBoxInfo } from '../../type/type';
 import { PostDebateTableResponseType } from '../../apis/responseTypes';
 
 interface UseAddTableParams {
-  tableName: string;
-  tableAgenda: string;
-  warningBell: boolean;
-  finishBell: boolean;
-  table: DebateInfo[];
+  info: DetailDebateInfo;
+  table: TimeBoxInfo[];
 }
 
 export default function useAddTable(onSuccess: (id: number) => void) {
   return useMutation({
     mutationFn: async (params: UseAddTableParams) => {
       const response = await postParliamentaryDebateTable(
-        params.tableName,
-        params.tableAgenda,
-        params.warningBell,
-        params.finishBell,
+        {
+          name: params.info.name,
+          agenda: params.info.agenda,
+          warningBell: params.info.warningBell,
+          finishBell: params.info.finishBell,
+        },
         params.table,
       );
       return response;

src/hooks/mutations/usePutParliamentaryDebateTable.ts

@@ -1,15 +1,12 @@
 import { useMutation } from '@tanstack/react-query';
 import { putParliamentaryDebateTable } from '../../apis/apis';
 import { PutDebateTableResponseType } from '../../apis/responseTypes';
-import { DebateInfo } from '../../type/type';
+import { DetailDebateInfo, TimeBoxInfo } from '../../type/type';
 
 interface PutParliamentaryTableParams {
   tableId: number;
-  tableName: string;
-  tableAgenda: string;
-  warningBell: boolean;
-  finishBell: boolean;
-  table: DebateInfo[];
+  info: DetailDebateInfo;
+  table: TimeBoxInfo[];
 }
 
 export function usePutParliamentaryDebateTable(
@@ -20,22 +17,8 @@ export function usePutParliamentaryDebateTable(
     Error,
     PutParliamentaryTableParams
   >({
-    mutationFn: ({
-      tableId,
-      tableName,
-      tableAgenda,
-      table,
-      warningBell,
-      finishBell,
-    }) =>
-      putParliamentaryDebateTable(
-        tableId,
-        tableName,
-        tableAgenda,
-        warningBell,
-        finishBell,
-        table,
-      ),
+    mutationFn: ({ tableId, info, table }) =>
+      putParliamentaryDebateTable(tableId, info, table),
     onSuccess: (response: PutDebateTableResponseType) => {
       onSuccess(response.id);
     },

src/main.tsx

@@ -5,6 +5,7 @@ import { GlobalPortal } from './util/GlobalPortal';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import router from './routes/routes.tsx';
 import './index.css';
+import { setupGoogleAnalytics } from './util/setupGoogleAnalytics.tsx';
 
 // console.log(`# URL = ${import.meta.env.VITE_API_BASE_URL}`);
 
@@ -41,6 +42,8 @@ if (import.meta.env.VITE_MOCK_API === 'true') {
 
 // Function that initializes main React app
 function initializeApp() {
+  setupGoogleAnalytics();
+
   // Call queryClient for TanStack Query
   const queryClient = new QueryClient({
     defaultOptions: {

src/page/LoginPage/LoginPage.test.tsx

@@ -36,6 +36,6 @@ describe('LoginPage', () => {
     expect(screen.getByText('Debate Timer')).toBeInTheDocument();
 
     // 입력 필드와 버튼 확인
-    expect(screen.getByText('구글 계정으로 로그인')).toBeInTheDocument();
+    expect(screen.getByText('Google 계정으로 로그인')).toBeInTheDocument();
   });
 });

src/page/TableComposition/TableComposition.tsx

@@ -33,6 +33,8 @@ export default function TableComposition() {
           name: fetchedTableData.info.name,
           agenda: fetchedTableData.info.agenda,
           type: type,
+          warningBell: fetchedTableData.info.warningBell,
+          finishBell: fetchedTableData.info.finishBell,
         },
         table: fetchedTableData.table,
       };
@@ -47,18 +49,22 @@ export default function TableComposition() {
     if (mode === 'edit') {
       EditTable({
         tableId: tableId, // etc
-        tableName: formData.info.name ?? '테이블 1',
-        tableAgenda: formData.info.agenda,
-        warningBell: true,
-        finishBell: true,
+        info: {
+          name: formData.info.name ?? '테이블 1',
+          agenda: formData.info.agenda,
+          warningBell: formData.info.warningBell,
+          finishBell: formData.info.finishBell,
+        },
         table: formData.table,
       });
     } else {
       AddTable({
-        tableName: formData.info.name ?? '테이블 1',
-        tableAgenda: formData.info.agenda,
-        warningBell: true,
-        finishBell: true,
+        info: {
+          name: formData.info.name ?? '테이블 1',
+          agenda: formData.info.agenda,
+          warningBell: formData.info.warningBell,
+          finishBell: formData.info.finishBell,
+        },
         table: formData.table,
       });
     }
@@ -72,15 +78,14 @@ export default function TableComposition() {
             <TableNameAndType
               info={formData.info}
               isEdit={mode === 'edit'}
-              onNameAndTypeChange={updateInfo}
+              onInfoChange={updateInfo}
               onButtonClick={() => goNextStep('TimeBox')}
             />
           ),
           TimeBox: (
             <TimeBoxStep
               initData={formData}
               isEdit={mode === 'edit'}
-              onAgendaChange={updateInfo}
               onTimeBoxChange={updateTable}
               onButtonClick={handleButtonClick}
             />

src/page/TableComposition/components/DebatePanel/DebatePanel.tsx

@@ -1,11 +1,11 @@
 import { HTMLAttributes } from 'react';
 import EditDeleteButtons from '../EditDeleteButtons/EditDeleteButtons';
-import { DebateInfo, DebateTypeToString } from '../../../../type/type';
+import { TimeBoxInfo, DebateTypeToString } from '../../../../type/type';
 import { Formatting } from '../../../../util/formatting';
 import { LuArrowUpDown } from 'react-icons/lu';
 interface DebatePanelProps extends HTMLAttributes<HTMLDivElement> {
-  info: DebateInfo;
-  onSubmitEdit?: (updatedInfo: DebateInfo) => void;
+  info: TimeBoxInfo;
+  onSubmitEdit?: (updatedInfo: TimeBoxInfo) => void;
   onSubmitDelete?: () => void;
 }