Skip to content

Commit 4e05624

Browse files
dusunaxdusunax
authored
Merge pull request #22 from NyangGleNyangGle/feature/fishcount
[Feat] 붕어빵 갯수 구하기 세분화 & 하단 버튼 컴포넌트 분리
2 parents 4f7fa0a + 4fe1739 commit 4e05624

8 files changed

Lines changed: 184 additions & 117 deletions

File tree

‎src/components/member/ButtonContainer.jsx‎

Lines changed: 14 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,35 @@
11
import React from 'react';
2-
import { useNavigate } from 'react-router-dom';
3-
import { useRedirectPage } from '../../hooks/useRedirectPage';
42
import styled from 'styled-components';
53

4+
import ButtonText from './elements/ButtonText';
5+
import Button from './elements/Button';
6+
67
function ButtonContainer({ isMyPage, myUid, isLoggedUser }) {
7-
const navigate = useNavigate();
8-
const [setPage] = useRedirectPage();
8+
// 버튼 components
9+
const buttonToMyTruck = <ButtonText goTo={`/${myUid}`} text="내 붕어빵 트럭 가기" type="text" />;
10+
const buttonToCustomFish = <Button goTo={`/customFish/`} text="붕어빵 만들기" />;
11+
const buttonToMyList = <Button goTo={`/list/${myUid}`} text="내가 받은 붕어빵 확인" />;
12+
const buttonToMyLogin = <ButtonText goTo="/" text="로그인 하러 가기" type="text" />;
913

1014
return (
1115
<ButtonConatinerWrap>
12-
{isMyPage && (
13-
<button onClick={setPage.bind(this, `/list/${myUid}`)}>
14-
<img src="./assets/images/member/button.png" alt="내가 받은 붕어빵 확인 버튼" />
15-
<span> 내가 받은 붕어빵 확인</span>
16-
</button>
17-
)}
16+
{isMyPage && <>{buttonToMyList}</>}
1817

1918
{!isLoggedUser && (
2019
<>
21-
<button onClick={setPage.bind(this, `/customFish/`)}>
22-
<img src="./assets/images/member/button.png" alt="붕어빵 만들기 버튼" />
23-
<span>붕어빵 보내기</span>
24-
</button>
25-
<button onClick={setPage.bind(this, `/`)} className="buttonLink">
26-
<span>로그인 하러 가기</span>
27-
</button>
20+
{buttonToCustomFish}
21+
{buttonToMyLogin}
2822
</>
2923
)}
3024

3125
{!isMyPage && isLoggedUser && (
3226
<>
33-
<button onClick={setPage.bind(this, `/customFish/`)}>
34-
<img src="./assets/images/member/button.png" alt="붕어빵 만들기 버튼" />
35-
<span>붕어빵 보내기</span>
36-
</button>
37-
<button
38-
onClick={() => {
39-
navigate(`/${myUid}`, { state: { loggedIn: true } });
40-
}}
41-
className="buttonLink"
42-
>
43-
<span>내 붕어빵 트럭 가기</span>
44-
</button>
27+
{buttonToCustomFish}
28+
{buttonToMyTruck}
4529
</>
4630
)}
4731
</ButtonConatinerWrap>
4832
);
4933
}
5034

51-
export default ButtonContainer;
52-
53-
// 버튼 박스
54-
const ButtonConatinerWrap = styled.section`
55-
button {
56-
width: 100%;
57-
height: 70px;
58-
padding: 0;
59-
position: relative;
60-
cursor: pointer;
61-
font-family: 'kotra';
62-
font-size: 24px;
63-
line-height: 28px;
64-
/* font-weight: 700; */
65-
background-color: transparent;
66-
border: none;
67-
color: #ffffff;
68-
transition: all 0.2s;
69-
70-
img {
71-
width: 100%;
72-
position: absolute;
73-
top: 50%;
74-
left: 50%;
75-
transform: translate(-50%, -50%);
76-
}
77-
78-
span {
79-
position: absolute;
80-
top: 50%;
81-
left: 50%;
82-
transform: translate(-50%, -50%);
83-
white-space: nowrap;
84-
}
85-
86-
&:hover {
87-
transform: translateY(-2px);
88-
}
89-
}
90-
91-
.buttonLink {
92-
height: 70px;
93-
background: transparent;
94-
color: #73390b;
95-
96-
span {
97-
display: inline-block;
98-
line-height: 28px;
99-
border-bottom: 2px solid #73390b;
100-
101-
white-space: nowrap;
102-
}
103-
104-
&:hover {
105-
transform: translateY(-1px);
106-
opacity: 0.8;
107-
box-shadow: none;
108-
}
109-
}
110-
`;
35+
export default React.memo(ButtonContainer);

