[FE] 🚧 완료 상태 페어룸 1차 구현

frontend/src/App.tsx

@@ -8,6 +8,7 @@
 
 import Callback from '@/pages/Callback/Callback';
 import CoduoDocs from '@/pages/CoduoDocs/CoduoDocs';
+import CompletedPairRoom from '@/pages/CompletedPairRoom/CompletedPairRoom';
 import Error from '@/pages/Error/Error';
 import Landing from '@/pages/Landing/Landing';
 import Layout from '@/pages/Layout';
@@ -47,7 +48,7 @@
 
   useEffect(() => {
     if (window.location.pathname !== '/callback') updateUser();
   }, []);
 
   const router = createBrowserRouter([
     {
@@ -83,6 +84,10 @@
             </Suspense>
           ),
         },
+        {
+          path: 'room/:accessCode/completed',
+          element: <CompletedPairRoom />,
+        },
         {
           path: 'sign-up',
           element: <SignUp />,

frontend/src/apis/pairRoom.ts

@@ -69,6 +69,17 @@ export const updatePairRole = async ({ accessCode }: UpdatePairRoleRequest) => {
   });
 };
 
+interface UpdatePairRoomStatusRequest {
+  accessCode: string;
+}
+
+export const updatePairRoomStatus = async ({ accessCode }: UpdatePairRoomStatusRequest) => {
+  await fetcher.patch({
+    url: `${API_URL}/pair-room/${accessCode}/complete`,
+    errorMessage: ERROR_MESSAGES.UPDATE_PAIR_ROOM_STATUS,
+  });
+};
+
 export const deletePairRoom = async (accessCode: string) => {
   await fetcher.delete({
     url: `${API_URL}/pair-room/${accessCode}`,

frontend/src/components/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoriesEditor/CategoryItem/CategoryItem.styles.ts

@@ -0,0 +1,60 @@
+import styled from 'styled-components';
+
+export const Layout = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+
+  width: 100%;
+`;
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+
+  width: 100%;
+  height: 6rem;
+
+  cursor: pointer;
+
+  img {
+    width: 2rem;
+  }
+`;
+
+export const ItemLayout = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  width: 100%;
+`;
+
+export const Item = styled.li<{ $isChecked: boolean }>`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  width: 100%;
+  height: 4.4rem;
+  padding: 0 1rem;
+  border: 1px solid ${({ theme }) => theme.color.black[50]};
+  border-radius: 0.5rem;
+
+  background-color: ${({ theme, $isChecked }) => ($isChecked ? theme.color.primary[700] : theme.color.black[10])};
+  color: ${({ theme, $isChecked }) => ($isChecked ? theme.color.black[10] : theme.color.black[70])};
+  font-size: ${({ theme }) => theme.fontSize.md};
+
+  transition: all 0.2s ease-out;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.color.primary[700]};
+    color: ${({ theme }) => theme.color.black[10]};
+  }
+
+  &:active {
+    background-color: ${({ theme }) => theme.color.primary[800]};
+    color: ${({ theme }) => theme.color.black[10]};
+  }
+`;

frontend/src/components/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoriesEditor/CategoryItem/CategoryItem.tsx

@@ -0,0 +1,40 @@
+import { CheckBoxChecked, CheckBoxUnchecked } from '@/assets';
+
+import * as S from './CategoryItem.styles';
+
+interface CategoryItemProps {
+  categoryName: string;
+  categoryId: string;
+  isChecked: boolean;
+  closeModal: () => void;
+  handleSelectCategory: (categoryId: string) => void;
+}
+
+const CategoryItem = ({ closeModal, categoryName, categoryId, isChecked, handleSelectCategory }: CategoryItemProps) => {
+  return (
+    <S.Layout>
+      <S.Container>
+        <S.ItemLayout
+          id={categoryId}
+          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+            if (event.currentTarget.id === '카테고리') return;
+            if (isChecked) return;
+            handleSelectCategory(event.currentTarget.id);
+            closeModal();
+          }}
+        >
+          <img
+            src={isChecked ? CheckBoxChecked : CheckBoxUnchecked}
+            alt={isChecked ? '체크된 체크박스' : '체크되지 않은 체크박스'}
+          />
+
+          <S.Item $isChecked={isChecked}>
+            <p>{categoryName}</p>
+          </S.Item>
+        </S.ItemLayout>
+      </S.Container>
+    </S.Layout>
+  );
+};
+
+export default CategoryItem;

frontend/src/components/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryManagementModal.styles.ts

@@ -0,0 +1,24 @@
+import styled, { css } from 'styled-components';
+
+export const inputStyles = css`
+  width: 100%;
+
+  font-size: ${({ theme }) => theme.fontSize.md};
+`;
+
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  color: ${({ theme }) => theme.color.black[80]};
+  font-size: ${({ theme }) => theme.fontSize.lg};
+`;
+
+export const CategoryList = styled.ul`
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+
+  width: 100%;
+`;

frontend/src/components/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryManagementModal.tsx

@@ -0,0 +1,52 @@
+import { FaFilter } from 'react-icons/fa';
+
+import { Modal } from '@/components/common/Modal';
+import CategoryItem from '@/components/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoriesEditor/CategoryItem/CategoryItem';
+import { Category } from '@/components/PairRoom/ReferenceCard/ReferenceCard.type';
+
+import * as S from './CategoryManagementModal.styles';
+
+interface CategoryManagementModalProps {
+  isOpen: boolean;
+  closeModal: () => void;
+  categories: Category[];
+  isCategoryExist: (categoryName: string) => boolean;
+  selectedCategory: string;
+  handleSelectCategory: (categoryId: string) => void;
+}
+
+const CategoryManagementModal = ({
+  isOpen,
+  closeModal,
+  categories,
+  selectedCategory,
+  handleSelectCategory,
+}: CategoryManagementModalProps) => {
+  return (
+    <Modal isOpen={isOpen} close={closeModal} size="45rem">
+      <Modal.Header>
+        <S.Header>
+          <FaFilter />
+          <p>카테고리 선택</p>
+        </S.Header>
+      </Modal.Header>
+      <Modal.CloseButton close={closeModal} />
+      <Modal.Body>
+        <S.CategoryList>
+          {categories.map((category) => (
+            <CategoryItem
+              closeModal={closeModal}
+              key={category.id}
+              categoryName={category.value}
+              categoryId={category.id}
+              isChecked={category.id === selectedCategory}
+              handleSelectCategory={handleSelectCategory}
+            />
+          ))}
+        </S.CategoryList>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default CategoryManagementModal;

frontend/src/components/CompletedPairRoom/ReferenceCard/Header/Header.styles.ts

@@ -0,0 +1,25 @@
+import styled, { css } from 'styled-components';
+
+export const buttonStyles = css`
+  width: fit-content;
+  min-width: 6rem;
+  padding: 0 1rem;
+`;
+
+export const Layout = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  width: 100%;
+  height: 6rem;
+  padding: 2rem;
+
+  font-size: ${({ theme }) => theme.fontSize.lg};
+`;
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+`;

frontend/src/components/CompletedPairRoom/ReferenceCard/Header/Header.tsx

@@ -0,0 +1,36 @@
+import { IoIosLink } from 'react-icons/io';
+
+import Button from '@/components/common/Button/Button';
+
+import { theme } from '@/styles/theme';
+
+import * as S from './Header.styles';
+
+interface HeaderProps {
+  selectedFilteringCategoryName: string;
+  onButtonClick: () => void;
+}
+
+const Header = ({ selectedFilteringCategoryName, onButtonClick }: React.PropsWithChildren<HeaderProps>) => {
+  return (
+    <S.Layout>
+      <S.Container>
+        <IoIosLink size={theme.fontSize.h6} color={theme.color.primary[600]} />
+        <p>링크</p>
+      </S.Container>
+      <Button
+        css={S.buttonStyles}
+        size="sm"
+        rounded={true}
+        onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+          event.stopPropagation();
+          onButtonClick();
+        }}
+      >
+        {selectedFilteringCategoryName}
+      </Button>
+    </S.Layout>
+  );
+};
+
+export default Header;

frontend/src/components/CompletedPairRoom/ReferenceCard/ReferenceCard.styles.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export const Layout = styled.div`
+  min-width: 49rem;
+`;
+
+export const Body = styled.div`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  height: calc(100vh - 20rem);
+
+  border-top: 1px solid ${({ theme }) => theme.color.black[30]};
+`;

frontend/src/components/CompletedPairRoom/ReferenceCard/ReferenceCard.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+
+import CategoryManagementModal from '@/components/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryManagementModal';
+import Header from '@/components/CompletedPairRoom/ReferenceCard/Header/Header';
+import ReferenceList from '@/components/CompletedPairRoom/ReferenceCard/ReferenceList/ReferenceList';
+import { PairRoomCard } from '@/components/PairRoom/PairRoomCard';
+
+import useModal from '@/hooks/common/useModal';
+import useCategories, { DEFAULT_CATEGORY_ID, DEFAULT_CATEGORY_VALUE } from '@/hooks/PairRoom/useCategories';
+
+import { useGetReference } from '@/queries/PairRoom/reference/query';
+
+import * as S from './ReferenceCard.styles';
+
+interface ReferenceCardProps {
+  accessCode: string;
+}
+
+const ReferenceCard = ({ accessCode }: ReferenceCardProps) => {
+  const [selectedFilteringCategoryId, setSelectedFilteringCategoryId] = useState(DEFAULT_CATEGORY_ID);
+  const { isModalOpen, openModal, closeModal } = useModal();
+
+  const { categories, isCategoryExist, getCategoryNameById } = useCategories(accessCode);
+
+  const { data: references } = useGetReference(selectedFilteringCategoryId, accessCode);
+  const selectedFilteringCategoryName = getCategoryNameById(selectedFilteringCategoryId) || DEFAULT_CATEGORY_VALUE;
+
+  return (
+    <>
+      <S.Layout>
+        <PairRoomCard>
+          <Header selectedFilteringCategoryName={selectedFilteringCategoryName} onButtonClick={openModal} />
+          <S.Body>
+            <ReferenceList references={references} />
+          </S.Body>
+        </PairRoomCard>
+      </S.Layout>
+
+      <CategoryManagementModal
+        isOpen={isModalOpen}
+        closeModal={closeModal}
+        categories={categories}
+        isCategoryExist={isCategoryExist}
+        selectedCategory={selectedFilteringCategoryId}
+        handleSelectCategory={(categoryId: string) => setSelectedFilteringCategoryId(categoryId)}
+      />
+    </>
+  );
+};
+
+export default ReferenceCard;