From bc72ac2f6345a6133f2fb7e47207116ae9989de2 Mon Sep 17 00:00:00 2001 From: hyosin Date: Wed, 10 Apr 2024 22:03:45 +0900 Subject: [PATCH 001/220] =?UTF-8?q?chore:=20fill-opacity=20camelCase?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95=20(=EB=B8=8C=EB=9D=BC=EC=9A=B0?= =?UTF-8?q?=EC=A0=80=20warning=20=ED=95=B4=EA=B2=B0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Assets/SearchIcon.tsx | 2 +- src/Assets/SelectArrow.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Assets/SearchIcon.tsx b/src/Assets/SearchIcon.tsx index 650b7cd8..ae1d1187 100644 --- a/src/Assets/SearchIcon.tsx +++ b/src/Assets/SearchIcon.tsx @@ -9,7 +9,7 @@ export const SearchIcon = () => { clip-rule="evenodd" d="M9.68274 16.3656C7.89774 16.3656 6.21954 15.6705 4.95744 14.4084C3.69534 13.1463 3.00024 11.4681 3.00024 9.68311C3.00024 7.89811 3.69534 6.21991 4.95744 4.95781C6.21954 3.69571 7.89774 3.00061 9.68274 3.00061C11.4677 3.00061 13.1459 3.69571 14.408 4.95781C15.6701 6.21991 16.3652 7.89811 16.3652 9.68311C16.3652 11.2665 15.8183 12.7659 14.8138 13.9653L15.5256 14.6772L15.8504 14.3523C16.3103 13.8924 17.0585 13.8924 17.5181 14.3523L17.9774 14.8116L17.9773 14.8118L18.0974 14.9319C18.32 15.1545 18.4427 15.4509 18.4427 15.7659C18.4427 15.8803 18.4266 15.9921 18.3953 16.0989C19.5324 17.2361 20.1883 17.9037 20.5202 18.2619C20.8355 18.6021 20.9999 18.7938 20.9999 19.0968C20.9999 19.3506 20.9012 19.5888 20.7218 19.7682L20.2448 20.2452V20.2449L19.7679 20.7219C19.5885 20.9013 19.35 21 19.0965 21C18.8427 21 18.6045 20.9013 18.4251 20.7219L16.0984 18.3953C15.9915 18.4266 15.8794 18.4428 15.7649 18.4428H15.7655C15.4505 18.4428 15.1544 18.3201 14.9315 18.0975L14.8115 17.9775L14.4722 17.6382L14.3522 17.5182C13.8923 17.0583 13.8923 16.3101 14.3522 15.8505L14.6771 15.5257L13.9653 14.8139C12.7658 15.8186 11.2663 16.3656 9.68274 16.3656ZM15.3206 16.7895L15.3207 16.7894L15.7655 17.2342L16.4996 16.5L17.348 17.3484L17.0482 17.6482L19.0965 19.6965L19.3964 19.3965L19.3965 19.3965L19.6766 19.1163C19.2969 18.7038 18.4377 17.8386 17.6485 17.0489L17.3483 17.349V17.3484L16.4999 16.5L17.2343 15.7656L16.7897 15.321L16.7899 15.3209L16.6844 15.2154L15.95 15.9498H15.9497L15.2153 16.6842L15.3206 16.7895ZM9.68274 4.20001C6.65964 4.20001 4.19994 6.65971 4.19994 9.68281C4.19994 12.7059 6.65964 15.1656 9.68274 15.1656C12.7058 15.1656 15.1655 12.7062 15.1655 9.68281C15.1655 6.65941 12.7061 4.20001 9.68274 4.20001Z" fill="black" - fill-opacity="0.45" + fillOpacity="0.45" /> diff --git a/src/Assets/SelectArrow.tsx b/src/Assets/SelectArrow.tsx index d4974d17..469452d1 100644 --- a/src/Assets/SelectArrow.tsx +++ b/src/Assets/SelectArrow.tsx @@ -5,7 +5,7 @@ export const SelectArrow = () => { id="Vector" d="M20.9999 7.92031C20.9999 8.07391 20.9414 8.22751 20.8241 8.34451L12.8339 16.335C12.374 16.7949 11.6258 16.7949 11.1662 16.335L3.17572 8.34451C2.94142 8.11021 2.94142 7.73041 3.17572 7.49611C3.41002 7.26181 3.78982 7.26181 4.02412 7.49611L11.9999 15.4719L19.9757 7.49611C20.21 7.26181 20.5898 7.26181 20.8241 7.49611C20.9414 7.61341 20.9999 7.76671 20.9999 7.92031Z" fill="black" - fill-opacity="0.45" + fillOpacity="0.45" /> ); From 44d6dff37526934f929e6d7bab12b9bc84598649 Mon Sep 17 00:00:00 2001 From: hyosin Date: Wed, 10 Apr 2024 22:16:46 +0900 Subject: [PATCH 002/220] =?UTF-8?q?feat:=20=EB=AA=A8=EC=A7=91=EA=B3=B5?= =?UTF-8?q?=EA=B3=A0=20=EB=A7=88=EA=B0=90=20=EB=82=A0=EC=A7=9C=20react-hoo?= =?UTF-8?q?k-forms=EB=A1=9C=20=EA=B0=92=20=EA=B4=80=EB=A6=AC=20(#152)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Calendar/EndDate.tsx | 67 +++++++++++++---------------- 1 file changed, 29 insertions(+), 38 deletions(-) diff --git a/src/Components/Calendar/EndDate.tsx b/src/Components/Calendar/EndDate.tsx index 7519b96e..e4a0ba19 100644 --- a/src/Components/Calendar/EndDate.tsx +++ b/src/Components/Calendar/EndDate.tsx @@ -1,54 +1,45 @@ // react-datepicker를 사용해서 마감날짜 구현 328px, 44px, ex) 24.01.23 -import DatePicker from 'react-datepicker'; +import DatePicker, { ReactDatePicker } from 'react-datepicker'; import { useState } from 'react'; import 'react-datepicker/dist/react-datepicker.css'; import styled from 'styled-components'; -import { OptionalCreates } from '@/Pages/Studies/CreateRecruitment'; +// import { OptionalCreates } from '@/Pages/CreateRecruitment'; import { Creates } from '@/Types/studies'; +import { UseFormRegister } from 'react-hook-form'; +import React from 'react'; -export type Props = { - onClick?: () => void; - children?: React.ReactNode; - // onChange?: (event: string) => void; - setForm: (any: OptionalCreates) => void; - useForm: Creates; - value?: string; - type?: string; - name?: string; - maxlength?: number; - id?: string; - formData?: number | string; - ref?: string; -}; +interface IFormValues { + recruitmentEndDateTime: string; +} +export const EndDate = React.forwardRef, ReturnType>>( + ({ onChange, name }, ref) => { + const [startDate, setStartDate] = useState(new Date()); -export const EndDate = ({ useForm }: Props) => { - const [startDateTime, setForms] = useState(new Date()); - - return ( - setForms(date)} - placeholderText="ex)24.01.07" - isClearable={true} - /> - ); -}; + const onDateChange = (date: null | Date | [Date, Date]) => { + const selected = date ? date.toString() : ''; + setStartDate(selected); + onChange({ target: selected, type: selected }); + }; + return ( + onDateChange(date)} + placeholderText="ex)24.01.07" + isClearable={false} + ref={ref} + shouldCloseOnSelect // 날짜를 선택하면 자동으로 닫힌다 + /> + ); + }, +); const DateContainer = styled(DatePicker)` width: 328px; height: 24px; - background-color: ${(props) => props.theme.color.gray3}; align-items: center; align-self: stretch; - border: 1px solid #cbcdd1; - border-width: 0; - background: ${(props) => props.theme.color.gray1}; resize: none; flex: 1 0 0; - margin-top: 10px; - padding-bottom: 10px; - padding-right: 16px; - padding-left: 16px; `; From 51fd6717cb5d3f73b33af63a190efedf1ea4188c Mon Sep 17 00:00:00 2001 From: hyosin Date: Wed, 10 Apr 2024 22:17:10 +0900 Subject: [PATCH 003/220] =?UTF-8?q?feat:=20=EC=97=B0=EB=9D=BD=20url=20reac?= =?UTF-8?q?t-hook-forms=EB=A1=9C=20=EA=B0=92=20=EA=B4=80=EB=A6=AC=20(#152)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Textarea/ContactUrlInput.tsx | 48 ++++++--------------- 1 file changed, 12 insertions(+), 36 deletions(-) diff --git a/src/Components/Textarea/ContactUrlInput.tsx b/src/Components/Textarea/ContactUrlInput.tsx index c273ec45..4512b318 100644 --- a/src/Components/Textarea/ContactUrlInput.tsx +++ b/src/Components/Textarea/ContactUrlInput.tsx @@ -1,46 +1,22 @@ -import { ChangeEvent } from 'react'; +import React from 'react'; +import { UseFormRegister } from 'react-hook-form'; import styled from 'styled-components'; -import { OptionalCreates } from '@/Pages/Studies/CreateRecruitment'; -import { Creates } from '@/Types/studies'; -export type Props = { - onClick?: () => void; - children?: React.ReactNode; - // onChange?: (event: string) => void; - setForm: (any: OptionalCreates) => void; - useForm: Creates; - value?: string; - type?: string; - name?: string; - maxlength?: number; - id?: string; - formData?: number | string; - ref?: string; -}; +interface IFormValues { + callUrl: string; +} +export const ContactUrlInput = React.forwardRef>>( + ({ onChange, name }, ref) => { + return ; + }, +); -export const ContactUrlInput = ({ setForm, useForm }: Props) => { - // const [UrlValue, setForms] = useState(''); - const onUrlHandler = (event: ChangeEvent) => { - setForm({ callUrl: event.target.value }); - }; - return ( - onUrlHandler(event)} - placeholder="ex)오픈 카카오톡 링크" - /> - ); -}; - -const InputContainer = styled.textarea` +const InputContainer = styled.input` width: 392px; height: 44px; - background-color: ${(props) => props.theme.color.gray3}; + background-color: ${(props) => props.theme.color.white}; border-radius: 8px; border: 1px solid #cbcdd1; - background: ${(props) => props.theme.color.gray1}; color: ${(props) => props.theme.color.gray3}; padding-left: 16px; `; From 5cc1eccc9c723b2a68a0d716ba3aff97467880ff Mon Sep 17 00:00:00 2001 From: hyosin Date: Wed, 10 Apr 2024 22:18:20 +0900 Subject: [PATCH 004/220] =?UTF-8?q?feat:=20=EC=A7=80=EC=9B=90=EC=9E=90=20?= =?UTF-8?q?=EC=88=98=20react-hook-forms=EB=A1=9C=20=EA=B0=92=20=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=20(WIP)=20(#152)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Selectbox/ApplicantButton.tsx | 89 ++++++++------------ 1 file changed, 34 insertions(+), 55 deletions(-) diff --git a/src/Components/Selectbox/ApplicantButton.tsx b/src/Components/Selectbox/ApplicantButton.tsx index 962c92c8..42be3688 100644 --- a/src/Components/Selectbox/ApplicantButton.tsx +++ b/src/Components/Selectbox/ApplicantButton.tsx @@ -1,57 +1,36 @@ -import styled from 'styled-components'; -import { ChangeEvent } from 'react'; -import { OptionalCreates } from '@/Pages/Studies/CreateRecruitment'; -import { Creates } from '@/Types/studies'; +import React from 'react'; +import { UseFormRegister } from 'react-hook-form'; +import { SelectArrow } from '@/Assets/SelectArrow'; +import { IconWrap, Container, Select, TextWrap } from './index.style'; +export type Props = any; -export type Props = { - onClick?: () => void; - children?: React.ReactNode; - // onChange?: (event: string) => void; - setForm: (any: OptionalCreates) => void; - useForm: Creates; - value?: string; - type?: string; - name?: string; - maxlength?: number; - id?: string; - formData?: number | string; - ref?: string; -}; +interface IFormValues { + applicantCount: number; +} -export const ApplicantButton = ({ setForm, useForm }: Props) => { - const ApplyHandler = (event: ChangeEvent) => { - setForm({ applicantCount: event.target.selectedIndex }); - }; - return ( - - 모집 인원 - 1명 - 2명 - 3명 - 4명 - 5명 - 6명 - 7명 - 8명 - 9명 - 10명 - - ); -}; - -const ButtonConTainer = styled.select` - width: 392px; - height: 44px; - background-color: ${(props) => props.theme.color.gray3}; - border-radius: 8px; - border: 1px solid #cbcdd1; - background: ${(props) => props.theme.color.gray1}; - color: ${(props) => props.theme.color.gray3}; - padding-left: 16px; -`; - -const Textwrapper = styled.option` - background: ${(props) => props.theme.color.gray1}; - color: ${(props) => props.theme.color.gray3}; - padding-left: 16px; -`; +export const ApplicantButton = React.forwardRef>>( + ({ onChange, onBlur, name }: Props, ref) => { + return ( + + + + + + + ); + }, +); From fac075d8f8f915aeef18057c06985688d9e0281f Mon Sep 17 00:00:00 2001 From: hyosin Date: Wed, 10 Apr 2024 22:18:57 +0900 Subject: [PATCH 005/220] =?UTF-8?q?feat:=20=ED=8F=AC=EC=A7=80=EC=85=98=20r?= =?UTF-8?q?eact-hook-forms=EB=A1=9C=20=EA=B0=92=20=EA=B4=80=EB=A6=AC=20(WI?= =?UTF-8?q?P)=20(#152)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Selectbox/PositionButton.tsx | 74 ++++++++------------- 1 file changed, 27 insertions(+), 47 deletions(-) diff --git a/src/Components/Selectbox/PositionButton.tsx b/src/Components/Selectbox/PositionButton.tsx index 15397997..74d0d54a 100644 --- a/src/Components/Selectbox/PositionButton.tsx +++ b/src/Components/Selectbox/PositionButton.tsx @@ -1,51 +1,31 @@ -import styled from 'styled-components'; -import { OptionalCreates } from '@/Pages/Studies/CreateStudy'; +import React from 'react'; + +// import { OptionalCreates } from '@/Pages/Studies/CreateStudy'; import { Creates } from '@/Types/studies'; import { ChangeEvent } from 'react'; +import { UseFormRegister } from 'react-hook-form'; +import { SelectArrow } from '@/Assets/SelectArrow'; +import { IconWrap, Container, Select, TextWrap } from './index.style'; -export type Props = { - onClick?: () => void; - children?: React.ReactNode; - // onChange?: (event: string) => void; - setForm: (any: OptionalCreates) => void; - useForm: Creates; - value?: string; - type?: string; - name?: string; - maxlength?: number; - id?: string; - formData?: number | string; - ref?: string; -}; - -export const PositionButton = ({ setForm, useForm }: Props) => { - const PositionHandler = (event: ChangeEvent) => { - setForm({ positionId: event.target.selectedIndex }); - }; - return ( - - 포지션 - 백엔드 - 프론트엔드 - 디자이너 - 데브옵스 - - ); -}; - -const ButtonConTainer = styled.select` - width: 392px; - height: 44px; - background-color: ${(props) => props.theme.color.gray3}; - border-radius: 8px; - border: 1px solid #cbcdd1; - background: ${(props) => props.theme.color.gray1}; - color: ${(props) => props.theme.color.gray3}; - padding-left: 16px; -`; +interface IFormValues { + positionId: number; +} -const Textwrapper = styled.option` - background: ${(props) => props.theme.color.gray1}; - color: ${(props) => props.theme.color.gray3}; - padding-left: 16px; -`; +export const PositionButton = React.forwardRef>>( + ({ onChange, name }, ref) => { + return ( + + + + + + + ); + }, +); From b84089eda8eea4197a4945c39a7bd9937463d684 Mon Sep 17 00:00:00 2001 From: hyosin Date: Wed, 10 Apr 2024 22:19:18 +0900 Subject: [PATCH 006/220] =?UTF-8?q?feat:=20=EA=B8=B0=EC=88=A0=20=EC=8A=A4?= =?UTF-8?q?=ED=83=9D=20react-hook-forms=EB=A1=9C=20=EA=B0=92=20=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=20(#152)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Selectbox/StackSelect.tsx | 37 ++++++++++++ .../Selectbox/StackSelectButton.tsx | 56 ------------------- 2 files changed, 37 insertions(+), 56 deletions(-) create mode 100644 src/Components/Selectbox/StackSelect.tsx delete mode 100644 src/Components/Selectbox/StackSelectButton.tsx diff --git a/src/Components/Selectbox/StackSelect.tsx b/src/Components/Selectbox/StackSelect.tsx new file mode 100644 index 00000000..7be39d7f --- /dev/null +++ b/src/Components/Selectbox/StackSelect.tsx @@ -0,0 +1,37 @@ +import styled from 'styled-components'; +// import { OptionalCreates } from '@/Pages/Studies/CreateRecruitment'; +import { Creates, ItemCategory } from '@/Types/studies'; +import { ChangeEvent, forwardRef } from 'react'; +import { StackItem } from '@/Types/studies'; +import { useStack } from '@/Hooks/stack/useStack'; +import { IconWrap, Container, Select, TextWrap } from './index.style'; +import { UseFormRegister } from 'react-hook-form'; +import { SelectArrow } from '@/Assets/SelectArrow'; + +export type Props = { + item?: StackItem; +}; + +interface IFormValues { + stackId: number; +} +export const StackSelect = forwardRef> & Props>( + ({ name, onChange }, ref) => { + const { data } = useStack(); + + return ( + + + + + + + ); + }, +); diff --git a/src/Components/Selectbox/StackSelectButton.tsx b/src/Components/Selectbox/StackSelectButton.tsx deleted file mode 100644 index 4ff93fef..00000000 --- a/src/Components/Selectbox/StackSelectButton.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import styled from 'styled-components'; -import { OptionalCreates } from '@/Pages/Studies/CreateRecruitment'; -import { Creates, ItemCategory } from '@/Types/studies'; -import { ChangeEvent } from 'react'; -import { StackItem } from '@/Types/studies'; -import { useStack } from '@/Hooks/stack/useStack'; - -export type Props = { - onClick?: () => void; - children?: React.ReactNode; - setForm: (any: OptionalCreates) => void; - useForm: Creates; - value?: string; - type?: string; - name?: string; - maxlength?: number; - id?: string; - formData?: number | string; - ref?: string; - item?: StackItem; -}; - -export const StackSelectButton = ({ setForm, useForm }: Props) => { - const { data } = useStack(); - const StackHandler = (event: ChangeEvent) => { - setForm({ stackId: event.target.selectedIndex }); - }; - return ( - - {data?.stacks.map((item: ItemCategory) => ( - {item.name} - ))} - - ); -}; - -const ButtonConTainer = styled.select` - width: 392px; - height: 44px; - background-color: ${(props) => props.theme.color.gray3}; - border-radius: 8px; - border: 1px solid #cbcdd1; - background: ${(props) => props.theme.color.gray1}; - color: ${(props) => props.theme.color.gray3}; - padding-left: 16px; -`; - -const Textwrapper = styled.option` - background: ${(props) => props.theme.color.gray1}; - color: ${(props) => props.theme.color.gray3}; - padding-left: 16px; - & option:focus { - background: #efecff; - color: #9f99e5; - } -`; From 0e1f027beb8331e99c57607b97a00988cdd7c956 Mon Sep 17 00:00:00 2001 From: hyosin Date: Wed, 10 Apr 2024 22:19:48 +0900 Subject: [PATCH 007/220] =?UTF-8?q?feat:=20=EC=97=B0=EB=9D=BD=20=EB=B0=A9?= =?UTF-8?q?=EB=B2=95=20react-hook-forms=EB=A1=9C=20=EA=B0=92=20=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=20(#152)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Selectbox/ContactButton.tsx | 72 ++++++++-------------- 1 file changed, 25 insertions(+), 47 deletions(-) diff --git a/src/Components/Selectbox/ContactButton.tsx b/src/Components/Selectbox/ContactButton.tsx index 6d1bf9a2..37940c8c 100644 --- a/src/Components/Selectbox/ContactButton.tsx +++ b/src/Components/Selectbox/ContactButton.tsx @@ -1,50 +1,28 @@ +import React from 'react'; + import { ChangeEvent } from 'react'; -import styled from 'styled-components'; -import { OptionalCreates } from '@/Pages/Studies/CreateStudy'; +// import { OptionalCreates } from '@/Pages/Studies/CreateStudy'; import { Creates } from '@/Types/studies'; +import { UseFormRegister } from 'react-hook-form'; +import { Container, IconWrap, Select, TextWrap } from './index.style'; +import { SelectArrow } from '@/Assets/SelectArrow'; -export type Props = { - onClick?: () => void; - children?: React.ReactNode; - // onChange?: (event: string) => void; - setForm: (any: OptionalCreates) => void; - useForm: Creates; - value?: string; - type?: string; - name?: string; - maxlength?: number; - id?: string; - formData?: number | string; - ref?: string; -}; - -export const ContactButton = ({ setForm, useForm }: Props) => { - // const [contactValue, setForms] = useState(''); - const submitHandler = (event: ChangeEvent) => { - setForm({ contact: event.target.value }); - }; - return ( - - 연락방법 - 이메일 - 카카오톡 - - ); -}; - -const ButtonConTainer = styled.select` - width: 392px; - height: 44px; - background-color: ${(props) => props.theme.color.gray3}; - border-radius: 8px; - border: 1px solid #cbcdd1; - background: ${(props) => props.theme.color.gray1}; - color: ${(props) => props.theme.color.gray3}; - padding-left: 16px; -`; - -const Textwrapper = styled.option` - background: ${(props) => props.theme.color.gray1}; - color: ${(props) => props.theme.color.gray3}; - padding-left: 16px; -`; +interface IFormValues { + contact: string; +} +export const ContactButton = React.forwardRef>>( + ({ onChange, name }, ref) => { + return ( + + + + + + + ); + }, +); From ae1414645e90725086edaa2510e955634571fe92 Mon Sep 17 00:00:00 2001 From: hyosin Date: Wed, 10 Apr 2024 22:20:15 +0900 Subject: [PATCH 008/220] =?UTF-8?q?style:=20=EC=85=80=EB=A0=89=ED=8A=B8=20?= =?UTF-8?q?=EB=B0=95=EC=8A=A4=20=EA=B8=B0=EB=B3=B8=20=ED=99=94=EC=82=B4?= =?UTF-8?q?=ED=91=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Styles/globalStyles.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/Styles/globalStyles.ts b/src/Styles/globalStyles.ts index ffcfa3f0..24a961c4 100644 --- a/src/Styles/globalStyles.ts +++ b/src/Styles/globalStyles.ts @@ -38,6 +38,7 @@ export const GlobalStyle = createGlobalStyle` outline: none; } } + a { text-decoration: none; @@ -49,4 +50,11 @@ export const GlobalStyle = createGlobalStyle` ul, li { list-style: none; } + + /* 셀렉트 박스 화살표 제거 */ + select{ + -webkit-appearance: none; /* 크롬 화살표 없애기 */ + -moz-appearance: none; /* 파이어폭스 화살표 없애기 */ + appearance: none; /* 화살표 없애기 */ + } `; From 6e5c02f4247a2d07fc28329039962ba09971f603 Mon Sep 17 00:00:00 2001 From: hyosin Date: Wed, 10 Apr 2024 22:21:10 +0900 Subject: [PATCH 009/220] =?UTF-8?q?style:=20theme=20color=20>=20input=20ne?= =?UTF-8?q?gative=20=EC=83=89=EC=83=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Styles/styled.d.ts | 1 + src/Styles/theme.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/Styles/styled.d.ts b/src/Styles/styled.d.ts index 6442ef32..10a4bd8c 100644 --- a/src/Styles/styled.d.ts +++ b/src/Styles/styled.d.ts @@ -30,6 +30,7 @@ declare module 'styled-components' { naver: string; kakao: string; kakaoFontColor: string; + negative: string; }; font: { diff --git a/src/Styles/theme.ts b/src/Styles/theme.ts index cf4416d2..fdb396d2 100644 --- a/src/Styles/theme.ts +++ b/src/Styles/theme.ts @@ -29,6 +29,7 @@ export const color = { naver: '#03CF5D', kakao: '#FEE500', kakaoFontColor: '#521010', + negative: '#FD3D51', }; export const font = { From 57e3250cb26380a986606f54412ee31bc46a323b Mon Sep 17 00:00:00 2001 From: hyosin Date: Wed, 10 Apr 2024 22:24:10 +0900 Subject: [PATCH 010/220] =?UTF-8?q?feat:=20TitleArea=20react-hook-forms?= =?UTF-8?q?=EB=A1=9C=20=EA=B0=92=20=EA=B4=80=EB=A6=AC=20(#152)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Textarea/Titlearea.tsx | 92 +++++++++------------------ 1 file changed, 30 insertions(+), 62 deletions(-) diff --git a/src/Components/Textarea/Titlearea.tsx b/src/Components/Textarea/Titlearea.tsx index bead10e2..13036a27 100644 --- a/src/Components/Textarea/Titlearea.tsx +++ b/src/Components/Textarea/Titlearea.tsx @@ -1,90 +1,58 @@ import { useState, ChangeEvent } from 'react'; import styled from 'styled-components'; // import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai'; -import { OptionalCreates } from '@/Pages/Studies/CreateStudy'; +// import { OptionalCreates } from '@/Pages/Studies/CreateStudy'; import { Creates } from '@/Types/studies'; - -export type Props = { - onClick?: () => void; - children?: React.ReactNode; - // onChange?: (event: string) => void; - setForm: (any: OptionalCreates) => void; - useForm: Creates; - value?: string; - type?: string; - name?: string; - maxlength?: number; - id?: string; - formData?: number | string; - ref?: string; -}; - -//작성 - -export const Titlearea = ({ setForm, useForm }: Props) => { - // const [inputValue, setForms] = useState(''); - - // const [inputValue, setForms] = useState(''); - const onValueHandler = (event: ChangeEvent) => { - setForm({ title: event.target.value }); - }; - // 글자수제한 - const [inputsCount, setInputsCount] = useState(0); - - const onInputHandler = (event: ChangeEvent) => { - setInputsCount(event.target.value.length); - }; - return ( - - [onValueHandler(event), onInputHandler(event)]} - maxLength={50} - placeholder="제목을 기입해주세요" - /> - {inputsCount}/50 - - ); -}; +import React from 'react'; +import { UseFormRegister } from 'react-hook-form'; + +interface IFormValues { + title: string; +} + +export const Titlearea = React.forwardRef>>( + ({ onChange, name }, ref) => { + // 글자수제한 + const [inputsCount, setInputsCount] = useState(); + + const handler = (e: ChangeEvent) => { + setInputsCount(e.target.value); + onChange(e); + }; + + return ( + + + {inputsCount?.length || 0}/50 + + ); + }, +); const InputContainer = styled.section` width: 1224px; height: 44px; display: flex; - flex-direction: row; - background-color: ${(props) => props.theme.color.gray3}; + background-color: ${(props) => props.theme.color.white}; border-radius: 8px; border: 1px solid #cbcdd1; - background: ${(props) => props.theme.color.gray1}; align-items: center; - align-self: stretch; `; const InputText = styled.p` font-size: 14px; - gap: 2px; - align-items: left; - background: ${(props) => props.theme.color.gray1}; color: ${(props) => props.theme.color.black2}; padding-right: 16px; `; -const Input = styled.textarea` +const Input = styled.input` width: 1153px; height: 24px; - background-color: ${(props) => props.theme.color.gray3}; - align-items: center; - align-self: stretch; align-items: center; border: 1px solid #cbcdd1; border-width: 0; - background: ${(props) => props.theme.color.gray1}; + background: ${(props) => props.theme.color.white}; resize: none; flex: 1 0 0; - margin-top: 10px; - padding-bottom: 10px; - padding-right: 16px; - padding-left: 16px; + margin: 10px 16px; `; From fa5a5b6149456a50890c4f2dc40b91c8522c4ee7 Mon Sep 17 00:00:00 2001 From: hyosin Date: Wed, 10 Apr 2024 22:25:01 +0900 Subject: [PATCH 011/220] =?UTF-8?q?style:=20=EC=8A=A4=ED=84=B0=EB=94=94=20?= =?UTF-8?q?=EB=AA=A8=EC=A7=91=20=EA=B3=B5=EA=B3=A0=20Select=20=EA=B3=B5?= =?UTF-8?q?=ED=86=B5=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Selectbox/index.style.tsx | 34 ++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/Components/Selectbox/index.style.tsx diff --git a/src/Components/Selectbox/index.style.tsx b/src/Components/Selectbox/index.style.tsx new file mode 100644 index 00000000..5c0f5b40 --- /dev/null +++ b/src/Components/Selectbox/index.style.tsx @@ -0,0 +1,34 @@ +import styled from 'styled-components'; + +export const IconWrap = styled.div` + display: flex; + position: absolute; + top: 10px; + right: 16px; +`; + +export const Container = styled.div` + display: flex; + position: relative; +`; + +export const Select = styled.select` + width: 392px; + height: 44px; + background-color: ${(props) => props.theme.color.white}; + border-radius: 8px; + border: 1px solid #cbcdd1; + color: ${(props) => props.theme.color.gray3}; + padding-left: 16px; + cursor: pointer; +`; + +export const TextWrap = styled.option` + background: ${(props) => props.theme.color.gray1}; + color: ${(props) => props.theme.color.gray3}; + padding-left: 16px; + + &[disabled] { + display: none; + } +`; From 2a1bd3965fcc760530df6c22bd4a1168a4e6a988 Mon Sep 17 00:00:00 2001 From: hyosin Date: Wed, 10 Apr 2024 22:25:37 +0900 Subject: [PATCH 012/220] =?UTF-8?q?style:=20=EC=BA=98=EB=A6=B0=EB=8D=94=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Selectbox/CalendarButton.tsx | 35 ++++----------------- 1 file changed, 6 insertions(+), 29 deletions(-) diff --git a/src/Components/Selectbox/CalendarButton.tsx b/src/Components/Selectbox/CalendarButton.tsx index e8222b87..61d0e690 100644 --- a/src/Components/Selectbox/CalendarButton.tsx +++ b/src/Components/Selectbox/CalendarButton.tsx @@ -10,9 +10,9 @@ export const CalendarButton = ({ children, onClick }: FilterProps) => { return ( {children} - + - + ); }; @@ -21,37 +21,14 @@ const InputContainer = styled.section` width: 392px; height: 44px; display: flex; - flex-direction: row; - background-color: ${(props) => props.theme.color.gray3}; + background-color: ${(props) => props.theme.color.white}; border-radius: 8px; border: 1px solid #cbcdd1; - background: ${(props) => props.theme.color.gray1}; align-items: center; align-self: stretch; - margin-bottom: 20px; + padding: 10px 16px; `; -const Textwrapper = styled.p` - font-size: 14px; - gap: 2px; - align-items: left; - padding-right: 16px; +const IconWrap = styled.p` + margin-left: auto; `; - -// const Input = styled.textarea` -// width: 1032px; -// height: 24px; -// background-color: ${(props) => props.theme.color.gray3}; -// align-items: center; -// align-self: stretch; -// align-items: center; -// border: 1px solid #cbcdd1; -// border-width: 0; -// background: ${(props) => props.theme.color.gray1}; -// resize: none; -// flex: 1 0 0; -// margin-top: 10px; -// padding-bottom: 10px; -// padding-right: 16px; -// padding-left: 16px; -// `; From 6811ee9d54887dcaeca6d65e19debf71d95f2eb4 Mon Sep 17 00:00:00 2001 From: hyosin Date: Wed, 10 Apr 2024 22:27:09 +0900 Subject: [PATCH 013/220] =?UTF-8?q?feat:=20Heading=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20(WIP)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Heading/index.tsx | 83 ++++++++++++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 src/Components/Heading/index.tsx diff --git a/src/Components/Heading/index.tsx b/src/Components/Heading/index.tsx new file mode 100644 index 00000000..0e0b0f0a --- /dev/null +++ b/src/Components/Heading/index.tsx @@ -0,0 +1,83 @@ +import styled from 'styled-components'; + +interface HeadingProps { + component: 'Input' | 'Page'; + type: 'Head' | 'Title' | 'SubTitle' | 'Body'; + children?: React.ReactNode; + size?: number; +} + +const Property = { + Page: { + Head: { + fontSize: '40px', + lineHeight: '48px', + fontFamily: 'Pretendard800', + }, + Title: { + fontSize: '32px', + lineHeight: '40px', + fontFamily: 'Pretendard800', + }, + SubTitle: { + fontSize: '18px', + lineHeight: '32px', + fontFamily: 'Pretendard500', + }, + Body: { + fontSize: '20px', + lineHeight: '40px', + fontFamily: 'Pretendard500', + }, + }, + Input: { + Title: { + fontSize: '20px', + lineHeight: '28px', + fontFamily: 'Pretendard700', + }, + Head: {}, + SubTitle: {}, + Body: {}, + }, +}; + +const Bold = { + fontSize: '50px', +}; + +const Heading = ({ component, type, children }: HeadingProps) => { + if (Property[component][type]) + switch (type) { + case 'Head': + return

{children}

; + case 'Title': + return

{children}

; + case 'SubTitle': + return

{children}

; + case 'Body': + return

{children}

; + } +}; + +export default Heading; + +const H1 = styled.h1` + display: flex; + align-items: center; +`; + +const H2 = styled.h2` + display: flex; + align-items: center; +`; + +const H3 = styled.h3` + display: flex; + align-items: center; +`; + +const H4 = styled.h4` + display: flex; + align-items: center; +`; From 141e372cb4ced54333fb844f0aa726c86b8f2766 Mon Sep 17 00:00:00 2001 From: hyosin Date: Wed, 10 Apr 2024 22:27:39 +0900 Subject: [PATCH 014/220] =?UTF-8?q?feat:=20Spacing=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Spacing/index.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/Components/Spacing/index.tsx diff --git a/src/Components/Spacing/index.tsx b/src/Components/Spacing/index.tsx new file mode 100644 index 00000000..c7651650 --- /dev/null +++ b/src/Components/Spacing/index.tsx @@ -0,0 +1,9 @@ +interface SpacingProps { + size: number; +} + +const Spacing = ({ size }: SpacingProps) => { + return
; +}; + +export default Spacing; From 6d8a7f74964d80458106eefd268cb0482f7eeab8 Mon Sep 17 00:00:00 2001 From: Abiria Date: Thu, 11 Apr 2024 20:47:58 +0900 Subject: [PATCH 015/220] =?UTF-8?q?feat:=20SelectBox=EC=9D=98=20=EA=B8=B0?= =?UTF-8?q?=EB=B3=B8=EA=B0=92=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Selectbox/SelectBox.tsx | 53 ++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 src/Components/Selectbox/SelectBox.tsx diff --git a/src/Components/Selectbox/SelectBox.tsx b/src/Components/Selectbox/SelectBox.tsx new file mode 100644 index 00000000..e7aedc19 --- /dev/null +++ b/src/Components/Selectbox/SelectBox.tsx @@ -0,0 +1,53 @@ +import { ComponentProps, forwardRef } from 'react'; +import styled from 'styled-components'; + +// RHF와 호환되는 범용 SelectBox 컴포넌트 +export const SelectBox = forwardRef< + HTMLSelectElement, + ComponentProps<'select'> & { + label?: string; + // 선택지로 등장할 값을 키: 표시값 형태의 객체로 전달 + values?: Record; + defaultValue?: string; + } +>(({ onChange, onBlur, name, label, values, defaultValue }, ref) => { + return ( + + ); +}); + +const Label = styled.label` + font-family: Pretendard; + font-size: 18px; + font-weight: 700; + line-height: 20px; + text-align: left; + display: flex; + flex-direction: column; + gap: 12px; +`; + +const Select = styled.select` + height: 44px; + padding: 10px 16px 10px 16px; + border-radius: 8px; + border: 1px solid #cbcdd1; + background-color: ${(props) => props.theme.color.white}; + color: ${(props) => props.theme.color.gray3}; +`; + +const Option = styled.option` + background: ${(props) => props.theme.color.gray1}; + color: ${(props) => props.theme.color.gray3}; + padding-left: 16px; +`; From 4c9983d824a01705d23ccf1bbf8a1d21e6c50394 Mon Sep 17 00:00:00 2001 From: Abiria Date: Tue, 16 Apr 2024 16:11:50 +0900 Subject: [PATCH 016/220] =?UTF-8?q?refactor:=20`forwardRef`=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=9E=AC=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Common/InputText/iindex.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/Components/Common/InputText/iindex.tsx b/src/Components/Common/InputText/iindex.tsx index 6635d22d..6fffdd22 100644 --- a/src/Components/Common/InputText/iindex.tsx +++ b/src/Components/Common/InputText/iindex.tsx @@ -1,4 +1,4 @@ -import React, { ForwardedRef } from 'react'; +import { ComponentProps, ForwardedRef, forwardRef } from 'react'; import styled from 'styled-components'; interface InputTextProps extends React.InputHTMLAttributes { @@ -6,9 +6,11 @@ interface InputTextProps extends React.InputHTMLAttributes { inputType?: 'text' | 'email' | 'password' | 'member'; } -const InputText = React.forwardRef( +const InputText = forwardRef & InputTextProps>( ({ placeholder, inputType, onChange, ...props }: InputTextProps, ref: ForwardedRef) => { - return ; + return ( + + ); }, ); From c3ec341bf11031cb87986b89afe5a9592de3ecdf Mon Sep 17 00:00:00 2001 From: Abiria Date: Tue, 16 Apr 2024 16:32:36 +0900 Subject: [PATCH 017/220] =?UTF-8?q?refactor:=20`currentLength`=20prop?= =?UTF-8?q?=EC=9D=84=20=EC=99=B8=EB=B6=80=20=EC=83=81=ED=83=9C=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=88=98=EC=A7=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Common/InputText/iindex.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/Components/Common/InputText/iindex.tsx b/src/Components/Common/InputText/iindex.tsx index 6fffdd22..b6a8dbee 100644 --- a/src/Components/Common/InputText/iindex.tsx +++ b/src/Components/Common/InputText/iindex.tsx @@ -1,15 +1,26 @@ -import { ComponentProps, ForwardedRef, forwardRef } from 'react'; +import { ComponentProps, ForwardedRef, forwardRef, useState } from 'react'; import styled from 'styled-components'; interface InputTextProps extends React.InputHTMLAttributes { placeholder?: string; inputType?: 'text' | 'email' | 'password' | 'member'; + currentLength?: number; } const InputText = forwardRef & InputTextProps>( - ({ placeholder, inputType, onChange, ...props }: InputTextProps, ref: ForwardedRef) => { + ( + { name, placeholder, inputType, onChange, currentLength, ...props }: InputTextProps, + ref: ForwardedRef, + ) => { return ( - + ); }, ); From ad5dfab056085c05243339720cdb5b3185aae60f Mon Sep 17 00:00:00 2001 From: Abiria Date: Tue, 16 Apr 2024 16:44:52 +0900 Subject: [PATCH 018/220] =?UTF-8?q?feat:=20`currentLength`=20=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Common/InputText/iindex.tsx | 38 +++++++++++++++++----- 1 file changed, 30 insertions(+), 8 deletions(-) diff --git a/src/Components/Common/InputText/iindex.tsx b/src/Components/Common/InputText/iindex.tsx index b6a8dbee..fee14abc 100644 --- a/src/Components/Common/InputText/iindex.tsx +++ b/src/Components/Common/InputText/iindex.tsx @@ -13,14 +13,20 @@ const InputText = forwardRef & InputTe ref: ForwardedRef, ) => { return ( - + + + { + // NOTE: &&를 쓰면 currentLength가 0일 때 렌더링 실패. 추후 가독성 좋은 코드로 수정 필요 + currentLength !== undefined ? {currentLength} / MAX : undefined + } + ); }, ); @@ -44,4 +50,20 @@ const InputWrapper = styled.input` } `; +const Box = styled.div` + position: relative; + display: flex; +`; + +const LengthIndicator = styled.div` + position: absolute; + top: 10px; + right: 16px; + color: #00000073; + font-family: Pretendard400; + font-weight: 400; + font-size: 14px; + line-height: 20px; +`; + export default InputText; From 8521fa97316caca8f20decc4ba3b78ea1b8caaf2 Mon Sep 17 00:00:00 2001 From: Abiria Date: Tue, 16 Apr 2024 16:46:41 +0900 Subject: [PATCH 019/220] =?UTF-8?q?refactor:=20`maxLength`=EB=A5=BC=20prop?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B0=9B=EC=9D=84=20=EC=88=98=20=EC=9E=88?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Common/InputText/iindex.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/Components/Common/InputText/iindex.tsx b/src/Components/Common/InputText/iindex.tsx index fee14abc..f06ffe42 100644 --- a/src/Components/Common/InputText/iindex.tsx +++ b/src/Components/Common/InputText/iindex.tsx @@ -5,11 +5,12 @@ interface InputTextProps extends React.InputHTMLAttributes { placeholder?: string; inputType?: 'text' | 'email' | 'password' | 'member'; currentLength?: number; + maxLength?: number; } const InputText = forwardRef & InputTextProps>( ( - { name, placeholder, inputType, onChange, currentLength, ...props }: InputTextProps, + { name, placeholder, inputType, onChange, maxLength, currentLength, ...props }: InputTextProps, ref: ForwardedRef, ) => { return ( @@ -22,10 +23,11 @@ const InputText = forwardRef & InputTe onChange={onChange} {...props} /> - { - // NOTE: &&를 쓰면 currentLength가 0일 때 렌더링 실패. 추후 가독성 좋은 코드로 수정 필요 - currentLength !== undefined ? {currentLength} / MAX : undefined - } + {maxLength && ( + + {currentLength} / {maxLength} + + )} ); }, From 5b7d4dbd317beb728c6865efb7cf42c09bcc4cd6 Mon Sep 17 00:00:00 2001 From: hyosin Date: Tue, 16 Apr 2024 18:47:52 +0900 Subject: [PATCH 020/220] =?UTF-8?q?feat:=20=EB=A7=88=EA=B0=90=EB=82=A0?= =?UTF-8?q?=EC=A7=9C=20=EB=B0=9B=EC=95=84=EC=98=AC=20=EB=95=8C=20rhf=20con?= =?UTF-8?q?troller=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Calendar/EndDate.tsx | 16 ++++------------ src/Components/Common/Stack/index.tsx | 12 ++++++++++++ 2 files changed, 16 insertions(+), 12 deletions(-) create mode 100644 src/Components/Common/Stack/index.tsx diff --git a/src/Components/Calendar/EndDate.tsx b/src/Components/Calendar/EndDate.tsx index e4a0ba19..16909c89 100644 --- a/src/Components/Calendar/EndDate.tsx +++ b/src/Components/Calendar/EndDate.tsx @@ -1,31 +1,23 @@ // react-datepicker를 사용해서 마감날짜 구현 328px, 44px, ex) 24.01.23 +import React, { useState } from 'react'; import DatePicker, { ReactDatePicker } from 'react-datepicker'; -import { useState } from 'react'; import 'react-datepicker/dist/react-datepicker.css'; import styled from 'styled-components'; -// import { OptionalCreates } from '@/Pages/CreateRecruitment'; -import { Creates } from '@/Types/studies'; -import { UseFormRegister } from 'react-hook-form'; -import React from 'react'; +import { ControllerRenderProps } from 'react-hook-form'; interface IFormValues { recruitmentEndDateTime: string; } -export const EndDate = React.forwardRef, ReturnType>>( +export const EndDate = React.forwardRef, ControllerRenderProps>( ({ onChange, name }, ref) => { const [startDate, setStartDate] = useState(new Date()); - const onDateChange = (date: null | Date | [Date, Date]) => { - const selected = date ? date.toString() : ''; - setStartDate(selected); - onChange({ target: selected, type: selected }); - }; return ( onDateChange(date)} + onChange={(date) => onChange(date)} placeholderText="ex)24.01.07" isClearable={false} ref={ref} diff --git a/src/Components/Common/Stack/index.tsx b/src/Components/Common/Stack/index.tsx new file mode 100644 index 00000000..a8ca3892 --- /dev/null +++ b/src/Components/Common/Stack/index.tsx @@ -0,0 +1,12 @@ +import { Children, ReactNode } from 'react'; + +export interface StackProps { + children?: ReactNode; + divider?: ReactNode; +} + +export const Stack = ({ divider, children }: StackProps) => { + const childrenArr = Children.toArray(children); + + return
{[].concat(...childrenArr.map((n) => [n, divider])).slice(0, -1)}
; +}; From df73382e0939bacccb2c568d3f7a095878ccc8c5 Mon Sep 17 00:00:00 2001 From: hyosin Date: Tue, 16 Apr 2024 18:51:11 +0900 Subject: [PATCH 021/220] =?UTF-8?q?fix:=20=EC=8A=A4=ED=84=B0=EB=94=94=20?= =?UTF-8?q?=EB=AA=A8=EC=A7=91=EA=B3=B5=EA=B3=A0=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=B2=94=EC=9A=A9=20SelectBox=20=EC=A0=81=EC=9A=A9?= =?UTF-8?q?=EC=A4=91=20(WIP)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Pages/CreateRecruitment/page.tsx | 300 +++++++++++++++++++++++++++ 1 file changed, 300 insertions(+) create mode 100644 src/Pages/CreateRecruitment/page.tsx diff --git a/src/Pages/CreateRecruitment/page.tsx b/src/Pages/CreateRecruitment/page.tsx new file mode 100644 index 00000000..41bd08e2 --- /dev/null +++ b/src/Pages/CreateRecruitment/page.tsx @@ -0,0 +1,300 @@ +import { useState } from 'react'; +import { useForm, SubmitHandler, Controller } from 'react-hook-form'; +import { useParams } from 'react-router-dom'; + +import Recruitment from '@/Mocks/handlers/recruitment'; +import styled, { css } from 'styled-components'; +import { One, Two, Three, Four, Loading } from '@/Assets'; + +// components +import Heading from '@/Components/Heading'; +import Spacing from '@/Components/Spacing'; +import Button from '@/Components/Common/Button'; +import InputText from '@/Components/Common/InputText/iindex'; +import { CalendarButton } from '@/Components/Selectbox/CalendarButton'; +import { EndDate } from '@/Components/Calendar/EndDate'; +import { SelectBox } from '@/Components/Selectbox/SelectBox'; + +import { useStack } from '@/Hooks/stack/useStack'; +import { Mainarea } from '@/Components/Textarea/Mainarea'; +import { PositionId, RecruitmentForm } from '@/Types/study'; + +const CreateRecruitmentPage = () => { + const studyId = Number(useParams().studyId); + + const { + register, + handleSubmit, + control, + watch, + formState: { errors }, + } = useForm(); + + const onSubmit = handleSubmit((data) => { + console.log('data', data); + }); + + const APPLICATION_CNT = { + 1: '1명', + 2: '2명', + 3: '3명', + 4: '4명', + 5: '5명', + 6: '6명', + 7: '7명', + 8: '8명', + 9: '9명', + 10: '10명', + }; + + const POSITION = { + 1: '백엔드', + 2: '프론트엔드', + 3: '디자이너', + 4: '데브옵스', + }; + + const CONTACT = { + EMAIL: '이메일', + KAKAO: '카카오톡', + }; + + const STACK = { + 1: 'JAVA', + 2: 'JavaScript', + }; + + const data = watch(); + + console.log(data); + + return ( + +
) => { + console.log(data); + })} + > + + 스터디 팀원 모집하기 + + + + + + + + 스터디 모집 안내 + + + + + + + {errors?.applicantCount?.message && ss} + + + + 모집 마감일 + + + + } + /> + {errors?.recruitmentEndDateTime?.message && ss} + + + + + + + + {/* TODO: 기술 스택 모달 적용 */} + + + + + + + + 연결 url + + + + + + + +
+ + + + + + 스터디 진행 관련 + + + {/* 추후 으로 변경 */} + + +
진행 방식
+
진행 방식
+ + +
진행 플랫폼
+
진행 플랫폼
+ + +
진행 기간
+
진행 기간
+ + + +
+ + + + + + 스터디 기본 구성 + + + +
스터디 제목
+
스터디 제목
+ + + + +
카테고리
+
카테고리
+ + +
스터디 최대 인원
+
스터디 최대 인원
+ + + +
+ + + + + + 스터디 팀원 모집 공고 제목 + + + +
제목
+
+ + + {/* */} +
+ + + + +
상세 내용
+
{/* */}
+ + ㄴ + + + + + + +
+ ); +}; + +export default CreateRecruitmentPage; + +const Grid = styled.div` + display: grid; + grid-template-columns: repeat(3, minmax(392px, 1fr)); + gap: 24px; +`; + +const AssetContainer = styled.image` + padding-right: 12px; +`; + +const GridItem = styled.div` + display: flex; + flex-direction: column; + height: 132px; +`; + +const RecruitmentContainer = styled.section` + display: flex; + flex-direction: column; + max-width: 1224px; + margin: 0 auto; +`; + +const ErrorMsg = styled.p` + margin-top: 12px; + color: ${({ theme }) => theme.color.negative}; +`; +const BoxItem = styled.div` + display: flex; + flex-direction: column; + + .box__title { + font-size: 18px; + line-height: 24px; + color: #000000f2; + } + .box__content { + font-size: 18px; + line-height: 24px; + color: #00000073; + margin-top: 12px; + } + + width: 100%; +`; + +const Box = styled.div<{ display: 'row' | 'column'; gap?: string }>` + display: flex; + flex-direction: ${(props) => props.display}; + margin-top: 24px; + width: 100%; + + ${(props) => + props.gap && + css` + gap: ${props.gap}; + `} +`; + +const Hr = styled.hr` + width: 100%; + background-color: ${({ theme }) => theme.color.gray1}; + height: 16px; + border: none; +`; + +const ButtonBox = styled.div` + width: 100%; + display: flex; + flex-direction: row; + gap: 24px; +`; From 4277304ad52b3ccea90df3935b630508f8f999e5 Mon Sep 17 00:00:00 2001 From: hyosin Date: Tue, 16 Apr 2024 18:53:21 +0900 Subject: [PATCH 022/220] =?UTF-8?q?fix:=20=EB=B2=84=ED=8A=BC=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20props=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Common/Button/index.tsx | 29 ++++++++++++-------------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/src/Components/Common/Button/index.tsx b/src/Components/Common/Button/index.tsx index 75806171..fd996744 100644 --- a/src/Components/Common/Button/index.tsx +++ b/src/Components/Common/Button/index.tsx @@ -1,16 +1,14 @@ -import { MouseEventHandler } from 'react'; +import { ComponentProps } from 'react'; import styled from 'styled-components'; -export type ButtonProps = { - onClick?: MouseEventHandler; - type?: 'button' | 'submit'; +type ButtonProps = ComponentProps<'button'> & { scheme?: 'primary' | 'secondary' | 'third' | 'normal'; - disabled?: boolean; - children: React.ReactNode; - className?: string; size?: 'normal' | 'fullWidth'; + className?: string; }; +type Props = Partial; + const Button = ({ onClick, type, @@ -19,16 +17,15 @@ const Button = ({ children, className, size = 'normal', -}: ButtonProps) => ( - - <>{children} - -); +}: Props) => { + return ( + + <>{children} + + ); +}; -const ButtonContainer = styled.button<{ - scheme: 'primary' | 'secondary' | 'third' | 'normal'; - size: 'normal' | 'fullWidth'; -}>` +const ButtonContainer = styled.button` display: inline-flex; justify-content: center; align-items: center; From 15748fce5101402bddee1eb8203733fd66cc4783 Mon Sep 17 00:00:00 2001 From: hyosin Date: Tue, 16 Apr 2024 18:54:16 +0900 Subject: [PATCH 023/220] =?UTF-8?q?chore:=20=EB=AA=A8=EC=A7=91=EA=B3=B5?= =?UTF-8?q?=EA=B3=A0=20=EC=83=9D=EC=84=B1=ED=8F=BC=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Types/study.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/Types/study.ts b/src/Types/study.ts index 00c62966..40d5b945 100644 --- a/src/Types/study.ts +++ b/src/Types/study.ts @@ -1,4 +1,4 @@ -import { APPLY_STATUS, MEMBER_STATUS, PLATFORM, PROGRESS_METHOD, ROLE, STUDY_STATUS } from '@/Shared/study'; +import { APPLY_STATUS, POSITION, MEMBER_STATUS, PLATFORM, PROGRESS_METHOD, ROLE, STUDY_STATUS } from '@/Shared/study'; export type CategoryPropertyType = 'category' | 'stacks' | 'positions' | 'way' | 'sort'; export type StudyStatus = keyof typeof STUDY_STATUS; @@ -7,6 +7,7 @@ export type ApplyStatus = keyof typeof APPLY_STATUS; export type ProgressMethod = keyof typeof PROGRESS_METHOD; export type Role = keyof typeof ROLE; export type Platform = keyof typeof PLATFORM; +export type PositionId = keyof typeof POSITION; export type Card = 'STUDY' | 'RECRUITMENT'; export type Sort = '최신순' | '조회순'; export type ApplyTryStatus = 'NOT APPLY' | 'SUCCESS' | 'CLOSED' | 'ALREDAY_APPLY' | 'ALREDY_PARTICIPATED'; @@ -102,6 +103,18 @@ export interface Recruitments { recruitments: Recruitment[]; } +// TODO: recruitment 타입 중복 속성 개선, stackId 객체 만들기 +export interface RecruitmentForm { + title: string; + stackIds: number[]; + positionIds: PositionId; + applicantCount: number; + recruitmentEndDateTime: string; + contact: 'KAKAO' | 'EMAIL'; + callUrl: string; + content: string; +} + export interface FilterOptionParams { pageParam?: number; last?: number; From fed94cc1afebda891d033bfe2115257bc24a388c Mon Sep 17 00:00:00 2001 From: hyosin Date: Tue, 16 Apr 2024 19:53:47 +0900 Subject: [PATCH 024/220] =?UTF-8?q?feat:=20=EC=85=80=EB=A0=89=ED=8A=B8?= =?UTF-8?q?=EB=B0=95=EC=8A=A4=EB=B3=84=20=EC=97=90=EB=9F=AC=20=EB=A9=94?= =?UTF-8?q?=EC=8B=9C=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Pages/CreateRecruitment/page.tsx | 63 ++++++++++++++++++++++------ 1 file changed, 50 insertions(+), 13 deletions(-) diff --git a/src/Pages/CreateRecruitment/page.tsx b/src/Pages/CreateRecruitment/page.tsx index 41bd08e2..6b52731c 100644 --- a/src/Pages/CreateRecruitment/page.tsx +++ b/src/Pages/CreateRecruitment/page.tsx @@ -1,4 +1,3 @@ -import { useState } from 'react'; import { useForm, SubmitHandler, Controller } from 'react-hook-form'; import { useParams } from 'react-router-dom'; @@ -16,7 +15,7 @@ import { EndDate } from '@/Components/Calendar/EndDate'; import { SelectBox } from '@/Components/Selectbox/SelectBox'; import { useStack } from '@/Hooks/stack/useStack'; -import { Mainarea } from '@/Components/Textarea/Mainarea'; +import { TextArea } from '@/Components/Textarea'; import { PositionId, RecruitmentForm } from '@/Types/study'; const CreateRecruitmentPage = () => { @@ -68,6 +67,16 @@ const CreateRecruitmentPage = () => { console.log(data); + const ERROR_MSG: Omit, 'content'> = { + applicantCount: '모집 인원을 정해주세요.', + recruitmentEndDateTime: '모집 마감일을 정해주세요.', + positionIds: '포지션을 정해주세요.', + stackIds: '기술 스택을 정해주세요.', + title: '제목을 기입해주세요.', + contact: '연락 방법을 정해주세요.', + callUrl: '연결 url을 작성해주세요.', + }; + return (
{ label="모집 인원" values={APPLICATION_CNT} defaultValue="ex) 5명" - {...register('applicantCount')} + {...register('applicantCount', { required: ERROR_MSG.applicantCount })} /> - {errors?.applicantCount?.message && ss} + {errors?.applicantCount?.message && {errors?.applicantCount?.message}} @@ -114,21 +123,44 @@ const CreateRecruitmentPage = () => { - + + + {errors?.positionIds?.message && {errors?.positionIds?.message}} {/* TODO: 기술 스택 모달 적용 */} - + + {errors?.stackIds?.message && {errors?.stackIds?.message}} - + + {errors?.contact?.message && {errors?.contact?.message}} 연결 url - + + {errors?.callUrl?.message && {errors?.callUrl?.message}} @@ -199,19 +231,24 @@ const CreateRecruitmentPage = () => { placeholder="제목을 기입해주세요." maxLength={50} currentLength={data.title?.length ?? 0} - {...register('title', { required: true, maxLength: 50 })} + {...register('title', { required: ERROR_MSG.title, maxLength: 50 })} /> - - {/* */} + {errors?.title?.message && {errors?.title?.message}}
상세 내용
-
{/* */}
+
+