Skip to content

Commit

Permalink
Merge branch 'main' into feat/#151/application-status-api
Browse files Browse the repository at this point in the history
  • Loading branch information
@sscoderati
sscoderati authored Nov 12, 2023
2 parents 7515d07 + 0da80b9 commit 2f518ea
Show file tree
Hide file tree
Showing 17 changed files with 726 additions and 129 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"@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: 3 additions & 0 deletions pnpm-lock.yaml
View file

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

351 changes: 261 additions & 90 deletions src/app/(steady)/steady/create/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,17 @@
"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 @@ -9,6 +20,8 @@ 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 @@ -20,105 +33,263 @@ 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")}>
<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")}
/>
<SingleSelector
initialLabel={"스테디 정원"}
items={steadyParticipantsLimit}
className={cn("w-430")}
/>
</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")}
/>
<SingleSelector
initialLabel={"진행 방식"}
items={steadyRunningMethods}
className={cn("w-200")}
<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")}
/>
<SingleSelector
initialLabel={"예상 기간"}
items={steadyExpectedPeriods}
className={cn("w-200")}
<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")}
/>
<DateSelector
initialLabel={"마감일"}
className={cn("w-200")}
<FormField
control={steadyForm.control}
name={"name"}
render={({ field }) => (
<FormItem>
<FormControl>
<Input
inputName={"steady-title-input"}
onValueChange={(value) => {
field.onChange(value);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className={cn("mx-20 flex flex-row justify-start gap-15")}>
<MultiSelector
initialLabel={"기술 스택"}
items={steadyExpectedTechStacks}
className={cn("w-280")}
<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>
)}
/>
</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")}>
<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>
)}
/>

<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>
<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>

<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>
</div>
);
};
Expand Down
Loading

0 comments on commit 2f518ea

Please sign in to comment.