Merge pull request #119 from MBTips/dev

6차 배포 Test (Dev -> Main)

Author: Soohyuniii

.github/workflows/ci.yml

@@ -25,10 +25,12 @@ jobs:
           npm install tailwindcss@latest postcss@latest autoprefixer@latest
           npm install --save-dev @types/node
 
+      - name: Create .env file # env 파일 생성 단계 추가
+        run: |
+          echo "VITE_GA_MEASUREMENT_ID=${{ secrets.VITE_GA_MEASUREMENT_ID }}" > .env
+
       - name: Run build
         run: npm run build --verbose # 프로젝트에 맞는 빌드 명령어
-        env:
-          VITE_GA_MEASUREMENT_ID: ${{ secrets.VITE_GA_MEASUREMENT_ID }} # Google Analytics 환경 변수 사용
 
       - name: Docker build & push
         run: |

src/components/ToastMessage.tsx

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+
+interface ToastMessageProps {
+  message: string;
+  duration?: number;
+  onClose: () => void;
+}
+
+const ToastMessage = ({
+  message,
+  duration = 3000,
+  onClose
+}: ToastMessageProps) => {
+  useEffect(() => {
+    const timer = setTimeout(onClose, duration);
+    return () => clearTimeout(timer);
+  }, [duration, onClose]);
+
+  return (
+    <div className="fixed bottom-[108px] left-1/2 flex h-[52px] w-full max-w-[320px] -translate-x-1/2 items-center justify-center rounded-[12px] bg-black text-center text-[16px] leading-[24px] font-medium tracking-[0%] text-white">
+      {message}
+    </div>
+  );
+};
+
+export default ToastMessage;

src/libs/analytics.ts

@@ -2,7 +2,7 @@ import ReactGA from "react-ga4";
 
 const GA_MEASUREMENT_ID = import.meta.env.VITE_GA_MEASUREMENT_ID || "";
 
-const isProduction = process.env.NODE_ENV === "production";
+const isProduction = import.meta.env.MODE === "production";
 
 const initGA = () => {
   if (isProduction && GA_MEASUREMENT_ID) {

src/pages/SelectInfo.tsx

@@ -4,6 +4,7 @@ import FormButton from "@/components/button/FormButton";
 import Header from "@/components/Header";
 import { getMBTIgroup, mapAgeToNumber } from "@/utils/helpers";
 import instance from "@/api/axios";
+import ToastMessage from "@/components/ToastMessage";
 
 const SelectInfo = () => {
   const location = useLocation();
@@ -29,6 +30,7 @@ const SelectInfo = () => {
   const [gender, setGender] = useState<string | null>(null);
   const [relationship, setRelationship] = useState<string | null>(null);
   const [interest, setInterest] = useState<string[]>([]);
+  const [toastMessage, setToastMessage] = useState<string | null>(null);
 
   const mbtiOptions = ["E", "N", "F", "P", "I", "S", "T", "J"];
   const ageOptions = ["10대", "20대", "30대 이상"];
@@ -95,17 +97,22 @@ const SelectInfo = () => {
     setter(state === value ? null : value);
   };
 
+  const showToast = (message: string) => {
+    setToastMessage(message);
+    setTimeout(() => setToastMessage(null), 3000);
+  };
+
   const handleStartChat = async () => {
     const isMBTIComplete = Object.values(selectedMBTI).every(
       (val) => val !== null
     );
     // 선택한 MBTI값이 하나라도 부재할 경우
     if (!isMBTIComplete) {
-      return alert("각 MBTI 그룹에서 하나의 값을 선택해주세요."); // TODO: Toast popup UI 완료 시 반영 예정
+      return showToast("MBTI를 선택해주세요");
     }
     // 이름 필수 && 이름이 입력되지 않았을 경우 (virtualFriend)
     if (isNameRequired && !name) {
-      return alert("이름을 입력해주세요."); // TODO: Toast popup UI 완료 시 반영 예정
+      return showToast("이름을 입력해주세요");
     }
 
     const mbti = `${selectedMBTI.E}${selectedMBTI.N}${selectedMBTI.F}${selectedMBTI.P}`;
@@ -278,6 +285,13 @@ const SelectInfo = () => {
           </div>
         </div>
 
+        {toastMessage && (
+          <ToastMessage
+            message={toastMessage}
+            onClose={() => setToastMessage(null)}
+          />
+        )}
+
         {/* 대화 시작 버튼 */}
         <button
           className="my-[22px] h-[60px] w-full rounded-[8px] bg-primary-normal font-bold text-white"

vite.config.ts

@@ -19,7 +19,10 @@ export default defineConfig(({ mode }: { mode: string }) => {
       strictPort: true,
       allowedHosts: ["mbtips.kr"],
       hmr: isProduction
-        ? false // 배포 환경에서는 HMR 비활성화 (WebSocket 사용 안 함)
+        ? {
+            host: "mbtips.kr",
+            protocol: "wss"
+          }
         : {
             host: "localhost",
             protocol: "wss"
@@ -60,11 +63,6 @@ export default defineConfig(({ mode }: { mode: string }) => {
           replacement: path.resolve(__dirname, "src/libs")
         }
       ]
-    },
-    define: {
-      "process.env.VITE_GA_MEASUREMENT_ID": JSON.stringify(
-        process.env.VITE_GA_MEASUREMENT_ID
-      )
     }
   };
 });