Merge branch 'dev' of https://github.com/prgrms-web-devcourse-final-p…

…roject/WEB1_1_ZeroOne_FE into feat/#82-gathering-api
prgrms-web-devcourse-final-project · Dec 7, 2024 · 3cbba3f · 3cbba3f
2 parents fdf7c0c + 7484dd5
commit 3cbba3f
Show file tree

Hide file tree

Showing 62 changed files with 1,396 additions and 186 deletions.
diff --git a/package.json b/package.json
@@ -44,7 +44,9 @@
     "react-hook-form": "^7.53.2",
     "react-router-dom": "^6.28.0",
     "react-select": "^5.8.3",
+    "react-slick": "^0.30.2",
     "sass": "^1.81.0",
+    "slick-carousel": "^1.8.1",
     "sweetalert2": "^11.14.5",
     "yup": "^1.4.0",
     "zustand": "^5.0.1"
@@ -74,6 +76,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
+    "@types/react-slick": "^0.23.13",
     "@typescript-eslint/eslint-plugin": "^8.12.2",
     "@typescript-eslint/parser": "^8.12.2",
     "@vitejs/plugin-react": "^4.3.3",

diff --git a/src/app/AuthProvider.tsx b/src/app/AuthProvider.tsx
@@ -6,12 +6,14 @@ import { getLocalAccessToken, removeLocalAccessToken } from '@/features/auth/aut
 import { useUserStore } from '@/features/user/model/user.store';
 import { getMyProfile } from '@/features/user/user.api';
 import { setInterceptorEvents } from '@/shared/api/baseApi';
