feat(fe): add session sharing (#202)

* feat: update branding in modals to enhance visual appeal

* feat: add session link sharing

Author: cjeongmin

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

@@ -46,7 +46,10 @@ function CreateSessionModal() {
   return (
     <Modal>
       <div className='flex h-fit flex-col items-center justify-start gap-4 self-stretch rounded p-4'>
-        <div className='text-2xl font-bold text-indigo-600'>Ask-It</div>
+        <div className='font-header text-2xl'>
+          <span className='text-indigo-600'>A</span>
+          <span className='text-black'>sk-It</span>
+        </div>
         <InputField
           label='세션 이름'
           type='text'

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

@@ -34,7 +34,10 @@ function SignInModal() {
   return (
     <Modal>
       <div className='flex flex-col items-center justify-center gap-4 p-4'>
-        <p className='text-2xl font-bold text-indigo-600'>Ask-It</p>
+        <div className='font-header text-2xl'>
+          <span className='text-indigo-600'>A</span>
+          <span className='text-black'>sk-It</span>
+        </div>
         <InputField
           label='이메일'
           type='email'

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

@@ -57,7 +57,10 @@ function SignUpModal() {
   return (
     <Modal>
       <div className='flex flex-col items-center justify-center gap-4 p-4'>
-        <p className='text-2xl font-bold text-indigo-600'>Ask-It</p>
+        <div className='font-header text-2xl'>
+          <span className='text-indigo-600'>A</span>
+          <span className='text-black'>sk-It</span>
+        </div>
         <InputField
           label='이메일'
           type='email'

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

@@ -5,6 +5,7 @@ import { IoClose, IoShareSocialOutline } from 'react-icons/io5';
 
 import { useModal } from '@/features/modal';
 import { useSessionStore } from '@/features/session';
+import { useToastStore } from '@/features/toast';
 
 import {
   Button,
@@ -15,8 +16,16 @@ import QuestionSection from '@/components/qna/QuestionSection';
 import SessionSettingsDropdown from '@/components/qna/SessionSettingsDropdown';
 
 function QuestionList() {
-  const { sessionTitle, expired, isHost, questions, setSelectedQuestionId } =
-    useSessionStore();
+  const {
+    isHost,
+    expired,
+    questions,
+    sessionId,
+    sessionTitle,
+    setSelectedQuestionId,
+  } = useSessionStore();
+
+  const { addToast } = useToastStore();
 
   const { Modal: CreateQuestion, openModal: openCreateQuestionModal } =
     useModal(<CreateQuestionModal />);
@@ -62,7 +71,24 @@ function QuestionList() {
     {
       icon: <IoShareSocialOutline />,
       label: '공유',
-      onClick: () => {},
+      onClick: async () => {
+        const shareUrl = `${window.location.origin}/session/${sessionId}`;
+
+        try {
+          await navigator.clipboard.writeText(shareUrl);
+          addToast({
+            type: 'SUCCESS',
+            message: '세션 링크가 클립보드에 복사되었습니다',
+            duration: 3000,
+          });
+        } catch (err) {
+          addToast({
+            type: 'ERROR',
+            message: '링크 복사에 실패했습니다',
+            duration: 3000,
+          });
+        }
+      },
     },
     {
       icon: <GrValidate />,