디테일 컴포넌트 완성, 레시피 디테일 페이지 서버사이드 렌더링

src/api/customApi.ts

@@ -0,0 +1,106 @@
+import { initializeApp } from 'firebase/app';
+import { firebaseConfig } from './firebaseConfig';
+import {
+  getFirestore,
+  doc,
+  setDoc,
+  deleteDoc,
+  updateDoc,
+  increment,
+  getDoc,
+  collection,
+  getDocs,
+  Timestamp,
+  orderBy,
+  limit,
+  query,
+  arrayUnion,
+  arrayRemove,
+} from 'firebase/firestore';
+import { RecipeDetail } from 'components/Accordion/Accordion.types';
+
+initializeApp(firebaseConfig);
+
+const db = getFirestore();
+
+interface Recipe {
+  recipeId: string;
+  title: string;
+  image: string;
+  creditsText: string;
+  tags: string[];
+  readyInMinutes: number;
+  savedCount: number;
+  savedBy: string[];
+  recipeDetails: RecipeDetail;
+}
+
+export const saveRecipe = async (userId: string, recipeData: Recipe) => {
+  const myRecipesRef = doc(db, 'users', userId, 'my-recipes', recipeData.recipeId);
+  const savedRecipesRef = doc(db, 'savedRecipes', recipeData.recipeId);
+  const savedRecipesSnap = await getDoc(savedRecipesRef);
+
+  await setDoc(myRecipesRef, {
+    id: recipeData.recipeId,
+    title: recipeData.title,
+    image: recipeData.image,
+    savedAt: Timestamp.fromDate(new Date()),
+  });
+
+  if (savedRecipesSnap.exists()) {
+    await updateDoc(savedRecipesRef, {
+      savedCount: increment(1),
+      savedBy: arrayUnion(userId),
+    });
+  } else {
+    await setDoc(savedRecipesRef, { ...recipeData, savedCount: 1, savedBy: [userId] });
+  }
+};
+
+export const removeRecipe = async (userId: string, recipeId: string) => {
+  const myRecipesRef = doc(db, 'users', userId, 'my-recipes', recipeId);
+  const savedRecipesRef = doc(db, 'savedRecipes', recipeId);
+  const savedRecipesSnap = await getDoc(savedRecipesRef);
+
+  await deleteDoc(myRecipesRef);
+
+  if (savedRecipesSnap.exists()) {
+    await updateDoc(savedRecipesRef, {
+      savedCount: increment(-1),
+      savedBy: arrayRemove(userId),
+    });
+  }
+};
+
+export const getMyRecipes = async (userId: string) => {
+  const myRecipesRef = collection(db, 'users', userId, 'my-recipes');
+  const q = query(myRecipesRef, orderBy('savedAt', 'desc'));
+  const myRecipesSnapShot = await getDocs(q);
+  const myRecipes = [];
+  myRecipesSnapShot.forEach((doc) => {
+    myRecipes.push(doc.data());
+  });
+  return myRecipes;
+};
+
+export const getHotRecipes = async (num = 6) => {
+  const hotRecipesRef = collection(db, 'savedRecipes');
+  const q = query(hotRecipesRef, orderBy('savedCount', 'desc'), limit(num));
+  const hotRecipesSnapshot = await getDocs(q);
+  const hotRecipes = [];
+  hotRecipesSnapshot.forEach((doc) => {
+    hotRecipes.push(doc.data());
+  });
+  return hotRecipes;
+};
+
+export const getSavedRecipe = async (recipeId: string) => {
+  const savedRecipeRef = doc(db, 'savedRecipes', recipeId);
+  const savedRecipeSnap = await getDoc(savedRecipeRef);
+
+  if (savedRecipeSnap.exists()) {
+    return savedRecipeSnap.data();
+  } else {
+    return null;
+  }
+};

src/components/Accordion/Accordion.styled.tsx

@@ -5,15 +5,15 @@ import { pxToRem, media } from 'utils';
 const collapseContent = (props: { theme: Theme }) =>
   css`
     font-size: ${pxToRem(18)};
-    color: ${props.theme.color.gray200};
+    color: ${props.theme.color.gray500};
     padding: 0.5rem 0;
     line-height: 1.3;
   `;
 
 export const StyledCollapseHeading = styled.div`
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid ${({ theme }) => theme.color.white};
+  border-bottom: 1px solid ${({ theme }) => theme.color.gray500};
   align-content: center;
 
   svg {
@@ -100,6 +100,6 @@ export const StyledAccordion = styled.ul`
   }
 
   display: block;
