-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into feat/editor-ui
- Loading branch information
Showing
26 changed files
with
892 additions
and
151 deletions.
There are no files selected for viewing
Binary file added
BIN
+24.6 KB
.yarn/cache/@radix-ui-react-dialog-npm-1.1.1-b4155895dd-5f270518b6.zip
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
src/app/(sidebar)/my-recruit/components/NewRecruitDialogContent/InputField.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { If } from '@/components/If'; | ||
| import { ComponentProps, ReactNode } from 'react'; | ||
|
|
||
| interface Props extends ComponentProps<'input'> { | ||
| required?: boolean; | ||
| right?: ReactNode; | ||
| value: string; | ||
| } | ||
|
|
||
| export function InputField({ required = false, right, value, ...inputProps }: Props) { | ||
| return ( | ||
| <div className="w-full flex justify-between items-center p-12 bg-neutral-1 border-neutral-20 rounded-[8px] border-[1px]"> | ||
| <If condition={required}> | ||
| <div className="text-mint-40 text-label1">*</div> | ||
| </If> | ||
| <input value={value} className="flex-1 outline-none bg-transparent" {...inputProps} /> | ||
| <If condition={right != null}> | ||
| <div className="ml-[12px]">{right}</div> | ||
| </If> | ||
| </div> | ||
| ); | ||
| } |
142 changes: 142 additions & 0 deletions
142
src/app/(sidebar)/my-recruit/components/NewRecruitDialogContent/NewRecruitDialogContent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| import { Spacing } from '@/components/Spacing'; | ||
| import { TouchButton } from '@/components/TouchButton'; | ||
| import { Dialog } from '@/system/components/Dialog/ShadcnDialog'; | ||
| import { color } from '@/system/token/color'; | ||
| import { InputField } from './InputField'; | ||
| import { useState } from 'react'; | ||
| import { Icon } from '@/system/components'; | ||
| import { getCurrentYearAndHalf, getNextYearAndHalf } from './date'; | ||
| import { | ||
| DropdownMenu, | ||
| DropdownMenuContent, | ||
| DropdownMenuItem, | ||
| DropdownMenuTrigger, | ||
| } from '@/system/components/DropdownMenu/DropdownMenu'; | ||
| import clsx from 'clsx'; | ||
| import { motion } from 'framer-motion'; | ||
| import { Popover, PopoverContent, PopoverTrigger } from '@/system/components/Popover/Popover'; | ||
| import { Calendar } from '@/system/components/Calendar/Calendar'; | ||
| import { format } from 'date-fns/format'; | ||
| import { If } from '@/components/If'; | ||
|
|
||
| interface Props { | ||
| onSubmit: () => void; | ||
| } | ||
|
|
||
| const TITLE_MAX_LENGTH = 30; | ||
| // FIXME: 서버쪽에서 전달해주는 데이터로 교체 | ||
| const DEFAULT_DROPDOWN_PERIOD = [getCurrentYearAndHalf(), getNextYearAndHalf()]; | ||
|
|
||
| export function NewRecruitDialogContent() { | ||
| const [title, setTitle] = useState(''); | ||
| const [selectedPeriod, setSelectedPeriod] = useState(getCurrentYearAndHalf()); | ||
| const [link, setLink] = useState(''); | ||
| const [selectedDate, setSelectedDate] = useState<Date>(); | ||
|
|
||
| const isButtonActivated = title.length !== 0; | ||
| const isDateSelected = selectedDate != null; | ||
|
|
||
| return ( | ||
| <div className="p-20"> | ||
| <Dialog.Title> | ||
| <span className="text-neutral-95 text-body1 font-semibold">새 공고 추가하기</span> | ||
| </Dialog.Title> | ||
| <Spacing size={4} /> | ||
| <span className="text-caption1 text-neutral-35 font-regular">공고를 등록하고 정보를 모아보세요!</span> | ||
| <Spacing size={24} /> | ||
|
|
||
| {/* 공고 제목 입력 */} | ||
| <InputField | ||
| required | ||
| value={title} | ||
| placeholder="공고 제목을 입력해주세요" | ||
| maxLength={TITLE_MAX_LENGTH} | ||
| right={<span className="text-neutral-60 text-caption2">{`${title.length}/${TITLE_MAX_LENGTH}`}</span>} | ||
| onChange={(event) => setTitle(event.target.value)} | ||
| /> | ||
| <Spacing size={8} /> | ||
|
|
||
| {/* 지원 시기 입력 */} | ||
| <DropdownMenu> | ||
| <DropdownMenuTrigger asChild> | ||
| <button className="w-full flex justify-between items-center p-12 bg-neutral-1 border-neutral-20 rounded-[8px] border-[1px]"> | ||
| <span>{selectedPeriod}</span> | ||
| <Icon name="down" size={24} color="#878A93" /> | ||
| </button> | ||
| </DropdownMenuTrigger> | ||
| <DropdownMenuContent className="w-360 py-8"> | ||
| {/* TODO: 이전 공고들의 연도들도 추가 */} | ||
| {[...DEFAULT_DROPDOWN_PERIOD].reverse().map((period) => ( | ||
| <DropdownMenuItem | ||
| key={period} | ||
| className="w-full flex justify-between px-16 py-8" | ||
| onClick={() => setSelectedPeriod(period)}> | ||
| <span className={clsx('text-label1', period === selectedPeriod ? 'text-neutral-30' : 'text-neutral-80')}> | ||
| {period} | ||
| </span> | ||
| <If condition={period === selectedPeriod}> | ||
| <Icon size={16} name="check" color="#AEB0B6" /> | ||
| </If> | ||
| </DropdownMenuItem> | ||
| ))} | ||
| </DropdownMenuContent> | ||
| </DropdownMenu> | ||
| <Spacing size={8} /> | ||
|
|
||
| {/* 마감일 입력 */} | ||
| <div className="w-full flex justify-between items-center p-12 bg-neutral-1 border-neutral-20 rounded-[8px] border-[1px]"> | ||
| <span className="text-label1 text-neutral-95">서류마감</span> | ||
| <Popover> | ||
| <PopoverTrigger> | ||
| <motion.div | ||
| initial="initial" | ||
| variants={{ | ||
| initial: { backgroundColor: 'rgb(241, 242, 243, 0)' }, | ||
| touch: { scale: 0.96, transition: { duration: 0.1 } }, | ||
| hover: { backgroundColor: 'rgb(241, 242, 243, 1)' }, | ||
| }} | ||
| whileTap="touch" | ||
| whileHover="hover" | ||
| className="px-8 py-4 flex items-center gap-[4px] rounded-[4px]"> | ||
| <Icon name={isDateSelected ? 'calendarFill' : 'calendar'} size={20} color="#AEB0B6" /> | ||
| <span className={clsx('text-label2', isDateSelected ? 'text-neutral-95' : 'text-neutral-40')}> | ||
| {isDateSelected ? format(selectedDate, 'yyyy.mm.dd') : '마감일을 선택해주세요'} | ||
| </span> | ||
| </motion.div> | ||
| </PopoverTrigger> | ||
| <PopoverContent className="w-200"> | ||
| <Calendar mode="single" selected={selectedDate} onSelect={setSelectedDate} /> | ||
| </PopoverContent> | ||
| </Popover> | ||
| </div> | ||
| <Spacing size={8} /> | ||
|
|
||
| {/* 공고 링크 입력 */} | ||
| <InputField | ||
| value={link} | ||
| placeholder="공고 링크를 입력해주세요" | ||
| right={<Icon name={link.length === 0 ? 'unlink' : 'link'} size={16} color="#70737C" />} | ||
| onChange={(event) => setLink(event.target.value)} | ||
| /> | ||
| <Spacing size={20} /> | ||
|
|
||
| {/* 제출 버튼 */} | ||
| <TouchButton | ||
| variants={{ | ||
| inactive: { | ||
| backgroundColor: color.neutral5, | ||
| color: color.neutral30, | ||
| }, | ||
| active: { | ||
| backgroundColor: color.neutral95, | ||
| color: color.white, | ||
| }, | ||
| }} | ||
| animate={isButtonActivated ? 'active' : 'inactive'} | ||
| disabled={isButtonActivated === false} | ||
| className="w-full flex justify-center items-center h-48 rounded-[6px]"> | ||
| 공고 추가하기 | ||
| </TouchButton> | ||
| </div> | ||
| ); | ||
| } |
26 changes: 26 additions & 0 deletions
26
src/app/(sidebar)/my-recruit/components/NewRecruitDialogContent/date.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| // NOTE: 서버에서 넘어오는 값에 따라 변경될 예정입니다. | ||
| export function getCurrentYearAndHalf() { | ||
| const now = new Date(); | ||
| const year = now.getFullYear(); | ||
| const month = now.getMonth() + 1; | ||
|
|
||
| const half = month <= 6 ? '상반기' : '하반기'; | ||
|
|
||
| return `${year}년 ${half}`; | ||
| } | ||
|
|
||
| export function getNextYearAndHalf() { | ||
| const now = new Date(); | ||
| let year = now.getFullYear(); | ||
| const month = now.getMonth() + 1; | ||
|
|
||
| let half: string; | ||
| if (month <= 6) { | ||
| half = '하반기'; | ||
| } else { | ||
| half = '상반기'; | ||
| year += 1; | ||
| } | ||
|
|
||
| return `${year}년 ${half}`; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,43 @@ | ||
| 'use client'; | ||
|
|
||
| import { Icon } from '@/system/components'; | ||
| import { TouchButton } from '@/components/TouchButton'; | ||
| import { Spacing } from '@/components/Spacing'; | ||
| import { ProgressingRecruitment } from './containers/ProgressingRecruitment'; | ||
| import { AllRecruitment } from './containers/AllRecruitment'; | ||
| import { useState } from 'react'; | ||
| import { Dialog } from '@/system/components/Dialog/ShadcnDialog'; | ||
| import { NewRecruitDialogContent } from './components/NewRecruitDialogContent/NewRecruitDialogContent'; | ||
|
|
||
| export default function MyRecruit() { | ||
| return ( | ||
| <div className="max-w-[1700px] py-[64px] px-[80px] mx-auto"> | ||
| <div className="flex justify-between"> | ||
| <h1 className="text-title2 font-bold">내 공고 뽀각</h1> | ||
| <div className="flex gap-[16px]"> | ||
| <TouchButton className="bg-white flex gap-[4px] py-[8px] px-[12px] rounded-[6px]"> | ||
| <Icon name="copy" size={16} color="#CCCDD1" /> | ||
| <span className="text-label1 font-semibold text-neutral-20">내 정보 가져오기</span> | ||
| </TouchButton> | ||
| <TouchButton className="bg-neutral-95 flex items-center gap-[4px] py-[8px] px-[16px] rounded-[6px]"> | ||
| <Icon name="add" size={24} color="#20E79D" /> | ||
| <span className="text-label1 text-white font-semibold">새 공고</span> | ||
| </TouchButton> | ||
| <Dialog> | ||
| <div className="max-w-[1700px] py-[64px] px-[80px] mx-auto"> | ||
| <div className="flex justify-between"> | ||
| <h1 className="text-title2 font-bold">내 공고 뽀각</h1> | ||
| <div className="flex gap-[16px]"> | ||
| <TouchButton className="bg-white flex gap-[4px] py-[8px] px-[12px] rounded-[6px]"> | ||
| <Icon name="copy" size={16} color="#CCCDD1" /> | ||
| <span className="text-label1 font-semibold text-neutral-20">내 정보 가져오기</span> | ||
| </TouchButton> | ||
| <Dialog.Trigger asChild> | ||
| <div> | ||
| <TouchButton className="bg-neutral-95 flex items-center gap-[4px] py-[8px] px-[16px] rounded-[6px]"> | ||
| <Icon name="add" size={24} color="#20E79D" /> | ||
| <span className="text-label1 text-white font-semibold">새 공고</span> | ||
| </TouchButton> | ||
| </div> | ||
| </Dialog.Trigger> | ||
| </div> | ||
| </div> | ||
| <Spacing size={54} /> | ||
| <ProgressingRecruitment /> | ||
| <Spacing size={88} /> | ||
| <AllRecruitment /> | ||
| </div> | ||
| <Spacing size={54} /> | ||
| <ProgressingRecruitment /> | ||
| <Spacing size={88} /> | ||
| <AllRecruitment /> | ||
| </div> | ||
| <Dialog.Content className="w-400"> | ||
| <NewRecruitDialogContent /> | ||
| </Dialog.Content> | ||
| </Dialog> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.