feat: 스터디 생성 페이지 재작성, 구조 재정의

src/Apis/recruitment.ts

@@ -7,7 +7,7 @@ export const getPopularRecruitments = (count: number = 6): Promise<{ data: { dat
   httpClient.get(API_END_POINT.POPULAR_RECRUITMENTS, { params: { count } });
 
 export const getRecruitments = (
-  filterOptions: Pick<FilterOptionParams, 'categoryId' | 'positionId' | 'progressMethod' | 'stackId'>,
+  filterOptions: Pick<FilterOptionParams, 'categoryId' | 'positionId' | 'progressMethod' | 'stackIds'>,
   count?: number,
   last?: number,
 ): Promise<{ data: { data: Recruitments } }> => {

src/Apis/study.ts

@@ -1,6 +1,6 @@
 import { httpClient } from '@/utils/axios';
 import { API_END_POINT } from '@/Constants/api';
-import { ApplicantsDetail, MyPageInfo, StudyDetail } from '@/Types/study';
+import { ApplicantsDetail, MyPageInfo, StudyCreate, StudyDetail } from '@/Types/study';
 
 export const getStudyDetail = (studyId: number): Promise<{ data: { data: StudyDetail } }> =>
   httpClient.get(API_END_POINT.STUDY(studyId));
@@ -10,6 +10,8 @@ export const getMyPageInfo = (): Promise<{ data: { data: MyPageInfo } }> => http
 export const getApplicantsDetail = (studyId: number): Promise<{ data: { data: ApplicantsDetail } }> =>
   httpClient.get(API_END_POINT.APPLICANTS(studyId));
 
+export const createStudy = async (data: StudyCreate) => httpClient.post(API_END_POINT.CREATE_STUDY, { ...data });
+
 export const applyStudy = async (studyId: number, recruitmentId: number, data: { positionId: number }) =>
   httpClient.post(API_END_POINT.APPLY(studyId, recruitmentId), { ...data });
 

src/Assets/index.tsx

@@ -26,6 +26,7 @@ export { default as Create } from './icons/createstudy.svg?react';
 export { default as Loading } from './icons/lodaing.svg?react';
 export { default as Logout } from './icons/logout.svg?react';
 export { default as Article } from './icons/article.svg?react';
+export { default as Study } from './icons/study.svg?react';
 
 // Logo
 export { default as BlankLogo } from './images/blank-logo.png';

src/Components/Calendar/ProgressPeriod.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProgressPeriod } from './ProgressPeriod';
+
+const meta = {
+  component: ProgressPeriod,
+  parameters: {
+    docs: {
+      story: {
+        height: '300px',
+      },
+    },
+  },
+} satisfies Meta<typeof ProgressPeriod>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};

src/Components/Calendar/ProgressPeriod.tsx

@@ -1,78 +1,74 @@
 // react-datepicker를 사용해서 진행기간 구현 328px, 24px, ex) 24.01.23 - 24.03.23
 import DatePicker from 'react-datepicker';
-import { useState } from 'react';
-import 'react-datepicker/dist/react-datepicker.css';
+import { forwardRef, useState } from 'react';
 import styled from 'styled-components';
-import { OptionalCreates } from '@/Pages/Studies/CreateStudy';
-import { Creates } from '@/Types/studies';
+import { DateRange } from '@/Types/atoms';
+import { ControllerRenderProps } from 'react-hook-form';
+import 'react-datepicker/dist/react-datepicker.css';
 
-export type Props = {
-  onClick?: () => void;
-  children?: React.ReactNode;
-  // onChange?: (event: string) => void;
-  setForm: (any: OptionalCreates) => void;
-  useForm: Creates;
-  value?: string;
-  type?: string;
+export interface ProgressPeriodProps {
+  /** input 요소가 가질 폼 필드 이름 속성 */
   name?: string;
-  maxlength?: number;
-  id?: string;
-  formData?: number | string;
-  ref?: string;
-};
+}
+
+interface IProgressPeriodForm {
+  progressPeriod: DateRange;
+}
 
-export const ProgressPeriod = ({ useForm }: Props) => {
-  const [startDateTime, setForms] = useState(new Date());
-  const [endDateTime, setFormss] = useState(new Date());
-  // const StartHandler = (event: ChangeEvent<HTMLSelectElement>) => {
-  //   setForm({ startDateTime: event.target.value });
-  // };
+/**
+ * 특정한 범위의 기간을 입력받는 데 사용되는 컴포넌트입니다.
+ *
+ * 사용처는 다음과 같습니다:
+ * - 스터디 기간 설정
+ * - 기간으로 스터디 조회 등
+ */
+export const ProgressPeriod = forwardRef<
+  DatePicker,
+  ProgressPeriodProps & Partial<ControllerRenderProps<IProgressPeriodForm, 'progressPeriod'>>
+>(({ name, onChange, onBlur }, ref) => {
+  const now = new Date();
+
+  const [startDate, setStartDate] = useState(now);
+  const [endDate, setEndDate] = useState(null);
 
   return (
-    <>
-      <DateContainer
-        selected={startDateTime}
-        value={(useForm.startDateTime = startDateTime.toISOString().slice(0, -5))}
-        name="startDateTime"
-        onChange={(date: Date) => setForms(date)}
-        // onChange={StartHandler}
-        selectsStart
-        startDate={startDateTime}
-        // endDate={endDateTime}
-        dateFormat="yyyy-MM-dd'T'HH:mm:ss"
-      />
-      <Slash>-</Slash>
-      <DateContainer
-        selected={endDateTime}
-        value={(useForm.endDateTime = endDateTime.toISOString().slice(0, -5))}
-        name="endDateTime"
-        onChange={(date: any) => setFormss(date)}
-        selectsEnd
-        endDate={endDateTime}
-        minDate={startDateTime}
-        dateFormat="yyyy-MM-dd'T'HH:mm:ss"
-      />
-    </>
+    <DateContainer
+      ref={ref}
+      name={name}
+      locale="ko"
+      // 기본값은 오늘부터 시작하는 것으로 가정
+      selected={startDate}
+      onBlur={onBlur}
+      onChange={([start, end]: [Date, Date]) => {
+        setStartDate(start);
+        setEndDate(end);
+        onChange([start, end]);
+      }}
+      // 시작일은 오늘 이후로 선택할 수 없다
+      minDate={now}
+      startDate={startDate}
+      endDate={endDate}
+      placeholderText="ex) 24.01.23 - 24.03.23"
+      // 범위 선택
+      selectsRange
+      shouldCloseOnSelect
+      showDisabledMonthNavigation
+      // 한국인에게 익숙한 날짜 순서
+      dateFormat="yy.MM.dd"
+    />
   );
-};
+});
 
+// TODO: ./EndDate.tsx 랑 똑같은 Styled Component인데 한쪽으로 빼서 공용 컴포넌트로 사용하기
 const DateContainer = styled(DatePicker)`
-  width: 145px;
+  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;
-`;
 
-const Slash = styled.p`
-  padding-right: 20px;
+  &::placeholder {
+    color: ${(props) => props.theme.color.black2};
+  }
 `;

src/Components/Colors.mdx

@@ -61,6 +61,11 @@ import { color } from '@/Styles/theme';
       'gray5': color.gray5,
     }}
   />
