이미지-압축서버-연결에따른-파일첨부로직-변경 (#78)

* Minor : 카드 이미지 aspect Ratio적용 스타일 변경 * Minor : 스타일 변경 * Refactor : max length를 변수로 받도록 설정 * Refactor : 이미지 압축서버 연결에따른 파일첨부 로직 변경
potenday-project · Dec 7, 2023 · 52ee665 · 52ee665
1 parent 6e8f97e
commit 52ee665
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 19 deletions.
diff --git a/.github/workflows/Client-DEV-CD.yml b/.github/workflows/Client-DEV-CD.yml
@@ -23,7 +23,7 @@ jobs:
         uses: docker/setup-buildx-action@v3
 
       - name: Build Docker Image
-        run: docker buildx build --platform linux/arm64,linux/amd64 -f Dockerfile --build-arg NEXT_PUBLIC_BASE_URL=${{secrets.NEXT_PUBLIC_BASE_URL}}  --build-arg NEXT_PUBLIC_CLIENT_BASE_URL=${{secrets.NEXT_PUBLIC_CLIENT_BASE_URL}} --build-arg PORT=${{secrets.CLIENT_DEV_PORT}} -t ${{ secrets.CLIENT_STORYBOOK_REPO }}/${{ secrets.CLIENT_DEV_SERVICE_NAME }}:latest --push .
+        run: docker buildx build --platform linux/arm64,linux/amd64 -f Dockerfile --build-arg NEXT_PUBLIC_IMAGE_COMPRESS_URL=${{secrets.NEXT_PUBLIC_IMAGE_COMPRESS_URL}} --build-arg NEXT_PUBLIC_BASE_URL=${{secrets.NEXT_PUBLIC_BASE_URL}}  --build-arg NEXT_PUBLIC_CLIENT_BASE_URL=${{secrets.NEXT_PUBLIC_CLIENT_BASE_URL}} --build-arg PORT=${{secrets.CLIENT_DEV_PORT}} -t ${{ secrets.CLIENT_STORYBOOK_REPO }}/${{ secrets.CLIENT_DEV_SERVICE_NAME }}:latest --push .
         working-directory: ./client
 
       - name: executing remote ssh commands using password

diff --git a/client/src/app/(protectedRoute)/new-post/page.tsx b/client/src/app/(protectedRoute)/new-post/page.tsx
@@ -23,6 +23,7 @@ import PreviewImageByURL from "@/components/PreviewImageByURL";
 import NewPostTextEditor from "@/components/newpost/NewPostTextEditor";
 import useRenderAsDataUrl from "@/hooks/useRenderAsDataUrl";
 import SingleImageInput from "@/components/SingleImageInput";
+import { POST_IMAGE_SIZE } from "@/const/imageSize";
 
 export default function NewpostPage() {
   const { setLoading } = useGlobalLoadingStore();
@@ -60,6 +61,7 @@ export default function NewpostPage() {
             await attachFileHandler({
               file,
               url: { pk: postNo, type: "POST" },
+              size: POST_IMAGE_SIZE,
             });
           } catch {
             deletePostHandler(postNo);
@@ -85,7 +87,7 @@ export default function NewpostPage() {
         title="포스팅"
         appendButton="공유"
         disableAppend={isSuccess}
-        onClickAppend={()=>submitHandler({...formValue,alcoholNo},file)}
+        onClickAppend={() => submitHandler({ ...formValue, alcoholNo }, file)}
       />
 
       <Container sx={{ p: { xs: 0, sm: 4 } }} maxWidth={"lg"}>

diff --git a/client/src/components/newpost/NewPostTextEditor.tsx b/client/src/components/newpost/NewPostTextEditor.tsx
@@ -9,10 +9,11 @@ import { sanitize } from "isomorphic-dompurify";
 
 interface NewPostTextEditorInterface {
   onContentChange: (props: { content: string; tagList: string[] }) => void;
+  maxLength?:number
 }
 
-const NewPostTextEditor = ({ onContentChange }: NewPostTextEditorInterface) => {
-  const [mentioningValue, setMentioningValue] = useState("");
+const NewPostTextEditor = ({ onContentChange,maxLength=200 }: NewPostTextEditorInterface) => {
+  const [_mentioningValue, setMentioningValue] = useState("");
 
   const [tagList, setTagList] = useState<string[]>([]);
 
@@ -84,8 +85,8 @@ const NewPostTextEditor = ({ onContentChange }: NewPostTextEditorInterface) => {
           component="span"
         >
           {textLength}
-        </Typography>{" "}
-        / 200자
+        </Typography>
+        / {maxLength}자
       </Typography>
     </>
   );

diff --git a/client/src/components/post/PostCard.tsx b/client/src/components/post/PostCard.tsx
@@ -53,7 +53,7 @@ const PostCard = ({
 }: PostInterface) => {
   const openPostDetailPage = useOpenPostDetailPage();
   const router = useRouter();
-  
+
   const hasImage = useMemo(() => postAttachUrls.length !== 0, [postAttachUrls]);
 
   const searchContext = useContext(postcardContext);
@@ -72,7 +72,7 @@ const PostCard = ({
       router.push(HOME);
     }
   };
-  
+
   const { data: currentUser } = useMyInfoQuery();
 
   const isMyPost = useMemo(
@@ -151,14 +151,14 @@ const PostCard = ({
           <CardMedia
             data-testid="postImg"
             component="img"
-            height="142"
             onClick={() => openPostDetailPage(id, String(postNo))}
             image={postAttachUrls[0].attachUrl}
             alt={`${id}의 포스트`}
             sx={{
               borderRadius: 2,
               bgcolor: "background.default",
               cursor: "pointer",
+              aspectRatio: 2.36
             }}
           />
         )}

diff --git a/client/src/components/user/info/UserAvatar.tsx b/client/src/components/user/info/UserAvatar.tsx
@@ -5,10 +5,10 @@ interface UserAvatarProps extends AvatarProps {
   fallback: ReactNode;
 }
 
-const UserAvatar = ({ src, fallback,sx,...others }: UserAvatarProps) => {
+const UserAvatar = ({ src, fallback, sx, ...others }: UserAvatarProps) => {
   return (
     <Avatar
-      sx={{...sx, bgcolor: "secondary.main" }}
+      sx={{ ...sx, bgcolor: src ? "background.paper" : "secondary.main" }}
       src={src}
       data-testid="avatar"
       {...others}

diff --git a/client/src/components/user/info/drawer/UserInfoEditingForm.tsx b/client/src/components/user/info/drawer/UserInfoEditingForm.tsx
@@ -18,6 +18,7 @@ import { useGlobalLoadingStore } from "./../../../../store/useGlobalLoadingStore
 import usePatchUserInfoMutation from "@/queries/user/usePatchUserInfoMutation";
 import useRenderAsDataUrl from "@/hooks/useRenderAsDataUrl";
 import SingleImageInput from "@/components/SingleImageInput";
+import { PROFILE_IMAGE_SIZE } from "@/const/imageSize";
 
 const UserInfoEditingForm = () => {
   const { setIsEditing } = useContext(UserPageContext);
@@ -43,6 +44,7 @@ const UserInfoEditingForm = () => {
       await attachFile({
         file: file,
         url: { type: "PROFILE", pk: Number(data?.userNo) },
+        size: PROFILE_IMAGE_SIZE,
       });
     },
     [data]
@@ -52,9 +54,11 @@ const UserInfoEditingForm = () => {
     setLoading(true);
     await patchUserInfo({ introduction });
     if (file) {
-      data?.profileImages.forEach(async (profile) => {
-        await removeFile(String(profile.attachNo));
-      });
+      Promise.all([
+        data?.profileImages.forEach(async (profile) => {
+          return removeFile(String(profile.attachNo));
+        }),
+      ]);
       await submitFileHandler(file);
     }
     setIsEditing(false);

diff --git a/client/src/const/imageSize.ts b/client/src/const/imageSize.ts
@@ -0,0 +1,9 @@
+/**
+ * 게시글 이미지사이즈
+ */
+export const POST_IMAGE_SIZE = { width: 672, height: 284 } as const;
+
+/**
+ * 프로필 이미지사이즈
+ */
+export const PROFILE_IMAGE_SIZE = { width: 100, height: 100 } as const;
diff --git a/client/src/const/serverPath.ts b/client/src/const/serverPath.ts
@@ -67,7 +67,8 @@ export type ATTACH_FILE_ResourceType = "POST" | "PROFILE" | "ALCOHOL";
 export const ATTACH_FILE = (
   type: ATTACH_FILE_ResourceType,
   resourcePk: number
-) => `/attach/resources/${type}/${resourcePk}` as const;
+) => `/${type}/${resourcePk}` as const;
+// ) => `/attach/resources/${type}/${resourcePk}` as const;
 
 /**
  * 파일PK 를 입력받아 해당 파일을 제거하는 URL

diff --git a/client/src/queries/attach/useNewAttachMutation.ts b/client/src/queries/attach/useNewAttachMutation.ts
@@ -6,13 +6,17 @@ import { postDetailQueryKey } from "../post/useGetPostDetailQuery";
 import { MyInfoQueryKeys } from "../auth/useMyInfoQuery";
 import { UserInfoQueryKey } from "../user/useUserInfoQuery";
 import useAxiosPrivate from "@/hooks/useAxiosPrivate";
+import { ImageSize } from "@/types/attach/attachInterface";
 
 export const useNewAttachMutation = () => {
   const errorHandler = useErrorHandler();
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: async (param: { file: File; url: NewAttatchRequestUrl }) =>
-      await postImageFn(param.file, param.url),
+    mutationFn: async (param: {
+      file: File;
+      url: NewAttatchRequestUrl;
+      size?: ImageSize;
+    }) => await postImageFn(param.file, param.url, param.size),
     onMutate: (variables) => {
       return variables;
     },
@@ -57,16 +61,18 @@ interface NewAttatchRequestUrl {
  */
 export const postImageFn = async (
   file: File,
-  { type, pk }: NewAttatchRequestUrl
+  { type, pk }: NewAttatchRequestUrl,
+  size?: ImageSize
 ) => {
-  const axiosPrivate = useAxiosPrivate()
+  const axiosPrivate = useAxiosPrivate();
   const formData = new FormData();
   formData.append("image", file);
 
   const { data } = await axiosPrivate.post<{ attachNo: number }>(
     ATTACH_FILE(type, pk),
     formData,
     {
+      params: size,
       headers: {
         "Content-Type": "multipart/form-data",
       },
@@ -75,6 +81,7 @@ export const postImageFn = async (
           return formData;
         },
       ],
+      baseURL: process.env.NEXT_PUBLIC_IMAGE_COMPRESS_URL,
     }
   );
   return data;

diff --git a/client/src/types/attach/attachInterface.ts b/client/src/types/attach/attachInterface.ts
@@ -3,3 +3,9 @@ export default interface AttachInterface {
   attachUrl: string;
   attachType: string;
 }
+
+export interface ImageSize {
+  width: number;
+  height: number;
+}
+