Merge pull request #10 from mobil2team/feat#8_ban

Feat#8 ban
mobil2team · Jan 22, 2024 · 4241fca · 4241fca
2 parents 3762403 + e074a08
commit 4241fca
Show file tree

Hide file tree

Showing 19 changed files with 330 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -36,6 +36,8 @@
   <body>
     <div id="app"></div>
     <dialog class="modal"></dialog>
+    <dialog class="report"></dialog>
+    <dialog class="confirm"></dialog>
     <script type="module" src="/src/index.ts"></script>
   </body>
 </html>
diff --git a/src/SCSS/components/btns.scss b/src/SCSS/components/btns.scss
@@ -21,15 +21,15 @@
   align-items: center;
   flex-shrink: 0;
   margin: 48px 0;
-  background-color: $gray_700;
   @extend %B_16;
-  color: $gray_800;
-}
-
-.upload__submit-btn--active {
   background-color: $green_600;
   color: $gray_900;
-  &:active {
+  &:disabled {
+    background-color: $gray_700;
+    color: $gray_800;
+    cursor: default;
+  }
+  &:enabled:active {
     background-color: $green_700;
   }
 }

diff --git a/src/SCSS/components/card.scss b/src/SCSS/components/card.scss
@@ -2,7 +2,7 @@
   width: 100%;
   height: 66px;
   display: flex;
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: center;
   gap: 10px;
   flex-shrink: 0;
@@ -32,6 +32,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
+    flex-grow: 1;
 
     .card__header__info__title {
       @extend %SB_14;
@@ -43,6 +44,13 @@
       color: $gray_500;
     }
   }
