deploy: 1차 스프린트 배포 (2) (#60)

* style : 전역 디자인 시스템 세팅 * style : 전역 디자인 시스템 세팅 * chore : 이슈 템플릿 수정 * refactor: build-test.yml 파일 수정 (#14) - node_modules 캐싱 기능 추가 - main, dev 브랜치 push, PR 시 빌드 테스트 돌아가도록 수정 Co-authored-by: wukddang <[email protected]> * feature: deploy.yml 파일 추가 (#15) * feature: deploy.yml 파일 추가 - main 브랜치에 push할 때 S3로 파일 업로드 * fix: pre-push 코드 수정 * fix: deploy.yml 파일 수정 - build폴더가 아닌 dist 폴더로 수정 --------- Co-authored-by: wukddang <[email protected]> * [Style] 모바일 레이아웃 작업 (#19) * style : 모바일 레이아웃 작업 * chore : 이슈, pr 템플릿 docs 수정 * style: HeroImage, AlertText 공통 컴포넌트 제작 (#24) * style: HeroImage 추가 * style: AlertText * style: Input 공통 컴포넌트 (#26) * style: HeroImage 추가 * style: AlertText * style: Input * feature: Button 공통 컴포넌트 제작 (#20) * feature: 네이버, 카카오 아이콘 컴포넌트 추가 * feature: NormalButton 컴포넌트 추가 * feature: palette, typo 스타일 수정 * feature: Divider, Text 공통 컴포넌트 추가 * feature: IconButtons 추가 - 관심사, 네이버, 카카오, 특정 주제, 랜덤 매칭 버튼 * feature: Button 컴포넌트 사용법 + timeStamp 유틸 함수 추가 * feature: RandomMatchingJoin 버튼 추가 --------- Co-authored-by: wukddang <[email protected]> * style : flexbox 컴포넌트 제작 (#32) * style : spacing 컴포넌트 생성 (#33) * [Feature] mock service worker settings (#29) * deploy: 초기 배포 (#23) * style : 전역 디자인 시스템 세팅 * style : 전역 디자인 시스템 세팅 * chore : 이슈 템플릿 수정 * refactor: build-test.yml 파일 수정 (#14) - node_modules 캐싱 기능 추가 - main, dev 브랜치 push, PR 시 빌드 테스트 돌아가도록 수정 Co-authored-by: wukddang <[email protected]> * feature: deploy.yml 파일 추가 (#15) * feature: deploy.yml 파일 추가 - main 브랜치에 push할 때 S3로 파일 업로드 * fix: pre-push 코드 수정 * fix: deploy.yml 파일 수정 - build폴더가 아닌 dist 폴더로 수정 --------- Co-authored-by: wukddang <[email protected]> * [Style] 모바일 레이아웃 작업 (#19) * style : 모바일 레이아웃 작업 * chore : 이슈, pr 템플릿 docs 수정 --------- Co-authored-by: judahhh <[email protected]> Co-authored-by: wukddang <[email protected]> * chore : mock service worker 설치 및 세팅 * chore : mock service worder setting --------- Co-authored-by: Changuk Woo <[email protected]> Co-authored-by: wukddang <[email protected]> * style: BottomSheet 컴포넌트 제작 (#34) * feature: Timer 컴포넌트 추가 + d3.js 라이브러리 설치 * feature: BottomSheet 컴포넌트 추가 * feature: RandomMatchingJoinButton props 수정 * feature: framer-motion 설치 + 애니메이션 효과 추가 * refactor: BottomSheet 폴더 변경 * refactor: isDarkMode 필수 타입으로 수정 * refactor: AlertText, HeroImage 폴더 구조 변경 * refactor: BottomSheet 컴포넌트 분리 * feature: Avatar 컴포넌트 제작 * refactor: RandomMatchingSheet 컴포넌트 이벤트 props 추가 * fix: package-lock.json 파일 오류 수정 --------- Co-authored-by: wukddang <[email protected]> * [Style/] navigation bar 컴포넌트 제작 (#37) * style : 네비게이션 바 디자인 * style : 네비게이션 바 디자인 및 라우팅 처리 * fix : 프로필 이미지를 Avatar 컴포넌트를 이용하도록 수정 * chore : 타입 에러 해결 * chore : 홈 페이지에 네비게이션 바 예시 제거 * style: CountNumber 공통 컴포넌트 제작 (#38) * style: CountNumber * feat: Input Wrapper 추가. * chore : CountNumber 폴더 구조 변경 * style: InputTimer 공통 컴포넌트 제작 (#41) * style: CountNumber * feat: Input Wrapper 추가. * style: InputTimer 제작 * style : 로딩 컴포넌트 제작 (#47) * style: WhiteSelectorButton, DarkSelectorButton 공통 컴포넌트 (#46) * style: whiteselectorButton * refactor: 불필요 주석 삭제 * style: darkselectorbutton * Update src/components/common/DarkSelectorButton/index.tsx * Update src/components/common/WhiteSelectorButton/index.tsx * fix: font-weight 오타 수정 --------- Co-authored-by: Changuk Woo <[email protected]> Co-authored-by: wukddang <[email protected]> * style: ListRow 컴포넌트 제작 (#43) * refactor: Style prefix 붙이도록 수정 * refactor: Divider 컴포넌트 수정 + 웹 폰트 수정 - Divider 컴포넌트가 확장성 있도록 수정 - 웹 폰트 오타 수정 * feature: AdminListRow 컴포넌트 추가 - 관리자 페이지에 사용되는 ListRow 컴포넌트 * feature: ProfileListRow 컴포넌트 추가 - 프로필 페이지에 사용되는 ListRow --------- Co-authored-by: wukddang <[email protected]> * style: �useToast 커스텀 훅 제작 (#48) * feature: useToast 커스텀 훅 추가 * refactor: RandomMatchingJoinButton으로 이름 변경 * feature: Layout 컴포넌트에 ToastContainer 설정 * refactor: NormalButton 컴포넌트 수정 - isDarkMode props 받도록 수정 * fix: RandomMatchingJoin.tsx 파일 오류 수정 * fix: 파일명 오류 수정 --------- Co-authored-by: wukddang <[email protected]> * [Style] Modal 컴포넌트 제작 (#52) * chore : zustand 설치 및 store 폴더 생성 * feat : 모달창 전역 상태 추가 * style : 모달창 컴포넌트 제작 * fix: package.json 쉼표 오류 * �fix: package-lock.json 쉼표 오류 * fix : 모달창 type 받아 분기 처리 * fix : type 에러 수정 * chore : 주석 제거 * fix: isDarkMode 옵셔널로 수정 --------- Co-authored-by: Changuk Woo <[email protected]> Co-authored-by: wukddang <[email protected]> * style: selector button 공통 컴포넌트 (#55) * refactor: white,dark selectorbutton erase * style: selectorbutton * style: selectorbutton re * style: Appbar, Card, GradationBackground, PageContainer 컴포넌트 추가 + Home 페이지 레이아웃 추가 (#57) * refactor: CountNumber, Input 위치 변경 * refactor: Avatar 컴포넌트 props 타입 수정 + tsdoc 추가 * feature: Tip 컴포넌트 추가 * feature: AppHeader 컴포넌트 추가 * refactor: IconButtonType 수정 + 클릭 효과 속성 추가 * feature: Profile 페이지 라우팅 추가 * refactor: AppHeader 높이값 받도록 수정 * style: typo, palette, Layout, global 파일 수정 * refactor: RandomMatchingSheet 동적으로 변하도록 수정 * refactor: NormalButton 폴더 변경 + 클릭 시 배경 변경 타입 추가 * refactor: tsdoc 추가 * feature: GradationBackground 컴포넌트 추가 * refactor: NavigationBar 라우팅 + position: sticky로 수정 * feature: PageContainer 컴포넌트 추가 * feature: AvatarGroup 컴포넌트 추가 * feature: Card 컴포넌트 추가 * feature: Home 페이지 레이아웃 추가 * refactor: tsdoc 추가 * fix: merge conflict 해결용 파일 추가 * fix: NormalButton 파일 에러 수정 --------- Co-authored-by: wukddang <[email protected]> * style: PageHeader 컴포넌트 제작 (#59) * feature: ExitIcon 컴포넌트 추가 * feature: BackChevron 컴포넌트 추가 * feature: PageHeader 컴포넌트 추가 * refactor: 사용하지 않는 코드 제거 * refactor: tsdoc 추가 * refactor: tsdoc 추가 + exitClick으로 props명 변경 * refactor: PageHeader border-bottom 수정 --------- Co-authored-by: wukddang <[email protected]> * �fix: main.tsx 오류 수정 --------- Co-authored-by: judahhh <[email protected]> Co-authored-by: wukddang <[email protected]> Co-authored-by: from1to2 <[email protected]>
coffee-meet · Oct 31, 2023 · 6fad26e · 6fad26e
1 parent 1dfa939
commit 6fad26e
Show file tree

Hide file tree

Showing 29 changed files with 1,066 additions and 37 deletions.
diff --git a/src/assets/icons/ExitIcon.tsx b/src/assets/icons/ExitIcon.tsx
@@ -0,0 +1,100 @@
+export type IconProps = {
+  isDarkMode?: boolean
+  exitClick?: () => void
+}
+
+/**
+ * @param isDarkMode - (Optional) 다크모드 여부
+ * @param exitClick - (Optional) 나가기 클릭 이벤트
+ */
+
+const ExitIcon = ({ isDarkMode, exitClick }: IconProps) => (
+  <span
+    style={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}
+    onClick={exitClick}
+  >
+    {isDarkMode ? (
+      <svg
+        width={'28'}
+        height={'32'}
+        viewBox={'0 0 28 32'}
+        fill={'none'}
+        xmlns={'http://www.w3.org/2000/svg'}
+      >
+        <path
+          d={
+            'M6.7085 12.3206V11.0891C6.7085 8.88304 6.7085 7.78003 7.42113 7.18064C8.13376 6.58125 9.22046 6.77024 11.3939 7.14822L15.1532 7.80202C17.529 8.2152 18.7169 8.42179 19.421 9.25895C20.1252 10.0961 20.1252 11.3018 20.1252 13.7133V22.2868C20.1252 24.6983 20.1252 25.904 19.421 26.7411C18.7169 27.5783 17.529 27.7849 15.1532 28.1981L11.3939 28.8519C9.22046 29.2298 8.13376 29.4188 7.42113 28.8194C6.7085 28.2201 6.7085 27.117 6.7085 24.911V23.9103'
+          }
+          stroke={'#FDFDFD'}
+          strokeWidth={'2'}
+        />
+        <path
+          d={
+            'M15.3335 18L16.1692 17.4508L16.5301 18L16.1692 18.5491L15.3335 18ZM3.8335 19C3.28121 19 2.8335 18.5522 2.8335 18C2.8335 17.4477 3.28121 17 3.8335 17V19ZM12.3359 11.6174L16.1692 17.4508L14.4978 18.5491L10.6645 12.7158L12.3359 11.6174ZM16.1692 18.5491L12.3359 24.3825L10.6645 23.2841L14.4978 17.4508L16.1692 18.5491ZM15.3335 19H3.8335V17H15.3335V19Z'
+          }
+          fill={'#FDFDFD'}
+        />
+        <path
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M16.4375 10.5007C16.4375 6.42219 19.5179 3.8833 20.0949 3.44343C20.149 3.40225 20.2229 3.40505 20.2729 3.45102C20.516 3.67449 21.2384 4.38551 21.9179 5.5213C21.9767 5.61967 22.1207 5.62218 22.1838 5.5265C22.3521 5.27136 22.4964 5.09115 22.5869 4.98587C22.6409 4.92305 22.7331 4.92199 22.7871 4.9848C23.1749 5.43569 24.5625 7.2743 24.5625 10.4999V10.5007C24.5625 11.1409 24.4574 11.7748 24.2533 12.3662C24.0491 12.9577 23.7499 13.4951 23.3726 13.9478C22.9954 14.4005 22.5475 14.7596 22.0547 15.0046C21.5618 15.2496 21.0335 15.3757 20.5 15.3757C19.9665 15.3757 19.4382 15.2496 18.9453 15.0046C18.4525 14.7596 18.0046 14.4005 17.6274 13.9478C17.2501 13.4951 16.9509 12.9577 16.7467 12.3662C16.5426 11.7748 16.4375 11.1409 16.4375 10.5007Z'
+          }
+          fill={'#F15555'}
+        />
+        <path
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M18.3125 12.7504C18.3125 12.7504 18.3125 12.7503 18.3125 12.7503C18.3125 10.7835 19.9841 9.10325 20.4048 8.71146C20.459 8.66104 20.541 8.66092 20.5951 8.71133C21.0115 9.09905 22.6548 10.7505 22.687 12.6926C22.6874 12.7117 22.6875 12.7309 22.6875 12.7501C22.6875 14.1999 21.7082 15.3751 20.5 15.3751C19.292 15.3751 18.3126 14.2 18.3125 12.7504C18.3125 12.7504 18.3125 12.7504 18.3125 12.7504Z'
+          }
+          fill={'#FEE500'}
+        />
+      </svg>
+    ) : (
+      <svg
+        width={'28'}
+        height={'32'}
+        viewBox={'0 0 28 32'}
+        fill={'none'}
+        xmlns={'http://www.w3.org/2000/svg'}
+      >
+        <path
+          d={
+            'M6.7085 12.3206V11.089C6.7085 8.883 6.7085 7.77999 7.42113 7.1806C8.13376 6.58121 9.22046 6.7702 11.3939 7.14818L15.1532 7.80198C17.529 8.21516 18.7169 8.42176 19.421 9.25891C20.1252 10.0961 20.1252 11.3018 20.1252 13.7133V22.2868C20.1252 24.6982 20.1252 25.9039 19.421 26.7411C18.7169 27.5782 17.529 27.7848 15.1532 28.198L11.3939 28.8518C9.22046 29.2298 8.13376 29.4188 7.42113 28.8194C6.7085 28.22 6.7085 27.117 6.7085 24.911V23.9103'
+          }
+          stroke={'#33363B'}
+          strokeWidth={'2'}
+        />
+        <path
+          d={
+            'M15.3335 18L16.1692 17.4508L16.5301 18L16.1692 18.5492L15.3335 18ZM3.8335 19C3.28121 19 2.8335 18.5523 2.8335 18C2.8335 17.4477 3.28121 17 3.8335 17V19ZM12.3359 11.6175L16.1692 17.4508L14.4978 18.5492L10.6645 12.7158L12.3359 11.6175ZM16.1692 18.5492L12.3359 24.3825L10.6645 23.2842L14.4978 17.4508L16.1692 18.5492ZM15.3335 19H3.8335V17H15.3335V19Z'
+          }
+          fill={'#33363B'}
+        />
+        <path
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M16.4375 10.5007C16.4375 6.42221 19.5179 3.88331 20.0949 3.44345C20.149 3.40227 20.2229 3.40506 20.2729 3.45103C20.516 3.67451 21.2384 4.38552 21.9179 5.52132C21.9767 5.61968 22.1207 5.6222 22.1838 5.52651C22.3521 5.27138 22.4964 5.09117 22.5869 4.98589C22.6409 4.92306 22.7331 4.92201 22.7871 4.98482C23.1749 5.43571 24.5625 7.27431 24.5625 10.4999V10.5007C24.5625 11.1409 24.4574 11.7748 24.2533 12.3663C24.0491 12.9577 23.7499 13.4951 23.3726 13.9478C22.9954 14.4005 22.5475 14.7596 22.0547 15.0046C21.5618 15.2496 21.0335 15.3757 20.5 15.3757C19.9665 15.3757 19.4382 15.2496 18.9453 15.0046C18.4525 14.7596 18.0046 14.4005 17.6274 13.9478C17.2501 13.4951 16.9509 12.9577 16.7467 12.3663C16.5426 11.7748 16.4375 11.1409 16.4375 10.5007Z'
+          }
+          fill={'#F15555'}
+        />
+        <path
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M18.3125 12.7503C18.3125 12.7503 18.3125 12.7503 18.3125 12.7503C18.3125 10.7835 19.9841 9.1032 20.4048 8.71141C20.459 8.66099 20.541 8.66086 20.5951 8.71128C21.0115 9.09899 22.6548 10.7504 22.687 12.6925C22.6874 12.7116 22.6875 12.7308 22.6875 12.7501C22.6875 14.1998 21.7082 15.3751 20.5 15.3751C19.292 15.3751 18.3126 14.2 18.3125 12.7503C18.3125 12.7503 18.3125 12.7503 18.3125 12.7503Z'
+          }
+          fill={'#FEE500'}
+        />
+      </svg>
+    )}
+  </span>
+)
+
+export default ExitIcon
diff --git a/src/components/common/AppHeader/index.tsx b/src/components/common/AppHeader/index.tsx
@@ -0,0 +1,100 @@
+import styled from '@emotion/styled'
+import { BiSolidMoon } from 'react-icons/bi'
+import { RiSunFill } from 'react-icons/ri'
+import { useNavigate } from 'react-router-dom'
+
+import Avatar from '@/components/common/Avatar'
+import { Text } from '@/components/common/Text'
+import { palette } from '@/styles/palette'
+
+import { FlexBox } from '../Flexbox'
+
+const StyleAppHeader = styled.div<{ height?: string }>`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: ${({ height }) => height};
+  text-align: center;
+  padding: 6.5% 5% 7%;
+`
+
+type AppHeaderProps = {
+  nickname: string
+  isDarkMode: boolean
+  height?: string
+}
+
+/**
+ * @param nickname - 유저 닉네임
+ * @param isDarkMode - 다크모드 여부
+ * @param height - 컴포넌트 높이
+ */
+
+const AppHeader = ({ nickname, isDarkMode, height }: AppHeaderProps) => {
+  const navigate = useNavigate()
+  const moveFromAppHeader = (path: string) => {
+    navigate(`/${path}`)
+  }
+
+  return (
+    <StyleAppHeader height={height}>
+      <FlexBox
+        justify={'space-between'}
+        style={{
+          marginBottom: '26px',
+        }}
+      >
+        <Avatar
+          width={49}
+          height={49}
+          imgUrl={''}
+          margin={'0'}
+          onClick={() => {
+            moveFromAppHeader('profile')
+          }}
+        />
+        {isDarkMode ? (
+          <RiSunFill
+            size={'20px'}
+            style={{
+              color: palette.WHITE,
+            }}
+          />
+        ) : (
+          <BiSolidMoon
+            size={'20px'}
+            style={{
+              color: palette.DARK_WHITE,
+            }}
+          />
+        )}
+      </FlexBox>
+      <FlexBox align={'flex-end'}>
+        <Text
+          font={'Body_24'}
+          fontWeight={600}
+          letterSpacing={-0.5}
+          style={{
+            color: isDarkMode ? palette.WHITE : palette.DARK_WHITE,
+            marginRight: 5,
+          }}
+        >
+          {nickname}
+        </Text>
+        <Text
+          font={'Body_18'}
+          fontWeight={600}
+          letterSpacing={-0.5}
+          style={{
+            color: isDarkMode ? palette.WHITE : palette.DARK_WHITE,
+          }}
+        >
+          {'님, 안녕하세요! 오늘도 즐거운 커피밋! ☕️'}
+        </Text>
+      </FlexBox>
+    </StyleAppHeader>
+  )
+}
+
+export default AppHeader
diff --git a/src/components/common/Avatar/index.tsx b/src/components/common/Avatar/index.tsx
@@ -1,10 +1,15 @@
 import styled from '@emotion/styled'
 
