Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🚨 Fix(#310): λ©”μΈνŽ˜μ΄μ§€ QA #321

Merged
merged 4 commits into from
Dec 4, 2023
Merged

🚨 Fix(#310): λ©”μΈνŽ˜μ΄μ§€ QA #321

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a58512f
🚨 Fix(#310): λ©”μΈνŽ˜μ΄μ§€ QA
JeongWuk Dec 3, 2023
3f1913f
🚨 Fix(#310): ν•„ν„° λ ˆμ΄μ•„μ›ƒ λ³€κ²½
JeongWuk Dec 4, 2023
f387047
Merge branch 'main' of https://github.com/Team-Blitz-Steady/steady-cl…
JeongWuk Dec 4, 2023
9233435
Merge branch 'main' of https://github.com/Team-Blitz-Steady/steady-cl…
JeongWuk Dec 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
230 changes: 136 additions & 94 deletions src/app/page.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading