2차 세부사양 테스트 최종본 (#243)

* 토큰 요청 리팩토링 * 리팩토링 수정 완료 * 병합 전 커밋 * 마이페이지 구현 및 테스트 완료 * 마이페이지 구현 완료 및 리스트 오류 해결 중 * 멤버 목록 조회 * 가입된 멤버조회 구현
codestates-seb · May 19, 2023 · a3ec793 · a3ec793
1 parent 7d43120
commit a3ec793
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 145 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -15,6 +15,7 @@ import useRefreshToken from "./hooks/useRefreshToken";
 import Modal from "react-modal";
 import TestPage from "./test/TestPage";
 import Home from "./pages/Home";
+
 // import { worker } from "./mocks/browser";
 // // 개발 모드로 실행되었을 때, mocking 라이브러리가 실행되도록 명시하는 코드
 // if (process.env.NODE_ENV === "development") {

diff --git a/client/src/apis/StudyGroupApi.ts b/client/src/apis/StudyGroupApi.ts
@@ -5,15 +5,15 @@ import tokenRequestApi from "./TokenRequestApi";
 
 // ====================== 마이 스터디 리스트 조회 (GET) ===========================
 
-interface StudyGroup {
+export interface StudyGroupListDto {
   id: number;
   title: string;
   tagValues: string[];
 }
 
-export const getStudyGroupList = async (): Promise<StudyGroup[]> => {
+export const getStudyGroupList = async (): Promise<StudyGroupListDto[]> => {
   try {
-    const response = await tokenRequestApi.get<StudyGroup[]>(
+    const response = await tokenRequestApi.get<StudyGroupListDto[]>(
       "/studygroup/myList?approved=false"
     );
     const data = response.data;
@@ -238,17 +238,15 @@ export interface StudyGroupMemberListDto {
 }
 
 // TODO : StudyGroup에 가입된 멤버 리스트
-
 export async function getStudyGroupMemberList (id: number, isLoggedIn : boolean) {
   if (!isLoggedIn)
     throw new Error("Access token is not defined.");
-
   try {
     const response = await axios.get<StudyGroupMemberListDto>(
       `${import.meta.env.VITE_APP_API_URL}/studygroup/${id}/member?join=true`
     );
     console.log("성공적으로 멤버 목록을 불러왔습니다", response);
-    return response.data as StudyGroupMemberListDto;\
+    return response.data as StudyGroupMemberListDto;
   } catch (error) {
     console.error("멤버 목록을 불러오는데 실패했습니다", error);
   }

diff --git a/client/src/pages/ProfileStudyList.tsx b/client/src/pages/ProfileStudyList.tsx
@@ -1,163 +1,89 @@
-import { MouseEventHandler, useEffect, useState } from "react";
-import styled from "styled-components";
+import { useEffect, useState } from "react";
+// import styled from "styled-components";
 import WaitingList from "../components/WaitingList";
-import { Link } from "react-router-dom";
-import { getStudyGroupList, getStudyGroupInfo } from "../apis/StudyGroupApi";
-
-interface StudyGroupListDto {
-  id: number;
-  title: string;
-  tagValue: string[];
-}
-
-interface StudyInfoResponseDto {
-  studyId: number;
-  studyName: string;
-  tags: string[];
-  studyProfileImage: string;
-}
-
-const convertStudyGroupListToStudyInfoList = (studyGroupList: StudyGroupListDto[]): StudyInfoResponseDto[] => {
-  return studyGroupList.map((studyGroup) => {
-    return {
-      studyId: studyGroup.id,
-      studyName: studyGroup.title,
-      tags: studyGroup.tagValue,
-      studyProfileImage: "",
-    };
-  });
-};
-
-interface ProfileStudyListCardProps {
-  study: StudyInfoResponseDto;
-}
-
-const ProfileStudyListCard = ({
-  study,
-  onClick,
-}: ProfileStudyListCardProps & {
-  onClick?: MouseEventHandler<HTMLDivElement>;
-}) => {
-  return (
-    <Box onClick={onClick}>
-      <Link to={`/profile/${study.studyId}`}>
-        <ImageWrapper>
-          <img src={study.studyProfileImage} alt={study.studyName} />
-        </ImageWrapper>
-        <Title>{study.studyName}</Title>
-        <Tags>{study.tags.join(", ")}</Tags>
-      </Link>
-    </Box>
-  );
-};
+import { getStudyGroupList, StudyGroupListDto } from "../apis/StudyGroupApi";
 
 const ProfileStudyList = () => {
-  const [studyList, setStudyList] = useState<StudyInfoResponseDto[]>([]);
-  const [selectedStudyGroup, setSelectedStudyGroup] = useState<StudyInfoResponseDto | null | undefined>(null);
+  const [studyList, setStudyList] = useState<StudyGroupListDto[]>(
+    [] as StudyGroupListDto[]
+  );
 
   useEffect(() => {
     const fetchStudyList = async () => {
       try {
         const data = await getStudyGroupList();
-        const convertedData = convertStudyGroupListToStudyInfoList(data);
-        setStudyList(convertedData);
+        if (data === undefined) {
+          return <>텅..</>;
+        }
+        setStudyList(data);
+        console.log(studyList)
       } catch (error) {
         console.error("스터디 그룹 리스트를 불러오는데 실패했습니다.", error);
       }
     };
-
     fetchStudyList();
   }, []);
 
-  useEffect(() => {
-    const fetchStudyGroupInfo = async () => {
-      if (selectedStudyGroup !== undefined && selectedStudyGroup !== null) {
-        try {
-          const studyInfo = await getStudyGroupInfo(selectedStudyGroup.studyId);
-          console.log(studyInfo);
-          // 가져온 스터디 그룹 정보를 처리하거나 원하는 작업을 수행
-        } catch (error) {
-          console.error("스터디 그룹 정보를 불러오는데 실패했습니다.", error);
-        }
-      }
-    };
-
-    fetchStudyGroupInfo();
-  }, [selectedStudyGroup]);
-
-  const handleStudyGroupClick = (studyId: number) => {
-    const selectedStudy = studyList.find((study) => study.studyId === studyId);
-    setSelectedStudyGroup(selectedStudy);
-  };
-
   return (
     <>
       <WaitingList />
-      {studyList.map((study) => (
-        <ProfileStudyListCard
-          key={study.studyId}
-          study={study}
-          onClick={() => handleStudyGroupClick(study.studyId)}
-        />
-      ))}
     </>
   );
 };
 
 export default ProfileStudyList;
 
-const Box = styled.div`
-  box-sizing: border-box;
-  position: relative;
-  width: 340px;
-  height: 340px;
-  margin: 0 16px 16px 0;
-  padding: 16px;
-  background: #ffffff;
-  border: 1px solid #285aa3;
-  border-radius: 5px;
-`;
-
-const Title = styled.h3`
-  position: absolute;
-  left: 24px;
-  top: 28px;
-  width: 78px;
-  height: 22px;
-  font-family: Inter;
-  font-style: bold;
-  font-size: 18px;
-  line-height: 22px;
-  text-align: center;
-  color: #000000;
-`;
-
-const Tags = styled.p`
-  position: absolute;
-  right: 24px;
-  top: 28px;
-  width: 77px;
-  height: 19px;
-  font-family: Inter;
-  font-style: regular;
-  font-size: 16px;
-  line-height: 19px;
-  text-align: center;
-  color: #1f1f1f;
-`;
-
-const ImageWrapper = styled.div`
-  position: absolute;
-  top: 97px;
-  left: 0;
-  width: 100%;
-  height: 71.3%; // height 값을 조정하여 이미지가 넘치지 않도록 만듦
-  border-radius: 5px;
-  overflow: hidden;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-`;
+// const Box = styled.div`
+//   box-sizing: border-box;
+//   position: relative;
+//   width: 340px;
+//   height: 340px;
+//   margin: 0 16px 16px 0;
+//   padding: 16px;
+//   background: #ffffff;
+//   border: 1px solid #285aa3;
+//   border-radius: 5px;
+// `;
+
+// const Title = styled.h3`
+//   position: absolute;
+//   left: 24px;
+//   top: 28px;
+//   width: 78px;
+//   height: 22px;
+//   font-family: Inter;
+//   font-style: bold;
+//   font-size: 18px;
+//   line-height: 22px;
+//   text-align: center;
+//   color: #000000;
+// `;
+
+// const Tags = styled.p`
+//   position: absolute;
+//   right: 24px;
+//   top: 28px;
+//   width: 77px;
+//   height: 19px;
+//   font-family: Inter;
+//   font-style: regular;
+//   font-size: 16px;
+//   line-height: 19px;
+//   text-align: center;
+//   color: #1f1f1f;
+// `;
+
+// const ImageWrapper = styled.div`
+//   position: absolute;
+//   top: 97px;
+//   left: 0;
+//   width: 100%;
+//   height: 71.3%; // height 값을 조정하여 이미지가 넘치지 않도록 만듦
+//   border-radius: 5px;
+//   overflow: hidden;
+
+//   img {
+//     width: 100%;
+//     height: 100%;
+//     object-fit: cover;
+//   }