[FE] refactor: 클릭 이벤트가 있는 요소 드래그 막기

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import { useNavigate } from 'react-router';
 
+import PreventDrag from '../PreventDrag';
+
 import * as S from './styles';
 
 type PathType = string | number;
@@ -29,7 +31,7 @@ const Breadcrumb = ({ pathList }: BreadcrumbProps) => {
     <S.BreadcrumbList>
       {pathList.map(({ pageName, path }, index) => (
         <S.BreadcrumbItem key={index} onClick={() => handleNavigation(path)}>
-          {pageName}
+          <PreventDrag>{pageName}</PreventDrag>
         </S.BreadcrumbItem>
       ))}
     </S.BreadcrumbList>

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

@@ -11,6 +11,7 @@ export const BreadcrumbList = styled.ul`
 `;
 
 export const BreadcrumbItem = styled.li`
+  display: flex;
   cursor: pointer;
 
   &:not(:last-child)::after {

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

@@ -1,4 +1,5 @@
 import Checkbox, { CheckboxProps } from '../Checkbox';
+import PreventDrag from '../PreventDrag';
 
 import * as S from './styles';
 
@@ -10,7 +11,9 @@ const CheckboxItem = ({ label, ...rest }: CheckboxItemProps) => {
   return (
     <S.CheckboxItem>
       <S.CheckboxLabel>
-        <Checkbox {...rest} />
+        <PreventDrag>
+          <Checkbox {...rest} />
+        </PreventDrag>
         {label}
       </S.CheckboxLabel>
     </S.CheckboxItem>

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

@@ -0,0 +1,9 @@
+import { EssentialPropsWithChildren } from '@/types';
+
+import * as S from './styles';
+
+const PreventDrag = ({ children }: EssentialPropsWithChildren) => {
+  return <S.PreventDrag>{children}</S.PreventDrag>;
+};
+
+export default PreventDrag;

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

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+
+export const PreventDrag = styled.div`
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+`;

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

@@ -1,6 +1,8 @@
 // import UserProfileIcon from '../../../assets/userProfile.svg';
 // import { SearchInput } from '../../common';
 
+import PreventDrag from '@/components/common/PreventDrag';
+
 import Logo from './components/Logo';
 import SidebarOpenButton from './components/SidebarOpenButton';
 import * as S from './styles';
@@ -15,7 +17,9 @@ const Topbar = ({ openSidebar }: TopbarProps) => {
     <S.Layout>
       <S.Container>
         {/* <SidebarOpenButton openSidebar={openSidebar} /> */}
-        <Logo />
+        <PreventDrag>
+          <Logo />
+        </PreventDrag>
       </S.Container>
       <S.Container>
         {/* <SearchInput $width="30rem" $height="3.6rem" placeholder={USER_SEARCH_PLACE_HOLDER} /> */}

frontend/src/pages/ReviewListPage/components/PageContents/index.tsx

@@ -1,5 +1,6 @@
 import { useNavigate } from 'react-router';
 
+import PreventDrag from '@/components/common/PreventDrag';
 import ReviewCard from '@/components/ReviewCard';
 import { useGetReviewList } from '@/hooks';
 
@@ -36,14 +37,16 @@ const PageContents = ({ groupAccessCode, reviewRequestCode }: PageContentsProps)
           ) : (
             <S.ReviewSection>
               {reviewListData.reviews.map((review) => (
-                <div key={review.reviewId} onClick={() => handleReviewClick(review.reviewId)}>
-                  <ReviewCard
-                    projectName={reviewListData.projectName}
-                    createdAt={review.createdAt}
-                    contentPreview={review.contentPreview}
-                    categories={review.categories}
-                  />
-                </div>
+                <PreventDrag key={review.reviewId}>
+                  <div onClick={() => handleReviewClick(review.reviewId)}>
+                    <ReviewCard
+                      projectName={reviewListData.projectName}
+                      createdAt={review.createdAt}
+                      contentPreview={review.contentPreview}
+                      categories={review.categories}
+                    />
+                  </div>
+                </PreventDrag>
               ))}
             </S.ReviewSection>
           )}