diff --git a/.github/workflows/Client-DEV-CD.yml b/.github/workflows/Client-DEV-CD.yml index e71714a..8ec29d0 100644 --- 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 index 6d7243c..5fc8187 100644 --- 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)} /> diff --git a/client/src/components/newpost/NewPostTextEditor.tsx b/client/src/components/newpost/NewPostTextEditor.tsx index 79e380e..2058f1b 100644 --- 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([]); @@ -84,8 +85,8 @@ const NewPostTextEditor = ({ onContentChange }: NewPostTextEditorInterface) => { component="span" > {textLength} - {" "} - / 200자 + + / {maxLength}자 ); diff --git a/client/src/components/post/PostCard.tsx b/client/src/components/post/PostCard.tsx index a7f4772..69ada2b 100644 --- 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,7 +151,6 @@ const PostCard = ({ openPostDetailPage(id, String(postNo))} image={postAttachUrls[0].attachUrl} alt={`${id}의 포스트`} @@ -159,6 +158,7 @@ const PostCard = ({ 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 index 0085b59..2d67252 100644 --- 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 ( { 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 new file mode 100644 index 0000000..3a06d2e --- /dev/null +++ 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 index 30f8ca2..c151fee 100644 --- 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 index 8df5ded..56c526f 100644 --- 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,9 +61,10 @@ 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); @@ -67,6 +72,7 @@ export const postImageFn = async ( 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 index e43e343..aa3a034 100644 --- 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; +} +