Merge pull request #1406 from 42organization/Fix/파티-아이폰에서-글자-색상-오류-수정-#…

…1390 Feat/파티 메뉴얼 작성 및 아이폰 글자 색상 수정 #1390
42organization · Apr 16, 2024 · 5c5bd79 · 5c5bd79
2 parents 6174519 + 9e60342
commit 5c5bd79
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 27 deletions.
diff --git a/components/modal/modalType/PartyModal.tsx b/components/modal/modalType/PartyModal.tsx
@@ -1,5 +1,7 @@
 import { useRecoilValue } from 'recoil';
+import { PartyModal } from 'types/modalTypes';
 import { modalState } from 'utils/recoil/modal';
+import PartyManudalModal from '../party/PartyManualModal';
 import { PartyReportModal } from '../party/PartyReportModal';
 
 export default function PartyModal() {
@@ -9,6 +11,7 @@ export default function PartyModal() {
     'PARTY-REPORT': partyReport ? (
       <PartyReportModal report={partyReport} />
     ) : null,
+    'PARTY-MANUAL': <PartyManudalModal />,
   };
 
   if (!modalName) return null;

diff --git a/components/modal/party/PartyManualModal.tsx b/components/modal/party/PartyManualModal.tsx
@@ -0,0 +1,93 @@
+import { useSetRecoilState } from 'recoil';
+import { modalState } from 'utils/recoil/modal';
+import styles from 'styles/modal/party/PartyManualModal.module.scss';
+
+type contentType = {
+  title: React.ReactNode;
+  description: string[];
+};
+
+// TODO : 전체 타입에 대한 설명 추가해야 합니다.
+const modalContents: contentType[] = [
+  {
+    title: <ContentTitle title={'참가 및 시작'} icon={'🔍'} />,
+    description: [
+      '하고 싶은 게임을 정해 방을 만들거나 참가합니다.',
+      '방장이 최소인원이 넘을 경우 시작할 수 있습니다.',
+      '인원이 전부 모인 경우 자동으로 시작합니다.',
+      '방이 시작되면 슬랙 DM으로 초대해드립니다.',
+      '방이 시작되면 참가자에게만 익명이 해제되며 댓글을 달 수 없게 됩니다.',
+    ],
+  },
+  {
+    title: <ContentTitle title={'주의 사항'} icon={'⚠'} />,
+    description: [
+      '예약 서비스가 아니므로 콘솔게임이나 보드게임이 사용중일 경우 다른 게임을 하거나 시간을 조정해야합니다.',
+    ],
+  },
+  {
+    title: <ContentTitle title={'게임 추가 건의'} icon={'✋'} />,
+    description: ['추가 하고 싶은 게임이 있다면 건의하기로 추천해주세요.'],
+  },
+  {
+    title: <ContentTitle title={'신고'} icon={'🚨'} />,
+    description: [
+      '말 없이 노쇼하거나 여러번의 신고 누적 시 패널티 상태가 됩니다.',
+      '억울하게 패널티 상태가 되었을 경우 건의하기로 건의 부탁드립니다.',
+    ],
+  },
+];
+
+export default function PartyManudalModal() {
+  const setModal = useSetRecoilState(modalState);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>파티 모집</div>
+      <ul className={styles.ruleList}>
+        {modalContents.map(
+          (
+            item: {
+              title: React.ReactNode;
+              description: string[];
+            },
+            index
+          ) => (
+            <li key={index}>
+              {item.title}
+              <ul className={styles.ruleDetail}>
+                {item.description.map((e, idx) => (
+                  <li key={idx}>{e}</li>
+                ))}
+              </ul>
+            </li>
+          )
+        )}
+      </ul>
+      <button
+        onClick={() => setModal({ modalName: null })}
+        className={styles.closeButton}
+      >
+        확인
+      </button>
+    </div>
+  );
+}
+
+type contentTitleProps = {
+  title: string;
+  icon?: React.ReactNode | string;
+};
+
+function ContentTitle({ title, icon }: contentTitleProps) {
+  icon = typeof icon === 'string' ? <span>{icon}</span> : icon;
+  return (
+    <div
+      className={`${styles.ruleTitle} 
+      ${styles[icon ? 'withIcon' : 'withoutIcon']}`}
+    >
+      {icon ? icon : null}
+      <span>{title}</span>
+    </div>
+  );
+}
diff --git a/components/party/PartyCreate.tsx b/components/party/PartyCreate.tsx
@@ -61,11 +61,7 @@ function CategorySelection({
   return (
     <div className={styles.selectionPageContainer}>
       <header>
-        <div>{/* 정렬을 위한 가짜 box */}</div>
         <h2>카테고리</h2>
-        <button onClick={() => router.back()}>
-          <FaTimes size={25} />
-        </button>
       </header>
       <section className={styles.categoryContainer}>
         <ul>
@@ -173,9 +169,6 @@ function DetailCustomization({
     <div className={styles.detailFormContainer}>
       <header>
         <h2>#{partyForm.categoryName}</h2>
-        <button onClick={() => router.back()}>
-          <FaTimes size={25} />
-        </button>
       </header>
       <form onSubmit={handleSubmit}>
         <label className={styles.titleLabel}>

diff --git a/components/party/PartyMain.tsx b/components/party/PartyMain.tsx
@@ -1,8 +1,10 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
-import { FaSearch } from 'react-icons/fa';
+import { useSetRecoilState } from 'recoil';
+import { FaQuestion, FaSearch } from 'react-icons/fa';
 import { PartyCategory, PartyRoom } from 'types/partyTypes';
+import { modalState } from 'utils/recoil/modal';
 import styles from 'styles/party/PartyMain.module.scss';
 import PartyRoomListItem from './PartyRoomListItem';
 
@@ -16,19 +18,29 @@ type JoinedRoomsProps = {
 };
 
 function JoinedRooms({ joinedPartyRooms, penaltyPeroid }: JoinedRoomsProps) {
+  const setModal = useSetRecoilState(modalState);
+
   return (
     <section className={styles.joinedRoomContainer}>
       <header className={styles.joinedRoomHeader}>
         <h2>참여중인 파티</h2>
-        {penaltyPeroid ? (
-          <div className={styles.penalty}>
-            패널티 <span className={styles.timer}>{penaltyPeroid}</span>
-          </div>
-        ) : (
-          <Link href='/party/create' className={styles.createRoomButton}>
-            방 만들기
-          </Link>
-        )}
+        <div>
+          <button
+            className={styles.guideButton}
+            onClick={() => setModal({ modalName: 'PARTY-MANUAL' })}
+          >
+            사용법
+          </button>
+          {penaltyPeroid ? (
+            <div className={styles.penalty}>
+              패널티 <span className={styles.timer}>{penaltyPeroid}</span>
+            </div>
+          ) : (
+            <Link href='/party/create' className={styles.createRoomButton}>
+              방 만들기
+            </Link>
+          )}
+        </div>
       </header>
       <ul>
         {joinedPartyRooms.length > 0 ? (

diff --git a/components/party/roomDetail/PartyDetailButton.tsx b/components/party/roomDetail/PartyDetailButton.tsx
@@ -116,6 +116,13 @@ function JoinRoom({ roomId, fetchRoomDetail }: RefreshProps) {
       .post(`/party/rooms/${roomId}`)
       .then(() => {
         fetchRoomDetail();
+        setSnackbar({
+          toastName: 'Party Join',
+          message:
+            '파티모집이 완료되면 slack 메세지가 보내집니다. slack 알림을 켜주세요!',
+          severity: 'success',
+          clicked: true,
+        });
       })
       .catch(() => {
         setSnackbar({

diff --git a/hooks/party/usePartyRoomList.ts b/hooks/party/usePartyRoomList.ts
@@ -16,6 +16,7 @@ export default function usePartyRoomList({
 }: PartyRoomListProps = {}) {
   const [partyRooms, setPartyRooms] = useState<PartyRoom[]>([]);
   const [joinedPartyRooms, setJoinedPartyRooms] = useState<PartyRoom[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
 
   const getRoomsAxios = (title?: string) => {
     const query = title ? `?title=${title}` : '';
@@ -35,8 +36,9 @@ export default function usePartyRoomList({
         )
       );
       setJoinedPartyRooms(joinedRoomsRes?.data.roomList ?? []); // joinedRooms는 조건부로 가져오므로 ?.data로 접근
+      setIsLoading(false);
     });
   }, [searchTitle]);
 
-  return { partyRooms, joinedPartyRooms };
+  return { partyRooms, joinedPartyRooms, partyRoomsLoading: isLoading };
 }
diff --git a/pages/party/index.tsx b/pages/party/index.tsx
@@ -11,7 +11,7 @@ export default function PartyMainPage() {
   const titleQuery = Array.isArray(router.query.title)
     ? router.query.title[0]
     : router.query.title;
-  const { partyRooms, joinedPartyRooms } = usePartyRoomList({
+  const { partyRooms, joinedPartyRooms, partyRoomsLoading } = usePartyRoomList({
     withJoined: true,
     searchTitle: titleQuery,
   });
@@ -20,7 +20,7 @@ export default function PartyMainPage() {
 
   usePartyColorMode('PARTY-MAIN');
 
-  if (isCategoryLoading || isPenaltyLoading) return null;
+  if (isCategoryLoading || isPenaltyLoading || partyRoomsLoading) return null; // 방 목록 로딩 추가
 
   return (
     <div className={styles.pageContainer}>

diff --git a/styles/party/PartyCreate.module.scss b/styles/party/PartyCreate.module.scss
@@ -9,19 +9,13 @@
 .selectionPageContainer {
   header {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
 
     h2 {
       margin: 0;
       font-size: $giant-big-font;
     }
-    button {
-      padding: 0;
-      color: $white1;
-      background-color: inherit;
-      border-style: none;
-    }
   }
   .categoryContainer {
     margin: 1em 0;
@@ -66,6 +60,7 @@
         font-size: $medium-font;
         font-weight: 400;
         line-height: 2em;
+        color: black;
         text-align: left;
         background-color: inherit;
         border-style: none;

diff --git a/styles/party/PartyDetailRoom.module.scss b/styles/party/PartyDetailRoom.module.scss
@@ -68,6 +68,7 @@ $detailCommonRem: 1rem;
   padding-top: 0;
   padding-right: 0;
   padding-left: 0.2 rem;
+  color: black;
   text-align: right;
   background-color: inherit;
   border: none;
@@ -251,6 +252,7 @@ $detailCommonRem: 1rem;
 .spreadBtn {
   display: flex;
   margin: 0;
+  color: black;
   background-color: inherit;
   border: none;
 }