style: 모임 등록 반응형 및 UI 수정

TripInfoWeb · Sep 3, 2024 · ad03cc4 · ad03cc4
1 parent dd6b78d
commit ad03cc4
Show file tree

Hide file tree

Showing 12 changed files with 137 additions and 81 deletions.
diff --git a/src/components/gathering/editor/GatheringEditor.tsx b/src/components/gathering/editor/GatheringEditor.tsx
@@ -1,4 +1,6 @@
+import Breadcrumbs from "@/components/common/Breadcrumb";
 import GatheringEditorCategoryContainer from "@/containers/gathering/editor/GatheringEditorCategoryContainer";
+import GatheringEditorChattingLinkContainer from "@/containers/gathering/editor/GatheringEditorChattingLinkContainer";
 import GatheringEditorContentContainer from "@/containers/gathering/editor/GatheringEditorContentContainer";
 import GatheringEditorDeadlineContainer from "@/containers/gathering/editor/GatheringEditorDeadlineContainer";
 import GatheringEditorHashTagContainer from "@/containers/gathering/editor/GatheringEditorHashTagContainer";
@@ -7,12 +9,10 @@ import GatheringEditorPeriodContainer from "@/containers/gathering/editor/Gather
 import GatheringEditorPlaceContainer from "@/containers/gathering/editor/GatheringEditorPlaceContainer";
 import GatheringEditorTitleContainer from "@/containers/gathering/editor/GatheringEditorTitleContainer";
 import Image from "next/image";
-import Link from "next/link";
 import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
 import { useFormContext } from "react-hook-form";
 import GatheringEditorTimeContainer from "./GatheringEditorTimeContainer";
