[feat/CK-243] 공통컴포넌트 라이브러리를 적용한다

client/package.json

@@ -34,6 +34,7 @@
     "ajv": "^8.12.0",
     "axios": "^1.4.0",
     "babel-plugin-transform-builtin-extend": "^1.1.2",
+    "ck-util-components": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-lightweight-form": "^1.2.5",

client/src/components/goalRoomDahsboardPage/goalRoomCertificationFeed/GoalRoomCertificationFeed.tsx

@@ -2,12 +2,7 @@ import * as S from './GoalRoomCertificationFeed.styles';
 import SVGIcon from '@components/icons/SVGIcon';
 import { GoalRoomBrowseResponse } from '@myTypes/goalRoom/remote';
 import { StyledImage } from './GoalRoomCertificationFeed.styles';
-import {
-  DialogBackdrop,
-  DialogBox,
-  DialogContent,
-  DialogTrigger,
-} from '@components/_common/dialog/dialog';
+import { Dialog } from 'ck-util-components';
 import CertificationFeedModal from '@components/goalRoomDahsboardPage/goalRoomCertificationFeed/certificationFeedModal/CertificationFeedModal';
 import ToolTip from '@components/_common/toolTip/ToolTip';
 
@@ -19,7 +14,7 @@ const GoalRoomCertificationFeed = ({ goalRoomData }: GoalRoomCertificationFeedPr
   const { checkFeeds } = goalRoomData;
 
   return (
-    <DialogBox>
+    <Dialog>
       <S.CertificationFeedWrapper>
         <div>
           <S.CertificationTitleWrapper>
@@ -31,12 +26,12 @@ const GoalRoomCertificationFeed = ({ goalRoomData }: GoalRoomCertificationFeedPr
             </ToolTip>
           </S.CertificationTitleWrapper>
 
-          <DialogTrigger asChild>
+          <Dialog.Trigger asChild>
             <button aria-labelledby='이미지 피드 전체보기'>
               <span>전체보기</span>
               <SVGIcon name='RightArrowIcon' aria-hidden='true' />
             </button>
-          </DialogTrigger>
+          </Dialog.Trigger>
         </div>
         <S.ImageGrid>
           {checkFeeds.map((feed) => {
@@ -49,14 +44,14 @@ const GoalRoomCertificationFeed = ({ goalRoomData }: GoalRoomCertificationFeedPr
         </S.ImageGrid>
       </S.CertificationFeedWrapper>
 
-      <DialogBackdrop asChild>
+      <Dialog.BackDrop asChild>
         <S.ModalBackdrop />
-      </DialogBackdrop>
+      </Dialog.BackDrop>
 
-      <DialogContent>
+      <Dialog.Content>
         <CertificationFeedModal />
-      </DialogContent>
-    </DialogBox>
+      </Dialog.Content>
+    </Dialog>
   );
 };
 

client/src/components/goalRoomDahsboardPage/goalRoomDahsboardRoadmap/GoalRoomDashboardRoadmap.tsx

@@ -1,12 +1,7 @@
 import * as S from './GoalRoomDashboardRoadmap.styles';
 import { useGoalRoomDetail } from '@/hooks/queries/goalRoom';
 import { useGoalRoomDashboardContext } from '@/context/goalRoomDashboardContext';
-import {
-  DialogBackdrop,
-  DialogBox,
-  DialogContent,
-  DialogTrigger,
-} from '@components/_common/dialog/dialog';
+import { Dialog } from 'ck-util-components';
 import SVGIcon from '@components/icons/SVGIcon';
 import RoadmapModal from '@components/goalRoomDahsboardPage/goalRoomDahsboardRoadmap/roadmapModal/RoadmapModal';
 import { GoalRoomRecruitmentStatus } from '@myTypes/goalRoom/internal';
@@ -20,19 +15,19 @@ const GoalRoomDashboardRoadmap = ({ goalRoomStatus }: GoalRoomDashboardRoadmapPr
   const { goalRoomInfo } = useGoalRoomDetail(Number(goalroomId));
 
   return (
-    <DialogBox>
+    <Dialog>
       <S.RoadmapWrapper>
         <div>
           <S.TitleWrapper>
             <h2>로드맵</h2>
           </S.TitleWrapper>
 
-          <DialogTrigger asChild>
+          <Dialog.Trigger asChild>
             <button>
               <span>전체보기</span>
               <SVGIcon name='RightArrowIcon' aria-hidden='true' />
             </button>
-          </DialogTrigger>
+          </Dialog.Trigger>
         </div>
         <S.RoadmapContainer>
           {goalRoomInfo.goalRoomNodes.map((node) => {
@@ -49,14 +44,14 @@ const GoalRoomDashboardRoadmap = ({ goalRoomStatus }: GoalRoomDashboardRoadmapPr
         </S.RoadmapContainer>
       </S.RoadmapWrapper>
 
-      <DialogBackdrop asChild>
+      <Dialog.BackDrop asChild>
         <S.DashboardBackDrop />
-      </DialogBackdrop>
+      </Dialog.BackDrop>
 
-      <DialogContent>
-        {goalRoomStatus === 'RUNNING' && <RoadmapModal goalroomId={goalroomId} />}
-      </DialogContent>
-    </DialogBox>
+      <Dialog.Content>
+        <>{goalRoomStatus === 'RUNNING' && <RoadmapModal goalroomId={goalroomId} />}</>
+      </Dialog.Content>
+    </Dialog>
   );
 };
 

client/src/components/goalRoomDahsboardPage/goalRoomDahsboardTodo/GoalRoomDashboardTodo.tsx

@@ -2,12 +2,7 @@ import * as S from './GoalRoomDashboardTodo.styles';
 import SVGIcon from '@components/icons/SVGIcon';
 import { GoalRoomBrowseResponse } from '@myTypes/goalRoom/remote';
 import SingleTodo from '@components/goalRoomDahsboardPage/goalRoomDahsboardTodo/singleTodo/SingleTodo';
-import {
-  DialogBackdrop,
-  DialogBox,
-  DialogContent,
-  DialogTrigger,
-} from '@components/_common/dialog/dialog';
+import { Dialog } from 'ck-util-components';
 import TodoModal from '@components/goalRoomDahsboardPage/goalRoomDahsboardTodo/todoModal/TodoModal';
 import ToolTip from '@components/_common/toolTip/ToolTip';
 
@@ -23,7 +18,7 @@ const GoalRoomDashboardTodo = ({
   const { goalRoomTodos } = goalRoomData;
 
   return (
-    <DialogBox>
+    <Dialog>
       <S.TodoWrapper>
         <div>
           <S.TitleWrapper>
@@ -33,12 +28,12 @@ const GoalRoomDashboardTodo = ({
             </ToolTip>
           </S.TitleWrapper>
 
-          <DialogTrigger asChild>
+          <Dialog.Trigger asChild>
             <button>
               <span>전체보기</span>
               <SVGIcon name='RightArrowIcon' aria-hidden='true' />
             </button>
-          </DialogTrigger>
+          </Dialog.Trigger>
         </div>
 
         <div>
@@ -50,14 +45,14 @@ const GoalRoomDashboardTodo = ({
         </div>
       </S.TodoWrapper>
 
-      <DialogBackdrop asChild>
+      <Dialog.BackDrop asChild>
         <S.DashboardBackDrop />
-      </DialogBackdrop>
+      </Dialog.BackDrop>
 
-      <DialogContent>
+      <Dialog.Content>
         <TodoModal isLeader={isLeader} />
-      </DialogContent>
-    </DialogBox>
+      </Dialog.Content>
+    </Dialog>
   );
 };
 

client/src/components/goalRoomDahsboardPage/goalRoomDashboardHeader/GoalRoomDashboardHeader.tsx

@@ -3,12 +3,7 @@ import SVGIcon from '@components/icons/SVGIcon';
 import * as S from './GoalRoomDashboardHeader.styles';
 import recruitmentStatus from '@constants/goalRoom/recruitmentStatus';
 import { GoalRoomBrowseResponse } from '@myTypes/goalRoom/remote';
-import {
-  DialogBackdrop,
-  DialogBox,
-  DialogContent,
-  DialogTrigger,
-} from '@components/_common/dialog/dialog';
+import { Dialog } from 'ck-util-components';
 import GoalRoomParticipantsListModal from '@components/goalRoomDahsboardPage/goalRoomDashboardHeader/goalRoomParticipantsListModal/GoalRoomParticipantsListModal';
 import isTodayOrAfter from '@utils/_common/isTodayOrAfter';
 import { useGoalRoomDashboardContext } from '@/context/goalRoomDashboardContext';
@@ -38,7 +33,7 @@ const GoalRoomDashboardHeader = ({
   };
 
   return (
-    <DialogBox>
+    <Dialog>
       <header>
         <S.GoalRoomDashboardTitle>{name}</S.GoalRoomDashboardTitle>
         {isStartButtonVisible && (
@@ -55,9 +50,9 @@ const GoalRoomDashboardHeader = ({
           <span>
             {currentMemberCount} / {limitedMemberCount} 명 참여 중
           </span>
-          <DialogTrigger asChild>
+          <Dialog.Trigger asChild>
             <S.LabelButton>전체 참여인원 보기</S.LabelButton>
-          </DialogTrigger>
+          </Dialog.Trigger>
         </S.GoalRoomLabel>
         <S.GoalRoomLabel>
           <SVGIcon name='CalendarIcon' />
@@ -67,14 +62,14 @@ const GoalRoomDashboardHeader = ({
         </S.GoalRoomLabel>
       </header>
 
-      <DialogBackdrop asChild>
+      <Dialog.BackDrop asChild>
         <S.ModalBackdrop />
-      </DialogBackdrop>
+      </Dialog.BackDrop>
 
-      <DialogContent>
+      <Dialog.Content>
         <GoalRoomParticipantsListModal />
-      </DialogContent>
-    </DialogBox>
+      </Dialog.Content>
+    </Dialog>
   );
 };
 

client/src/components/goalRoomDahsboardPage/goalRoomUserRanking/GoalRoomUserRanking.tsx

@@ -5,12 +5,7 @@ import { GoalRoomDashboardContentParams } from '@components/goalRoomDahsboardPag
 import podiumImg from '@assets/images/podium.png';
 import podiumImgAV from '@assets/images/podium.avif';
 import { useUserInfoContext } from '@components/_providers/UserInfoProvider';
-import {
-  DialogBackdrop,
-  DialogBox,
-  DialogContent,
-  DialogTrigger,
-} from '@components/_common/dialog/dialog';
+import { Dialog } from 'ck-util-components';
 import SVGIcon from '@components/icons/SVGIcon';
 import GoalRoomRankingModal from '@components/goalRoomDahsboardPage/goalRoomUserRanking/goalRoomRankingModal/GoalRoomRankingModal';
 import ToolTip from '@components/_common/toolTip/ToolTip';
@@ -33,7 +28,7 @@ const GoalRoomUserRanking = () => {
     ) + 1;
 
   return (
-    <DialogBox>
+    <Dialog>
       <S.CalenderWrapper>
         <div>
           <h2>모임 유저 랭킹</h2>
@@ -43,12 +38,12 @@ const GoalRoomUserRanking = () => {
             </p>
           </ToolTip>
 
-          <DialogTrigger asChild>
+          <Dialog.Trigger asChild>
             <button aria-labelledby='유저 랭킹 전체보기'>
               <span>전체보기</span>
               <SVGIcon name='RightArrowIcon' aria-hidden='true' />
             </button>
-          </DialogTrigger>
+          </Dialog.Trigger>
         </div>
         <S.PodiumWrapper>
           <picture>
@@ -84,13 +79,13 @@ const GoalRoomUserRanking = () => {
           )}
         </S.PodiumWrapper>
       </S.CalenderWrapper>
-      <DialogBackdrop asChild>
+      <Dialog.BackDrop asChild>
         <S.ModalBackdrop />
-      </DialogBackdrop>
-      <DialogContent>
+      </Dialog.BackDrop>
+      <Dialog.Content>
         <GoalRoomRankingModal userRanking={goalRoomParticipants} />
-      </DialogContent>
-    </DialogBox>
+      </Dialog.Content>
+    </Dialog>
   );
 };
 

client/src/components/goalRoomListPage/goalRoomDetail/GoalRoomDetailDialog.tsx

@@ -1,9 +1,4 @@
-import {
-  DialogBackdrop,
-  DialogBox,
-  DialogContent,
-  DialogTrigger,
-} from '@components/_common/dialog/dialog';
+import { Dialog } from 'ck-util-components';
 import * as S from './goalRoomDetailDialog.styles';
 import GoalRoomDetailDialogContent from './GoalRoomDetailDialogContent';
 
@@ -13,17 +8,17 @@ type GoalRoomDetailDialogProps = {
 
 const GoalRoomDetailDialog = ({ goalRoomId }: GoalRoomDetailDialogProps) => {
   return (
-    <DialogBox>
-      <DialogTrigger asChild>
+    <Dialog>
+      <Dialog.Trigger asChild>
         <S.DetailButton>자세히 보기</S.DetailButton>
-      </DialogTrigger>
-      <DialogBackdrop asChild>
+      </Dialog.Trigger>
+      <Dialog.BackDrop asChild>
         <S.BackDrop />
-      </DialogBackdrop>
-      <DialogContent>
+      </Dialog.BackDrop>
+      <Dialog.Content>
         <GoalRoomDetailDialogContent goalRoomId={goalRoomId} />
-      </DialogContent>
-    </DialogBox>
+      </Dialog.Content>
+    </Dialog>
   );
 };