Feat: 찜

src/components/PDetailInfo/index.tsx

@@ -23,7 +23,7 @@ export const PDetailInfo = ({
   width = '400px',
   height = '250px',
   isNameInclude = false,
-  id,
+  fId: id,
   onUpdateScore,
 }: PDetailInfoProps) => {
   const [isMapModalVisible, setIsMapModalVisible] = useState(false);

src/components/PDetailReviewForm/index.tsx

@@ -1,19 +1,26 @@
 import { useRef, useEffect, useState } from 'react';
 import { PDetailReviewInput } from '../PDetailReviewInput';
 import * as S from './styles';
+import ReviewStorage from '@/utils/ReviewStorage';
 
-export const PDetailReviewForm = () => {
+interface PDetailReviewFormProps {
+  pId: string;
+  score: number;
+}
+
+export const PDetailReviewForm = ({ pId, score }: PDetailReviewFormProps) => {
   const initialReview = localStorage.getItem('review') || '';
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const formRef = useRef<HTMLFormElement>(null);
   const [isEditing, setIsEditing] = useState(false);
   const [review, setReview] = useState(initialReview);
-
+  console.log({ id: pId });
   const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const form = new FormData(e.target as HTMLFormElement);
     const reviewData = form.get('review') as string;
-    localStorage.setItem('review', reviewData);
+    console.log({ id: pId, review, score });
+    ReviewStorage.saveReview({ id: pId, review: reviewData, score });
     setIsEditing(false);
   };
   const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {

src/components/PosterWithDetailInfo/index.tsx

@@ -14,13 +14,19 @@ interface PosterWithDetailInfoProps extends PDetailType {
   onUpdateScore?: (newScore: number) => void;
 }
 
-export const PosterWithDetailInfo = ({ width = '70%', posterWidth = '30%', ...rest }: PosterWithDetailInfoProps) => {
+export const PosterWithDetailInfo = ({
+  width = '70%',
+  posterWidth = '30%',
+  fId,
+  pId,
+  ...rest
+}: PosterWithDetailInfoProps) => {
   return (
     <S.PosterWithDetailInfo width={width}>
-      <S.StyledPosterWithButtons width={posterWidth} shareUrl={window.location.href} {...rest} />
+      <S.StyledPosterWithButtons width={posterWidth} shareUrl={window.location.href} id={fId} {...rest} />
       <S.PDetailContainer>
-        <PDetailInfo width="100%" {...rest} />
-        <PDetailReviewForm />
+        <PDetailInfo width="100%" fId={fId} pId={pId} {...rest} />
+        <PDetailReviewForm pId={pId} score={0} />
       </S.PDetailContainer>
     </S.PosterWithDetailInfo>
   );

src/pages/DetailPage/index.tsx

@@ -7,6 +7,7 @@ import useYoutube from '@/hooks/useYouTube';
 import { PTrailerVideo } from '@/components/PTrailerVideo';
 import { Loader } from '@/components/Loader';
 import { convertEmptyObject, convertToArray } from '@/utils/ConvertToArray';
+import HeartStorage from '@/utils/HeartStorage';
 
 export default function DetailPage() {
   const { id } = useParams<{ id: string }>();
@@ -18,9 +19,11 @@ export default function DetailPage() {
     poster: data?.dbs?.db.poster ?? '',
   });
 
-  const onHeartClick = () => {};
+  const onHeartClick = () => {
+    HeartStorage.toggleHeart(id as string);
+  };
   const onUpdateScore = () => {};
-  console.log(data?.dbs?.db);
+
   if (isLoading) return <Loader />;
   return (
     <S.DetailPage>
@@ -38,7 +41,9 @@ export default function DetailPage() {
         spectator={data?.dbs?.db.prfage || ''}
         price={data?.dbs?.db.pcseguidance || ''}
         score={2}
-        id={data?.dbs?.db.mt10id || ''}
+        fId={data?.dbs?.db.mt10id || ''}
+        initialIsHeartFilled={HeartStorage.isHearted(id as string)}
+        pId={data?.dbs?.db.mt20id || ''}
       />
       <S.Panel>
         <S.Title>공연 예고편</S.Title>

src/pages/MyPage/index.tsx

@@ -7,12 +7,13 @@ import replaceTextProperties from '@/utils/extractInnermostValues';
 import HeartStorage from '@/utils/HeartStorage';
 import { xml2json } from 'xml-js';
 import { Loader } from '@/components/Loader';
+import { convertEmptyObject } from '@/utils/ConvertToArray';
 
 export default function MyPage() {
   const heartList = HeartStorage.getHeartList().concat();
   const fetchHeartList = heartList.map(heartItem => fetch(getApiUrl<PDetailRequestType>(`pblprfr/${heartItem.id}`)));
-  const [data, setData] = useState<PDetailResponseType[]>([]);
 
+  const [data, setData] = useState<PDetailResponseType[]>([]);
   const [isDataLoading, setIsDataLoading] = useState(true);
 
   useEffect(() => {
@@ -52,17 +53,18 @@ export default function MyPage() {
         <PosterWithDetailInfo
           isNameInclude
           key={d.dbs?.db.mt20id}
-          id={d.dbs?.db.mt20id || ''}
+          fId={d.dbs?.db.mt10id || ''}
           posterSrc={d.dbs?.db.poster || ''}
           name={d.dbs?.db.prfnm || ''}
           category={d.dbs?.db.genrenm || ''}
           place={d.dbs?.db.fcltynm || ''}
           duration={d.dbs?.db.prfpdfrom + '~' + d.dbs?.db.prfpdto}
-          time={d.dbs?.db.prfruntime || ''}
+          time={convertEmptyObject(d.dbs?.db.prfruntime)}
           spectator={d.dbs?.db.prfage || ''}
           price={d.dbs?.db.pcseguidance || ''}
           // 평점 -> review?
-          score={0}
+          score={3}
+          pId={d.dbs?.db.mt20id || ''}
         />
       ))}
     </S.MyPage>

src/types/pDetail.ts

@@ -7,5 +7,6 @@ export type PDetailType = {
   spectator: string;
   price: string;
   score: number;
-  id: string;
+  fId: string;
+  pId: string;
 };

src/utils/HeartStorage.ts

@@ -9,19 +9,28 @@ export default class HeartStorage {
     return heartList ? JSON.parse(heartList) : [];
   }
 
-  private static setHeartList(newHeartList: HeartItemType[]): void {
+  private static setHeartList(newHeartList: HeartItemType[]) {
     localStorage.setItem(this.KEY, JSON.stringify(newHeartList));
   }
 
-  static addHeart(heart: HeartItemType): void {
+  static addHeart(heart: HeartItemType) {
     const heartList = this.getHeartList();
     heartList.push(heart);
     this.setHeartList(heartList);
   }
 
-  static removeHeart(id: string): void {
+  static removeHeart(id: string) {
     const heartList = this.getHeartList();
     const updatedHeartList = heartList.filter(heart => heart.id !== id);
     this.setHeartList(updatedHeartList);
   }
+
+  static isHearted(id: string) {
+    return this.getHeartList().some(heart => heart.id === id);
+  }
+
+  static toggleHeart(id: string) {
+    if (this.isHearted(id)) this.removeHeart(id);
+    else this.addHeart({ id });
+  }
 }

src/utils/ReviewStorage.ts

@@ -1,6 +1,7 @@
 type ReviewItemType = {
   review: string;
   id: string;
+  score: number; // 별점 1,2,3,4,5
 };
 
 export default class ReviewStorage {