-  color: ${({ theme }) => theme.color.white};
+  color: ${({ theme }) => theme.color.gray500};
   margin: 0;
 `;

src/components/Badge/Badge.tsx

@@ -69,6 +69,7 @@ const BADGE: BadgeInfos = {
 };
 
 export const Badge = ({ iconType, size }: BadgeProps) => {
+  if (!BADGE[iconType]) return null;
   return (
     <StyledBadge $color={BADGE[iconType].color} $size={size}>
       {BADGE[iconType].icon}

src/components/BadgeList/BadgeList.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { BadgeList } from './BadgeList';
+
+export default {
+  title: 'BadgeList',
+  component: BadgeList,
+  args: {
+    tags: [
+      'glutenFree',
+      'healthy',
+    ],
+  },
+} as ComponentMeta<typeof BadgeList>;
+
+const Template: ComponentStory<typeof BadgeList> = (args) => <BadgeList {...args} />;
+
+export const Default = Template.bind({});

src/components/BadgeList/BadgeList.tsx

@@ -0,0 +1,15 @@
+import { StyledUl } from './BadgeList.styled';
+import { BadgeListProps } from './BadgeList.types';
+import { Badge } from 'components';
+
+export const BadgeList = ({ tags }: BadgeListProps) => {
+  return (
+    <StyledUl>
+      {tags.map((tag, index) => (
+        <li key={tag + index}>
+          <Badge iconType={tag} size="small" />
+        </li>
+      ))}
+    </StyledUl>
+  );
+};

src/components/CookingInfo/CookingInfo.styled.tsx

@@ -2,9 +2,9 @@ import styled from '@emotion/styled';
 import { BsBookmarkHeartFill } from 'react-icons/bs';
 import { RiTimerFill } from 'react-icons/ri';
 import { pxToRem } from 'utils';
-
+ 
 export const StyledDL = styled.dl`
-  color: #cbcbcb;
+  color: ${({ theme }) => theme.color.gray500};
   font-size: ${pxToRem(18)};
   padding: ${pxToRem(10)} 0;
   width: 100%;

src/components/Detail/Detail.stories.tsx

@@ -0,0 +1,11 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Detail } from './Detail';
+
+export default {
+  title: 'Detail',
+  component: Detail,
+} as ComponentMeta<typeof Detail>;
+
+const Template: ComponentStory<typeof Detail> = (args) => <Detail {...args} />;
+
+export const Default = Template.bind({});

src/components/Detail/Detail.styled.tsx

@@ -0,0 +1,51 @@
+import styled from '@emotion/styled';
+import { IconButton } from 'components';
+import { media } from 'utils';
+
+export const StyledArticle = styled.article`
+  ${media.desktop} {
+    display: flex;
+    gap: 3%;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 20px 50px 25px 50px;
+  }
+  ${media.mobile} {
+    padding: 20px 30px 25px 30px;
+  }
+`;
+
+export const StyledHeader = styled.header`
+  width: 100%;
+  margin-bottom: 10px;
+`;
+
+export const StyledUl = styled.ul`
+  display: flex;
+  gap: 5px;
+  margin: 5px 0 0 0;
+`;
+
+export const StyledIconButton = styled(IconButton)`
+  &:hover {
+    background: ${({ theme }) => theme.color.hoverGray};
+  }
+`;
+
+export const StyledDiv = styled.div`
+  ${media.desktop} {
+    width: 45%;
+  }
+`;
+
+export const StyledFigure = styled.figure`
+  margin: 0 0 30px;
+  position: relative;
+`;
+
+export const StyledImg = styled.img`
+  width: 100%;
+  height: 40vh;
+  object-fit: cover;
+`;

src/components/Detail/Detail.tsx

