[FE-Fix] 일정 확정하기 페이지 CSS 수정 (#258)

softeer5th · Feb 21, 2025 · 6afe3e5 · 6afe3e5
1 parent ec26be0
commit 6afe3e5
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 58 deletions.
diff --git a/frontend/src/features/discussion/ui/DiscussionConfirmCard/index.css.ts b/frontend/src/features/discussion/ui/DiscussionConfirmCard/index.css.ts
@@ -3,7 +3,9 @@ import { style } from '@vanilla-extract/css';
 import { vars } from '@/theme/index.css';
 
 export const modalContainerStyle = style({
-  height: '20rem',
+  position: 'static',
+  transform: 'translate(0, 0)',
+  zIndex: 0,
 });
 
 export const modalContentsStyle = style({

diff --git a/frontend/src/features/discussion/ui/DiscussionConfirmCard/index.tsx b/frontend/src/features/discussion/ui/DiscussionConfirmCard/index.tsx
@@ -18,32 +18,30 @@ import {
 const DiscussionConfirmCard = (
   { title, participantPictureUrls, ...badgeProps }: DiscussionConfirmResponse,
 ) => (
-  <>
-    <Modal
-      className={modalContainerStyle}
-      isOpen
-      subTitle={'확정된 일정'}
-      title={title}
-    >
-      <Modal.Contents className={modalContentsStyle}>
-        <BadgeContainer
-          endDateTime={new Date(badgeProps.sharedEventDto.endDateTime)}
-          location={badgeProps.meetingMethodOrLocation}
-          startDateTime={new Date(badgeProps.sharedEventDto.startDateTime)}
-        />
-        <Flex
-          align='center'
-          className={avatarWrapperStyle}
-          justify='flex-start'
-        >
-          <Avatar imageUrls={participantPictureUrls} size='lg' />
-        </Flex>
-      </Modal.Contents>
-      <Modal.Footer className={modalFooterStyle}>
-        <Buttons />
-      </Modal.Footer>
-    </Modal>
-  </>
+  <Modal
+    className={modalContainerStyle}
+    isOpen
+    subTitle={'확정된 일정'}
+    title={title}
+  >
+    <Modal.Contents className={modalContentsStyle}>
+      <BadgeContainer
+        endDateTime={new Date(badgeProps.sharedEventDto.endDateTime)}
+        location={badgeProps.meetingMethodOrLocation}
+        startDateTime={new Date(badgeProps.sharedEventDto.startDateTime)}
+      />
+      <Flex
+        align='center'
+        className={avatarWrapperStyle}
+        justify='flex-start'
+      >
+        <Avatar imageUrls={participantPictureUrls} size='lg' />
+      </Flex>
+    </Modal.Contents>
+    <Modal.Footer className={modalFooterStyle}>
+      <Buttons />
+    </Modal.Footer>
+  </Modal>
 );
 
 const Buttons = () => (

diff --git a/frontend/src/pages/DiscussionPage/DiscussionConfirmPage/index.css.ts b/frontend/src/pages/DiscussionPage/DiscussionConfirmPage/index.css.ts
@@ -2,22 +2,15 @@ import { style } from '@vanilla-extract/css';
 
 import { vars } from '@/theme/index.css';
 
-export const backdropStyle = style({
-  position: 'absolute',
+export const containerStyle = style({
+  position: 'fixed',
   top: 0,
   left: 0,
   bottom: 0,
   right: 0,
   backgroundColor: vars.color.Ref.Netural[50], 
 });
 
-export const containerStyle = style({
-  position: 'fixed',
-  transform: 'translate(-50%, -58%)',
-  top: '50%',
-  left: '50%',
-});
-
 export const titleStyle = style({
   paddingBottom: '1.063rem',
 });

diff --git a/frontend/src/pages/DiscussionPage/DiscussionConfirmPage/index.tsx b/frontend/src/pages/DiscussionPage/DiscussionConfirmPage/index.tsx
@@ -5,31 +5,28 @@ import type { DiscussionConfirmResponse } from '@/features/discussion/model';
 import DiscussionConfirmCard from '@/features/discussion/ui/DiscussionConfirmCard';
 import { vars } from '@/theme/index.css';
 
-import { backdropStyle, containerStyle, subtitleStyle, titleStyle } from './index.css';
+import { containerStyle, subtitleStyle, titleStyle } from './index.css';
 
 const DiscussionConfirmPage = ({ confirm }: { confirm: DiscussionConfirmResponse }) => (
-  <>
-    <div className={backdropStyle} />
-    <Flex
-      align='center'
-      className={containerStyle}
-      direction='column'
-      justify='center'
+  <Flex
+    align='center'
+    className={containerStyle}
+    direction='column'
+    justify='center'
+  >
+    <Text className={titleStyle}typo='h3'>일정이 확정되었어요!</Text>
+    <Text color={vars.color.Ref.Netural[600]} typo='b2M'>
+      일정 조율이 완료되었습니다.
+    </Text>
+    <Text
+      className={subtitleStyle}
+      color={vars.color.Ref.Netural[600]}
+      typo='b2M'
     >
-      <Text className={titleStyle}typo='h3'>일정이 확정되었어요!</Text>
-      <Text color={vars.color.Ref.Netural[600]} typo='b2M'>
-        일정 조율이 완료되었습니다.
-      </Text>
-      <Text
-        className={subtitleStyle}
-        color={vars.color.Ref.Netural[600]}
-        typo='b2M'
-      >
-        참여한 모든 인원의 개인 캘린더에 확정된 일정이 추가되었어요.
-      </Text>
-      <DiscussionConfirmCard {...confirm} />
-    </Flex>
-  </>
+      참여한 모든 인원의 개인 캘린더에 확정된 일정이 추가되었어요.
+    </Text>
+    <DiscussionConfirmCard {...confirm} />
+  </Flex>
 );
 
 export default DiscussionConfirmPage;