Merge pull request #293 from TripInfoWeb/dev_gathering

Dev gathering
TripInfoWeb · Sep 12, 2024 · a85350d · a85350d
2 parents 82cf191 + c08a068
commit a85350d
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 91 deletions.
diff --git a/src/app/gathering/page.tsx b/src/app/gathering/page.tsx
@@ -35,14 +35,18 @@ export default async function Page({
   const gatheringCategoryList = await getData();
 
   return (
-    <div className="flex min-h-[calc(100vh-25rem)] pb-[2.5rem] w-full flex-col items-center">
-      <Banner
-        content={[`<b>직접 내 모임</b>을`, "<b>만들어</b>보세요!"]}
-        buttonText="모임 등록하기"
-        category={"모임"}
-      />
-      <div className="mt-[26.25rem] max-[744px]:mt-[31rem]" />
-      <TopList title="모임" />
+    <div className="flex min-h-[calc(100vh-25rem)] pb-[2.5rem] w-full flex-col">
+      <div className="w-full flex flex-col items-center">
+        <Banner
+          content={[`<b>직접 내 모임</b>을`, "<b>만들어</b>보세요!"]}
+          buttonText="모임 등록하기"
+          category={"모임"}
+          />
+          <div className="mt-[26.25rem] max-[744px]:mt-[31rem]" />
+      </div>
+      <div className="w-full flex flex-col items-center">
+        <TopList title="모임" />
+      </div>
       <GatheringListContainer
         gatheringCategoryList={gatheringCategoryList}
       />

diff --git a/src/components/common/GatheringItem.tsx b/src/components/common/GatheringItem.tsx
@@ -37,11 +37,13 @@ const status: { [key: string]: string } = {
 // todo
 const GatheringItem = ({ data }: IGatheringItem) => {
   return (
+    // w-[307] , h-[315], p-5, 
     <Link
       href={`/gathering/${data.gatheringId}`}
-      className={`${format(new Date(data.deadline), "yyyyMMdd") < format(new Date(), "yyyyMMdd") ? "bg-[#eaeaea]" : ""} flex w-full ${data.isFinish ? "text-gray2" : "text-black"} h-auto flex-col gap-[1.25rem] rounded-2xl border-0 p-6 outline outline-2 outline-offset-[-2px] outline-gray3 hover:bg-[#F2FAF7] hover:outline-main max-[744px]:max-w-[27.5rem] min-[744px]:min-w-[312px]`}
+      className={`${format(new Date(data.deadline), "yyyyMMdd") < format(new Date(), "yyyyMMdd") ? "bg-[#eaeaea]" : ""} flex w-full ${data.isFinish ? "text-gray2" : "text-black"} h-full max-h-[19.6875rem] max-[744px]:max-w-[28.75rem] flex-col gap-[1.25rem] rounded-2xl border-0 p-5 outline outline-2 outline-offset-[-2px] outline-gray3 hover:bg-[#F2FAF7] hover:outline-main`}
     >
       <div className="flex flex-col">
+      {/* 상태와 북마크 */}
         <div className="flex flex-row items-center justify-between">
           <p
             className={`flex h-[2rem] w-fit items-center rounded-full px-4 py-[0.375rem] text-xs font-semibold outline outline-[1px] outline-offset-[-1px] ${data.isFinish ? "bg-gray2 text-white" : data.gatheringStatus ? statusStyle[data.gatheringStatus] : categoryStyle[data.gatheringCategoryName]}`}
@@ -57,6 +59,7 @@ const GatheringItem = ({ data }: IGatheringItem) => {
             postId={data.gatheringId}
           />
         </div>
+        {/* 제목, 유저 닉네임 */}
         <p className="overflow-hidden text-ellipsis whitespace-nowrap pb-1 pt-6 text-lg font-bold hover:text-main">
           {data.title}
         </p>
@@ -66,11 +69,11 @@ const GatheringItem = ({ data }: IGatheringItem) => {
       </div>
       {/* 마감일 포함 영역 */}
       <div className="flex w-full flex-col gap-[0.625rem]">
-        {/* 4개 영역 */}
+        {/* 4개 영역(기간, 장소, 시간, 인원) */}
         <div className="flex flex-col gap-[0.625rem]">
           <div
             className={
-              "gap-[0.625rem] text-sm font-semibold max-[432px]:flex max-[432px]:flex-col min-[432px]:grid min-[432px]:grid-cols-[auto_7rem] min-[744px]:flex min-[744px]:grid-cols-1 min-[744px]:flex-col-reverse min-[1024px]:grid min-[1024px]:grid-cols-2"
+              "gap-[0.625rem] text-sm font-semibold max-[432px]:flex max-[432px]:flex-col min-[432px]:grid min-[432px]:grid-cols-[auto_7rem] min-[744px]:flex min-[744px]:grid-cols-1 min-[744px]:flex-col-reverse"
             }
           >
             <article className="flex flex-row items-center gap-2">
@@ -106,7 +109,7 @@ const GatheringItem = ({ data }: IGatheringItem) => {
           </div>
           <div
             className={
-              "gap-[0.625rem] text-sm font-semibold max-[432px]:flex max-[432px]:flex-col-reverse min-[432px]:grid min-[432px]:grid-cols-[auto_7rem] min-[744px]:flex min-[744px]:grid-cols-1 min-[744px]:flex-col-reverse min-[1024px]:grid min-[1024px]:grid-cols-2"
+              "gap-[0.625rem] text-sm font-semibold max-[432px]:flex max-[432px]:flex-col-reverse min-[432px]:grid min-[432px]:grid-cols-[auto_7rem] min-[744px]:flex min-[744px]:grid-cols-1 min-[744px]:flex-col-reverse"
             }
           >
             <article className="flex h-[1.25rem] w-full flex-row items-center gap-2">
@@ -162,7 +165,8 @@ const GatheringItem = ({ data }: IGatheringItem) => {
             </article>
           </div>
         </div>
-        <div className="flex flex-row items-center justify-between">
+        {/* 마감일, 좋아요, 조회수 */}
+        <div className="flex flex-row items-center justify-between pt-[0.4375rem]">
           <div className="flex flex-row items-center gap-1">
             <Image
               src={`${data.isFinish ? "/pin-gray-icon.svg" : "/pin-icon.svg"}`}
@@ -173,7 +177,7 @@ const GatheringItem = ({ data }: IGatheringItem) => {
 
             <p className="text-sm">
               마감일:
-              {format(new Date(data.deadline), "yy-MM-dd(EE)", {
+              {format(new Date(data.deadline), "yy.MM.dd(EE)", {
                 locale: ko,
               })}
             </p>

diff --git a/src/components/common/modal/Modal.tsx b/src/components/common/modal/Modal.tsx
@@ -14,7 +14,7 @@ interface ModalProps extends React.PropsWithChildren {
 
 export const Modal = ({ isOpen, children, onClose, isHeaderBar, headerBarStyle = "bg-white" }: ModalProps) => {
   const [documentBody, setDocumentBody] = useState<HTMLElement | null>(null);
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLButtonElement>(null);
   let flag = isOpen;
   usePreventBodyScroll(isOpen);
 
@@ -62,10 +62,15 @@ export const Modal = ({ isOpen, children, onClose, isHeaderBar, headerBarStyle =
       className="fixed inset-0 flex h-full w-full items-center justify-center"
       style={{ zIndex: "100" }}
     >
-      <div className="absolute h-full w-full bg-black/30 cursor-pointer"></div>
-      <div
+      <div className="absolute h-full w-full cursor-pointer bg-black/30"></div>
+      <button
         ref={ref}
-        className="relative flex flex-col items-center justify-center"
+        className="-z-1 relative flex h-[calc(100vh-1rem)] flex-col items-center justify-center "
+        onClick={(e) => {
+          if (e.target == ref.current) {
+            onClose();
+          }
+        }}
       >
         {isHeaderBar && (
           <div className={`flex h-[3rem] w-full justify-end ${headerBarStyle}`}>
@@ -83,7 +88,7 @@ export const Modal = ({ isOpen, children, onClose, isHeaderBar, headerBarStyle =
           </div>
         )}
         {children}
-      </div>
+      </button>
     </div>,
     document.getElementById("modal-root") as HTMLElement,
   );

diff --git a/src/components/gathering/createUpdate/editor/modal/GatheringCategoryModal.tsx b/src/components/gathering/createUpdate/editor/modal/GatheringCategoryModal.tsx
@@ -28,7 +28,7 @@ const GatheringCategoryModal = (props: IGatheringCategoryModalProps) => {
   return (
     <div
       className={
-        "scrollbar-hide relative h-full max-h-[18rem] w-[calc(100vw-1rem)] max-w-[40rem] overflow-y-scroll rounded-2xl bg-white p-[1rem]"
+        "flex flex-col relative h-auto w-[calc(100vw-2rem)] max-w-[40rem] overflow-y-scroll rounded-2xl bg-white p-[2.75rem] scrollbar-hide"
       }
     >
       <button
@@ -42,26 +42,26 @@ const GatheringCategoryModal = (props: IGatheringCategoryModalProps) => {
           height={20}
         />
       </button>
-      <div className={"flex flex-col gap-y-[1rem]"}>
-        <p className={"h-[2rem] text-lg font-bold text-black mt-[2rem]"}>카테고리 선택</p>
-        <div className={"flex flex-wrap gap-x-[1rem] gap-y-[.5rem]"}>
+      <div className={"flex flex-col gap-y-1"}>
+        <h3 className="text-lg font-medium text-black text-start">카테고리 선택</h3>
+        <div className={"flex flex-wrap gap-x-2 gap-y-[.5rem]"}>
           {props.categoryList.map((i) => (
             <button
               key={i.id}
               onClick={() => {
                 setMainCategoryId(i.id);
               }}
-              className={`${mainCategoryId == i.id ? "bg-main text-white" : "text-gray1"} flex h-[2.25rem] items-center rounded-[4rem] px-[1rem] py-[.5rem] outline outline-[1px] outline-offset-[-1px] outline-[#E9EBED]`}
+              className={`${mainCategoryId == i.id ? "bg-main text-white outline-none" : "text-gray1 outline outline-[1px] outline-offset-[-1px] outline-[#E9EBED]"} flex h-[2.25rem] items-center rounded-[4rem] px-3 py-1 `}
             >
               {i.name}
             </button>
           ))}
         </div>
       </div>
-      <div className={"flex w-full justify-center gap-[1rem] pt-[4rem]"}>
+      <div className={"pt-8 flex w-full justify-center"}>
         <button
           className={
-            "h-[3rem] max-w-[18.625rem] w-full rounded-[4rem] bg-main px-[1rem] py-[.5rem] text-white disabled:bg-gray1"
+            "h-[3rem] w-full max-w-[18.625rem] rounded-[4rem] bg-main px-[1rem] py-[.5rem] text-white disabled:bg-gray1"
           }
           onClick={() => submitHandler()}
           // disabled={subCategoryId == 0 && true}

diff --git a/src/components/gathering/createUpdate/editor/modal/GatheringTimeModal.tsx b/src/components/gathering/createUpdate/editor/modal/GatheringTimeModal.tsx
@@ -47,13 +47,18 @@ const GatheringTimeModal = (props: IGatheringTimeModalProps) => {
   };
 
   return (
+        <div
+      className={
+        "relative h-full max-h-[22rem] w-[calc(100vw-1rem)] overflow-y-scroll rounded-2xl bg-white p-[2.75rem] scrollbar-hide max-w-[30rem]"
+      }
+    >
     <div
       className={
-        "scrollbar-hide relative h-full max-h-[21.75rem] max-[440px]:max-h-[24rem] w-[calc(100vw-1rem)] max-w-[30rem] overflow-y-scroll rounded-2xl bg-white p-[1rem]"
+        "flex min-h-full flex-col justify-start items-start bg-white"
       }
     >
       <button
-        className="absolute right-[1rem] top-[1.5rem]"
+        className="absolute right-[1.5rem] top-[1.5rem]"
         onClick={() => props.closeModal()}
       >
         <Image
@@ -63,84 +68,106 @@ const GatheringTimeModal = (props: IGatheringTimeModalProps) => {
           height={20}
         />
       </button>
-      <h2 className={"h-[2rem] text-2xl font-bold text-black mt-[2rem]"}> 시간 선택 </h2>
-      <div className={"flex flex-col items-center gap-[1.875rem] pt-[3rem]"}>
+      <h2 className={"w-full text-2xl font-bold text-black text-start"}> 시간 선택 </h2>
+      <div className={"flex w-full flex-col gap-x-[1.25rem]"}>
         <div
           className={
-            "flex w-full justify-center gap-[1.25rem] max-[440px]:grid max-[440px]:grid-cols-2"
+            "flex w-full justify-center gap-[1.25rem] max-[440px]:flex-col max-[440px]:p-[2.875rem_0px_1.6875rem_0px] py-[4.1875rem]"
           }
         >
           {/* 날짜 */}
-          <div
+          <article
             className={
-              "w-[9.875rem] rounded-[4rem] px-[1.5rem] py-[.5rem] outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3] max-[440px]:col-span-2 max-[440px]:w-full max-[440px]:text-center"
+              "w-[9.75rem] rounded-[4rem] px-[1.5rem] py-[.5rem] outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3] max-[440px]:col-span-2"
             }
           >
-            {format(calendarDate[0].startDate, "yyyy-MM-dd(EE)", {
+            {format(calendarDate[0].startDate, "yyyy.MM.dd(EE)", {
               locale: ko,
             })}
-          </div>
-          {/* 시 */}
-          <div className="flex w-[6.375rem] gap-2 max-[440px]:w-full">
-            <select
-              name="hour"
-              className={
-                "w-[5rem] cursor-pointer rounded-[4rem] px-[1rem] py-[.5rem] outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3] max-[440px]:w-full max-[440px]:text-center"
-              }
-              onChange={(e) =>
-                setStartDateTime((prev) => ({
-                  ...prev,
-                  hour: +e.target.value,
-                }))
-              }
-              value={startDateTime.hour}
-            >
-              {Array.from({ length: 24 }, (_, i) => i).map((i) => (
-                <option value={i} key={i} defaultChecked={i == 12}>
-                  {i}
-                </option>
-              ))}
-            </select>
-            <div className={"flex items-center"}> 시 </div>
-          </div>
-          {/* 분 */}
-          <div className="flex w-[6.375rem] gap-2 max-[440px]:w-full">
-            <select
-              name="minute"
-              className={
-                "w-[5rem] cursor-pointer rounded-[4rem] px-[1rem] py-[.5rem] outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3] max-[440px]:w-full max-[440px]:text-center"
-              }
-              onChange={(e) =>
-                setStartDateTime((prev) => ({
-                  ...prev,
-                  minute: +e.target.value,
-                }))
-              }
-              value={startDateTime.minute}
-            >
-              {Array.from([...Array(6).fill(0)], (i, index) => index * 10).map(
-                (i) => (
+          </article>
+          <div className="flex w-full gap-[1.25rem]">
+            {/* 시 */}
+            <article className="relative flex h-[2.75rem] w-[6.375rem] gap-[6px]">
+              <select
+                name="hour"
+                className={
+                  "w-[5.125rem] cursor-pointer appearance-none rounded-[4rem] pl-[1.3125rem] outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]"
+                }
+                onChange={(e) =>
+                  setStartDateTime((prev) => ({
+                    ...prev,
+                    hour: +e.target.value,
+                  }))
+                }
+                value={startDateTime.hour}
+              >
+                {Array.from({ length: 24 }, (_, i) => i).map((i) => (
+                  <option value={i} key={i} defaultChecked={i == 12}>
+                    {i}
+                  </option>
+                ))}
+              </select>
+              <div className="absolute left-[3.25rem] top-1/2 -translate-y-1/2">
+                <Image
+                  src="/common/dropdown-down-arrow.svg"
+                  alt="location-icon"
+                  width={8}
+                  height={4}
+                />
+              </div>
+              <div className={"flex items-center"}> 시 </div>
+            </article>
+            {/* 분 */}
+            <article className="relative flex h-[2.75rem] w-[6.375rem] gap-[6px]">
+              <select
+                name="minute"
+                className={
+                  "w-[5.125rem] cursor-pointer appearance-none rounded-[4rem] pl-[1.3125rem] outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]"
+                }
+                onChange={(e) =>
+                  setStartDateTime((prev) => ({
+                    ...prev,
+                    minute: +e.target.value,
+                  }))
+                }
+                value={startDateTime.minute}
+              >
+                {Array.from(
+                  [...Array(6).fill(0)],
+                  (i, index) => index * 10,
+                ).map((i) => (
                   <option value={i} selected={i == 0} key={i} defaultValue={0}>
                     {i}
                   </option>
-                ),
-              )}
-            </select>
-            <div className={"flex items-center"}> 분 </div>
+                ))}
+              </select>
+              <div className="absolute left-[3.25rem] top-1/2 -translate-y-1/2">
+                <Image
+                  src="/common/dropdown-down-arrow.svg"
+                  alt="location-icon"
+                  width={8}
+                  height={4}
+                />
+              </div>
+              <div className={"flex items-center"}> 분 </div>
+            </article>
           </div>
         </div>
-        <div className={"flex w-full justify-center gap-[1rem] pt-[3rem]"}>
-          <button
-            className={
-              "h-[3.375rem] w-full max-w-[18.75rem] rounded-[1.75rem] bg-main px-[1rem] py-[.5rem] text-white disabled:bg-gray1"
-            }
-            onClick={() => submitHandler()}
-          >
-            <span className={"pl-[.5rem] text-[1.1rem]"}> 적용하기 </span>
-          </button>
         </div>
-      </div>
+        <div className={"flex justify-center w-full"}>
+      <button
+        className={
+          "h-[3.375rem] w-full max-w-[18.625rem] flex-shrink-0 rounded-[1.75rem] bg-main text-white disabled:bg-gray1"
+        }
+        onClick={() => submitHandler()}
+        >
+        적용하기
+      </button>
+        </div>
+    </div>
     </div>
   );
 };
 export default GatheringTimeModal;
+
+// flex 요소 때문에 줄어들고 있음
diff --git a/src/components/gathering/read/GatheringCardList.tsx b/src/components/gathering/read/GatheringCardList.tsx
@@ -19,7 +19,7 @@ const GatheringCardList = ({
       <div> 찾는 내용이 없습니다. </div>
       </div>
     ) : 
-    <div className="mt-6 grid h-auto w-full justify-items-center gap-x-3 gap-y-3 min-[745px]:grid-cols-2">
+    <div className="mt-6 grid h-auto w-full justify-items-center gap-5 min-[745px]:grid-cols-2 min-[1024px]:grid-cols-3">
           {data?.map((i, index) => <GatheringItem key={i.gatheringId} data={i} />)}
         </div>
       }

diff --git a/src/components/gathering/read/GatheringList.tsx b/src/components/gathering/read/GatheringList.tsx
@@ -17,7 +17,7 @@ interface IGatheringList {
 const GatheringList = (props: IGatheringList) => {
 
   return (
-    <div className="w-full flex flex-col pt-[5.5rem] min-w-[22.5rem]">
+    <div className="w-full flex flex-col pt-[5.5rem] min-w-[19.1875rem]">
       <article className="flex flex-col gap-y-4 min-[960px]:flex-row-reverse min-[960px]:gap-x-6">
         <div className="w-full flex flex-row gap-x-2 max-[744px]:flex-col justify-between gap-y-5 min-[960px]:gap-x-6 ">
           <GatheringSearchContainer />