feat(fe): change styles (#223)

* feat: disconnect socket on session termination

* feat: add DeleteConfirmModal component for deletion confirmation

* feat: integrate DeleteConfirmModal for question and reply deletion

* feat: add empty state for replies and questions

* feat: change style for session terminate button

Author: cjeongmin

apps/client/src/components/modal/DeleteConfirmModal.tsx

@@ -0,0 +1,48 @@
+import { useModalContext } from '@/features/modal';
+
+import Button from '@/components/Button';
+
+interface DeleteConfirmModalProps {
+  onCancel?: () => void;
+  onConfirm?: () => void;
+}
+
+function DeleteConfirmModal({ onCancel, onConfirm }: DeleteConfirmModalProps) {
+  const { closeModal } = useModalContext();
+
+  return (
+    <div className='inline-flex flex-col items-center justify-center gap-2.5 rounded-lg bg-gray-50 p-8 shadow'>
+      <div className='flex h-[8dvh] min-w-[20dvw] flex-col justify-center gap-2'>
+        <div className='w-full text-center font-bold'>
+          <span>정말 삭제하시겠습니까?</span>
+        </div>
+        <div className='mx-auto mt-4 inline-flex w-full items-start justify-center gap-2.5'>
+          <Button
+            className='w-full bg-gray-500'
+            onClick={() => {
+              onCancel?.();
+              closeModal();
+            }}
+          >
+            <span className='flex-grow text-sm font-medium text-white'>
+              취소하기
+            </span>
+          </Button>
+          <Button
+            className='w-full bg-indigo-600 transition-colors duration-200'
+            onClick={() => {
+              onConfirm?.();
+              closeModal();
+            }}
+          >
+            <span className='flex-grow text-sm font-medium text-white'>
+              삭제하기
+            </span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DeleteConfirmModal;

apps/client/src/components/qna/QuestionDetail.tsx

@@ -54,16 +54,25 @@ function QuestionDetail() {
               {question.body}
             </Markdown>
           </div>
-          {question.replies
-            .sort((a, b) => {
-              if (b.isHost !== a.isHost) {
-                return b.isHost ? 1 : -1;
-              }
-              return a.replyId - b.replyId;
-            })
-            .map((r) => (
-              <ReplyItem key={r.replyId} question={question} reply={r} />
-            ))}
+          {question.replies.length === 0 ? (
+            <div className='inline-flex h-full w-full select-none items-center justify-center'>
+              <div className='font-header text-5xl opacity-30'>
+                <span className='text-indigo-600'>A</span>
+                <span className='text-black'>sk-It</span>
+              </div>
+            </div>
+          ) : (
+            question.replies
+              .sort((a, b) => {
+                if (b.isHost !== a.isHost) {
+                  return b.isHost ? 1 : -1;
+                }
+                return a.replyId - b.replyId;
+              })
+              .map((r) => (
+                <ReplyItem key={r.replyId} question={question} reply={r} />
+              ))
+          )}
         </div>
       </div>
       {Modal}

apps/client/src/components/qna/QuestionItem.tsx

@@ -20,6 +20,7 @@ import {
 import { useToastStore } from '@/features/toast';
 
 import { Button, CreateQuestionModal } from '@/components';
+import DeleteConfirmModal from '@/components/modal/DeleteConfirmModal';
 
 interface QuestionItemProps {
   question: Question;
@@ -31,9 +32,8 @@ function QuestionItem({ question, onQuestionSelect }: QuestionItemProps) {
 
   const { addToast } = useToastStore();
 
-  const { Modal, openModal } = useModal(
-    <CreateQuestionModal question={question} />,
-  );
+  const { Modal: CreateQuestion, openModal: openCreateQuestionModal } =
+    useModal(<CreateQuestionModal question={question} />);
 
   const {
     sessionToken,
@@ -208,6 +208,10 @@ function QuestionItem({ question, onQuestionSelect }: QuestionItemProps) {
     });
   };
 
+  const { Modal: DeleteConfirm, openModal: openDeleteConfirmModal } = useModal(
+    <DeleteConfirmModal onConfirm={handleDelete} />,
+  );
+
   return (
     <>
       <div
@@ -289,7 +293,7 @@ function QuestionItem({ question, onQuestionSelect }: QuestionItemProps) {
                   question.replies.length === 0 && (
                     <Button
                       className='bg-gray-200/25 font-medium text-gray-500 hover:bg-gray-200/50 hover:transition-all'
-                      onClick={openModal}
+                      onClick={openCreateQuestionModal}
                     >
                       <FiEdit2 />
                     </Button>
@@ -300,7 +304,7 @@ function QuestionItem({ question, onQuestionSelect }: QuestionItemProps) {
                     question.replies.length === 0)) && (
                   <Button
                     className='bg-red-200/25 text-red-600 hover:bg-red-200/50 hover:transition-all'
-                    onClick={handleDelete}
+                    onClick={openDeleteConfirmModal}
                   >
                     <GrClose />
                   </Button>
@@ -310,7 +314,8 @@ function QuestionItem({ question, onQuestionSelect }: QuestionItemProps) {
           </div>
         </div>
       </div>
-      {Modal}
+      {CreateQuestion}
+      {DeleteConfirm}
     </>
   );
 }

apps/client/src/components/qna/QuestionList.tsx

@@ -103,8 +103,13 @@ function QuestionList() {
 
   const sessionButtons = [
     {
-      icon: <IoShareSocialOutline />,
-      label: '공유',
+      key: '공유',
+      button: (
+        <div className='flex w-full cursor-pointer flex-row items-center gap-2'>
+          <IoShareSocialOutline />
+          <p>공유</p>
+        </div>
+      ),
       onClick: async () => {
         const shareUrl = `${window.location.origin}/session/${sessionId}`;
 
@@ -125,13 +130,23 @@ function QuestionList() {
       },
     },
     {
-      icon: <GrValidate />,
-      label: '호스트 설정',
+      key: '호스트 설정',
+      button: (
+        <div className='flex w-full cursor-pointer flex-row items-center gap-2'>
+          <GrValidate />
+          <p>호스트 설정</p>
+        </div>
+      ),
       onClick: () => openSessionParticipantsModal(),
     },
     {
-      icon: <IoClose />,
-      label: '세션 종료',
+      key: '세션 종료',
+      button: (
+        <div className='flex w-full cursor-pointer flex-row items-center gap-2 text-red-600'>
+          <IoClose />
+          <p>세션 종료</p>
+        </div>
+      ),
       onClick: () => openSessionTerminateModal(),
     },
   ];
@@ -170,17 +185,26 @@ function QuestionList() {
             </div>
           )}
         </div>
-        <motion.div className='inline-flex h-full w-full flex-col items-start justify-start gap-4 overflow-y-auto px-8 py-4'>
-          {sections.map((section) => (
-            <QuestionSection
-              key={section.title}
-              title={section.title}
-              initialOpen={section.initialOpen}
-              questions={section.questions}
-              onQuestionSelect={setSelectedQuestionId}
-            />
-          ))}
-        </motion.div>
+        {questions.length === 0 ? (
+          <div className='inline-flex h-full w-full select-none items-center justify-center'>
+            <div className='font-header text-5xl opacity-30'>
+              <span className='text-indigo-600'>A</span>
+              <span className='text-black'>sk-It</span>
+            </div>
+          </div>
+        ) : (
+          <motion.div className='inline-flex h-full w-full flex-col items-start justify-start gap-4 overflow-y-auto px-8 py-4'>
+            {sections.map((section) => (
+              <QuestionSection
+                key={section.title}
+                title={section.title}
+                initialOpen={section.initialOpen}
+                questions={section.questions}
+                onQuestionSelect={setSelectedQuestionId}
+              />
+            ))}
+          </motion.div>
+        )}
       </div>
       {CreateQuestion}
       {SessionParticipants}

apps/client/src/components/qna/ReplyItem.tsx

@@ -16,6 +16,7 @@ import {
 import { useToastStore } from '@/features/toast';
 
 import { Button, CreateReplyModal } from '@/components';
+import DeleteConfirmModal from '@/components/modal/DeleteConfirmModal';
 
 interface ReplyItemProps {
   question: Question;
@@ -28,7 +29,7 @@ function ReplyItem({ question, reply }: ReplyItemProps) {
   const { sessionId, sessionToken, isHost, expired, updateReply } =
     useSessionStore();
 
-  const { Modal, openModal } = useModal(
+  const { Modal: CreateReply, openModal: openCreateReplyModal } = useModal(
     <CreateReplyModal question={question} reply={reply} />,
   );
 
@@ -116,6 +117,10 @@ function ReplyItem({ question, reply }: ReplyItemProps) {
     });
   };
 
+  const { Modal: DeleteModal, openModal: openDeleteModal } = useModal(
+    <DeleteConfirmModal onConfirm={() => handleDelete()} />,
+  );
+
   return (
     <>
       <div className='flex shrink basis-0 flex-col items-start justify-start gap-4 self-stretch px-12'>
@@ -155,15 +160,15 @@ function ReplyItem({ question, reply }: ReplyItemProps) {
                   {reply.isOwner && (
                     <Button
                       className='bg-gray-200/25 hover:bg-gray-200/50 hover:transition-all'
-                      onClick={openModal}
+                      onClick={openCreateReplyModal}
                     >
                       <FiEdit2 />
                     </Button>
                   )}
                   {(isHost || reply.isOwner) && (
                     <Button
                       className='bg-red-200/25 text-red-600 hover:bg-red-200/50 hover:transition-all'
-                      onClick={handleDelete}
+                      onClick={openDeleteModal}
                     >
                       <GrClose />
                     </Button>
@@ -174,7 +179,8 @@ function ReplyItem({ question, reply }: ReplyItemProps) {
           </div>
         </div>
       </div>
-      {Modal}
+      {CreateReply}
+      {DeleteModal}
     </>
   );
 }

apps/client/src/components/qna/SessionSettingsDropdown.tsx

@@ -4,8 +4,8 @@ import Button from '@/components/Button';
 
 interface SessionSettingsDropdownProps {
   buttons: Array<{
-    icon: React.ReactNode;
-    label: string;
+    key: string;
+    button: React.ReactNode;
     onClick: () => void;
   }>;
   triggerRef?: React.RefObject<HTMLButtonElement>;
@@ -36,26 +36,23 @@ function SessionSettingsDropdown({
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [onClose]);
+  }, [onClose, triggerRef]);
 
   return (
     <div
       ref={dropdownRef}
       className='absolute z-10 flex w-max flex-col gap-2 rounded-md bg-white p-4 shadow-lg ring-1 ring-black ring-opacity-5'
     >
-      {buttons.map(({ icon, label, onClick }) => (
+      {buttons.map(({ key, button, onClick }) => (
         <Button
           className='w-full rounded text-sm font-medium text-black transition-all duration-100 hover:bg-gray-100'
-          key={label}
+          key={key}
           onClick={() => {
             onClick();
             onClose();
           }}
         >
-          <div className='flex w-full cursor-pointer flex-row items-center gap-2'>
-            {icon}
-            {label}
-          </div>
+          {button}
         </Button>
       ))}
     </div>

apps/client/src/features/socket/socket.service.ts

@@ -140,6 +140,7 @@ export class SocketService {
         message: '세션이 종료되었습니다.',
         duration: 3000,
       });
+      this.socket.disconnect();
     });
   }