Skip to content

Commit

Permalink
Merge pull request #94 from AJD-Archive/feature/91
Browse files Browse the repository at this point in the history 
구글 애널리틱스 로컬 제외 & 동적 메타데이터 설정
  • Loading branch information
@MyungJiwoo
MyungJiwoo authored Oct 5, 2024
2 parents 63e1114 + 9866a1e commit 28eb2af
Show file tree
Hide file tree
Showing 13 changed files with 925 additions and 842 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"react-datepicker": "^7.3.0",
"react-dom": "^18.3.1",
"react-ga4": "^2.1.0",
"react-helmet-async": "^2.0.5",
"react-icons": "^5.2.1",
"react-intersection-observer": "^9.13.0",
"react-modal": "^3.16.1",
Expand Down
6 changes: 5 additions & 1 deletion src/components/ChallengeCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,12 @@ const ChallengeCard = ({ challenge }: { challenge: Challenge }) => {
}
}, [challenge.representImage]);

const handleNavigate = () => {
navigate(`${challenge.challengeId}`, { state: { title: challenge.title } });
};

return (
<S.ChallengeComponent onClick={() => navigate(`${challenge.challengeId}`)}>
<S.ChallengeComponent onClick={handleNavigate}>
{imageSrc ? <S.ChallengeImg src={imageSrc} /> : <S.ChallengeImg src={defaultImg} />}
<S.ChallengeName>{challenge.title}</S.ChallengeName>
<S.ChallengeHeadCount>
Expand Down
21 changes: 9 additions & 12 deletions src/components/RouteChangeTracker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,27 +14,24 @@ const RouteChangeTracker = () => {
// localhost는 기록하지 않음
useEffect(() => {
if (!window.location.href.includes('localhost')) {
process.env.REACT_APP_GOOGLE_ANALYTICS_TRAKING_ID &&
ReactGA.initialize(process.env.REACT_APP_GOOGLE_ANALYTICS_TRAKING_ID);
setInitialized(true);
const trackingId = process.env.REACT_APP_GOOGLE_ANALYTICS_TRAKING_ID;

if (trackingId) {
ReactGA.initialize(trackingId);
setInitialized(true);
} else {
console.error('Google Analytics tracking ID가 정의되어 있지 않습니다.');
}
}
}, []);

// location 변경 감지시 pageview 이벤트 전송
useEffect(() => {
if (initialized) {
if (initialized && !window.location.href.includes('localhost')) {
ReactGA.set({ page: location.pathname });
ReactGA.send('pageview');
}
}, [initialized, location]);

// 개발용
useEffect(() => {
process.env.REACT_APP_GOOGLE_ANALYTICS_TRAKING_ID &&
ReactGA.initialize(process.env.REACT_APP_GOOGLE_ANALYTICS_TRAKING_ID);
ReactGA.set({ page: location.pathname });
ReactGA.send('pageview');
}, [location]);
};

export default RouteChangeTracker;
167 changes: 88 additions & 79 deletions src/pages/ChallengeCommunityPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { Link } from 'react-router-dom';
import { Challenge, ChallengeCategory, ChallengeResponse } from '../types/ChallengeType';
import { getSearchChallenge } from '../api/ChallengeApi';
import { NotExistingDocument } from '../styles/TeamDocumentStyled';
import { Helmet } from 'react-helmet-async';

const ChallengeCommunityPage = () => {
const [count, setCount] = useState<number>(1); // 총 페이지 수
Expand Down Expand Up @@ -64,94 +65,102 @@ const ChallengeCommunityPage = () => {
}, [pageInfo.currentPage, location.pathname, selectedCategory, keyword]); // 페이지가 변경될 때와, 데이터가 변경되었을 때 (즉 라우터가 변경되었을 때) 리렌더링

return (
<S.MainDashBoardLayout>
<Navbar />
<S.MainDashBoardContainer>
<S.Header>
<Flex>
{/* <img src={leftarrow} /> */}
<Flex flexDirection="column" alignItems="flex-start" margin="0 0 0 10px">
<S.Title>챌린지</S.Title>
<S.SubTitle>다른 참여자와 함께 이뤄나가요.</S.SubTitle>
<>
<Helmet>
<title>끄적끄적 | 챌린지 모아보기</title>
</Helmet>
<S.MainDashBoardLayout>
<Navbar />
<S.MainDashBoardContainer>
<S.Header>
<Flex>
{/* <img src={leftarrow} /> */}
<Flex flexDirection="column" alignItems="flex-start" margin="0 0 0 10px">
<S.Title>챌린지</S.Title>
<S.SubTitle>다른 참여자와 함께 이뤄나가요.</S.SubTitle>
</Flex>
</Flex>
</Flex>
<Link to="create">
<img src={addbutton} />
</Link>
</S.Header>
<Link to="create">
<img src={addbutton} />
</Link>
</S.Header>

<S.CategoriesContainer>
<S.Category onClick={() => handleCategoryClick('')} isSelected={selectedCategory === ''}>
전체
</S.Category>
{Object.entries(ChallengeCategory).map(([key, value]) => (
<S.CategoriesContainer>
<S.Category
key={key}
onClick={() => handleCategoryClick(key)}
isSelected={selectedCategory === key}
onClick={() => handleCategoryClick('')}
isSelected={selectedCategory === ''}
>
{value}
전체
</S.Category>
))}
</S.CategoriesContainer>
{Object.entries(ChallengeCategory).map(([key, value]) => (
<S.Category
key={key}
onClick={() => handleCategoryClick(key)}
isSelected={selectedCategory === key}
>
{value}
</S.Category>
))}
</S.CategoriesContainer>

<S.SearchContainer>
<S.SearchBar>
<svg
width="20"
height="20"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.5 9.5L12.5 12.5"
stroke="#D1D1D1"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.75 10.5C8.37335 10.5 10.5 8.37335 10.5 5.75C10.5 3.12665 8.37335 1 5.75 1C3.12665 1 1 3.12665 1 5.75C1 8.37335 3.12665 10.5 5.75 10.5Z"
stroke="#D1D1D1"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<S.SearchContainer>
<S.SearchBar>
<svg
width="20"
height="20"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.5 9.5L12.5 12.5"
stroke="#D1D1D1"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.75 10.5C8.37335 10.5 10.5 8.37335 10.5 5.75C10.5 3.12665 8.37335 1 5.75 1C3.12665 1 1 3.12665 1 5.75C1 8.37335 3.12665 10.5 5.75 10.5Z"
stroke="#D1D1D1"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>

<S.Input
placeholder="다양한 챌린지를 검색해보세요!"
type="text"
value={keyword}
name="keyword"
onChange={handleInput}
></S.Input>
{/* <S.Button>검색</S.Button> */}
</S.SearchBar>
</S.SearchContainer>
<S.Input
placeholder="다양한 챌린지를 검색해보세요!"
type="text"
value={keyword}
name="keyword"
onChange={handleInput}
></S.Input>
{/* <S.Button>검색</S.Button> */}
</S.SearchBar>
</S.SearchContainer>

{challenges?.length !== 0 ? (
<>
<Flex justifyContent="center">
<S.ChallengeContainer>
{challenges?.map((challenge, index) => (
<ChallengeCard key={index} challenge={challenge} />
))}
</S.ChallengeContainer>
</Flex>
{challenges?.length !== 0 ? (
<>
<Flex justifyContent="center">
<S.ChallengeContainer>
{challenges?.map((challenge, index) => (
<ChallengeCard key={index} challenge={challenge} />
))}
</S.ChallengeContainer>
</Flex>

<S.PaginationWrapper>
<Pagination count={pageInfo?.totalPages} page={page} onChange={handleChangePage} />
</S.PaginationWrapper>
</>
) : (
<Flex justifyContent="center" alignItems="center" height={400}>
<NotExistingDocument>해당하는 검색결과가 존재하지 않아요</NotExistingDocument>
</Flex>
)}
</S.MainDashBoardContainer>
</S.MainDashBoardLayout>
<S.PaginationWrapper>
<Pagination count={pageInfo?.totalPages} page={page} onChange={handleChangePage} />
</S.PaginationWrapper>
</>
) : (
<Flex justifyContent="center" alignItems="center" height={400}>
<NotExistingDocument>해당하는 검색결과가 존재하지 않아요</NotExistingDocument>
</Flex>
)}
</S.MainDashBoardContainer>
</S.MainDashBoardLayout>
</>
);
};

Expand Down
Loading

0 comments on commit 28eb2af

Please sign in to comment.