Merge pull request #69 from SUIN-BUNDANG-LINE/develop

설문이용 v1.0.1 프론트엔드 배포

src/app/(main)/mypage/page.module.css

@@ -0,0 +1,23 @@
+.buttonGroup > button {
+  background-color: inherit; /* 부모 요소의 배경색을 따름 */
+  border: none;
+  cursor: pointer;
+  padding: 6px;
+}
+
+.buttonGroup > button:hover {
+  color: #ff4444; /* hover 시 배경색 */
+}
+
+.buttonGroup {
+  display: flex;
+  gap: 5px;
+  justify-content: left;
+}
+
+.modalActions {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-top: 16px;
+}

src/app/(main)/mypage/page.tsx

@@ -6,14 +6,21 @@ import { useMySurveys } from '@/services/mypage/index';
 import { StatusForFilter, SortType } from '@/services/mypage/types';
 import { useAuth } from '@/hooks/useAuth';
 import { dateReaderForMyPage, yymmdd } from '@/utils/dates';
-import Error from '@/components/ui/error/Error';
+import ErrorComponent from '@/components/ui/error/Error';
 import Loading from '@/components/ui/loading/Loading';
 import Link from 'next/link';
 import Header from '@/components/mypage/Header';
 import Table from '@/components/mypage/Table';
 import Field from '@/components/mypage/Field';
-import Filter from '@/components/mypage/Filter'; // 필터 컴포넌트 임포트
+import Filter from '@/components/mypage/Filter';
 import Image from 'next/image';
