진행 과정
1. 카카오톡 공유 개선
1-1. 공유 이미지 클릭 시 결과 이미지 확대해서 보여주기
1-2. 앱 제목 변경
1-3. 공유 버튼으로 자세히 보기랑 나도 해보기 넣기
2. 화면 개선
2-1. 제목 색상 변경
2-2. 공유 버튼 위치 변경
2-3. 설명 색상 변경
2-4. 로딩 동그라미 여백
2-5. 업로드 버튼 색상
2-6. 컬러 테마 설정
1. 카카오톡 공유 개선
1-1. 공유 이미지 클릭 시 결과 이미지 확대해서 보여주기
방법:
- 공유 메시지 내 접속 URL에 이미지 URL을 get paramter로 추가
// ...
.then(function(response) {
var prob = Math.round(props.result[0]["probability"] * 100).toString()
var title = '당신은 ' + prob + '% ' + props.result[0]["className"] + ' 입니다'
var imgUrl = response.infos.original.url
var webUrl = 'https://harang90.github.io?img=' + imgUrl
console.log(webUrl)
kakao.Share.sendDefault({
objectType: 'feed',
content: {
title: title,
imageUrl:
imgUrl,
link: {
mobileWebUrl: webUrl,
webUrl: webUrl,
},
},
});
// ...- get paramter로 이미지 URL이 있으면 결과 박스에 해당 이미지 보여줌
// 초기화 시 imgUrl 가져옴
function App() {
let query = new URLSearchParams(useLocation().search);
let imgUrl = query.get("img");
var isImg;
if (imgUrl) isImg = true;
else isImg = false;
const [hidden, setHidden] = useState(isImg);
// imgUrl 유무 여부에 따라 달라짐
{hidden && imgUrl && (
<MyImgBox imgUrl={imgUrl} />
)}
1-2. 앱 제목 변경
방법:
- https://developers.kakao.com/console/app 에서 변경
1-3. 공유 버튼으로 자세히 보기랑 나도 해보기 넣기
방법:
- 카카오톡 공유 메시지에 button 추가
kakao.Share.sendDefault({
objectType: 'feed',
content: {
title: title,
imageUrl:
imgUrl,
link: {
mobileWebUrl: webUrl,
webUrl: webUrl,
},
},
buttons: [
{
title: '자세히 보기',
link: {
mobileWebUrl: webUrl,
webUrl: webUrl,
},
},
{
title: '나도 해보기',
link: {
mobileWebUrl: 'https://harang90.github.io/',
webUrl: 'https://harang90.github.io/',
},
},
],
});2. 화면 개선
2-1. 제목 색상 변경
- 참고 사이트: poomang.com
- 나는 솔로 이미지 참고
타이틀:
관련 코드:
const Title = () => {
return (
<Box
sx={{
backgroundColor: 'pink',
maxWidth: '100px',
margin: '0 auto',
}}
>
<Typography
variant="h3"
color="white"
align="center"
m={1}
pt={2}
sx={{
fontFamily: 'Black Han Sans'
}}
>
나는
</Typography>
<Typography
variant="h3"
color="red"
align="center"
m={1} mt={0}
sx={{
fontFamily: 'Black Han Sans'
}}
>
솔로
</Typography>
<Box
sx={{
backgroundColor: 'white'
}}
>
<Typography
variant="h4"
color="secondary"
align="center"
m={1}
sx={{
fontFamily: 'Black Han Sans'
}}
>
TEST
</Typography>
</Box>
</Box>
);
};2-2. 공유 버튼 위치 변경
관련코드:
const ShareButton = (props) => {
//...
return (
<Box component="button" onClick={shareKakao}
sx={{
width: 300,
margin: '0 auto',
border: 'none',
display: 'flex',
justifyContent: 'center',
backgroundColor: 'transparent',
'&:hover': {
backgroundColor: 'primary.light',
opacity: [0.9, 0.9, 0.9],
},
}}
>
<img src="https://developers.kakao.com/assets/img/about/logos/kakaotalksharing/kakaotalk_sharing_btn_small.png" alt="카카오톡 공유 보내기 버튼" />
</Box>
);
}
2-3. 설명 색상 변경
관련코드:
const MyDescription = (props) => {
return (
<Typography
variant="h7"
color="secondary"
align="center"
sx={{ display: 'block' }}
m={0.5}
>
{props.description}
</Typography>
);
};
2-4. 로딩 동그라미 여백
관련코드:
<Stack m={1} sx={{ alignItems: 'center'}}>
<CircularProgress />
</Stack>
2-5. 업로드 버튼 색상
관련코드:
<Button variant="outlined" onClick={handleButtonClick}
sx={{
border: '1px solid purple',
backgroundColor: purple,
width: '100%',
height: '100%',
display: 'block',
}}
>
<Typography color="secondary" component="div">
<PermMediaIcon sx={{ mr:1 }} />
</Typography>
<Typography component="div" color="secondary">사진을 올려주세요</Typography>
</Button>
2-6. 컬러 테마 설정
관련코드:
const theme = createTheme({
palette: {
primary: purple,
secondary: purple,
},
});
