[FE] feature: 리뷰 연결, 목록, 상세 페이지의 반응형 레이아웃 구현

frontend/src/components/ReviewCard/styles.ts

@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
 
+import media from '@/utils/media';
+
 export const Layout = styled.div`
   display: flex;
   flex-direction: column;
 
-  width: 100%;
-
   border: 0.1rem solid ${({ theme }) => theme.colors.lightGray};
   border-radius: 0.8rem;
 
@@ -24,6 +24,7 @@ export const Header = styled.div`
   justify-content: space-between;
 
   height: 6rem;
+
   padding: 1rem 3rem;
 
   background-color: ${({ theme }) => theme.colors.lightGray};
@@ -79,6 +80,11 @@ export const Keyword = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 2.5rem;
+
+  ${media.small} {
+    gap: 1.6rem;
+  }
+
   align-items: center;
 
   font-size: 1.4rem;

frontend/src/components/common/ReviewDate/index.tsx

@@ -12,9 +12,11 @@ const ReviewDate = ({ date, dateTitle }: ReviewDateProps) => {
   const { year, month, day } = formatDate(date);
   return (
     <S.ReviewDate>
-      <S.ClockImg src={ClockIcon} alt="시계 아이콘" />
-      <span>{dateTitle}</span>
-      <S.Colon>:</S.Colon>
+      <S.ReviewDateText>
+        <S.ClockImg src={ClockIcon} alt="시계 아이콘" />
+        <span>{dateTitle}</span>
+        <S.Colon>:</S.Colon>
+      </S.ReviewDateText>
       <span>
         {year}-{month}-{day}
       </span>

frontend/src/components/common/ReviewDate/styles.ts

@@ -1,5 +1,17 @@
 import styled from '@emotion/styled';
 
+import media from '@/utils/media';
+
+export const ReviewDateText = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  ${media.small} {
+    display: none;
+  }
+`;
+
 export const ClockImg = styled.img`
   width: auto;
   height: 1.6rem;
@@ -9,7 +21,10 @@ export const ClockImg = styled.img`
 export const ReviewDate = styled.div`
   display: flex;
   align-items: center;
-  font-size: 1.6rem;
+
+  ${media.xSmall} {
+    font-size: ${({ theme }) => theme.fontSize.small};
+  }
 `;
 
 export const Colon = styled.span`

frontend/src/components/common/modals/AlertModal/index.tsx

@@ -32,7 +32,7 @@ const AlertModal = ({
           <Button
             styleType={closeButton.type}
             onClick={closeButton.handleClick}
-            style={{ width: '100%', minWidth: '30rem', height: '4rem' }}
+            style={{ width: '100%', minWidth: '30%', height: '4rem' }}
           >
             {closeButton.content}
           </Button>

frontend/src/components/common/modals/ContentModal/index.tsx

@@ -6,7 +6,11 @@ import ModalPortal from '../ModalPortal';
 
 import * as S from './styles';
 
-interface ContentModalProps {
+export interface ContentModalStyleProps {
+  $style?: React.CSSProperties;
+}
+
+interface ContentModalProps extends ContentModalStyleProps {
   title?: string;
   handleClose: () => void;
   isClosableOnBackground?: boolean;
@@ -16,12 +20,13 @@ const ContentModal = ({
   title,
   handleClose,
   children,
+  $style,
   isClosableOnBackground = true,
 }: EssentialPropsWithChildren<ContentModalProps>) => {
   return (
     <ModalPortal>
       <ModalBackground closeModal={isClosableOnBackground ? handleClose : null}>
-        <S.ContentModalContainer>
+        <S.ContentModalContainer style={$style}>
           <S.ContentModalHeader>
             <S.Title>{title}</S.Title>
             <S.CloseButton onClick={handleClose}>

frontend/src/components/common/modals/ContentModal/styles.ts

@@ -2,7 +2,9 @@ import styled from '@emotion/styled';
 
 import media from '@/utils/media';
 
-export const ContentModalContainer = styled.div`
+import { ContentModalStyleProps } from '.';
+
+export const ContentModalContainer = styled.div<ContentModalStyleProps>`
   position: fixed;
   top: 50%;
   left: 50%;
@@ -11,8 +13,6 @@ export const ContentModalContainer = styled.div`
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  gap: 2rem;
-  align-items: center;
 
   min-width: 30rem;
   max-width: ${({ theme }) => theme.contentModalSize.maxWidth};
@@ -25,20 +25,33 @@ export const ContentModalContainer = styled.div`
   ${media.xSmall} {
     padding: ${({ theme }) => theme.contentModalSize.smallPadding};
   }
+
+  ${({ $style }) => $style && { ...$style }}
 `;
 
 export const ContentModalHeader = styled.div`
   display: flex;
-  gap: 2rem;
+  gap: 8rem;
+
+  ${media.small} {
+    gap: 5rem;
+  }
+
   align-items: center;
   justify-content: space-between;
 
   width: 100%;
   height: 3rem;
+  margin-bottom: 1.5rem;
 `;
 
 export const Title = styled.span`
   font-size: 1.8rem;
+
+  ${media.small} {
+    font-size: 1.6rem;
+  }
+
   font-weight: ${({ theme }) => theme.fontWeight.bold};
 `;
 

frontend/src/components/layouts/Footer/style.ts

@@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
 
+import media from '@/utils/media';
+
 export const Footer = styled.footer`
   position: absolute;
   bottom: 0;
@@ -18,6 +20,13 @@ export const Footer = styled.footer`
   color: ${({ theme }) => theme.colors.gray};
 
   background-color: ${({ theme }) => theme.colors.white};
+
+  ${media.medium} {
+    font-size: 1.2rem;
+
+    flex-direction: column;
+    gap: 0.2rem;
+  }
 `;
 
 export const Link = styled.a`

frontend/src/components/layouts/Topbar/components/Logo/styles.ts

@@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
 
+import media from '@/utils/media';
+
 export const Logo = styled.div`
   display: flex;
   gap: 0.5rem;
@@ -22,6 +24,15 @@ export const LogoText = styled.div`
 
   span {
     font-size: 3rem;
+
+    ${media.small} {
+      font-size: 2.8rem;
+    }
+
+    ${media.xSmall} {
+      font-size: 2.6rem;
+    }
+
     font-weight: ${({ theme }) => theme.fontWeight.bolder};
     letter-spacing: 0.7rem;
   }

frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/styles.ts

@@ -1,12 +1,28 @@
 import styled from '@emotion/styled';
 
+import media from '@/utils/media';
+
 export const DetailedReviewPageContents = styled.div`
-  width: ${({ theme }) => theme.formWidth};
   border: 0.1rem solid ${({ theme }) => theme.colors.lightPurple};
   border-radius: ${({ theme }) => theme.borderRadius.basic};
+
+  width: 70%;
+  margin-top: 2rem;
+
+  ${media.medium} {
+    width: 80%;
+  }
+
+  ${media.small} {
+    width: 92%;
+  }
 `;
 
 export const ReviewContentContainer = styled.div`
   margin-bottom: 7rem;
   padding: 0 4rem;
+
+  ${media.xSmall} {
+    padding: 0 2rem;
+  }
 `;

frontend/src/pages/DetailedReviewPage/components/ReviewDescription/styles.ts

@@ -1,49 +1,65 @@
 import styled from '@emotion/styled';
 
+import media from '@/utils/media';
+
 export const Description = styled.section`
   display: flex;
   align-items: center;
   justify-content: space-between;
 
   width: 100%;
-  height: 9rem;
   margin: 0;
   padding: 1rem 3rem;
 
+  ${media.xSmall} {
+    padding: 1rem 1.2rem;
+  }
+
   background-color: ${({ theme }) => theme.colors.lightPurple};
   border-radius: ${({ theme }) => theme.borderRadius.basic} 0 0;
 `;
 
 export const DescriptionSide = styled.div`
   display: flex;
   width: 100%;
+  flex-wrap: wrap;
 `;
 
-//NOTE: 6rem :깃헙 로고 사이즈
 export const ProjectInfoContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
 
-  /* width: calc(100% - 6rem); */
   width: 100%;
   margin: 0 1rem;
 `;
 
 export const ProjectName = styled.p`
   margin-top: 0;
   font-size: ${({ theme }) => theme.fontSize.medium};
+
+  ${media.xSmall} {
+    font-size: ${({ theme }) => theme.fontSize.mediumSmall};
+  }
+
   font-weight: ${({ theme }) => theme.fontWeight.bold};
 `;
 
 export const RevieweeNameAndDateContainer = styled.div`
   display: flex;
-  align-items: center;
   justify-content: space-between;
 
   width: 100%;
 
   font-size: ${({ theme }) => theme.fontSize.basic};
+
+  ${media.small} {
+    flex-direction: column;
+  }
+
+  ${media.xSmall} {
+    font-size: ${({ theme }) => theme.fontSize.small};
+  }
 `;
 
 export const RevieweeNameWrapper = styled.p`

frontend/src/pages/ReviewListPage/components/PageContents/styles.ts

@@ -1,10 +1,17 @@
 import styled from '@emotion/styled';
 
+import media from '@/utils/media';
+
 export const Layout = styled.div`
   display: flex;
   flex-direction: column;
   gap: 4rem;
-  width: ${({ theme }) => theme.formWidth};
+
+  ${media.medium} {
+    gap: 2rem;
+  }
+
+  width: 90%;
 `;
 
 export const ReviewSection = styled.div`

frontend/src/pages/ReviewListPage/components/ReviewInfoSection/styles.ts

@@ -1,17 +1,42 @@
 import styled from '@emotion/styled';
 
+import media from '@/utils/media';
+
 export const ReviewInfoContainer = styled.div`
   display: flex;
   flex-direction: column;
+
+  margin-top: 2rem;
+  margin-left: 1rem;
 `;
 
 export const ProjectName = styled.span`
   font-size: ${({ theme }) => theme.fontSize.large};
   font-weight: ${({ theme }) => theme.fontWeight.semibold};
+
+  ${media.medium} {
+    font-size: 3rem;
+  }
+
+  ${media.small} {
+    font-size: 2.8rem;
+  }
+
+  ${media.xSmall} {
+    font-size: 2.6rem;
+  }
 `;
 
 export const RevieweeInfoWrapper = styled.div`
   font-size: ${({ theme }) => theme.fontSize.mediumSmall};
+
+  ${media.medium} {
+    font-size: ${({ theme }) => theme.fontSize.basic};
+  }
+
+  ${media.xSmall} {
+    font-size: ${({ theme }) => theme.fontSize.small};
+  }
 `;
 
 export const RevieweeName = styled.span`