Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/Client-DEV-CD.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
jobkaeHenry marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
4 changes: 3 additions & 1 deletion client/src/app/(protectedRoute)/new-post/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -60,6 +61,7 @@ export default function NewpostPage() {
await attachFileHandler({
file,
url: { pk: postNo, type: "POST" },
size: POST_IMAGE_SIZE,
});
} catch {
deletePostHandler(postNo);
Expand All @@ -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"}>
jobkaeHenry marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
9 changes: 5 additions & 4 deletions client/src/components/newpost/NewPostTextEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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[]>([]);

Expand Down Expand Up @@ -84,8 +85,8 @@ const NewPostTextEditor = ({ onContentChange }: NewPostTextEditorInterface) => {
component="span"
>
{textLength}
</Typography>{" "}
/ 200자
</Typography>
/ {maxLength}자
</Typography>
</>
);
jobkaeHenry marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
6 changes: 3 additions & 3 deletions client/src/components/post/PostCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const PostCard = ({
}: PostInterface) => {
const openPostDetailPage = useOpenPostDetailPage();
const router = useRouter();

const hasImage = useMemo(() => postAttachUrls.length !== 0, [postAttachUrls]);

const searchContext = useContext(postcardContext);
Expand All @@ -72,7 +72,7 @@ const PostCard = ({
router.push(HOME);
}
};

const { data: currentUser } = useMyInfoQuery();

const isMyPost = useMemo(
Expand Down Expand Up @@ -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
}}
/>
)}
jobkaeHenry marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
4 changes: 2 additions & 2 deletions client/src/components/user/info/UserAvatar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
jobkaeHenry marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
10 changes: 7 additions & 3 deletions client/src/components/user/info/drawer/UserInfoEditingForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -43,6 +44,7 @@ const UserInfoEditingForm = () => {
await attachFile({
file: file,
url: { type: "PROFILE", pk: Number(data?.userNo) },
size: PROFILE_IMAGE_SIZE,
});
},
[data]
Expand All @@ -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);
jobkaeHenry marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
9 changes: 9 additions & 0 deletions client/src/const/imageSize.ts
Original file line number Diff line number Diff line change
@@ -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;
jobkaeHenry marked this conversation as resolved.
Show resolved Hide resolved
3 changes: 2 additions & 1 deletion client/src/const/serverPath.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
jobkaeHenry marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
15 changes: 11 additions & 4 deletions client/src/queries/attach/useNewAttachMutation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
},
Expand Down Expand Up @@ -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",
},
Expand All @@ -75,6 +81,7 @@ export const postImageFn = async (
return formData;
},
],
baseURL: process.env.NEXT_PUBLIC_IMAGE_COMPRESS_URL,
}
);
return data;
jobkaeHenry marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
6 changes: 6 additions & 0 deletions client/src/types/attach/attachInterface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,9 @@ export default interface AttachInterface {
attachUrl: string;
attachType: string;
}

export interface ImageSize {
width: number;
height: number;
}

jobkaeHenry marked this conversation as resolved.
Show resolved Hide resolved