From 3eb269a1bbcf453c0e838131cba8bb7135bde446 Mon Sep 17 00:00:00 2001 From: sh981013s Date: Tue, 8 Aug 2023 17:14:32 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EA=B3=A8=EB=A3=B8=20=EC=9D=B8?= =?UTF-8?q?=EC=A6=9D=20=ED=94=BC=EB=93=9C=20=EB=8F=84=EC=B6=9C=20hook=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/apis/goalRoom.ts | 9 +++++++++ client/src/constants/@queryKeys/queryKeys.ts | 3 +++ client/src/hooks/queries/goalRoom.ts | 13 +++++++++++++ client/src/myTypes/goalRoom/remote.ts | 20 ++++++++++++++++++++ 4 files changed, 45 insertions(+) diff --git a/client/src/apis/goalRoom.ts b/client/src/apis/goalRoom.ts index f2ca0d951..96e4581c9 100644 --- a/client/src/apis/goalRoom.ts +++ b/client/src/apis/goalRoom.ts @@ -7,6 +7,7 @@ import { newTodoPayload, GoalRoomInfoResponse, GoalRoomTodoChangeStatusRequest, + GoalRoomCertificationFeedsResponse, } from '@/myTypes/goalRoom/remote'; import client from '@apis/axios/client'; import { GoalRoomRecruitmentStatus, MyPageGoalRoom } from '@myTypes/goalRoom/internal'; @@ -84,3 +85,11 @@ export const postCreateNewCertificationFeed = ( export const postJoinGoalRoom = (goalRoomId: string) => { return client.post(`/goal-rooms/${goalRoomId}/join`); }; + +export const getCertificationFeeds = async (goalRoomId: string) => { + const { data } = await client.get( + `/goal-rooms/${goalRoomId}/checkFeeds` + ); + + return data; +}; diff --git a/client/src/constants/@queryKeys/queryKeys.ts b/client/src/constants/@queryKeys/queryKeys.ts index 222d15230..1cb2985bb 100644 --- a/client/src/constants/@queryKeys/queryKeys.ts +++ b/client/src/constants/@queryKeys/queryKeys.ts @@ -6,6 +6,9 @@ const QUERY_KEYS = { list: 'roadmapList', detail: 'roadmapDetail', }, + goalRoom: { + certificationFeeds: 'certificationFeeds', + }, } as const; export default QUERY_KEYS; diff --git a/client/src/hooks/queries/goalRoom.ts b/client/src/hooks/queries/goalRoom.ts index a7d3085a8..3ff501bab 100644 --- a/client/src/hooks/queries/goalRoom.ts +++ b/client/src/hooks/queries/goalRoom.ts @@ -16,12 +16,14 @@ import { postToChangeTodoCheckStatus, postJoinGoalRoom, getMyGoalRoomList, + getCertificationFeeds, } from '@apis/goalRoom'; import { useSuspendedQuery } from '@hooks/queries/useSuspendedQuery'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import useToast from '@hooks/_common/useToast'; import { GoalRoomRecruitmentStatus } from '@myTypes/goalRoom/internal'; import { useNavigate } from 'react-router-dom'; +import QUERY_KEYS from '@constants/@queryKeys/queryKeys'; export const useGoalRoomList = (params: GoalRoomListRequest) => { const { data } = useSuspendedQuery(['goalRoomList', params.roadmapId], () => @@ -160,3 +162,14 @@ export const useJoinGoalRoom = ({ goalRoomId, roadmapId }: JoinGoalRoomRequest) joinGoalRoom: mutate, }; }; + +export const useCertificationFeeds = (goalRoomId: string) => { + const { data } = useSuspendedQuery( + [QUERY_KEYS.goalRoom.certificationFeeds, goalRoomId], + () => getCertificationFeeds(goalRoomId) + ); + + return { + certificationFeeds: data, + }; +}; diff --git a/client/src/myTypes/goalRoom/remote.ts b/client/src/myTypes/goalRoom/remote.ts index 013db1e89..422f24b4f 100644 --- a/client/src/myTypes/goalRoom/remote.ts +++ b/client/src/myTypes/goalRoom/remote.ts @@ -66,3 +66,23 @@ export type JoinGoalRoomRequest = { goalRoomId: string; roadmapId: string; }; + +export type UserType = { + id: number; + nickname: string; + imageUrl: string; +}; + +export type CheckFeedType = { + id: number; + imageUrl: string; + description: string; + createdAt: string; +}; + +export type CertificationFeedType = { + member: UserType; + checkFeed: CheckFeedType; +}; + +export type GoalRoomCertificationFeedsResponse = Array; From be069fc373108643187c343255478e2b20452943 Mon Sep 17 00:00:00 2001 From: sh981013s Date: Tue, 8 Aug 2023 17:15:00 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EA=B3=A8=EB=A3=B8=20=EC=9D=B8?= =?UTF-8?q?=EC=A6=9D=ED=94=BC=EB=93=9C=20=EB=AA=A8=EB=8B=AC=EC=97=90=20?= =?UTF-8?q?=EC=9D=B8=EC=A6=9D=ED=94=BC=EB=93=9C=20=EC=B9=B4=EB=93=9C=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=8F=84=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CertificationFeedModal.tsx | 103 ++++++++++++------ .../CertificationModal.styles.ts | 76 +++++++++++-- 2 files changed, 135 insertions(+), 44 deletions(-) diff --git a/client/src/components/goalRoomDahsboardPage/goalRoomCertificationFeed/certificationFeedModal/CertificationFeedModal.tsx b/client/src/components/goalRoomDahsboardPage/goalRoomCertificationFeed/certificationFeedModal/CertificationFeedModal.tsx index d95401561..6c3b6cc1f 100644 --- a/client/src/components/goalRoomDahsboardPage/goalRoomCertificationFeed/certificationFeedModal/CertificationFeedModal.tsx +++ b/client/src/components/goalRoomDahsboardPage/goalRoomCertificationFeed/certificationFeedModal/CertificationFeedModal.tsx @@ -4,14 +4,19 @@ import InputField from '@components/roadmapCreatePage/input/inputField/InputFiel import { useValidateInput } from '@hooks/_common/useValidateInput'; import { CERTIFICATION_FEED } from '@constants/goalRoom/regex'; import TextCount from '@components/roadmapCreatePage/input/textCount/TextCount'; -import { useCreateCertificationFeed } from '@hooks/queries/goalRoom'; +import { + useCertificationFeeds, + useCreateCertificationFeed, +} from '@hooks/queries/goalRoom'; import { useGoalRoomDashboardContext } from '@/context/goalRoomDashboardContext'; +import { BASE_URL } from '@apis/axios/client'; const CertificationFeedModal = () => { const { goalroomId } = useGoalRoomDashboardContext(); + const { certificationFeeds } = useCertificationFeeds(goalroomId); const [imagePreview, setImagePreview] = useState(''); - const [imageFile, setImageFile] = useState(null); // add this state for file + const [imageFile, setImageFile] = useState(null); const { handleInputChange, validateInput, errorMessage, resetErrorMessage, value } = useValidateInput(CERTIFICATION_FEED); @@ -52,42 +57,68 @@ const CertificationFeedModal = () => { 인증피드 새로운 인증피드 등록 - {imagePreview && ( - - - X - - )} -
- {!imagePreview && ( - - 인증피드 사진 업로드 - + + {imagePreview && ( + + + X + + )} + {!imagePreview && ( + + 인증피드 사진 업로드 + + + )} + + - - )} - - - - - {errorMessage} - - 인증피드 등록 - - + + + {errorMessage} + + 인증피드 등록 + + + + {certificationFeeds.map((feed) => { + return ( + + + + {feed.checkFeed.description} + + + + + {feed.member.nickname} + + + {feed.checkFeed.createdAt} + + ); + })} +
); }; diff --git a/client/src/components/goalRoomDahsboardPage/goalRoomCertificationFeed/certificationFeedModal/CertificationModal.styles.ts b/client/src/components/goalRoomDahsboardPage/goalRoomCertificationFeed/certificationFeedModal/CertificationModal.styles.ts index a856d6dbe..76097deec 100644 --- a/client/src/components/goalRoomDahsboardPage/goalRoomCertificationFeed/certificationFeedModal/CertificationModal.styles.ts +++ b/client/src/components/goalRoomDahsboardPage/goalRoomCertificationFeed/certificationFeedModal/CertificationModal.styles.ts @@ -12,8 +12,8 @@ export const CertificationHeader = styled(ModalHeader)``; export const CertificationText = styled(NewTodoText)``; export const PreviewImage = styled.img` - width: 20rem; - height: 25rem; + width: 19rem; + height: 20rem; object-fit: cover; border-radius: 10px; @@ -29,8 +29,8 @@ export const FileUploadCard = styled.label` align-items: center; justify-content: center; - width: 20rem; - height: 25rem; + width: 19rem; + height: 20rem; border: dashed 0.2rem ${({ theme }) => theme.colors.gray200}; border-radius: 10px; @@ -43,8 +43,8 @@ export const PlusButton = styled.span` export const PreviewWrapper = styled.div` position: relative; - width: 20rem; - height: 25rem; + width: 19rem; + height: 20rem; margin-top: 2rem; `; @@ -76,7 +76,7 @@ export const ErrorMessage = styled.div` `; export const InputFieldWrapper = styled.div` - width: 20rem; + width: 19rem; margin-top: 1rem; padding: 1rem; @@ -85,8 +85,68 @@ export const InputFieldWrapper = styled.div` `; export const CertificationSubmitButton = styled.button` - width: 20rem; + width: 19rem; padding: 1rem; background: ${({ theme }) => theme.colors.main_middle}; border-radius: 10px; `; + +export const CertificationFeedsWrapper = styled.div` + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + justify-content: flex-start; +`; + +export const CertificationFeedCard = styled.div` + overflow: hidden; + flex: 0 0 calc(33.33% - 1.5rem); + + width: 20rem; + height: 35rem; + + border-radius: 10px; + box-shadow: ${({ theme }) => theme.shadows.threeD}; + + transition: transform 0.2s; + + &:hover { + transform: translateY(-5px); + } +`; + +export const CertificationFeedImage = styled.img` + width: 100%; + height: 20rem; + object-fit: cover; +`; + +export const CertificationFeedDescription = styled.p` + padding: 0.5rem 1rem; + font-size: 0.9rem; + color: ${({ theme }) => theme.colors.gray600}; +`; + +export const CertificationFeedsUserInfo = styled.div` + display: flex; + align-items: center; + padding: 0.5rem 1rem; +`; + +export const CertificationFeedsUserImage = styled.img` + width: 4rem; + height: 4rem; + margin-right: 0.5rem; + border-radius: 50%; +`; + +export const CertificationFeedsUserName = styled.span` + ${({ theme }) => theme.fonts.h2} + color: ${({ theme }) => theme.colors.black}; +`; + +export const CreatedAtText = styled.span` + font-size: 0.8rem; + color: ${({ theme }) => theme.colors.gray300}; + text-align: center; +`; From 3eb31378947b813acd9fe52fa3a2df665146de27 Mon Sep 17 00:00:00 2001 From: sh981013s Date: Wed, 9 Aug 2023 15:16:07 +0900 Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20GoalRoomCertificationFeedsRespo?= =?UTF-8?q?nse=20type=20=ED=83=80=EC=9E=85=20=EC=84=A0=EC=96=B8=20?= =?UTF-8?q?=ED=98=95=EC=8B=9D=20=EC=BB=A8=EB=B2=A4=EC=85=98=EC=97=90=20?= =?UTF-8?q?=EB=A7=9E=EC=B6=94=EC=96=B4=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/myTypes/goalRoom/remote.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/myTypes/goalRoom/remote.ts b/client/src/myTypes/goalRoom/remote.ts index 422f24b4f..9f69307da 100644 --- a/client/src/myTypes/goalRoom/remote.ts +++ b/client/src/myTypes/goalRoom/remote.ts @@ -85,4 +85,4 @@ export type CertificationFeedType = { checkFeed: CheckFeedType; }; -export type GoalRoomCertificationFeedsResponse = Array; +export type GoalRoomCertificationFeedsResponse = CertificationFeedType[];