From 95c39e3b7a4fd4efa3a6a952d0a15fd374de7568 Mon Sep 17 00:00:00 2001 From: Abiria Date: Thu, 11 Apr 2024 11:54:40 +0900 Subject: [PATCH 001/111] =?UTF-8?q?feat:=20=EC=8A=A4=ED=84=B0=EB=94=94=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9E=AC?= =?UTF-8?q?=EC=9E=91=EC=84=B1,=20=EA=B5=AC=EC=A1=B0=20=EC=9E=AC=EC=A0=95?= =?UTF-8?q?=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Pages/Studies/CreateStudy.tsx | 314 ++++-------------------------- 1 file changed, 38 insertions(+), 276 deletions(-) diff --git a/src/Pages/Studies/CreateStudy.tsx b/src/Pages/Studies/CreateStudy.tsx index ed842fb0..9005a954 100644 --- a/src/Pages/Studies/CreateStudy.tsx +++ b/src/Pages/Studies/CreateStudy.tsx @@ -1,285 +1,47 @@ +import InputText from '@/Components/Common/InputText/iindex'; +import { ReactNode } from 'react'; import styled from 'styled-components'; -import { ProgressButton } from '../../Components/Selectbox/ProgressButton'; -import { PlatformButton } from '../../Components/Selectbox/PlatformButton'; -import { Titlearea } from '../../Components/Textarea/Titlearea'; -import { CalendarButton } from '../../Components/Selectbox/CalendarButton'; -import { BigCategoryButton } from '../../Components/Selectbox/BigCategoryButton'; -import { MaxPeopleButton } from '../../Components/Selectbox/MaxPeopleButton'; -import { ProgressPeriod } from '../../Components/Calendar/ProgressPeriod'; -import { PositionButton } from '@/Components/Selectbox/PositionButton'; -import { media } from '../../Styles/theme'; -import { Creates } from '@/Types/studies'; -import { useLocation, useNavigate } from 'react-router-dom'; -import { useEffect, useState } from 'react'; -import { One, Two, Three } from '@/Assets'; -import axios from 'axios'; -import Button from '@/Components/Common/Button'; - -axios.defaults.withCredentials = true; -export type OptionalCreates = Partial; - -const CreateStudyPage = () => { - const Navigate = useNavigate(); - const { pathname } = useLocation(); - const [useForm, setuseForm] = useState({ - title: '', - categoryId: 0, - way: '', - participantLimit: 0, - startDateTime: '', - endDateTime: '', - positionId: 0, - platform: '', - }); - - function forms(fields: OptionalCreates) { - setuseForm({ - ...useForm, - ...fields, - }); - } - - async function post() { - const { data } = await axios.post('https://ludoapi.store/api/studies', { - title: useForm.title, - categoryId: useForm.categoryId, - way: useForm.way, - participantLimit: useForm.participantLimit, - startDateTime: useForm.startDateTime, - endDateTime: useForm.endDateTime, - positionId: useForm.positionId, - platform: useForm.platform, - }); - - const studyId = data.data.study.id; - Navigate(`/studies/${studyId}`); - } - - const handleSubmit = (event: any) => { - event.preventDefault(); - post(); - }; - - useEffect(() => { - window.scrollTo(0, 0); - }, [pathname]); +export default () => { return ( - <> - - 스터디 생성하기 - - - - - - 스터디 제목 - - - - - - - - - - - - - - - 스터디 상세 안내 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 스터디 진행관련 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+ + + + + + + + + + + + + + + + + + + + + + + + +
); }; -const AssetContainer = styled.image` - padding-right: 12px; -`; - -const BorderBox = styled.div` - max-width: 1200px; - margin-bottom: 16px; - border-bottom: 16px solid #f2f2f2; -`; - -const StudyMain = styled.p` - width: 1200px; - font-size: ${(props) => props.theme.font.xxxlarge}; - text-align: left; - align-items: left; - margin-right: 50px; - font-weight: 800; - line-height: 60px; - /* padding-bottom: 60px; */ - padding-top: 40px; - ${media.custom(800)} { - display: none; - } -`; - -const StudyContainer = styled.form` - display: flex; - flex-direction: column; - max-width: 1224px; - margin: 0 auto; - margin-top: 40px; - padding-bottom: 80px; - gap: 40px; - - ${media.custom(200)} { - display: none; - } -`; - -const TopBox = styled.div` - height: 250px; - padding-top: 40px; - text-align: left; - align-items: center; - margin-right: 50px; -`; - -const MiddleBox = styled.div` - height: 300px; - align-items: center; - padding-top: 40px; - text-align: left; -`; - -const MiddleCenterBox = styled.div` - height: 250px; - align-items: center; - text-align: left; - - padding-top: 20px; -`; - -const StudyMiddleInfo = styled.div` - display: grid; - grid-template-columns: 430px 430px 430px; - grid-template-rows: 50px; - row-gap: 16px 16px; - column-gap: 16px 16px; -`; - -const MiddleBottomInfo = styled.div` - display: grid; - grid-template-columns: 430px 430px 430px; - grid-template-rows: 80px; - row-gap: 24px 24px; - column-gap: 24px 24px; - padding-bottom: 40px; - font-size: ${(props) => props.theme.font.medium}; -`; -const MiddleBottomWrapper = styled.section` - font-size: ${(props) => props.theme.font.medium}; - flex-direction: row; - padding-top: 40px; -`; - -const MiddleWrapper = styled.div` - display: flex; - flex-direction: column; - padding-bottom: 40px; - font-size: ${(props) => props.theme.font.medium}; -`; - -const BottomWrapper = styled.div` - display: flex; - flex-direction: column; - padding-bottom: 16px; - font-size: ${(props) => props.theme.font.medium}; -`; - -const StudyWrapper = styled.section` - font-size: ${(props) => props.theme.font.medium}; - padding-bottom: 14px; - flex-direction: row; - padding-right: 24px; -`; - -const ButtonBox = styled.div` - display: flex; - width: 100%; - flex-direction: row; - gap: 24px; - padding-bottom: 80px; -`; +const Labeled = ({ label, children }: { label: string; children: ReactNode }) => { + return ( + + ); +}; -const StudyTitle = styled.p` +const FormSection = styled.div` display: flex; - font-size: ${(props) => props.theme.font.xlarge}; - font-weight: bold; - align-items: left; - font-weight: 800; - line-height: 50px; - padding-bottom: 16px; `; - -const ContentText = styled.p` - padding-bottom: 10px; -`; - -export default CreateStudyPage; From 1926dfd7debd2497ef5ef503f5ad47002c47be64 Mon Sep 17 00:00:00 2001 From: Abiria Date: Thu, 11 Apr 2024 14:49:58 +0900 Subject: [PATCH 002/111] =?UTF-8?q?feat:=20=EC=8A=A4=ED=84=B0=EB=94=94=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20=ED=8F=BC=EC=9D=84=20=EC=9C=84=ED=95=9C=20?= =?UTF-8?q?=EB=B2=94=EC=9A=A9=20SelectBox=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=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/Selectbox/SelectBox.tsx | 22 ++++++++++++++++++++++ 1 file changed, 22 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..aef19221 --- /dev/null +++ b/src/Components/Selectbox/SelectBox.tsx @@ -0,0 +1,22 @@ +import { ComponentProps, forwardRef } from 'react'; + +// RHF와 호환되는 범용 SelectBox 컴포넌트 +export const SelectBox = forwardRef< + HTMLSelectElement, + ComponentProps<'select'> & { + label: string; + // 선택지로 등장할 값을 키: 표시값 형태의 객체로 전달 + values: Record; + } +>(({ onChange, onBlur, name, label, values }, ref) => { + return ( + + ); +}); From 5af9ab417b33112a55c8b779b35c53b6fece12e8 Mon Sep 17 00:00:00 2001 From: Abiria Date: Thu, 11 Apr 2024 15:19:24 +0900 Subject: [PATCH 003/111] =?UTF-8?q?fix:=20SelectBox=EA=B0=80=20`label`,=20?= =?UTF-8?q?`values`=20prop=EC=9D=84=20=EA=B0=80=EC=A7=80=EC=A7=80=20?= =?UTF-8?q?=EC=95=8A=EB=8D=94=EB=9D=BC=EB=8F=84=20=EC=97=90=EB=9F=AC?= =?UTF-8?q?=EA=B0=80=20=EB=82=98=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=ED=97=88=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Selectbox/SelectBox.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Components/Selectbox/SelectBox.tsx b/src/Components/Selectbox/SelectBox.tsx index aef19221..3219b23f 100644 --- a/src/Components/Selectbox/SelectBox.tsx +++ b/src/Components/Selectbox/SelectBox.tsx @@ -4,16 +4,16 @@ import { ComponentProps, forwardRef } from 'react'; export const SelectBox = forwardRef< HTMLSelectElement, ComponentProps<'select'> & { - label: string; + label?: string; // 선택지로 등장할 값을 키: 표시값 형태의 객체로 전달 - values: Record; + values?: Record; } >(({ onChange, onBlur, name, label, values }, ref) => { return (