Skip to content

Commit

Permalink
Merge pull request #321 from Team-Blitz-Steady/fix/#310/mainpage
Browse files Browse the repository at this point in the history 
🚨 Fix(#310): 메인페이지 QA
  • Loading branch information
@JeongWuk
JeongWuk authored Dec 4, 2023
2 parents f547554 + 9233435 commit a9a2225
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 95 deletions.
230 changes: 136 additions & 94 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down Expand Up @@ -210,7 +210,7 @@ const Home = () => {
const setToInitialState = () => {
setStack("");
setPosition("");
setMode("");
setMode("0");
setLike(false);
setRecruit(true);
};
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -708,102 +720,132 @@ 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-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">
<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>
Expand Down
1 change: 1 addition & 0 deletions src/constants/selectorItems.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export const steadyParticipantsLimit = [
];

export const steadyRunningMethods = [
{ value: "0", label: "전체" },
{ value: "OFFLINE", label: "오프라인" },
{ value: "ONLINE", label: "온라인" },
{ value: "BOTH", label: "혼합" },
Expand Down
2 changes: 1 addition & 1 deletion src/services/steady/getSteadies.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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` : ""
}`,
Expand Down

0 comments on commit a9a2225

Please sign in to comment.