Merge branch 'FE/dev' into FE/feature/#749

woowacourse-teams · Oct 15, 2024 · b5a864e · b5a864e
2 parents 26ebacf + 48063e1
commit b5a864e
Show file tree

Hide file tree

Showing 17 changed files with 517 additions and 78 deletions.
diff --git a/frontend/.stylelintrc b/frontend/.stylelintrc
@@ -59,6 +59,7 @@
           "padding-bottom",
           "padding-left",
           "border",
+          "border-color",
           "border-radius"
         ]
       },

diff --git a/frontend/src/apis/pairRoom.ts b/frontend/src/apis/pairRoom.ts
@@ -60,3 +60,10 @@ export const updatePairRole = async ({ accessCode }: UpdatePairRoleRequest) => {
     errorMessage: '',
   });
 };
+
+export const deletePairRoom = async (accessCode: string) => {
+  await fetcher.delete({
+    url: `${API_URL}/pair-room/${accessCode}`,
+    errorMessage: ERROR_MESSAGES.DELETE_PAIR_ROOM,
+  });
+};
diff --git a/frontend/src/components/MyPage/PairRoomButton/PairRoomButton.styles.ts b/frontend/src/components/MyPage/PairRoomButton/PairRoomButton.styles.ts
@@ -1,3 +1,6 @@
+import { Link } from 'react-router-dom';
+
+import { FaTrashAlt } from 'react-icons/fa';
 import styled, { keyframes, css } from 'styled-components';
 
 import type { PairRoomStatus } from '@/apis/pairRoom';
@@ -11,7 +14,93 @@ const flow = keyframes`
   }
 `;
 
-export const Layout = styled.button<{ $status: PairRoomStatus }>`
+const commonTextStyles = css`
+  font-size: ${({ theme }) => theme.fontSize.base};
+
+  transition: color 0.7s ease;
+`;
+
+const inProgressText = css`
+  background: linear-gradient(
+    90deg,
+    ${({ theme }) => theme.color.black[60]},
+    ${({ theme }) => theme.color.black[70]},
+    ${({ theme }) => theme.color.black[60]}
+  );
+
+  animation: ${flow} 4s linear infinite;
+  background-size: 200% 100%;
+  background-clip: text;
+`;
+
+export const Layout = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 3rem;
+
+  width: 100%;
+`;
+
+export const LinkWrapper = styled(Link)`
+  width: 100%;
+`;
+
+export const StatusText = styled.p<{ $status: PairRoomStatus }>`
+  width: 15%;
+
+  ${commonTextStyles}
+  color: ${({ $status, theme }) => ($status === 'IN_PROGRESS' ? 'transparent' : theme.color.black[70])};
+  letter-spacing: 0.15rem;
+  text-align: left;
+
+  ${({ $status }) => $status === 'IN_PROGRESS' && inProgressText}
+
+  &:hover {
+    color: white;
+  }
+`;
+
+export const RoleTextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  width: 50%;
+`;
+
+export const RoleText = styled.p<{ $status: PairRoomStatus }>`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  font-size: ${({ theme }) => theme.fontSize.md};
+
+  transition: color 0.7s ease;
+
+  span {
+    color: ${({ $status, theme }) => ($status === 'IN_PROGRESS' ? theme.color.secondary[600] : theme.color.black[70])};
+    font-size: ${({ theme }) => theme.fontSize.lg};
+    font-weight: ${({ theme }) => theme.fontWeight.medium};
+
+    transition: color 0.7s ease;
+  }
+`;
+
+export const ConnectText = styled.div`
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  gap: 0.4rem;
+
+  width: 10%;
+
+  color: ${({ theme }) => theme.color.black[10]};
+
+  transition: color 0.7s ease;
+`;
+
+export const PairRoomButton = styled.button<{ $status: PairRoomStatus }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -25,6 +114,8 @@ export const Layout = styled.button<{ $status: PairRoomStatus }>`
 
   font-size: ${({ theme }) => theme.fontSize.base};
 
