Merge pull request #6 from PBTP/feat/reservationCard

Feat/reservation card

src/components/Layout/RootLayout/RootLayout.module.scss

@@ -1,3 +1,8 @@
+@import '@/styles/theme.scss';
+// 최상위
+.RootLayoutWrapper {
+  background-color: $gray100;
+}
 .RootLayout {
   padding: 16px 20px;
 }

src/components/Layout/RootLayout/RootLayout.tsx

@@ -13,9 +13,11 @@ const RootLayout = () => {
   const token = useTokenStore((state) => state.accessToken);
 
   return (
-    <div className={styles.RootLayout}>
-      <Outlet context={{ token } satisfies ContextType} />
-      {token && <BottomNavigation />}
+    <div className={styles.RootLayoutWrapper}>
+      <div className={styles.RootLayout}>
+        <Outlet context={{ token } satisfies ContextType} />
+        {token && <BottomNavigation />}
+      </div>
     </div>
   );
 };

src/components/Reservation/ReservationCard.module.scss

@@ -0,0 +1,63 @@
+@import '@/styles/theme.scss';
+
+.ReservationCardWrapper {
+  padding: 16px;
+  background-color: $white;
+  border-radius: 2px;
+  > .ReservationCardContent {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    > .ReservationStatusWrapper {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      > .ReservationStatusLine {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .ReservationDday {
+          border-radius: 30px;
+          background-color: $gray100;
+          color: $primary;
+          font-size: 11px;
+          font-weight: 500;
+          padding: 4px 8px;
+        }
+        .ReservationStatusText {
+          color: $primary;
+          font-size: 11px;
+          font-weight: 500;
+          &.Gray {
+            color: $gray400;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 예약자 전화번호 및 문자
+.ReservationInfo {
+  display: flex;
+  gap: 16px;
+}
+
+.ReservationPetInfo {
+  color: $black;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.ReservationLocation {
+  color: $gray400;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.ReservationDate {
+  color: $primary;
+  font-size: 15px;
+  font-weight: 600;
+}

src/components/Reservation/ReservationCard.tsx

@@ -0,0 +1,32 @@
+import { MessageIcon, PhoneIcon } from '@/icons/icon';
+import styles from './ReservationCard.module.scss'
+/**
+ * TODO: props로 예약자 정보를 받는다.
+ * @returns 
+ * 
+ */
+const ReservationCard = () => {
+  return (
+    <div className={styles.ReservationCardWrapper}>
+      <div className={styles.ReservationCardContent}>
+        <div className={styles.ReservationStatusWrapper}>
+          <div className={styles.ReservationStatusLine}>
+            <div className={styles.ReservationDday}>D-1</div>
+            <div className={styles.ReservationStatusText}>예약 확정</div>
+            <div>|</div>
+            <div className={`${styles.ReservationStatusText}  ${styles.Gray}`}>결제 완료</div>
+          </div>
+          <div className={styles.ReservationInfo}>
+            <MessageIcon width={24} height={24} />
+            <PhoneIcon width={24} height={24} />
+          </div>
+        </div>
+        <div className={styles.ReservationPetInfo}>알래스칸 말라뮤트 | 36kg</div>
+        <div className={styles.ReservationLocation}>서울 강남구</div>
+        <div className={styles.ReservationDate}>2024.04.06(토) 오후 1:00</div>
+      </div>
+    </div>
+  );
+}
+
+export default ReservationCard;

src/components/Reservation/ReservationStatusCard.module.scss

@@ -0,0 +1,49 @@
+@import '@/styles/theme.scss';
+
+// 외부 margin 대신 padding
+.ReservationStatusCardWrapper {
+  padding: 16px 0;
+  > .ReservationStatusCardContent {
+    padding: 16px 27px;
+    border-radius: 8px;
+    border: 1px solid $gray100;
+    background: $white;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    > .ReservationStatusCardLine {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    > .ReservationStatusCardTitle {
+      color: $black;
+      font-family: "Pretendard Variable";
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 22px; /* 137.5% */
+    }
+  }
+}
+
+.ReservationStatusCount {
+  color: $black;
+  text-align: center;
+  font-family: "Pretendard Variable";
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 30px; /* 136.364% */
+}
+
+.ReservationStatusText {
+  color: $gray1000;
+  text-align: center;
+  font-family: "Pretendard Variable";
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 18px; /* 138.462% */
+}

src/components/Reservation/ReservationStatusCard.tsx

@@ -0,0 +1,35 @@
+import { RefreshIcon } from '@/icons/icon';
+import styles from './ReservationStatusCard.module.scss';
+const ReservationStatusCard = () => {
+  return (
+    <div className={styles.ReservationStatusCardWrapper}>
+      <div className={styles.ReservationStatusCardContent}>
+        <div className={styles.ReservationStatusCardLine}>
+          <div className={styles.ReservationStatusCardTitle}>예약 현황</div>
+          <RefreshIcon width={16} height={16} />
+        </div>
+        {/* 각 예약별 카테고리 ex: 확정 대기, 오늘 확정 등등.. */}
+        <div className={styles.ReservationStatusCardLine}>
+          <div>
+            <div className={styles.ReservationStatusCount}>12</div>
+            <div className={styles.ReservationStatusText}>확정 대기</div>
+          </div>
+          <div>
+            <div className={styles.ReservationStatusCount}>5</div>
+            <div className={styles.ReservationStatusText}>오늘 확정</div>
+          </div>
+          <div>
+            <div className={styles.ReservationStatusCount}>2</div>
+            <div className={styles.ReservationStatusText}>오늘 이용</div>
+          </div>
+          <div>
+            <div className={styles.ReservationStatusCount}>1</div>
+            <div className={styles.ReservationStatusText}>오늘 취소</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ReservationStatusCard

src/components/Reservation/ReservationStatusToggle.module.scss

@@ -0,0 +1,13 @@
+@import '@/styles/theme.scss';
+
+.ReservationStatusToggleWrapper {
+  color: $white;
+  text-align: center;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 18px; /* 138.462% */
+  padding: 8px 16px;
+  background-color: $primary;
+  border-radius: 30px;
+}

src/components/Reservation/ReservationStatusToggle.tsx

@@ -0,0 +1,11 @@
+import styles from './ReservationStatusToggle.module.scss';
+
+type ReservationStatusToggleType = {
+  isDragging: boolean;
+}
+
+const ReservationStatusToggle = ({isDragging}:ReservationStatusToggleType) => {
+  return <div className={`${styles.ReservationStatusToggleWrapper} ${isDragging}`}>전체23</div>;
+}
+
+export default ReservationStatusToggle;

src/icons/icon/BellIcon.tsx

@@ -0,0 +1,8 @@
+import BellSvg from '@/assets/icon/bell.svg?react';
+import { IconProps } from '../types';
+
+const BellIcon = ({ width, height, className, onClick }: IconProps) => {
+  return <BellSvg className={className} width={width} height={height} onClick={onClick} />;
+};
+
+export default BellIcon;

src/icons/icon/MessageIcon.tsx

@@ -0,0 +1,8 @@
+import MessageSvg from '@/assets/icon/message.svg?react';
+import { IconProps } from '../types';
+
+const MessageIcon = ({ width, height, className, onClick }: IconProps) => {
+  return <MessageSvg className={className} width={width} height={height} onClick={onClick} />;
+};
+
+export default MessageIcon;

src/icons/icon/PhoneIcon.tsx

@@ -0,0 +1,8 @@
+import PhoneSvg from '@/assets/icon/phone.svg?react';
+import { IconProps } from '../types';
+
+const PhoneIcon = ({ width, height, className, onClick }: IconProps) => {
+  return <PhoneSvg className={className} width={width} height={height} onClick={onClick} />;
+};
+
+export default PhoneIcon;

src/icons/icon/RefreshIcon.tsx

@@ -0,0 +1,8 @@
+import RefreshSvg from '@/assets/icon/refresh.svg?react';
+import { IconProps } from '../types';
+
+const RefreshIcon = ({ width, height, className, onClick }: IconProps) => {
+  return <RefreshSvg className={className} width={width} height={height} onClick={onClick} />;
+};
+
+export default RefreshIcon;

src/icons/icon/index.ts

@@ -8,4 +8,8 @@ export { default as UnSelectedIcon } from './UnSelectedIcon';
 export { default as ArrowDownNoTail } from './ArrowDownNoTail';
 export { default as TargetIcon } from './TargetIcon';
 export { default as SearchIcon } from './SearchIcon';
-export { default as DeleteXIcon } from './DeleteXIcon'; 
+export { default as DeleteXIcon } from './DeleteXIcon';
+export { default as MessageIcon } from './MessageIcon'; 
+export { default as PhoneIcon } from './PhoneIcon'; 
+export { default as BellIcon } from './BellIcon'; 
+export { default as RefreshIcon } from './RefreshIcon';