From e03f71e2fe8d50f77465f521cd48f466ec37baea Mon Sep 17 00:00:00 2001
From: JiYoon <angella990825@gmail.com>
Date: Thu, 30 Nov 2023 14:29:00 +0900
Subject: [PATCH 01/12] =?UTF-8?q?=F0=9F=92=84=20Style(#286):=20=EC=8A=A4?=
 =?UTF-8?q?=ED=85=8C=EB=94=94=20=EC=9A=B4=EC=98=81=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=B0=98=EC=9D=91=ED=98=95=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(steady)/steady/manage/[id]/page.tsx | 362 +++++++++----------
 src/components/_common/Button/index.tsx      |   2 +-
 2 files changed, 181 insertions(+), 183 deletions(-)

diff --git a/src/app/(steady)/steady/manage/[id]/page.tsx b/src/app/(steady)/steady/manage/[id]/page.tsx
index a4f6dac2..5615d7b9 100644
--- a/src/app/(steady)/steady/manage/[id]/page.tsx
+++ b/src/app/(steady)/steady/manage/[id]/page.tsx
@@ -122,17 +122,18 @@ const SteadyManagePage = ({ params }: { params: { id: string } }) => {
   }
 
   return (
-    <div className="flex w-1000 flex-col">
-      <div className="mb-20 flex items-center justify-between">
-        <div className="text-30 font-bold">
-          {`${steadyDetailsData.name} 운영 페이지`}
+    <div className="flex flex-col max-sm:w-400 sm:w-450 md:w-600 lg:w-800 xl:w-1000">
+      <div className="mb-10 flex w-full items-center justify-between">
+        <div className="font-bold max-sm:text-22 sm:text-22 md:text-25 lg:text-28 xl:text-30">
+          <span className="text-st-primary">{steadyDetailsData.name}</span>
+          <span> 스테디 운영</span>
         </div>
-        <div className="flex gap-20">
+        <div className="flex gap-10">
           <Link href={`/steady/applicant/${steadyId}`}>
             <Button
               className={`${cn(
                 buttonSize.sm,
-                "w-130 bg-st-primary text-16 text-st-white",
+                "bg-st-primary text-st-white max-sm:w-70 sm:w-80 md:w-90 lg:w-100 xl:w-130",
               )}`}
             >
               신청자 보기
@@ -143,7 +144,7 @@ const SteadyManagePage = ({ params }: { params: { id: string } }) => {
               <Button
                 className={`${cn(
                   buttonSize.sm,
-                  "w-130 bg-st-red text-16 text-st-white",
+                  " bg-st-red  text-st-white max-sm:w-70 sm:w-80 md:w-90 lg:w-100 xl:w-130",
                 )}`}
               >
                 스테디 종료
@@ -167,7 +168,7 @@ const SteadyManagePage = ({ params }: { params: { id: string } }) => {
               <Button
                 className={`${cn(
                   buttonSize.sm,
-                  "w-130 bg-st-red text-16 text-st-white",
+                  "bg-st-red text-st-white max-sm:w-70 sm:w-80 md:w-90 lg:w-100 xl:w-130 ",
                 )}`}
               >
                 스테디 삭제
@@ -188,189 +189,146 @@ const SteadyManagePage = ({ params }: { params: { id: string } }) => {
           </AlertModal>
         </div>
       </div>
-      <Separator className="h-5 w-auto bg-st-gray-400" />
-      <div className="flex overflow-x-hidden">
-        <Tabs.Root
-          defaultValue={`${steadyParticipantsData.participants[0].id}`}
-        >
-          <Tabs.List className="flex w-1000 gap-10">
-            {steadyParticipantsData.participants.map((participant) => (
-              <Tabs.Trigger
-                key={participant.id}
-                value={participant.id.toString()}
-                className="cursor-pointer"
-                onClick={() => {
-                  setCurrentUserIndex(
-                    steadyParticipantsData.participants.findIndex(
-                      (item) => item.id === participant.id,
-                    ),
-                  );
-                }}
-              >
-                {participant.nickname}
-              </Tabs.Trigger>
-            ))}
-          </Tabs.List>
-          <div className={"flex justify-center"}>
-            {steadyParticipantsData.participants.map((participant) => (
-              <Tabs.Content
-                key={participant.id}
-                value={participant.id.toString()}
-                className="p-30"
-              >
-                {!participantDetailsData.isDeleted ? (
-                  <div>
-                    <div
-                      className={cn(
-                        "flex w-full flex-col justify-center text-center",
-                      )}
-                    >
-                      <div className={cn(subContentStyles, "items-center")}>
-                        <div className={cn(subMyPageTextStyles.title)}>
-                          멤버 정보
+      <Separator className="h-5 w-full bg-st-gray-400" />
+
+      <Tabs.Root
+        defaultValue={`${steadyParticipantsData.participants[0].id}`}
+        className="flex flex-col overflow-x-hidden max-sm:w-400 sm:w-450 md:w-600 lg:w-800 xl:w-1000"
+      >
+        <Tabs.List className="flex w-full gap-10">
+          {steadyParticipantsData.participants.map((participant) => (
+            <Tabs.Trigger
+              key={participant.id}
+              value={participant.id.toString()}
+              className="cursor-pointer"
+              onClick={() => {
+                setCurrentUserIndex(
+                  steadyParticipantsData.participants.findIndex(
+                    (item) => item.id === participant.id,
+                  ),
+                );
+              }}
+            >
+              {participant.nickname}
+            </Tabs.Trigger>
+          ))}
+        </Tabs.List>
+        <div className={"flex justify-center"}>
+          {steadyParticipantsData.participants.map((participant) => (
+            <Tabs.Content
+              key={participant.id}
+              value={participant.id.toString()}
+              className="p-30"
+            >
+              {!participantDetailsData.isDeleted ? (
+                <div>
+                  <div
+                    className={cn(
+                      "flex w-full flex-col justify-center text-center",
+                    )}
+                  >
+                    <div className={cn(subContentStyles, "items-center")}>
+                      <div className={cn(subMyPageTextStyles.title)}>
+                        멤버 정보
+                      </div>
+                      <Image
+                        src={participantDetailsData.user.profileImage}
+                        alt={"내 프로필 이미지"}
+                        width={150}
+                        height={150}
+                        className="border-black rounded-full border-2 transition-opacity group-hover:opacity-50"
+                      />
+                      <div
+                        className={cn(
+                          subMyPageTextStyles.content,
+                          "flex flex-col gap-y-5",
+                        )}
+                      >
+                        {participantDetailsData.user.nickname}
+                        <div className={cn("justify-center")}>
+                          <Badge size={"1"}>
+                            {participantDetailsData.user.position.name}
+                          </Badge>
+                        </div>
+                        <div className={cn("my-10 justify-center")}>
+                          {participantDetailsData.user.stacks.map((stack) => (
+                            <Badge
+                              className={cn("mx-5")}
+                              size={"1"}
+                              color={"gray"}
+                              key={stack.id}
+                            >
+                              {stack.name}
+                            </Badge>
+                          ))}
                         </div>
-                        <Image
-                          src={participantDetailsData.user.profileImage}
-                          alt={"내 프로필 이미지"}
-                          width={150}
-                          height={150}
-                          className="border-black rounded-full border-2 transition-opacity group-hover:opacity-50"
-                        />
                         <div
                           className={cn(
-                            subMyPageTextStyles.content,
-                            "flex flex-col gap-y-5",
+                            "my-10 justify-center text-st-gray-250",
                           )}
                         >
-                          {participantDetailsData.user.nickname}
-                          <div className={cn("justify-center")}>
-                            <Badge size={"1"}>
-                              {participantDetailsData.user.position.name}
-                            </Badge>
-                          </div>
-                          <div className={cn("my-10 justify-center")}>
-                            {participantDetailsData.user.stacks.map((stack) => (
-                              <Badge
-                                className={cn("mx-5")}
-                                size={"1"}
-                                color={"gray"}
-                                key={stack.id}
-                              >
-                                {stack.name}
-                              </Badge>
-                            ))}
-                          </div>
-                          <div
-                            className={cn(
-                              "my-10 justify-center text-st-gray-250",
-                            )}
-                          >
-                            {participantDetailsData.user.bio ??
-                              "소개가 없습니다."}
-                          </div>
-                          <div
-                            className={cn(
-                              "flex items-center justify-center gap-30",
-                            )}
-                          >
-                            {participantDetailsData.userCards.map((card) => (
-                              <div
-                                key={card.cardId}
-                                className={cn(
-                                  subMyPageTextStyles.content,
-                                  "flex h-65 flex-col justify-between",
-                                )}
-                              >
-                                <Image
-                                  src={card.imageUrl}
-                                  alt="카드 이미지"
-                                  width={30}
-                                  height={30}
-                                />
-                                <div
-                                  className={cn(subMyPageTextStyles.content)}
-                                >
-                                  {`( ${card.count} )`}
-                                </div>
-                              </div>
-                            ))}
-                          </div>
-                          <div
-                            className={cn(subMyPageTextStyles.content, "my-20")}
-                          >
+                          {participantDetailsData.user.bio ??
+                            "소개가 없습니다."}
+                        </div>
+                        <div
+                          className={cn(
+                            "flex items-center justify-center gap-30",
+                          )}
+                        >
+                          {participantDetailsData.userCards.map((card) => (
                             <div
-                              className={cn("my-10 flex flex-col items-center")}
-                            >
-                              {participantDetailsData.reviews.length}개의 리뷰
-                            </div>
-                            <ScrollArea
+                              key={card.cardId}
                               className={cn(
-                                "flex h-230 w-450 flex-col gap-20 border-1",
+                                subMyPageTextStyles.content,
+                                "flex h-65 flex-col justify-between",
                               )}
                             >
-                              {participantDetailsData.reviews.map(
-                                (review, idx) => (
-                                  <>
-                                    <div
-                                      key={idx}
-                                      className="flex items-center justify-center text-st-gray-250"
-                                    >
-                                      {review}
-                                    </div>
-                                    <Separator className="h-1 w-auto bg-st-gray-100" />
-                                  </>
-                                ),
-                              )}
-                            </ScrollArea>
-                          </div>
+                              <Image
+                                src={card.imageUrl}
+                                alt="카드 이미지"
+                                width={30}
+                                height={30}
+                              />
+                              <div className={cn(subMyPageTextStyles.content)}>
+                                {`( ${card.count} )`}
+                              </div>
+                            </div>
+                          ))}
                         </div>
-                      </div>
-                    </div>
-                    {steadyDetailsData.leaderResponse.id !==
-                      participantDetailsData.user.userId && (
-                      <div className={cn(subContentStyles)}>
-                        <div className={cn(subBoxStyles, "justify-between")}>
-                          <div className={cn(subMyPageTextStyles.content)}>
-                            스테디 참여자 추방 시 되돌릴 수 없습니다.
+                        <div
+                          className={cn(subMyPageTextStyles.content, "my-20")}
+                        >
+                          <div
+                            className={cn("my-10 flex flex-col items-center")}
+                          >
+                            {participantDetailsData.reviews.length}개의 리뷰
                           </div>
-                          {/* TODO: 유저 추방 기능 구현 */}
-                          <AlertModal
-                            trigger={
-                              <Button
-                                className={`${buttonSize.lg} bg-st-red text-st-white`}
-                              >
-                                멤버 추방
-                              </Button>
-                            }
-                            actionButton={
-                              <Button
-                                className={`${buttonSize.sm} bg-st-red text-st-white`}
-                                onClick={handleBanMember}
-                              >
-                                추방
-                              </Button>
-                            }
+                          <ScrollArea
+                            className={cn(
+                              "flex h-230 w-450 flex-col gap-20 border-1",
+                            )}
                           >
-                            정말 해당 멤버를 추방하시겠습니까?
-                          </AlertModal>
+                            {participantDetailsData.reviews.map(
+                              (review, idx) => (
+                                <>
+                                  <div
+                                    key={idx}
+                                    className="flex items-center justify-center text-st-gray-250"
+                                  >
+                                    {review}
+                                  </div>
+                                  <Separator className="h-1 w-auto bg-st-gray-100" />
+                                </>
+                              ),
+                            )}
+                          </ScrollArea>
                         </div>
                       </div>
-                    )}
-                  </div>
-                ) : (
-                  <div>
-                    <div className="flex h-full w-full flex-col items-center justify-evenly gap-20">
-                      <Image
-                        src={DeleteUserLogo}
-                        alt="탈퇴한 유저 이미지"
-                        width={150}
-                        height={150}
-                      />
-                      <div className="text-25 font-bold">
-                        탈퇴한 유저 입니다.
-                      </div>
                     </div>
-                    <div className={cn(subContentStyles, "pt-30")}>
+                  </div>
+                  {steadyDetailsData.leaderResponse.id !==
+                    participantDetailsData.user.userId && (
+                    <div className={cn(subContentStyles)}>
                       <div className={cn(subBoxStyles, "justify-between")}>
                         <div className={cn(subMyPageTextStyles.content)}>
                           스테디 참여자 추방 시 되돌릴 수 없습니다.
@@ -397,13 +355,53 @@ const SteadyManagePage = ({ params }: { params: { id: string } }) => {
                         </AlertModal>
                       </div>
                     </div>
+                  )}
+                </div>
+              ) : (
+                <div>
+                  <div className="flex h-full w-full flex-col items-center justify-evenly gap-20">
+                    <Image
+                      src={DeleteUserLogo}
+                      alt="탈퇴한 유저 이미지"
+                      width={150}
+                      height={150}
+                    />
+                    <div className="text-25 font-bold">탈퇴한 유저 입니다.</div>
                   </div>
-                )}
-              </Tabs.Content>
-            ))}
-          </div>
-        </Tabs.Root>
-      </div>
+                  <div className={cn(subContentStyles, "pt-30")}>
+                    <div className={cn(subBoxStyles, "justify-between")}>
+                      <div className={cn(subMyPageTextStyles.content)}>
+                        스테디 참여자 추방 시 되돌릴 수 없습니다.
+                      </div>
+                      {/* TODO: 유저 추방 기능 구현 */}
+                      <AlertModal
+                        trigger={
+                          <Button
+                            className={`${buttonSize.lg} bg-st-red text-st-white`}
+                          >
+                            멤버 추방
+                          </Button>
+                        }
+                        actionButton={
+                          <Button
+                            className={`${buttonSize.sm} bg-st-red text-st-white`}
+                            onClick={handleBanMember}
+                          >
+                            추방
+                          </Button>
+                        }
+                      >
+                        정말 해당 멤버를 추방하시겠습니까?
+                      </AlertModal>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </Tabs.Content>
+          ))}
+        </div>
+      </Tabs.Root>
+
       <Separator className="h-5 w-auto bg-st-gray-400" />
     </div>
   );
diff --git a/src/components/_common/Button/index.tsx b/src/components/_common/Button/index.tsx
index 89dd7185..a00f2932 100644
--- a/src/components/_common/Button/index.tsx
+++ b/src/components/_common/Button/index.tsx
@@ -5,7 +5,7 @@ export const buttonSize = {
   xl: "w-165 h-50 rounded-6 text-18",
   lg: "w-140 h-50 text-18",
   md: "w-115 h-50 text-18",
-  sm: "w-90 min-h-35 text-15",
+  sm: "w-90 min-h-35 text-15 max-sm:text-12",
 };
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {

From 6202662fcff56bf4db8fdf7720c74da8913e0402 Mon Sep 17 00:00:00 2001
From: JiYoon <angella990825@gmail.com>
Date: Thu, 30 Nov 2023 14:56:37 +0900
Subject: [PATCH 02/12] =?UTF-8?q?=F0=9F=92=84=20Style(#286):=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20sm=20=ED=81=AC=EA=B8=B0=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=EB=A7=81=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/_common/Button/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/_common/Button/index.tsx b/src/components/_common/Button/index.tsx
index a00f2932..89dd7185 100644
--- a/src/components/_common/Button/index.tsx
+++ b/src/components/_common/Button/index.tsx
@@ -5,7 +5,7 @@ export const buttonSize = {
   xl: "w-165 h-50 rounded-6 text-18",
   lg: "w-140 h-50 text-18",
   md: "w-115 h-50 text-18",
-  sm: "w-90 min-h-35 text-15 max-sm:text-12",
+  sm: "w-90 min-h-35 text-15",
 };
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {

From 17261802625a67802df20fac2dc8c5e90d8b6c1c Mon Sep 17 00:00:00 2001
From: JiYoon <angella990825@gmail.com>
Date: Thu, 30 Nov 2023 14:57:15 +0900
Subject: [PATCH 03/12] =?UTF-8?q?=F0=9F=92=84=20Style(#286):=20=EC=8A=A4?=
 =?UTF-8?q?=ED=85=8C=EB=94=94=20=EC=9A=B4=EC=98=81=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(steady)/steady/manage/[id]/page.tsx | 26 ++++++++++++++------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/app/(steady)/steady/manage/[id]/page.tsx b/src/app/(steady)/steady/manage/[id]/page.tsx
index 5615d7b9..aeb8e9d8 100644
--- a/src/app/(steady)/steady/manage/[id]/page.tsx
+++ b/src/app/(steady)/steady/manage/[id]/page.tsx
@@ -133,7 +133,7 @@ const SteadyManagePage = ({ params }: { params: { id: string } }) => {
             <Button
               className={`${cn(
                 buttonSize.sm,
-                "bg-st-primary text-st-white max-sm:w-70 sm:w-80 md:w-90 lg:w-100 xl:w-130",
+                "bg-st-primary text-st-white max-sm:w-70 max-sm:text-12 sm:w-80 md:w-90 lg:w-100 xl:w-130",
               )}`}
             >
               신청자 보기
@@ -144,7 +144,7 @@ const SteadyManagePage = ({ params }: { params: { id: string } }) => {
               <Button
                 className={`${cn(
                   buttonSize.sm,
-                  " bg-st-red  text-st-white max-sm:w-70 sm:w-80 md:w-90 lg:w-100 xl:w-130",
+                  " bg-st-red  text-st-white max-sm:w-70 max-sm:text-12 sm:w-80 md:w-90 lg:w-100 xl:w-130",
                 )}`}
               >
                 스테디 종료
@@ -168,7 +168,7 @@ const SteadyManagePage = ({ params }: { params: { id: string } }) => {
               <Button
                 className={`${cn(
                   buttonSize.sm,
-                  "bg-st-red text-st-white max-sm:w-70 sm:w-80 md:w-90 lg:w-100 xl:w-130 ",
+                  "bg-st-red text-st-white max-sm:w-70 max-sm:text-12 sm:w-80 md:w-90 lg:w-100 xl:w-130",
                 )}`}
               >
                 스테디 삭제
@@ -305,7 +305,7 @@ const SteadyManagePage = ({ params }: { params: { id: string } }) => {
                           </div>
                           <ScrollArea
                             className={cn(
-                              "flex h-230 w-450 flex-col gap-20 border-1",
+                              "flex h-230 flex-col gap-20 border-1 max-sm:w-350 sm:w-380 md:w-400 lg:w-420 xl:w-450",
                             )}
                           >
                             {participantDetailsData.reviews.map(
@@ -328,8 +328,18 @@ const SteadyManagePage = ({ params }: { params: { id: string } }) => {
                   </div>
                   {steadyDetailsData.leaderResponse.id !==
                     participantDetailsData.user.userId && (
-                    <div className={cn(subContentStyles)}>
-                      <div className={cn(subBoxStyles, "justify-between")}>
+                    <div
+                      className={cn(
+                        subContentStyles,
+                        "items-center justify-center",
+                      )}
+                    >
+                      <div
+                        className={cn(
+                          subBoxStyles,
+                          "justify-between max-sm:w-350 sm:w-400",
+                        )}
+                      >
                         <div className={cn(subMyPageTextStyles.content)}>
                           스테디 참여자 추방 시 되돌릴 수 없습니다.
                         </div>
@@ -351,7 +361,9 @@ const SteadyManagePage = ({ params }: { params: { id: string } }) => {
                             </Button>
                           }
                         >
-                          정말 해당 멤버를 추방하시겠습니까?
+                          <span className="font-bold">
+                            정말 해당 멤버를 추방하시겠습니까?
+                          </span>
                         </AlertModal>
                       </div>
                     </div>

From f901948ad55094068e7a92567a5576233ecf1b50 Mon Sep 17 00:00:00 2001
From: JiYoon <angella990825@gmail.com>
Date: Thu, 30 Nov 2023 16:00:57 +0900
Subject: [PATCH 04/12] =?UTF-8?q?=F0=9F=92=84=20Style(#286):=20input=20bor?=
 =?UTF-8?q?der=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=86=92=EC=9D=B4=20?=
 =?UTF-8?q?=EC=9E=AC=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/_common/Input/index.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/_common/Input/index.tsx b/src/components/_common/Input/index.tsx
index 289093a5..621ed4b0 100644
--- a/src/components/_common/Input/index.tsx
+++ b/src/components/_common/Input/index.tsx
@@ -27,7 +27,7 @@ const Input = ({
       input = (
         <div>
           <input
-            className="max-mobile:w-full h-55 w-400 items-center rounded-12 border-2 border-solid border-st-gray-100 pl-5 pr-5 text-center text-lg outline-none"
+            className="max-mobile:w-full h-55 w-400 items-center rounded-12 border-2 border-solid border-st-gray-75 pl-5 pr-5 text-center text-lg outline-none"
             type="text"
             defaultValue={initialValue}
             placeholder="닉네임을 입력해주세요."
@@ -43,7 +43,7 @@ const Input = ({
       input = (
         <div>
           <input
-            className="h-60 w-1000 pl-5 pr-5 text-3xl font-bold outline-none"
+            className="h-60 w-full rounded-10 border-2 border-st-gray-75 px-10 text-3xl font-bold outline-none"
             type="text"
             defaultValue={initialValue}
             placeholder="스테디명"
@@ -58,7 +58,7 @@ const Input = ({
       input = (
         <div>
           <input
-            className="h-30 w-1000 pl-5 pr-5 text-2xl font-bold outline-none"
+            className="h-40 w-full rounded-10 border-2 border-st-gray-75 px-10 text-2xl font-bold outline-none"
             type="text"
             defaultValue={initialValue}
             placeholder="스테디 한 줄 소개"
@@ -73,7 +73,7 @@ const Input = ({
       input = (
         <div>
           <input
-            className="h-25 w-1000 pl-5 pr-5 text-xl font-semibold outline-none"
+            className="h-35 w-full rounded-10 border-2 border-st-gray-75 px-10 text-xl font-semibold outline-none"
             type="text"
             defaultValue={initialValue}
             placeholder="스테디 연락 수단(이메일 주소 또는 오픈카톡방 링크)"
@@ -88,7 +88,7 @@ const Input = ({
       input = (
         <div>
           <input
-            className="h-60 w-1000 pl-5 pr-5 text-3xl font-bold outline-none"
+            className="h-60 w-full rounded-10 border-2 border-st-gray-75 px-10 text-3xl font-bold outline-none"
             type="text"
             defaultValue={initialValue}
             placeholder="제목을 입력해주세요."
@@ -113,7 +113,7 @@ const Input = ({
       break;
     case "introduce-input":
       input = (
-        <div className="flex h-64 items-center justify-center rounded-12 border-2 border-solid border-st-gray-100 p-10 outline-none md:w-400 xl:w-620">
+        <div className="flex h-64 items-center justify-center rounded-12 border-2 border-solid border-st-gray-75 p-10 outline-none md:w-400 xl:w-620">
           <input
             className="h-60 w-full rounded-12 p-5 text-xl font-bold outline-none"
             type="text"

From 828303125d761dd9b2c9c417429d8bacc8cdb735 Mon Sep 17 00:00:00 2001
From: JiYoon <angella990825@gmail.com>
Date: Thu, 30 Nov 2023 16:25:57 +0900
Subject: [PATCH 05/12] =?UTF-8?q?=F0=9F=93=9D=20Chore(#286):=20=EC=BD=98?=
 =?UTF-8?q?=EC=86=94=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(user-menu)/mysteady/page.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/(user-menu)/mysteady/page.tsx b/src/app/(user-menu)/mysteady/page.tsx
index 7848ea57..ac6197c6 100644
--- a/src/app/(user-menu)/mysteady/page.tsx
+++ b/src/app/(user-menu)/mysteady/page.tsx
@@ -39,7 +39,6 @@ const MySteadyPage = () => {
   });
   const ref = useScrollTo<HTMLDivElement>({ top: 0 }, [search]);
 
-  console.log(mySteadyData);
   const renderIcon = (steady: MySteadyContentType) => {
     if (search === "finished") {
       return <div className="h-20 w-20" />;

From bb9e6650880d4814b9f08df918223fa94f0156e1 Mon Sep 17 00:00:00 2001
From: JiYoon <angella990825@gmail.com>
Date: Thu, 30 Nov 2023 16:26:23 +0900
Subject: [PATCH 06/12] =?UTF-8?q?=F0=9F=92=84=20Style(#286):=20=EC=8A=A4?=
 =?UTF-8?q?=ED=85=8C=EB=94=94=20=EC=83=9D=EC=84=B1=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=B0=98=EC=9D=91=ED=98=95=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(steady)/steady/create/page.tsx | 104 ++++++++++++------------
 1 file changed, 53 insertions(+), 51 deletions(-)

diff --git a/src/app/(steady)/steady/create/page.tsx b/src/app/(steady)/steady/create/page.tsx
index 8cf77587..88c634f2 100644
--- a/src/app/(steady)/steady/create/page.tsx
+++ b/src/app/(steady)/steady/create/page.tsx
@@ -79,7 +79,9 @@ const CreateSteadyPage = () => {
   };
 
   return (
-    <div className={cn("mt-30")}>
+    <div
+      className={cn("mt-10 max-sm:w-400 sm:w-450 md:w-600 lg:w-800 xl:w-1000")}
+    >
       <Form {...steadyForm}>
         <form onSubmit={steadyForm.handleSubmit(onSubmit)}>
           <h1 className={cn("mx-8 font-semibold")}>
@@ -90,49 +92,52 @@ const CreateSteadyPage = () => {
             my={"3"}
             className={cn("h-3 bg-st-gray-400")}
           />
-          <FormField
-            control={steadyForm.control}
-            name={"name"}
-            render={({ field }) => (
-              <FormItem>
-                <FormControl>
-                  <Input
-                    inputName={"steady-title-input"}
-                    onValueChange={(value) => {
-                      field.onChange(value);
-                    }}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <div className={cn("my-10")}></div>
-          <FormField
-            control={steadyForm.control}
-            name={"bio"}
-            render={({ field }) => (
-              <FormItem>
-                <FormControl>
-                  <Input
-                    inputName={"steady-bio-input"}
-                    onValueChange={(value) => {
-                      field.onChange(value);
-                    }}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <div className={cn("mt-30")}>
+          <div className="flex flex-col gap-10">
+            <FormField
+              control={steadyForm.control}
+              name={"name"}
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      inputName={"steady-title-input"}
+                      onValueChange={(value) => {
+                        field.onChange(value);
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={steadyForm.control}
+              name={"bio"}
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      inputName={"steady-bio-input"}
+                      onValueChange={(value) => {
+                        field.onChange(value);
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <div className={cn("mt-10")}>
             <Separator
               size={"4"}
               my={"3"}
               className={cn("h-3 bg-st-gray-400")}
             />
             <div
-              className={cn("mx-20 my-10 flex flex-row justify-between gap-15")}
+              className={cn(
+                "mb-15 grid items-center justify-center gap-15 px-20 max-sm:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4",
+              )}
             >
               <FormField
                 control={steadyForm.control}
@@ -142,7 +147,7 @@ const CreateSteadyPage = () => {
                     <SingleSelector
                       initialLabel={"프로젝트 / 스터디"}
                       items={steadyCategories}
-                      className={cn("w-200")}
+                      className={cn("w-full")}
                       onSelectedChange={(selected) => {
                         field.onChange(selected);
                       }}
@@ -160,7 +165,7 @@ const CreateSteadyPage = () => {
                     <SingleSelector
                       initialLabel={"진행 방식"}
                       items={steadyRunningMethods}
-                      className={cn("w-200")}
+                      className={cn("w-full")}
                       onSelectedChange={(selected) => {
                         field.onChange(selected);
                       }}
@@ -178,7 +183,7 @@ const CreateSteadyPage = () => {
                     <SingleSelector
                       initialLabel={"스테디 정원"}
                       items={steadyParticipantsLimit}
-                      className={cn("w-200")}
+                      className={cn("w-full")}
                       onSelectedChange={(selected) => {
                         field.onChange(Number(selected));
                       }}
@@ -195,7 +200,7 @@ const CreateSteadyPage = () => {
                   <FormItem>
                     <DateSelector
                       initialLabel={"마감일"}
-                      className={cn("w-200")}
+                      className={cn("w-full")}
                       onDateChange={(date) => {
                         field.onChange(format(date, "yyyy-MM-dd"));
                       }}
@@ -205,15 +210,12 @@ const CreateSteadyPage = () => {
                   </FormItem>
                 )}
               />
-            </div>
-            <div
-              className={cn("mx-20 my-10 flex flex-row justify-between gap-15")}
-            >
+
               <FormField
                 control={steadyForm.control}
                 name={"positions"}
                 render={({ field }) => (
-                  <FormItem>
+                  <FormItem className="h-40">
                     <MultiSelector
                       initialLabel={"모집 분야"}
                       // TODO: steadyState?.positions에 있는 id값을 가진 position을 뽑아서 initialData로 넣어줘야 함
@@ -221,7 +223,7 @@ const CreateSteadyPage = () => {
                         value: position.id.toString(),
                         label: position.name,
                       }))}
-                      className={cn("w-200")}
+                      className={cn("w-full")}
                       onSelectedChange={(selected) => {
                         field.onChange(extractValue(selected).map(Number));
                       }}
@@ -239,7 +241,7 @@ const CreateSteadyPage = () => {
                     <SingleSelector
                       initialLabel={"예상 기간"}
                       items={steadyExpectedPeriods}
-                      className={cn("w-200")}
+                      className={cn("w-full")}
                       onSelectedChange={(selected) => {
                         field.onChange(selected);
                       }}
@@ -253,14 +255,14 @@ const CreateSteadyPage = () => {
                 control={steadyForm.control}
                 name={"stacks"}
                 render={({ field }) => (
-                  <FormItem>
+                  <FormItem className="h-40 w-450 max-sm:w-360 sm:w-410">
                     <MultiSelector
                       initialLabel={"기술 스택"}
                       items={stacks.stacks.map((stack) => ({
                         value: stack.id.toString(),
                         label: stack.name,
                       }))}
-                      className={cn("w-455")}
+                      className={cn("w-full")}
                       onSelectedChange={(selected) => {
                         field.onChange(extractValue(selected).map(Number));
                       }}

From f6c3300e8d931c59f3a162d55241df8b1ce33f27 Mon Sep 17 00:00:00 2001
From: JiYoon <angella990825@gmail.com>
Date: Thu, 30 Nov 2023 16:29:50 +0900
Subject: [PATCH 07/12] =?UTF-8?q?=F0=9F=92=84=20Style(#286):=20=EC=8A=A4?=
 =?UTF-8?q?=ED=85=8C=EB=94=94=20=EC=97=B0=EB=9D=BD=20=EC=88=98=EB=8B=A8=20?=
 =?UTF-8?q?placeholder=20ellipsis=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/_common/Input/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/_common/Input/index.tsx b/src/components/_common/Input/index.tsx
index 621ed4b0..608b267f 100644
--- a/src/components/_common/Input/index.tsx
+++ b/src/components/_common/Input/index.tsx
@@ -73,7 +73,7 @@ const Input = ({
       input = (
         <div>
           <input
-            className="h-35 w-full rounded-10 border-2 border-st-gray-75 px-10 text-xl font-semibold outline-none"
+            className="h-35 w-full rounded-10 border-2 border-st-gray-75 px-10 text-xl font-semibold outline-none placeholder-shown:text-ellipsis"
             type="text"
             defaultValue={initialValue}
             placeholder="스테디 연락 수단(이메일 주소 또는 오픈카톡방 링크)"

From 59fc3fd8f61c06502de4d340daaea1d333cfb32b Mon Sep 17 00:00:00 2001
From: JiYoon <angella990825@gmail.com>
Date: Thu, 30 Nov 2023 16:48:07 +0900
Subject: [PATCH 08/12] =?UTF-8?q?=F0=9F=92=84=20Style(#286):=20=EC=8A=A4?=
 =?UTF-8?q?=ED=85=8C=EB=94=94=20=EC=8B=A0=EC=B2=AD=EC=84=9C=20=EC=A7=88?=
 =?UTF-8?q?=EB=AC=B8=20=EB=93=B1=EB=A1=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(steady)/steady/create/questions/page.tsx | 247 ++++++++++--------
 1 file changed, 131 insertions(+), 116 deletions(-)

diff --git a/src/app/(steady)/steady/create/questions/page.tsx b/src/app/(steady)/steady/create/questions/page.tsx
index 065d7739..b3e59ff3 100644
--- a/src/app/(steady)/steady/create/questions/page.tsx
+++ b/src/app/(steady)/steady/create/questions/page.tsx
@@ -160,138 +160,153 @@ const CreateQuestionsPage = () => {
 
   return (
     <div className={cn("mt-30")}>
-      <div className={"flex w-1000 items-center justify-between"}>
-        <h1 className={"text-36 font-bold"}>스테디 신청서 질문 등록</h1>
-        <div className={"flex items-center gap-10"}>
-          <SingleSelector
-            className={cn("h-40 w-260")}
-            items={BASIC_TEMPLATE.concat(templatesData.templates).map(
-              (item) => ({
-                value: item.id.toString(),
-                label: item.title,
-              }),
-            )}
-            initialLabel={"질문 템플릿"}
-            onSelectedChange={(selected) => {
-              handleSelectTemplate(selected);
-            }}
-          />
-          <Button
+      <div className={"max-sm:w-400 sm:w-450 md:w-600 lg:w-800 xl:w-1000"}>
+        <div className="flex w-full items-center justify-between">
+          <h1
+            className={
+              "font-bold max-sm:text-20 sm:text-20 md:text-25 lg:text-30 xl:text-35"
+            }
+          >
+            스테디 신청서 질문 등록
+          </h1>
+          <div className={"flex items-center gap-10"}>
+            <SingleSelector
+              className={cn("h-40 w-260 max-sm:w-120 sm:w-150 md:w-200")}
+              items={BASIC_TEMPLATE.concat(templatesData.templates).map(
+                (item) => ({
+                  value: item.id.toString(),
+                  label: item.title,
+                }),
+              )}
+              initialLabel={"질문 템플릿"}
+              onSelectedChange={(selected) => {
+                handleSelectTemplate(selected);
+              }}
+            />
+            <Button
+              className={cn(
+                `h-40 w-120 items-center justify-center bg-st-primary text-st-white max-sm:w-70 sm:w-80 md:w-100`,
+              )}
+              onClick={() => {
+                handleAddQuestion();
+              }}
+            >
+              질문 추가
+            </Button>
+          </div>
+        </div>
+
+        <Separator
+          my={"3"}
+          size={"4"}
+          className={cn("h-5 bg-st-gray-400")}
+        />
+        <div className={cn("flex w-full flex-col gap-10 scrollbar-hide")}>
+          <ScrollArea
             className={cn(
-              `h-40 w-130 items-center justify-center bg-st-primary text-st-white`,
+              "h-600 flex-col items-center justify-center whitespace-nowrap",
             )}
-            onClick={() => {
-              handleAddQuestion();
-            }}
           >
-            질문 추가
-          </Button>
-        </div>
-      </div>
-      <Separator
-        my={"3"}
-        size={"4"}
-        className={cn("h-5 bg-st-gray-400")}
-      />
-      <div
-        className={cn(
-          "flex w-1000 items-end justify-end gap-10 scrollbar-hide",
-        )}
-      >
-        <ScrollArea className={cn("h-600 whitespace-nowrap")}>
-          <div className={cn("flex flex-col gap-20 p-20")}>
-            {question.map((item) => (
-              <div
-                key={item.id}
-                className={cn(
-                  "flex h-70 items-center justify-center gap-30 rounded-10 p-10 shadow-lg",
-                )}
-              >
+            <div
+              className={cn(
+                "flex flex-col gap-20 py-20 max-sm:px-20 sm:px-40 md:px-50 lg:px-60 xl:px-70",
+              )}
+            >
+              {question.map((item) => (
                 <div
-                  className={cn("h-60 w-10 rounded-full bg-st-skyblue-300")}
-                ></div>
-                <Command onKeyDown={handleKeyDown}>
-                  <input
-                    id={`question-${item.id}`}
-                    type="text"
-                    placeholder="질문을 입력해 주세요."
-                    value={item.question}
-                    className={cn(
-                      "h-50 w-300 text-20 font-semibold text-st-black outline-none",
-                    )}
-                    onChange={(event) => {
-                      setQuestion((prev) =>
-                        prev.map((pItem) => {
-                          if (pItem.id === item.id) {
-                            return {
-                              ...pItem,
-                              question: event.target.value,
-                            };
-                          }
-                          return pItem;
-                        }),
-                      );
-                    }}
-                  />
-                </Command>
-                <div
-                  className={cn("cursor-pointer")}
-                  onClick={() => {
-                    handleDeleteQuestion(item.id);
-                  }}
+                  key={item.id}
+                  className={cn(
+                    "flex h-70 items-center justify-between gap-30 rounded-10 p-10 shadow-lg",
+                  )}
                 >
-                  <Icon
-                    name={"cross"}
-                    size={20}
-                    color={""}
-                  />
+                  <div className="flex gap-20">
+                    <div
+                      className={cn("h-60 w-10 rounded-full bg-st-skyblue-300")}
+                    />
+                    <Command onKeyDown={handleKeyDown}>
+                      <input
+                        id={`question-${item.id}`}
+                        type="text"
+                        placeholder="질문을 입력해 주세요."
+                        value={item.question}
+                        className={cn(
+                          "h-50 text-20 font-semibold text-st-black outline-none",
+                        )}
+                        onChange={(event) => {
+                          setQuestion((prev) =>
+                            prev.map((pItem) => {
+                              if (pItem.id === item.id) {
+                                return {
+                                  ...pItem,
+                                  question: event.target.value,
+                                };
+                              }
+                              return pItem;
+                            }),
+                          );
+                        }}
+                      />
+                    </Command>
+                  </div>
+                  <div
+                    className={cn("cursor-pointer")}
+                    onClick={() => {
+                      handleDeleteQuestion(item.id);
+                    }}
+                  >
+                    <Icon
+                      name={"cross"}
+                      size={20}
+                      color={""}
+                    />
+                  </div>
                 </div>
-              </div>
-            ))}
+              ))}
+            </div>
+            <ScrollBar />
+          </ScrollArea>
+          <div className={cn("flex justify-end")}>
+            <Button
+              className={cn(
+                `${buttonSize.sm} items-center justify-center bg-st-primary text-st-white`,
+              )}
+              onClick={() => {
+                setIsTemplateTitleSetting(true);
+              }}
+            >
+              저장
+            </Button>
           </div>
-          <ScrollBar />
-        </ScrollArea>
-        <div className={cn("flex w-1/4 justify-end")}>
+        </div>
+        <Separator
+          size={"4"}
+          my={"3"}
+          className={cn("h-5 bg-st-gray-400")}
+        />
+        <div className={"flex justify-end gap-20"}>
+          <Button
+            className={cn(`${buttonSize.sm} items-center justify-center`)}
+            onClick={() => router.back()}
+          >
+            취소
+          </Button>
           <Button
             className={cn(
-              `${buttonSize.sm} items-center justify-center bg-st-primary text-st-white`,
+              `bg-st-primary ${buttonSize.sm} items-center justify-center text-st-white`,
             )}
             onClick={() => {
-              setIsTemplateTitleSetting(true);
+              handleSubmitTotalData();
             }}
           >
-            저장
+            등록
           </Button>
         </div>
+        <InputModal
+          isOpen={isTemplateTitleSetting}
+          onClose={() => setIsTemplateTitleSetting(false)}
+          onSave={handleSaveTemplate}
+        />
       </div>
-      <Separator
-        size={"4"}
-        my={"3"}
-        className={cn("h-5 bg-st-gray-400")}
-      />
-      <div className={"flex justify-end gap-20"}>
-        <Button
-          className={cn(`${buttonSize.sm} items-center justify-center`)}
-          onClick={() => router.back()}
-        >
-          취소
-        </Button>
-        <Button
-          className={cn(
-            `bg-st-primary ${buttonSize.sm} items-center justify-center text-st-white`,
-          )}
-          onClick={() => {
-            handleSubmitTotalData();
-          }}
-        >
-          등록
-        </Button>
-      </div>
-      <InputModal
-        isOpen={isTemplateTitleSetting}
-        onClose={() => setIsTemplateTitleSetting(false)}
-        onSave={handleSaveTemplate}
-      />
     </div>
   );
 };

From 989efdc864413080131ce7af1f860285f8f4b702 Mon Sep 17 00:00:00 2001
From: JiYoon <angella990825@gmail.com>
Date: Thu, 30 Nov 2023 17:01:18 +0900
Subject: [PATCH 09/12] =?UTF-8?q?=F0=9F=92=84=20Style(#286):=20=EC=8A=A4?=
 =?UTF-8?q?=ED=85=8C=EB=94=94=20=EC=8B=A0=EC=B2=AD=EC=84=9C=20=EC=A7=88?=
 =?UTF-8?q?=EB=AC=B8=20=EC=88=98=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../steady/edit/questions/[id]/page.tsx       | 227 ++++++++++--------
 1 file changed, 123 insertions(+), 104 deletions(-)

diff --git a/src/app/(steady)/steady/edit/questions/[id]/page.tsx b/src/app/(steady)/steady/edit/questions/[id]/page.tsx
index a9bcb5b3..9b3cd7ef 100644
--- a/src/app/(steady)/steady/edit/questions/[id]/page.tsx
+++ b/src/app/(steady)/steady/edit/questions/[id]/page.tsx
@@ -176,124 +176,143 @@ const EditQuestionsPage = ({ params }: { params: { id: string } }) => {
 
   return (
     <div className={cn("mt-30")}>
-      <div className={"flex w-1000 items-center justify-between"}>
-        <h1 className={"text-36 font-bold"}>스테디 신청서 질문</h1>
-        <div className={"flex items-center gap-10"}>
-          <SingleSelector
-            className={cn("h-40 w-260")}
-            items={BASIC_TEMPLATE.concat(templatesData.templates).map(
-              (item) => ({
-                value: item.id.toString(),
-                label: item.title,
-              }),
-            )}
-            initialLabel={"질문 템플릿"}
-            onSelectedChange={(selected) => {
-              handleSelectTemplate(selected);
-            }}
-          />
-          <Button
+      <div className={"max-sm:w-400 sm:w-450 md:w-600 lg:w-800 xl:w-1000"}>
+        <div className="flex w-full items-center justify-between">
+          <h1
+            className={
+              "font-bold max-sm:text-20 sm:text-20 md:text-25 lg:text-30 xl:text-35"
+            }
+          >
+            스테디 신청서 질문
+          </h1>
+          <div className={"flex items-center gap-10"}>
+            <SingleSelector
+              className={cn("h-40 w-260 max-sm:w-120 sm:w-150 md:w-200")}
+              items={BASIC_TEMPLATE.concat(templatesData.templates).map(
+                (item) => ({
+                  value: item.id.toString(),
+                  label: item.title,
+                }),
+              )}
+              initialLabel={"질문 템플릿"}
+              onSelectedChange={(selected) => {
+                handleSelectTemplate(selected);
+              }}
+            />
+            <Button
+              className={cn(
+                `h-40 w-120 items-center justify-center bg-st-primary text-st-white max-sm:w-70 sm:w-80 md:w-100`,
+              )}
+              onClick={() => {
+                handleAddQuestion();
+              }}
+            >
+              질문 추가
+            </Button>
+          </div>
+        </div>
+
+        <Separator
+          my={"3"}
+          size={"4"}
+          className={cn("h-5 bg-st-gray-400")}
+        />
+        <div className={cn("flex w-full flex-col gap-10 scrollbar-hide")}>
+          <ScrollArea
             className={cn(
-              `h-40 w-130 items-center justify-center bg-st-primary text-st-white`,
+              "h-600 flex-col items-center justify-center whitespace-nowrap",
             )}
-            onClick={() => {
-              handleAddQuestion();
-            }}
           >
-            질문 추가
-          </Button>
-        </div>
-      </div>
-      <Separator
-        my={"3"}
-        size={"4"}
-        className={cn("h-5 bg-st-gray-400")}
-      />
-      <div className={cn("flex w-1000 items-end justify-end gap-10")}>
-        <ScrollArea className={cn("h-600 whitespace-nowrap")}>
-          <div className={cn("flex w-full flex-col gap-20 p-20")}>
-            {question.map((item) => (
-              <div
-                key={item.sequence}
-                className={cn(
-                  "z-10 flex h-70 items-center justify-center gap-30 rounded-10 p-10 shadow-lg",
-                )}
-              >
+            <div
+              className={cn(
+                "flex flex-col gap-20 py-20 max-sm:px-20 sm:px-40 md:px-50 lg:px-60 xl:px-70",
+              )}
+            >
+              {question.map((item) => (
                 <div
-                  className={cn("h-60 w-10 rounded-full bg-st-skyblue-300")}
-                ></div>
-                <Command onKeyDown={handleKeyDown}>
-                  <input
-                    id={`question-${item.sequence}`}
-                    type="text"
-                    placeholder="질문을 입력해 주세요."
-                    value={item.question}
-                    className={cn(
-                      `h-50 min-w-[300px] text-20 font-semibold text-st-black outline-none`,
-                    )}
-                    onChange={(event) => {
-                      handleInputQuestion(event, item.sequence);
-                    }}
-                  />
-                </Command>
-                <div
-                  className={cn("cursor-pointer")}
-                  onClick={() => {
-                    handleDeleteQuestion(item.sequence);
-                  }}
+                  key={item.sequence}
+                  className={cn(
+                    "z-10 flex h-70 items-center justify-between gap-30 rounded-10 p-10 shadow-lg",
+                  )}
                 >
-                  <Icon
-                    name={"cross"}
-                    size={20}
-                    color={""}
-                  />
+                  <div className="flex gap-20">
+                    <div
+                      className={cn("h-60 w-10 rounded-full bg-st-skyblue-300")}
+                    ></div>
+                    <Command onKeyDown={handleKeyDown}>
+                      <input
+                        id={`question-${item.sequence}`}
+                        type="text"
+                        placeholder="질문을 입력해 주세요."
+                        value={item.question}
+                        className={cn(
+                          `h-50 text-20 font-semibold text-st-black outline-none`,
+                        )}
+                        onChange={(event) => {
+                          handleInputQuestion(event, item.sequence);
+                        }}
+                      />
+                    </Command>
+                  </div>
+                  <div
+                    className={cn("cursor-pointer")}
+                    onClick={() => {
+                      handleDeleteQuestion(item.sequence);
+                    }}
+                  >
+                    <Icon
+                      name={"cross"}
+                      size={20}
+                      color={""}
+                    />
+                  </div>
                 </div>
-              </div>
-            ))}
+              ))}
+            </div>
+            <ScrollBar className={cn("hidden")} />
+          </ScrollArea>
+          <div className={cn("flex justify-end")}>
+            <Button
+              className={cn(
+                `${buttonSize.sm} items-center justify-center bg-st-primary text-st-white`,
+              )}
+              onClick={() => {
+                setIsTemplateTitleSetting(true);
+              }}
+            >
+              저장
+            </Button>
           </div>
-          <ScrollBar className={cn("hidden")} />
-        </ScrollArea>
-        <div className={cn("flex w-1/4 justify-end")}>
+        </div>
+        <Separator
+          size={"4"}
+          my={"3"}
+          className={cn("h-5 bg-st-gray-400")}
+        />
+        <div className={"flex justify-end gap-20"}>
           <Button
-            className={cn(
-              `${buttonSize.sm} items-center justify-center bg-st-primary text-st-white`,
-            )}
+            className={cn(`${buttonSize.sm} items-center justify-center`)}
             onClick={() => {
-              setIsTemplateTitleSetting(true);
+              router.back();
             }}
           >
-            저장
+            취소
+          </Button>
+          <Button
+            className={cn(
+              `bg-st-primary ${buttonSize.sm} items-center justify-center text-st-white`,
+            )}
+            onClick={handleSubmitQuestion}
+          >
+            수정
           </Button>
         </div>
+        <InputModal
+          isOpen={isTemplateTitleSetting}
+          onClose={() => setIsTemplateTitleSetting(false)}
+          onSave={handleSaveTemplate}
+        />
       </div>
-      <Separator
-        size={"4"}
-        my={"3"}
-        className={cn("h-5 bg-st-gray-400")}
-      />
-      <div className={"flex justify-end gap-20"}>
-        <Button
-          className={cn(`${buttonSize.sm} items-center justify-center`)}
-          onClick={() => {
-            router.back();
-          }}
-        >
-          취소
-        </Button>
-        <Button
-          className={cn(
-            `bg-st-primary ${buttonSize.sm} items-center justify-center text-st-white`,
-          )}
-          onClick={handleSubmitQuestion}
-        >
-          수정
-        </Button>
-      </div>
-      <InputModal
-        isOpen={isTemplateTitleSetting}
-        onClose={() => setIsTemplateTitleSetting(false)}
-        onSave={handleSaveTemplate}
-      />
     </div>
   );
 };

From 97b3d207b23f1e91f42e00532c061b5338a32e46 Mon Sep 17 00:00:00 2001
From: JiYoon <angella990825@gmail.com>
Date: Thu, 30 Nov 2023 17:18:28 +0900
Subject: [PATCH 10/12] =?UTF-8?q?=F0=9F=92=84=20Style(#286):=20=EC=8A=BD?=
 =?UTF-8?q?=ED=85=8C=EB=94=94=20=EC=88=98=EC=A0=95=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=B0=98=EC=9D=91=ED=98=95=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(steady)/steady/edit/[id]/page.tsx | 115 +++++++++++----------
 1 file changed, 60 insertions(+), 55 deletions(-)

diff --git a/src/app/(steady)/steady/edit/[id]/page.tsx b/src/app/(steady)/steady/edit/[id]/page.tsx
index 0b5c5548..e2218d1e 100644
--- a/src/app/(steady)/steady/edit/[id]/page.tsx
+++ b/src/app/(steady)/steady/edit/[id]/page.tsx
@@ -137,7 +137,9 @@ const SteadyEditPage = ({
   };
 
   return (
-    <div className={cn("mt-30")}>
+    <div
+      className={cn("mt-10 max-sm:w-400 sm:w-450 md:w-600 lg:w-800 xl:w-1000")}
+    >
       <Form {...steadyEditForm}>
         <form onSubmit={steadyEditForm.handleSubmit(onSubmit)}>
           <h1 className={cn("mx-8 font-semibold")}>
@@ -148,52 +150,57 @@ const SteadyEditPage = ({
             my={"3"}
             className={cn("h-3 bg-st-gray-400")}
           />
-          <FormField
-            control={steadyEditForm.control}
-            defaultValue={name}
-            name={"name"}
-            render={({ field }) => (
-              <FormItem>
-                <FormControl>
-                  <Input
-                    inputName={"steady-title-input"}
-                    initialValue={name}
-                    onValueChange={(value) => {
-                      field.onChange(value);
-                    }}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <div className={cn("my-10")} />
-          <FormField
-            control={steadyEditForm.control}
-            defaultValue={bio}
-            name={"bio"}
-            render={({ field }) => (
-              <FormItem>
-                <FormControl>
-                  <Input
-                    inputName={"steady-bio-input"}
-                    initialValue={bio}
-                    onValueChange={(value) => {
-                      field.onChange(value);
-                    }}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <div className={cn("mt-30")}>
+          <div className="flex flex-col gap-10">
+            <FormField
+              control={steadyEditForm.control}
+              defaultValue={name}
+              name={"name"}
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      inputName={"steady-title-input"}
+                      initialValue={name}
+                      onValueChange={(value) => {
+                        field.onChange(value);
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={steadyEditForm.control}
+              defaultValue={bio}
+              name={"bio"}
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      inputName={"steady-bio-input"}
+                      initialValue={bio}
+                      onValueChange={(value) => {
+                        field.onChange(value);
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <div className={cn("mt-10")}>
             <Separator
               size={"4"}
               my={"3"}
               className={cn("h-3 bg-st-gray-400")}
             />
-            <div className={cn("mx-20 flex flex-row justify-between gap-15")}>
+            <div
+              className={cn(
+                "mb-15 grid items-center justify-center gap-15 px-20 max-sm:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4",
+              )}
+            >
               <FormField
                 control={steadyEditForm.control}
                 defaultValue={type}
@@ -205,7 +212,7 @@ const SteadyEditPage = ({
                         initialLabel={"프로젝트 / 스터디"}
                         initialData={type}
                         items={steadyCategories}
-                        className={cn("w-200")}
+                        className={cn("w-full")}
                         onSelectedChange={(selected) => {
                           field.onChange(selected);
                         }}
@@ -226,7 +233,7 @@ const SteadyEditPage = ({
                       initialLabel={"진행 방식"}
                       initialData={steadyMode}
                       items={steadyRunningMethods}
-                      className={cn("w-200")}
+                      className={cn("w-full")}
                       onSelectedChange={(selected) => {
                         field.onChange(selected);
                       }}
@@ -246,7 +253,7 @@ const SteadyEditPage = ({
                       initialLabel={"스테디 정원"}
                       initialData={participantLimit}
                       items={steadyParticipantsLimit}
-                      className={cn("w-200")}
+                      className={cn("w-full")}
                       onSelectedChange={(selected) => {
                         field.onChange(Number(selected));
                       }}
@@ -265,7 +272,7 @@ const SteadyEditPage = ({
                     <DateSelector
                       initialLabel={"마감일"}
                       initialDate={parse(deadline, "yyyy-MM-dd", new Date())}
-                      className={cn("w-200")}
+                      className={cn("w-full")}
                       onDateChange={(date) => {
                         field.onChange(format(date, "yyyy-MM-dd"));
                       }}
@@ -274,20 +281,18 @@ const SteadyEditPage = ({
                   </FormItem>
                 )}
               />
-            </div>
-            <div className={cn("my-10")} />
-            <div className={cn("mx-20 flex flex-row justify-between gap-15")}>
+
               <FormField
                 control={steadyEditForm.control}
                 defaultValue={extractValue(positionsInitialData).map(Number)}
                 name={"positions"}
                 render={({ field }) => (
-                  <FormItem>
+                  <FormItem className="h-40">
                     <MultiSelector
                       initialLabel={"모집 분야"}
                       initialData={positionsInitialData}
                       items={positionsItemsData}
-                      className={cn("w-200")}
+                      className={cn("w-full")}
                       onSelectedChange={(selected) => {
                         field.onChange(extractValue(selected).map(Number));
                       }}
@@ -306,7 +311,7 @@ const SteadyEditPage = ({
                       initialLabel={"예상 기간"}
                       initialData={scheduledPeriod}
                       items={steadyExpectedPeriods}
-                      className={cn("w-200")}
+                      className={cn("w-full")}
                       onSelectedChange={(selected) => {
                         field.onChange(selected);
                       }}
@@ -320,12 +325,12 @@ const SteadyEditPage = ({
                 defaultValue={extractValue(stacksInitialData).map(Number)}
                 name={"stacks"}
                 render={({ field }) => (
-                  <FormItem>
+                  <FormItem className="h-40">
                     <MultiSelector
                       initialLabel={"기술 스택"}
                       initialData={stacksInitialData}
                       items={stacksItemsData}
-                      className={cn("w-200")}
+                      className={cn("w-full")}
                       onSelectedChange={(selected) => {
                         field.onChange(extractValue(selected).map(Number));
                       }}
@@ -344,7 +349,7 @@ const SteadyEditPage = ({
                       initialLabel={"상태"}
                       initialData={status}
                       items={steadyRecruitmentStatus}
-                      className={cn("w-200")}
+                      className={cn("w-full")}
                       onSelectedChange={(selected) => {
                         field.onChange(selected);
                       }}

From 929ad0985329bdcf26384a8ac3ef6e946bd44125 Mon Sep 17 00:00:00 2001
From: JiYoon <angella990825@gmail.com>
Date: Thu, 30 Nov 2023 17:37:07 +0900
Subject: [PATCH 11/12] =?UTF-8?q?=F0=9F=92=84=20Style(#286):=20=EB=A7=88?=
 =?UTF-8?q?=ED=81=AC=EB=8B=A4=EC=9A=B4=20=EC=97=90=EB=94=94=ED=84=B0=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(steady)/steady/create/page.tsx    | 7 +++++--
 src/app/(steady)/steady/edit/[id]/page.tsx | 7 +++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app/(steady)/steady/create/page.tsx b/src/app/(steady)/steady/create/page.tsx
index 9adff7b0..7e7c9485 100644
--- a/src/app/(steady)/steady/create/page.tsx
+++ b/src/app/(steady)/steady/create/page.tsx
@@ -318,9 +318,12 @@ const CreateSteadyPage = () => {
               control={steadyForm.control}
               name={"content"}
               render={({ field }) => (
-                <FormItem>
+                <FormItem
+                  className={
+                    "my-10 h-720 w-full rounded-10 border-2 border-st-gray-75"
+                  }
+                >
                   <RichEditor
-                    className={"min-h-720 w-full"}
                     contentEditableClassName={"prose"}
                     onChange={(markdown) => {
                       unified()
diff --git a/src/app/(steady)/steady/edit/[id]/page.tsx b/src/app/(steady)/steady/edit/[id]/page.tsx
index 57c82aba..127c5340 100644
--- a/src/app/(steady)/steady/edit/[id]/page.tsx
+++ b/src/app/(steady)/steady/edit/[id]/page.tsx
@@ -428,9 +428,12 @@ const SteadyEditPage = ({
               name={"content"}
               render={({ field }) => {
                 return (
-                  <FormItem>
+                  <FormItem
+                    className={
+                      "my-10 h-720 w-full rounded-10 border-2 border-st-gray-75"
+                    }
+                  >
                     <RichEditor
-                      className={"min-h-720 w-full"}
                       contentEditableClassName={"prose"}
                       ref={editorRef}
                       onChange={(markdown) => {

From cbb80e8167cd9b68e350ca7acdbe8e5ed7dd69de Mon Sep 17 00:00:00 2001
From: JiYoon <angella990825@gmail.com>
Date: Thu, 30 Nov 2023 18:16:20 +0900
Subject: [PATCH 12/12] =?UTF-8?q?=F0=9F=9A=A8=20Fix(#286):=20=EB=B9=8C?=
 =?UTF-8?q?=EB=93=9C=20=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(steady)/steady/manage/[id]/page.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/app/(steady)/steady/manage/[id]/page.tsx b/src/app/(steady)/steady/manage/[id]/page.tsx
index ad4c82a3..f37422cf 100644
--- a/src/app/(steady)/steady/manage/[id]/page.tsx
+++ b/src/app/(steady)/steady/manage/[id]/page.tsx
@@ -322,10 +322,6 @@ const SteadyManagePage = ({ params }: { params: { id: string } }) => {
                               ),
                             )}
                           </ScrollArea>
-                            <span className="text-18 font-bold">
-                              정말 해당 멤버를 추방하시겠습니까?
-                            </span>
-                          </AlertModal>
                         </div>
                       </div>
                     </div>