+  <ColorItem
+    title="Negative"
+	subtitle="theme.color.negative"
+    colors={[color.negative]}
+  />
   <ColorItem
     title="Naver"
 	subtitle="theme.color.naver"

src/Components/Common/Divider/BoldDivider/index.tsx

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const BoldDivider = styled.div<{ rowHeight: number }>`
+  width: 100%;
+  height: ${(props) => `${props.rowHeight}px`};
+  background-color: ${(props) => props.theme.color.gray1};
+`;

src/Components/Common/Grid/index.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const Grid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, minmax(392px, 1fr));
+  gap: 24px;
+  margin-top: 24px;
+`;

src/Components/Common/InputText/InputText.stories.ts

@@ -36,3 +36,10 @@ export const Member: Story = {
     placeholder: '멤버를 입력하세요',
   },
 };
+
+export const Label: Story = {
+  args: {
+    label: '포지션',
+    placeholder: '포지션을 입력하세요',
+  },
+};

src/Components/Common/InputText/index.tsx

@@ -1,34 +1,88 @@
-import React, { ForwardedRef } from 'react';
+import { ComponentProps, ForwardedRef, forwardRef, useState } from 'react';
 import styled from 'styled-components';
 
 interface InputTextProps extends React.InputHTMLAttributes<HTMLInputElement> {
   placeholder?: string;
   inputType?: 'text' | 'email' | 'password' | 'member';
+  defaultValue?: string;
+  currentLength?: number;
+  maxLength?: number;
+  label?: string;
 }
 
-const InputText = React.forwardRef(
-  ({ placeholder, inputType, onChange, ...props }: InputTextProps, ref: ForwardedRef<HTMLInputElement>) => {
-    return <InputWrapper placeholder={placeholder} ref={ref} type={inputType} onChange={onChange} {...props} />;
+const InputText = forwardRef<HTMLInputElement, ComponentProps<'input'> & InputTextProps>(
+  (
+    { name, placeholder, defaultValue, inputType, onChange, maxLength, currentLength, label, ...props }: InputTextProps,
+    ref: ForwardedRef<HTMLInputElement>,
+  ) => {
+    return (
+      <Box>
+        {label && <Label>{label}</Label>}
+        <InputWrapper
+          placeholder={placeholder}
+          defaultValue={defaultValue}
+          name={name}
+          ref={ref}
+          type={inputType ?? 'text'}
+          onChange={onChange}
+          autoComplete="off"
+          {...props}
+        />
+        {maxLength && (
+          <LengthIndicator>
+            {currentLength} / {maxLength}
+          </LengthIndicator>
+        )}
+      </Box>
+    );
   },
 );
 
+export const Label = styled.div`
+  font-size: 18px;
+  line-height: 24px;
+  color: #000000f2;
+  margin-bottom: 12px;
+`;
+
 const InputWrapper = styled.input`
   width: 100%;
   padding: 10px 16px;
   border: 1px solid ${({ theme }) => theme.color.black1};
   border-radius: ${({ theme }) => theme.borderRadius.small};