+
+import defaultProfileImage from '@/assets/images/defaultProfileImage.png' // 이미지 import
+
 type AvatarProps = {
-  width: number
-  height: number
+  width: number | string
+  height: number | string
   imgUrl: string
   margin: string
+  onClick?: () => void
+  border?: string
   shadow?: boolean
 }
 
@@ -17,12 +22,39 @@ const StyledAvatar = styled.div<AvatarProps>`
   background-position: center center;
   border-radius: 50%; // 원 형태로 만들기 위함
   margin: ${(props) => `${props.margin}px`};
+  border: ${(props) => (props.border ? props.border : 'none')};
   box-shadow: ${(props) => (props.shadow ? '0px 0px 10px rgba(0, 0, 0, 0.25)' : 'none')};
 `
 
-const Avatar: React.FC<AvatarProps> = ({ width, height, imgUrl, margin = '0', shadow = false }) => {
+/**
+ * `Avatar` component for displaying profile images.
+ * @param width - 아바타의 너비 (픽셀 또는 유효한 CSS 단위).
+ * @param height - 아바타의 높이 (픽셀 또는 유효한 CSS 단위).
+ * @param imgUrl - 아바타의 이미지 URL. 기본 이미지는 `defaultProfileImage`이다.
+ * @param margin - 아바타의 마진 (픽셀 또는 유효한 CSS 단위).
+ * @param onClick - (Optional) 클릭 이벤트.
+ * @param border - (Optional) 아바타의 테두리. 기본 값은 `none`이다.
+ * @param shadow - (Optional) 아바타의 그림자. 기본 값은 `false`이다.
+ */
+const Avatar = ({
+  width,
+  height,
+  imgUrl,
+  margin = '0',
+  onClick,
+  border,
+  shadow = false,
+}: AvatarProps) => {
   return (
-    <StyledAvatar width={width} height={height} imgUrl={imgUrl} shadow={shadow} margin={margin} />
+    <StyledAvatar
+      width={width}
+      height={height}
+      imgUrl={!imgUrl ? defaultProfileImage : imgUrl}
+      shadow={shadow}
+      margin={margin}
+      border={border}
+      onClick={onClick}
+    />
   )
 }
 

diff --git a/src/components/common/BackChevron/index.tsx b/src/components/common/BackChevron/index.tsx
@@ -0,0 +1,62 @@
+import styled from '@emotion/styled'
+import { BsChevronLeft } from 'react-icons/bs'
+
+import { palette } from '@/styles/palette'
+
+const StyleBackChevron = styled.div<BackChevronProps>`
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ hasBackground, isDarkMode }) =>
+    isDarkMode
+      ? hasBackground
+        ? `${palette.GRAY600}`
+        : 'transparent'
+      : hasBackground
+      ? `${palette.WHITE}`
+      : 'transparent'};
+  border: ${({ hasBackground, isDarkMode }) =>
+    isDarkMode
+      ? hasBackground
+        ? `1px solid ${palette.GRAY500}`
+        : `1px solid ${palette.DARK_TERTIARY}`
+      : hasBackground
+      ? `1px solid ${palette.GRAY300}`
+      : `1px solid ${palette.TERTIARY}`};
+`
+
+type BackChevronProps = {
+  hasBackground?: boolean
+  isDarkMode?: boolean
+  prevClick?: () => void
+}
+
+/**
+ * @param hasBackground - (Optional) 배경색 여부
+ * @param isDarkMode - (Optional) 다크모드 여부
+ * @param prevClick - (Optional) 뒤로가기 클릭 이벤트
+ */
+
+const BackChevron = ({ hasBackground, isDarkMode, prevClick }: BackChevronProps) => {
+  return (
+    <StyleBackChevron hasBackground={hasBackground} isDarkMode={isDarkMode} onClick={prevClick}>
+      <BsChevronLeft
+        size={20}
+        style={{
+          color: isDarkMode
+            ? hasBackground
+              ? `${palette.DARK_WHITE}`
+              : `${palette.DARK_WHITE}`
+            : hasBackground
+            ? `${palette.BLACK}`
+            : `${palette.WHITE}`,
+        }}
+      />
+    </StyleBackChevron>
+  )
+}
+
+export default BackChevron
diff --git a/src/components/common/BottomSheet/RandomMatchingSheet.tsx b/src/components/common/BottomSheet/RandomMatchingSheet.tsx
@@ -16,7 +16,7 @@ const Background = styled.div`
   display: flex;
   justify-content: center;
   align-items: flex-end;
-  overflow-y: hidden;
+  position: absolute;
 `
 
 const BottomContentWrapper = styled(motion.div)<{
@@ -25,7 +25,7 @@ const BottomContentWrapper = styled(motion.div)<{
   width: 100%;
   display: flex;
   flex-direction: column;
-  height: 378px;
+  height: 400px;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   background-color: ${({ isDarkMode }) => (isDarkMode ? palette.GRAY700 : palette.WHITE)};
@@ -86,13 +86,13 @@ const RandomMatchingSheet = ({
 
   const slideUp = {
     hidden: { y: '100%', opacity: 0 },
-    visible: { y: '0%', opacity: 1, transition: { type: 'spring', damping: 15, stiffness: 100 } },
+    visible: { y: '22px', opacity: 1, transition: { type: 'spring', damping: 15, stiffness: 100 } },
     partiallyVisible: {
       y: '85%',
       opacity: 1,
       transition: { type: 'spring', damping: 15, stiffness: 100 },
     },
-    exit: { y: '100%', opacity: 0, transition: { type: 'spring', damping: 20, stiffness: 100 } },
+    exit: { y: '100%', opacity: 0, transition: { type: 'spring', damping: 15, stiffness: 100 } },
   }
   return (
     <AnimatePresence>