diff --git a/frontend/src/components/common/header/SideNavBar.style.ts b/frontend/src/components/common/header/SideNavBar.style.ts index d0bab79af..692a52902 100644 --- a/frontend/src/components/common/header/SideNavBar.style.ts +++ b/frontend/src/components/common/header/SideNavBar.style.ts @@ -43,6 +43,10 @@ export const SideNavBarContainer = styled.div<{ $isOpen: boolean; $isClosing: bo width: 60%; height: 100vh; + border-radius: 10px 0 0 10px; + + overflow: hidden auto; + background-color: ${({ theme }) => theme.COLOR.white}; ${({ $isOpen, $isClosing }) => css` @@ -65,7 +69,7 @@ export const TopSection = styled.div` padding: 1rem; - background-color: ${({ theme }) => theme.COLOR.primary2}; + background: linear-gradient(to right, rgb(255 250 245 / 100%), rgb(230 230 255 / 100%)); `; export const ProfileWrapper = styled.div` @@ -79,7 +83,7 @@ export const ProfileInfo = styled.div` display: flex; flex-direction: column; gap: 0.4rem; - color: ${({ theme }) => theme.COLOR.white}; + color: ${({ theme }) => theme.COLOR.black}; strong { font: ${({ theme }) => theme.TEXT.medium_bold}; @@ -119,7 +123,9 @@ export const NavItem = styled.li` &:hover, &:focus { - background-color: ${({ theme }) => theme.COLOR.grey0}; + /* background-color: ${({ theme }) => theme.COLOR.primary1}; */ + border: 1px solid ${({ theme }) => theme.COLOR.grey1}; + border-radius: 5px; } a { diff --git a/frontend/src/components/common/header/SideNavBar.tsx b/frontend/src/components/common/header/SideNavBar.tsx index 4307cb389..8daf40ab2 100644 --- a/frontend/src/components/common/header/SideNavBar.tsx +++ b/frontend/src/components/common/header/SideNavBar.tsx @@ -80,7 +80,11 @@ const SideNavBar = ({ isOpen, onClose, isLoggedIn }: SideNavBarProps) => { {isLoggedIn ? ( <> - diff --git a/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx b/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx index 8abba73b8..f3204ccba 100644 --- a/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx +++ b/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx @@ -31,10 +31,8 @@ const RevieweeFeedbackForm = ({ formState, onChange, modalType }: RevieweeFeedba return ( - - 리뷰이의 개발 역량 향상을 위해 코드를 평가 해주세요. - *필수입력 - + 리뷰이의 개발 역량 향상을 위해 코드를 평가 해주세요. + *필수입력 onChange("evaluationPoint", value)} @@ -43,10 +41,8 @@ const RevieweeFeedbackForm = ({ formState, onChange, modalType }: RevieweeFeedba - - 위와 같이 선택한 이유를 알려주세요. (1개 이상 선택) - *필수입력 - + 위와 같이 선택한 이유를 알려주세요. (1개 이상 선택) + *필수입력 onChange("feedbackKeywords", value)} @@ -57,10 +53,8 @@ const RevieweeFeedbackForm = ({ formState, onChange, modalType }: RevieweeFeedba - - 리뷰이의 코드를 추천하시나요? (비공개 항목) - *필수입력 - + 리뷰이의 코드를 추천하시나요? (비공개 항목) + *필수입력 onChange("recommendationPoint", value)} diff --git a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.style.ts b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.style.ts index af6f918b3..d88688f64 100644 --- a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.style.ts +++ b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.style.ts @@ -108,3 +108,10 @@ export const GuidanceWrapper = styled.div` color: ${({ theme }) => theme.COLOR.grey3}; } `; + +export const ExtraInformation = styled.span` + display: flex; + justify-content: flex-end; + font: ${({ theme }) => theme.TEXT.xSmall}; + color: ${({ theme }) => theme.COLOR.grey2}; +`; diff --git a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx index 5c3241583..d2b012e29 100644 --- a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx +++ b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx @@ -166,6 +166,7 @@ const MyReviewee = ({ roomInfo }: MyReviewerProps) => { ))} + ※선호하는 리뷰이 인원 수보다 적게 매칭될 수 있습니다. ); }; diff --git a/frontend/src/components/roomDetailPage/participantList/ParticipantList.tsx b/frontend/src/components/roomDetailPage/participantList/ParticipantList.tsx index 0f430751c..16a0907c5 100644 --- a/frontend/src/components/roomDetailPage/participantList/ParticipantList.tsx +++ b/frontend/src/components/roomDetailPage/participantList/ParticipantList.tsx @@ -67,11 +67,7 @@ const ParticipantList = ({ roomInfo }: ParticipantListProps) => { {participant.username} - + PR 링크 diff --git a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.style.ts b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.style.ts index f057abcaa..41f9166e4 100644 --- a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.style.ts +++ b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.style.ts @@ -53,11 +53,15 @@ export const RoomInfoCardContent = styled.div` width: 100%; height: 100%; padding: 2rem 1rem; + + ${media.small` + padding: 3rem 1rem; + `} `; export const RoomHeaderWrapper = styled.div` display: flex; - flex-direction: row; + flex-flow: row wrap; align-items: flex-start; justify-content: space-between; @@ -75,8 +79,14 @@ export const RoomHeaderWrapper = styled.div` `; export const RoomTitle = styled.span` + max-width: calc(100% - 160px); font: ${({ theme }) => theme.TEXT.large_bold}; + line-height: 2.5rem; color: ${({ theme }) => theme.COLOR.black}; + + ${media.small` + max-width: 100%; + `} `; export const RepositoryLink = styled.div` diff --git a/frontend/src/components/shared/roomCard/RoomCard.style.ts b/frontend/src/components/shared/roomCard/RoomCard.style.ts index a324d98a5..c0958d29c 100644 --- a/frontend/src/components/shared/roomCard/RoomCard.style.ts +++ b/frontend/src/components/shared/roomCard/RoomCard.style.ts @@ -146,5 +146,12 @@ export const StyledDday = styled.span` export const LabelWrapper = styled.div` display: flex; + flex-wrap: wrap; gap: 0.5rem; + height: 53px; +`; + +export const EtcWrapper = styled.div` + display: flex; + justify-content: space-between; `; diff --git a/frontend/src/components/shared/roomCard/RoomCard.tsx b/frontend/src/components/shared/roomCard/RoomCard.tsx index 8a743da60..f078bd07f 100644 --- a/frontend/src/components/shared/roomCard/RoomCard.tsx +++ b/frontend/src/components/shared/roomCard/RoomCard.tsx @@ -94,13 +94,15 @@ const RoomCard = React.memo(({ roomInfo }: RoomCardProps) => { {DisplayLabel(roomInfo)} + + + + {DisplayLeftTime(roomInfo)} {roomInfo.currentParticipants}/{roomInfo.limitedParticipants} - - - {DisplayLeftTime(roomInfo)} + diff --git a/frontend/src/hooks/queries/useFetchRooms.ts b/frontend/src/hooks/queries/useFetchRooms.ts index b23e55127..9c9b6bd72 100644 --- a/frontend/src/hooks/queries/useFetchRooms.ts +++ b/frontend/src/hooks/queries/useFetchRooms.ts @@ -50,7 +50,5 @@ export const useFetchParticipantList = (roomId: number, isOpenStatus: boolean) = } return getParticipantList(roomId); }, - staleTime: 5 * 60 * 1000, - gcTime: Infinity, }); }; diff --git a/frontend/src/pages/guide/GuidePage.tsx b/frontend/src/pages/guide/GuidePage.tsx index 4fd536dae..4f6e50259 100644 --- a/frontend/src/pages/guide/GuidePage.tsx +++ b/frontend/src/pages/guide/GuidePage.tsx @@ -20,7 +20,14 @@ const guidePageOptions = [ title: "BACKEND", link: "https://code-review-area.notion.site/v-1-0-b2ea7761e0e949e396c3bdd45860d270?pvs=4", }, - { title: "FRONTEND", link: "http://code-review-area.notion.site" }, + { + title: "FRONTEND", + link: "https://code-review-area.notion.site/v-1-0-a2f03dd6258a4789aba38722125da514", + }, + { + title: "ANDROID", + link: "https://kangdabin.notion.site/v-1-0-128cd3aed24b80c29c9bfd145e341361", + }, ]; const GuidePage = () => { diff --git a/frontend/src/pages/roomDetail/RoomDetailPage.tsx b/frontend/src/pages/roomDetail/RoomDetailPage.tsx index 4dbce2304..e75ca3d05 100644 --- a/frontend/src/pages/roomDetail/RoomDetailPage.tsx +++ b/frontend/src/pages/roomDetail/RoomDetailPage.tsx @@ -118,7 +118,7 @@ const RoomDetailPage = () => { - + 해당 방에 같이 참여중인 인원 중 6명을 랜덤으로 보여줍니다. 새로고침 버튼을 통해 새로운 리스트를 확인할 수 있습니다.