-  font-size: ${({ theme }) => theme.font.medium};
+  font-size: ${({ theme }) => theme.font.small};
   line-height: 1.5;
   color: ${({ theme }) => theme.color.black};
+  text-overflow: ellipsis;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
 
-  ::placeholder {
+  &::placeholder {
     color: ${({ theme }) => theme.color.black2};
     font-family: 'Pretendard400';
-    font-size: ${({ theme }) => theme.font.medium};
+    font-size: ${({ theme }) => theme.font.small};
     font-style: normal;
     font-weight: 400;
     line-height: 28px;
   }
 `;
 
+const Box = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+`;
+
+const LengthIndicator = styled.div`
+  position: absolute;
+  bottom: 13px;
+  right: 16px;
+  color: #00000073;
+  font-family: Pretendard400;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+`;
+
 export default InputText;

src/Components/Common/LabelForm/LabelForm.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { LabelForm } from '.';
+
+const meta = {
+  component: LabelForm,
+  args: {
+    label: '포지션',
+    children: React.createElement('input', { placeholder: 'input' }, null),
+  },
+} satisfies Meta<typeof LabelForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** 유효하지 않을 경우, 에러메시지를 표시합니다. */
+export const Errors: Story = {
+  args: {
+    errors: {
+      positionIds: {
+        message: '포지션을 선택해주세요.',
+      },
+    },
+    name: 'positionIds',
+  },
+};