Skip to content

Commit 9467f72

Browse files
khyaejinkhyaejin
authored
Merge pull request #64 from HSU-Deulbull/chore/khyaejin-main/#63
Chore/khyaejin main/#63
2 parents 9a25387 + 913a15d commit 9467f72

17 files changed

Lines changed: 182 additions & 33 deletions

File tree

‎index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
<!-- Google tag (gtag.js) -->
5+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-27K54458MY"></script>
6+
<script>
7+
window.dataLayer = window.dataLayer || [];
8+
function gtag(){dataLayer.push(arguments);}
9+
gtag('js', new Date());
10+
11+
gtag('config', 'G-27K54458MY');
12+
</script>
13+
414
<meta charset="UTF-8" />
515
<meta name="description" content="들불 공연 예매 페이지입니다." />
616
<!-- 링크 공유 정보(카카오톡 등) -->

‎src/pages/home/components/ButtonList/styles/ButtonItem.style.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ export const ItemWrapper = styled.div<ItemWrapperProps>`
1515
align-items: center;
1616
gap: 0.4rem;
1717
cursor: pointer;
18+
transition: transform 0.1s ease;
19+
20+
&:active {
21+
transform: scale(0.95);
22+
}
1823
`;
1924

2025
export const ItemImg = styled.img<ItemImgProps>`

‎src/pages/home/components/ButtonList/styles/ButtonList.style.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const ButtonListContainer = styled.div`
88
display: flex;
99
justify-content: space-between;
1010
align-items: flex-start;
11-
margin-top: 15.4rem;
11+
margin-top: 15.2rem;
1212
left: 50%;
1313
transform: translate(-50%);
1414
`;

‎src/pages/home/components/DropDown/styles/DropDownBtn.style.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const DropDownContainer = styled.div`
1616
width: 7.9rem;
1717
height: 2.8rem;
1818
position: absolute;
19-
top: 65rem;
19+
top: 64.6rem;
2020
left: 50%;
2121
transform: translatex(-50%);
2222
cursor: pointer;

‎src/pages/home/components/Header/styles/HeaderTitle.style.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ export const HeaderTitleContainer = styled.div`
99
`;
1010

1111
export const HeaderTitle = styled.p`
12-
font-size: 1.6rem;
13-
font-weight: 700;
12+
font-size: 1.4rem;
13+
font-weight: 600;
1414
`;
1515

1616
export const HeaderDescription = styled.p`
17-
font-size: 1rem;
18-
font-weight: 500;
17+
font-size: 0.9rem;
18+
font-weight: 400;
1919
`;

‎src/pages/home/components/More/More.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
11
import * as S from './styles/More.style';
22
import MoreButtonItem from './MoreButtonItem';
33
import { useHomeStore } from '../../../../store/homeStore/homeStore';
4+
import { useFadeIn } from '../../hooks/useFadeIn';
45

56
function More() {
67
const IconArray = useHomeStore((state) => state.homeData?.moreLinks);
8+
const { elementRef, isVisible } = useFadeIn({
9+
threshold: 0.01,
10+
delay: 0,
11+
rootMargin: '100px',
12+
});
713

814
if (!IconArray) {
915
return null;
1016
}
1117

1218
return (
13-
<S.MoreBtnContainer>
19+
<S.MoreBtnContainer ref={elementRef} $isVisible={isVisible}>
1420
<S.MoreBtnTitle>More</S.MoreBtnTitle>
1521
<S.MoreButtonList>
1622
{IconArray.map((item, index) => (

‎src/pages/home/components/More/styles/More.style.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import styled from 'styled-components';
22

3-
export const MoreBtnContainer = styled.div`
3+
interface MoreBtnContainerProps {
4+
$isVisible: boolean;
5+
}
6+
7+
export const MoreBtnContainer = styled.div<MoreBtnContainerProps>`
48
width: 90%;
59
max-width: 34.5rem;
610
height: 11.3rem;
@@ -11,6 +15,9 @@ export const MoreBtnContainer = styled.div`
1115
top: 181.6rem;
1216
left: 50%;
1317
transform: translateX(-50%);
18+
opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0.3)};
19+
transform: translateX(-50%) translateY(${({ $isVisible }) => ($isVisible ? '0' : '10px')});
20+
transition: opacity 1s ease-out, transform 1s ease-out;
1421
`;
1522

1623
export const MoreButtonList = styled.div`

‎src/pages/home/components/More/styles/MoreButtonItem.style.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,12 @@ export const ItemWrapper = styled.div`
1414
justify-content: space-between;
1515
gap: 0.8rem;
1616
align-items: center;
17+
cursor: pointer;
18+
transition: transform 0.1s ease;
19+
20+
&:active {
21+
transform: scale(0.95);
22+
}
1723
`;
1824

1925
export const ItemImg = styled.img<ItemImgProps>`

‎src/pages/home/components/NowPlaying/NowPlaying.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,13 @@ import * as S from './styles/NowPlaying.style';
22
import NowPlayingInfo from './NowPlayingInfo';
33
import Player from './Player';
44
import NowPlayingNotice from './NowPlayingNotice';
5+
import { useFadeIn } from '../../hooks/useFadeIn';
56

67
function NowPlaying() {
8+
const { elementRef, isVisible } = useFadeIn({ threshold: 0.2, delay: 150 });
9+
710
return (
8-
<S.NowPlayingContainer>
11+
<S.NowPlayingContainer ref={elementRef} $isVisible={isVisible}>
912
<NowPlayingInfo />
1013
<Player />
1114
<NowPlayingNotice />

‎src/pages/home/components/NowPlaying/styles/NowPlaying.style.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
import styled from 'styled-components';
22

3-
export const NowPlayingContainer = styled.div`
3+
interface NowPlayingContainerProps {
4+
$isVisible: boolean;
5+
}
6+
7+
export const NowPlayingContainer = styled.div<NowPlayingContainerProps>`
48
position: absolute;
59
top: 114.1rem;
610
width: 90%;
711
max-width: 34.6rem;
812
left: 50%;
913
transform: translateX(-50%);
1014
height: 23.6rem;
15+
opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0.3)};
16+
transform: translateX(-50%) translateY(${({ $isVisible }) => ($isVisible ? '0' : '10px')});
17+
transition: opacity 1s ease-out, transform 1s ease-out;
1118
`;

0 commit comments

Comments
 (0)