Fe/bugfix/#524 sidebar 관련버그 수정

frontend/src/business/hooks/sidebar/useSidebar.tsx

@@ -37,7 +37,7 @@ export function useSidebar() {
         (
           <aside
             ref={sidebarRef}
-            className={`absolute left-[100%] w-screen lg:w-240  h-full pl-30 pr-30 surface-alt z-10 transition-transform ease-in-out duration-500`}
+            className={`fixed top-0 left-[100%] w-screen lg:w-240 h-full surface-alt z-10 transition-transform ease-in-out duration-500 `}
           >
             {children}
           </aside>
@@ -49,12 +49,12 @@ export function useSidebar() {
     () =>
       ({ children }: PropsWithChildren) =>
         (
-          <div
+          <section
             ref={mainRef}
-            className="w-h-full transition-transform ease-in-out duration-500"
+            className={`w-h-full transition-transform ease-in-out duration-500`}
           >
             {children}
-          </div>
+          </section>
         ),
     [],
   );

frontend/src/components/aiChatPage/ChatLogContainer/ChatLogContainer.tsx

@@ -2,7 +2,7 @@ import { ChatLogList, NewChatLogButton } from '.';
 
 export function ChatLogContainer() {
   return (
-    <div className="w-full pt-64 flex-with-center flex-col gap-8">
+    <div className="w-full pt-64 flex-with-center flex-col gap-8 pl-30 pr-30">
       <NewChatLogButton />
       <ChatLogList />
     </div>

frontend/src/components/common/Background/Background.tsx

@@ -1,11 +1,10 @@
 import { useEffect, useState } from 'react';
 
 interface BackgroundProps {
-  children?: React.ReactNode;
   type?: 'default' | 'open' | 'close' | 'dynamic';
 }
 
-export function Background({ children, type = 'default' }: BackgroundProps) {
+export function Background({ type = 'default' }: BackgroundProps) {
   const html = document.querySelector('html');
   const [conchAnimation, setConchAnimation] = useState<boolean>(false);
   const [darkMode, setDarkMode] = useState<boolean>(html?.dataset.theme === 'dark');
@@ -35,39 +34,36 @@ export function Background({ children, type = 'default' }: BackgroundProps) {
   };
 
   return (
-    <div className={`flex-with-center w-screen h-dvh flex-col ${fadeInIfOpen} ${fadeOutIfClose}`}>
-      <div className="w-screen h-dvh absolute flex-col flex-with-center">
-        <img
-          className={`absolute w-screen h-dvh object-cover
+    <div className={`w-screen h-dvh absolute flex-col flex-with-center ${fadeInIfOpen} ${fadeOutIfClose}`}>
+      <img
+        className={`absolute w-screen h-dvh object-cover
           ${!initMode && (darkMode ? 'animate-fadeOut' : 'animate-fadeIn')}`}
-          src="/bg-light.png"
-          alt="낮하늘 배경 이미지"
-        />
-        <img
-          className={`absolute w-screen h-dvh object-cover ${initMode && !darkMode && 'hidden'} 
+        src="/bg-light.png"
+        alt="낮하늘 배경 이미지"
+      />
+      <img
+        className={`absolute w-screen h-dvh object-cover ${initMode && !darkMode && 'hidden'} 
           ${!initMode && (darkMode ? 'animate-fadeIn' : 'animate-fadeOut')}`}
-          src="/bg-night.png"
-          alt="밤하늘 배경 이미지"
-        />
+        src="/bg-night.png"
+        alt="밤하늘 배경 이미지"
+      />
 
-        <button
-          className={`absolute -bottom-[20%] -translate-y-[65vh] lg:hover:scale-105 transition-transform
+      <button
+        className={`absolute -bottom-[20%] -translate-y-[65vh] lg:hover:scale-105 transition-transform
           ${conchAnimation && 'animate-rotatingConch'}`}
-          onClick={toggleTheme}
-        >
-          <img
-            className="animate-shining w-[35vh] h-[35vh] "
-            src="/moon.png"
-            alt="빛나는 마법의 소라 고둥"
-          />
-        </button>
-        {type != 'default' && (
-          <div
-            className={`absolute w-screen h-dvh ${darkMode ? 'bg-black/75' : 'bg-neutral-500/60'} ${fadeInIfDynamic}`}
-          />
-        )}
-      </div>
-      {children}
+        onClick={toggleTheme}
+      >
+        <img
+          className="animate-shining w-[35vh] h-[35vh] "
+          src="/moon.png"
+          alt="빛나는 마법의 소라 고둥"
+        />
+      </button>
+      {type != 'default' && (
+        <div
+          className={`absolute w-screen h-dvh ${darkMode ? 'bg-black/75' : 'bg-neutral-500/60'} ${fadeInIfDynamic}`}
+        />
+      )}
     </div>
   );
 }

frontend/src/components/common/ChatContainer/ChatContainer.tsx

@@ -10,7 +10,7 @@ interface ChatContainerProps {
 }
 export function ChatContainer({ messages, inputDisabled, onSubmitMessage }: ChatContainerProps) {
   return (
-    <div className={`relative w-h-full flex-with-center flex-col`}>
+    <div className={`relative w-h-full flex-with-center flex-col p-[5%] lg:pl-[25%] lg:pr-[25%] pt-64`}>
       <ChatList messages={messages} />
       <ChatInput
         disabled={inputDisabled}

frontend/src/components/common/Header/Header.tsx

@@ -1,5 +1,3 @@
-import { HeaderRight } from '.';
-
 import { LogoButton } from '@components/common/Buttons';
 
 interface HeaderProps {
@@ -10,7 +8,14 @@ export function Header({ rightItems }: HeaderProps) {
   return (
     <header className="sticky w-full h-48 flex justify-between items-center surface-content text-default px-8 py-5 z-50">
       <LogoButton />
-      <HeaderRight items={rightItems} />
+      {rightItems?.map((item, index) => (
+        <div
+          className="flex gap-16"
+          key={index}
+        >
+          {item}
+        </div>
+      ))}
     </header>
   );
 }

frontend/src/components/common/Header/index.ts

@@ -1,2 +1 @@
 export * from './Header';
-export * from './HeaderRight';

frontend/src/pages/AIChatPage/AIChatPage.tsx

@@ -15,27 +15,28 @@ export function AIChatPage({}: AIChatPageProps) {
   useAiTarotSpread(addPickCardMessage);
 
   return (
-    <Background type="dynamic">
-      <Header
-        rightItems={[
-          <SideBarButton
-            onClick={toggleSidebar}
-            sideBarOpened={sidebarOpened}
-          />,
-        ]}
-      />
-      <SlideableContent>
-        <div className="w-h-full p-[5%] lg:pl-[25%] lg:pr-[25%]">
+    <>
+      <Background type="dynamic" />
+      <main className="flex-with-center flex-col w-screen h-dvh">
+        <Header
+          rightItems={[
+            <SideBarButton
+              onClick={toggleSidebar}
+              sideBarOpened={sidebarOpened}
+            />,
+          ]}
+        />
+        <SlideableContent>
           <ChatContainer
             messages={messages}
             inputDisabled={inputDisabled}
             onSubmitMessage={onSubmitMessage}
           />
-        </div>
-      </SlideableContent>
-      <Sidebar>
-        <ChatLogContainer />
-      </Sidebar>
-    </Background>
+        </SlideableContent>
+        <Sidebar>
+          <ChatLogContainer />
+        </Sidebar>
+      </main>
+    </>
   );
 }

frontend/src/pages/HomePage/HomePage.tsx

@@ -17,16 +17,17 @@ export function HomePage() {
   };
 
   return (
-    <Background>
-      <div className="relative top-75 flex gap-36 z-1">
+    <>
+      <Background />
+      <main className="w-screen h-dvh relative flex-with-center gap-36 z-1">
         <Button onClick={openLoginPopup}>AI에게 타로보기</Button>
         <Button
           onClick={moveHumanChat}
           color="dark"
         >
           채팅방 개설하기
         </Button>
-      </div>
-    </Background>
+      </main>
+    </>
   );
 }

frontend/src/pages/HumanChatPage/HumanChatPage.tsx

@@ -50,32 +50,35 @@ export function HumanChatPage() {
   }, []);
 
   return (
-    <Background type="dynamic">
-      <Header
-        rightItems={[
-          <SideBarButton
-            onClick={toggleSidebar}
-            sideBarOpened={sidebarOpened}
-          />,
-        ]}
-      />
-      <Sidebar>
-        <ChatContainer
-          messages={messages}
-          inputDisabled={inputDisabled}
-          onSubmitMessage={onSubmitMessage}
+    <>
+      <Background type="dynamic" />
+      <main className="flex-with-center flex-col w-screen h-dvh">
+        <Header
+          rightItems={[
+            <SideBarButton
+              onClick={toggleSidebar}
+              sideBarOpened={sidebarOpened}
+            />,
+          ]}
         />
-      </Sidebar>
-      <SlideableContent>
-        <Outlet
-          context={{
-            tarotButtonClick,
-            tarotButtonDisabled,
-            unblockGoBack,
-            ...humanChatPageState,
-          }}
-        />
-      </SlideableContent>
-    </Background>
+        <SlideableContent>
+          <Outlet
+            context={{
+              tarotButtonClick,
+              tarotButtonDisabled,
+              unblockGoBack,
+              ...humanChatPageState,
+            }}
+          />
+        </SlideableContent>
+        <Sidebar>
+          <ChatContainer
+            messages={messages}
+            inputDisabled={inputDisabled}
+            onSubmitMessage={onSubmitMessage}
+          />
+        </Sidebar>
+      </main>
+    </>
   );
 }

frontend/src/utils/random.ts

@@ -4,5 +4,6 @@ export function randomString(length: number = 8) {
   for (let i = 0; i < length; i++) {
     result += chars.charAt(Math.floor(Math.random() * chars.length));
   }
+  if (import.meta.env.DEV) return '';
   return result;
 }