Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
…into dev_etc
  • Loading branch information
ssssksss committed Sep 22, 2024
2 parents c63f27b + 86aa9af commit 113b8f3
Show file tree
Hide file tree
Showing 4 changed files with 111 additions and 33 deletions.
28 changes: 6 additions & 22 deletions src/components/common/InformationItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import Image from "next/image";
import Link from "next/link";
import { TiLocation } from "react-icons/ti";
import { convertNumberToShortForm } from "@/utils/convertNumberToShortForm";
import InformationLikeCountContainer from "@/containers/common/InformationLikeCountContainer";

interface Props {
informationId: number;
Expand Down Expand Up @@ -117,28 +118,11 @@ const InformationItem = ({
</p>
</div>
<div className="flex flex-row items-center gap-3">
<div
className={`${isLike ? "text-[#F85E5E]" : "text-gray2"} flex flex-row items-center gap-[0.3125rem] text-xs`}
>
<div className="relative h-4 w-4 text-white">
{isLike ? (
<Image
src="/common/heart-active-icon.svg"
alt="like-icon"
fill={true}
style={{ objectFit: "contain" }}
/>
) : (
<Image
src="/common/heart-empty-icon.svg"
alt="like-icon"
fill={true}
style={{ objectFit: "contain" }}
/>
)}
</div>
<p>{convertNumberToShortForm(likeCount)}</p>
</div>
<InformationLikeCountContainer
informationId={informationId}
likeCount={likeCount}
isLike={isLike}
/>
<div className="flex flex-row items-center gap-1 text-gray2">
<Image
src="/common/eyes-icon.svg"
Expand Down
20 changes: 13 additions & 7 deletions src/components/informations/list/InformationSearch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ interface Props {
onChangeSearchValue: (value: string) => void;
closeModal: () => void;
openModal: () => void;
onOrderDropdownClick: () => void;
onSearchDropdownClick: () => void;
onOrderDropdownClick: (visible: boolean) => void;
onSearchDropdownClick: (visible: boolean) => void;
onSearchClick: () => void;
setSearchMethod: (value: string) => void;
}
Expand Down Expand Up @@ -55,14 +55,17 @@ const InformationSearch = ({
<button
className="absolute left-0 top-0 flex h-[2.75rem] flex-row items-center gap-2 pl-[1.125rem] text-sm text-gray1 hover:text-main"
type="button"
onClick={() => onSearchDropdownClick()}
onClick={() => {
onOrderDropdownClick(false);
onSearchDropdownClick(true);
}}
>
<p>{searchMethod}</p>
<IoIosArrowDown className="mt-1" />
</button>
<div
className={`${!searchDropdownVisible && "hidden"} absolute left-0 top-[0.5625rem] -z-10 flex w-[4.8125rem] flex-col items-center gap-1 rounded-xl bg-white/95 pt-[2.1875rem] text-gray1 shadow`}
onClick={() => onSearchDropdownClick()}
onClick={() => onSearchDropdownClick(false)}
>
<button
className={`${searchMethod === "제목" && "text-main"} h-[3.75rem] w-[4.6875rem] hover:text-main`}
Expand All @@ -89,7 +92,7 @@ const InformationSearch = ({
/>
<button
className="absolute right-[0.375rem] top-[0.3125rem] flex h-[2.125rem] w-[2.125rem] items-center justify-center rounded-full bg-[#F2FAF7] hover:scale-110"
onClick={() => onSearchClick()}
type="submit"
>
<Image
src="/common/search-icon.png"
Expand All @@ -110,14 +113,17 @@ const InformationSearch = ({
<div className="relative">
<button
className="flex flex-row items-center text-gray1 hover:text-main"
onClick={() => onOrderDropdownClick()}
onClick={() => {
onSearchDropdownClick(false);
onOrderDropdownClick(true);
}}
>
<p className="text-nowrap">{`${order === "latest" ? "최신순" : order === "likes" ? "좋아요순" : "조회순"}`}</p>
<IoIosArrowDown />
</button>
<div
className={`${!orderDropdownVisible && "hidden"} absolute -left-[4.5rem] top-7 z-10 flex w-[8.625rem] flex-col items-center gap-1 rounded-xl bg-white/95 text-gray1 shadow`}
onClick={() => onOrderDropdownClick()}
onClick={() => onOrderDropdownClick(false)}
>
<Link
className={`${order === "latest" && "text-main"} flex h-16 w-full items-center justify-center hover:text-main`}
Expand Down
88 changes: 88 additions & 0 deletions src/containers/common/InformationLikeCountContainer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
"use client";

import InformationLikeCount from "@/components/informations/detail/InformationLikeCount";
import useAuthStore from "@/store/authStore";
import { fetchWithAuth } from "@/utils/fetchWithAuth";
import { useState } from "react";

interface Props {
informationId: number;
likeCount: number;
isLike: boolean;
}

const InformationLikeCountContainer = ({
informationId,
likeCount,
isLike,
}: Props) => {
const userId = useAuthStore().id;
const [isLiked, setIsLiked] = useState(isLike);
const [currentLikeCount, setCurrentLikeCount] = useState(likeCount);
const [loading, setLoading] = useState(false);

const onLikesClick = async () => {
if (loading) {
return;
}

setLoading(true);
const data = new URLSearchParams();
data.append("infoId", informationId.toString());

if (isLiked) {
setCurrentLikeCount(currentLikeCount - 1);
setIsLiked(false);

const response = await fetchWithAuth("/api/informations/great", {
method: "DELETE",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: data.toString(),
cache: "no-store",
});

if (!response.ok) {
setCurrentLikeCount(currentLikeCount + 1);
setIsLiked(true);
setLoading(false);
alert("좋아요 취소에 실패하였습니다.");
throw new Error(response.statusText);
}
} else {
setCurrentLikeCount(currentLikeCount + 1);
setIsLiked(true);

const response = await fetchWithAuth("/api/informations/great", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: data.toString(),
cache: "no-store",
});

if (!response.ok) {
setCurrentLikeCount(currentLikeCount - 1);
setIsLiked(false);
setLoading(false);
alert("좋아요 등록에 실패하였습니다.");
throw new Error(response.statusText);
}
}

setLoading(false);
};

return (
<InformationLikeCount
clickable={userId > 0}
likeCount={currentLikeCount}
isLiked={isLiked}
onLikesClick={onLikesClick}
/>
);
};

export default InformationLikeCountContainer;
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,11 @@ const InformationSearchContainer = () => {
onChangeSearchValue={onChangeSearchValue}
closeModal={() => setModalVisible(false)}
openModal={() => setModalVisible(true)}
onOrderDropdownClick={() =>
setOrderDropdownVisible(!orderDropdownVisible)
onOrderDropdownClick={(visible: boolean) =>
setOrderDropdownVisible(visible)
}
onSearchDropdownClick={() =>
setSearchDropdownVisible(!searchDropdownVisible)
onSearchDropdownClick={(visible: boolean) =>
setSearchDropdownVisible(visible)
}
onSearchClick={onSearchClick}
setSearchMethod={(value: string) => {
Expand Down

0 comments on commit 113b8f3

Please sign in to comment.