Merge pull request #26 from YAPP-Github/feat/YS-172

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
+    "@hookform/resolvers": "^3.10.0",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-popover": "^1.1.4",
     "@radix-ui/react-select": "^2.1.4",
@@ -24,9 +25,10 @@
     "jira-prepare-commit-msg": "^1.7.2",
     "next": "14.2.22",
     "react": "^18",
+    "react-day-picker": "^9.5.0",
     "react-dom": "^18",
     "react-hook-form": "^7.54.2",
-    "react-day-picker": "^9.5.0"
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@mswjs/http-middleware": "^0.10.2",

src/apis/hooks/useUploadExperimentPostAPI.ts

@@ -0,0 +1,76 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { GenderType } from '@/app/upload/components/ApplyMethodSection/ApplyMethodSection';
+import { MatchType } from '@/types/uploadExperimentPost';
+import { API_URL } from '@/constants/url';
+import { API } from '../config';
+
+interface UseUploadExperimentPostAPIParams {
+  startDate?: string | null;
+  endDate?: string | null;
+  matchType: MatchType;
+  count: number;
+  timeRequired?:
+    | 'LESS_30M'
+    | 'ABOUT_30M'
+    | 'ABOUT_1H'
+    | 'ABOUT_1H30M'
+    | 'ABOUT_2H'
+    | 'ABOUT_2H30M'
+    | 'ABOUT_3H'
+    | 'ABOUT_3H30M'
+    | 'ABOUT_4H'
+    | null;
+  leadResearcher: string;
+  univName?: string | null;
+  region?: string | null;
+  area?: string | null;
+  detailedAddress?: string;
+  reward: string;
+  title: string;
+  content: string;
+  imageListInfo?: {
+    images?: string[];
+  };
+  applyMethodInfo: {
+    content: string;
+    formUrl?: string | null;
+    phoneNum?: string | null;
+  };
+  targetGroupInfo: {
+    startAge: number;
+    endAge: number;
+    genderType: GenderType;
+    otherCondition?: string;
+  };
+  alarmAgree: boolean;
+}
+
+interface UploadedPostInfo {
+  experimentPostId: number;
+  title: string;
+  views: number;
+  univName: string;
+  reward: string;
+  durationInfo: {
+    startDate: string;
+    endDate: string;
+  };
+}
+
+interface UseUploadExperimentPostAPIResponse {
+  postInfo: UploadedPostInfo;
+}
+
+const useUploadExperimentPostAPI = () => {
+  const mutationKey = API_URL.uploadPost;
+  const mutationFn = async (data: UseUploadExperimentPostAPIParams) =>
+    await API.post<UseUploadExperimentPostAPIResponse>(mutationKey, data).then((res) => res.data);
+
+  return useMutation({
+    mutationKey: [mutationKey],
+    mutationFn,
+  });
+};
+
+export default useUploadExperimentPostAPI;

src/app/upload/components/AgeForm/AgeForm.styles.ts

@@ -0,0 +1,26 @@
+import { css, Theme } from '@emotion/react';
+
+export const textInputContainer = () => css`
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  position: relative;
+
+  width: 100%;
+`;
+
+export const inputStyle = (theme: Theme) => css`
+  ${theme.fonts.label.large.R14};
+
+  width: 17.2rem;
+  height: 2.2rem;
+
+  text-align: center;
+
+  border: none;
+  outline: none;
+
+  &::placeholder {
+    color: ${theme.colors.text02};
+  }
+`;

src/app/upload/components/AgeForm/AgeForm.tsx

@@ -0,0 +1,33 @@
+import { ChangeEvent, forwardRef } from 'react';
+import { inputStyle, textInputContainer } from './AgeForm.styles';
+
+interface AgeFormProps {
+  id: string;
+  field: {
+    name: string;
+    value: string | number | null;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onBlur: VoidFunction;
+  };
+  placeholder?: string;
+}
+
+const AgeForm = forwardRef<HTMLInputElement, AgeFormProps>(({ field, placeholder, id }, ref) => {
+  return (
+    <div css={textInputContainer}>
+      <input
+        {...field}
+        ref={ref}
+        id={id}
+        type="number"
+        css={inputStyle}
+        placeholder={placeholder}
+        value={field.value || ''}
+      />
+    </div>
+  );
+});
+
+AgeForm.displayName = 'AgeForm';
+
+export default AgeForm;

src/app/upload/components/ApplyMethodSection/ApplyMethodSection.styles.ts

@@ -0,0 +1,61 @@
+import { css, Theme } from '@emotion/react';
+
+export const applyMethodContainer = css`
+  margin-top: 2rem;
+  margin-bottom: 4.8rem;
+`;
+
+export const applyMethodContentLayout = css`
+  display: flex;
+  flex-flow: column nowrap;
+`;
+
+export const addContactInfoContainer = css`
+  width: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.8rem;
+`;
+
+export const targetConditionLayout = css`
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 2.8rem;
+`;
+
+export const targetGroupContainer = css`
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+`;
+
+export const ageInputContainer = (theme: Theme, isError: boolean) => css`
+  width: 45.2rem;
+  height: 4.8rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0.1rem solid ${isError ? theme.colors.textAlert : theme.colors.line01};
+  border-radius: 1.2rem;
+  padding: 1.3rem 1.6rem;
+`;
+
+export const textStyle = (theme: Theme) => css`
+  ${theme.fonts.label.large.M14};
+  color: ${theme.colors.text06};
+`;
+
+export const alarmAgreeContainer = (theme: Theme) => css`
+  width: fit-content;
+  height: 3.4rem;
+
+  padding: 0 1rem;
+
+  background-color: ${theme.colors.field02};
+  border-radius: 0.8rem;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;