Skip to content

Commit bfd711c

Browse files
Cllaude99Cllaude99
committed
feat: 밈 상세버튼 버튼 수정
- 웹뷰인지의 여부에 따라 버튼의 동작 및 기능 수정
1 parent b2a2541 commit bfd711c

File tree

4 files changed

+129
-42
lines changed

4 files changed

+129
-42
lines changed

‎apps/web/src/assets/icons/components/DonwloadIcon.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { IconProps } from '@/assets/icons/types';
2+
const DonwloadIcon = ({ width = 25, height = 24 }: IconProps) => {
3+
return (
4+
<svg
5+
xmlns="http://www.w3.org/2000/svg"
6+
width={width}
7+
height={height}
8+
fill="none"
9+
viewBox="0 0 25 24"
10+
>
11+
<path
12+
stroke="#fff"
13+
strokeLinecap="round"
14+
strokeLinejoin="round"
15+
strokeWidth="1.5"
16+
d="m16.5 10.5-4 4-4-4M12.5 5v9"
17+
/>
18+
<path
19+
stroke="#fff"
20+
strokeLinecap="round"
21+
strokeLinejoin="round"
22+
strokeWidth="1.5"
23+
d="M19.5 14v3a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-3"
24+
/>
25+
</svg>
26+
);
27+
};
28+
29+
export default DonwloadIcon;

‎apps/web/src/assets/icons/components/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import QuizWrongIcon from './QuizWrongIcon';
1010
import KakaoIcon from './KakaoIcon';
1111
import LinkCopyIcon from './LinkCopyIcon';
1212
import MoreInfo from './MoreInfo';
13+
import DonwloadIcon from './DonwloadIcon';
1314

