Merge pull request #59 from SOPT-all/design/reserve-seat/#55

[Design] 좌석표 구현 (좌석 선택 뷰)

Lotte-Cinema/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",

Lotte-Cinema/src/assets/svg/BtnSeatDefaultLarge.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from 'react';
+
+interface SvgSeatsProps extends SVGProps<SVGSVGElement> {
+  seat: string;
+}
+
+const SvgBtnSeatDefaultLarge = ({ seat, ...props }: SvgSeatsProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 28 21" {...props}>
+    <path fill="#1EAFFD" d="M0 8a8 8 0 0 1 8-8h12a8 8 0 0 1 8 8v10a3 3 0 0 1-3 3H0z" />
+    <path fill="#fff" d="M9 3h10v1H9z" />
+    <text x="50%" y="60%" dominantBaseline="middle" textAnchor="middle" fontSize="10" fill="#ffffff">
+      {seat}
+    </text>
+  </svg>
+);
+export default SvgBtnSeatDefaultLarge;

Lotte-Cinema/src/assets/svg/index.ts

@@ -1,15 +1,23 @@
+
+export { default as BtnSeatDefaultLarge } from './BtnSeatDefaultLarge';
+
+export { default as BtnXsmall } from './BtnXsmall';
 export { default as IcAge1216 } from './IcAge1216';
 export { default as IcAge1916 } from './IcAge1916';
 export { default as IcAgeAll16 } from './IcAgeAll16';
-export { default as IcArrowDown20 } from './IcArrowDown20';
 export { default as IcArrowLeftBlack24 } from './IcArrowLeftBlack24';
 export { default as IcArrowRightWhite10 } from './IcArrowRightWhite10';
-export { default as IcArrowTop20 } from './IcArrowTop20';
 export { default as IcCloseGray1414 } from './IcCloseGray1414';
-export { default as IcHomeBlack24 } from './IcHomeBlack24';
-export { default as BtnXsmall } from './BtnXsmall';
 
+export { default as IcCloseGrayTemp } from './IcCloseGrayTemp';
 export { default as IcEntrance10 } from './IcEntrance10';
+export { default as IcHomeBlack24 } from './IcHomeBlack24';
+
+
+export { default as IcArrowDown20 } from './IcArrowDown20';
+
+export { default as IcArrowTop20 } from './IcArrowTop20';
+
 export { default as IcSeatDisabled10 } from './IcSeatDisabled10';
 export { default as IcSeatRecliner10 } from './IcSeatRecliner10';
 export { default as IcTicketBlack32 } from './IcTicketBlack32';
@@ -18,4 +26,3 @@ export { default as ImgLpayLogo } from './ImgLpayLogo';
 export { default as ImgPaymentComplete } from './ImgPaymentComplete';
 export { default as ImgPosterSmallAmazonhms } from './ImgPosterSmallAmazonhms';
 
-export { default as IcCloseGrayTemp } from './IcCloseGrayTemp';

Lotte-Cinema/src/components/commons/header/Header.tsx

