Merge pull request #135 from keemsebin/feature#134

Feature#134
COW-dev · May 9, 2024 · ab36bc3 · ab36bc3
2 parents 6c77996 + 45fd96e
commit ab36bc3
Show file tree

Hide file tree

Showing 39 changed files with 522 additions and 538 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-slot": "^1.0.2",
-    "@sentry/nextjs": "^7.107.0",
+    "@sentry/nextjs": "^7.109.0",
     "@tanstack/react-query": "^4.29.14",
     "@tanstack/react-query-devtools": "^4.29.14",
     "@toss/hangul": "^1.5.0",

diff --git a/src/apis/index.ts b/src/apis/index.ts
@@ -32,7 +32,7 @@ import {
   FixClubDetailType,
   FixComplete,
   NewFix,
-} from '@/types/fixzone';
+} from '@/types/fix';
 
 import { Notice, NoticeDetail, DeleteNotice } from '@/types/notice';
 import {

diff --git a/src/assets/admin.jpg b/src/assets/admin.jpg
diff --git a/src/assets/leftArrow2.svg b/src/assets/leftArrow2.svg
diff --git a/src/components/common/Dropdown.tsx b/src/components/common/Dropdown.tsx
@@ -1,32 +1,35 @@
-import { useState } from 'react';
+import { Dispatch, SetStateAction, useState } from 'react';
 import Link from 'next/link';
+import useModal from '@/hooks/common/useModal';
+import Modal from './Modal';
+import MemberUpload from '../member/MemberUpload';
 
-export default function Dropdown() {
+type Props = {
+  file: File | null;
+  setFile: Dispatch<SetStateAction<File | null>>;
+};
+
+export default function Dropdown({ file, setFile }: Props) {
   const [open, setOpen] = useState<boolean>(false);
 
   const handleOpen = () => {
     setOpen(!open);
   };
-  function openFixZone() {
-    const windowOptions = 'width=650,height=650,scrollbars,resizable=no';
-    const fixZoneWindow = window.open('fixzone', 'fixzone', windowOptions);
-    if (!fixZoneWindow) {
-      alert('팝업 차단이 활성화되어 있습니다. 팝업 차단을 해제해주세요.');
-    }
-  }
+  const { openModal, visible, closeModal, modalRef } = useModal();
+
+  const URL =
+    'https://ddingdong-file.s3.ap-northeast-2.amazonaws.com/files/excel/동아리원_명단_수정_양식.xlsx';
   return (
     <>
       <button
         id="dropdownHoverButton"
         data-dropdown-toggle="dropdownHover"
         data-dropdown-trigger="hover"
-        className={` md:text-md inline-flex min-w-fit items-center rounded-xl bg-blue-100 px-5 py-2.5 text-center text-sm font-bold text-blue-500 hover:bg-blue-200 focus:outline-none ${
-          open ? 'active' : ''
-        } `}
+        className="md:text-md inline-flex min-w-fit items-center rounded-lg bg-green-100 px-5 py-2.5 text-center text-sm font-bold text-green-500 hover:bg-green-200 focus:outline-none "
         type="button"
         onClick={handleOpen}
       >
-        동아리 관리하기
+        Excel
         <svg
           className="ml-2.5 h-2.5 w-2.5"
           aria-hidden="true"
@@ -46,31 +49,39 @@ export default function Dropdown() {
       {open && (
         <div
           id="dropdownHover"
-          className=" active relative z-20 m-auto min-w-fit divide-y divide-gray-100 rounded-lg bg-blue-200 shadow "
+          className=" relative z-20 m-auto min-w-fit divide-y divide-gray-100 rounded-lg bg-green-200 shadow "
         >
           <ul
-            className=" absolute right-0 z-10 mt-12 w-36 rounded-xl border-[1px] bg-white py-2 text-sm text-gray-700 shadow-lg"
+            className=" absolute -right-18 z-10 mt-10 w-44 rounded-xl border-[1px] bg-white py-2 text-sm text-gray-700 shadow-lg"
             aria-labelledby="dropdownHoverButton"
           >
             <li>
               <Link
-                href="/club/my/score"
-                className="block px-4 py-2 font-semibold hover:bg-blue-100"
+                href={URL}
+                className="block px-4 py-2 font-semibold hover:bg-gray-100"
               >
-                <div>동아리 점수 확인</div>
+                <div>Excel 양식 다운받기</div>
               </Link>
             </li>
             <li>
-              <Link
-                href="/member"
-                className="block px-4 py-2 font-semibold hover:bg-blue-100"
+              <span
+                onClick={openModal}
+                className=" block cursor-pointer px-4 py-2 font-semibold hover:bg-gray-100"
               >
                 동아리원 수정하기
-              </Link>
+              </span>
             </li>
           </ul>
         </div>
       )}
+      <Modal
+        visible={visible}
+        modalRef={modalRef}
+        title={'동아리원 엑셀 업로드'}
+        closeModal={closeModal}
+      >
+        <MemberUpload closeModal={closeModal} file={file} setFile={setFile} />
+      </Modal>
     </>
   );
 }
diff --git a/src/components/common/Heading.tsx b/src/components/common/Heading.tsx
@@ -4,6 +4,6 @@ type HeadingProps = {
 
 export default function Heading({ children }: HeadingProps) {
   return (
-    <h1 className="mt-7 text-3xl font-bold md:mt-10 md:text-4xl">{children}</h1>
+    <h1 className="mt-7 text-2xl font-bold md:mt-10 md:text-4xl">{children}</h1>
   );
 }
diff --git a/src/components/common/UploadMultipleImage.tsx b/src/components/common/UploadMultipleImage.tsx
@@ -32,30 +32,30 @@ export default function UploadMultipleImage({
     setImage([...image]);
   }
   return (
-    <div className="flex w-full justify-center p-6">
+    <div className="flex h-full w-full justify-center p-6">
       {image.length !== 0 ? (
         <>
-          <div className="relative">
+          <div className="relative h-96">
             <div className="flex">
               <Image
                 src={LeftArrow}
-                height={20}
-                width={20}
+                height={25}
+                width={25}
                 alt="left"
                 onClick={() => setPresentIndex(presentIndex - 1)}
                 className={`${presentIndex === 0 && `hidden`}`}
               />
               <Image
                 src={URL.createObjectURL(image[presentIndex])}
-                className="m-auto h-72 overflow-hidden object-scale-down p-3"
+                className=" m-auto h-96 overflow-hidden rounded-lg object-scale-down"
                 alt="이미지"
-                width={1000}
+                width={800}
                 height={200}
               />
               <Image
                 src={RightArrow}
-                height={20}
-                width={20}
+                height={25}
+                width={25}
                 alt="right"
                 onClick={() => setPresentIndex(presentIndex + 1)}
                 className={`${presentIndex === image.length - 1 && `hidden`}`}
@@ -77,9 +77,9 @@ export default function UploadMultipleImage({
       ) : (
         <label
           htmlFor="dropzone-file"
-          className="flex h-64 w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-none border-gray-300 bg-gray-50 hover:bg-gray-100"
+          className=" flex h-full w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-none border-gray-300 bg-gray-50 hover:bg-gray-100"
         >
-          <div className="flex flex-col items-center justify-center pb-6 pt-5 text-gray-400">
+          <div className="flex flex-col items-center justify-center text-gray-400">
             <Image src={Camera} width={30} height={30} alt="upload" />
             <p className="m-2 text-sm  ">Click to ImageUpload</p>
             <p className=" text-xs text-gray-400">

diff --git a/src/components/event/StampDetail.tsx b/src/components/event/StampDetail.tsx
@@ -8,7 +8,6 @@ type Props = {
 };
 
 export default function StampDetail({ collections }: Props) {
-  console.log(collections);
   return (
     <>
       <div className=" mt-2 flex w-full flex-row-reverse flex-wrap md:mt-5 md:hidden">

diff --git a/src/components/fixzone/Clearbutton.tsx → src/components/fix/Clearbutton.tsx b/src/components/fixzone/Clearbutton.tsx → src/components/fix/Clearbutton.tsx
diff --git a/src/components/fixzone/FixAdminDetail.tsx → src/components/fix/FixAdminDetail.tsx b/src/components/fixzone/FixAdminDetail.tsx → src/components/fix/FixAdminDetail.tsx
@@ -2,14 +2,15 @@ import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useCookies } from 'react-cookie';
-import LeftArrow from '@/assets/leftArrow.svg';
+import LeftArrow2 from '@/assets/leftArrow2.svg';
 import RightArrow from '@/assets/rightArrow.svg';
 import { useAdminFixInfo } from '@/hooks/api/fixzone/useAdminFixInfo';
 import { useUpdateComplete } from '@/hooks/api/fixzone/useUpdateComplete';
 import useModal from '@/hooks/common/useModal';
-import { FixAdminDetailType } from '@/types/fixzone';
+import { FixAdminDetailType } from '@/types/fix';
 import { parseImgUrl } from '@/utils/parse';
 import FixItemInfo from './FixItemInfo';
+import Heading from '../common/Heading';
 import Modal from '../common/Modal';
 import ConfirmModal from '../modal/ConfirmModal';
 type Prop = {
@@ -46,38 +47,27 @@ export default function FixAdminDetail({ id }: Prop) {
   }
 
   return (
-    <div className="w-full bg-gray-100">
-      <div className="m-auto max-w-[650px] bg-gray-100 p-10 ">
-        <div className="flex justify-between">
-          <Link href="/fixzone">
-            <Image src={LeftArrow} alt="back" width={25} height={25} />
-          </Link>
-          <div className="text-lg font-bold">동아리방 시설 보수</div>
-          <div></div>
-        </div>
-        <div className="flex justify-end">
-          <button
-            disabled={completed}
-            onClick={openModal}
-            className={`mb-3 mt-7 rounded-xl border border-gray-300 px-4 py-2  text-gray-500  ${
-              !completed
-                ? ` hover:border-green-300 hover:text-green-500`
-                : `border-green-300 text-green-500`
-            } md:mr-0.5`}
-          >
-            {completed ? `처리 완료` : `처리 마치기`}
-          </button>
-        </div>
+    <>
+      <Heading>동아리방 시설보수 확인</Heading>
+      <div className="mt-14 flex items-center">
+        <Link href="/fix">
+          <Image src={LeftArrow2} alt="back" width={25} height={25} />
+        </Link>
+        <span className="ml-2 text-xl font-semibold text-gray-600">
+          {title}
+        </span>
+      </div>
+
+      <div className="mt-3 flex w-full flex-col rounded-xl border border-gray-100 p-6 md:mt-7 md:flex-row">
         {/* 정보 */}
-        <div className="mb-7 rounded-xl bg-white p-5 text-gray-500 shadow-xl">
-          <div className="border-b py-2 text-xl font-bold ">{title}</div>
-          <div className="py-2 pt-4 font-semibold">{content}</div>
+        <div className=" w-full rounded-xl bg-white md:w-1/2 md:p-3">
+          <FixItemInfo club={club} createdAt={createdAt} location={location} />
+          <div className="mt-4 py-2 pt-4">{content}</div>
         </div>
-        <FixItemInfo club={club} createdAt={createdAt} location={location} />
         {/* 내용 */}
-        <div className="relative my-7 flex items-center justify-center">
+        <div className="relative flex w-full items-center justify-center md:w-1/2 md:p-3">
           <Image
-            src={LeftArrow}
+            src={LeftArrow2}
             width={30}
             height={30}
             alt="leftButton"
@@ -94,7 +84,7 @@ export default function FixAdminDetail({ id }: Prop) {
             height={500}
             priority
             alt="fixImage"
-            className="h-[60vh] w-full overflow-hidden object-scale-down "
+            className="overflow-hidden object-scale-down "
           />
           <Image
             src={RightArrow}
@@ -109,19 +99,30 @@ export default function FixAdminDetail({ id }: Prop) {
             }`}
           />
         </div>
-        <Modal
-          visible={visible}
-          modalRef={modalRef}
-          title={'처리하시겠습니까?'}
-          closeModal={closeModal}
+      </div>
+      <div className="flex justify-center">
+        <button
+          disabled={completed}
+          onClick={openModal}
+          className={`mb-3 mt-7 rounded-xl border bg-blue-500 px-10 py-2.5 text-base font-semibold text-white  ${
+            !completed ? `  hover:bg-blue-600` : ` bg-blue-500`
+          } md:mr-0.5`}
         >
-          <ConfirmModal
-            title=""
-            callback={handleCompleted}
-            closeModal={closeModal}
-          />
-        </Modal>
+          {completed ? `처리 완료` : `처리 마치기`}
+        </button>
       </div>
-    </div>
+      <Modal
+        visible={visible}
+        modalRef={modalRef}
+        title={'처리하시겠습니까?'}
+        closeModal={closeModal}
+      >
+        <ConfirmModal
+          title=""
+          callback={handleCompleted}
+          closeModal={closeModal}
+        />
+      </Modal>
+    </>
   );
 }
diff --git a/src/components/fixzone/FixAdminList.tsx → src/components/fix/FixAdminList.tsx b/src/components/fixzone/FixAdminList.tsx → src/components/fix/FixAdminList.tsx
@@ -8,7 +8,7 @@ export default function FixAdminList() {
   const posts = data?.data ?? [];
   return (
     <div>
-      <ul className="mt-14 w-full md:mt-16">
+      <ul className="mt-10 w-full md:mt-14">
         {[...posts].reverse().map((fix, index) => (
           <div key={`fix__admin-${index}`}>
             <FixItem data={fix} />