[Feat] 노쇼 신고 로직 완성, 한글 모달 이름 적용, css 적용

42organization · Mar 29, 2024 · 9c73d3a · 9c73d3a
1 parent c32cb7a
commit 9c73d3a
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 27 deletions.
diff --git a/components/modal/Party/PartyReportModal.tsx b/components/modal/Party/PartyReportModal.tsx
@@ -52,11 +52,18 @@ export function PartyReportModal({ report }: { report: PartyReportModalData }) {
     reportHandler().catch(() => setIsLoading(false));
   };
 
+  const reportName =
+    report.name === 'NOSHOW'
+      ? `${report.userIntraId} 노쇼 신고`
+      : report.name === 'COMMENT'
+      ? '댓글 신고'
+      : '방 신고';
+
   return (
     <div className={styles.container}>
       <div>
         <div className={styles.title}>42GG</div>
-        <div className={styles.phrase}>{`${report.name} REPORT`}</div>
+        <div className={styles.phrase}>{`${reportName}`}</div>
       </div>
       <form>
         <div className={styles.contentWrapper}>

diff --git a/components/party/roomDetail/PartyDetailButton.tsx b/components/party/roomDetail/PartyDetailButton.tsx
@@ -6,9 +6,11 @@ import { instance } from 'utils/axios';
 import { modalState } from 'utils/recoil/modal';
 import { toastState } from 'utils/recoil/toast';
 import styles from 'styles/party/PartyDetailRoom.module.scss';
+
 type ParytButtonProps = {
   roomId?: number;
   commentId?: number;
+  userIntraId?: string;
 };
 
 function ReportComment({ commentId }: ParytButtonProps) {
@@ -53,6 +55,29 @@ function ReportRoom({ roomId }: ParytButtonProps) {
   );
 }
 
+function ReportNoShow({ roomId, userIntraId }: ParytButtonProps) {
+  const setModal = useSetRecoilState(modalState);
+
+  return (
+    <button
+      className={styles.noShowBtn}
+      onClick={() => {
+        setModal({
+          partyReport: {
+            name: 'NOSHOW',
+            roomId: roomId,
+            userIntraId: userIntraId,
+          },
+          modalName: 'PARTY-REPORT',
+        });
+      }}
+    >
+      <div style={{ margin: '0 0.3rem' }}>노쇼 신고</div>
+      <LuAlertTriangle color='gray' style={{ marginTop: 'auto' }} />
+    </button>
+  );
+}
+
 function ShareRoom() {
   const roomId = useRouter().query.roomId;
   const setSnackbar = useSetRecoilState(toastState);
@@ -172,6 +197,7 @@ const PartyRoomDetailButton = {
   JoinRoom,
   LeaveRoom,
   StartRoom,
+  ReportNoShow,
 };
 
 export default PartyRoomDetailButton;
diff --git a/components/party/roomDetail/PartyDetailProfile.tsx b/components/party/roomDetail/PartyDetailProfile.tsx
@@ -35,7 +35,11 @@ export default function PartyDetailProfile({
         </button>
       </div>
       <div className={styles.profileItem}>
-        <Profile roomUsers={roomUsers} hostNickname={hostNickname} />
+        <Profile
+          roomUsers={roomUsers}
+          hostNickname={hostNickname}
+          roomStatus={status}
+        />
       </div>
       <ButtonHandler
         currentPeople={currentPeople}
@@ -55,9 +59,10 @@ export default function PartyDetailProfile({
 type ProfileProps = {
   roomUsers: PartyRoomUser[];
   hostNickname: string;
+  roomStatus: PartyRoomStatus;
 };
 
-function Profile({ roomUsers, hostNickname }: ProfileProps) {
+function Profile({ roomUsers, hostNickname, roomStatus }: ProfileProps) {
   return (
     <ul>
       {roomUsers.map(({ intraId, nickname, userImage }) => (
@@ -80,6 +85,14 @@ function Profile({ roomUsers, hostNickname }: ProfileProps) {
           <div style={{ color: nameToRGB(nickname) }}>
             {intraId || nickname}
           </div>
+          {roomStatus !== 'OPEN' && intraId ? (
+            <PartyRoomDetailButton.ReportNoShow
+              roomId={1}
+              userIntraId={intraId}
+            />
+          ) : (
+            <></>
+          )}
         </li>
       ))}
     </ul>

diff --git a/styles/party/PartyDetailRoom.module.scss b/styles/party/PartyDetailRoom.module.scss
@@ -16,28 +16,6 @@ $detailCommonRem: 1rem;
 
 /* =========================================== */
 
-/* ----------------button--------------------- */
-.reportRoomBtn {
-  display: flex;
-  align-items: flex-end;
-  padding: 0 0 0 0.3rem;
-  background-color: inherit;
-  border: none;
-  opacity: 0.7;
-}
-
-.shareBtn {
-  position: relative;
-  padding-top: 0;
-  padding-right: 0;
-  padding-left: 0.2 rem;
-  text-align: right;
-  background-color: inherit;
-  border: none;
-}
-
-/* =========================================== */
-
 /* ----------------title---------------------- */
 .titleBox {
   position: flex;
@@ -77,6 +55,25 @@ $detailCommonRem: 1rem;
   align-items: center;
 }
 
+.reportRoomBtn {
+  display: flex;
+  align-items: flex-end;
+  padding: 0 0 0 0.3rem;
+  background-color: inherit;
+  border: none;
+  opacity: 0.7;
+}
+
+.shareBtn {
+  position: relative;
+  padding-top: 0;
+  padding-right: 0;
+  padding-left: 0.2 rem;
+  text-align: right;
+  background-color: inherit;
+  border: none;
+}
+
 .title {
   font-size: $giant-font;
   font-weight: bold;
@@ -157,6 +154,17 @@ $detailCommonRem: 1rem;
   border-radius: $big-radius;
 }
 
+.noShowBtn {
+  display: flex;
+  min-width: 100%;
+  color: white;
+  text-align: center;
+  background-color: inherit;
+  border: none;
+  justify-content: center;
+  size: 50rem;
+}
+
 .btnContainer {
   text-align: right;
   border-bottom: 0.3rem;
@@ -298,7 +306,6 @@ $detailCommonRem: 1rem;
   background-color: rgba(216, 216, 216, 0.484);
   border-radius: $small-radius;
   align-items: center;
-  // justify-content: space-between;
 }
 
 .textBar {

diff --git a/types/modalTypes.ts b/types/modalTypes.ts
@@ -123,7 +123,7 @@ export interface PartyReportModalData {
   name: 'COMMENT' | 'ROOM' | 'NOSHOW';
   commentId?: number;
   roomId?: number;
-  userIntraId?: number;
+  userIntraId?: string;
 }
 
 export interface Modal {