+import { useRegistAlarm } from '@/shared/hook/useRegistAlarm';
 import { customConfirm } from '@/shared/ui';
 
 const AuthProvider = ({ children }: { children: ReactNode }) => {
   const navigate = useNavigate();
   const accessToken = getLocalAccessToken();
-  const { setUserData, clearUserData } = useUserStore(state => state.actions);
+  const { setUserData, clearUserData, done } = useUserStore(state => state.actions);
+  useRegistAlarm();
 
   useEffect(() => {
     const getUserData = async () => {
@@ -20,9 +22,12 @@ const AuthProvider = ({ children }: { children: ReactNode }) => {
           const userData = await getMyProfile().then(res => res.data);
           if (!userData) throw new Error('유저 정보를 찾을 수가 없습니다.');
           setUserData(userData);
+
+          done();
           return userData;
         }
         clearUserData();
+        done();
       } catch (error) {
         console.error('유저 데이터를 불러오는 중 오류가 발생했습니다.', error);
       }

diff --git a/src/app/appRouter.tsx b/src/app/appRouter.tsx
@@ -14,6 +14,7 @@ import {
   WriteArchivePage,
   WriteGatheringPage,
   LikeListPage,
+  MainPage,
 } from '@/pages';
 import { Layout } from '@/widgets';
 
@@ -24,7 +25,7 @@ const AppRouter = () => {
       children: [
         {
           path: '/',
-          element: <>{/** mainPage */}</>,
+          element: <MainPage />,
         },
         {
           path: '/portfolio',

diff --git a/src/app/styles/variables.scss b/src/app/styles/variables.scss
@@ -20,6 +20,7 @@ $header-horizontal-padding: 4rem;
 $form-gray-color: #d7d7d7;
 $form-section-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 25%);
 $form-input-color: #999a99;
+$form-input-disabled: #f0f0f0;
 
 // 그라데이션
 $palette-gradient: linear-gradient(151deg, $red 0%, $yellow 32%, $green 71%, $blue 100%);

diff --git a/src/features/archive/archive.api.ts b/src/features/archive/archive.api.ts
@@ -86,3 +86,6 @@ export const getMyArchiveList = () =>
   api.get<GetArchiveListApiResponse>('/archive/me').then(res => res.data);
 
 export const patchArchiveOrder = (data: PatchArchiveOrderDTO) => api.patch('/archive', data);
+
+export const getPopularArchive = () =>
+  api.get<GetArchiveListApiResponse>('/archive/main').then(res => res.data);
diff --git a/src/features/archive/archive.hook.ts b/src/features/archive/archive.hook.ts
@@ -17,6 +17,7 @@ import {
   putComment,
   getMyArchiveList,
   patchArchiveOrder,
+  getPopularArchive,
 } from './archive.api';
 import type {
   BaseArchiveDTO,
@@ -62,6 +63,12 @@ export const useArchive = (archiveId: number) =>
     queryFn: () => getArchive(archiveId),
   });
 
+export const usePopularArchive = () =>
+  useQuery({
+    queryKey: ['/archive/main'],
+    queryFn: () => getPopularArchive(),
+  });
+
 export const useComments = (archiveId: number) => {
   return useCustomInfiniteQuery<GetCommentsApiResponse, Comment, Error>(
     ['/archive', archiveId, 'comment'],

diff --git a/src/features/auth/form.hook.ts b/src/features/auth/form.hook.ts
@@ -11,11 +11,13 @@ interface useProfileFormProps<T extends FormValues> {
 
 export const useProfileForm = <T extends FormValues>({ formConfig }: useProfileFormProps<T>) => {
   const [formStructure, setFormStructure] = useState([...formConfig.structure]);
+  const [isResetting, setIsResetting] = useState<boolean>(false);
   const method = useForm({
     resolver: yupResolver(formConfig.validation),
     mode: 'onChange',
     defaultValues: formConfig.defaultValues,
   });
+
   const majorJobGroup = method.watch('majorJobGroup');
 
   /**
@@ -26,6 +28,11 @@ export const useProfileForm = <T extends FormValues>({ formConfig }: useProfileF
   useEffect(() => {
     if (!majorJobGroup) return;
 
+    if (isResetting) {
+      setIsResetting(false);
+      return;
+    }
+
     setFormStructure(prev => {
       const updatedStructure = [...prev];
 
@@ -41,7 +48,6 @@ export const useProfileForm = <T extends FormValues>({ formConfig }: useProfileF
           break;
         }
       }
-
       return updatedStructure;
     });
 
@@ -50,9 +56,15 @@ export const useProfileForm = <T extends FormValues>({ formConfig }: useProfileF
     });
   }, [majorJobGroup, method]);
 
+  const handleReset = (data: Partial<T>) => {
+    setIsResetting(true);
+    method.reset(data);
+  };
+
   return {
     formStructure,
     method,
+    handleReset,
   };
 };
 
@@ -71,7 +83,11 @@ export const usePortfolioInput = () => {
       return false;
     }
 
-    if (!(value.startsWith('https://') || value.startsWith('http://'))) {
+    if (
+      !value.match(
+        /^((ftp|http|https):\/\/)?(www.)?(?!.*(ftp|http|https|www.))[a-zA-Z0-9_-]+(\.[a-zA-Z]+)+((\/)[\w#]+)*(\/\w+\?[a-zA-Z0-9_]+=\w+(&[a-zA-Z0-9_]+=\w+)*)?$/gm,
+      )
+    ) {
       setError('URL 형식이 잘못됬습니다.');
       return false;
     }

diff --git a/src/features/auth/form.types.ts b/src/features/auth/form.types.ts
@@ -6,6 +6,11 @@ export type Option = {
   label: string;
 };
 
+export type ImageField = {
+  url: string;
+  file: File | null;
+};
+
 export interface FormValues {
   name: string;
   briefIntro: string;
@@ -14,24 +19,29 @@ export interface FormValues {
   jobTitle: string;
   division: string;
   url: { value: string }[];
-  imageUrl: string;
+  imageUrl: ImageField;
 }
 
 export interface PortfolioFormValues extends FormValues {
-  portfolioUrl: string;
+  portfolioLink: string;
+  email: string;
 }
 
 export type FormInputType = 'default' | 'radio' | 'select' | 'image' | 'textarea';
 
 export type FormValuesName = keyof FormValues;
 export type PortfolioFormValuesName = keyof PortfolioFormValues;
 
-export interface InputFieldProps {
+export interface CommonInputAttribute {
+  maxLength?: number;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+export interface InputFieldProps extends CommonInputAttribute {
   name: FormValuesName | PortfolioFormValuesName;
   type?: FormInputType;
-  placeholder?: string;
   options?: Option[];
-  maxLength?: number;
 }
 
 interface InputInfo extends InputFieldProps {
@@ -129,6 +139,8 @@ export const JOB_CATEGORIES = [
   },
 ];
 
+export const JOB_SUB_CATEGORY = JOB_CATEGORIES.map(major => major.children).flat();
+
 export const JOB_DIVISION: Option[] = [
   { value: 'student', label: '학생' },
   { value: 'worker', label: '회사' },

diff --git a/src/features/auth/form.utils.ts b/src/features/auth/form.utils.ts
@@ -1,11 +1,15 @@
 import * as yup from 'yup';
 
-import type { FormConfigType, FormValues, PortfolioFormValues } from './form.types';
+import type { FormConfigType, FormValues, ImageField, PortfolioFormValues } from './form.types';
 import { JOB_CATEGORIES, JOB_DIVISION } from './form.types';
+import { postImages } from '../image/image.api';
 
 export const formValidation = yup.object({
   name: yup.string().required('이름을 입력해주세요.'),
-  briefIntro: yup.string().defined().max(100, '100글자 이하로 소개 글을 작성해주세요.'),
+  briefIntro: yup
+    .string()
+    .required('자기소개를 입력해주세요.')
+    .max(100, '100글자 이하로 소개 글을 작성해주세요.'),
   majorJobGroup: yup
     .object()
     .shape({
@@ -29,14 +33,22 @@ export const formValidation = yup.object({
       yup.object().shape({
         value: yup
           .string()
-          .defined()
           .required('URL을 입력해주세요.')
-          .url('URL 형식에 맞게 입력해주세요.'),
+          .matches(
+            /^((ftp|http|https):\/\/)?(www.)?(?!.*(ftp|http|https|www.))[a-zA-Z0-9_-]+(\.[a-zA-Z]+)+((\/)[\w#]+)*(\/\w+\?[a-zA-Z0-9_]+=\w+(&[a-zA-Z0-9_]+=\w+)*)?$/gm,
+            'URL 형식에 맞게 입력해주세요.',
+          ),
       }),
     )
     .max(5, 'URL은 최대 5개 까지 작성 가능합니다.')
     .defined(),
-  imageUrl: yup.string().defined(), //.required('프로필 이미지를 등록해주세요.'),
+  imageUrl: yup
+    .object()
+    .shape({
+      url: yup.string().defined(),
+      file: yup.mixed().nullable(),
+    })
+    .defined(), //.required('프로필 이미지를 등록해주세요.'),
 });
 
 export const formConfig: FormConfigType<FormValues> = {
@@ -118,17 +130,57 @@ export const formConfig: FormConfigType<FormValues> = {
     jobTitle: '',
     division: 'student',
     url: [],
-    imageUrl: '',
+    imageUrl: {
+      url: '',
+      file: null,
+    },
   },
 };
 
 export const profileFormValidation = formValidation.shape({
-  portfolioUrl: yup.string().defined().url('URL 형식이 아닙니다.'),
+  email: yup.string().defined(),
+  portfolioLink: yup
+    .string()
+    .defined()
+    .matches(
+      /^\s*$|^((ftp|http|https):\/\/)?(www.)?(?!.*(ftp|http|https|www.))[a-zA-Z0-9_-]+(\.[a-zA-Z]+)+((\/)[\w#]+)*(\/\w+\?[a-zA-Z0-9_]+=\w+(&[a-zA-Z0-9_]+=\w+)*)?$/gm,
+      'URL 형식에 맞게 입력해주세요.',
+    ),
 });
 
 export const profileFormConfig: FormConfigType<PortfolioFormValues> = {
   structure: [
-    ...formConfig.structure.slice(0, 2),
+    {
+      title: '기본 정보',
+      inputs: [
+        {
+          label: '프로필 사진',
+          type: 'image',
+          name: 'imageUrl',
+        },
+        {
+          label: '이메일',
+          type: 'default',
+          name: 'email',
+          disabled: true,
+        },
+        {
+          label: '이름',
+          type: 'default',
+          name: 'name',
+          required: true,
+          placeholder: '이름을 입력해주세요.',
+        },
+        {
+          label: '한 줄 소개',
+          type: 'textarea',
+          name: 'briefIntro',
+          maxLength: 100,
+          placeholder: '한 줄 소개를 입력해주세요.',
+        },
+      ],
+    },
+    ...formConfig.structure.slice(1, 2),
     {
       title: 'URL',
       inputs: [
@@ -140,7 +192,7 @@ export const profileFormConfig: FormConfigType<PortfolioFormValues> = {
         {
           label: '포트폴리오 URL',
           type: 'default',
-          name: 'portfolioUrl',
+          name: 'portfolioLink',
           placeholder: 'https://',
         },
       ],
@@ -155,7 +207,31 @@ export const profileFormConfig: FormConfigType<PortfolioFormValues> = {
     jobTitle: '',
     division: 'student',
     url: [],
-    imageUrl: '',
-    portfolioUrl: '',
+    imageUrl: {
+      url: '',
+      file: null,
+    },
+    portfolioLink: '',
+    email: '[email protected]',
   },
 };
+
+export const handleImageUpload = async (imageUrl: ImageField) => {
+  let profileImageUrl = imageUrl.url;
+
+  //이미지 업로드 처리
+  if (imageUrl.file) {
+    try {
+      const imageData = new FormData();
+      imageData.append('files', imageUrl.file);
+      const image = await postImages(imageData).then(res => res.data);
+      if (image && image.imgUrls[0]) {
+        profileImageUrl = image.imgUrls[0].imgUrl;
+      }
+    } catch {
+      console.error('Failed to upload image');
+    }
+
+    return profileImageUrl;
+  }
+};
diff --git a/src/features/auth/ui/FormField.module.scss b/src/features/auth/ui/FormField.module.scss
@@ -18,7 +18,7 @@
     }
 
     & > div {
-      width: 100%;
+      width: 80%;
     }
 
     & > svg {
@@ -34,7 +34,6 @@
   row-gap: 0.5rem;
   align-items: flex-end;
   width: 100%;
-  max-width: 426px;
 
   & .iconBtn {
     font-size: 1.5rem;