Feat: display intensity in cafe detail

7-7-2 · Aug 29, 2024 · 20c73ec · 20c73ec
1 parent 2e6f950
commit 20c73ec
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 7 deletions.
diff --git a/src/components/post/CafeDetail.tsx b/src/components/post/CafeDetail.tsx
@@ -10,15 +10,19 @@ const CafeDetail = ({
   menu,
   shot,
   posts = false,
-  onClick
+  onClick,
+  intensity,
+  size
 }: CafeDetailTypes) => {
   const CafeDetailProps = {
     brand,
     caffeine,
     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
@@ -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
@@ -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
@@ -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
@@ -253,6 +253,8 @@ export interface CafeDetailTypes {
   menu?: string;
   shot?: string | number;
   posts?: boolean;
+  intensity: string;
+  size: string;
   onClick?: () => void;
 }