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

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,11 @@ 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 editStudy = async (studyId: number, data: Partial<StudyCreate>) =>
+  httpClient.post(API_END_POINT.EDIT_STUDY(studyId), { ...data });
+
 export const applyStudy = async (studyId: number, recruitmentId: number, data: { positionId: number }) =>
   httpClient.post(API_END_POINT.APPLY(studyId, recruitmentId), { ...data });
 

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,77 @@
 // 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 DatePicker, { registerLocale } from 'react-datepicker';
+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 { ko } from 'date-fns/locale';
+import 'react-datepicker/dist/react-datepicker.css';
+
+registerLocale('ko', ko);
 
-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;
-};
+}
 
-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 });
-  // };
+interface IProgressPeriodForm {
+  progressPeriod: DateRange;
+}
+
+/**
+ * 특정한 범위의 기간을 입력받는 데 사용되는 컴포넌트입니다.
+ *
+ * 사용처는 다음과 같습니다:
+ * - 스터디 기간 설정
+ * - 기간으로 스터디 조회 등
+ */
+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/index.tsx

@@ -95,6 +95,7 @@ const IconWrapper = styled.div`
     cursor: pointer;
   }
 `;
+
 const LengthIndicator = styled.div`
   position: absolute;
   bottom: 13px;

src/Components/Common/Stack/index.tsx

@@ -1,12 +1,20 @@
 import { Children, ReactNode } from 'react';
+import styled from 'styled-components';
 
 export interface StackProps {
   children?: ReactNode;
   divider?: ReactNode;
+  gap?: number | string;
 }
 
-export const Stack = ({ divider, children }: StackProps) => {
+export const Stack = ({ divider, gap, children }: StackProps) => {
   const childrenArr = Children.toArray(children);
 
-  return <div>{[].concat(...childrenArr.map((n) => [n, divider])).slice(0, -1)}</div>;
+  return <Box gap={gap}>{[].concat(...childrenArr.map((n) => [n, divider])).slice(0, -1)}</Box>;
 };
+
+const Box = styled.div<{ gap?: number | string }>`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ gap }) => (gap ? (typeof gap === 'number' ? `${gap}px` : gap) : '16px')};
+`;

src/Components/Selectbox/CustomSelect.tsx

@@ -0,0 +1,126 @@
+import { forwardRef, useMemo } from 'react';
+import Select, { ActionMeta, GroupBase, MultiValue, Props, SelectInstance, StylesConfig } from 'react-select';
+import styled from 'styled-components';
+import { Option } from '@/Types/study';
+import { theme } from '@/Styles/theme';
+/**
+ * @description { value: string, label: string } 으로 들어와야 합니다.
+ * - ex) { value: "1", label: "백엔드" }
+ */
+
+export type SelectProps = Props & {
+  values?: Option<unknown, unknown>[];
+  label?: string;
+  placeholder?: string;
+  defaultValue?: any;
+  isMulti?: boolean;
+};
+
+const CustomSelect = forwardRef<
+  SelectInstance<Option<unknown, unknown>, boolean, GroupBase<Option<unknown, unknown>>>,
+  SelectProps
+>(({ onChange, values, label, placeholder, defaultValue, isMulti = false }, ref) => {
+  const customStyles: StylesConfig<Option<unknown, unknown>> = useMemo(
+    () => ({
+      control: () => ({
+        width: '100%',
+        padding: '7px 16px',
+        border: `1px solid ${theme.color.black1}`,
+        borderRadius: theme.borderRadius.small,
+        background: theme.color.white,
+        fontFamily: 'Pretendard400',
+        fontSize: theme.font.small,
+        cursor: 'pointer',
+      }),
+      option: (provided, { isSelected }) => ({
+        ...provided,
+        color: isSelected ? theme.color.black3 : theme.color.black4,
+        fontFamily: 'Pretendard400',
+        fontSize: theme.font.small,
+        padding: '8px 8px 8px 16px',
+        backgroundColor: isSelected ? theme.color.purple2 : theme.color.white,
+        cursor: 'pointer',
+        ':active': {
+          ...provided[':active'],
+        },
+        ':hover': {
+          ...provided[':hover'],
+          backgroundColor: theme.color.purple2,
+        },
+      }),
+      // TODO: 멀티셀렉트 프리뷰 스타일 문의 (피그마 누락)
+      // multiValue: (provided) => ({
+      //   display: 'flex',
+      //   flexDirection: 'row',
+      //   color: theme.color.black3,
+      //   backgroundColor: 'none',
+      //   fontFamily: 'Pretendard400',
+      //   border: `1px solid ${theme.color.black2}`,
+      //   padding: '1px',
+      //   borderRadius: '4px',
+      // }),
+      // multiValueContainer: () => ({
+      //   color: theme.color.black3,
+      //   fontFamily: 'Pretendard400',
+      // }),
+      // multiValueLabel: () => ({
+      //   color: theme.color.black3,
+      //   backgroundColor: 'none',
+      //   fontFamily: 'Pretendard400',
+      // }),
+      menu: (provided) => ({
+        ...provided,
+        marginTop: '10px',
+        boxShadow: `0px 4px 10px 0px ${theme.color.black1}`,
+        borderRadius: theme.borderRadius.small,
+      }),
+      placeholder: (provided) => ({
+        ...provided,
+        color: theme.color.black2,
+      }),
+      valueContainer: (provided) => ({
+        ...provided,
+        padding: 0,
+      }),
+      indicatorSeparator: (provided) => ({
+        ...provided,
+        width: 0,
+      }),
+    }),
+    [],
+  );
+
+  return (
+    <Label>
+      {label}
+      <Select
+        ref={ref}
+        isMulti={isMulti}
+        placeholder={placeholder ?? ''}
+        options={values}
+        defaultValue={defaultValue || 'Select'}
+        onChange={(
+          newValue: Option<unknown, unknown> | MultiValue<Option<unknown, unknown>>,
+          actionMeta: ActionMeta<Option<unknown, unknown>>,
+        ) => onChange(newValue, actionMeta)}
+        styles={customStyles}
+        components={{
+          IndicatorsContainer: () => null,
+        }}
+      />
+    </Label>
+  );
+});
+
+export default CustomSelect;
+
+const Label = styled.label`
+  font-family: Pretendard700;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 20px;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;