-import Breadcrumbs from "@/components/common/Breadcrumb";
 
 interface IGatheringEditorEditProps {
   isEdit: true;
@@ -52,16 +52,21 @@ const GatheringEditor = (props: IGatheringEditorProps) => {
         </p>
       </div>
       <section
-        className={"flex w-full max-w-full flex-wrap gap-y-[2.375rem] gap-x-[3.5rem] pt-[3rem]"}
+        className={
+          "flex w-full max-w-full flex-wrap gap-x-[3.5rem] gap-y-[2.375rem] pt-[3rem]"
+        }
       >
         <GatheringEditorTitleContainer />
-        <GatheringEditorPeriodContainer />
-        <GatheringEditorPlaceContainer />
-        <GatheringEditorTimeContainer />
-        <GatheringEditorDeadlineContainer />
-        <GatheringEditorCategoryContainer />
-        <GatheringEditorParticipantsFilterContainer />
+        <div className="grid w-full gap-y-[2.375rem] gap-x-[1.875rem] max-[576px]:grid-cols-1 min-[575px]:grid-cols-2 min-[960px]:grid-cols-3">
+          <GatheringEditorPeriodContainer />
+          <GatheringEditorPlaceContainer />
+          <GatheringEditorTimeContainer />
+          <GatheringEditorDeadlineContainer />
+          <GatheringEditorCategoryContainer />
+          <GatheringEditorParticipantsFilterContainer />
+        </div>
         <GatheringEditorContentContainer />
+        <GatheringEditorChattingLinkContainer />
         <GatheringEditorHashTagContainer />
         <div className={"flex w-full justify-end"}>
           <button

diff --git a/src/components/gathering/editor/GatheringEditorCategory.tsx b/src/components/gathering/editor/GatheringEditorCategory.tsx
@@ -20,21 +20,25 @@ const GatheringEditorCategory = ({ modalState, categoryList }: IGatheringEditorC
   return (
     <div
       className={
-        "flex items-center gap-x-[1.75rem] max-[360px]:w-full max-[360px]:flex-col max-[360px]:items-start max-[360px]:gap-3"
+        "flex w-full items-center gap-y-[.75rem] max-[400px]:flex-col max-[400px]:items-start"
       }
     >
       <div className="relative w-full">
         <button
           onClick={modalState.openModal}
-          className={`max-[360px]:text-start flex h-[3.25rem] w-[12.5rem] overflow-hidden text-ellipsis whitespace-nowrap rounded-[3rem] px-[1rem] outline outline-[1px] outline-offset-[-1px] max-[360px]:w-full ${
+          className={`flex h-[3.25rem] w-full items-center whitespace-nowrap rounded-[3rem] pl-[1.75rem] outline outline-[1px] outline-offset-[-1px] ${
             formContext.formState.errors.gatheringCategoryId
               ? "outline-red-500"
-              : formContext.getValues("gatheringCategoryId")
-                ? "outline-main"
-                : "outline-[#E3E3E3]"
+              : // : formContext.getValues("gatheringCategoryId")
+                //   ? "outline-main"
+                "outline-[#E3E3E3]"
           }`}
         >
-          <div className={"flex h-full w-full items-center justify-center max-[360px]:justify-start max-[360px]:pl-[.75rem]"}>
+          <div
+            className={
+              "flex h-full w-full items-center justify-start text-lg font-semibold"
+            }
+          >
             {formContext.getValues("gatheringCategoryId") ? (
               categoryList.map((i) => {
                 if (i.id == formContext.getValues("gatheringCategoryId")) {

diff --git a/src/components/gathering/editor/GatheringEditorChattingLink.tsx b/src/components/gathering/editor/GatheringEditorChattingLink.tsx
@@ -0,0 +1,38 @@
+import { useFormContext } from "react-hook-form";
+
+const GatheringEditorChattingLink = () => {
+  const formContext = useFormContext();
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 items-center">
+      <div className={"relative w-[9.5rem] flex-shrink-0"}>
+        <span className={"text-lg font-semibold"}>제목</span>
+      </div>
+      <div className="relative w-full">
+        <input
+          placeholder="참여 인원과 소통을 위해 오픈 채팅 링크를 추가해주세요."
+          maxLength={100}
+          className={`h-[3.25rem] w-full rounded-[3rem] px-[1rem] outline outline-[1px] outline-offset-[-1px] ${
+            formContext.formState.errors.title
+              ? "outline-red-500"
+              // : formContext.getValues("chattingLink")
+              //   ? "outline-main"
+                : "outline-[#E3E3E3]"
+          }`}
+          {...formContext.register("chattingLink")}
+          onChange={(e) => {
+            formContext.setValue("chattingLink", e.target.value);
+            formContext.trigger("chattingLink");
+          }}
+        />
+        {formContext.formState.errors.title && (
+          <span className="absolute bottom-[-16px] left-4 mt-1 text-xs text-red-500">
+            {formContext.formState.errors.title.message as String}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default GatheringEditorChattingLink;
diff --git a/src/components/gathering/editor/GatheringEditorContent.tsx b/src/components/gathering/editor/GatheringEditorContent.tsx
@@ -12,8 +12,8 @@ const GatheringEditorContent = (props: IGatheringEditorContent) => {
           className={`min-h-[17.5rem] w-full resize-none rounded-[1rem] p-6 outline outline-[1px] outline-offset-[-1px] ${
             formContext.formState.errors.content
               ? "outline-red-500"
-              : formContext.getValues("content")
-                ? "outline-main"
+              // : formContext.getValues("content")
+              //   ? "outline-main"
                 : "outline-[#E3E3E3]"
           }`}
           placeholder={

diff --git a/src/components/gathering/editor/GatheringEditorDeadline.tsx b/src/components/gathering/editor/GatheringEditorDeadline.tsx
@@ -14,35 +14,35 @@ const GatheringEditorDeadline = ({ modalState }: IGatheringEditorDeadline) => {
 return (
   <div
     className={
-      "flex items-center gap-x-[1.75rem] max-[360px]:w-full max-[360px]:flex-col max-[360px]:items-start max-[360px]:gap-3"
+      "flex w-full items-center gap-x-[0.625rem] gap-y-[.75rem] max-[400px]:flex-col max-[400px]:items-start"
     }
   >
-    <div className={"relative w-[5.75rem] flex-shrink-0"}>
-      <span className={"w-[5.75rem] text-lg font-semibold"}>모집마감일</span>
+    <div className={"relative w-[2.625rem] flex-shrink-0"}>
+      <span className={"text-lg font-semibold"}>마감</span>
       <span className="absolute top-[-.5rem] text-lg text-main">*</span>
     </div>
     <div className="relative w-full">
       <button
         onClick={modalState.openModal}
-        className={`max-[360px]:text-start h-[3.25rem] w-[10.75rem] rounded-[3rem] px-[1rem] outline outline-[1px] outline-offset-[-1px] max-[360px]:w-full ${
+        className={`flex h-[3.25rem] w-full items-center justify-start rounded-[3rem] pl-[1.75rem] outline outline-[1px] outline-offset-[-1px] ${
           formContext.formState.errors.deadline
             ? "outline-red-500"
-            : formContext.getValues("deadline")
-              ? "outline-main"
-              : "outline-[#E3E3E3]"
+            : // : formContext.getValues("deadline")
+              //   ? "outline-main"
+              "outline-[#E3E3E3]"
         }`}
       >
         {formContext.getValues("deadline") ? (
           format(new Date(formContext.getValues("deadline")), "yyyy-MM-dd")
         ) : (
           <div className="flex justify-center gap-x-[.5rem] max-[360px]:justify-start max-[360px]:pl-[.75rem]">
+            <span> YY.MM.DD </span>
             <Image
               src="/common/calendar-icon.svg"
               alt="calendar-icon"
               width={16}
               height={16}
             />
-            <span> YY.MM.DD </span>
           </div>
         )}
       </button>

diff --git a/src/components/gathering/editor/GatheringEditorHashTag.tsx b/src/components/gathering/editor/GatheringEditorHashTag.tsx
@@ -14,8 +14,8 @@ const GatheringEditorHashTag = ({
 }: IGatheringEditorHashTag) => {
   return (
     <article className={"flex w-full flex-col gap-[2rem]"}>
-      <div className={"flex w-full items-center gap-x-[2rem] max-[360px]:flex-col max-[360px]:items-start max-[360px]:gap-y-3"}>
-        <div className={"relative flex-shrink-0"}>
+      <div className={"flex w-full items-center max-[360px]:flex-col max-[360px]:items-start max-[360px]:gap-y-3"}>
+        <div className={"relative flex-shrink-0 w-[9.5rem]"}>
           <span className={"w-[3.5rem] text-lg font-semibold"}>해시태그</span>
         </div>
         <div className="relative w-full">

diff --git a/src/components/gathering/editor/GatheringEditorParticipantsFilter.tsx b/src/components/gathering/editor/GatheringEditorParticipantsFilter.tsx
@@ -13,41 +13,45 @@ const GatheringEditorParticipantsFilter = ({
   const formContext = useFormContext();
 
   return (
-    <div className={"flex items-center gap-x-[1.75rem] max-[360px]:w-full"}>
+    <div className={"flex w-full items-center"}>
       <div className="relative w-full">
         <button
           onClick={modalState.openModal}
-          className={`flex h-[3.25rem] w-[15.5rem] overflow-hidden text-ellipsis whitespace-nowrap rounded-[3rem] px-[1rem] outline outline-[1px] outline-offset-[-1px] max-[360px]:w-full ${
+          className={`flex h-[3.25rem] w-full items-center overflow-hidden text-ellipsis whitespace-nowrap rounded-[3rem] pl-[1.75rem] outline outline-[1px] outline-offset-[-1px] ${
             formContext.formState.errors.allowedSex
               ? "outline-red-500"
-              : formContext.getValues("allowedSex")
-                ? "outline-main"
-                : "outline-[#E3E3E3]"
+              : // : formContext.getValues("allowedSex")
+                //   ? "outline-main"
+                "outline-[#E3E3E3]"
           }`}
         >
           {formContext.getValues("allowedSex") ? (
-            <div className="flex h-full w-full items-center justify-center">
-              <div className="rounded-full py-1 pr-1 font-semibold text-black">
-                {"참여자-"}
-              </div>
-              <div className="rounded-full py-1 font-semibold text-black">
-                {formContext.getValues("personCount")}명,
-              </div>
-
-              <div className="flex items-center rounded-full py-1 font-semibold text-black">
-                {new Date().getFullYear() - formContext.getValues("startAge")}세
-                <span>~</span>
-                {new Date().getFullYear() - formContext.getValues("endAge")}세,
+            <div className="flex h-full w-full items-center justify-center max-[612px]:flex-col max-[612px]:leading-5">
+              <div className={"flex"}>
+                <div className="rounded-full py-1 pr-1 font-semibold text-black">
+                  {"참여자-"}
+                </div>
+                <div className="rounded-full py-1 font-semibold text-black">
+                  {formContext.getValues("personCount")}명,
+                </div>
               </div>
+              <div className={"flex"}>
+                <div className="flex items-center rounded-full py-1 font-semibold text-black">
+                  {new Date().getFullYear() - formContext.getValues("startAge")}
+                  세<span>~</span>
+                  {new Date().getFullYear() - formContext.getValues("endAge")}
+                  세,
+                </div>
 
-              <div className="rounded-full py-1 font-semibold text-black">
-                {SETTING_MODAL_SEX[formContext.getValues("allowedSex")]}
+                <div className="rounded-full py-1 font-semibold text-black">
+                  {SETTING_MODAL_SEX[formContext.getValues("allowedSex")]}
+                </div>
               </div>
             </div>
           ) : (
             <div
               className={
-                "relative flex h-full w-full items-center justify-center max-[360px]:justify-start max-[360px]:pl-[.75rem]"
+                "relative flex h-full w-full items-center justify-start"
               }
             >
               <div className={"relative text-lg font-semibold"}>

diff --git a/src/components/gathering/editor/GatheringEditorPeriod.tsx b/src/components/gathering/editor/GatheringEditorPeriod.tsx
@@ -14,49 +14,49 @@ const GatheringEditorPeriod = ({ modalState }: IGatheringEditorPeriod) => {
   return (
     <div
       className={
-        "flex items-center gap-x-[1.75rem] max-[360px]:w-full max-[360px]:flex-col max-[360px]:items-start max-[360px]:gap-3"
+        "flex w-full items-center gap-x-[0.625rem] gap-y-[.75rem] max-[400px]:flex-col max-[400px]:items-start"
       }
     >
       <div className={"relative w-[2.625rem] flex-shrink-0"}>
-        <span className={"w-[3.5rem] text-lg font-semibold"}>날짜</span>
+        <span className={"text-lg font-semibold"}>날짜</span>
         <span className="absolute top-[-.5rem] text-lg text-main">*</span>
       </div>
       <div className="relative w-full">
         <button
           onClick={modalState.openModal}
-          className={`h-[3.25rem] w-[13.75rem] rounded-[3rem] px-[1rem] outline outline-[1px] outline-offset-[-1px] max-[360px]:w-full ${
+          className={`flex h-[3.25rem] w-full items-center justify-start rounded-[3rem] pl-[1.75rem] outline outline-[1px] outline-offset-[-1px] ${
             formContext.formState.errors.scheduleStartDate
               ? "outline-red-500"
-              : formContext.getValues("scheduleStartDate")
-                ? "outline-main"
-                : "outline-[#E3E3E3]"
+              : // : formContext.getValues("scheduleStartDate")
+                //   ? "outline-main"
+                "outline-[#E3E3E3]"
           }`}
         >
           {formContext.getValues("scheduleStartDate") ? (
-            <div>
+            <div className="flex w-full gap-[.25rem] max-[612px]:flex-col max-[612px]:items-start max-[612px]:leading-5">
               <span>
                 {format(
                   new Date(formContext.getValues("scheduleStartDate")),
-                  "yyyy-MM-dd",
+                  "yy.MM.dd",
                 )}
               </span>
-              <span>{" ~ "}</span>
+              <span className={"max-[612px]:hidden"}>{" ~ "}</span>
               <span>
                 {format(
                   new Date(formContext.getValues("scheduleEndDate")),
-                  "yyyy-MM-dd",
+                  "yy.MM.dd",
                 )}
               </span>
             </div>
           ) : (
-            <div className="flex justify-center gap-x-[.5rem] max-[360px]:justify-start max-[360px]:pl-3">
+            <div className="flex justify-start gap-x-[.5rem] max-[360px]:justify-start max-[360px]:pl-3">
+              <span> YY.MM.DD </span>
               <Image
                 src="/common/calendar-icon.svg"
                 alt="calendar-icon"
                 width={16}
                 height={16}
               />
-              <span> YY.MM.DD </span>
             </div>
           )}
         </button>

diff --git a/src/components/gathering/editor/GatheringEditorPlace.tsx b/src/components/gathering/editor/GatheringEditorPlace.tsx
@@ -11,22 +11,22 @@ const GatheringEditorPlace = ({modalState}: IGatheringEditorPlace) => {
   return (
     <div
       className={
-        "flex items-center gap-x-[1.75rem] max-[360px]:w-full max-[360px]:flex-col max-[360px]:items-start max-[360px]:gap-3"
+        "flex w-full items-center gap-x-[0.625rem] gap-y-[.75rem] max-[400px]:flex-col max-[400px]:items-start"
       }
     >
       <div className={"relative w-[2.625rem] flex-shrink-0"}>
-        <span className={"w-[3.5rem] text-lg font-semibold"}>장소</span>
+        <span className={"text-lg font-semibold"}> 장소 </span>
         <span className="absolute top-[-.5rem] text-lg text-main">*</span>
       </div>
       <div className="relative w-full">
         <button
           onClick={modalState.openModal}
-          className={`h-[3.25rem] w-[13.75rem] overflow-hidden text-ellipsis whitespace-nowrap rounded-[3rem] px-[1rem] outline outline-[1px] outline-offset-[-1px] max-[360px]:w-full max-[360px]:text-start  max-[360px]:pl-7 ${
+          className={`flex h-[3.25rem] w-full items-center justify-start overflow-hidden text-ellipsis whitespace-nowrap rounded-[3rem] pl-[1.75rem] outline outline-[1px] outline-offset-[-1px] ${
             formContext.formState.errors.placeName
               ? "outline-red-500"
-              : formContext.getValues("placeName")
-                ? "outline-main"
-                : "outline-[#E3E3E3]"
+              : // : formContext.getValues("placeName")
+                //   ? "outline-main"
+                "outline-[#E3E3E3]"
           }`}
         >
           {formContext.getValues("placeName") || "장소명을 입력하세요."}

diff --git a/src/components/gathering/editor/GatheringEditorTime.tsx b/src/components/gathering/editor/GatheringEditorTime.tsx
@@ -11,24 +11,20 @@ const GatheringEditorTime = ({modalState}: IGatheringEditorTime) => {
   const formContext = useFormContext();
 
   return (
-    <div
-      className={
-        "flex items-center gap-x-[1.75rem] max-[360px]:w-full max-[360px]:flex-col max-[360px]:items-start max-[360px]:gap-3"
-      }
-    >
+    <div className={"flex w-full items-center gap-x-[0.625rem] gap-y-[.75rem] max-[400px]:flex-col max-[400px]:items-start"}>
       <div className={"relative w-[2.625rem] flex-shrink-0"}>
-        <span className={"w-[3.5rem] text-lg font-semibold"}> 시간 </span>
+        <span className={"text-lg font-semibold"}>시간</span>
         <span className="absolute top-[-.5rem] text-lg text-main">*</span>
       </div>
       <div className="relative w-full">
         <button
           onClick={modalState.openModal}
           disabled={!formContext.getValues("scheduleStartDate")}
-          className={`${formContext.getValues("scheduleStartDate") || "cursor-not-allowed bg-gray-200"} h-[3.25rem] w-[13.75rem] rounded-[3rem] px-[1rem] outline outline-[1px] outline-offset-[-1px] max-[360px]:w-full max-[360px]:text-start max-[360px]:pl-7 ${
+          className={`${formContext.getValues("scheduleStartDate") || "cursor-not-allowed bg-gray-100"} h-[3.25rem] pl-[1.75rem] rounded-[3rem] outline outline-[1px] outline-offset-[-1px] w-full flex justify-start items-center ${
             formContext.formState.errors.scheduleStartDate
               ? "outline-red-500"
-              : formContext.getValues("scheduleStartDate")
-                ? "outline-main"
+              // : formContext.getValues("scheduleStartDate")
+              //   ? "outline-main"
                 : "outline-[#E3E3E3]"
           }`}
         >