‎src/components/member/FishBreadTruck.jsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@ import React from 'react';
22
import { useRedirectPage } from '../../hooks/useRedirectPage';
33
import styled from 'styled-components';
44

5-
function FishBreadTruck({ displayFishImage, isMyPage, pageUuid }) {
5+
function FishBreadTruck({
6+
displayFishImage,
7+
isMyPage,
8+
pageUuid,
9+
fishSizeUnread,
10+
fishSizeMyUnread,
11+
}) {
612
const [setPage] = useRedirectPage();
713
return (
814
<FishBreadTruckWrap>
@@ -18,7 +24,7 @@ function FishBreadTruck({ displayFishImage, isMyPage, pageUuid }) {
1824
);
1925
}
2026

21-
export default FishBreadTruck;
27+
export default React.memo(FishBreadTruck);
2228

2329
const FishBreadTruckWrap = styled.section`
2430
width: 100%;

‎src/components/member/SectionTitle.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import { useRef, useState, useEffect } from 'react';
22
import useAxios from '../../hooks/useAxios';
33
import styled from 'styled-components';
4+
import { useRecoilState } from 'recoil';
5+
import { nickNameState } from '../../atoms/member';
6+
import { getUser } from '../../utils/userAuth';
47

5-
function SectionTitle({ fishSizeAll, isMyPage, logout, user, saveUser, isLoggedUser }) {
8+
function SectionTitle({ fishSizeAll, isMyPage, logout, user, saveUser }) {
69
const [isEditMode, setIsEditMode] = useState(false);
710
const [userName, setUserName] = useState(user?.nickname);
811
const [newUserName, setNewUserName] = useState();

‎src/components/member/elements/Button.jsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import styled from 'styled-components';
2+
import ButtonText from './ButtonText';
3+
4+
const Button = ({ text, goTo }) => {
5+
return (
6+
<StButton text={text} goTo={goTo}>
7+
<img src="./assets/images/member/button.png" alt={text + ' 버튼'} />
8+
</StButton>
9+
);
10+
};
11+
12+
export default Button;
13+
14+
const StButton = styled(ButtonText)`
15+
/* padding: 0; */
16+
/* font-weight: 700; */
17+
/* background-color: transparent;
18+
transition: all 0.2s;
19+
background-color: red;
20+
21+
span {
22+
position: absolute;
23+
top: 50%;
24+
left: 50%;
25+
transform: translate(-50%, -50%);
26+
white-space: nowrap;
27+
color: #ffffff !important;
28+
}
29+
30+
&:hover {
31+
transform: translateY(-2px);
32+
} */
33+
`;

‎src/components/member/elements/ButtonText.jsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import styled from 'styled-components';
2+
import { useRedirectPage } from '../../../hooks/useRedirectPage';
3+
4+
const ButtonText = ({ text = '링크 버튼 텍스트', goTo = `/`, children, type = 'button' }) => {
5+
const [setPage] = useRedirectPage();
6+
7+
return (
8+
<StButtonText onClick={setPage.bind(this, goTo)}>
9+
{children}
10+
<span className={type === 'text' ? 'text' : ''}>{text}</span>
11+
</StButtonText>
12+
);
13+
};
14+
15+
export default ButtonText;
16+
17+
const StButtonText = styled.button`
18+
width: 100%;
19+
height: 70px;
20+
21+
position: relative;
22+
23+
background: transparent;
24+
border: none;
25+
color: #fff;
26+
27+
font-family: 'kotra';
28+
font-size: 24px;
29+
line-height: 28px;
30+
31+
cursor: pointer;
32+
transition: all 0.2s;
33+
34+
img,
35+
span {
36+
position: absolute;
37+
top: 50%;
38+
left: 50%;
39+
transform: translate(-50%, -50%);
40+
}
41+
42+
img {
43+
width: 100%;
44+
}
45+
46+
span {
47+
transform: translate(-50%, calc(-50% - 2px));
48+
}
49+
50+
span.text {
51+
display: inline-block;
52+
line-height: 40px;
53+
color: #73390b;
54+
border-bottom: 2px solid #73390b;
55+
56+
white-space: nowrap;
57+
}
58+
59+
&:hover {
60+
transform: translateY(-2px);
61+
}
62+
63+
span.text:hover {
64+
opacity: 0.8;
65+
box-shadow: none;
66+
}
67+
`;

‎src/main.jsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,4 @@ import App from './App';
44
import '../public/assets/font/font.css';
55
import '../public/assets/font/font703.css';
66

7-
ReactDOM.createRoot(document.getElementById('root')).render(
8-
<App />
9-
,
10-
);
7+
ReactDOM.createRoot(document.getElementById('root')).render(<App />);

‎src/pages/member/Member.jsx‎

Lines changed: 57 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect, useState } from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import { useNavigate } from 'react-router-dom';
33
import useAxios from '../../hooks/useAxios';
44
import styled from 'styled-components';
@@ -22,7 +22,9 @@ function Member() {
2222
const [isMyPage, setIsMyPage] = useState(false);
2323

2424
// title이랑 엮여 있어서 여기에 놔둠. 매대의 붕어빵 갯수 관련
25-
const [fishSizeAll, setFishSizeAll] = useState();
25+
const [fishSizeAll, setFishSizeAll] = useState('?');
26+
const [fishSizeUnread, setFishSizeUnread] = useState();
27+
const [fishSizeMyUnread, setFishSizeMyUnread] = useState();
2628
const [displayFishImage, setDisplayFishImage] = useState('cat_truck_0.png');
2729

2830
const memeberCheck = (isLogin) => {
@@ -56,44 +58,76 @@ function Member() {
5658
// console.log('토큰이 만료 되었습니다.');
5759
return false;
5860
} else {
59-
// console.log(`로그인 상태입니다. ${user.nickname}`);
61+
// console.log(`로그인 상태입니다. ${user?.nickname}`);
6062
return true;
6163
}
6264
};
6365

64-
async function getFishSizeAll() {
65-
const response = await requestApi('get', `count/${'U184ce3ac09d0003'}`);
66-
try {
67-
console.log(response);
68-
if (response.status === 200) {
69-
// setFishSizeAll()
66+
// this를 쓰고 싶었음
67+
const fish = {
68+
api: '/uuid',
69+
70+
fetchCount: async function () {
71+
try {
72+
const response = await requestApi('get', '/fishbread/' + this.api);
73+
return response.status === 200 ? response.data : '';
74+
} catch (error) {
75+
console.log(error.code);
7076
}
71-
} catch (error) {
72-
console.log(error.code);
73-
} finally {
74-
}
75-
}
77+
},
78+
};
7679

7780
// 붕어빵 갯수 보여주기
78-
let countUp = 2; // sizeAll 받아오면 이거 삭제
79-
const matchCatTruckImage = (countUp) => {
80-
if (countUp < 6) {
81-
setDisplayFishImage(countFishTruckImages.default[countUp].imageURL);
81+
const matchCatTruckImage = (fishCount) => {
82+
if (fishCount < 6) {
83+
setDisplayFishImage(countFishTruckImages.default[fishCount].imageURL);
8284
} else {
8385
// 이 부분 교체
8486
setDisplayFishImage('cat_truck_6.png');
8587
}
86-
setFishSizeAll(countUp);
8788
};
8889

90+
async function fetchFishCountHandler() {
91+
if (isMyPage) {
92+
// 내 페이지에서 붕어빵 갯수값이 없으면 요청
93+
if (isNaN(fishSizeAll)) {
94+
const fetchedCount = await fish.fetchCount.call({ api: `${user?.uuid}/total` });
95+
setFishSizeAll(fetchedCount);
96+
}
97+
if (!fishSizeMyUnread) {
98+
const fetchedCount = await fish.fetchCount.call({ api: `${user?.uuid}/myunread` });
99+
setFishSizeMyUnread(fetchedCount);
100+
}
101+
}
102+
if (!fishSizeUnread) {
103+
const fetchedCount = await fish.fetchCount.call({ api: `${pageUuid}/unread` });
104+
setFishSizeUnread(fetchedCount);
105+
}
106+
107+
// api response 통합하면 여기로 값 return해서 쓰기
108+
// return {}
109+
}
110+
89111
useEffect(() => {
90-
// getFishSizeAll();
112+
const fishes = fetchFishCountHandler();
113+
if (fishes.unread) matchCatTruckImage(fishes.unread);
91114

92-
matchCatTruckImage(countUp);
93115
const isLogin = userTokenHandler(user, logout);
94116
setIsLoggedUser(isLogin);
95117

96118
if (isLogin) memeberCheck(isLogin);
119+
120+
const preventGoBack = () => {
121+
// change start
122+
history.pushState(null, '', location.href);
123+
// change end
124+
console.log('prevent go back!');
125+
};
126+
127+
history.pushState(null, '', location.href);
128+
window.addEventListener('popstate', preventGoBack);
129+
130+
return () => window.removeEventListener('popstate', preventGoBack);
97131
}, [location, matchCatTruckImage, userTokenHandler, setIsLoggedUser]);
98132

99133
return (
@@ -115,6 +149,8 @@ function Member() {
115149
isMyPage={isMyPage}
116150
displayFishImage={displayFishImage}
117151
pageUuid={pageUuid}
152+
fishSizeUnread={fishSizeUnread}
153+
fishSizeMyUnread={fishSizeMyUnread}
118154
/>
119155

120156
{/* 로그인 여부에 따라 바뀌는 버튼 */}

‎src/utils/fishCount.js‎

Whitespace-only changes.

0 commit comments

Comments
 (0)