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

✨ Feat(#141): 스테디 생성 API 연동 구현 #158

Closed
wants to merge 1 commit into from
Closed

✨ Feat(#141): 스테디 생성 API 연동 구현 #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-scroll-area": "^1.0.5",
"@radix-ui/react-select": "^2.0.0",
Expand Down
3 changes: 0 additions & 3 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

351 changes: 90 additions & 261 deletions src/app/(steady)/steady/create/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,6 @@
"use client";

import { useForm } from "react-hook-form";
import { useRouter } from "next/navigation";
import {
Form,
FormControl,
FormField,
FormItem,
FormMessage,
} from "@/components/ui/form";
import { cn } from "@/lib/utils";
import useCreateSteadyStore from "@/stores/createSteadyData";
import { zodResolver } from "@hookform/resolvers/zod";
import { Separator, TextArea } from "@radix-ui/themes";
import Button, { buttonSize } from "@/components/_common/Button";
import Input from "@/components/_common/Input";
Expand All @@ -20,8 +9,6 @@ import {
MultiSelector,
SingleSelector,
} from "@/components/_common/Selector";
import { extractValue } from "@/utils/extractValue";
import { formatDate } from "@/utils/formatDate";
import {
RECRUITMENT_SECTION_INTRO,
STEADY_RECRUITMENT_EXAMPLE,
Expand All @@ -33,263 +20,105 @@ import {
steadyRecruitmentFields,
steadyRunningMethods,
} from "@/constants/create-steady";
import type { SteadyStateType } from "@/constants/schemas/steadySchema";
import { SteadySchema } from "@/constants/schemas/steadySchema";

const CreateSteadyPage = () => {
const router = useRouter();
const { setSteadyState } = useCreateSteadyStore();
const steadyForm = useForm<SteadyStateType>({
resolver: zodResolver(SteadySchema),
});

const onSubmit = (data: SteadyStateType) => {
setSteadyState(data);
router.push("/steady/create/questions");
};

return (
<div className={cn("mt-30")}>
<Form {...steadyForm}>
<form onSubmit={steadyForm.handleSubmit(onSubmit)}>
<h1 className={cn("mx-8 font-semibold")}>{STEADY_SECTION_INTRO}</h1>
<Separator
size={"4"}
my={"3"}
className={cn("h-5 bg-st-gray-400")}
<div>
<h1 className={cn("mx-8 font-semibold")}>{STEADY_SECTION_INTRO}</h1>
<Separator
size={"4"}
my={"3"}
className={cn("h-5 bg-st-gray-400")}
/>
<div className={cn("mx-40 flex flex-row justify-between")}>
<SingleSelector
initialLabel={"프로젝트 / 스터디"}
items={steadyCategories}
className={cn("w-430")}
/>
<div className={cn("mx-40 flex flex-row justify-between")}>
<FormField
control={steadyForm.control}
name={"type"}
render={({ field }) => (
<FormItem>
<SingleSelector
initialLabel={"프로젝트 / 스터디"}
items={steadyCategories}
className={cn("w-430")}
onSelectedChange={(selected) => {
field.onChange(selected);
}}
/>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={steadyForm.control}
name={"participantLimit"}
render={({ field }) => (
<FormItem>
<SingleSelector
initialLabel={"스테디 정원"}
items={steadyParticipantsLimit}
className={cn("w-430")}
onSelectedChange={(selected) => {
field.onChange(Number(selected));
}}
/>
<FormMessage />
</FormItem>
)}
/>
</div>
<Separator
size={"4"}
my={"3"}
className={cn("h-5 bg-st-gray-400")}
<SingleSelector
initialLabel={"스테디 정원"}
items={steadyParticipantsLimit}
className={cn("w-430")}
/>
<FormField
control={steadyForm.control}
name={"name"}
render={({ field }) => (
<FormItem>
<FormControl>
<Input
inputName={"steady-title-input"}
onValueChange={(value) => {
field.onChange(value);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
</div>
<Separator
size={"4"}
my={"3"}
className={cn("h-5 bg-st-gray-400")}
/>
<Input inputName={"steady-title-input"} />
<TextArea
className={cn("h-380 w-full")}
my={"3"}
/>
</div>
<div className={cn("mt-30")}>
<h1 className={cn("mx-8 font-semibold")}>
{RECRUITMENT_SECTION_INTRO}
</h1>
<Separator
size={"4"}
my={"3"}
className={cn("h-5 bg-st-gray-400")}
/>
<div className={cn("mx-20 flex flex-row justify-between gap-15")}>
<MultiSelector
initialLabel={"모집 분야"}
items={steadyRecruitmentFields}
className={cn("w-200")}
/>
<FormField
control={steadyForm.control}
name={"bio"}
render={({ field }) => (
<FormItem>
<FormControl>
<TextArea
className={cn("h-380 w-full")}
my={"3"}
placeholder={"스테디 소개"}
onChange={(event) => {
field.onChange(event.target.value);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
<SingleSelector
initialLabel={"진행 방식"}
items={steadyRunningMethods}
className={cn("w-200")}
/>
<div className={cn("mt-30")}>
<h1 className={cn("mx-8 font-semibold")}>
{RECRUITMENT_SECTION_INTRO}
</h1>
<Separator
size={"4"}
my={"3"}
className={cn("h-5 bg-st-gray-400")}
/>
<div className={cn("mx-20 flex flex-row justify-between gap-15")}>
<FormField
control={steadyForm.control}
name={"positions"}
render={({ field }) => (
<FormItem>
<MultiSelector
initialLabel={"모집 분야"}
items={steadyRecruitmentFields}
className={cn("w-200")}
onSelectedChange={(selected) => {
field.onChange(extractValue(selected).map(Number));
}}
/>
<FormMessage />
</FormItem>
)}
/>

<FormField
control={steadyForm.control}
name={"steadyMode"}
render={({ field }) => (
<FormItem>
<SingleSelector
initialLabel={"진행 방식"}
items={steadyRunningMethods}
className={cn("w-200")}
onSelectedChange={(selected) => {
field.onChange(selected);
}}
/>
<FormMessage />
</FormItem>
)}
/>

<FormField
control={steadyForm.control}
name={"scheduledPeriod"}
render={({ field }) => (
<FormItem>
<SingleSelector
initialLabel={"예상 기간"}
items={steadyExpectedPeriods}
className={cn("w-200")}
onSelectedChange={(selected) => {
field.onChange(selected);
}}
/>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={steadyForm.control}
name={"deadline"}
render={({ field }) => (
<FormItem>
<DateSelector
initialLabel={"마감일"}
className={cn("w-200")}
onDateChange={(date) => {
field.onChange(formatDate(date));
}}
/>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className={cn("mx-20 flex flex-row justify-start gap-15")}>
<FormField
control={steadyForm.control}
name={"stacks"}
render={({ field }) => (
<FormItem>
<MultiSelector
initialLabel={"기술 스택"}
items={steadyExpectedTechStacks}
className={cn("w-280")}
onSelectedChange={(selected) => {
field.onChange(extractValue(selected).map(Number));
}}
/>
<FormMessage />
</FormItem>
)}
/>
</div>
<SingleSelector
initialLabel={"예상 기간"}
items={steadyExpectedPeriods}
className={cn("w-200")}
/>
<DateSelector
initialLabel={"마감일"}
className={cn("w-200")}
/>
</div>
<div className={cn("mx-20 flex flex-row justify-start gap-15")}>
<MultiSelector
initialLabel={"기술 스택"}
items={steadyExpectedTechStacks}
className={cn("w-280")}
/>
</div>

<Separator
size={"4"}
my={"3"}
className={cn("h-5 bg-st-gray-400")}
/>
<FormField
control={steadyForm.control}
name={"title"}
render={({ field }) => (
<FormItem>
<Input
inputName={"title-input"}
onValueChange={(value) => {
field.onChange(value);
}}
/>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={steadyForm.control}
name={"content"}
render={({ field }) => (
<FormItem>
<TextArea
className={cn("h-720 w-full")}
my={"3"}
defaultValue={STEADY_RECRUITMENT_EXAMPLE}
onChange={(event) => {
field.onChange(event.target.value);
}}
/>
<FormMessage />
</FormItem>
)}
/>
<div className={"flex justify-end gap-20"}>
<Button
className={cn(`${buttonSize.sm} items-center justify-center`)}
>
취소
</Button>
<Button
className={cn(
`bg-st-primary ${buttonSize.sm} items-center justify-center text-st-white`,
)}
type={"submit"}
>
다음
</Button>
</div>
</div>
</form>
</Form>
<Separator
size={"4"}
my={"3"}
className={cn("h-5 bg-st-gray-400")}
/>
<Input inputName={"title-input"} />
<Input inputName={"tag-input"} />
<TextArea
className={cn("h-720 w-full")}
my={"3"}
defaultValue={STEADY_RECRUITMENT_EXAMPLE}
/>
<div className={"flex justify-end gap-20"}>
<Button
className={cn(`${buttonSize.sm} items-center justify-center`)}
>
취소
</Button>
<Button
className={cn(
`bg-st-primary ${buttonSize.sm} items-center justify-center text-st-white`,
)}
>
다음
</Button>
</div>
</div>
</div>
);
};
Expand Down
Loading
Loading