[#78] Modal component 개선

src/components/modal/modal.jsx

@@ -1,7 +1,4 @@
 import styled from "styled-components";
-import { useModal } from "../../hooks/use-modal";
-import { PrimaryButton } from "../button/button";
-import BUTTON_SIZE from "../button/button-size";
 import Portal from "../portal/portal";
 
 const Content = styled.div`
@@ -34,34 +31,14 @@ const ModalContainer = styled.div`
   align-items: center;
 `;
 
-const ActionButton = styled.div`
-  cursor: pointer;
-`;
-
-function Modal({ id, action, children }) {
-  const { showsModal, setShowsModal } = useModal({
-    id: id,
-    type: "modal",
-  });
-
-  const handleClick = () => setShowsModal(true);
-  const handleConfirmClick = () => setShowsModal(false);
-
+function Modal({ shows, children }) {
   return (
     <>
-      <ActionButton onClick={handleClick}>{action}</ActionButton>
-      {showsModal && (
+      {shows && (
         <Portal id="modal">
           <ModalContainer>
             <StyledModal>
-              <Content>
-                {children}
-                <PrimaryButton
-                  size={BUTTON_SIZE.medium}
-                  title="확인"
-                  onClick={handleConfirmClick}
-                />
-              </Content>
+              <Content>{children}</Content>
             </StyledModal>
           </ModalContainer>
         </Portal>

src/features/message/components/message-card-detail.jsx

@@ -1,9 +1,12 @@
 import styled from "styled-components";
+import { PrimaryButton } from "../../../components/button/button";
+import BUTTON_SIZE from "../../../components/button/button-size";
 import Colors from "../../../components/color/colors";
 import { formatDate } from "../../../utils/formatter";
 import MessageSender from "./message-sender";
 
 const Header = styled.header`
+  width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -12,6 +15,7 @@ const Header = styled.header`
 `;
 
 const Content = styled.div`
+  width: 100%;
   margin-top: 16px;
   font-size: 18px;
   font-weight: 400;
@@ -34,16 +38,24 @@ const Content = styled.div`
   }
 `;
 
+const Action = styled.div`
+  padding-top: 24px;
+`;
+
 const CreatedDate = styled.span`
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
   color: ${Colors.gray(400)};
 `;
 
-const StyledMessageCardDetail = styled.div``;
+const StyledMessageCardDetail = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
 
-function MessageCardDetail({ message }) {
+function MessageCardDetail({ message, onConfirm }) {
   return (
     <StyledMessageCardDetail>
       <Header>
@@ -55,6 +67,13 @@ function MessageCardDetail({ message }) {
         <CreatedDate>{formatDate(message.createdAt, ".")}</CreatedDate>
       </Header>
       <Content>{message.content}</Content>
+      <Action>
+        <PrimaryButton
+          size={BUTTON_SIZE.medium}
+          title="확인"
+          onClick={onConfirm}
+        />
+      </Action>
     </StyledMessageCardDetail>
   );
 }

src/features/message/components/message-card.jsx

@@ -50,11 +50,22 @@ const StyledMessageCard = styled.article`
   border-radius: 16px;
   background-color: white;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+  cursor: ${({ $isEditing }) => ($isEditing ? "default" : "pointer")};
 `;
 
-function MessageCard({ isEditing, message, onDelete }) {
+function MessageCard({ isEditing, message, onClick, onDelete }) {
+  const handleClick = () => {
+    if (isEditing) return;
+    onClick(message);
+  };
+
+  const handleDeleteClick = (event) => {
+    event.stopPropagation();
+    onDelete(message.id);
+  };
+
   return (
-    <StyledMessageCard>
+    <StyledMessageCard $isEditing={isEditing} onClick={handleClick}>
       <Header>
         <MessageSender
           profileImageUrl={message.profileImageURL}
@@ -65,7 +76,7 @@ function MessageCard({ isEditing, message, onDelete }) {
           <OutlinedButton
             size={BUTTON_SIZE.medium}
             icon={deleteImage}
-            onClick={onDelete}
+            onClick={handleDeleteClick}
           />
         )}
       </Header>

src/features/message/components/messages-grid.jsx

@@ -1,8 +1,9 @@
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router";
 import styled from "styled-components";
 import Modal from "../../../components/modal/modal.jsx";
 import { useIntersectionObserver } from "../../../hooks/use-intersection-observer.jsx";
+import { useModal } from "../../../hooks/use-modal.jsx";
 import { media } from "../../../utils/media.js";
 import MessageCardAdd from "./message-card-add.jsx";
 import MessageCardDetail from "./message-card-detail.jsx";
@@ -28,6 +29,10 @@ function MessagesGrid({ isEditing, messages, onDelete, onInfiniteScroll }) {
   const navigate = useNavigate();
   const { id } = useParams();
   const infiniteScrollTargetRef = useRef();
+  const { showsModal, setShowsModal } = useModal({
+    key: "message-modal",
+  });
+  const [modalMessage, setModalMessage] = useState(null);
 
   const observerCallback = (entry) => {
     if (!entry.isIntersecting) return;
@@ -39,33 +44,42 @@ function MessagesGrid({ isEditing, messages, onDelete, onInfiniteScroll }) {
     navigate(`/post/${id}/message`);
   };
 
+  const handleMessageClick = (message) => {
+    setShowsModal(true);
+    setModalMessage(message);
+  };
+
   const handleDeleteClick = (messageId) => {
     onDelete(messageId);
   };
 
-  const messageCard = (message) => (
-    <MessageCard
-      key={message.id}
-      isEditing={isEditing}
-      message={message}
-      onDelete={() => handleDeleteClick(message.id)}
-    />
-  );
+  const handleModalConfirm = () => {
+    setShowsModal(false);
+    setModalMessage(null);
+  };
 
   return (
-    <StyledRollingPaperMessagesGrid>
-      <MessageCardAdd onClick={handleAddClick} />
-      {messages.map((message) =>
-        isEditing ? (
-          messageCard(message)
-        ) : (
-          <Modal key={message.id} id={message.id} action={messageCard(message)}>
-            <MessageCardDetail message={message} />
-          </Modal>
-        )
-      )}
-      <div ref={infiniteScrollTargetRef}></div>
-    </StyledRollingPaperMessagesGrid>
+    <>
+      <StyledRollingPaperMessagesGrid>
+        <MessageCardAdd onClick={handleAddClick} />
+        {messages.map((message) => (
+          <MessageCard
+            key={message.id}
+            isEditing={isEditing}
+            message={message}
+            onClick={handleMessageClick}
+            onDelete={handleDeleteClick}
+          />
+        ))}
+        <div ref={infiniteScrollTargetRef}></div>
+      </StyledRollingPaperMessagesGrid>
+      <Modal shows={showsModal && modalMessage != null}>
+        <MessageCardDetail
+          message={modalMessage}
+          onConfirm={handleModalConfirm}
+        />
+      </Modal>
+    </>
   );
 }
 

src/hooks/use-modal.jsx

@@ -1,7 +1,6 @@
 import { usePortal } from "./use-portal";
 
-function useModal({ id, type }) {
-  const key = `${type}_${id}`;
+function useModal({ key }) {
   const { isOpen, setIsOpen } = usePortal({ key });
   return { showsModal: isOpen, setShowsModal: setIsOpen };
 }

src/tests/test-components-page.jsx

@@ -22,6 +22,7 @@ import POPOVER_ALIGNMENT from "../components/popover/popover-alignment";
 import TextField from "../components/text-field/text-field";
 import TEXT_FIELD_TYPE from "../components/text-field/text-field-type";
 import Toast from "../components/toast/toast";
+import { useModal } from "../hooks/use-modal";
 import { useToast } from "../hooks/use-toast";
 
 const OutlinedHeader = styled(Header)`
@@ -48,6 +49,13 @@ function TestComponentsPage() {
   const handleToastClick = () => setShowsToast(true);
   const handleToastDismiss = () => setShowsToast(false);
 
+  /* Modal */
+  const { showsModal, setShowsModal } = useModal({
+    key: "test-modal",
+  });
+  const handleModalOpen = () => setShowsModal(true);
+  const handleModalClose = () => setShowsModal(false);
+
   return (
     <div
       style={{
@@ -199,11 +207,18 @@ function TestComponentsPage() {
         )}
       </div>
       <div>
-        <Modal
-          id="user"
-          action={<PrimaryButton size={BUTTON_SIZE.small} title="Show Modal" />}
-        >
+        <PrimaryButton
+          size={BUTTON_SIZE.small}
+          title="Show Modal"
+          onClick={handleModalOpen}
+        />
+        <Modal shows={showsModal}>
           <h1>This is Modal.</h1>
+          <PrimaryButton
+            size={BUTTON_SIZE.small}
+            title={"Close"}
+            onClick={handleModalClose}
+          />
         </Modal>
       </div>
       <div style={{ display: "flex", gap: "16px" }}>