feat: restaurant review component build

components/Blog/PostList/Item.tsx

@@ -46,7 +46,6 @@ const PostItem = ({
   postIndex,
 }: PostItemProps) => {
   const parsedDate = parseDate(date);
-
   return (
     <Link href={`/post/${filename}`} passHref>
       <Container

components/Guestbook/index.tsx

@@ -55,12 +55,12 @@ const Guestbook = () => {
           width={420}
           height={450}
           closeModal={closeCreateModal}
-          cancelText="취소하기"
-          confirmText="방명록 남기기"
+          leftText="취소하기"
+          rightText="방명록 남기기"
           leftButtonVariant={ModalCancelButtonVariant}
           rightButtonVariant={ModalConfirmButtonVariant}
-          onCancel={() => {}}
-          onConfirm={() => {}}
+          onRightButtonClick={() => {}}
+          onLeftButtonClick={() => {}}
         />
       )}
     </Container>

components/Restaurant/Detail/Rating.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+type Props = {};
+
+const Rating = (props: Props) => {
+  return <div>Rating</div>;
+};
+
+export default Rating;

components/Restaurant/Detail/index.tsx

@@ -7,16 +7,20 @@ import Slider from "react-slick";
 import { Restaurant } from "type/Restaurant";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
+import { palette } from "styles/palette";
 
 type RestaurantReviewModalBodyProps = {
   reviewData: Restaurant;
 };
 
 const RestaurantReviewModalBody = ({ reviewData }: RestaurantReviewModalBodyProps) => {
-  const { title, location, imageList } = reviewData;
+  const { title, description, location, imageList, price, review, visitedAt } = reviewData;
   return (
     <Container>
       <h1>{title}</h1>
+      <h3 className="restaurant-description">
+        {description} - {visitedAt} 방문 후기
+      </h3>
       <Divider />
       <MetaData>
         <Slider afterChange={(index) => {}} adaptiveHeight={true} dots={true} arrows={false}>
@@ -32,17 +36,33 @@ const RestaurantReviewModalBody = ({ reviewData }: RestaurantReviewModalBodyProp
             </ImageWrapper>
           )}
         </Slider>
-        <div>
+        <Rating>
           <h2>별점</h2>
-          <p>별점!!!</p>
-        </div>
+          <ul className="rating-items-list">
+            <li>총점</li>
+            <li>맛(신선도)</li>
+            <li>위생</li>
+            <li>가격</li>
+            <li>분위기(뷰)</li>
+            <li>서비스</li>
+          </ul>
+        </Rating>
       </MetaData>
-      <h2 className="subtitle">🔎 가게 정보</h2>
-      <Divider />
-      <p>{location}</p>
+      <RestaurantInfo>
+        <h2 className="subtitle">🔎 가게 정보</h2>
+        <Divider />
+        <div className="info-list">
+          <p>
+            위치 : <span className="restaurant-info">{location}</span>
+          </p>
+          <p>
+            1인 기준 가격 : <span className="restaurant-info">{price}</span>
+          </p>
+        </div>
+      </RestaurantInfo>
       <h2 className="subtitle">📝 한줄평</h2>
       <Divider />
-      <p>맛있다.</p>
+      <Review>{review}</Review>
     </Container>
   );
 };
@@ -51,6 +71,7 @@ const Container = styled.div`
   padding: 1rem;
   & > h1 {
     font-size: 1.375rem;
+    margin-bottom: 0.5rem;
   }
   .slick-slider {
     display: inline-block;
@@ -59,21 +80,79 @@ const Container = styled.div`
     margin-bottom: 2rem;
   }
 
+  .restaurant-description {
+    font-weight: normal;
+    font-size: 0.875rem;
+    color: ${palette.grey[500]};
+  }
+
   .subtitle {
     font-size: 1.25rem;
     font-weight: bold;
   }
+
+  @media (max-width: 768px) {
+    padding: 0;
+
+    .slick-slider {
+      display: inline-block;
+      position: relative;
+      width: calc(300px - 3rem);
+      margin-bottom: 2rem;
+    }
+  }
 `;
 
 const MetaData = styled.div`
   display: flex;
   gap: 1rem;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+`;
+
+const Rating = styled.section`
+  h2 {
+    margin-bottom: 1rem;
+  }
+  .rating-items-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.875rem;
+  }
+`;
+
+const RestaurantInfo = styled.div`
+  margin-bottom: 2rem;
+  font-size: 0.875rem;
+
+  .restaurant-info {
+    color: ${palette.grey[500]};
+  }
+
+  .info-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
 `;
 
 const ImageWrapper = styled.div`
   position: relative;
   width: 24rem;
   height: 15rem;
+
+  @media (max-width: 768px) {
+    width: calc(300px - 3rem);
+  }
+`;
+
+const Review = styled.article`
+  white-space: pre-wrap;
+  line-height: 1.4;
+  font-size: 0.875rem;
+  color: ${palette.black};
 `;
 
 export default RestaurantReviewModalBody;

components/Restaurant/List/Item.tsx

@@ -18,7 +18,7 @@ const animateVariant = {
 };
 
 const RestaurantListItem = ({ reviewData, selectReviewId }: RestaurantListItemProps) => {
-  const { id, title, thumbnail, location } = reviewData;
+  const { id, title, thumbnail, location, description } = reviewData;
 
   return (
     <Container onClick={() => selectReviewId(id)} variants={animateVariant} whileHover="zoom">
@@ -27,8 +27,8 @@ const RestaurantListItem = ({ reviewData, selectReviewId }: RestaurantListItemPr
           <Image src={thumbnail} layout="fill" alt={title} objectFit="cover" />
         </Thumbnail>
         <Title>{title}</Title>
-        <p className="location">{location}</p>
-        <Description>깐부치킨 그는 과연 신인가</Description>
+        <Description>{description}</Description>
+        <Location>{location}</Location>
       </div>
     </Container>
   );
@@ -39,11 +39,6 @@ const Container = styled(motion.div)`
   border-radius: 0.5rem;
   padding: 1.5rem;
   cursor: pointer;
