Merge pull request #95 from MBTips/dev

2차 배포 Test (Dev -> Main)

Author: Soohyuniii

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,11 @@
+# Pull requests
+### ✅ 작업한 내용
+- [x] 
+
+### :1234: 이슈 번호
+- 
+
+### ❗️PR Point
+- 없음
+
+### 📸 스크린샷

package.json

@@ -4,8 +4,8 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
+    "dev": "vite --mode development",
+    "build": "vite build --mode production",
     "lint": "eslint .",
     "preview": "vite preview"
   },

src/App.tsx

@@ -11,7 +11,7 @@ import KaKaoLogin from "@/pages/KaKaoLogin";
 import MbtiTestIntro from "@/pages/MbtiTestIntro";
 import MbtiTestQuestions from "@/pages/MbtiTestQuestions";
 import MbtiTestResult from "@/pages/MbtiTestResult";
-import CenteredLayout from "./components/CenteredLayout";
+import CenteredLayout from "@/components/CenteredLayout";
 
 const App = () => {
   return (

src/components/CenteredLayout.tsx

@@ -1,14 +1,12 @@
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
 
 interface CenteredLayoutProps {
   children: ReactNode;
 }
 
 const CenteredLayout = ({ children }: CenteredLayoutProps) => (
-  <div className="flex justify-center w-screen">
-    <div className="w-full flex justify-center">
-      {children}
-    </div>
+  <div className="flex min-h-screen w-screen justify-center bg-gray-50">
+    <div className="flex w-full justify-center bg-gray-50">{children}</div>
   </div>
 );
 

src/components/Header.tsx

@@ -1,21 +1,25 @@
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
 
 type HeaderProps = {
   title: string;
   showPreviousIcon?: boolean;
   showShareIcon?: boolean;
 };
 
-const Header = ({ title, showPreviousIcon = true, showShareIcon = true }: HeaderProps) => {
+const Header = ({
+  title,
+  showPreviousIcon = true,
+  showShareIcon = true
+}: HeaderProps) => {
   const navigate = useNavigate();
 
   const handleGoBack = () => {
-    navigate(-1); 
+    navigate(-1);
   };
 
   return (
-    <div className="flex flex-row bg-white border border-gray-100 items-center justify-center w-full h-[56px] relative">
-      {showPreviousIcon && ( 
+    <div className="relative flex h-[56px] w-full flex-row items-center justify-center border-b border-gray-100 bg-white">
+      {showPreviousIcon && (
         <img
           src="/public/icon/arrow_left.svg"
           alt="Go To Back"
@@ -26,7 +30,7 @@ const Header = ({ title, showPreviousIcon = true, showShareIcon = true }: Header
         />
       )}
 
-      <h1 className="text-[18px] font-bold text-gray-900 absolute left-1/2 transform -translate-x-1/2">
+      <h1 className="absolute left-1/2 -translate-x-1/2 transform text-[18px] font-bold text-gray-900">
         {title}
       </h1>
 

src/pages/SelectInfo.tsx

@@ -11,6 +11,10 @@ const SelectInfo = () => {
   const isNameRequired = mode === "virtualFriend";
   const headerTitle =
     mode === "fastFriend" ? "상대방 정보선택" : "친구 저장하기";
+  const selectInfoTitle =
+    mode === "fastFriend"
+      ? `상대방의 MBTI를 선택하면\n대화를 시뮬레이션 해볼 수 있어요`
+      : `친구의 MBTI를\n선택해주세요`;
 
   const [selectedMBTI, setSelectedMBTI] = useState<{
     [key: string]: string | null;
@@ -91,7 +95,7 @@ const SelectInfo = () => {
     setter(state === value ? null : value);
   };
 
-  const handleStartChat = async() => {
+  const handleStartChat = async () => {
     const isMBTIComplete = Object.values(selectedMBTI).every(
       (val) => val !== null
     );
@@ -134,13 +138,11 @@ const SelectInfo = () => {
       mode === "virtualFriend" ? "api/virtual-friend" : "api/fast-friend";
 
     try {
-      const response = await instance.post(`/${apiUrl}`,selectedData);
-      console.log("Success!!",response.data)
-    
+      const response = await instance.post(`/${apiUrl}`, selectedData);
+      console.log("Success!!", response.data);
     } catch (error) {
       console.error("Select Info Error", error);
     }
-  
   };
 
   return (
@@ -150,9 +152,8 @@ const SelectInfo = () => {
       <div className="mx-auto w-[320px]">
         {/* MBTI 선택 */}
         <div className="mb-[40px] pt-[48px]">
-          <p className="text-[20px] leading-[30px] font-bold tracking-[-0.01em]">
-            상대방의 MBTI를 선택하면 <br />
-            대화를 시뮬레이션 해볼 수 있어요
+          <p className="text-[20px] leading-[30px] font-bold tracking-[-0.01em] whitespace-pre-line">
+            {selectInfoTitle}
           </p>
 
           <div className="grid grid-cols-4 gap-[24px_13px] pt-[24px]">

vite.config.ts

@@ -3,48 +3,56 @@ import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
 import fs from "fs";
+
 // vite에서 @/store/useAuthStore와 같은 절대 경로를 사용하려면,
 // vite.config.ts 파일에서 alias 설정을 추가해야 합니다.
-export default defineConfig({
-  server: {
-    https: {
-      key: fs.readFileSync("./certs/key.pem"),
-      cert: fs.readFileSync("./certs/cert.pem")
+
+export default defineConfig(({ mode }: { mode: string }) => {
+  const isProduction = mode === "production";
+
+  return {
+    server: {
+      https: isProduction
+        ? undefined // 배포 환경에서는 HTTPS를 비활성화 (Nginx가 처리)
+        : {
+            key: fs.readFileSync("./certs/key.pem"),
+            cert: fs.readFileSync("./certs/cert.pem")
+          }
+    },
+    plugins: [react(), tailwindcss()],
+    resolve: {
+      alias: [
+        { find: "@/", replacement: path.resolve(__dirname, "src") },
+        { find: "@/api", replacement: path.resolve(__dirname, "src/api") },
+        {
+          find: "@/api",
+          replacement: path.resolve(__dirname, "src/api")
+        },
+        {
+          find: "@/components",
+          replacement: path.resolve(__dirname, "src/components")
+        },
+        { find: "@/hooks", replacement: path.resolve(__dirname, "src/hooks") },
+        {
+          find: "@/pages",
+          replacement: path.resolve(__dirname, "src/pages")
+        },
+        { find: "@/store", replacement: path.resolve(__dirname, "src/store") },
+        { find: "@/types", replacement: path.resolve(__dirname, "src/types") },
+        { find: "@/utils", replacement: path.resolve(__dirname, "src/utils") },
+        {
+          find: "@/constants",
+          replacement: path.resolve(__dirname, "src/constants")
+        },
+        {
+          find: "@/store",
+          replacement: path.resolve(__dirname, "src/store")
+        },
+        {
+          find: "@/api",
+          replacement: path.resolve(__dirname, "src/api")
+        }
+      ]
     }
-  },
-  plugins: [react(), tailwindcss()],
-  resolve: {
-    alias: [
-      { find: "@/", replacement: path.resolve(__dirname, "src") },
-      { find: "@/api", replacement: path.resolve(__dirname, "src/api") },
-      {
-        find: "@/api",
-        replacement: path.resolve(__dirname, "src/api")
-      },
-      {
-        find: "@/components",
-        replacement: path.resolve(__dirname, "src/components")
-      },
-      { find: "@/hooks", replacement: path.resolve(__dirname, "src/hooks") },
-      {
-        find: "@/pages",
-        replacement: path.resolve(__dirname, "src/pages")
-      },
-      { find: "@/store", replacement: path.resolve(__dirname, "src/store") },
-      { find: "@/types", replacement: path.resolve(__dirname, "src/types") },
-      { find: "@/utils", replacement: path.resolve(__dirname, "src/utils") },
-      {
-        find: "@/constants",
-        replacement: path.resolve(__dirname, "src/constants")
-      },
-      {
-        find: "@/store",
-        replacement: path.resolve(__dirname, "src/store")
-      },
-      {
-        find: "@/api",
-        replacement: path.resolve(__dirname, "src/api")
-      }
-    ]
-  }
+  };
 });