From 511fbe927941eab5e4533c38f9c50f587e76a75e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?= <106226701+TaerangLee@users.noreply.github.com> Date: Sun, 1 Oct 2023 02:24:43 +0900 Subject: [PATCH 01/22] Update rankingList page --- .../src/PageContainer/RankingPage/index.tsx | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/projects/client/src/PageContainer/RankingPage/index.tsx b/projects/client/src/PageContainer/RankingPage/index.tsx index f4a59bdf..28c4091b 100644 --- a/projects/client/src/PageContainer/RankingPage/index.tsx +++ b/projects/client/src/PageContainer/RankingPage/index.tsx @@ -1,17 +1,22 @@ 'use client'; +import * as S from './style'; + import { RankingList } from 'common'; import { RankingHeader } from 'client/components'; -import * as S from './style'; -const RankingPage = () => ( - -
- {/* */} -
- - -); +import { useGetStudentInfo } from 'api/client'; + +const RankingPage = () => { + const { data } = useGetStudentInfo(); + + return ( + + {data && } + + + ); +}; export default RankingPage; From 92805faddf3772748a564f1bf03834f20c5a7486 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?= <106226701+TaerangLee@users.noreply.github.com> Date: Sun, 1 Oct 2023 02:32:33 +0900 Subject: [PATCH 02/22] Update ternary operator processing --- projects/client/src/components/RankingHeader/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/projects/client/src/components/RankingHeader/index.tsx b/projects/client/src/components/RankingHeader/index.tsx index e7f1a6c9..f4a9969e 100644 --- a/projects/client/src/components/RankingHeader/index.tsx +++ b/projects/client/src/components/RankingHeader/index.tsx @@ -24,7 +24,11 @@ const RankingHeader: React.FC = ({ return ( - profile + profile 현재 {ranking}위 From 8889adcac3bb459f76d1132fa9ccff071d02cbc9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?= <106226701+TaerangLee@users.noreply.github.com> Date: Sun, 1 Oct 2023 02:33:58 +0900 Subject: [PATCH 03/22] Update user content wrapper style --- projects/client/src/components/RankingHeader/style.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/client/src/components/RankingHeader/style.ts b/projects/client/src/components/RankingHeader/style.ts index 5635dc66..ca46b7a2 100644 --- a/projects/client/src/components/RankingHeader/style.ts +++ b/projects/client/src/components/RankingHeader/style.ts @@ -37,6 +37,7 @@ export const ProfileImageWrapper = styled.div` export const UserContentWrapper = styled.div` display: flex; + width: 350px; `; export const UserRank = styled.div` From cb1a6b82022dfcfd924af7c5e56a0690f9d9f938 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?= <106226701+TaerangLee@users.noreply.github.com> Date: Sun, 1 Oct 2023 15:15:37 +0900 Subject: [PATCH 04/22] Update unit change px -> rem --- packages/api/client/src/hooks/student/usePostUploadProfile.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 packages/api/client/src/hooks/student/usePostUploadProfile.ts diff --git a/packages/api/client/src/hooks/student/usePostUploadProfile.ts b/packages/api/client/src/hooks/student/usePostUploadProfile.ts new file mode 100644 index 00000000..e69de29b From 3b7be115272ca9f0aa5840946bc7510caaa73cd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?= <106226701+TaerangLee@users.noreply.github.com> Date: Sun, 1 Oct 2023 15:42:04 +0900 Subject: [PATCH 05/22] Update usePostUploadProfile logic --- .../src/hooks/student/usePostUploadProfile.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/api/client/src/hooks/student/usePostUploadProfile.ts b/packages/api/client/src/hooks/student/usePostUploadProfile.ts index e69de29b..346ca198 100644 --- a/packages/api/client/src/hooks/student/usePostUploadProfile.ts +++ b/packages/api/client/src/hooks/student/usePostUploadProfile.ts @@ -0,0 +1,16 @@ +import { useMutation } from '@tanstack/react-query'; + +import { post, uploadQueryKey, uploadUrl } from 'api/common'; + +import { UploadProfileType } from 'types'; + +import type { UseMutationOptions } from '@tanstack/react-query'; + +export const usePostUploadProfile = ( + options?: UseMutationOptions +) => + useMutation( + uploadQueryKey.postUploadProfile(), + (uploadProfile) => post(uploadUrl.uploadProfile(), uploadProfile), + options + ); From 7cb167409cfbd18ac3661c9fb40a75a683455003 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?= <106226701+TaerangLee@users.noreply.github.com> Date: Sun, 1 Oct 2023 15:42:33 +0900 Subject: [PATCH 06/22] Update upload profile querykey appoint --- packages/api/common/src/libs/queryKeys.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/api/common/src/libs/queryKeys.ts b/packages/api/common/src/libs/queryKeys.ts index 641526d6..65c56b0a 100644 --- a/packages/api/common/src/libs/queryKeys.ts +++ b/packages/api/common/src/libs/queryKeys.ts @@ -33,3 +33,7 @@ export const orderQueryKeys = { getOrderedItemList: () => ['order', 'list'], patchOrderStatus: (orderId: string) => ['order', 'status', orderId], }; + +export const uploadQueryKey = { + postUploadProfile: () => ['upload', 'profile'], +}; From 305cd0881a441c0e6da834305481d11b72e6712d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?= <106226701+TaerangLee@users.noreply.github.com> Date: Sun, 1 Oct 2023 15:42:56 +0900 Subject: [PATCH 07/22] Update upload profile url appoint --- packages/api/common/src/libs/urlController.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/api/common/src/libs/urlController.ts b/packages/api/common/src/libs/urlController.ts index a7cbc56a..98ff88af 100644 --- a/packages/api/common/src/libs/urlController.ts +++ b/packages/api/common/src/libs/urlController.ts @@ -29,3 +29,7 @@ export const itemUrl = { export const orderUrl = { orderItem: () => `/order`, }; + +export const uploadUrl = { + uploadProfile: () => `/image`, +}; From 13aa8d62702aa5bd16e63f5f1403750c38c3a433 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?= <106226701+TaerangLee@users.noreply.github.com> Date: Sun, 1 Oct 2023 15:43:09 +0900 Subject: [PATCH 08/22] Add export uploadProfile --- packages/types/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index acf6e6b9..dbc53d39 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -8,4 +8,4 @@ export * from './scoringListType'; export * from './solveStatusType'; export * from './missionDetail'; export * from './studentType'; - +export * from './uploadProfile'; From 8a5df496fc7e6cac89ba46b2bf67cc3534416938 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?= <106226701+TaerangLee@users.noreply.github.com> Date: Sun, 1 Oct 2023 15:43:36 +0900 Subject: [PATCH 09/22] Add uploadProfileType appoint --- packages/types/src/uploadProfile.ts | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 packages/types/src/uploadProfile.ts diff --git a/packages/types/src/uploadProfile.ts b/packages/types/src/uploadProfile.ts new file mode 100644 index 00000000..87c4ebf3 --- /dev/null +++ b/packages/types/src/uploadProfile.ts @@ -0,0 +1,3 @@ +export interface UploadProfileType { + image: 'Multipart'; +} From 556d1b3d06fbb65fa32801d8fe15bef681fdff39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?= <106226701+TaerangLee@users.noreply.github.com> Date: Sun, 1 Oct 2023 15:43:51 +0900 Subject: [PATCH 10/22] Upadate unit change px -> rem --- projects/client/src/components/RankingHeader/style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/client/src/components/RankingHeader/style.ts b/projects/client/src/components/RankingHeader/style.ts index ca46b7a2..92781c8e 100644 --- a/projects/client/src/components/RankingHeader/style.ts +++ b/projects/client/src/components/RankingHeader/style.ts @@ -37,7 +37,7 @@ export const ProfileImageWrapper = styled.div` export const UserContentWrapper = styled.div` display: flex; - width: 350px; + width: 21.875rem; `; export const UserRank = styled.div` From 464244cf49f4316d9c6b8e788b36bef213310f15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?= <106226701+TaerangLee@users.noreply.github.com> Date: Sun, 1 Oct 2023 15:47:42 +0900 Subject: [PATCH 11/22] Add export usePostUploadProfile --- packages/api/client/src/hooks/student/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/api/client/src/hooks/student/index.ts b/packages/api/client/src/hooks/student/index.ts index a2db717b..a0c48562 100644 --- a/packages/api/client/src/hooks/student/index.ts +++ b/packages/api/client/src/hooks/student/index.ts @@ -1 +1,2 @@ export * from './useGetStudentInfo'; +export * from './usePostUploadProfile'; From 8ea6849226f2802188057ff33146c7121f5286c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?= <106226701+TaerangLee@users.noreply.github.com> Date: Sun, 1 Oct 2023 17:54:13 +0900 Subject: [PATCH 12/22] Update ProfileImageWrapper style change --- projects/client/src/components/RankingHeader/style.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/projects/client/src/components/RankingHeader/style.ts b/projects/client/src/components/RankingHeader/style.ts index 92781c8e..e145ad6c 100644 --- a/projects/client/src/components/RankingHeader/style.ts +++ b/projects/client/src/components/RankingHeader/style.ts @@ -13,7 +13,7 @@ export const ProfileImageWrapper = styled.div` height: 7.5rem; overflow: hidden; position: relative; - right: 0.5rem; + right: 1.3rem; border-radius: 6.25rem; background-color: rgba(143, 143, 143, 1); @@ -37,7 +37,7 @@ export const ProfileImageWrapper = styled.div` export const UserContentWrapper = styled.div` display: flex; - width: 21.875rem; + width: 16.875rem; `; export const UserRank = styled.div` @@ -45,6 +45,7 @@ export const UserRank = styled.div` ${({ theme }) => theme.typo.button}; padding-right: 0.625rem; `; + export const UserName = styled.div` color: ${({ theme }) => theme.color.black}; ${({ theme }) => theme.typo.button}; From f6acf7dcab41af566cae4b3d5c9e47707fe2bf41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?= <106226701+TaerangLee@users.noreply.github.com> Date: Sun, 1 Oct 2023 19:30:52 +0900 Subject: [PATCH 13/22] Add uploadProfile type fileName --- packages/types/src/uploadProfile.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/types/src/uploadProfile.ts b/packages/types/src/uploadProfile.ts index 87c4ebf3..aa573875 100644 --- a/packages/types/src/uploadProfile.ts +++ b/packages/types/src/uploadProfile.ts @@ -1,3 +1,4 @@ export interface UploadProfileType { image: 'Multipart'; + fileName: string; } From b629ba4fa531427cbc6246a8bf97d8f31e3d35ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?= <106226701+TaerangLee@users.noreply.github.com> Date: Mon, 2 Oct 2023 12:06:55 +0900 Subject: [PATCH 14/22] Update image upload logic --- .../src/components/RankingHeader/index.tsx | 57 +++++++++++++++---- 1 file changed, 47 insertions(+), 10 deletions(-) diff --git a/projects/client/src/components/RankingHeader/index.tsx b/projects/client/src/components/RankingHeader/index.tsx index f4a9969e..c3fa8d3e 100644 --- a/projects/client/src/components/RankingHeader/index.tsx +++ b/projects/client/src/components/RankingHeader/index.tsx @@ -1,17 +1,14 @@ -'use client'; - -import * as S from './style'; - +import React, { useRef } from 'react'; +import Image from 'next/image'; +import { usePostUploadProfile } from 'api/client'; import DefaultProfile from 'common/assets/svg/DefaultProfile.svg'; -import { slicePoint } from 'common'; - +import * as S from './style'; import { RankingPropsType } from 'types'; - -import Image from 'next/image'; +import { slicePoint } from 'common'; interface RankingHeaderProps { - data: RankingPropsType; ranking: number; + data: RankingPropsType; } const RankingHeader: React.FC = ({ @@ -21,10 +18,50 @@ const RankingHeader: React.FC = ({ user: { name, profileImage }, }, }) => { + const { mutate } = usePostUploadProfile(); + const fileInputRef = useRef(null); + + const handleImageChange = async (e: React.ChangeEvent) => { + const file = e.target.files && e.target.files[0]; + if (file) { + try { + uploadImageToServer(file); + alert('이미지 업로드가 완료되었습니다.'); + } catch (error) { + console.error('Error uploading image:', error); + alert('이미지 업로드에 실패했습니다.'); + } + } + }; + + const uploadImageToServer = async (image: File) => { + console.log(image); + const formData = new FormData(); + formData.append('image', image); + + try { + mutate((data) => { + console.log('asdasdasd'); + return { ...data, image: formData }; + }); + } catch (error) { + alert('실패'); + console.error('Error uploading image:', error); + } + }; + return ( - + fileInputRef.current?.click()}> + profile Date: Mon, 2 Oct 2023 12:07:12 +0900 Subject: [PATCH 15/22] Update my ranking data --- .../src/PageContainer/RankingPage/index.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/projects/client/src/PageContainer/RankingPage/index.tsx b/projects/client/src/PageContainer/RankingPage/index.tsx index 28c4091b..cdf85a14 100644 --- a/projects/client/src/PageContainer/RankingPage/index.tsx +++ b/projects/client/src/PageContainer/RankingPage/index.tsx @@ -7,13 +7,24 @@ import { RankingList } from 'common'; import { RankingHeader } from 'client/components'; import { useGetStudentInfo } from 'api/client'; +import { useGetRankingList } from 'api/common'; const RankingPage = () => { - const { data } = useGetStudentInfo(); + const { data: studentInfo } = useGetStudentInfo(); + const { data: rankingList } = useGetRankingList(); + + if (!studentInfo || !rankingList) { + return null; + } + + const userRanking = + rankingList.findIndex((item) => item.id === studentInfo.user.id) + 2; return ( - {data && } + {studentInfo && ( + + )} ); From 2fc49fe7bd27eb9df3dad823c826c985f99e86e8 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Mon, 2 Oct 2023 12:16:18 +0900 Subject: [PATCH 16/22] Update findIndex --- projects/client/src/PageContainer/RankingPage/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/client/src/PageContainer/RankingPage/index.tsx b/projects/client/src/PageContainer/RankingPage/index.tsx index cdf85a14..190369fd 100644 --- a/projects/client/src/PageContainer/RankingPage/index.tsx +++ b/projects/client/src/PageContainer/RankingPage/index.tsx @@ -18,7 +18,7 @@ const RankingPage = () => { } const userRanking = - rankingList.findIndex((item) => item.id === studentInfo.user.id) + 2; + rankingList.findIndex((item) => item.id === studentInfo.id) + 1; return ( From 5645a4614656a2a4d4a993c341a2c0e6dfb33908 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Mon, 2 Oct 2023 12:16:26 +0900 Subject: [PATCH 17/22] Update libs --- packages/api/common/src/libs/queryKeys.ts | 5 +---- packages/api/common/src/libs/urlController.ts | 5 +---- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/api/common/src/libs/queryKeys.ts b/packages/api/common/src/libs/queryKeys.ts index 65c56b0a..5e6231db 100644 --- a/packages/api/common/src/libs/queryKeys.ts +++ b/packages/api/common/src/libs/queryKeys.ts @@ -7,6 +7,7 @@ export const missionQueryKeys = { export const studentQueryKeys = { getRankingList: () => ['student', 'rankingList'], getStudentInfo: () => ['student', 'info'], + postUploadProfile: () => ['upload', 'profile'], }; export const authQueryKeys = { @@ -33,7 +34,3 @@ export const orderQueryKeys = { getOrderedItemList: () => ['order', 'list'], patchOrderStatus: (orderId: string) => ['order', 'status', orderId], }; - -export const uploadQueryKey = { - postUploadProfile: () => ['upload', 'profile'], -}; diff --git a/packages/api/common/src/libs/urlController.ts b/packages/api/common/src/libs/urlController.ts index 98ff88af..78a83be8 100644 --- a/packages/api/common/src/libs/urlController.ts +++ b/packages/api/common/src/libs/urlController.ts @@ -6,6 +6,7 @@ export const missionUrl = { export const studentUrl = { rankingList: () => `/student/ranking`, studentInfo: () => `/student/my`, + uploadProfile: () => `/image`, }; export const authUrl = { @@ -29,7 +30,3 @@ export const itemUrl = { export const orderUrl = { orderItem: () => `/order`, }; - -export const uploadUrl = { - uploadProfile: () => `/image`, -}; From 8a7047f80e462261fd83d12adf000e6649d8a293 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Mon, 2 Oct 2023 12:16:48 +0900 Subject: [PATCH 18/22] Update usePostUploadProfile --- .../src/hooks/student/usePostUploadProfile.ts | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/packages/api/client/src/hooks/student/usePostUploadProfile.ts b/packages/api/client/src/hooks/student/usePostUploadProfile.ts index 346ca198..5cd7452f 100644 --- a/packages/api/client/src/hooks/student/usePostUploadProfile.ts +++ b/packages/api/client/src/hooks/student/usePostUploadProfile.ts @@ -1,16 +1,9 @@ import { useMutation } from '@tanstack/react-query'; -import { post, uploadQueryKey, uploadUrl } from 'api/common'; +import { post, studentQueryKeys, studentUrl } from 'api/common'; -import { UploadProfileType } from 'types'; - -import type { UseMutationOptions } from '@tanstack/react-query'; - -export const usePostUploadProfile = ( - options?: UseMutationOptions -) => - useMutation( - uploadQueryKey.postUploadProfile(), - (uploadProfile) => post(uploadUrl.uploadProfile(), uploadProfile), - options +export const usePostUploadProfile = () => + useMutation( + studentQueryKeys.postUploadProfile(), + (uploadProfile) => post(studentUrl.uploadProfile(), uploadProfile) ); From d29911c0bae716e851db802117515049a45ac530 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Mon, 2 Oct 2023 12:17:01 +0900 Subject: [PATCH 19/22] Update request type --- packages/types/src/uploadProfile.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/types/src/uploadProfile.ts b/packages/types/src/uploadProfile.ts index aa573875..16356fa4 100644 --- a/packages/types/src/uploadProfile.ts +++ b/packages/types/src/uploadProfile.ts @@ -1,4 +1,3 @@ export interface UploadProfileType { - image: 'Multipart'; - fileName: string; + image: FormData; } From 2362e8c20c85c4fab9ae90686f9d2e25a329b732 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Mon, 2 Oct 2023 12:17:10 +0900 Subject: [PATCH 20/22] Update mutate --- projects/client/src/components/RankingHeader/index.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/projects/client/src/components/RankingHeader/index.tsx b/projects/client/src/components/RankingHeader/index.tsx index c3fa8d3e..40976d37 100644 --- a/projects/client/src/components/RankingHeader/index.tsx +++ b/projects/client/src/components/RankingHeader/index.tsx @@ -39,15 +39,7 @@ const RankingHeader: React.FC = ({ const formData = new FormData(); formData.append('image', image); - try { - mutate((data) => { - console.log('asdasdasd'); - return { ...data, image: formData }; - }); - } catch (error) { - alert('실패'); - console.error('Error uploading image:', error); - } + mutate({ image: formData }); }; return ( From d6a4d94ec6928c7c52c879855c760bc11564e996 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Mon, 2 Oct 2023 12:36:06 +0900 Subject: [PATCH 21/22] Update formData --- .../src/hooks/student/usePostUploadProfile.ts | 9 +++++--- packages/api/common/src/libs/urlController.ts | 2 +- .../src/components/RankingHeader/index.tsx | 21 ++++--------------- 3 files changed, 11 insertions(+), 21 deletions(-) diff --git a/packages/api/client/src/hooks/student/usePostUploadProfile.ts b/packages/api/client/src/hooks/student/usePostUploadProfile.ts index 5cd7452f..1a6c3df9 100644 --- a/packages/api/client/src/hooks/student/usePostUploadProfile.ts +++ b/packages/api/client/src/hooks/student/usePostUploadProfile.ts @@ -3,7 +3,10 @@ import { useMutation } from '@tanstack/react-query'; import { post, studentQueryKeys, studentUrl } from 'api/common'; export const usePostUploadProfile = () => - useMutation( - studentQueryKeys.postUploadProfile(), - (uploadProfile) => post(studentUrl.uploadProfile(), uploadProfile) + useMutation(studentQueryKeys.postUploadProfile(), (uploadProfile: FormData) => + post(studentUrl.uploadProfile(), uploadProfile, { + headers: { + 'Content-Type': 'multipart/form-data', + }, + }) ); diff --git a/packages/api/common/src/libs/urlController.ts b/packages/api/common/src/libs/urlController.ts index 78a83be8..0c16a0de 100644 --- a/packages/api/common/src/libs/urlController.ts +++ b/packages/api/common/src/libs/urlController.ts @@ -6,7 +6,7 @@ export const missionUrl = { export const studentUrl = { rankingList: () => `/student/ranking`, studentInfo: () => `/student/my`, - uploadProfile: () => `/image`, + uploadProfile: () => `/student/image`, }; export const authUrl = { diff --git a/projects/client/src/components/RankingHeader/index.tsx b/projects/client/src/components/RankingHeader/index.tsx index 40976d37..46f2cf98 100644 --- a/projects/client/src/components/RankingHeader/index.tsx +++ b/projects/client/src/components/RankingHeader/index.tsx @@ -22,26 +22,13 @@ const RankingHeader: React.FC = ({ const fileInputRef = useRef(null); const handleImageChange = async (e: React.ChangeEvent) => { - const file = e.target.files && e.target.files[0]; - if (file) { - try { - uploadImageToServer(file); - alert('이미지 업로드가 완료되었습니다.'); - } catch (error) { - console.error('Error uploading image:', error); - alert('이미지 업로드에 실패했습니다.'); - } + if (e.target.files) { + const formData = new FormData(); + formData.append('file', e.target.files[0], e.target.files[0].name); + mutate(formData); } }; - const uploadImageToServer = async (image: File) => { - console.log(image); - const formData = new FormData(); - formData.append('image', image); - - mutate({ image: formData }); - }; - return ( fileInputRef.current?.click()}> From 3b7bb10f4ed07e56be477b48021749362c6dc536 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Mon, 2 Oct 2023 17:22:11 +0900 Subject: [PATCH 22/22] Update mutate --- .../src/hooks/student/usePostUploadProfile.ts | 14 +++++++------ projects/client/next.config.js | 3 +++ .../src/components/RankingHeader/index.tsx | 21 +++++++++++++++++-- 3 files changed, 30 insertions(+), 8 deletions(-) diff --git a/packages/api/client/src/hooks/student/usePostUploadProfile.ts b/packages/api/client/src/hooks/student/usePostUploadProfile.ts index 1a6c3df9..9d8c2ecb 100644 --- a/packages/api/client/src/hooks/student/usePostUploadProfile.ts +++ b/packages/api/client/src/hooks/student/usePostUploadProfile.ts @@ -3,10 +3,12 @@ import { useMutation } from '@tanstack/react-query'; import { post, studentQueryKeys, studentUrl } from 'api/common'; export const usePostUploadProfile = () => - useMutation(studentQueryKeys.postUploadProfile(), (uploadProfile: FormData) => - post(studentUrl.uploadProfile(), uploadProfile, { - headers: { - 'Content-Type': 'multipart/form-data', - }, - }) + useMutation<{ imageName: string }, Error, { image: FormData }>( + studentQueryKeys.postUploadProfile(), + (uploadProfile) => + post(studentUrl.uploadProfile(), uploadProfile, { + headers: { + 'Content-Type': 'multipart/form-data', + }, + }) ); diff --git a/projects/client/next.config.js b/projects/client/next.config.js index 0599f4d9..bbd7bab5 100644 --- a/projects/client/next.config.js +++ b/projects/client/next.config.js @@ -10,6 +10,9 @@ const nextConfig = { destination: `${process.env.NEXT_PUBLIC_API_URL}/:path*`, }, ], + images: { + domains: ['https://stack-knowledge.s3.ap-northeast-2.amazonaws.com'], + }, }; module.exports = nextConfig; diff --git a/projects/client/src/components/RankingHeader/index.tsx b/projects/client/src/components/RankingHeader/index.tsx index 46f2cf98..64cf1417 100644 --- a/projects/client/src/components/RankingHeader/index.tsx +++ b/projects/client/src/components/RankingHeader/index.tsx @@ -18,17 +18,34 @@ const RankingHeader: React.FC = ({ user: { name, profileImage }, }, }) => { - const { mutate } = usePostUploadProfile(); + const { mutate, isSuccess } = usePostUploadProfile(); const fileInputRef = useRef(null); const handleImageChange = async (e: React.ChangeEvent) => { if (e.target.files) { const formData = new FormData(); formData.append('file', e.target.files[0], e.target.files[0].name); - mutate(formData); + mutate({ image: formData }); + // for (let value of formData.values()) { + // console.log(value); + // } + // await fetch('/api/student/image', { + // method: 'POST', + // headers: { + // 'Content-Type': 'multipart/form-data', + // }, + // body: { + // image: formData, + // }, + // }) + // .then((res) => res.json()) + // .then((data) => console.log(data)); } }; + if (isSuccess) { + } + return ( fileInputRef.current?.click()}>