Merge pull request #274 from MBTips/dev

18차 배포

Author: junjeeong

src/App.tsx

@@ -106,12 +106,15 @@ const App = () => {
 
         <Helmet>
           <meta property="og:title" content="MBTips_MBTI AI 대화 시뮬레이션" />
-          <meta property="og:image" content="%PUBLIC_URL%/image/og_image.png" />
+          <meta
+            property="og:image"
+            content={`${import.meta.env.VITE_API_BASE_URL}image/og_image.png`}
+          />
           <meta name="twitter:card" content="summary_large_image" />
           <meta name="twitter:title" content="MBTips_MBTI AI 대화 시뮬레이션" />
           <meta
             property="twitter:image"
-            content="%PUBLIC_URL%/image/og_image.png"
+            content={`${import.meta.env.VITE_API_BASE_URL}image/og_image.png`}
           />
         </Helmet>
 

src/components/Banner.tsx

@@ -45,7 +45,7 @@ const Banner = () => {
   }, []);
 
   return (
-    <div className="relative flex h-[184px] w-full">
+    <div className="relative h-[184px] w-screen max-w-[500px]">
       <Link
         to={order === 0 ? "/mbti-test" : `/contents/${order}`}
         className="absolute h-full w-full"
@@ -67,11 +67,11 @@ const Banner = () => {
             )}
           >
             <source media="(min-width: 500px)" srcSet={image.lg} />
-            <source media="(min-width: 375px)" srcSet={image.md} />
+            <source media="(min-width: 375px)" srcSet={image.sm} />
             <img
               src={image.sm}
               alt={image.description}
-              className="h-full w-full object-cover"
+              className="h-full w-full"
             />
           </picture>
         ))}

src/components/CenteredLayout.tsx

