-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #158 from Make-A-Wish-Sopt/feature/156-wishesBtn
Feature/156 wishes btn
- Loading branch information
Showing
41 changed files
with
766 additions
and
863 deletions.
There are no files selected for viewing
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
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
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,50 @@ | ||
| import styled from 'styled-components'; | ||
| import { getMonth, getYear } from 'date-fns'; | ||
| import { MONTHS } from '@/constant/dateList'; | ||
|
|
||
|
|
||
| interface CalendarHeaderProps { | ||
| date: Date; | ||
| changeYear: (year: number) => void; | ||
| changeMonth: (month: number) => void; | ||
| } | ||
|
|
||
| export default function CalendarHeader(props: CalendarHeaderProps) { | ||
| const { date, changeYear, changeMonth } = props; | ||
|
|
||
| // 연도 range | ||
| const years = Array.from( | ||
| { length: getYear(new Date()) + 6 - getYear(new Date()) }, | ||
| (_, index) => getYear(new Date()) + index, | ||
| ); | ||
|
|
||
| return ( | ||
| <Styled.CalendarHeader> | ||
| <select value={getYear(date)} onChange={({ target: { value } }) => changeYear(Number(value))}> | ||
| {years.map((option: number) => ( | ||
| <option key={option} value={option}> | ||
| {option} | ||
| </option> | ||
| ))} | ||
| </select> | ||
| 년   | ||
| <select | ||
| value={MONTHS[getMonth(date)]} | ||
| onChange={({ target: { value } }) => changeMonth(MONTHS.indexOf(value))} | ||
| > | ||
| {MONTHS.map((option) => ( | ||
| <option key={option} value={option}> | ||
| {option} | ||
| </option> | ||
| ))} | ||
| </select> | ||
| 월 | ||
| </Styled.CalendarHeader> | ||
| ); | ||
| } | ||
|
|
||
| const Styled = { | ||
| CalendarHeader: styled.div` | ||
| width: 100%; | ||
| `, | ||
| }; |
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,38 +1,65 @@ | ||
| import theme from '@/styles/theme'; | ||
| import styled from 'styled-components'; | ||
| import Image from 'next/image'; | ||
| import CustomDatePicker from '../modal/CustomDatePicker'; | ||
| import { ko } from 'date-fns/locale'; | ||
| import InputBox from '../box/inputBox'; | ||
| import styled from 'styled-components'; | ||
| import theme from '@/styles/theme'; | ||
| import { ColorSystemType } from '@/types/common/box/boxStyleType'; | ||
| import { UseFormReturn } from 'react-hook-form'; | ||
| import { WishesDataInputType } from '@/types/common/input/wishesInput'; | ||
| import { CalendarGreyIc, CalendarIc } from '@/public/assets/icons'; | ||
| import DatePicker from 'react-datepicker'; | ||
| import 'react-datepicker/dist/react-datepicker.css'; | ||
| import CalendarHeader from './CalendarHeader'; | ||
| import { getDate } from '@/utils/common/getDate'; | ||
|
|
||
| interface CalendarProps { | ||
| date: Date; | ||
| changeStartDate?: (value: Date) => void; | ||
| calendarIcon: any; | ||
| methods: UseFormReturn<WishesDataInputType, any, undefined>; | ||
| disable: boolean; | ||
| colorSystem: ColorSystemType; | ||
| readOnly: boolean; | ||
| } | ||
|
|
||
| export default function Calendar(props: CalendarProps) { | ||
| const { date, changeStartDate, calendarIcon, readOnly } = props; | ||
| const { date, methods, disable, colorSystem, readOnly } = props; | ||
|
|
||
| const handleChangeDate = (selectedDate: Date) => { | ||
| methods.setValue('startDate', selectedDate); | ||
| methods.setValue('endDate', getDate(selectedDate, 7)); | ||
| }; | ||
|
|
||
| return ( | ||
| <InputBox boxType="inputBox--half" colorSystem="pastelBlue_gray2"> | ||
| <Styled.CalendarWrapper> | ||
| <CustomDatePicker date={date} changeStartDate={changeStartDate} readOnly={readOnly} /> | ||
| <Image src={calendarIcon} alt="캘린더 아이콘" /> | ||
| </Styled.CalendarWrapper> | ||
| <InputBox boxType="inputBox--calendar" colorSystem={colorSystem}> | ||
| <Styled.Wrapper> | ||
| <DatePicker | ||
| renderCustomHeader={({ date, changeYear, changeMonth }) => ( | ||
| <CalendarHeader date={date} changeYear={changeYear} changeMonth={changeMonth} /> | ||
| )} | ||
| locale={ko} | ||
| dateFormat="yyyy.MM.dd" | ||
| selected={new Date(date)} | ||
| onChange={handleChangeDate} | ||
| minDate={new Date()} | ||
| selectsEnd | ||
| readOnly={readOnly} | ||
| className="react-datepicker__input-container" | ||
| /> | ||
| {/* <CustomDatePicker date={date} methods={methods} readOnly={readOnly} /> */} | ||
| </Styled.Wrapper> | ||
| <Image src={disable ? CalendarGreyIc : CalendarIc} alt="캘린더 아이콘" /> | ||
| </InputBox> | ||
| ); | ||
| } | ||
|
|
||
| const Styled = { | ||
| CalendarWrapper: styled.div` | ||
| Wrapper: styled.div` | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| width: 100%; | ||
| height: 100%; | ||
| ${theme.fonts.body12}; | ||
| cursor: pointer; | ||
| `, | ||
| }; |
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,38 +1,44 @@ | ||
| import theme from '@/styles/theme'; | ||
| import { WishesDataInputType } from '@/types/common/input/wishesInput'; | ||
| import { PropsWithChildren } from 'react'; | ||
| import { UseFormRegisterReturn } from 'react-hook-form'; | ||
| import { FieldError, UseFormRegisterReturn } from 'react-hook-form'; | ||
| import styled from 'styled-components'; | ||
| import InputBox from '../box/inputBox'; | ||
| import { InputBoxTypes } from '@/types/common/box/boxStyleType'; | ||
| import { CakesDataInputType } from '@/types/common/input/cakesInput'; | ||
| import AlertTextBox from '../alertTextBox'; | ||
|
|
||
| interface InputProps { | ||
| width?: string; | ||
| boxType?: InputBoxTypes; | ||
| placeholder?: string; | ||
| readOnly?: boolean; | ||
| register: UseFormRegisterReturn<keyof WishesDataInputType | keyof CakesDataInputType>; | ||
| errors?: FieldError; | ||
| } | ||
|
|
||
| export default function Input(props: PropsWithChildren<InputProps>) { | ||
| const { width, boxType, placeholder, readOnly, register, children } = props; | ||
| const { width, boxType, placeholder, readOnly, register, errors, children } = props; | ||
|
|
||
| return ( | ||
| <InputBox | ||
| width={width} | ||
| boxType={boxType || 'inputBox--large'} | ||
| colorSystem="pastelBlue_darkBlue" | ||
| > | ||
| <StyledInput placeholder={placeholder} readOnly={readOnly} {...register} /> | ||
| {children} | ||
| </InputBox> | ||
| <> | ||
| <InputBox | ||
| width={width} | ||
| boxType={boxType || 'inputBox--large'} | ||
| colorSystem="pastelBlue_darkBlue" | ||
| > | ||
| <StyledInput placeholder={placeholder} readOnly={readOnly} {...register} /> | ||
| {children} | ||
| </InputBox> | ||
| {errors?.message && <AlertTextBox>{errors.message}</AlertTextBox>} | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| const StyledInput = styled.input` | ||
| ${theme.fonts.body12}; | ||
| color: ${theme.colors.dark_blue}; | ||
| export const StyledInput = styled.input` | ||
| width: 100%; | ||
| height: 100%; | ||
| ${theme.fonts.body12}; | ||
| color: ${theme.colors.dark_blue}; | ||
| `; |
Oops, something went wrong.