Merge pull request #56 from Nexters/fix/#55

[Fix/#55] 홈/채팅 디자인 QA

src/app/layout.tsx

@@ -1,5 +1,5 @@
 import SUIT from "@/shared/assets/font/font";
-import ResponsiveRootLayout from "@/shared/components/ResponsiveRootLayout";
+import RootLayoutComponent from "@/shared/components/RootLayout";
 import Hotjar from "@/shared/lib/hotjar/Hotjar";
 import ReactQueryClientProvider from "@/shared/lib/reactQuery/ReactQueryClientProvider";
 import GlobalStyle from "@/shared/lib/styledComponents/GlobalStyle";
@@ -35,7 +35,7 @@ export default function RootLayout({
             <StyledReset />
             <GlobalStyle />
             <StyledComponentsTheme>
-              <ResponsiveRootLayout>{children}</ResponsiveRootLayout>
+              <RootLayoutComponent>{children}</RootLayoutComponent>
             </StyledComponentsTheme>
           </StyledComponentsRegistry>
           <ReactQueryDevtools initialIsOpen={false} />

src/chat/components/AcceptRejectButtons.tsx

@@ -163,7 +163,11 @@ export default function AcceptRejectButtons() {
       css={css`
         display: flex;
         gap: 8px;
-        margin-top: 76px;
+
+        padding: 12px 20px;
+        max-width: 600px;
+        margin-inline: auto;
+        width: 100%;
       `}
     >
       <ChipButton

src/chat/components/ChatBubbleGroup.tsx

@@ -45,7 +45,7 @@ export default function ChatBubbleGroup({ message }: Props) {
           css={css`
             display: flex;
             flex-direction: column;
-            gap: 4px;
+            gap: 8px;
           `}
         >
           {message.tarotName && (

src/chat/components/ChatHeader.tsx

@@ -3,18 +3,20 @@
 import KebobMenuIcon from "@/shared/assets/icons/kebab-menu.svg";
 import BottomSheet from "@/shared/components/BottomSheet";
 import HeaderContent from "@/shared/components/HeaderContent";
+import Toast from "@/shared/components/Toast";
+import { checkBrowserForWebShare } from "@/shared/utils/checkBrowserForWebShare";
+import shareLink from "@/shared/utils/shareLink";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { css } from "styled-components";
 import { useCreateChatRoom } from "../hooks/useCreateChatRoom";
-import { checkBrowserForWebShare } from "@/shared/utils/checkBrowserForWebShare";
-import shareLink from "@/shared/utils/shareLink";
-import Toast from "@/shared/components/Toast";
-import { useState } from "react";
+import CreateChatRoomModal from "./CreateChatRoomModal";
 
 export default function ChatHeader() {
   const { mutate: createChatRoom } = useCreateChatRoom();
   const router = useRouter();
+  const [isCreateChatRoomModalOpen, setIsCreateChatRoomModalOpen] = useState(false);
 
   const tarotNyangUrl = window.location.hostname;
 
@@ -29,6 +31,10 @@ export default function ChatHeader() {
     });
   };
 
+  const handleCreateChatRoomClick = () => {
+    setIsCreateChatRoomModalOpen(true);
+  };
+
   const handleShare = async () => {
     if (checkBrowserForWebShare()) {
       handleWebShare();
@@ -42,11 +48,8 @@ export default function ChatHeader() {
 
   return (
     <HeaderContent
-      /**
-       * FIXME: 구분선이 추가되어야 하나 쌓임 맥락에 의해 전체 화면 오버플로우 되지 않는 문제
-       * 레이아웃 구조 개선 후 divider prop 적용 필요
-       *  */
       sticky
+      divider
       endAction={
         <BottomSheet.Root>
           <BottomSheet.Trigger asChild>
@@ -83,14 +86,12 @@ export default function ChatHeader() {
                 `}
               >
                 <li>
-                  {/* TODO: 메뉴 버튼 액션 추가 */}
-
                   <button type="button" onClick={handleShare}>
                     친구에게 타로냥 알리기
                   </button>
                 </li>
                 <li>
-                  <button type="button" onClick={handleResetChatClick}>
+                  <button type="button" onClick={handleCreateChatRoomClick}>
                     새 대화 시작하기
                   </button>
                 </li>
@@ -109,9 +110,7 @@ export default function ChatHeader() {
       >
         <Toast.Provider>
           <Toast.Root open={toastOpen} onOpenChange={setToastOpen} duration={3000}>
-            <Toast.Title>
-              링크 복사 완료! 타로냥을 알리고 싶은 친구에게 링크를 전송해 주세요.
-            </Toast.Title>
+            <Toast.Title>링크 복사 완료! 친구에게 링크를 전송해 주세요.</Toast.Title>
           </Toast.Root>
           <Toast.Viewport />
           <span
@@ -135,6 +134,11 @@ export default function ChatHeader() {
           </span>
         </Toast.Provider>
       </h1>
+      <CreateChatRoomModal
+        isOpen={isCreateChatRoomModalOpen}
+        onOpenChange={setIsCreateChatRoomModalOpen}
+        onCreateChatRoomClick={handleResetChatClick}
+      />
     </HeaderContent>
   );
 }

src/chat/components/ChatOverview.tsx

@@ -27,7 +27,13 @@ export default function ChatOverview() {
             gap: 90px;
           `}
         >
-          <div>
+          <div
+            css={css`
+              width: 100%;
+              max-width: 600px;
+              margin-inline: auto;
+            `}
+          >
             <div
               css={css`
                 display: flex;
@@ -68,6 +74,9 @@ export default function ChatOverview() {
             <div
               css={css`
                 padding: 16px 20px;
+                width: 100%;
+                max-width: 600px;
+                margin-inline: auto;
               `}
             >
               <TextFieldInChatOverview />

src/chat/components/ChatRoom.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import AcceptRejectButtons from "@/chat/components/AcceptRejectButtons";
 import ChatBubble from "@/chat/components/ChatBubble";
 import ChatBubbleGroup from "@/chat/components/ChatBubbleGroup";
 import TextFieldInChat from "@/chat/components/TextFieldInChat";
@@ -18,6 +17,7 @@ import { useAcceptRejectButtonDisplayContext } from "../hooks/useAcceptRejectBut
 import { useSendChatMessage } from "../hooks/useSendChatMessage";
 import { useTarotCardDeckDisplayContext } from "../hooks/useTarotCardDeckDisplayStore";
 import { useTextFieldInChatDisplayContext } from "../hooks/useTextFieldInChatDisplayStore";
+import AcceptRejectButtons from "./AcceptRejectButtons";
 import ChatCardSelect from "./ChatCardSelect";
 import ChatHeader from "./ChatHeader";
 
@@ -145,7 +145,7 @@ export default function ChatRoom() {
         ref={scrollRef}
         css={css`
           flex: 1;
-          padding: 0px 20px 16px;
+          padding: 0px 0px 16px;
           display: flex;
           flex-direction: column;
           overflow-y: auto;
@@ -166,38 +166,60 @@ export default function ChatRoom() {
             flex: 1;
             display: flex;
             flex-direction: column;
-            gap: 16px;
             margin-top: 16px;
+
+            width: 100%;
+            max-width: 600px;
+            padding-inline: 20px;
+            margin-inline: auto;
           `}
         >
-          {messages.map((message) => {
-            if (message.sender === "SYSTEM") {
-              return <ChatBubbleGroup key={message.messageId} message={message} />;
-            }
-            return (
-              <ChatBubble
-                key={message.messageId}
-                sender={message.sender}
-                message={message.answers[0]}
-              />
-            );
-          })}
-          <AcceptRejectButtons />
-        </div>
-      </div>
-      {isTarotCardDeckVisible && <ChatCardSelect />}
-      {isTextFieldVisible && (
-        <div>
-          <FullscreenOverflowDivider />
           <div
             css={css`
-              padding: 16px 20px;
+              display: flex;
+              flex-direction: column;
+              gap: 16px;
+              flex: 1;
             `}
           >
-            <TextFieldInChat />
+            {messages.map((message) => {
+              if (message.sender === "SYSTEM") {
+                return <ChatBubbleGroup key={message.messageId} message={message} />;
+              }
+              return (
+                <ChatBubble
+                  key={message.messageId}
+                  sender={message.sender}
+                  message={message.answers[0]}
+                />
+              );
+            })}
           </div>
         </div>
-      )}
+      </div>
+      {isTarotCardDeckVisible && <ChatCardSelect />}
+      <div
+        css={css`
+          position: "relative";
+        `}
+      >
+        <AcceptRejectButtons />
+        {isTextFieldVisible && (
+          <div>
+            <FullscreenOverflowDivider />
+            <div
+              css={css`
+                padding: 16px 20px;
+                width: 100%;
+                max-width: 600px;
+                margin-inline: auto;
+              `}
+            >
+              <TextFieldInChat />
+            </div>
+          </div>
+        )}
+      </div>
     </MainContent>
   );
 }

src/chat/components/CreateChatRoomModal.tsx

@@ -0,0 +1,63 @@
+import Button from "@/shared/components/Button";
+import Modal from "@/shared/components/Modal";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { css } from "styled-components";
+interface CreateChatRoomModalProps {
+  isOpen: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onCreateChatRoomClick: () => void;
+}
+
+export default function CreateChatRoomModal({
+  isOpen,
+  onOpenChange,
+  onCreateChatRoomClick,
+}: CreateChatRoomModalProps) {
+  return (
+    <Modal.Root isOpen={isOpen} onOpenChange={onOpenChange}>
+      <Modal.Portal>
+        <Modal.Overlay />
+        <Modal.Content>
+          <VisuallyHidden>
+            <Modal.Title>새 대화 시작하기</Modal.Title>
+          </VisuallyHidden>
+          <Modal.Description>
+            새 대화를 시작하면 타로냥과 나눈
+            <br /> 대화 기록이 모두 사라져요.
+            <br /> 새로 시작할까요?
+          </Modal.Description>
+          <div
+            css={css`
+              display: flex;
+              gap: 8px;
+              margin-top: 24px;
+            `}
+          >
+            <Modal.Close asChild>
+              <Button
+                type="button"
+                color="grey10"
+                css={css`
+                  flex-shrink: initial;
+                `}
+              >
+                머무르기
+              </Button>
+            </Modal.Close>
+
+            <Button
+              type="button"
+              color="grey70"
+              onClick={onCreateChatRoomClick}
+              css={css`
+                flex-shrink: initial;
+              `}
+            >
+              시작하기
+            </Button>
+          </div>
+        </Modal.Content>
+      </Modal.Portal>
+    </Modal.Root>
+  );
+}

src/chat/components/TextFieldInChat.tsx

@@ -22,7 +22,8 @@ export default function TextFieldInChat() {
     textareaRef,
     focus: focusTextField,
   } = useTextFieldInChatDisplayContext();
-  const { show: showAcceptRejectButtons } = useAcceptRejectButtonDisplayContext();
+  const { show: showAcceptRejectButtons, isVisible: isAcceptRejectButtonsVisible } =
+    useAcceptRejectButtonDisplayContext();
   const [isComposing, setIsComposing] = useState(false);
 
   const handleCompositionStart = () => {
@@ -142,7 +143,7 @@ export default function TextFieldInChat() {
         value={message}
         onChange={handleChange}
         disabled={isTextFieldDisabled}
-        placeholder="오늘의 운세는 어떨까?"
+        placeholder={isAcceptRejectButtonsVisible ? "답변을 선택해줘" : "오늘의 운세는 어떨까?"}
         minRows={1}
         maxRows={8}
         maxLength={maxMessageLength}

src/shared/components/FullscreenOverflowDivider.tsx

@@ -13,6 +13,7 @@ export default function FullscreenOverflowDivider() {
         background-color: ${(props) => props.theme.colors.grey10};
         box-shadow: 0 0 0 100vmax ${(props) => props.theme.colors.grey10};
         clip-path: inset(0px -100vmax);
+        flex-shrink: 0;
       `}
     />
   );