From 7f21485f4d52663c57fd11d61476122e4a1e230a Mon Sep 17 00:00:00 2001
From: "SK\\ssssk" <ssssksss@naver.com>
Date: Fri, 30 Aug 2024 03:38:35 +0900
Subject: [PATCH] =?UTF-8?q?style:=20=EB=AA=A8=EC=9E=84=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20=EB=B0=8F=20=EC=88=98=EC=A0=95=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20=EB=B0=8F=20UI=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/gathering/editor/GatheringEditor.tsx    |  2 +-
 .../gathering/editor/GatheringEditorCategory.tsx       | 10 +++++++---
 .../gathering/editor/GatheringEditorContent.tsx        |  2 +-
 .../gathering/editor/GatheringEditorDeadline.tsx       | 10 +++++++---
 .../gathering/editor/GatheringEditorHashTag.tsx        |  2 +-
 .../editor/GatheringEditorParticipantsFilter.tsx       |  6 +++---
 .../gathering/editor/GatheringEditorPeriod.tsx         |  6 +++---
 .../gathering/editor/GatheringEditorPlace.tsx          |  4 ++--
 .../gathering/editor/GatheringEditorTime.tsx           |  2 +-
 .../gathering/editor/GatheringEditorTitle.tsx          |  2 +-
 10 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/components/gathering/editor/GatheringEditor.tsx b/src/components/gathering/editor/GatheringEditor.tsx
index ac9910b1..26698191 100644
--- 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
index 9cf9a4ae..598f01b0 100644
--- a/src/components/gathering/editor/GatheringEditorCategory.tsx
+++ b/src/components/gathering/editor/GatheringEditorCategory.tsx
@@ -18,11 +18,15 @@ 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")
@@ -30,7 +34,7 @@ const GatheringEditorCategory = ({ modalState, categoryList }: IGatheringEditorC
                 : "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
index 41e4fca4..47f31aa8 100644
--- 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
index ae80459c..38b9081d 100644
--- a/src/components/gathering/editor/GatheringEditorDeadline.tsx
+++ b/src/components/gathering/editor/GatheringEditorDeadline.tsx
@@ -12,7 +12,11 @@ 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>
@@ -20,7 +24,7 @@ return (
     <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
index b9759f63..d90c3c0f 100644
--- 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
index 6abdbdbe..3bd9f797 100644
--- 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
index 2d056492..68756161 100644
--- 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
index b2b7a628..4eb02785 100644
--- 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
index 8bf51514..36e71319 100644
--- 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
index d6ff6b73..cf8098e7 100644
--- 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")