-
-  .location {
-    font-size: 0.875rem;
-    margin-bottom: 0.5rem;
-  }
 `;
 
 const Thumbnail = styled.div`
@@ -74,6 +69,11 @@ const Title = styled.h2`
 const Description = styled.h3`
   font-size: 0.875rem;
   color: ${palette.grey[300]};
+  margin-bottom: 0.75rem;
+`;
+const Location = styled.p`
+  font-size: 0.875rem;
+  margin: 0.5rem 0;
 `;
 
 export default RestaurantListItem;

components/Restaurant/List/index.tsx

@@ -6,6 +6,8 @@ import { motion } from "framer-motion";
 import { Restaurant } from "type/Restaurant";
 import Modal from "components/common/Modal";
 import RestaurantReviewModalBody from "../Detail";
+import ButtonVariant from "type/variants/Button";
+import { palette } from "styles/palette";
 
 type RestaurantListProps = {
   restaurantReviewList: Restaurant[];
@@ -36,11 +38,16 @@ const RestaurantList = ({ restaurantReviewList }: RestaurantListProps) => {
       {selectedReview && (
         <Modal
           closeModal={() => setSelectedReview(null)}
-          answerType="single"
+          answerType="multi"
           width={900}
           height={600}
+          rightText="닫기"
+          leftText="공유하기"
+          onLeftButtonClick={() => {}}
+          leftButtonVariant={ModalCancelButtonVariant}
+          rightButtonVariant={ModalConfirmButtonVariant}
           body={<RestaurantReviewModalBody reviewData={selectedReview} />}
-          onCancel={() => setSelectedReview(null)}
+          onRightButtonClick={() => setSelectedReview(null)}
         />
       )}
     </div>
@@ -66,4 +73,16 @@ const ContentList = styled(motion.ul)`
   }
 `;
 
+const ModalCancelButtonVariant: ButtonVariant = {
+  color: palette.white,
+  backgroundColor: palette.red[100],
+  hoverBackgroundColor: palette.red[300],
+};
+
+const ModalConfirmButtonVariant: ButtonVariant = {
+  color: palette.white,
+  backgroundColor: palette.green[400],
+  hoverBackgroundColor: palette.green[300],
+};
+
 export default RestaurantList;

components/common/Modal/index.tsx

@@ -14,12 +14,12 @@ type ModalProps = {
   width?: string | number;
   height?: string | number;
   closeModal: () => void;
-  cancelText?: string;
-  confirmText?: string;
+  leftText?: string;
+  rightText?: string;
   leftButtonVariant?: ButtonVariant;
   rightButtonVariant?: ButtonVariant;
-  onCancel?: () => void;
-  onConfirm?: () => void;
+  onRightButtonClick?: () => void;
+  onLeftButtonClick?: () => void;
 };
 
 const variants = {
@@ -35,12 +35,12 @@ const Modal = ({
   closeModal,
   leftButtonVariant,
   rightButtonVariant,
-  onCancel,
-  onConfirm,
+  onRightButtonClick,
+  onLeftButtonClick,
   width = 300,
   height = 300,
-  cancelText = "취소",
-  confirmText = "확인",
+  leftText = "취소",
+  rightText = "확인",
 }: ModalProps) => {
   const isMobile = useIsMobile();
   const preventScroll = () => {
@@ -72,19 +72,19 @@ const Modal = ({
         isMobile={isMobile}
       >
         <h2>{title}</h2>
-        <>{body}</>
+        <ModalBody>{body}</ModalBody>
         <ModalFooter>
           {answerType === "single" ? (
-            <Button {...rightButtonVariant} onClick={onCancel}>
-              {confirmText}
+            <Button {...rightButtonVariant} onClick={onRightButtonClick}>
+              {rightText}
             </Button>
           ) : (
             <>
-              <Button {...leftButtonVariant} onClick={onCancel}>
-                {cancelText}
+              <Button {...leftButtonVariant} onClick={onRightButtonClick}>
+                {leftText}
               </Button>
-              <Button {...rightButtonVariant} onClick={onConfirm}>
-                {confirmText}
+              <Button {...rightButtonVariant} onClick={onLeftButtonClick}>
+                {rightText}
               </Button>
             </>
           )}
@@ -119,17 +119,27 @@ const Container = styled(motion.div)<{
   width: ${({ isMobile, width }) => (isMobile ? "300px" : computeSize(width))};
   height: ${({ height }) => computeSize(height)};
   border-radius: 0.75rem;
+  overflow-y: scroll;
   padding: 1.5rem;
   z-index: 999;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  & {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
 `;
 
+const ModalBody = styled.main``;
+
 const ModalFooter = styled.footer`
-  position: absolute;
   display: flex;
+  justify-content: flex-end;
   gap: 1rem;
-  bottom: 1.25rem;
-  right: 1.25rem;
-  margin-top: auto;
+  margin-top: 1rem;
 `;
 
 export default Modal;