Skip to content

Commit 067c362

Browse files
okodeeeokodeee
authoredNov 15, 2024
Merge pull request #53 from VOM-Project/feature/touchpoint
feat: add Touchpoint component
2 parents 7305a1e + be29c4c commit 067c362

File tree

3 files changed

+146
-16
lines changed

3 files changed

+146
-16
lines changed
 

‎src/components/HomepyPage/Profile.js

+37-10
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import styled from "styled-components";
55
import "./Profile.css";
66
import "../../pages/homepy-styleguide.css";
77

8-
// import Touchpoint from "../HomepyPage/Touchpoint.js";
8+
import Touchpoint from "./Touchpoint.js";
99

1010
import Ic_baseline_people from "../../assets/ic-baseline-people.svg";
1111
import Ic_outline_email from "../../assets/ic-outline-email.svg";
@@ -89,16 +89,45 @@ export default function Profile({ memberId }) {
8989
*/
9090
const [touchpoints, setTouchpoints] = useState([]);
9191
const [showTouchpoints, setShowTouchpoints] = useState(false);
92-
93-
const handleButtonClick = async () => {
92+
const localMemberId = localStorage.getItem("memberId");
93+
const handleTouchpointButtonClick = async () => {
9494
try {
95-
const response = await axios.get(`/api/touchpoint/${memberId}`, config);
96-
setTouchpoints(response.data);
97-
setShowTouchpoints(true);
95+
if (memberId != localMemberId) {
96+
axios.post(`/api/touchpoint/${memberId}`, null, {
97+
params: {
98+
from_member_id: localStorage.getItem("memberId")
99+
}, headers: {
100+
Authorization: `Bearer ${localStorage.getItem("accessToken")}`
101+
}
102+
})
103+
.then(response => {
104+
if (response.status === 200) {
105+
console.log('터치포인트가 성공적으로 전송되었습니다');
106+
alert('터치포인트가 성공적으로 전송되었습니다');
107+
// 성공적인 응답을 처리합니다
108+
} else {
109+
throw new Error('터치포인트 전송 실패');
110+
}
111+
})
112+
} else {
113+
axios.get(`/api/touchpoint/${memberId}`, config)
114+
.then(response => {
115+
setTouchpoints(response.data);
116+
setShowTouchpoints(true);
117+
alert('버튼 눌림');
118+
})
119+
.catch(error => {
120+
console.error('오류:', error);
121+
});
122+
}
98123
} catch (error) {
99124
console.error("Error fetching touchpoints:", error);
100125
}
101126
};
127+
const handleCloseTouchpoints = () => {
128+
setShowTouchpoints(false);
129+
}
130+
102131

103132
/*
104133
* Render
@@ -160,14 +189,12 @@ export default function Profile({ memberId }) {
160189
/>
161190
</ModalButtonContainer>
162191
<div className="interaction">
163-
<button className="button-white" onClick={handleButtonClick}>
192+
<button className="button-white" onClick={handleTouchpointButtonClick}>
164193
<img className="svg-2" alt="heart-svg" src={Mdi_heart} />
165194
<div className="button-white-text">터치포인트</div>
166195
</button>
167196

168-
{/* {showTouchpoints && (
169-
<Touchpoint touchpoints={touchpoints} />
170-
)} */}
197+
{showTouchpoints && <Touchpoint onClose={() => handleCloseTouchpoints()} touchpoints={touchpoints} />}
171198

172199
<button className="button-pink">
173200
<img

‎src/components/HomepyPage/Touchpoint.css

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
.touchpoint {
2+
height: 368px;
3+
width: 180px;
4+
position: absolute;
5+
top: -300px;
6+
left: 250px;
7+
transform: translateX(-50%);
8+
background-color: white;
9+
border: 1px solid #ccc;
10+
padding: 10px;
11+
z-index: 1000;
12+
}
13+
14+
.touchpoint .overlap-group {
15+
border-radius: 8px;
16+
height: 368px;
17+
position: relative;
18+
}
19+
20+
.touchpoint .menu {
21+
align-items: flex-start;
22+
background-color: var(--white);
23+
border-radius: 8px;
24+
box-shadow: var(--drop);
25+
display: flex;
26+
flex-direction: column;
27+
left: 0;
28+
overflow: hidden;
29+
padding: 8px 0px;
30+
position: absolute;
31+
top: 0;
32+
width: 180px;
33+
}
34+
35+
.touchpoint .menu-item {
36+
align-items: center;
37+
align-self: stretch;
38+
display: flex;
39+
gap: 8px;
40+
height: 44px;
41+
padding: 8px 16px;
42+
position: relative;
43+
width: 100%;
44+
}
45+
46+
.touchpoint .div {
47+
align-items: center;
48+
display: flex;
49+
flex: 1;
50+
flex-grow: 1;
51+
gap: 8px;
52+
position: relative;
53+
}
54+
55+
.touchpoint .profile-img {
56+
height: 36px;
57+
position: relative;
58+
width: 36px;
59+
}
60+
61+
.touchpoint .text-wrapper {
62+
color: var(--graysubtitle);
63+
flex: 1;
64+
font-family: var(--body-sm-regular-font-family);
65+
font-size: var(--body-sm-regular-font-size);
66+
font-style: var(--body-sm-regular-font-style);
67+
font-weight: var(--body-sm-regular-font-weight);
68+
letter-spacing: var(--body-sm-regular-letter-spacing);
69+
line-height: var(--body-sm-regular-line-height);
70+
position: relative;
71+
}
72+
73+
.touchpoint .rectangle {
74+
background-color: var(--graydisabled);
75+
border-radius: 8px;
76+
height: 100px;
77+
left: 172px;
78+
position: absolute;
79+
top: 4px;
80+
width: 4px;
81+
}

‎src/components/HomepyPage/Touchpoint.js

+28-6
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,41 @@
11
import React from "react";
2-
import "../../pages/homepy-style.css";
2+
import axios from "axios";
3+
import "./Touchpoint.css";
34
import "../../pages/homepy-styleguide.css";
45

5-
export default function Touchpoint({ touchpoints }) {
6+
import Icon_24 from "../../assets/icon_24.svg";
7+
8+
export default function Touchpoint({ onClose, touchpoints }) {
9+
const config = {
10+
headers: {
11+
Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
12+
},
13+
};
14+
15+
async function getProfile(fromMemberId) {
16+
await axios
17+
.get(`/api/homepy/${fromMemberId}/profile`, config)
18+
.then((response) => {
19+
console.log(response.data);
20+
return response.data.nickname;
21+
})
22+
.catch((error) => {
23+
console.log(error);
24+
});
25+
}
26+
627
return (
7-
<div className="frame">
28+
<div className="touchpoint">
29+
<img className="icon-modal" alt="Icon" src={Icon_24} onClick={onClose} />
830
<div className="overlap-group">
931
<div className="menu">
1032
{touchpoints.map((touchpoint, index) => (
1133
<div key={index} className="menu-item">
1234
<div className="div">
1335
<img className="profile-img" alt={`Profile of member ${touchpoint.fromMemberId}`} src={touchpoint.fromMemberProfileImgUrl} />
14-
<div className="text-wrapper">Member ID: {touchpoint.fromMemberId}</div>
15-
<div className="text-wrapper">Created At: {new Date(touchpoint.createdAt).toLocaleString()}</div>
16-
{/* <div className="text-wrapper">오수아</div> */}
36+
<div className="text-wrapper">Member ID: {(touchpoint.fromMemberId)}</div>
37+
<div className="text-wrapper">{new Date(touchpoint.createdAt).toLocaleString()}</div>
38+
<div className="text-wrapper"></div>
1739
</div>
1840
</div>
1941
))}

0 commit comments

Comments
 (0)
Please sign in to comment.