+  cursor: pointer;
+
   &::before {
     content: '';
 
@@ -37,73 +128,65 @@ export const Layout = styled.button<{ $status: PairRoomStatus }>`
     height: 100%;
     border-radius: 1rem;
 
-    background: ${({ $status, theme }) =>
+    background-color: ${({ $status, theme }) =>
+      $status === 'IN_PROGRESS' ? theme.color.secondary[100] : theme.color.black[30]};
+    background-image: ${({ $status, theme }) =>
       $status === 'IN_PROGRESS'
         ? `linear-gradient(
-      120deg,
+      90deg,
       ${theme.color.secondary[100]} 0 75%,
       ${theme.color.secondary[600]} 75% 100%
     )`
         : `linear-gradient(
-      120deg,
+      90deg,
       ${theme.color.black[30]} 0 75%,
       ${theme.color.black[60]} 75% 100%
     )`};
+    background-size: 400% 100%;
+
+    background-position: 72.5% 0;
     opacity: 0.7;
 
-    transition: opacity 0.2s ease-in-out;
+    transition:
+      background-position 0.5s ease,
+      opacity 0.2s ease;
   }
 
   &:hover::before {
+    background-position: 105.8% 0;
     opacity: 1;
   }
-`;
 
-export const RoleTextContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-`;
-
-export const RoleText = styled.p<{ $status: PairRoomStatus }>`
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-
-  font-size: ${({ theme }) => theme.fontSize.md};
-
-  span {
-    color: ${({ $status, theme }) => ($status === 'IN_PROGRESS' ? theme.color.secondary[600] : theme.color.black[70])};
-    font-size: ${({ theme }) => theme.fontSize.lg};
-    font-weight: ${({ theme }) => theme.fontWeight.medium};
+  &:hover ${StatusText} {
+    color: white;
+    ${({ $status }) =>
+      $status === 'IN_PROGRESS' &&
+      css`
+        animation: ${flow} 4s linear infinite;
+      `}
   }
-`;
+  &:hover ${RoleText} {
+    color: ${({ theme }) => theme.color.black[20]};
 
-const inProgressText = css`
-  background: linear-gradient(
-    90deg,
-    ${({ theme }) => theme.color.black[60]},
-    ${({ theme }) => theme.color.black[70]},
-    ${({ theme }) => theme.color.black[60]}
-  );
+    span {
+      color: ${({ theme }) => theme.color.black[10]};
+    }
+  }
 
-  animation: ${flow} 4s linear infinite;
-  background-size: 200% 100%;
-  background-clip: text;
+  &:hover ${ConnectText} {
+    color: ${({ theme }) => theme.color.black[70]};
+  }
 `;
 
-export const StatusText = styled.p<{ $status: PairRoomStatus }>`
-  color: ${({ $status, theme }) => ($status === 'IN_PROGRESS' ? 'transparent' : theme.color.black[70])};
-  font-size: ${({ theme }) => theme.fontSize.base};
-  letter-spacing: 0.15rem;
+export const DeleteButton = styled(FaTrashAlt)`
+  color: ${({ theme }) => theme.color.black[60]};
+  font-size: 1.6rem;
 
-  ${({ $status }) => $status === 'IN_PROGRESS' && inProgressText}
-`;
+  transition: color 0.3s ease;
 
-export const ConnectText = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
+  cursor: pointer;
 
-  color: ${({ theme }) => theme.color.black[10]};
+  &:hover {
+    color: ${({ theme }) => theme.color.danger[600]};
+  }
 `;
diff --git a/frontend/src/components/MyPage/PairRoomButton/PairRoomButton.tsx b/frontend/src/components/MyPage/PairRoomButton/PairRoomButton.tsx
@@ -1,8 +1,13 @@
-import { Link } from 'react-router-dom';
-
 import { IoIosArrowForward } from 'react-icons/io';
 
-import type { PairRoomStatus } from '@/apis/pairRoom';
+import Spinner from '@/components/common/Spinner/Spinner';
+import PairRoomDeleteModal from '@/components/MyPage/PairRoomDeleteModal/PairRoomDeleteModal';
+
+import { type PairRoomStatus } from '@/apis/pairRoom';
+
+import useModal from '@/hooks/common/useModal';
+
+import useDeletePairRoom from '@/queries/MyPage/useDeleteRoom';
 
 import * as S from './PairRoomButton.styles';
 
@@ -14,26 +19,53 @@ interface PairRoomButtonProps {
 }
 
 const PairRoomButton = ({ driver, navigator, status, accessCode }: PairRoomButtonProps) => {
+  const { openModal, closeModal, isModalOpen } = useModal();
+  const { mutate, isPending } = useDeletePairRoom();
+  const handleOpenDeleteModal = (event: React.MouseEvent<HTMLButtonElement | SVGElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    openModal();
+  };
+
+  const handleDeletePairRoom = async () => {
+    mutate(accessCode);
+    closeModal();
+  };
+
   return (
-    <Link to={`/room/${accessCode}`}>
-      <S.Layout $status={status}>
-        <S.RoleTextContainer>
-          <S.RoleText $status={status}>
-            <span>드라이버</span>
-            {driver}
-          </S.RoleText>
-          <S.RoleText $status={status}>
-            <span>내비게이터</span>
-            {navigator}
-          </S.RoleText>
-        </S.RoleTextContainer>
-        <S.StatusText $status={status}>{status === 'IN_PROGRESS' ? '진행 중' : '진행 완료'}</S.StatusText>
-        <S.ConnectText>
-          접속
-          <IoIosArrowForward size="1.8rem" />
-        </S.ConnectText>
-      </S.Layout>
-    </Link>
+    <S.Layout>
+      {isPending ? (
+        <Spinner />
+      ) : (
+        <>
+          <S.LinkWrapper to={`/room/${accessCode}`}>
+            <S.PairRoomButton $status={status}>
+              <S.RoleTextContainer>
+                <S.RoleText $status={status}>
+                  <span>드라이버</span>
+                  {driver}
+                </S.RoleText>
+                <S.RoleText $status={status}>
+                  <span>내비게이터</span>
+                  {navigator}
+                </S.RoleText>
+              </S.RoleTextContainer>
+              <S.StatusText $status={status}>{status === 'IN_PROGRESS' ? '진행 중' : '진행 완료'}</S.StatusText>
+              <S.ConnectText>
+                입장
+                <IoIosArrowForward size="1.8rem" />
+              </S.ConnectText>
+            </S.PairRoomButton>
+          </S.LinkWrapper>
+          <S.DeleteButton onClick={handleOpenDeleteModal} />
+          <PairRoomDeleteModal
+            isOpen={isModalOpen}
+            closeModal={closeModal}
+            handleDeletePairRoom={handleDeletePairRoom}
+          />
+        </>
+      )}
+    </S.Layout>
   );
 };
 

diff --git a/frontend/src/components/MyPage/PairRoomDeleteModal/PairRoomDeleteModal.tsx b/frontend/src/components/MyPage/PairRoomDeleteModal/PairRoomDeleteModal.tsx
@@ -0,0 +1,33 @@
+import { Modal } from '@/components/common/Modal';
+
+import * as S from './PariRoomDeleteModal.styles';
+
+interface PairRoomDeleteModalProps {
+  isOpen: boolean;
+  closeModal: () => void;
+  handleDeletePairRoom: () => void;
+}
+
+const PairRoomDeleteModal = ({ isOpen, closeModal, handleDeletePairRoom }: PairRoomDeleteModalProps) => {
+  return (
+    <Modal isOpen={isOpen} close={closeModal} size="sm">
+      <Modal.CloseButton close={closeModal} />
+      <Modal.Body>
+        <S.Description>
+          투두 리스트, 레퍼런스 링크 등<br />
+          <S.DangerText> 모든 데이터가 삭제</S.DangerText>됩니다.
+        </S.Description>
+      </Modal.Body>
+      <Modal.Footer position="CENTER">
+        <S.OutlinedButton filled={false} size="md" onClick={closeModal}>
+          취소
+        </S.OutlinedButton>
+        <S.FilledButton size="md" onClick={handleDeletePairRoom}>
+          삭제하기
+        </S.FilledButton>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export default PairRoomDeleteModal;