Merge pull request #563 from boostcampwm2023/FE/bugfix/#552-ai-inputB…

…ar가-작아지는-현상 Fe/bugfix/#552 ai input bar가 작아지는 현상
boostcampwm2023 · Feb 21, 2024 · 6f1bad3 · 6f1bad3
2 parents e50719e + ed64f26
commit 6f1bad3
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 36 deletions.
diff --git a/frontend/src/business/hooks/sidebar/useSidebar.tsx b/frontend/src/business/hooks/sidebar/useSidebar.tsx
@@ -7,10 +7,12 @@ export function useSidebar() {
   const sidebarRef = useRef<HTMLDivElement>(null);
 
   const translateX = (width: number = 0) => {
-    if (!mainRef.current || !sidebarRef.current) return;
-
-    mainRef.current.style.transform = `translateX(-${width}px)`;
-    sidebarRef.current.style.transform = `translateX(-${width}px)`;
+    if (mainRef.current) {
+      mainRef.current.style.transform = `translateX(-${width}px)`;
+    }
+    if (sidebarRef.current) {
+      sidebarRef.current.style.transform = `translateX(-${width}px)`;
+    }
   };
 
   const showSidebar = () => {
@@ -37,7 +39,7 @@ export function useSidebar() {
         (
           <aside
             ref={sidebarRef}
-            className={`fixed top-0 left-[100%] w-screen lg:w-240 h-full surface-alt z-10 transition-transform ease-in-out duration-500 `}
+            className={`fixed top-0 left-[100%] w-screen lg:w-360 h-full surface-alt z-10 transition-transform ease-in-out duration-500 p-15`}
           >
             {children}
           </aside>

diff --git a/frontend/src/components/common/ChatContainer/ChatContainer.tsx b/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 p-[5%] lg:pl-[25%] lg:pr-[25%] pt-64`}>
+    <div className={`relative w-h-full flex-with-center flex-col pl-[5%] pr-[5%]`}>
       <ChatList messages={messages} />
       <ChatInput
         disabled={inputDisabled}

diff --git a/frontend/src/pages/AIChatPage/AIChatPage.tsx b/frontend/src/pages/AIChatPage/AIChatPage.tsx
@@ -14,50 +14,38 @@ export function AIChatPage({}: AIChatPageProps) {
   const { messages, inputDisabled, onSubmitMessage, addPickCardMessage } = useAiChatMessage();
   useAiTarotSpread(addPickCardMessage);
 
-  const { toggleSidebar, sidebarOpened, Sidebar, SlideableContent } = useSidebar();
+  const { toggleSidebar, sidebarOpened, Sidebar } = useSidebar();
 
   const { data } = getAuthorizedQuery();
 
-  if (!data?.isAuthenticated) {
-    return (
-      <>
-        <Background type="dynamic" />
-        <main className="flex-with-center flex-col w-screen h-dvh">
-          <Header />
-          <div className="w-h-full p-[5%] lg:pl-[25%] lg:pr-[25%]">
-            <ChatContainer
-              messages={messages}
-              inputDisabled={inputDisabled}
-              onSubmitMessage={onSubmitMessage}
-            />
-          </div>
-        </main>
-      </>
-    );
-  }
-
   return (
     <>
       <Background type="dynamic" />
       <main className="flex-with-center flex-col w-screen h-dvh">
         <Header
-          rightItems={[
-            <SideBarButton
-              onClick={toggleSidebar}
-              sideBarOpened={sidebarOpened}
-            />,
-          ]}
+          rightItems={
+            data?.isAuthenticated
+              ? [
+                  <SideBarButton
+                    onClick={toggleSidebar}
+                    sideBarOpened={sidebarOpened}
+                  />,
+                ]
+              : []
+          }
         />
-        <SlideableContent>
+        <div className="w-h-full p-[5%] lg:pl-[25%] lg:pr-[25%]">
           <ChatContainer
             messages={messages}
             inputDisabled={inputDisabled}
             onSubmitMessage={onSubmitMessage}
           />
-        </SlideableContent>
-        <Sidebar>
-          <ChatLogContainer />
-        </Sidebar>
+        </div>
+        {data?.isAuthenticated && (
+          <Sidebar>
+            <ChatLogContainer />
+          </Sidebar>
+        )}
       </main>
     </>
   );