src/Components/Selectbox/SelectBox.tsx

@@ -1,4 +1,5 @@
-import { ComponentProps, forwardRef } from 'react';
+import { SelectArrow } from '@/Assets/SelectArrow';
+import { ComponentProps, ReactNode, forwardRef } from 'react';
 import styled from 'styled-components';
 
 // RHF와 호환되는 범용 SelectBox 컴포넌트

src/Components/TemporarySavedCard/index.tsx

@@ -76,6 +76,10 @@ const TemporarySavedCardWrapper = styled.div`
     font-size: 24px;
   }
 
+  .title {
+    font-size: 24px;
+  }
+
   &:hover {
     cursor: pointer;
   }

src/Constants/queryString.ts

@@ -16,6 +16,7 @@ export const RECRUITMENT = {
 
 export const STUDY = {
   STUDY: (studyId: number) => [BASE_KEY.STUDY, studyId],
+  EDIT: (studyId: number) => [BASE_KEY.STUDY, studyId],
   APPLY: (studyId: number, recruitmentId: number) => [BASE_KEY.STUDY, studyId, recruitmentId, 'APPLY'],
   APPLY_REFUSE: (studyId: number, applicantId: number) => [BASE_KEY.STUDY, studyId, applicantId, 'REFUSE'],
   APPLY_ACCEPT: (studyId: number, applicantId: number) => [BASE_KEY.STUDY, studyId, applicantId, 'ACCEPT'],