@@ -0,0 +1,130 @@
+import {
+  StyledArticle,
+  StyledHeader,
+  StyledUl,
+  StyledIconButton,
+  StyledDiv,
+  StyledFigure,
+  StyledImg,
+} from './Detail.styled';
+import { DetailProps } from './Detail.types';
+import { useEffect, useState } from 'react';
+import { Heading, BadgeList, CookingInfo, Toast, AuthContainer } from 'components';
+import { useToast, useDialog } from 'hooks';
+import { useSelector } from 'react-redux';
+import { RootState } from 'store';
+import { AuthState } from 'store/slices/auth';
+import { removeRecipe, saveRecipe } from 'api/customApi';
+import { Accordion } from 'components';
+
+export const Detail = (recipeData: DetailProps) => {
+  const { title, image, creditsText, tags, readyInMinutes, savedCount, savedBy, recipeId, recipeDetails } = recipeData;
+
+  const { showDialog, handleOpenDialog, handleCloseDialog } = useDialog();
+  const { showToast: showSignInToast, displayToast: displaySignInToast } = useToast(2000);
+  const { showToast, displayToast } = useToast(700);
+  const { authUser } = useSelector<RootState, AuthState>((state) => state.auth);
+
+  const [isBookmarked, setIsBookmarked] = useState(false);
+  const [isSaved, setIsSaved] = useState(false);
+  const [countBeDisplayed, setCountBeDisplayed] = useState(0);
+
+  useEffect(() => {
+    setCountBeDisplayed(savedCount);
+
+    if (authUser && savedBy) {
+      setIsSaved(savedBy.includes(authUser));
+      setIsBookmarked(savedBy.includes(authUser));
+    } else {
+      setIsSaved(false);
+      setIsBookmarked(false);
+    }
+  }, [authUser]);
+
+  useEffect(() => {
+    const id = setTimeout(() => {
+      if (authUser && isBookmarked !== isSaved) {
+        setIsSaved(isBookmarked);
+        if (isBookmarked) {
+          saveRecipe(authUser, recipeData);
+        } else {
+          removeRecipe(authUser, recipeId);
+        }
+      }
+    }, 300);
+
+    return () => {
+      clearTimeout(id);
+    };
+  }, [isBookmarked]);
+
+  const copyPageUrl = async () => {
+    try {
+      await navigator.clipboard.writeText(location.href);
+      displayToast();
+    } catch (err) {
+      console.error('Failed to copy: ', err);
+    }
+  };
+
+  const handleClick = () => {
+    if (!authUser) {
+      handleOpenDialog();
+      return;
+    }
+    setIsBookmarked(!isBookmarked);
+    isBookmarked ? setCountBeDisplayed(countBeDisplayed - 1) : setCountBeDisplayed(countBeDisplayed + 1);
+  };
+
+  return (
+    <StyledArticle>
+      <StyledHeader>
+        <Heading as="h2">{title}</Heading>
+        <Heading as="h3" className="a11yHidden">
+          button list
+        </Heading>
+        <StyledUl>
+          <li>
+            <StyledIconButton
+              variant="transparent"
+              type="button"
+              iconType="link"
+              ariaLabel="copy link"
+              color="black"
+              size="large"
+              circle
+              onClick={copyPageUrl}
+            />
+            {showToast && <Toast message="Copied" />}
+          </li>
+          <li>
+            <StyledIconButton
+              variant="transparent"
+              type="button"
+              iconType={isBookmarked ? 'bookmarkFill' : 'bookmark'}
+              ariaLabel="save to my recipes"
+              color={isBookmarked ? 'primaryOrange' : 'black'}
+              size="large"
+              circle
+              onClick={handleClick}
+            />
+          </li>
+        </StyledUl>
+      </StyledHeader>
+      <StyledDiv>
+        <StyledFigure>
+          <StyledImg
+            src={image && !/^(https)/.test(image) ? 'https://spoonacular.com/recipeImages/' + image : image}
+            alt={title}
+          />
+          <figcaption>{creditsText}</figcaption>
+        </StyledFigure>
+        {tags && tags.length ? <BadgeList tags={tags} /> : null}
+        <CookingInfo time={readyInMinutes || 0} count={countBeDisplayed || 0} />
+      </StyledDiv>
+      <Accordion recipeDetails={recipeDetails} />
+      {showDialog && <AuthContainer onClose={handleCloseDialog} onSignIn={displaySignInToast} />}
+      {showSignInToast && <Toast message="Signed in successfully!" />}
+    </StyledArticle>
+  );
+};

src/components/Detail/Detail.types.ts

@@ -0,0 +1,10 @@
+import { IconType } from 'components/Badge/Badge.types';
+
+export interface DetailProps {
+  title: string;
+  image: string;
+  creditsText: string;
+  tags: IconType[];
+  readyInMinutes: number;
+  savedCount: number;
+}