Skip to content

Commit e974532

Browse files
dusunaxdusunax
committed
[Feat] 각 Button 컴포넌트 분리
1 parent 3d893c6 commit e974532

8 files changed

Lines changed: 132 additions & 96 deletions

File tree

‎src/components/member/ButtonContainer.jsx‎

Lines changed: 15 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,38 @@
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;
35+
export default React.memo(ButtonContainer);
5236

5337
// 버튼 박스
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-
`;
38+
const ButtonConatinerWrap = styled.section``;

‎src/components/member/FishBreadTruck.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ function FishBreadTruck({
2424
);
2525
}
2626

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

2929
const FishBreadTruckWrap = styled.section`
3030
width: 100%;

‎src/components/member/SectionTitle.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,6 @@ function SectionTitle({ fishSizeAll, isMyPage, logout, user, saveUser }) {
6868
'천원도 카드 된다냥!',
6969
];
7070

71-
let timeout;
7271
const refreshComment = () => {
7372
let currentComment = (
7473
<CatsComment>

‎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: 15 additions & 3 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,7 @@ function Member() {
2222
const [isMyPage, setIsMyPage] = useState(false);
2323

2424
// title이랑 엮여 있어서 여기에 놔둠. 매대의 붕어빵 갯수 관련
25-
const [fishSizeAll, setFishSizeAll] = useState();
25+
const [fishSizeAll, setFishSizeAll] = useState('?');
2626
const [fishSizeUnread, setFishSizeUnread] = useState();
2727
const [fishSizeMyUnread, setFishSizeMyUnread] = useState();
2828
const [displayFishImage, setDisplayFishImage] = useState('cat_truck_0.png');
@@ -90,7 +90,7 @@ function Member() {
9090
async function fetchFishCountHandler() {
9191
if (isMyPage) {
9292
// 내 페이지에서 붕어빵 갯수값이 없으면 요청
93-
if (!fishSizeAll) {
93+
if (isNaN(fishSizeAll)) {
9494
const fetchedCount = await fish.fetchCount.call({ api: `${user?.uuid}/total` });
9595
setFishSizeAll(fetchedCount);
9696
}
@@ -116,6 +116,18 @@ function Member() {
116116
setIsLoggedUser(isLogin);
117117

118118
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);
119131
}, [location, matchCatTruckImage, userTokenHandler, setIsLoggedUser]);
120132

121133
return (

‎src/utils/fishCount.js‎

Whitespace-only changes.

0 commit comments

Comments
 (0)