From 20c73ecf761f9fd76293ab53f81483a50aa48d44 Mon Sep 17 00:00:00 2001
From: hookor <gerrard1219@gmail.com>
Date: Wed, 28 Aug 2024 17:25:39 +0900
Subject: [PATCH] Feat: display intensity in cafe detail

---
 src/components/post/CafeDetail.tsx        |  8 ++++++--
 src/components/post/CafeDetailContent.tsx | 13 +++++++++----
 src/components/post/CaffeineInfo.tsx      |  8 +++++++-
 src/components/post/PostDetail.tsx        |  2 ++
 src/types/types.ts                        |  2 ++
 5 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/post/CafeDetail.tsx b/src/components/post/CafeDetail.tsx
index 6d3b9943..06f13f59 100644
--- a/src/components/post/CafeDetail.tsx
+++ b/src/components/post/CafeDetail.tsx
@@ -10,7 +10,9 @@ const CafeDetail = ({
   menu,
   shot,
   posts = false,
-  onClick
+  onClick,
+  intensity,
+  size
 }: CafeDetailTypes) => {
   const CafeDetailProps = {
     brand,
@@ -18,7 +20,9 @@ const CafeDetail = ({
     menu,
     shot,
     posts,
-    onClick
+    onClick,
+    intensity,
+    size
   };
   return (
     <div className={cx(Column, className)}>
diff --git a/src/components/post/CafeDetailContent.tsx b/src/components/post/CafeDetailContent.tsx
index 29781ab8..bea89e32 100644
--- a/src/components/post/CafeDetailContent.tsx
+++ b/src/components/post/CafeDetailContent.tsx
@@ -27,8 +27,13 @@ const CafeDetailContent = ({
   onClick,
   menu,
   caffeine,
-  shot
+  shot,
+  intensity,
+  size
 }: CafeDetailContent) => {
+  const mild = intensity === '연하게';
+  const base = intensity === '기본' && shot === 0;
+
   return (
     <>
       <div className={posts ? cx(PostsCafe, Align) : Cafe}>
@@ -38,9 +43,9 @@ const CafeDetailContent = ({
       <div
         className={CaffeineDetail}
         onClick={onClick}>
-        {`${menu} ${shot !== '0' ? `(+${shot}` : ''}${
-          shot !== '0' ? '샷)' : ''
-        }`}
+        {mild && `${menu} (${intensity}, ${size})`}
+        {!mild && !base && `${menu} (+${shot}샷, ${size})`}
+        {!mild && base && `${menu} (${intensity}, ${size})`}
         <br />
         {!mini && including}
         <span className={ColorMain}>
diff --git a/src/components/post/CaffeineInfo.tsx b/src/components/post/CaffeineInfo.tsx
index fd1332ac..73b1196a 100644
--- a/src/components/post/CaffeineInfo.tsx
+++ b/src/components/post/CaffeineInfo.tsx
@@ -9,12 +9,16 @@ const CaffeineInfo = ({
   brand,
   menu,
   caffeine,
-  shot
+  shot,
+  intensity,
+  size
 }: {
   brand: string;
   menu: string;
   caffeine: number;
   shot: number;
+  intensity: string;
+  size: string;
 }) => {
   return (
     <Container className={cx(Flex, Align)}>
@@ -25,6 +29,8 @@ const CaffeineInfo = ({
         caffeine={caffeine}
         menu={menu}
         shot={shot}
+        intensity={intensity}
+        size={size}
       />
     </Container>
   );
diff --git a/src/components/post/PostDetail.tsx b/src/components/post/PostDetail.tsx
index 3dc2edc6..375bf7c2 100644
--- a/src/components/post/PostDetail.tsx
+++ b/src/components/post/PostDetail.tsx
@@ -119,6 +119,8 @@ const PostDetail = ({ postNum }: { postNum: string }) => {
             menu={postData.data.menu}
             caffeine={postData.data.caffeine}
             shot={postData.data.shot}
+            intensity={postData.data.intensity}
+            size={postData.data.size}
           />
           <PostedAt at={timestampToDate(postData.data.created_at)} />
           <div className={Divider} />
diff --git a/src/types/types.ts b/src/types/types.ts
index f218ac2f..0a720b78 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -253,6 +253,8 @@ export interface CafeDetailTypes {
   menu?: string;
   shot?: string | number;
   posts?: boolean;
+  intensity: string;
+  size: string;
   onClick?: () => void;
 }