[FE][Release] 240729 배포 전 중간 빌드

src/components/RetroList/ContentsList.tsx

@@ -144,7 +144,11 @@ const ContentList: React.FC<ContentListProps> = ({ data, viewMode, searchData, s
                 {isLoading ? (
                   <Spinner size="md" />
                 ) : (
-                  <S.Thumbnail src={item.thumbnail ? image[item.id] : Thumbnail} onLoad={handleImageLoad} />
+                  <S.Thumbnail
+                    src={item.thumbnail ? image[item.id] : Thumbnail}
+                    onLoad={handleImageLoad}
+                    onClick={() => navigate(`/sections?retrospectiveId=${item.id}&teamId=${item.teamId}`)}
+                  />
                 )}
               </S.ImgBox>
               <hr />

src/components/projectRetro/GroupBoardList.tsx

@@ -107,7 +107,11 @@ const GroupBoardList: React.FC<GroupBoardListProps> = ({ data }) => {
                 {isLoading ? (
                   <Spinner size="md" />
                 ) : (
-                  <T.Thumbnail src={item.thumbnail ? image[item.id] : Thumbnail} onLoad={handleImageLoad} />
+                  <T.Thumbnail
+                    src={item.thumbnail ? image[item.id] : Thumbnail}
+                    onLoad={handleImageLoad}
+                    onClick={() => navigate(`/sections?retrospectiveId=${item.id}&teamId=${item.teamId}`)}
+                  />
                 )}
               </T.ImgBox>
               <hr />

src/components/projectRetro/ManageModal.tsx

@@ -79,11 +79,11 @@ const ManageModal: React.FC<ManageModalProps> = ({ groupId, data, isClose }) =>
     } else {
       try {
         await putBoard({ retrospectiveGroupId: groupId, retrospectiveIds: requestData });
-        toast.info('그룹 회고가 정상적으로 추가되었습니다.');
+        toast.info('그룹 회고가 정상적으로 추가/제거되었습니다.');
         isClose();
         window.location.reload();
       } catch (e) {
-        toast.error('그룹 회고 추가에 실패했습니다.');
+        toast.error('그룹 회고 추가/제거에 실패했습니다.');
       }
     }
   };
@@ -103,6 +103,13 @@ const ManageModal: React.FC<ManageModalProps> = ({ groupId, data, isClose }) =>
     }
   }, [data]);
 