+import useModal from '@/hooks/useModal';
+import { FaTrashAlt } from 'react-icons/fa';
+import { showToast } from '@/utils/toast';
+import Modal from '@/components/ui/modal/Modal';
+import Button from '@/components/ui/button/Button';
+import { fetchSurveyDelete } from '@/services/management/fetch';
+import styles from './page.module.css';
 
 type MyPageSurveyInfo = {
   id: string;
@@ -24,32 +31,6 @@ type MyPageSurveyInfo = {
   responseCount: number;
 };
 
-const createdMapper = (arg: MyPageSurveyInfo) => {
-  return (
-    <>
-      <Link
-        href={['제작 중', '수정 중'].includes(arg.status) ? `/workbench/${arg.id}` : `/management/${arg.id}`}
-        style={{ textDecoration: 'none', color: 'inherit' }}>
-        <span style={{ display: 'flex', alignItems: 'center' }}>
-          <Image
-            src={arg.thumbnail !== null ? arg.thumbnail : '/assets/default-thumbnail.webp'}
-            width="35"
-            height="35"
-            style={{ borderRadius: 10, marginRight: '10px' }}
-            alt=""
-          />
-          <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', paddingRight: '8px' }}>
-            {arg.title}
-          </span>
-        </span>
-      </Link>
-      <span>{arg.status}</span>
-      <span>{arg.updatedAt}</span>
-      <span>{arg.responseCount}건</span>
-    </>
-  );
-};
-
 function translateSurveyStatus(finishedAt: string, status: SurveyStatus): string {
   switch (status) {
     case 'NOT_STARTED':
@@ -79,40 +60,111 @@ function toMyPageSurveyInfos(mySurveys: MySurveys): MyPageSurveyInfo[] {
 export default function Page() {
   const { user } = useAuth();
 
-  // 필터와 정렬 상태 관리
   const [statusForFilter, setStatusForFilter] = useState<StatusForFilter>(null);
   const [sortType, setSortType] = useState<SortType>('LAST_MODIFIED');
-
+  const [currentSurveyInfo, setCurrentSurveyInfo] = useState<string[] | null>();
   const { data, isLoading, isError, refetch } = useMySurveys(statusForFilter, sortType);
 
+  const { isOpen: isDeleteModalOpen, openModal: openDeleteModal, closeModal: closeDeleteModal } = useModal();
+
+  const confirmDelete = async () => {
+    closeDeleteModal();
+    try {
+      if (currentSurveyInfo) await fetchSurveyDelete({ surveyId: currentSurveyInfo[0] });
+      else throw new Error();
+      showToast('success', '설문이 삭제되었습니다.');
+      refetch();
+    } catch (error) {
+      showToast('error', '설문 삭제에 실패했습니다.');
+    }
+  };
+
+  const handleDeleteSurvey = (surveyId: string, title: string) => {
+    setCurrentSurveyInfo([surveyId, title]);
+    openDeleteModal();
+  };
+
   const mySurveyInfos = data ? toMyPageSurveyInfos(data) : [];
 
+  const createdMapper = (arg: MyPageSurveyInfo) => {
+    return (
+      <>
+        <Link
+          href={['제작 중', '수정 중'].includes(arg.status) ? `/workbench/${arg.id}` : `/management/${arg.id}`}
+          style={{ textDecoration: 'none', color: 'inherit' }}>
+          <div style={{ display: 'grid', gridTemplateColumns: '42px 1fr', alignItems: 'center' }}>
+            <Image
+              src={arg.thumbnail || '/assets/default-thumbnail.webp'}
+              width="35"
+              height="35"
+              style={{ borderRadius: 10, marginRight: '10px' }}
+              alt=""
+            />
+            <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', paddingRight: '8px' }}>
+              {arg.title || '제목 없는 설문'}
+            </span>
+          </div>
+        </Link>
+        <span>{arg.status}</span>
+        <span>{arg.updatedAt}</span>
+        <span>{arg.responseCount}건</span>
+        <div className={styles.buttonGroup}>
+          <Button onClick={() => handleDeleteSurvey(arg.id, arg.title)}>
+            <FaTrashAlt />
+          </Button>
+        </div>
+      </>
+    );
+  };
+
+  const getSurveyTitle = (): string => {
+    if (!currentSurveyInfo) return '';
+    const surveyTitle = currentSurveyInfo[1];
+    if (surveyTitle.length <= 20) return ` "${surveyTitle}"`;
+    return ` "${currentSurveyInfo[1].slice(0, 20)}..."`;
+  };
+
   if (isLoading) return <Loading message="데이터를 불러오는 중..." />;
   if (isError)
     return (
-      <Error message="마이페이지를 불러오지 못했습니다." buttons={[{ text: '재시도', fn: refetch }]} margin="18px" />
+      <ErrorComponent
+        message="마이페이지를 불러오지 못했습니다."
+        buttons={[{ text: '재시도', fn: refetch }]}
+        margin="18px"
+      />
     );
 
   return (
     <>
       <Header username={user?.nickname} surveyCount={mySurveyInfos.length} />
 
       <Field title="제작한 설문">
-        {/* Filter 컴포넌트 사용 */}
         <Filter
           statusForFilter={statusForFilter}
           sortType={sortType}
           onStatusChange={setStatusForFilter}
           onSortChange={setSortType}
         />
         <Table<MyPageSurveyInfo>
-          gridTemplateColumns="minmax(245px, 1fr) 120px 140px 70px"
-          columnNames={['제목', '상태', '수정일', '응답 수']}
+          gridTemplateColumns="minmax(245px, 1fr) 120px 140px 70px 40px"
+          columnNames={['제목', '상태', '수정일', '응답 수', '액션']}
           data={mySurveyInfos}
           dataMapper={createdMapper}
           emptyMessage="제작한 설문이 없습니다."
         />
       </Field>
+
+      <Modal isOpen={isDeleteModalOpen} onClose={closeDeleteModal} title="설문 삭제 확인">
+        <p>정말 설문{getSurveyTitle()}을 삭제하시겠습니까? 삭제한 설문은 복구할 수 없습니다.</p>
+        <div className={styles.modalActions}>
+          <Button variant="primary" onClick={confirmDelete}>
+            삭제하기
+          </Button>
+          <Button variant="secondary" onClick={closeDeleteModal}>
+            취소
+          </Button>
+        </div>
+      </Modal>
     </>
   );
 }

src/app/layout.tsx

@@ -19,7 +19,7 @@ export default async function Layout({ children }: Readonly<{ children: React.Re
   const cookieStore = cookies();
   let user: undefined | User;
 
-  if (cookieStore.has('user-profile')) {
+  if (cookieStore.has('user-profile') && cookieStore.has('JSESSIONID')) {
     try {
       const { value } = cookieStore.get('user-profile')!;
       const data = JSON.parse(decodeBase64(value));

src/app/management/[id]/page.module.css

@@ -1,4 +1,13 @@
 .app {
   background-color: #f3f3f3;
   min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.footer {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }

src/app/management/[id]/page.tsx

@@ -6,6 +6,7 @@ import { replaceURLSearchParams, deleteURLSearchParam } from '@/utils/url-search
 import { useGetSurvey } from '@/components/workbench/service';
 import Header from '@/components/management/ui/Header';
 import { showToast } from '@/utils/toast';
+import { Footer } from '@/components/layout/main';
 import styles from './page.module.css';
 import Tab0 from './tab0';
 import Tab1 from './tab1';
@@ -47,6 +48,9 @@ export default function Page({ params }: { params: { id: string } }) {
     <div className={styles.app}>
       <Header tab={tab} tabHandler={tabHandler} title={data?.title} />
       {content}
+      <div className={styles.footer}>
+        <Footer />
+      </div>
     </div>
   );
 }

src/app/s/[surveyId]/p/page.tsx

@@ -158,19 +158,12 @@ export default function Page({ params }: { params: { surveyId: string } }) {
     };
 
     return (
-      <>
-        <Farewell message={survey.finishMessage} />
-        <Navigator
-          backText="응답 수정"
-          backAction={() => setUserResponse(null)}
-          nextText={isSubmitting ? '제출 중...' : '제출'}
-          nextAction={onSubmit}
-          disablePrev={isSubmitting}
-          disableNext={isSubmitting}
-          centered
-        />
-        {isSubmitting}
-      </>
+      <Farewell
+        message={survey.finishMessage}
+        back={() => setUserResponse(null)}
+        next={onSubmit}
+        disabled={isSubmitting}
+      />
     );
   }
 }

src/app/workbench/[id]/page.module.css

@@ -1,4 +1,13 @@
 .app {
   background-color: #f3f3f3;
   min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.footer {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }

src/app/workbench/[id]/page.tsx

@@ -10,6 +10,7 @@ import { ReadonlyURLSearchParams, useRouter, useSearchParams } from 'next/naviga
 import { replaceURLSearchParams } from '@/utils/url-search-params';
 import { showToast } from '@/utils/toast';
 import { ErrorCause } from '@/services/ky-wrapper';
+import { Footer } from '@/components/layout/main';
 import Tab1 from './tab1';
 import Tab0 from './tab0';
 import Tab2 from './tab2';
@@ -106,6 +107,11 @@ export default function Page({ params }: { params: { id: string } }) {
         surveyId={id}
       />
       {content}
+      {tab !== 1 && (
+        <div className={styles.footer}>
+          <Footer />
+        </div>
+      )}
     </div>
   );
 }

src/app/workbench/[id]/tab0.module.css

@@ -5,6 +5,7 @@
   max-width: 700px;
   margin: 0 auto;
   padding: 12px;
+  margin-top: 108px;
 }
 
 .container div,

src/app/workbench/[id]/tab1.module.css

@@ -3,6 +3,7 @@
   align-items: center;
   justify-content: center;
   width: 100%;
+  margin-top: 108px;
 }
 
 .container {

src/app/workbench/[id]/tab2.module.css

@@ -7,6 +7,10 @@
   margin: 12px auto;
 }
 
+.container {
+  margin-top: 108px;
+}
+
 .title {
   font-size: 18px;
   color: var(--gray-d);

src/app/workbench/[id]/tab2.tsx

@@ -60,7 +60,7 @@ function Tab2({ surveyId }: Props) {
   }, [store]);
 
   return (
-    <>
+    <div className={styles.container}>
       <Modal isOpen={isOpen} onClose={closeModal} title={modalTitle}>
         <StartSurveyFailedModal errors={errors} rejectMessage={rejectMessage} onClose={closeModal} />
       </Modal>
@@ -101,7 +101,7 @@ function Tab2({ surveyId }: Props) {
           </>
         )}
       </div>
-    </>
+    </div>
   );
 }
 

src/components/preview/ui/Participate/CheckboxField.module.css

@@ -27,6 +27,11 @@
   justify-content: center;
 }
 
+.option > div:last-child {
+  word-break: break-all;
+  overflow-wrap: anywhere;
+}
+
 .marker {
   width: 20px;
   height: 20px;

src/components/preview/ui/Participate/Field.module.css

@@ -32,6 +32,8 @@
 .description {
   font-size: 14px;
   color: var(--gray-d);
+  word-break: break-all;
+  overflow-wrap: anywhere;
 }
 
 .body {

src/components/preview/ui/Participate/RadioField.module.css

@@ -27,6 +27,11 @@
   justify-content: center;
 }
 
+.option > div:last-child {
+  word-break: break-all;
+  overflow-wrap: anywhere;
+}
+
 .marker {
   width: 20px;
   height: 20px;

src/components/preview/ui/Participate/Section.module.css

@@ -38,10 +38,12 @@
 .heads .top .title {
   font-size: 20px;
   font-weight: 400;
+  word-break: break-all;
 }
 
 .heads .bottom {
   font-size: 15px;
   padding-top: 12px;
   color: var(--gray-d);
+  word-break: break-all;
 }

src/components/preview/ui/Ready/Message.module.css

@@ -23,4 +23,5 @@
   border-radius: 12px;
   background-color: #fff;
   border: 1px solid var(--primary);
+  box-sizing: border-box;
 }