@@ -36,7 +36,10 @@ const S = {
     z-index: 1;
     width: 100%;
     display: flex;
-    gap: 21%;
+
+    gap: 4rem;
+    width: 100%;
+
     align-items: center;
     height: 5rem;
     padding: 1.3rem 12rem 1.3rem 1.4rem;

Lotte-Cinema/src/components/seatReservation/ModalWrapper.tsx

@@ -5,7 +5,6 @@ import { createPortal } from 'react-dom';
 
 interface ModalWrapperProps {
   children: ReactNode;
-  backdrop?: boolean;
 }
 
 export interface ModalWrapperRef {

Lotte-Cinema/src/components/seatReservation/SeatReserveInfo.tsx

@@ -46,6 +46,9 @@ const S = {
     display: flex;
     flex-direction: column;
     width: 100%;
+
+    background-color: ${({ theme }) => theme.colors.WHITE100};
+
   `,
   SeatTypeInfo: styled.div`
     display: flex;

Lotte-Cinema/src/components/seatReservation/SeatReservePayment.tsx

@@ -35,6 +35,9 @@ const S = {
     width: 100%;
     height: 11.2rem;
     padding: 1.6rem 1.7rem;
+
+    z-index: 1;
+
     background-color: ${({ theme }) => theme.colors.GRAY01};
   `,
   TotalPriceWrapper: styled.div`

Lotte-Cinema/src/components/seatReservation/SeatTableBody.tsx

@@ -0,0 +1,87 @@
+import styled from '@emotion/styled';
+
+import { useEffect, useRef } from 'react';
+
+import { BtnSeatDefaultLarge } from '@/assets/svg';
+
+import { SEAT_INFO, SEAT_ROWS } from '@/constants';
+
+const SeatTableBody = () => {
+  const seatTableWrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const wrapper = seatTableWrapperRef.current;
+    if (wrapper) {
+      wrapper.scrollLeft = (wrapper.scrollWidth - wrapper.clientWidth) / 2;
+    }
+  }, []);
+
+  return (
+    <S.SeatTableWrapper ref={seatTableWrapperRef}>
+      <S.SeatTableContainer>
+        <S.ScreenComment>
+          <p>S</p>
+          <p>C</p>
+          <p>R</p>
+          <p>E</p>
+          <p>E</p>
+          <p>N</p>
+        </S.ScreenComment>
+        <S.SeatTableBody>
+          {SEAT_ROWS.map((row) => (
+            <S.SeatRowWrapper key={row}>
+              {SEAT_INFO.filter((seat) => seat.startsWith(row)).map((seat) => (
+                <BtnSeatDefaultLarge
+                  key={seat}
+                  width={'2.8rem'}
+                  seat={seat}
+                  style={{
+                    marginRight: [2, 11].includes(parseInt(seat.slice(1))) ? '2.8rem' : '0',
+                    cursor: 'pointer',
+                  }}
+                />
+              ))}
+            </S.SeatRowWrapper>
+          ))}
+        </S.SeatTableBody>
+      </S.SeatTableContainer>
+    </S.SeatTableWrapper>
+  );
+};
+
+export default SeatTableBody;
+
+const S = {
+  SeatTableWrapper: styled.div`
+    height: 100%;
+    overflow: scroll;
+    background-color: ${({ theme }) => theme.colors.BG_THEATER};
+  `,
+  SeatTableContainer: styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 59rem;
+    margin: 0 auto;
+    background-color: ${({ theme }) => theme.colors.BG_THEATER};
+  `,
+  ScreenComment: styled.div`
+    display: flex;
+    justify-content: center;
+    gap: 1.4rem;
+    margin-top: 12rem;
+    margin-bottom: 4.4rem;
+    ${({ theme }) => theme.typographies.n_head02_reg};
+    background-color: ${({ theme }) => theme.colors.BG_THEATER};
+    color: ${({ theme }) => theme.colors.GRAY10};
+  `,
+
+  SeatTableBody: styled.div`
+    padding: 0rem 4rem;
+    background-color: ${({ theme }) => theme.colors.BG_THEATER};
+  `,
+  SeatRowWrapper: styled.div`
+    display: flex;
+    column-gap: 0.7rem;
+    margin-bottom: 0.4rem;
+  `,
+};

Lotte-Cinema/src/constants/index.ts

@@ -1,3 +1,7 @@
+
+import { SEAT_INFO, SEAT_ROWS } from '@/constants/seats';
+
 import { THEATER_TABS } from './tabs';
 
-export { THEATER_TABS };
+export { THEATER_TABS, SEAT_INFO, SEAT_ROWS };
+

Lotte-Cinema/src/constants/seats.ts

@@ -0,0 +1,22 @@
+export const SEAT_INFO: string[] = (() => {
+  const rows = ['B', 'C', 'D', 'E', 'F', 'G'] as const;
+  const seatsPerRow: Record<(typeof rows)[number], number> = {
+    B: 11,
+    C: 13,
+    D: 13,
+    E: 12,
+    F: 13,
+    G: 13,
+  };
+
+  const seatInfo: string[] = [];
+  rows.forEach((row) => {
+    for (let i = 1; i <= seatsPerRow[row]; i++) {
+      seatInfo.push(`${row}${i}`);
+    }
+  });
+
+  return seatInfo;
+})();
+
+export const SEAT_ROWS = ['B', 'C', 'D', 'E', 'F', 'G'];

Lotte-Cinema/src/constants/tabs.ts

@@ -1,10 +1,12 @@
 export const THEATER_TABS = [
-	{
-		id: 1,
-		name: '일반관',
-	},
-	{
-		id: 2,
-		name: '스페셜관',
-	},
+
+  {
+    id: 1,
+    name: '일반관',
+  },
+  {
+    id: 2,
+    name: '스페셜관',
+  },
+
 ];

Lotte-Cinema/src/pages/SeatReservation/SeatReservation.tsx

@@ -4,12 +4,20 @@ import Header from '@/components/commons/header/Header';
 import MobileLayout from '@/components/mobileLayout/MobileLayout';
 import SeatReserveInfo from '@/components/seatReservation/SeatReserveInfo';
 
+import SeatTableBody from '@/components/seatReservation/SeatTableBody';
+
+
 const SeatReservation = () => {
   return (
     <MobileLayout>
       <S.SeatReserveLayout>
-        <Header title={'좌석 선택'} />
-        <SeatReserveInfo />
+
+        <Header title="좌석 선택" />
+        <SeatTableBody />
+        <S.SeatReserveInfoWrapper>
+          <SeatReserveInfo />
+        </S.SeatReserveInfoWrapper>
+
       </S.SeatReserveLayout>
     </MobileLayout>
   );
@@ -23,6 +31,18 @@ const S = {
     width: 100%;
     height: 100%;
   `,
+
+  SeatReserveInfoWrapper: styled.div`
+    position: relative;
+
+    & > * {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  `,
+
 };
 
 export default SeatReservation;