[FE] feat: 리뷰 목록 페이지 기능 구현

frontend/src/apis/endpoints.ts

@@ -1,7 +1,9 @@
 const endPoint = {
-  postingReview: `${process.env.API_BASE_URL}reviews`,
+  postingReview: `${process.env.API_BASE_URL}/reviews`,
   gettingDetailedReview: (reviewId: number, memberId: number) =>
-    `${process.env.API_BASE_URL}reviews/${reviewId}?memberId=${memberId}`,
+    `${process.env.API_BASE_URL}/reviews/${reviewId}?memberId=${memberId}`,
+  gettingReviewList: (revieweeId: number, lastReviewId: number, memberId: number) =>
+    `${process.env.API_BASE_URL}/reviews?revieweeId=${revieweeId}&lastReviewId=${lastReviewId}&memberId=${memberId}`,
   gettingInfoToWriteReview: (reviewerGroupId: number) => `/reviewer-groups/${reviewerGroupId}`,
   gettingKeyword: `${process.env.API_BASE_URL}keywords`,
 };

frontend/src/apis/review.ts

@@ -33,7 +33,7 @@ export const postReviewApi = async ({ reviewData }: { reviewData: ReviewData })
   return data;
 };
 
-// 상세리뷰
+// 상세 리뷰
 export const getDetailedReviewApi = async ({ reviewId, memberId }: { reviewId: number; memberId: number }) => {
   const response = await fetch(endPoint.gettingDetailedReview(reviewId, memberId), {
     method: 'GET',
@@ -49,3 +49,31 @@ export const getDetailedReviewApi = async ({ reviewId, memberId }: { reviewId: n
   const data = await response.json();
   return data;
 };
+
+// 리뷰 리스트
+export const getReviewListApi = async ({
+  revieweeId,
+  lastReviewId,
+  memberId,
+}: {
+  revieweeId: number;
+  lastReviewId: number;
+  memberId: number;
+}) => {
+  const response = await fetch(
+    `/api/reviews?revieweeId=${revieweeId}&lastReviewId=${lastReviewId}&memberId=${memberId}`,
+    {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    },
+  );
+
+  if (!response.ok) {
+    throw new Error('리뷰 리스트를 불러오는 데 실패했습니다.');
+  }
+
+  const data = await response.json();
+  return data;
+};

frontend/src/components/ReviewPreviewCard/index.tsx

@@ -0,0 +1,53 @@
+import GithubLogo from '@/assets/githubLogo.svg';
+import Lock from '@/assets/lock.svg';
+import UnLock from '@/assets/unLock.svg';
+
+import * as S from './styles';
+
+interface ReviewPreviewCardProps {
+  reviewerGroup: {
+    name: string;
+  };
+  createdAt: string;
+  contentPreview: string;
+  keywords: { id: number; content: string }[];
+  isPublic: boolean;
+}
+
+const ReviewPreviewCard = ({
+  reviewerGroup,
+  createdAt,
+  contentPreview,
+  keywords,
+  isPublic,
+}: ReviewPreviewCardProps) => {
+  return (
+    <S.Layout>
+      <S.Header>
+        <S.HeaderContainer>
+          <div>
+            <img src={GithubLogo} />
+          </div>
+          <div>
+            <S.Title>{reviewerGroup.name}</S.Title>
+            <S.SubTitle>{createdAt}</S.SubTitle>
+          </div>
+        </S.HeaderContainer>
+        <S.Visibility>
+          <img src={isPublic ? UnLock : Lock} />
+          <span>{isPublic ? '공개' : '비공개'}</span>
+        </S.Visibility>
+      </S.Header>
+      <S.Main>
+        <span>{contentPreview}</span>
+        <S.Keyword>
+          {keywords.map((keyword) => (
+            <div key={keyword.id}>{keyword.content}</div>
+          ))}
+        </S.Keyword>
+      </S.Main>
+    </S.Layout>
+  );
+};
+
+export default ReviewPreviewCard;

frontend/src/components/ReviewPreviewCard/styles.ts

@@ -0,0 +1,85 @@
+import styled from '@emotion/styled';
+
+export const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+
+  border: 1px solid ${({ theme }) => theme.colors.lightGray};
+  border-radius: 8px;
+
+  &:hover {
+    cursor: pointer;
+    border: 1px solid ${({ theme }) => theme.colors.primaryHover};
+
+    & > div:first-of-type {
+      background-color: ${({ theme }) => theme.colors.primaryHover};
+    }
+  }
+`;
+
+export const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  height: 6rem;
+  padding: 1rem 3rem;
+
+  background-color: ${({ theme }) => theme.colors.lightGray};
+  border-top-left-radius: 0.8rem;
+  border-top-right-radius: 0.8rem;
+`;
+
+export const HeaderContainer = styled.div`
+  display: flex;
+  gap: 1rem;
+
+  img {
+    width: 4rem;
+  }
+`;
+
+export const Title = styled.div`
+  font-size: 1.6rem;
+  font-weight: 700;
+`;
+
+export const SubTitle = styled.div`
+  font-size: 1.2rem;
+`;
+
+export const Visibility = styled.div`
+  display: flex;
+  gap: 0.6rem;
+  align-items: center;
+  font-size: 1.6rem;
+  font-weight: 700;
+
+  img {
+    width: 2rem;
+  }
+`;
+
+export const Main = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+
+  padding: 2rem 3rem;
+
+  font-size: 1.6rem;
+`;
+
+export const Keyword = styled.div`
+  display: flex;
+  gap: 3rem;
+  align-items: center;
+  font-size: 1.4rem;
+
+  div {
+    padding: 0.5rem 3rem;
+    background-color: ${({ theme }) => theme.colors.primaryHover};
+    border-radius: 0.8rem;
+  }
+`;

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

@@ -53,7 +53,7 @@ export const Button = styled.button<{ buttonType: ButtonType }>`
 
   width: 10rem;
   height: 4rem;
-  padding: 2rem;
+  padding: 1rem 2rem;
 
   border: 0.1rem solid ${({ theme }) => theme.colors.primary};
   border-radius: 0.8rem;

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

@@ -0,0 +1,24 @@
+import * as S from './styles';
+
+interface DropDownProps {
+  onChange: (value: string) => void;
+  options: string[];
+}
+
+const DropDown = ({ onChange, options }: DropDownProps) => {
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    onChange(e.target.value);
+  };
+
+  return (
+    <S.Container onChange={handleChange}>
+      {options.map((option) => (
+        <option key={option} value={option}>
+          {option}
+        </option>
+      ))}
+    </S.Container>
+  );
+};
+
+export default DropDown;

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

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.select`
+  width: 12rem;
+  padding: 8px;
+
+  font-size: 1.6rem;
+
+  border: 1px solid ${({ theme }) => theme.colors.placeholder};
+  border-radius: 0.8rem;
+`;

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

@@ -10,5 +10,10 @@ export const Input = styled.input<InputProps>`
   padding: 1.6rem;
 
   border: 1px solid ${({ theme }) => theme.colors.black};
-  border-radius: 1.5rem;
+  border-radius: 0.8rem;
+
+  &::placeholder {
+    font-size: 1.2rem;
+    color: ${({ theme }) => theme.colors.placeholder};
+  }
 `;

frontend/src/components/common/index.tsx

@@ -1,3 +1,5 @@
+export { default as Button } from './Button';
+export { default as DropDown } from './DropDown';
 export { default as SearchInput } from './SearchInput';
 export { default as ProjectImg } from './ProjectImg';
 export { default as ReviewDate } from './ReviewDate';

frontend/src/components/layouts/Sidebar/index.tsx

@@ -9,8 +9,8 @@ import * as S from './styles';
 const PATH = {
   myPage: '/user/mypage',
   reviewWriting: '/user/review-writing',
-  allReview: '/user/all-review',
-  detailedReview: '/user/detailed-review/0?memberId=1',
+  reviewPreviewList: '/user/review-preview-list',
+  detailedReview: '/user/detailed-review',
   reviewGroupManagement: '/user/review-group-management',
 };
 
@@ -25,7 +25,7 @@ const Sidebar = ({ isSidebarOpen, closeSidebar }: SidebarProps) => {
   const menuItems = [
     { path: PATH.myPage, label: PAGE.myPage },
     { path: PATH.reviewWriting, label: PAGE.reviewWriting },
-    { path: PATH.allReview, label: PAGE.allReview },
+    { path: PATH.reviewPreviewList, label: PAGE.reviewPreviewList },
     { path: PATH.detailedReview, label: PAGE.detailedReview },
     { path: PATH.reviewGroupManagement, label: PAGE.reviewGroupManagement },
   ];

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

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 
 export const HamburgerButton = styled.button`
-  width: 3.7rem;
-  height: 3.7rem;
+  width: 2.3rem;
+  height: 2.3rem;
 
   img {
     width: 100%;

frontend/src/components/layouts/Topbar/index.tsx

@@ -18,7 +18,7 @@ const Topbar = ({ openSidebar }: TopbarProps) => {
         <Logo />
       </S.Container>
       <S.Container>
-        <SearchInput $width="15rem" $height="3.6rem" placeholder={USER_SEARCH_PLACE_HOLDER} />
+        <SearchInput $width="30rem" $height="3.6rem" placeholder={USER_SEARCH_PLACE_HOLDER} />
         <S.UserProfile src={UserProfileIcon} alt="로그인한 사용자 깃허브 프로필" />
       </S.Container>
     </S.Layout>

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

@@ -6,8 +6,10 @@ export const Layout = styled.section`
 
   box-sizing: border-box;
   width: 100%;
-  height: 8rem;
-  padding: 1.8rem 2.5rem;
+  height: 7rem;
+  padding: 2rem 2.5rem;
+
+  border-bottom: 0.1rem solid ${({ theme }) => theme.colors.lightGray};
 `;
 
 export const Container = styled.div`

frontend/src/constants/page.ts

@@ -1,7 +1,7 @@
 export const PAGE = {
   myPage: '마이페이지',
   reviewWriting: '리뷰 작성하기',
-  allReview: '전체 리뷰 보기',
+  reviewPreviewList: '전체 리뷰 보기',
   detailedReview: '상세 리뷰 보기',
   reviewGroupManagement: '리뷰 그룹 관리',
 };

frontend/src/index.tsx

@@ -6,8 +6,8 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import App from '@/App';
 
 import DetailedReviewPage from './pages/DetailedReviewPage';
+import ReviewPreviewListPage from './pages/ReviewPreviewListPage';
 import ReviewWritingPage from './pages/ReviewWriting';
-import ReviewWritingCompletePage from './pages/ReviewWritingCompletePage';
 import globalStyles from './styles/globalStyles';
 import theme from './styles/theme';
 
@@ -25,11 +25,11 @@ const router = createBrowserRouter([
         element: <ReviewWritingPage />,
       },
       {
-        path: 'user/review-writing-complete',
-        element: <ReviewWritingCompletePage />,
+        path: 'user/review-preview-list',
+        element: <ReviewPreviewListPage />,
       },
       {
-        path: 'user/detailed-review/:id',
+        path: 'user/detailed-review',
         element: <DetailedReviewPage />,
       },
     ],