[feat/CK-149] 골룸 인증피드 내부 전체 인증피드 도출 로직을 구현한다

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<GoalRoomCertificationFeedsResponse>(
+    `/goal-rooms/${goalRoomId}/checkFeeds`
+  );
+
+  return data;
+};

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<string | null>('');
-  const [imageFile, setImageFile] = useState<File | null>(null); // add this state for file
+  const [imageFile, setImageFile] = useState<File | null>(null);
   const { handleInputChange, validateInput, errorMessage, resetErrorMessage, value } =
     useValidateInput(CERTIFICATION_FEED);
 
@@ -52,42 +57,68 @@ const CertificationFeedModal = () => {
     <S.CertificationModalWrapper>
       <S.CertificationHeader>인증피드</S.CertificationHeader>
       <S.CertificationText>새로운 인증피드 등록</S.CertificationText>
-      {imagePreview && (
-        <S.PreviewWrapper>
-          <S.PreviewImage src={imagePreview} alt='업로드한 인증 피드 이미지' />
-          <S.PreviewDeleteButton onClick={handleRemoveImage}>X</S.PreviewDeleteButton>
-        </S.PreviewWrapper>
-      )}
 
-      <form action='' onSubmit={handleFormSubmit}>
-        {!imagePreview && (
-          <S.FileUploadCard htmlFor='fileInput'>
-            <S.PlusButton>인증피드 사진 업로드</S.PlusButton>
-            <input
-              id='fileInput'
-              type='file'
-              onChange={handleImageChange}
-              style={{ display: 'none' }}
+      <S.CertificationFeedsWrapper>
+        <form onSubmit={handleFormSubmit}>
+          {imagePreview && (
+            <S.PreviewWrapper>
+              <S.PreviewImage src={imagePreview} alt='업로드한 인증 피드 이미지' />
+              <S.PreviewDeleteButton onClick={handleRemoveImage}>X</S.PreviewDeleteButton>
+            </S.PreviewWrapper>
+          )}
+          {!imagePreview && (
+            <S.FileUploadCard htmlFor='fileInput'>
+              <S.PlusButton>인증피드 사진 업로드</S.PlusButton>
+              <input
+                id='fileInput'
+                type='file'
+                onChange={handleImageChange}
+                style={{ display: 'none' }}
+              />
+            </S.FileUploadCard>
+          )}
+          <S.InputFieldWrapper>
+            <InputField
+              placeholder='컨텐츠를 소개하는 문장을 작성해주세요'
+              handleInputChange={handleInputChange}
+              maxLength={250}
+              validateInput={validateInput}
+              resetErrorMessage={resetErrorMessage}
+              name='introduction'
+              data-valid={validateInput}
             />
-          </S.FileUploadCard>
-        )}
-        <S.InputFieldWrapper>
-          <InputField
-            placeholder='컨텐츠를 소개하는 문장을 작성해주세요'
-            handleInputChange={handleInputChange}
-            maxLength={250}
-            validateInput={validateInput}
-            resetErrorMessage={resetErrorMessage}
-            name='introduction'
-            data-valid={validateInput}
-          />
-        </S.InputFieldWrapper>
-        <TextCount maxCount={250} currentCount={value.length} />
-        <S.ErrorMessage>{errorMessage}</S.ErrorMessage>
-        <S.CertificationSubmitButton type='submit'>
-          인증피드 등록
-        </S.CertificationSubmitButton>
-      </form>
+          </S.InputFieldWrapper>
+          <TextCount maxCount={250} currentCount={value.length} />
+          <S.ErrorMessage>{errorMessage}</S.ErrorMessage>
+          <S.CertificationSubmitButton type='submit'>
+            인증피드 등록
+          </S.CertificationSubmitButton>
+        </form>
+
+        {certificationFeeds.map((feed) => {
+          return (
+            <S.CertificationFeedCard key={feed.checkFeed.id}>
+              <S.CertificationFeedImage
+                src={BASE_URL + feed.checkFeed.imageUrl}
+                alt='인증피드 이미지'
+              />
+              <S.CertificationFeedDescription>
+                {feed.checkFeed.description}
+              </S.CertificationFeedDescription>
+              <S.CertificationFeedsUserInfo>
+                <S.CertificationFeedsUserImage
+                  src={BASE_URL + feed.member.imageUrl}
+                  alt='유저 이미지'
+                />
+                <S.CertificationFeedsUserName>
+                  {feed.member.nickname}
+                </S.CertificationFeedsUserName>
+              </S.CertificationFeedsUserInfo>
+              <S.CreatedAtText>{feed.checkFeed.createdAt}</S.CreatedAtText>
+            </S.CertificationFeedCard>
+          );
+        })}
+      </S.CertificationFeedsWrapper>
     </S.CertificationModalWrapper>
   );
 };

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;
+`;

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;

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,
+  };
+};

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<CertificationFeedType>;