From a58512fd860b255a20b84a091b167855da105a22 Mon Sep 17 00:00:00 2001
From: Musix <ljw927@naver.com>
Date: Mon, 4 Dec 2023 00:00:56 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=9A=A8=20Fix(#310):=20=EB=A9=94?=
 =?UTF-8?q?=EC=9D=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20QA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.tsx                   | 155 ++++++++++++-----------------
 src/constants/selectorItems.ts     |   1 +
 src/services/steady/getSteadies.ts |   2 +-
 3 files changed, 65 insertions(+), 93 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8c3e9ede..7238ba59 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -294,6 +294,18 @@ const Home = () => {
     }
   }, []);
 
+  useEffect(() => {
+    const handleResize = () => {
+      setModalOpen(false);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   const bannerDefaultStyle =
     "duration-1500 absolute left-0 top-0 flex h-250 md:h-300 lg:h-350 w-full justify-center transition-opacity";
   const bannerValidStyle = "opacity-100 transition-opacity ease-in";
@@ -708,102 +720,61 @@ const Home = () => {
           <Sheet.Container>
             <Sheet.Header />
             <Sheet.Content>
-              <div className="flex flex-wrap items-center justify-center gap-5">
-                <MultiSelector
-                  initialLabel={"기술 스택"}
-                  items={stacks.stacks.map((stack) => ({
-                    value: stack.id.toString(),
-                    label: stack.name,
-                  }))}
-                  onSelectedChange={(value) =>
-                    setStack(value.map((item) => item.label).join(","))
-                  }
-                  className="w-220"
-                />
-                <MultiSelector
-                  initialLabel={"모집 분야"}
-                  items={positions.positions.map((position) => ({
-                    value: position.name,
-                    label: position.name,
-                  }))}
-                  onSelectedChange={(value) =>
-                    setPosition(value.map((item) => item.label).join(","))
-                  }
-                  className="w-220"
-                />
-                <SingleSelector
-                  initialLabel={"진행 방식"}
-                  items={steadyRunningMethods}
-                  className="mb-8 h-43 w-220"
-                  onSelectedChange={(value) => setMode(value)}
-                />
-                <div
-                  className={`${
-                    like
-                      ? "border-5 border-st-yellow"
-                      : "border border-st-gray-100"
-                  } transition-border mb-8 flex h-43 w-150 items-center justify-center rounded-5 duration-100`}
-                >
-                  {isAuth && (
+              <div className="flex h-full flex-col justify-between">
+                <div className="flex flex-col items-center gap-5">
+                  <div className="flex flex-wrap justify-center gap-10">
+                    <MultiSelector
+                      initialLabel={"기술 스택"}
+                      items={stacks.stacks.map((stack) => ({
+                        value: stack.id.toString(),
+                        label: stack.name,
+                      }))}
+                      onSelectedChange={(value) =>
+                        setStack(value.map((item) => item.label).join(","))
+                      }
+                      className="w-220"
+                    />
+                    <MultiSelector
+                      initialLabel={"모집 분야"}
+                      items={positions.positions.map((position) => ({
+                        value: position.name,
+                        label: position.name,
+                      }))}
+                      onSelectedChange={(value) =>
+                        setPosition(value.map((item) => item.label).join(","))
+                      }
+                      className="w-220"
+                    />
+                    {/* <SingleSelector
+                      initialLabel={"진행 방식"}
+                      items={steadyRunningMethods}
+                      className="z-99999999 mb-8 h-43 w-220"
+                      onSelectedChange={(value) => setMode(value)}
+                    /> */}
+                  </div>
+                </div>
+                <div className="flex items-end justify-center gap-20 p-20">
+                  <div className="mb-8 flex h-43 w-200 items-center justify-center rounded-10 shadow-md">
                     <button
-                      className="h-full w-full font-bold"
-                      onClick={() => setLike(!like)}
+                      className="h-full w-full rounded-10 font-bold hover:bg-st-green hover:text-st-white"
+                      onClick={() => {
+                        setModalOpen(false);
+                      }}
                     >
-                      💛 내 좋아요
+                      필터 적용
                     </button>
-                  )}
-                  {!isAuth && (
-                    <AlertModal
-                      actionButton={
-                        <LoginModal
-                          trigger={
-                            <Button
-                              className={cn(
-                                `bg-st-primary ${buttonSize.sm} items-center justify-center text-st-white`,
-                              )}
-                            >
-                              로그인
-                            </Button>
-                          }
-                        />
-                      }
-                      trigger={
-                        <button
-                          onClick={() => setModalOpen(false)}
-                          className="h-full w-full font-bold"
-                        >
-                          💛 내 좋아요
-                        </button>
-                      }
+                  </div>
+                  <div className="mb-8 flex h-43 w-200 items-center justify-center rounded-10 shadow-md">
+                    <button
+                      className="h-full w-full rounded-10 font-bold hover:bg-st-red hover:text-st-white"
+                      onClick={() => {
+                        setToInitialState();
+                        setModalOpen(false);
+                      }}
                     >
-                      <div className="text-center text-18 font-bold">
-                        로그인이 필요한 기능입니다! <br />
-                        로그인 하시겠어요?
-                      </div>
-                    </AlertModal>
-                  )}
-                </div>
-                <div
-                  className={`${
-                    recruit
-                      ? "border-5 border-st-primary"
-                      : "border border-st-gray-100"
-                  } transition-border mb-8 flex h-43 w-100 items-center justify-center rounded-5 duration-100`}
-                >
-                  <button
-                    className="h-full w-full font-bold"
-                    onClick={() => setRecruit(!recruit)}
-                  >
-                    모집중
-                  </button>
-                </div>
-                <div className="mb-8 flex h-43 w-100 items-center justify-center rounded-5 border border-st-gray-100">
-                  <button
-                    className="h-full w-full font-bold"
-                    onClick={() => setToInitialState()}
-                  >
-                    초기화
-                  </button>
+                      초기화
+                    </button>
+                  </div>
                 </div>
               </div>
             </Sheet.Content>
diff --git a/src/constants/selectorItems.ts b/src/constants/selectorItems.ts
index b98f2452..17ef42d5 100644
--- a/src/constants/selectorItems.ts
+++ b/src/constants/selectorItems.ts
@@ -16,6 +16,7 @@ export const steadyParticipantsLimit = [
 ];
 
 export const steadyRunningMethods = [
+  { value: "0", label: "전체" },
   { value: "OFFLINE", label: "오프라인" },
   { value: "ONLINE", label: "온라인" },
   { value: "BOTH", label: "혼합" },
diff --git a/src/services/steady/getSteadies.ts b/src/services/steady/getSteadies.ts
index 37bc00f9..30c30c3f 100644
--- a/src/services/steady/getSteadies.ts
+++ b/src/services/steady/getSteadies.ts
@@ -19,7 +19,7 @@ const getSteadies = async (
       }${keyword !== "" ? `&keyword=${keyword}` : ""}${
         stack !== "" ? `&stack=${stack}` : ""
       }${position !== "" ? `&position=${position}` : ""}${
-        mode !== "" ? `&steadyMode=${mode}` : ""
+        mode !== "0" ? `&steadyMode=${mode}` : ""
       }${recruit ? `&status=RECRUITING` : ""}${
         deadline ? `&direction=asc&criteria=deadline` : ""
       }`,

From 3f1913f2b5bcf3aa920d4e060386fca8b2a780d1 Mon Sep 17 00:00:00 2001
From: Musix <ljw927@naver.com>
Date: Mon, 4 Dec 2023 10:36:45 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=9A=A8=20Fix(#310):=20=ED=95=84?=
 =?UTF-8?q?=ED=84=B0=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.tsx | 133 ++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 102 insertions(+), 31 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7238ba59..9099456f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -57,7 +57,7 @@ const Home = () => {
   const [deadline, setDeadline] = useState(false);
   const [stack, setStack] = useState("");
   const [position, setPosition] = useState("");
-  const [mode, setMode] = useState("");
+  const [mode, setMode] = useState("0");
   const { isAuth } = useAuthStore();
   const [isInitialRender, setIsInitialRender] = useState(true);
   const rankImageArray = [
@@ -210,7 +210,7 @@ const Home = () => {
   const setToInitialState = () => {
     setStack("");
     setPosition("");
-    setMode("");
+    setMode("0");
     setLike(false);
     setRecruit(true);
   };
@@ -722,35 +722,106 @@ const Home = () => {
             <Sheet.Content>
               <div className="flex h-full flex-col justify-between">
                 <div className="flex flex-col items-center gap-5">
-                  <div className="flex flex-wrap justify-center gap-10">
-                    <MultiSelector
-                      initialLabel={"기술 스택"}
-                      items={stacks.stacks.map((stack) => ({
-                        value: stack.id.toString(),
-                        label: stack.name,
-                      }))}
-                      onSelectedChange={(value) =>
-                        setStack(value.map((item) => item.label).join(","))
-                      }
-                      className="w-220"
-                    />
-                    <MultiSelector
-                      initialLabel={"모집 분야"}
-                      items={positions.positions.map((position) => ({
-                        value: position.name,
-                        label: position.name,
-                      }))}
-                      onSelectedChange={(value) =>
-                        setPosition(value.map((item) => item.label).join(","))
-                      }
-                      className="w-220"
-                    />
-                    {/* <SingleSelector
-                      initialLabel={"진행 방식"}
-                      items={steadyRunningMethods}
-                      className="z-99999999 mb-8 h-43 w-220"
-                      onSelectedChange={(value) => setMode(value)}
-                    /> */}
+                  <div className="flex flex-col justify-center gap-20">
+                    <div className="flex flex-col items-center justify-center gap-20 text-25 font-bold">
+                      기술 스택
+                      <MultiSelector
+                        initialLabel={"기술 스택"}
+                        items={stacks.stacks.map((stack) => ({
+                          value: stack.id.toString(),
+                          label: stack.name,
+                        }))}
+                        onSelectedChange={(value) =>
+                          setStack(value.map((item) => item.label).join(","))
+                        }
+                        className="w-300"
+                      />
+                    </div>
+                    <div className="flex flex-col items-center justify-center gap-20 text-25 font-bold">
+                      모집 분야
+                      <MultiSelector
+                        initialLabel={"모집 분야"}
+                        items={positions.positions.map((position) => ({
+                          value: position.name,
+                          label: position.name,
+                        }))}
+                        onSelectedChange={(value) =>
+                          setPosition(value.map((item) => item.label).join(","))
+                        }
+                        className="w-300"
+                      />
+                    </div>
+
+                    <div className="flex flex-col items-center justify-center gap-20 text-25 font-bold">
+                      진행 방식
+                      <div className="flex items-center justify-center gap-20 text-17">
+                        <div
+                          className={`${
+                            mode === "0" ? "" : "text-st-gray-100"
+                          } cursor-pointer`}
+                          onClick={() => setMode("0")}
+                        >
+                          전체
+                        </div>
+                        <div
+                          className={`${
+                            mode === "offline" ? "" : "text-st-gray-100"
+                          } cursor-pointer`}
+                          onClick={() => setMode("offline")}
+                        >
+                          오프라인
+                        </div>
+                        <div
+                          className={`${
+                            mode === "online" ? "" : "text-st-gray-100"
+                          } cursor-pointer`}
+                          onClick={() => setMode("online")}
+                        >
+                          온라인
+                        </div>
+                        <div
+                          className={`${
+                            mode === "both" ? "" : "text-st-gray-100"
+                          } cursor-pointer`}
+                          onClick={() => setMode("both")}
+                        >
+                          혼합
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex flex-col items-center justify-center gap-20 text-25 font-bold">
+                      모집 현황
+                      <div className="flex items-center justify-center gap-20">
+                        <div
+                          className={`${
+                            recruit
+                              ? "border-5 border-st-primary"
+                              : "border border-st-gray-100"
+                          } transition-border mb-8 flex h-43 w-100 items-center justify-center rounded-5 duration-100`}
+                        >
+                          <button
+                            className="h-full w-full text-15 font-bold"
+                            onClick={() => setRecruit(true)}
+                          >
+                            모집중
+                          </button>
+                        </div>
+                        <div
+                          className={`${
+                            !recruit
+                              ? "border-5 border-st-red"
+                              : "border border-st-gray-100"
+                          } transition-border mb-8 flex h-43 w-100 items-center justify-center rounded-5 duration-100`}
+                        >
+                          <button
+                            className="h-full w-full text-15 font-bold"
+                            onClick={() => setRecruit(false)}
+                          >
+                            전체
+                          </button>
+                        </div>
+                      </div>
+                    </div>
                   </div>
                 </div>
                 <div className="flex items-end justify-center gap-20 p-20">