@@ -6,7 +6,9 @@ interface CenteredLayoutProps {
 
 const CenteredLayout = ({ children }: CenteredLayoutProps) => (
   <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 className="flex w-full flex-col bg-white lg:w-[500px] ">
+      {children}
+    </div>
   </div>
 );
 

src/components/ChatActionBar.tsx

@@ -1,7 +1,6 @@
 import { ChangeEvent, KeyboardEvent } from "react";
 import ToggleChatTipsButton from "@/components/button/ToggleChatTipsButton";
 import MessageInput from "@/components/input/MessageInput";
-import TipsMenuContainer from "@/components/tips/TipsMenuContainer";
 
 interface ChatActionProps {
   isOpen: boolean;
@@ -21,7 +20,7 @@ const ChatActionBar = ({
   onSend
 }: ChatActionProps) => {
   return (
-    <div className="flex h-[68px] w-full items-center justify-center border-t border-gray-100 bg-white">
+    <section className="flex h-[68px] w-full items-center justify-center border-t border-gray-100 bg-white">
       <ToggleChatTipsButton isOpen={isOpen} setIsOpen={setIsOpen} />
       <MessageInput value={value} onChange={onChange} onKeyUp={onKeyUp} />
       <img
@@ -32,7 +31,7 @@ const ChatActionBar = ({
         width={40}
         height={40}
       />
-    </div>
+    </section>
   );
 };
 

src/components/button/ChatStartButton.tsx

@@ -39,7 +39,7 @@ const ChatStartButton = ({ mode, mbti }: ChatStartButtonProps) => {
   };
   return (
     <button
-      className="flex h-[56px] w-[320px] items-center justify-center rounded-lg bg-primary-normal font-bold text-white md:w-[335px] lg:w-[460px]"
+      className="flex h-[56px] w-full items-center justify-center rounded-lg bg-primary-normal font-bold text-white lg:w-[460px]"
       onClick={handleNavigate}
     >
       대화 시작하기

src/components/button/LoginButton.tsx

@@ -7,7 +7,7 @@ const LoginButton = () => {
 
   return (
     <a href="/login" onClick={handleClick}>
-      <button className="h-[36px] w-[69px] rounded-lg border-[0.8px] border-gray-300 text-md font-bold text-gray-600">
+      <button className="mr-5 h-[36px] w-[69px] rounded-lg border-[0.8px] border-gray-300 text-md font-bold text-gray-600">
         로그인
       </button>
     </a>

src/components/header/Header.tsx

@@ -1,4 +1,3 @@
-import { ReactNode } from "react";
 import { useLocation } from "react-router-dom";
 import SubHeader from "@/components/header/SubHeader";
 import MainHeader from "@/components/header/MainHeader";
@@ -8,22 +7,20 @@ type HeaderProps = {
   title?: string;
   showPreviousIcon?: boolean;
   showShareIcon?: boolean;
-  children?: ReactNode;
 };
 
 const Header = ({
   title = "",
   showPreviousIcon = true,
-  showShareIcon = true,
-  children
+  showShareIcon = true
 }: HeaderProps) => {
   const { pathname } = useLocation();
   const { isLoggedIn } = useAuthStore();
   const isHomepage = pathname === "/";
 
   return (
     <>
-      <div className="fixed z-50 w-[360px] bg-white md:w-[375px] lg:w-[500px]">
+      <header className="fixed top-0 z-50 w-full bg-white lg:w-[500px]">
         {isHomepage ? (
           <MainHeader isLoggedIn={isLoggedIn} />
         ) : (
@@ -33,9 +30,7 @@ const Header = ({
             showShareIcon={showShareIcon}
           />
         )}
-      </div>
-
-      <div className="pt-14">{children}</div>
+      </header>
     </>
   );
 };

src/components/header/MainHeader.tsx

@@ -11,7 +11,7 @@ const MainHeader = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
   };
 
   return (
-    <header className="flex h-[56px] w-full items-center justify-between bg-white pl-5">
+    <div className="flex h-[56px] w-full items-center justify-between bg-white pl-5">
       <Link to="/" className="flex items-center">
         <img
           src="/public/icon/mbtipslogo.svg"
@@ -32,7 +32,7 @@ const MainHeader = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
           onClick={handleNavigate}
         />
       )}
-    </header>
+    </div>
   );
 };
 

src/components/header/SubHeader.tsx

@@ -56,7 +56,7 @@ const SubHeader = ({
 
   return (
     <>
-      <header className="relative flex h-[56px] w-full items-center justify-between border-b border-gray-100 bg-white">
+      <div className="relative flex h-[56px] w-full items-center justify-between border-b border-gray-100 bg-white">
         {showPreviousIcon && (
           <img
             src="/public/icon/arrow_left.svg"
@@ -85,7 +85,7 @@ const SubHeader = ({
             />
           </button>
         )}
-      </header>
+      </div>
 
       {isLeaveChatModalOpen && (
         <ActionConfirmModal

src/components/modal/TermsAndPrivacyModal.tsx

@@ -7,34 +7,34 @@ const TermsAndPrivacyModal = ({
   closeModal
 }: {
   mode: "terms" | "privacy";
-  closeModal: ()=>void;
+  closeModal: () => void;
 }) => {
   const title = mode === "terms" ? "이용약관" : "개인정보처리방침";
-  const description =
-    mode === "terms"
-      ? TERMS
-      : PRIVACY;
+  const description = mode === "terms" ? TERMS : PRIVACY;
 
-      const handleOuterClick = () => {
-        closeModal()
-      }
+  const handleOuterClick = () => {
+    closeModal();
+  };
 
-      const handleInnerClick = (e:MouseEvent) => {
-        e.stopPropagation();
-      }
+  const handleInnerClick = (e: MouseEvent) => {
+    e.stopPropagation();
+  };
 
   return (
-    <div className="inset-0 fixed flex items-center justify-center z-50 bg-black/50" onClick={handleOuterClick}>
-    <div className="relative rounded-lg flex flex-col items-center w-[360px] h-[476px] bg-white px-[45px] py-[25px] overflow-scroll " onClick={handleInnerClick}>
-      <h1 className="font-bold text-2xl ">{title}</h1>
-      <p className="mt-[30px] whitespace-pre-wrap">{description}</p>
-      <button
-        onClick={closeModal}
-        className="absolute top-6 right-4"
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      onClick={handleOuterClick}
+    >
+      <div
+        className="relative flex h-[476px] w-[360px] flex-col items-center overflow-scroll rounded-lg bg-white px-[45px] py-[25px] "
+        onClick={handleInnerClick}
       >
-        <img src="/icon/close.svg" alt="닫기 버튼" width={22} height={22} />
-      </button>
-    </div>
+        <h1 className="text-2xl font-bold ">{title}</h1>
+        <p className="mt-[30px] whitespace-pre-wrap">{description}</p>
+        <button onClick={closeModal} className="absolute top-6 right-4">
+          <img src="/icon/close.svg" alt="닫기 버튼" width={22} height={22} />
+        </button>
+      </div>
     </div>
   );
 };