+
+  .report-btn {
+    @extend %M_14;
+    color: $gray_300;
+    height: 100%;
+    padding: 0 16px;
+  }
 }
 
 .card__content {

diff --git a/src/SCSS/pages/report.scss b/src/SCSS/pages/report.scss
@@ -0,0 +1,133 @@
+.report {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 312px;
+  height: fit-content;
+  border: 1px solid var(--gray_800, #232834);
+  border-radius: 20px;
+  background-color: $gray_850;
+  color: $gray_100;
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  padding: 16px;
+
+  .report__header {
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: 40px;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    margin-bottom: 14px;
+    h2 {
+      @extend %B_18;
+    }
+  }
+
+  .report__header--close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    background: url("/cancle_img.svg") no-repeat center;
+  }
+
+  .report__reason {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .report__reason label {
+    @extend %R_14;
+    color: $gray_200;
+    display: block;
+    margin-bottom: 10px;
+    [type="radio"] {
+      vertical-align: middle;
+      appearance: none;
+      -webkit-appearance: none; // 웹킷 브라우저에서 기본 스타일 제거
+      -moz-appearance: none; // 모질라 브라우저에서 기본 스타일 제거
+      border: 1px solid $gray_700;
+      border-radius: 50%;
+      width: 20px;
+      height: 20px;
+      margin-right: 10px;
+    }
+    [type="radio"]:checked {
+      background-color: $green_500; // 체크 시 내부 원으로 표시될 색상
+      border: 3px solid $gray_850; // 테두리가 아닌, 테두리와 원 사이의 색상
+      box-shadow: 0 0 0 1px $gray_700; // 얘가 테두리가 됨
+    }
+  }
+
+  .report-reason input {
+    margin-right: 10px;
+  }
+
+  .report__submit {
+    width: 100%;
+    height: 48px;
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    margin-top: 33px;
+
+    @extend %B_16;
+    background-color: $green_600;
+    color: $gray_900;
+    &:disabled {
+      background-color: $gray_700;
+      color: $gray_800;
+      cursor: default;
+    }
+    &:enabled:active {
+      background-color: $green_700;
+    }
+  }
+}
+
+.confirm {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 312px;
+  height: fit-content;
+  border: 1px solid var(--gray_800, #232834);
+  border-radius: 20px;
+  background-color: $gray_850;
+  color: $gray_100;
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  padding: 16px;
+
+  h2 {
+    @extend %SB_16;
+    color: $gray_100;
+    display: flex;
+    width: 100%;
+    height: 48px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 24px;
+  }
+
+  .confirm__btn {
+    width: 100%;
+    height: 48px;
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+
+    @extend %B_16;
+    background-color: $gray_700;
+    color: $green_600;
+  }
+}
diff --git a/src/SCSS/style.scss b/src/SCSS/style.scss
@@ -7,7 +7,7 @@
 @import "./components/tag.scss";
 @import "./components/btns.scss";
 @import "./pages/home.scss";
-
+@import "./pages/report.scss";
 html {
   background-color: $gray_900;
   color: $gray_100;

diff --git a/src/index.ts b/src/index.ts
@@ -4,11 +4,11 @@ import { screenSizeHandler } from "./ts/controllers/handlers/screenSizeHandler.t
 import { initEventListener } from "./ts/controllers/init/initEventListener.ts";
 
 import { closeDialog } from "./ts/controllers/handlers/modalHandler.ts";
+import { initReportList } from "./ts/controllers/init/initReportList.ts";
 
-(function () {
-  screenSizeHandler();
-  initEventListener();
-})();
+screenSizeHandler();
+initEventListener();
+initReportList();
 
 const container = document.getElementById("app") as HTMLDivElement;
 

diff --git a/src/ts/controllers/api/postApi.ts b/src/ts/controllers/api/postApi.ts
@@ -55,3 +55,27 @@ export const likePost = async (postData: PostData) => {
     console.error("Error fetching data:", error instanceof Error ? error.message : error);
   }
 };
+
+interface ReportProps {
+  postId: number; // 신고하는 게시글 id
+  reportId: number; // 신고 사유 아이디
+}
+
+export const postReport = async (reportData: ReportProps) => {
+  const endpoint = "/v2/report";
+  try {
+    const response = await fetch(`${BASE_URL}${endpoint}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(reportData),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+  } catch (error) {
+    console.error("Error fetching data:", error instanceof Error ? error.message : error);
+  }
+};
diff --git a/src/ts/controllers/events/onClick.ts b/src/ts/controllers/events/onClick.ts
@@ -6,6 +6,12 @@ import {
   imgSelectHandler,
 } from "../handlers/uploadCardHandler.ts";
 import { closeDialog } from "../handlers/modalHandler.ts";
+import {
+  openReport,
+  closeReport,
+  submitReport,
+  confirmHandler,
+} from "../handlers/reportHandler.ts";
 
 interface ClickHandlerMap {
   [key: string]: (target: HTMLElement) => void;
@@ -18,6 +24,10 @@ const clickHandlerMap: ClickHandlerMap = {
   "js-nearWagle": gotoNearWagle,
   "js-likePost": likePostHandler,
   "js-onCloseModal": closeDialog,
+  "js-onOpenReport": openReport,
+  "js-onCloseReport": closeReport,
+  "js-onSubmitReport": submitReport,
+  "js-onConfirm": confirmHandler,
 };
 
 export const onClick = ({ target }: MouseEvent) => {

diff --git a/src/ts/controllers/handlers/reportHandler.ts b/src/ts/controllers/handlers/reportHandler.ts
@@ -0,0 +1,51 @@
+import { fetchCardList } from "../api/getApi";
+import { postReport } from "../api/postApi";
+import { renderReportModal } from "../render";
+import { getStationId } from "../utils/getStationId";
+import { saveReport } from "../utils/reportFn";
+
+const report = document.querySelector(".report") as HTMLDialogElement;
+const confirm = document.querySelector(".confirm") as HTMLDialogElement;
+
+const showConfirm = () => {
+  confirm.showModal();
+};
+
+export const closeConfirm = () => {
+  confirm.close();
+};
+
+export const showReport = () => {
+  report.showModal();
+};
+
+export const closeReport = () => {
+  report.close();
+};
+
+export const confirmHandler = () => {
+  closeConfirm();
+  const stationId = getStationId();
+  fetchCardList({ stationId });
+};
+
+const DB_INDEX_CORRECTION_FACTOR = 1;
+
+export const submitReport = (target: HTMLElement) => {
+  const postId = Number(target.dataset.cardId);
+
+  const selectedReason = target.parentNode!.querySelector(
+    'input[name="report-reason"]:checked'
+  ) as HTMLInputElement;
+  const reportId = Number(selectedReason?.value) + DB_INDEX_CORRECTION_FACTOR;
+
+  postReport({ postId, reportId });
+  saveReport(postId);
+  closeReport();
+  showConfirm();
+};
+
+export const openReport = (target: HTMLElement) => {
+  renderReportModal(target);
+  showReport();
+};
diff --git a/src/ts/controllers/handlers/textCountHandler.ts b/src/ts/controllers/handlers/textCountHandler.ts
@@ -16,7 +16,6 @@ export const textCountHandler = ({ target }: Event) => {
   textCnt.textContent = `${Math.min(length, 100)}/100`;
 
   submitBtn.disabled = length === 0;
-  submitBtn.classList.toggle("upload__submit-btn--active", length > 0);
 
   if (length > 100) {
     target.value = target.value.substring(0, 100);

diff --git a/src/ts/controllers/handlers/uploadCardHandler.ts b/src/ts/controllers/handlers/uploadCardHandler.ts
@@ -21,7 +21,9 @@ export const waggleTagSelectHandler = (target: HTMLElement) => {
   tagElement.classList.add("selected-tag");
   selectedTagId = tagElement.id;
   const stationId = getStationId();
-  fetchCardList({ stationId, selectedTagId });
+  console.log(stationId, selectedTagId);
+  const tagId = selectedTagId === "0" ? "" : selectedTagId;
+  fetchCardList({ stationId, tagId });
 };
 
 export const tagSelectHandler = (target: HTMLElement) => {

diff --git a/src/ts/controllers/init/initEventListener.ts b/src/ts/controllers/init/initEventListener.ts
@@ -6,10 +6,20 @@ const $ = document.querySelector.bind(document);
 
 const app = $("#app") as HTMLDivElement;
 const modal = $(".modal") as HTMLDialogElement;
+const report = $(".report") as HTMLDialogElement;
+const confirm = $(".confirm") as HTMLDialogElement;
+
+const onChange = () => {
+  const reportButton = report.querySelector(".report__submit") as HTMLButtonElement;
+  reportButton.disabled = !report.querySelector("input[name='report-reason']:checked");
+};
 
 export const initEventListener = () => {
   app.addEventListener("click", onClick);
   modal.addEventListener("input", textCountHandler);
   modal.addEventListener("click", onClick);
+  report.addEventListener("click", onClick);
   modal.addEventListener("submit", onModalSubmit);
+  report.addEventListener("change", onChange);
+  confirm.addEventListener("click", onClick);
 };
diff --git a/src/ts/controllers/init/initReportList.ts b/src/ts/controllers/init/initReportList.ts
@@ -0,0 +1,6 @@
+export const initReportList = () => {
+  if (localStorage.getItem("reportList")) {
+    return;
+  }
+  localStorage.setItem("reportList", JSON.stringify([]));
+};