Member 활동 api 연동 및 컴포넌트 추가

apps/member/.env.example

@@ -3,6 +3,7 @@
 VITE_GOOGLE_ANALYTICS_ID=구글애널리틱스
 VITE_CHANNEL_TALK_TOKEN=채널톡토큰
 VITE_SENTRY_DSN=센트리DSN
+VITE_UNSPLASH_ACCESS_KEY=언스플래쉬엑세스키
 
 # .env.development
 # 스테이징 환경 설정

apps/member/src/api/activity.ts

@@ -1,13 +1,16 @@
-import { createPagination } from '@clab/utils';
+import { createPagination, createURL } from '@clab/utils';
 
 import { END_POINT } from '@constants/api';
+import { UNSPLASH_ACCESS_KEY } from '@constants/environment';
 import { createFormData } from '@utils/api';
 import { groupBoardParser } from '@utils/group';
 
 import type {
   ActivityApplyMemberType,
   ActivityBoardType,
   ActivityGroupBoardParserType,
+  ActivityGroupCategoryType,
+  ActivityGroupCreateItem,
   ActivityGroupItem,
   ActivityGroupMemberMyType,
   ActivityGroupStatusType,
@@ -57,6 +60,24 @@ export interface PostActivityPhotoParams {
   file: File;
 }
 
+export interface PostActivityGroupParams {
+  category: ActivityGroupCategoryType;
+  subject: string;
+  name: string;
+  content: string;
+  imageUrl?: string;
+  curriculum?: string;
+  startDate?: string;
+  endDate?: string;
+  techStack?: string;
+  githubUrl?: string;
+}
+
+export interface PatchActivityGroupParams {
+  activityGroupId: number;
+  activityGroupStatus: ActivityGroupStatusType;
+}
+
 /**
  * 활동 사진 조회
  */
@@ -304,3 +325,74 @@ export async function postActivityPhoto(body: PostActivityPhotoParams) {
 
   return data;
 }
+/**
+ * 키워드 사진 검색
+ */
+export async function getSearchImage(keyword: string) {
+  const accessKey = UNSPLASH_ACCESS_KEY;
+
+  if (!accessKey) {
+    throw new Error('no access key');
+  }
+
+  const url = new URL('https://api.unsplash.com/search/photos');
+  url.searchParams.append('query', keyword);
+
+  const response = await fetch(url.href, {
+    headers: {
+      Authorization: `Client-ID ${accessKey}`,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`Error fetching images: ${response.statusText}`);
+  }
+  const data = await response.json();
+
+  return data;
+}
+
+/**
+ * 활동 생성
+ */
+export async function postActivityGroup(body: PostActivityGroupParams) {
+  const { data } = await server.post<
+    ActivityGroupCreateItem,
+    BaseResponse<number>
+  >({
+    url: createURL(END_POINT.ACTIVITY_GROUP_ADMIN),
+    body,
+  });
+
+  return data;
+}
+
+/**
+ * 활동 삭제
+ */
+export async function deleteActivityGroup(activityGroupId: number) {
+  const { data } = await server.del<never, BaseResponse<number>>({
+    url: createURL(END_POINT.ACTIVITY_GROUP_ADMIN_DETAIL(activityGroupId)),
+  });
+
+  return data;
+}
+
+/**
+ * 활동 상태 변경
+ */
+export async function patchActivityGroup({
+  activityGroupId,
+  activityGroupStatus,
+}: PatchActivityGroupParams) {
+  const { data } = await server.patch<never, BaseResponse<number>>({
+    url: createPagination(
+      END_POINT.ACTIVITY_GROUP_ADMIN_MANAGE(activityGroupId),
+      {
+        activityGroupStatus,
+      },
+    ),
+  });
+
+  return data;
+}

apps/member/src/components/common/ActionButton/ActionButton.tsx

@@ -3,13 +3,14 @@ import { ComponentPropsWithRef } from 'react';
 import { cn } from '@clab/utils';
 
 interface ActionButtonProps extends ComponentPropsWithRef<'button'> {
-  color?: 'black' | 'red' | 'blue' | 'orange';
+  color?: 'black' | 'red' | 'blue' | 'orange' | 'green';
 }
 
 const colorStyled = {
   black: 'text-black',
   red: 'text-red-500',
   blue: 'text-blue-500',
+  green: 'text-green-500',
   orange: 'text-orange-500',
 } as const;
 

apps/member/src/components/group/AssignmentUploadSection/AssignmentUploadSection.tsx

@@ -13,7 +13,7 @@ import {
   useActivityGroupBoardPatchMutation,
   useMyProfile,
 } from '@hooks/queries';
-import { formattedDate, isDateValid } from '@utils/date';
+import { formattedDate, isDateValid, toKoreaISOString } from '@utils/date';
 
 import type { ActivityBoardType } from '@type/activity';
 import type { ResponseFile } from '@type/api';
@@ -48,14 +48,13 @@ const AssignmentUploadSection = ({
     setDescription(e.target.value);
   };
 
-  const onClickDeleteFile = () => {
+  const handleDeleteFileClick = () => {
     setUploadedFile(null);
   };
 
-  const onClickSubmit = () => {
+  const handleSubmitButtonClick = () => {
     const formData = new FormData();
     const file = uploaderRef.current?.files?.[0];
-
     if (file) {
       formData.append(FORM_DATA_KEY, file);
     }
@@ -116,7 +115,7 @@ const AssignmentUploadSection = ({
             })}
           >
             {uploadedFile
-              ? formattedDate(uploadedFile.createdAt)
+              ? formattedDate(toKoreaISOString(uploadedFile.createdAt))
               : '아직 제출하지 않았습니다.'}
           </Table.Cell>
         </Table.Row>
@@ -150,13 +149,17 @@ const AssignmentUploadSection = ({
       </Table>
       <div className="mt-2 flex gap-4">
         {uploadedFile && (
-          <Button className="w-full" color="orange" onClick={onClickDeleteFile}>
+          <Button
+            className="w-full"
+            color="orange"
+            onClick={handleDeleteFileClick}
+          >
             첨부파일 변경하기
           </Button>
         )}
         <Button
           className="w-full"
-          onClick={onClickSubmit}
+          onClick={handleSubmitButtonClick}
           disabled={description.length === 0}
         >
           제출하기

apps/member/src/components/group/GroupCard/GroupCard.tsx

@@ -1,5 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 
+import { Grid } from '@clab/design-system';
 import { CertificateSolidOutline, DateRangeOutline } from '@clab/icon';
 import { cn } from '@clab/utils';
 
@@ -37,7 +38,7 @@ const InfoCard = ({ title, value, color }: InfoCardProps) => {
         colors[color],
       )}
     >
-      <b className='break-keep" text-nowrap'>{value}</b>
+      <b className="text-nowrap break-keep">{value}</b>
       <p className="text-xs font-semibold">{title}</p>
     </div>
   );
@@ -68,21 +69,24 @@ const GroupCard = ({
   const navigate = useNavigate();
 
   return (
-    <div
-      className="flex h-[227px] cursor-pointer rounded-lg border transition-colors hover:bg-gray-50"
+    <Grid
+      col="3"
+      gap="sm"
+      className="h-[227px] cursor-pointer rounded-lg border transition-colors hover:bg-gray-50"
       onClick={() => navigate(PATH_FINDER.ACTIVITY_DETAIL(id))}
     >
       <Image
         src={imageUrl}
-        width="w-1/3"
         alt={name}
+        height="min-h-fit h-full"
         className="rounded-l-lg border-r object-cover"
       />
-      <div className="flex w-2/3 flex-col gap-2 divide-y p-4">
+      <div className="col-span-2 flex flex-col gap-2 divide-y p-4">
         <div className="h-full">
           <p className="text-lg font-bold">{name}</p>
           <p className="text-sm text-gray-600">{content}</p>
         </div>
+
         <div className="grid pt-4 text-sm md:grid-cols-2 md:divide-x">
           <div className="hidden pr-4 md:block">
             <b>내용</b>
@@ -110,7 +114,7 @@ const GroupCard = ({
           </div>
         </div>
       </div>
-    </div>
+    </Grid>
   );
 };