Fix: CafeInfoModal에 카페 id를 Props로 넘기도록 수정

src/atoms/likesState.ts

@@ -10,3 +10,8 @@ export const filteredLikesState = atom<Likes[]>({
  key: 'filteredLikesState',
  default: [],
 });
+
+export const selectedCafeState = atom<number | null>({
+ key: 'selectedCafeState',
+ default: null,
+});

src/components/Like/LikeList/index.tsx

@@ -7,55 +7,57 @@ import useGeolocation from '@/hooks/useGeolocation';
 import useModal from '@/hooks/useModal';
 import CafeInfoModal from '@/components/Modal/CafeInfoModal';
 import EmptyMessage from '../EmptyMessage';
+import {useRecoilState} from 'recoil';
+import {selectedCafeState} from '@/atoms/likesState';
 
 interface Props {
  likes: Likes[];
- searchTerm: string;
 }
 
-export function LikeList({likes, searchTerm}: Props) {
+export function LikeList(props: Props) {
  const {coordinates} = useGeolocation();
  const {isOpen, openModal, closeModal} = useModal();
- const handleCafeInfoModalOpen = () => {
+ const [cafeId, setCafeId] = useRecoilState(selectedCafeState);
+
+ const handleCafeInfoModalOpen = (id: number) => {
+ setCafeId(id);
  openModal();
  };
  return (
  <>
  <Styled.Container>
- {likes.length === 0 ? (
+ {props.likes.length === 0 ? (
  <EmptyMessage message={'좋아요를 누른 카페가 없습니다.'} />
  ) : (
- likes
- .filter((like) =>
- like.name.toLowerCase().includes(searchTerm.toLowerCase()),
- )
- .map((like) => {
- return (
- <Styled.Wrapper
- key={like.id}
- onClick={() => handleCafeInfoModalOpen()}
- >
- <NameCard
- id={like.id}
- name={like.name}
- address={like.address}
- business={`${useTimeConverter(like.start_time)} ~ ${useTimeConverter(like.end_time)}`}
- likes={like.likes}
- distance={useDistance({
- currentLatitude: coordinates.lat,
- currentLongitude: coordinates.lng,
- targetLatitude: like.latitude,
- targetLongitude: like.longitude,
- })}
- liked={like.liked}
- />
- </Styled.Wrapper>
- );
- })
+ props.likes.map((like) => {
+ return (
+ <Styled.Wrapper
+ key={like.id}
+ onClick={() => handleCafeInfoModalOpen(like.id)}
+ >
+ <NameCard
+ id={like.id}
+ name={like.name}
+ address={like.address}
+ business={`${useTimeConverter(like.start_time)} ~ ${useTimeConverter(like.end_time)}`}
+ likes={like.likes}
+ distance={useDistance({
+ currentLatitude: coordinates.lat,
+ currentLongitude: coordinates.lng,
+ targetLatitude: like.latitude,
+ targetLongitude: like.longitude,
+ })}
+ liked={like.liked}
+ />
+ </Styled.Wrapper>
+ );
+ })
  )}
  </Styled.Container>
 
- {isOpen && <CafeInfoModal isOpen={isOpen} onClose={closeModal} />}
+ {isOpen && (
+ <CafeInfoModal isOpen={isOpen} onClose={closeModal} id={cafeId} />
+ )}
  </>
  );
 }

src/pages/Like/index.tsx

@@ -15,7 +15,7 @@ export default function Like() {
  const [likes, setLikes] = useRecoilState(likesState);
  const {isOpen, openModal, closeModal} = useModal();
  const [filteredLikes, setFilteredLikes] = useRecoilState(filteredLikesState);
- const {value: searchTerm, setValue: setSearchTerm, reset} = useInput();
+ const {value: searchTerm, setValue: setSearchTerm} = useInput();
 
  useEffect(() => {
  fetch('/test/cafes/likes')
@@ -30,7 +30,7 @@ export default function Like() {
  };
 
  useEffect(() => {
- if (!searchTerm) {
+ if (searchTerm === '') {
  setFilteredLikes(likes);
  } else {
  const filtered = likes.filter((like) =>
@@ -52,7 +52,7 @@ export default function Like() {
  <Toggle />
  </Styled.ButtonsWrapper>
  <LikeSearchBar onSearch={handleSearch} />
- <LikeList likes={filteredLikes} searchTerm={searchTerm} />
+ <LikeList likes={filteredLikes} />
  </PageLayout>
 
  {isOpen && <FilterModal isOpen={isOpen} onClose={closeModal} />}