Skip to content

Commit

Permalink
Merge pull request #62 from Team-Remini/feat/#60
Browse files Browse the repository at this point in the history 
Feat/#60/공유모달창 추가/ 좋아요 로직 수정/ 프로필 이미지 추가
  • Loading branch information
@candosh
candosh authored Dec 17, 2023
2 parents f583eb7 + e1f8adb commit e2b1c11
Show file tree
Hide file tree
Showing 10 changed files with 58 additions and 580 deletions.
79 changes: 0 additions & 79 deletions src/components/CompleteWriting/AAR.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,9 @@ import CompleteImg from "../../img/UI/basicImage.png";
import BasicProfile from "../../img/UI/basicProfile.png";
import axios from "axios";
import GuideLineFourContent from "../../components/GuideLine/FourContent";
import filledHeart from "../../img/UI/filledHeart.png";
import emptyHeart from "../../img/UI/emptyHeart.png";

type DataType = {
createdDate: string;
liked: boolean;
likesCount: number;
nickname: String;
reminiImage: string;
};
Expand All @@ -25,8 +21,6 @@ function CompleteWritingARR() {
const [retrospectiveData, setRetrospectiveData] = useState<DataType | null>(
null
);
const [isLiked, setIsLiked] = useState(false);
const [likesCount, setLikesCount] = useState(0);

useEffect(() => {
const fetchData = async () => {
Expand All @@ -51,52 +45,8 @@ function CompleteWritingARR() {
if (id) {
fetchData();
}

if (retrospectiveData) {
setIsLiked(retrospectiveData.liked);
setLikesCount(retrospectiveData.likesCount);
}
}, [id, retrospectiveData]);

//좋아요
const handleLikeClick = async () => {
const accessToken = localStorage.getItem("accessToken"); // 액세스 토큰 가져오기
if (!accessToken) {
console.log("로그인이 필요합니다.");
return;
}

try {
let response;
if (!isLiked) {
response = await axios.post(
`https://www.remini.store/api/remini/${id}/likes`,
{},
{
headers: {
Authorization: `Bearer ${accessToken}`,
},
}
);
} else {
response = await axios.delete(
`https://www.remini.store/api/remini/${id}/likes`,
{
headers: {
Authorization: `Bearer ${accessToken}`,
},
}
);
}

if (response.status === 200) {
setIsLiked(!isLiked);
setLikesCount(isLiked ? likesCount - 1 : likesCount + 1);
}
} catch (error) {
console.error("좋아요 처리 중 오류 발생:", error);
}
};
return (
<>
<CompleteWritingWrap>
Expand Down Expand Up @@ -125,18 +75,6 @@ function CompleteWritingARR() {
alt="CompleteImg"
className="CompleteImg"
/>
<div className="likes" onClick={(e) => e.stopPropagation()}>
<img
src={isLiked ? filledHeart : emptyHeart}
alt="Heart"
onClick={handleLikeClick}
/>
<p
style={{ color: isLiked ? "var(--primary-400, #79CD96)" : "" }}
>
{likesCount}
</p>
</div>
</div>
</div>
<div className="mainContent-container">
Expand Down Expand Up @@ -312,23 +250,6 @@ const CompleteWritingWrap = styled.div`
);
}
.likes {
position: absolute;
top: 190px;
right: 220px;
display: flex;
align-items: center;
gap: 8px;
}
.likes p {
color: rgba(255, 255, 255, 0.87);
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.userInfo-container {
margin-top: 60px;
display: inline-flex;
Expand Down
78 changes: 0 additions & 78 deletions src/components/CompleteWriting/Continue.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ import CompleteImg from "../../img/UI/basicImage.png";
import BasicProfile from "../../img/UI/basicProfile.png";
import axios from "axios";
import GuideLineTheeContent from "../../components/GuideLine/ThreeContent";
import filledHeart from "../../img/UI/filledHeart.png";
import emptyHeart from "../../img/UI/emptyHeart.png";

type DataType = {
createdDate: string;
Expand All @@ -24,8 +22,6 @@ function CompleteWritingContinue() {
const [retrospectiveData, setRetrospectiveData] = useState<DataType | null>(
null
);
const [isLiked, setIsLiked] = useState(false);
const [likesCount, setLikesCount] = useState(0);

useEffect(() => {
const fetchData = async () => {
Expand All @@ -49,53 +45,8 @@ function CompleteWritingContinue() {
if (id) {
fetchData();
}

if (retrospectiveData) {
setIsLiked(retrospectiveData.liked);
setLikesCount(retrospectiveData.likesCount);
}
}, [id, retrospectiveData]);

//좋아요
const handleLikeClick = async () => {
const accessToken = localStorage.getItem("accessToken"); // 액세스 토큰 가져오기
if (!accessToken) {
console.log("로그인이 필요합니다.");
return;
}

try {
let response;
if (!isLiked) {
response = await axios.post(
`https://www.remini.store/api/remini/${id}/likes`,
{},
{
headers: {
Authorization: `Bearer ${accessToken}`,
},
}
);
} else {
response = await axios.delete(
`https://www.remini.store/api/remini/${id}/likes`,
{
headers: {
Authorization: `Bearer ${accessToken}`,
},
}
);
}

if (response.status === 200) {
setIsLiked(!isLiked);
setLikesCount(isLiked ? likesCount - 1 : likesCount + 1);
}
} catch (error) {
console.error("좋아요 처리 중 오류 발생:", error);
}
};

return (
<>
<CompleteWritingWrap>
Expand Down Expand Up @@ -124,18 +75,6 @@ function CompleteWritingContinue() {
alt="CompleteImg"
className="CompleteImg"
/>
<div className="likes" onClick={(e) => e.stopPropagation()}>
<img
src={isLiked ? filledHeart : emptyHeart}
alt="Heart"
onClick={handleLikeClick}
/>
<p
style={{ color: isLiked ? "var(--primary-400, #79CD96)" : "" }}
>
{likesCount}
</p>
</div>
</div>
</div>
<div className="mainContent-container">
Expand Down Expand Up @@ -288,23 +227,6 @@ const CompleteWritingWrap = styled.div`
);
}
.likes {
position: absolute;
top: 190px;
right: 230px;
display: flex;
align-items: center;
gap: 8px;
}
.likes p {
color: rgba(255, 255, 255, 0.87);
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.user-name {
color: var(--text-high-emphasis, rgba(255, 255, 255, 0.87));
font-size: 16px;
Expand Down
81 changes: 0 additions & 81 deletions src/components/CompleteWriting/FiveF.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,9 @@ import BasicProfile from "../../img/UI/basicProfile.png";
import GuideLineVerticleContent from "../../components/GuideLine/FiveFContent";
import { useParams } from "react-router-dom";
import axios from "axios";
import filledHeart from "../../img/UI/filledHeart.png";
import emptyHeart from "../../img/UI/emptyHeart.png";

type DataType = {
createdDate: string;
liked: boolean;
likesCount: number;
nickname: String;
reminiImage: string;
};
Expand All @@ -26,8 +22,6 @@ function CompleteWritingFiveF() {
const [retrospectiveData, setRetrospectiveData] = useState<DataType | null>(
null
);
const [isLiked, setIsLiked] = useState(false);
const [likesCount, setLikesCount] = useState(0);

useEffect(() => {
const fetchData = async () => {
Expand All @@ -53,53 +47,8 @@ function CompleteWritingFiveF() {
if (id) {
fetchData();
}

if (retrospectiveData) {
setIsLiked(retrospectiveData.liked);
setLikesCount(retrospectiveData.likesCount);
}
}, [id, retrospectiveData]);

//좋아요
const handleLikeClick = async () => {
const accessToken = localStorage.getItem("accessToken");
if (!accessToken) {
console.log("로그인이 필요합니다.");
return;
}

try {
let response;
if (!isLiked) {
response = await axios.post(
`https://www.remini.store/api/remini/${id}/likes`,
{},
{
headers: {
Authorization: `Bearer ${accessToken}`,
},
}
);
} else {
response = await axios.delete(
`https://www.remini.store/api/remini/${id}/likes`,
{
headers: {
Authorization: `Bearer ${accessToken}`,
},
}
);
}

if (response.status === 200) {
setIsLiked(!isLiked);
setLikesCount(isLiked ? likesCount - 1 : likesCount + 1);
}
} catch (error) {
console.error("좋아요 처리 중 오류 발생:", error);
}
};

return (
<>
<CompleteWritingWrap>
Expand Down Expand Up @@ -128,18 +77,6 @@ function CompleteWritingFiveF() {
alt="CompleteImg"
className="CompleteImg"
/>
<div className="likes" onClick={(e) => e.stopPropagation()}>
<img
src={isLiked ? filledHeart : emptyHeart}
alt="Heart"
onClick={handleLikeClick}
/>
<p
style={{ color: isLiked ? "var(--primary-400, #79CD96)" : "" }}
>
{likesCount}
</p>
</div>
</div>
</div>

Expand Down Expand Up @@ -322,24 +259,6 @@ const CompleteWritingWrap = styled.div`
rgba(18, 18, 18, 0.35) 100%
);
}
.likes {
position: absolute;
top: 190px;
right: 200px;
display: flex;
align-items: center;
gap: 8px;
}
.likes p {
color: rgba(255, 255, 255, 0.87);
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.user-name {
color: var(--text-high-emphasis, rgba(255, 255, 255, 0.87));
font-size: 16px;
Expand Down
Loading

0 comments on commit e2b1c11

Please sign in to comment.