1415
export {
1516
ShareIcon,
@@ -24,4 +25,5 @@ export {
2425
MoreInfo,
2526
KakaoIcon,
2627
LinkCopyIcon,
28+
DonwloadIcon,
2729
};

‎apps/web/src/pages/MemeDetailPage/MemeDetailPage.styles.ts‎

Lines changed: 41 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,11 @@ const Image = styled.img`
2424
border-radius: 12px;
2525
`;
2626

27-
const ButtonContainer = styled.div`
27+
interface ButtonContainerProps {
28+
isWebview: boolean;
29+
}
30+
31+
const ButtonContainer = styled.div<ButtonContainerProps>`
2832
position: fixed;
2933
max-width: ${({ theme }) => theme.breakpoints.mobile};
3034
left: 50%;
@@ -34,33 +38,60 @@ const ButtonContainer = styled.div`
3438
padding: 12px 14px 40px;
3539
background-color: ${({ theme }) => theme.palette.gray['gray-10']};
3640
border-top: 1px solid ${({ theme }) => theme.palette.gray['gray-9']};
37-
display: flex;
41+
display: grid;
42+
grid-template-columns: ${({ isWebview }) =>
43+
isWebview ? '1fr 2fr' : '1fr 1fr'};
3844
gap: 8px;
3945
z-index: 10;
4046
`;
4147

4248
interface ActionButtonProps {
4349
isPrimary?: boolean;
50+
isWebview?: boolean;
51+
variant?: 'share' | 'download';
4452
}
4553

4654
const ActionButton = styled.button<ActionButtonProps>`
47-
flex: ${({ isPrimary }) => (isPrimary ? 1 : 2)};
55+
width: 100%;
4856
display: flex;
4957
align-items: center;
5058
justify-content: center;
51-
gap: 4px;
52-
background-color: ${({ theme, isPrimary }) =>
53-
isPrimary ? theme.palette.gray['gray-9'] : theme.palette.main.pink[50]};
59+
gap: 6px;
60+
background-color: ${({ theme, isPrimary, variant }) => {
61+
if (!variant) {
62+
return isPrimary
63+
? theme.palette.gray['gray-9']
64+
: theme.palette.main.pink[50];
65+
}
66+
return variant === 'share'
67+
? theme.palette.main.pink[95]
68+
: theme.palette.main.pink[50];
69+
}};
5470
border: none;
5571
border-radius: 8px;
5672
cursor: pointer;
57-
padding: 12px;
73+
padding: 14px;
5874
${({ theme }) => theme.typography.title.subhead2};
59-
color: ${({ theme }) => theme.palette.common.white};
75+
color: ${({ theme, variant }) => {
76+
if (!variant) {
77+
return theme.palette.common.white;
78+
}
79+
return variant === 'share'
80+
? theme.palette.gray['gray-9']
81+
: theme.palette.common.white;
82+
}};
6083
6184
&:hover {
62-
background-color: ${({ theme, isPrimary }) =>
63-
isPrimary ? theme.palette.gray['gray-8'] : theme.palette.main.pink[40]};
85+
background-color: ${({ theme, isPrimary, variant }) => {
86+
if (!variant) {
87+
return isPrimary
88+
? theme.palette.gray['gray-8']
89+
: theme.palette.main.pink[40];
90+
}
91+
return variant === 'share'
92+
? theme.palette.main.pink[90]
93+
: theme.palette.main.pink[40];
94+
}};
6495
}
6596
`;
6697

‎apps/web/src/pages/MemeDetailPage/index.tsx‎

Lines changed: 57 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Layout from '@/components/Layout';
22
import {
3+
DonwloadIcon,
34
MemeDesignPenIcon,
45
ShareIcon,
56
SymbolThreeIcon,
@@ -100,38 +101,62 @@ const MemeDetailPage = () => {
100101
<S.SectionText>{memeDetail?.success.origin}</S.SectionText>
101102
</S.ContentContainer>
102103
</S.Container>
103-
<S.ButtonContainer>
104-
<S.ActionButton
105-
isPrimary
106-
onClick={() => {
107-
// 밈 꾸미기 mutation
108-
customMeme({ id: memeId! });
109-
110-
if (isWebview) {
111-
nativeBridge.customMeme({
112-
title: memeDetail?.success.title ?? '',
113-
image: memeDetail?.success.imgUrl ?? '',
114-
});
115-
} else {
116-
moveToStore();
117-
}
118-
}}
119-
>
120-
<MemeDesignPenIcon />
121-
<span>밈 꾸미기</span>
122-
</S.ActionButton>
123-
<S.ActionButton
124-
onClick={() => {
125-
// 밈 공유하기 mutation
126-
shareMeme({ id: memeId! });
127-
128-
// 공유 시트 열기
129-
setShareSheetOpen(true);
130-
}}
131-
>
132-
<ShareIcon />
133-
<span>공유하기</span>
134-
</S.ActionButton>
104+
<S.ButtonContainer isWebview={isWebview}>
105+
{isWebview ? (
106+
<>
107+
<S.ActionButton
108+
isPrimary
109+
isWebview={isWebview}
110+
onClick={() => {
111+
// 밈 꾸미기 mutation
112+
customMeme({ id: memeId! });
113+
nativeBridge.customMeme({
114+
title: memeDetail?.success.title ?? '',
115+
image: memeDetail?.success.imgUrl ?? '',
116+
});
117+
}}
118+
>
119+
<MemeDesignPenIcon />
120+
<span>밈 꾸미기</span>
121+
</S.ActionButton>
122+
<S.ActionButton
123+
isWebview={isWebview}
124+
onClick={() => {
125+
// 밈 공유하기 mutation
126+
shareMeme({ id: memeId! });
127+
// 공유 시트 열기
128+
setShareSheetOpen(true);
129+
}}
130+
>
131+
<ShareIcon />
132+
<span>공유하기</span>
133+
</S.ActionButton>
134+
</>
135+
) : (
136+
<>
137+
<S.ActionButton
138+
variant="share"
139+
onClick={() => {
140+
// 밈 공유하기 mutation
141+
shareMeme({ id: memeId! });
142+
// 공유 시트 열기
143+
setShareSheetOpen(true);
144+
}}
145+
>
146+
<ShareIcon />
147+
<span>공유하기</span>
148+
</S.ActionButton>
149+
<S.ActionButton
150+
variant="download"
151+
onClick={() => {
152+
moveToStore();
153+
}}
154+
>
155+
<DonwloadIcon />
156+
<span>앱 다운로드</span>
157+
</S.ActionButton>
158+
</>
159+
)}
135160
</S.ButtonContainer>
136161
</>
137162
)}

0 commit comments

Comments
 (0)