diff --git a/src/components/RetroList/ContentsList.tsx b/src/components/RetroList/ContentsList.tsx index e5fcd12..45be3c7 100644 --- a/src/components/RetroList/ContentsList.tsx +++ b/src/components/RetroList/ContentsList.tsx @@ -142,7 +142,11 @@ const ContentList: React.FC = ({ data, viewMode, searchData, s {isLoading ? ( ) : ( - + navigate(`/sections?retrospectiveId=${item.id}&teamId=${item.teamId}`)} + /> )}
diff --git a/src/components/projectRetro/GroupBoardList.tsx b/src/components/projectRetro/GroupBoardList.tsx index cbbb653..a57ddc6 100644 --- a/src/components/projectRetro/GroupBoardList.tsx +++ b/src/components/projectRetro/GroupBoardList.tsx @@ -105,7 +105,11 @@ const GroupBoardList: React.FC = ({ data }) => { {isLoading ? ( ) : ( - + navigate(`/sections?retrospectiveId=${item.id}&teamId=${item.teamId}`)} + /> )}
diff --git a/src/components/projectRetro/ManageModal.tsx b/src/components/projectRetro/ManageModal.tsx index 3649b6c..a196934 100644 --- a/src/components/projectRetro/ManageModal.tsx +++ b/src/components/projectRetro/ManageModal.tsx @@ -79,11 +79,11 @@ const ManageModal: React.FC = ({ 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 = ({ groupId, data, isClose }) => } }, [data]); + useEffect(() => { + if (checkedRetroId) { + const tempId = checkedRetroId.concat(requestData); // 이미 추가된 회고 id들 requestData에 넣기(api 수정됨에 따라) + setRequestData(tempId); + } + }, [checkedRetroId]); + return ( <> @@ -125,20 +132,23 @@ const ManageModal: React.FC = ({ groupId, data, isClose }) => retro.nodes.map(item => ( - {checkedRetroId.indexOf(item.id) < 0 ? ( // 이미 추가된 회고인지 판단 + {requestData.indexOf(item.id) < 0 ? ( // 이미 추가된 회고라면 checked ) : ( )} - {/* */} - {item.teamId ? : } + {item.teamId ? : } {item.title} {item.username} {user?.userId === item.userId && 본인} - {convertToLocalTime(item.updatedDate)} + + {convertToLocalTime(item.createdDate) === convertToLocalTime(item.updatedDate) + ? convertToLocalTime(item.createdDate) + : `${convertToLocalTime(item.updatedDate)} (수정)`} + {item.isBookmarked ? : } diff --git a/src/pages/GroupBoardPage.tsx b/src/pages/GroupBoardPage.tsx index 805e6b7..0594b4a 100644 --- a/src/pages/GroupBoardPage.tsx +++ b/src/pages/GroupBoardPage.tsx @@ -52,6 +52,7 @@ const GroupBoard = () => { {groupData?.title} + {groupData?.description} setIsOpen(true)}>회고 관리하기 diff --git a/src/pages/ProjectRetroPage.tsx b/src/pages/ProjectRetroPage.tsx index 7b290bb..01961d3 100644 --- a/src/pages/ProjectRetroPage.tsx +++ b/src/pages/ProjectRetroPage.tsx @@ -60,7 +60,9 @@ const ProjectRetro = () => { /> 사용법 - + + + {isDescriptionOpen ? setIsDescriptionOpen(false)} /> : null} diff --git a/src/styles/RetroList/ContentsList.styles.ts b/src/styles/RetroList/ContentsList.styles.ts index b7f3484..3356acb 100644 --- a/src/styles/RetroList/ContentsList.styles.ts +++ b/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` diff --git a/src/styles/projectRetro/DeleteModal.styles.ts b/src/styles/projectRetro/DeleteModal.styles.ts index 485f2fb..323dc77 100644 --- a/src/styles/projectRetro/DeleteModal.styles.ts +++ b/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` diff --git a/src/styles/projectRetro/DescriptionModal.styles.ts b/src/styles/projectRetro/DescriptionModal.styles.ts index 3ba9972..ea8884c 100644 --- a/src/styles/projectRetro/DescriptionModal.styles.ts +++ b/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; + } `; diff --git a/src/styles/projectRetro/GroupBoard.styles.ts b/src/styles/projectRetro/GroupBoard.styles.ts index f4194d5..7a21320 100644 --- a/src/styles/projectRetro/GroupBoard.styles.ts +++ b/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; + } `; diff --git a/src/styles/projectRetro/GroupBoardList.styles.ts b/src/styles/projectRetro/GroupBoardList.styles.ts index 9c35024..57f84c0 100644 --- a/src/styles/projectRetro/GroupBoardList.styles.ts +++ b/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` diff --git a/src/styles/projectRetro/GroupList.styles.ts b/src/styles/projectRetro/GroupList.styles.ts index 75dbddd..5474807 100644 --- a/src/styles/projectRetro/GroupList.styles.ts +++ b/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` diff --git a/src/styles/projectRetro/ManageModal.styles.ts b/src/styles/projectRetro/ManageModal.styles.ts index d8b6f39..b34ddef 100644 --- a/src/styles/projectRetro/ManageModal.styles.ts +++ b/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` diff --git a/src/styles/projectRetro/Modal.styles.ts b/src/styles/projectRetro/Modal.styles.ts index 59aae48..b405887 100644 --- a/src/styles/projectRetro/Modal.styles.ts +++ b/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` diff --git a/src/styles/projectRetro/ProjectRetroPage.styles.ts b/src/styles/projectRetro/ProjectRetroPage.styles.ts index 497e677..d6f12b0 100644 --- a/src/styles/projectRetro/ProjectRetroPage.styles.ts +++ b/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; + } +`;