Merge pull request #91 from prgrms-web-devcourse/refactor/common/cour…

…ts-action-buttons

♻️  refactor: 공유, 채팅, 즐겨찾기, 지도 버튼 domain 공통 컴포넌트로 분리

src/components/Reservations/CompletedReservations/index.tsx

@@ -2,7 +2,8 @@ import { type } from "os";
 import React, { useState } from "react";
 import styled from "@emotion/styled";
 import Link from "next/link";
-import ShareButton from "@components/ShareButton";
+import { CourtItem } from "@components/domain";
+import { Spacer } from "@components/base";
 import Participants from "../Participants";
 
 interface ReserveList {
@@ -51,53 +52,52 @@ const CompletedReservations = () => {
   ];
 
   return (
-    <>
+    <Spacer gap="md" type="vertical">
       {DummyReserves.map(
         ({
           reservationId,
+          courtId,
           startTime,
           endTime,
           courtName,
           numberOfReservations,
           latitude,
           longitude,
         }) => (
-          <BorderDiv key={reservationId}>
-            <p>{courtName}</p>
-            <p>
-              {startTime.substr(0, 4)}년{startTime.substr(5, 2)}월
-              {startTime.substr(8, 2)}일
-            </p>
-            <p>
-              {startTime.substr(11, 5)} - {endTime.substr(11, 5)}
-            </p>
+          <ReservationItem key={reservationId}>
+            <Spacer gap={10} type="vertical">
+              <CourtItem.Header>{courtName}</CourtItem.Header>
+              <CourtItem.Datetime
+                startDatetime={startTime}
+                endDatetime={endTime}
+              />
+            </Spacer>
             <p>{numberOfReservations} / 6 명</p>
-            <Link href="/">
-              <button>예약 보기</button>
-            </Link>
-            <Participants />
-            <a
-              href={`https://map.kakao.com/?urlX=${latitude}&urlY=${longitude}&name=${courtName}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <button>카카오맵</button>
-            </a>
-            <button>즐겨찾기</button>
-            <ShareButton />
-            <Link href="/chat">
-              <button>채팅</button>
-            </Link>
-          </BorderDiv>
+            <Actions gap="xs">
+              <CourtItem.FavoritesToggle courtId={courtId} />
+              <CourtItem.ShareButton />
+              <CourtItem.ChatLink courtId={courtId} />
+              <CourtItem.KakaoMapLink
+                latitude={latitude}
+                longitude={longitude}
+                courtName={courtName}
+              />
+            </Actions>
+          </ReservationItem>
         )
       )}
-    </>
+    </Spacer>
   );
 };
 
-const BorderDiv = styled.div`
-  border: 1px solid;
-  margin-top: 30px;
+const ReservationItem = styled.div`
+  background-color: ${({ theme }) => theme.colors.white};
+  border-radius: ${({ theme }) => theme.borderRadiuses.md};
+  padding: 20px;
 `;
 
 export default CompletedReservations;
+
+const Actions = styled(Spacer)`
+  margin-top: ${({ theme }) => theme.gaps.sm};
+`;

src/components/Reservations/UpcomingReservations/index.tsx

@@ -1,8 +1,8 @@
-import { type } from "os";
 import React from "react";
 import styled from "@emotion/styled";
 import Link from "next/link";
-import ShareButton from "@components/ShareButton";
+import { CourtItem } from "@components/domain";
+import { Button, Spacer } from "@components/base";
 import Participants from "../Participants";
 import Loudspeaker from "../Loudspeaker";
 
@@ -21,11 +21,6 @@ interface ReserveList {
 
 type ReserveLists = ReserveList[];
 
-const BorderDiv = styled.div`
-  border: 1px solid;
-  margin-top: 30px;
-`;
-
 const UpcomingReservations = () => {
   const DummyReserve = [
     {
@@ -57,49 +52,52 @@ const UpcomingReservations = () => {
   ];
 
   return (
-    <>
+    <Spacer gap="md" type="vertical">
       {DummyReserve.map(
         ({
           reservationId,
+          courtId,
           startTime,
           endTime,
           courtName,
           numberOfReservations,
           latitude,
           longitude,
         }) => (
-          <BorderDiv key={reservationId}>
+          <ReservationItem key={reservationId}>
             <Loudspeaker reserve={{ startTime }} />
-            <p>{courtName}</p>
-            <p>
-              {startTime.substr(0, 4)}년{startTime.substr(5, 2)}월
-              {startTime.substr(8, 2)}일
-            </p>
-            <p>
-              {startTime.substr(11, 5)} - {endTime.substr(11, 5)}
-            </p>
+            <Spacer gap={10} type="vertical">
+              <CourtItem.Header>{courtName}</CourtItem.Header>
+              <CourtItem.Datetime
+                endDatetime={endTime}
+                startDatetime={startTime}
+              />
+            </Spacer>
             <p>{numberOfReservations} / 6 명</p>
-            <Link href="/">
-              <button>예약 보기</button>
-            </Link>
-            <Participants />
-            <a
-              href={`https://map.kakao.com/?urlX=${latitude}&urlY=${longitude}&name=${courtName}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <button>카카오맵</button>
-            </a>
-            <button>즐겨찾기</button>
-            <ShareButton />
-            <Link href="/chat">
-              <button>채팅</button>
-            </Link>
-          </BorderDiv>
+            <Actions gap="xs">
+              <CourtItem.FavoritesToggle courtId={courtId} />
+              <CourtItem.ShareButton />
+              <CourtItem.ChatLink courtId={courtId} />
+              <CourtItem.KakaoMapLink
+                latitude={latitude}
+                longitude={longitude}
+                courtName={courtName}
+              />
+            </Actions>
+          </ReservationItem>
         )
       )}
-    </>
+    </Spacer>
   );
 };
 
 export default UpcomingReservations;
+
+const ReservationItem = styled.div`
+  background-color: ${({ theme }) => theme.colors.white};
+  border-radius: ${({ theme }) => theme.borderRadiuses.md};
+  padding: 20px;
+`;
+const Actions = styled(Spacer)`
+  margin-top: ${({ theme }) => theme.gaps.sm};
+`;

src/components/base/Button/index.tsx

@@ -14,7 +14,7 @@ interface Props {
   block?: boolean;
   disabled?: boolean;
   style?: CSSProperties;
-  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
 }
 
 const Button: React.FC<Props> = ({
@@ -55,8 +55,8 @@ const fontSizeMap: { [key in Size]: string } = {
 const StyledButton = styled.button<Omit<Props, "children">>`
   ${({ theme, size, fullWidth, block }) => css`
     display: ${block ? "block" : "inline-block"};
-    width: ${fullWidth && "100%"};
-    padding: ${theme.buttonPaddings[size as Size]};
+    width: ${fullWidth ? "100%" : theme.buttonSizes[size as Size]};
+    padding: 0 ${theme.buttonRightLeftPaddings[size as Size]};
     background-color: ${theme.colors.gray900};
     color: ${theme.colors.white};
     font-size: ${theme.fontSizes[fontSizeMap[size as Size] as Size]};

src/components/base/Icon/index.tsx

@@ -4,7 +4,7 @@ import { css } from "@emotion/react";
 
 interface Props {
   name: FeatherIconNameType;
-  size?: "sm" | "md" | number;
+  size?: "sm" | "md" | "lg" | number;
   strokeWidth?: number;
   rotate?: number;
   color?: string;

src/components/base/IconButton/index.tsx

@@ -5,9 +5,11 @@ import Icon, { FeatherIconNameType } from "../Icon";
 interface Props {
   name: FeatherIconNameType;
   className?: string;
+  size: "sm" | "md" | "lg";
+  iconSize?: "sm" | "md" | "lg" | number;
   type?: "button" | "submit";
   iconColor?: string;
-  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
 }
 
 const IconButton = ({
@@ -16,24 +18,32 @@ const IconButton = ({
   iconColor,
   className,
   onClick,
+  size = "lg",
+  iconSize = "sm",
 }: Props) => {
   return (
-    <StyledIconButton className={className} type={type} onClick={onClick}>
-      <Icon name={name} color={iconColor} />
+    <StyledIconButton
+      className={className}
+      type={type}
+      onClick={onClick}
+      size={size}
+    >
+      <Icon name={name} color={iconColor} size={iconSize} />
     </StyledIconButton>
   );
 };
 
 export default IconButton;
 
-const StyledIconButton = styled.button`
+const StyledIconButton = styled.button<Pick<Props, "size">>`
   box-sizing: border-box;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: ${({ theme }) => theme.colors.white};
   border: 2px solid ${({ theme }) => theme.colors.gray100};
   border-radius: ${({ theme }) => theme.borderRadiuses.lg};
-  padding: ${({ theme }) => theme.iconButtonPadding};
+  width: ${({ theme, size }) => theme.buttonSizes[size]};
+  height: ${({ theme, size }) => theme.buttonSizes[size]};
   cursor: pointer;
 `;

src/components/base/IconToggle/index.tsx

@@ -11,7 +11,7 @@ interface Props {
 const IconToggle: React.FC<Props> = ({ name, checked, onChange }) => {
   return (
     <StyledIconToggleLabel>
-      <Icon name="star" fill={checked} />
+      <Icon name="star" fill={checked} size="sm" />
       <input type="checkbox" checked={checked} onChange={onChange} />
     </StyledIconToggleLabel>
   );

src/components/base/ModalSheet/index.tsx

@@ -16,17 +16,14 @@ const CustomSheet = styled(Sheet)`
     right: 0;
     margin: auto;
   }
-  .react-modal-sheet-content {
-    text-align: center;
-  }
 `;
 
 const ModalSheet: React.FC<Props> = ({ isOpen, onClose, children, onSnap }) => {
   return (
     <CustomSheet
       isOpen={isOpen}
       onClose={onClose}
-      snapPoints={[600 + 56, 300 + 56]}
+      snapPoints={[600 + 56, 270 + 56]}
       initialSnap={1}
       onSnap={onSnap}
     >

src/components/base/Text/index.tsx

@@ -12,6 +12,7 @@ interface Props {
   color?: string;
   mark?: boolean;
   code?: boolean;
+
   [x: string]: any;
 }
 

src/components/domain/CourtItem/Address.tsx

@@ -0,0 +1,11 @@
+import * as S from "./style";
+
+const Address: React.FC = ({ children }) => {
+  return (
+    <S.SubHeaderArea>
+      <S.AddressText>{children}</S.AddressText>
+    </S.SubHeaderArea>
+  );
+};
+
+export default Address;

src/components/domain/CourtItem/ChatLink.tsx

@@ -0,0 +1,17 @@
+import Link from "next/link";
+
+import { IconButton } from "@components/base";
+
+interface Props {
+  courtId: number;
+}
+
+const ChatButton: React.FC<Props> = ({ courtId }) => {
+  return (
+    <Link href={`/chat/courts/${courtId}`} passHref>
+      <IconButton name="message-square" />
+    </Link>
+  );
+};
+
+export default ChatButton;

src/components/domain/CourtItem/Datetime.tsx

@@ -0,0 +1,39 @@
+import { useMemo } from "react";
+
+import { Spacer, Text } from "@components/base";
+import * as S from "./style";
+
+const weekdays = ["일", "월", "화", "수", "목", "금", "토"] as const;
+
+interface Props {
+  startDatetime: string;
+  endDatetime: string;
+}
+
+const Datetime: React.FC<Props> = ({ startDatetime, endDatetime }) => {
+  const startDate = useMemo(() => new Date(startDatetime), [startDatetime]);
+  const endDate = useMemo(() => new Date(endDatetime), [endDatetime]);
+  return (
+    <S.SubHeaderArea>
+      <Spacer gap="xxs" type="vertical">
+        <Text strong>
+          {startDate.getFullYear()}년{" "}
+          {(startDate.getMonth() + 1).toString().padStart(2, "0")}월{" "}
+          {startDate.getDate().toString().padStart(2, "0")}일 (
+          <S.DayOfTheWeek index={startDate.getDay()}>
+            {weekdays[startDate.getDay()]}
+          </S.DayOfTheWeek>
+          )
+        </Text>
+        <Text strong>
+          {startDate.getHours().toString().padStart(2, "0")}:
+          {startDate.getMinutes().toString().padStart(2, "0")} -{" "}
+          {endDate.getHours().toString().padStart(2, "0")}:
+          {endDate.getMinutes().toString().padStart(2, "0")}
+        </Text>
+      </Spacer>
+    </S.SubHeaderArea>
+  );
+};
+
+export default Datetime;