+  useEffect(() => {
+    if (checkedRetroId) {
+      const tempId = checkedRetroId.concat(requestData); // 이미 추가된 회고 id들 requestData에 넣기(api 수정됨에 따라)
+      setRequestData(tempId);
+    }
+  }, [checkedRetroId]);
+
   return (
     <>
       <T.Background>
@@ -125,20 +132,23 @@ const ManageModal: React.FC<ManageModalProps> = ({ groupId, data, isClose }) =>
                 retro.nodes.map(item => (
                   <S.ListItem key={item.id}>
                     <S.RetroBox>
-                      {checkedRetroId.indexOf(item.id) < 0 ? ( // 이미 추가된 회고인지 판단
+                      {requestData.indexOf(item.id) < 0 ? ( // 이미 추가된 회고라면 checked
                         <S.CheckBox type="checkbox" onChange={handleInputCheck(item.id)}></S.CheckBox>
                       ) : (
                         <S.CheckBox type="checkbox" onChange={handleInputCheck(item.id)} checked></S.CheckBox>
                       )}
-                      {/* <S.CheckBox type="checkbox" onChange={handleInputCheck(item.id)}></S.CheckBox> */}
                     </S.RetroBox>
-                    <S.RetroBox>{item.teamId ? <IoMdPerson size={20} /> : <MdPeople size={20} />}</S.RetroBox>
+                    <S.RetroBox>{item.teamId ? <MdPeople size={20} /> : <IoMdPerson size={20} />}</S.RetroBox>
                     <S.RetroTitle>{item.title}</S.RetroTitle>
                     <S.RetroUserBox>
                       <S.RetroUser>{item.username}</S.RetroUser>
                       {user?.userId === item.userId && <S.RetroLeader>본인</S.RetroLeader>}
                     </S.RetroUserBox>
-                    <S.RetroBox>{convertToLocalTime(item.updatedDate)}</S.RetroBox>
+                    <S.RetroBox>
+                      {convertToLocalTime(item.createdDate) === convertToLocalTime(item.updatedDate)
+                        ? convertToLocalTime(item.createdDate)
+                        : `${convertToLocalTime(item.updatedDate)} (수정)`}
+                    </S.RetroBox>
                     <S.RetroBox>
                       {item.isBookmarked ? <FaStar size={20} style={{ color: '#fcea12' }} /> : <CiStar size={20} />}
                     </S.RetroBox>

src/pages/GroupBoardPage.tsx

@@ -52,6 +52,7 @@ const GroupBoard = () => {
             <RiFolder6Fill size={40} style={{ color: '#FFE500', marginRight: '10px' }} />
             {groupData?.title}
           </S.TitleText>
+          <S.DescriptionText> {groupData?.description}</S.DescriptionText>
         </S.TitleContainter>
         <S.Wrapper>
           <S.Button onClick={() => setIsOpen(true)}>회고 관리하기</S.Button>

src/pages/ProjectRetroPage.tsx

@@ -60,7 +60,9 @@ const ProjectRetro = () => {
         />
         <S.DescriptionText>사용법</S.DescriptionText>
       </S.DescriptionBox>
-      <StatusFilter onSelectedFilter={handleStatusFilter} />
+      <S.FilterContainer>
+        <StatusFilter onSelectedFilter={handleStatusFilter} />
+      </S.FilterContainer>
       <GroupList groups={data} />
       {isDescriptionOpen ? <DescriptionModal isClose={() => setIsDescriptionOpen(false)} /> : null}
     </>

src/styles/RetroList/ContentsList.styles.ts

@@ -89,6 +89,7 @@ export const Thumbnail = styled.img`
   height: 100%;
   object-fit: cover;
   aspect-ratio: 1/1;
+  cursor: pointer;
 `;
 
 export const TeamIcon = styled.img`

src/styles/projectRetro/DeleteModal.styles.ts

@@ -24,6 +24,10 @@ export const Modal = styled.div`
   border-radius: 5px;
   width: 600px;
   height: auto;
+
+  @media screen and (max-width: 768px) {
+    width: 350px;
+  }
 `;
 
 export const Top = styled.div`

src/styles/projectRetro/DescriptionModal.styles.ts

@@ -25,6 +25,11 @@ export const Modal = styled.div`
   border-radius: 5px;
   width: 800px;
   height: 300px;
+  @media screen and (max-width: 768px) {
+    width: 300px;
+    height: 450px;
+    padding: 10px 20px 10px 20px;
+  }
 `;
 
 export const Title = styled.div`
@@ -37,4 +42,8 @@ export const Title = styled.div`
   width: 250px;
   padding-top: 5px;
   padding-bottom: 5px;
+  @media screen and (max-width: 768px) {
+    width: 200px;
+    height: 35px;
+  }
 `;

src/styles/projectRetro/GroupBoard.styles.ts

@@ -8,6 +8,7 @@ export const TitleContainter = styled.div`
   border-bottom: 1px solid rgba(17, 27, 71, 0.3);
   display: flex;
   margin-top: 15px;
+  align-items: center;
 `;
 
 export const TitleText = styled.span`
@@ -17,7 +18,14 @@ export const TitleText = styled.span`
   border-bottom: 3px solid #111b47;
   display: flex;
   align-items: center;
-  padding: 0px 10px;
+  padding: 0px 20px;
+`;
+
+export const DescriptionText = styled.span`
+  color: #a9a9a9;
+  font-size: large;
+  font-weight: bold;
+  margin-left: 20px;
 `;
 
 export const Button = styled.button`
@@ -26,9 +34,16 @@ export const Button = styled.button`
   padding: 5px 50px;
   border-radius: 3px;
   margin: 20px 0px 20px auto;
+  @media screen and (max-width: 768px) {
+    margin: 20px auto;
+  }
 `;
 
 export const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
+  @media screen and (max-width: 768px) {
+    justify-content: center;
+    align-items: center;
+  }
 `;

src/styles/projectRetro/GroupBoardList.styles.ts

@@ -7,6 +7,11 @@ export const Container = styled.div`
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
+  @media screen and (max-width: 768px) {
+    display: inline-block;
+    padding: 0;
+    width: auto;
+  }
 `;
 
 export const Box = styled.div`
@@ -16,6 +21,10 @@ export const Box = styled.div`
   margin-top: 30px;
   margin-left: 40px;
   margin-right: 40px;
+  @media screen and (max-width: 768px) {
+    width: 260px;
+    height: auto;
+  }
 `;
 
 export const InfoBox = styled.div`

src/styles/projectRetro/GroupList.styles.ts

@@ -7,6 +7,11 @@ export const Container = styled.div`
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
+  @media screen and (max-width: 768px) {
+    display: inline-block;
+    padding: 0;
+    width: auto;
+  }
 `;
 
 export const CreateBox = styled.div`
@@ -18,6 +23,10 @@ export const CreateBox = styled.div`
   width: 250px;
   height: 200px;
   margin: 50px;
+  @media screen and (max-width: 768px) {
+    width: 250px;
+    height: 190px;
+  }
 `;
 
 export const Box = styled.div`
@@ -27,6 +36,10 @@ export const Box = styled.div`
   height: 200px;
   margin: 50px;
   padding: 10px;
+  @media screen and (max-width: 768px) {
+    width: 260px;
+    height: 200px;
+  }
 `;
 
 export const InfoBox = styled.div`

src/styles/projectRetro/ManageModal.styles.ts

@@ -9,6 +9,11 @@ export const Modal = styled.div`
   width: 1000px;
   height: 600px;
   padding: 15px 25px;
+  @media screen and (max-width: 768px) {
+    width: 300px;
+    height: 550px;
+    padding: 10px 20px 10px 20px;
+  }
 `;
 
 export const Title = styled.span`
@@ -21,6 +26,11 @@ export const Title = styled.span`
   align-items: center;
   padding: 5px 35px;
   width: 300px;
+  @media screen and (max-width: 768px) {
+    width: 220px;
+    height: 35px;
+    padding: 5px 20px;
+  }
 `;
 
 export const Box = styled.div`
@@ -30,13 +40,22 @@ export const Box = styled.div`
   overflow-y: scroll;
   width: 90%;
   height: 90%;
+  @media screen and (max-width: 768px) {
+    overflow-x: scroll;
+    overflow: auto;
+    white-space: nowrap;
+    padding: 5px 10px;
+  }
 `;
 
 export const ListItem = styled.div`
   margin: 25px;
   display: grid;
-  grid-template-columns: 0.5fr 1fr 1.5fr 1fr 1.8fr 1fr 1fr;
+  grid-template-columns: 0.5fr 1fr 1.5fr 1fr 2.3fr 1fr 1fr;
   align-items: center;
+  @media screen and (max-width: 768px) {
+    margin: 30px;
+  }
 `;
 
 export const CheckBox = styled.input`
@@ -52,12 +71,18 @@ export const RetroTitle = styled.span`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  @media screen and (max-width: 768px) {
+    margin-right: 5px;
+  }
 `;
 
 export const RetroUserBox = styled.div`
   padding-left: 5px;
   display: flex;
   align-items: center;
+  @media screen and (max-width: 768px) {
+    margin-right: 5px;
+  }
 `;
 export const RetroUser = styled.span`
   white-space: nowrap;
@@ -77,6 +102,9 @@ export const RetroLeader = styled.span`
 export const RetroBox = styled.div`
   align-self: center;
   padding-left: 5px;
+  @media screen and (max-width: 768px) {
+    margin-right: 5px;
+  }
 `;
 
 export const Button = styled.button`

src/styles/projectRetro/Modal.styles.ts

@@ -24,6 +24,11 @@ export const Modal = styled.div`
   width: 500px;
   height: auto;
   padding: 15px 25px;
+  @media screen and (max-width: 768px) {
+    width: 300px;
+    height: auto;
+    padding: 10px 20px 10px 20px;
+  }
 `;
 
 export const TitleBox = styled.div`

src/styles/projectRetro/ProjectRetroPage.styles.ts

@@ -28,3 +28,10 @@ export const DescriptionText = styled.span`
   color: #a9a9a9;
   font-size: small;
 `;
+
+export const FilterContainer = styled.div`
+  @media screen and (max-width: 768px) {
+    display: flex;
+    justify-content: center;
+  }
+`;