style: 모임 생성 및 수정 반응형 및 UI 수정

TripInfoWeb · Aug 29, 2024 · 7f21485 · 7f21485
1 parent fa9cd38
commit 7f21485
Show file tree

Hide file tree

Showing 10 changed files with 27 additions and 19 deletions.
diff --git a/src/components/gathering/editor/GatheringEditor.tsx b/src/components/gathering/editor/GatheringEditor.tsx
@@ -78,7 +78,7 @@ const GatheringEditor = (props: IGatheringEditorProps) => {
         <GatheringEditorHashTagContainer />
         <div className={"flex w-full justify-end"}>
           <button
-            className={`h-[3.825rem] max-w-[10.825rem] rounded-[2rem] px-[2rem] py-[.5rem] text-white disabled:bg-gray1 ${!formContext.formState.isValid ? "bg-gray1" : "bg-main"}`}
+            className={`h-[2.625rem] w-[9.5rem] rounded-[2rem] px-[1rem] py-[.5rem] text-white disabled:bg-gray1 ${!formContext.formState.isValid ? "bg-gray1" : "bg-main"}`}
             onClick={() => {
               if (!formContext.formState.isValid) {
                 formContext.trigger();

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

diff --git a/src/components/gathering/editor/GatheringEditorContent.tsx b/src/components/gathering/editor/GatheringEditorContent.tsx
@@ -9,7 +9,7 @@ const GatheringEditorContent = (props: IGatheringEditorContent) => {
     <article className={"flex w-full flex-col gap-[2rem]"}>
       <div className="relative w-full">
         <textarea
-          className={`min-h-[17.5rem] w-full resize-none rounded-[1rem] p-[1.5rem] outline outline-[1px] outline-offset-[-1px] ${
+          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")

diff --git a/src/components/gathering/editor/GatheringEditorDeadline.tsx b/src/components/gathering/editor/GatheringEditorDeadline.tsx
@@ -12,15 +12,19 @@ const GatheringEditorDeadline = ({ modalState }: IGatheringEditorDeadline) => {
   const formContext = useFormContext();
 
 return (
-  <div className={"flex items-center gap-x-[1.75rem]"}>
+  <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={"relative w-[5.75rem] flex-shrink-0"}>
       <span className={"w-[5.75rem] 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-[10.75rem] rounded-[3rem] px-[1rem] outline outline-[1px] outline-offset-[-1px] ${
+        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 ${
           formContext.formState.errors.deadline
             ? "outline-red-500"
             : formContext.getValues("deadline")
@@ -31,7 +35,7 @@ return (
         {formContext.getValues("deadline") ? (
           format(new Date(formContext.getValues("deadline")), "yyyy-MM-dd")
         ) : (
-          <div className="flex justify-center gap-x-[.5rem]">
+          <div className="flex justify-center gap-x-[.5rem] max-[360px]:justify-start max-[360px]:pl-[.75rem]">
             <Image
               src="/common/calendar-icon.svg"
               alt="calendar-icon"

diff --git a/src/components/gathering/editor/GatheringEditorHashTag.tsx b/src/components/gathering/editor/GatheringEditorHashTag.tsx
@@ -14,7 +14,7 @@ const GatheringEditorHashTag = ({
 }: IGatheringEditorHashTag) => {
   return (
     <article className={"flex w-full flex-col gap-[2rem]"}>
-      <div className={"flex w-full items-center gap-x-[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"}>
           <span className={"w-[3.5rem] text-lg font-semibold"}>해시태그</span>
         </div>

diff --git a/src/components/gathering/editor/GatheringEditorParticipantsFilter.tsx b/src/components/gathering/editor/GatheringEditorParticipantsFilter.tsx
@@ -13,11 +13,11 @@ const GatheringEditorParticipantsFilter = ({
   const formContext = useFormContext();
 
   return (
-    <div className={"flex items-center gap-x-[1.75rem]"}>
+    <div className={"flex items-center gap-x-[1.75rem] max-[360px]:w-full"}>
       <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] ${
+          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 ${
             formContext.formState.errors.allowedSex
               ? "outline-red-500"
               : formContext.getValues("allowedSex")
@@ -47,7 +47,7 @@ const GatheringEditorParticipantsFilter = ({
           ) : (
             <div
               className={
-                "relative flex h-full w-full items-center justify-center"
+                "relative flex h-full w-full items-center justify-center max-[360px]:justify-start max-[360px]:pl-[.75rem]"
               }
             >
               <div className={"relative text-lg font-semibold"}>

diff --git a/src/components/gathering/editor/GatheringEditorPeriod.tsx b/src/components/gathering/editor/GatheringEditorPeriod.tsx
@@ -24,7 +24,7 @@ const GatheringEditorPeriod = ({ modalState }: IGatheringEditorPeriod) => {
       <div className="relative w-full">
         <button
           onClick={modalState.openModal}
-          className={`max-[360px]:w-full h-[3.25rem] w-[13.75rem] rounded-[3rem] px-[1rem] outline outline-[1px] outline-offset-[-1px] ${
+          className={`h-[3.25rem] w-[13.75rem] rounded-[3rem] px-[1rem] outline outline-[1px] outline-offset-[-1px] max-[360px]:w-full ${
             formContext.formState.errors.scheduleStartDate
               ? "outline-red-500"
               : formContext.getValues("scheduleStartDate")
@@ -49,14 +49,14 @@ const GatheringEditorPeriod = ({ modalState }: IGatheringEditorPeriod) => {
               </span>
             </div>
           ) : (
-            <div className="flex justify-center gap-x-[.5rem]">
-              <span> YYYY-MM-DD </span>
+            <div className="flex justify-center gap-x-[.5rem] max-[360px]:justify-start max-[360px]:pl-3">
               <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
@@ -18,10 +18,10 @@ const GatheringEditorPlace = ({modalState}: IGatheringEditorPlace) => {
         <span className={"w-[3.5rem] text-lg font-semibold"}>장소</span>
         <span className="absolute top-[-.5rem] text-lg text-main">*</span>
       </div>
-      <div className="relative w-full ">
+      <div className="relative w-full">
         <button
           onClick={modalState.openModal}
-          className={`max-[360px]:w-full h-[3.25rem] w-[13.75rem] overflow-hidden text-ellipsis whitespace-nowrap rounded-[3rem] px-[1rem] outline outline-[1px] outline-offset-[-1px] ${
+          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 ${
             formContext.formState.errors.placeName
               ? "outline-red-500"
               : formContext.getValues("placeName")

diff --git a/src/components/gathering/editor/GatheringEditorTime.tsx b/src/components/gathering/editor/GatheringEditorTime.tsx
@@ -24,7 +24,7 @@ const GatheringEditorTime = ({modalState}: IGatheringEditorTime) => {
         <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-[1.75rem] ${
+          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 ${
             formContext.formState.errors.scheduleStartDate
               ? "outline-red-500"
               : formContext.getValues("scheduleStartDate")

diff --git a/src/components/gathering/editor/GatheringEditorTitle.tsx b/src/components/gathering/editor/GatheringEditorTitle.tsx
@@ -17,7 +17,7 @@ const GatheringEditorTitle = () => {
         <input
           placeholder="제목을 입력하세요(최대50자)"
           maxLength={50} // 최대 50자 입력 가능
-          className={`h-[3.25rem] w-full max-w-[35.375rem] rounded-[3rem] px-[1rem] outline outline-[1px] outline-offset-[-1px] ${
+          className={`h-[3.25rem] w-full max-w-[35.375rem] rounded-[3rem] px-[1rem] outline outline-[1px] outline-offset-[-1px] max-[360px]:pl-5 ${
             formContext.formState.errors.title
               ? "outline-red-500"
               : formContext.getValues("title")