Skip to content

Commit

Permalink
Merge pull request #299 from Team-Blitz-Steady/style/#286/steady
Browse files Browse the repository at this point in the history 
💄Style(#286): 스테디 관련 페이지 반응형 완료
  • Loading branch information
@JIY00N2
JIY00N2 authored Nov 30, 2023
2 parents 8f58962 + cbb80e8 commit 9ee0a7e
Show file tree
Hide file tree
Showing 6 changed files with 574 additions and 521 deletions.
111 changes: 58 additions & 53 deletions src/app/(steady)/steady/create/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,9 @@ const CreateSteadyPage = () => {
};

return (
<div className={cn("mt-30")}>
<div
className={cn("mt-10 max-sm:w-400 sm:w-450 md:w-600 lg:w-800 xl:w-1000")}
>
<Form {...steadyForm}>
<form onSubmit={steadyForm.handleSubmit(onSubmit)}>
<h1 className={cn("mx-8 font-semibold")}>
Expand All @@ -92,49 +94,52 @@ const CreateSteadyPage = () => {
my={"3"}
className={cn("h-3 bg-st-gray-400")}
/>
<FormField
control={steadyForm.control}
name={"name"}
render={({ field }) => (
<FormItem>
<FormControl>
<Input
inputName={"steady-title-input"}
onValueChange={(value) => {
field.onChange(value);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className={cn("my-10")}></div>
<FormField
control={steadyForm.control}
name={"bio"}
render={({ field }) => (
<FormItem>
<FormControl>
<Input
inputName={"steady-bio-input"}
onValueChange={(value) => {
field.onChange(value);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className={cn("mt-30")}>
<div className="flex flex-col gap-10">
<FormField
control={steadyForm.control}
name={"name"}
render={({ field }) => (
<FormItem>
<FormControl>
<Input
inputName={"steady-title-input"}
onValueChange={(value) => {
field.onChange(value);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={steadyForm.control}
name={"bio"}
render={({ field }) => (
<FormItem>
<FormControl>
<Input
inputName={"steady-bio-input"}
onValueChange={(value) => {
field.onChange(value);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className={cn("mt-10")}>
<Separator
size={"4"}
my={"3"}
className={cn("h-3 bg-st-gray-400")}
/>
<div
className={cn("mx-20 my-10 flex flex-row justify-between gap-15")}
className={cn(
"mb-15 grid items-center justify-center gap-15 px-20 max-sm:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4",
)}
>
<FormField
control={steadyForm.control}
Expand All @@ -144,7 +149,7 @@ const CreateSteadyPage = () => {
<SingleSelector
initialLabel={"프로젝트 / 스터디"}
items={steadyCategories}
className={cn("w-200")}
className={cn("w-full")}
onSelectedChange={(selected) => {
field.onChange(selected);
}}
Expand All @@ -162,7 +167,7 @@ const CreateSteadyPage = () => {
<SingleSelector
initialLabel={"진행 방식"}
items={steadyRunningMethods}
className={cn("w-200")}
className={cn("w-full")}
onSelectedChange={(selected) => {
field.onChange(selected);
}}
Expand All @@ -180,7 +185,7 @@ const CreateSteadyPage = () => {
<SingleSelector
initialLabel={"스테디 정원"}
items={steadyParticipantsLimit}
className={cn("w-200")}
className={cn("w-full")}
onSelectedChange={(selected) => {
field.onChange(Number(selected));
}}
Expand All @@ -197,7 +202,7 @@ const CreateSteadyPage = () => {
<FormItem>
<DateSelector
initialLabel={"마감일"}
className={cn("w-200")}
className={cn("w-full")}
onDateChange={(date) => {
field.onChange(format(date, "yyyy-MM-dd"));
}}
Expand All @@ -207,23 +212,20 @@ const CreateSteadyPage = () => {
</FormItem>
)}
/>
</div>
<div
className={cn("mx-20 my-10 flex flex-row justify-between gap-15")}
>

<FormField
control={steadyForm.control}
name={"positions"}
render={({ field }) => (
<FormItem>
<FormItem className="h-40">
<MultiSelector
initialLabel={"모집 분야"}
// TODO: steadyState?.positions에 있는 id값을 가진 position을 뽑아서 initialData로 넣어줘야 함
items={positions.positions.map((position) => ({
value: position.id.toString(),
label: position.name,
}))}
className={cn("w-200")}
className={cn("w-full")}
onSelectedChange={(selected) => {
field.onChange(extractValue(selected).map(Number));
}}
Expand All @@ -241,7 +243,7 @@ const CreateSteadyPage = () => {
<SingleSelector
initialLabel={"예상 기간"}
items={steadyExpectedPeriods}
className={cn("w-200")}
className={cn("w-full")}
onSelectedChange={(selected) => {
field.onChange(selected);
}}
Expand All @@ -255,14 +257,14 @@ const CreateSteadyPage = () => {
control={steadyForm.control}
name={"stacks"}
render={({ field }) => (
<FormItem>
<FormItem className="h-40 w-450 max-sm:w-360 sm:w-410">
<MultiSelector
initialLabel={"기술 스택"}
items={stacks.stacks.map((stack) => ({
value: stack.id.toString(),
label: stack.name,
}))}
className={cn("w-455")}
className={cn("w-full")}
onSelectedChange={(selected) => {
field.onChange(extractValue(selected).map(Number));
}}
Expand Down Expand Up @@ -316,9 +318,12 @@ const CreateSteadyPage = () => {
control={steadyForm.control}
name={"content"}
render={({ field }) => (
<FormItem>
<FormItem
className={
"my-10 h-720 w-full rounded-10 border-2 border-st-gray-75"
}
>
<RichEditor
className={"min-h-720 w-full"}
contentEditableClassName={"prose"}
onChange={(markdown) => {
unified()
Expand Down
Loading

0 comments on commit 9ee0a7e

Please sign in to comment.