Skip to content

Commit d3d84fd

Browse files
YouD0313YouD0313
committed
fix: tag 마우스오버 기능 삭제, 미디어쿼리
1 parent d1fd9b2 commit d3d84fd

28 files changed

+319
-112
lines changed

‎src/components/common/page/emptyLoadingPage/EmptyLoadingPage.styled.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
import styled from 'styled-components';
22
import { EmptyLoadingPageProps } from './EmptyLoadingPage';
33

4-
export const Container = styled.div<Pick<EmptyLoadingPageProps, 'height'>>`
4+
export const Container = styled.div<EmptyLoadingPageProps>`
55
width: 100%;
66
height: ${({ height }) => height};
7+
8+
@media screen ${({ theme }) => theme.mediaQuery.tablet} {
9+
height: ${({ tHeight }) => tHeight};
10+
}
11+
12+
@media screen ${({ theme }) => theme.mediaQuery.mobile} {
13+
height: ${({ mHeight }) => mHeight};
14+
}
715
`;

‎src/components/common/page/emptyLoadingPage/EmptyLoadingPage.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,20 @@ import * as S from './EmptyLoadingPage.styled';
22

33
export interface EmptyLoadingPageProps {
44
height: string;
5+
tHeight: string;
6+
mHeight: string;
57
}
68

7-
export default function EmptyLoadingPage({ height }: EmptyLoadingPageProps) {
8-
return <S.Container height={height}></S.Container>;
9+
export default function EmptyLoadingPage({
10+
height,
11+
tHeight,
12+
mHeight,
13+
}: EmptyLoadingPageProps) {
14+
return (
15+
<S.Container
16+
height={height}
17+
tHeight={tHeight}
18+
mHeight={mHeight}
19+
></S.Container>
20+
);
921
}

‎src/components/common/page/noResultPage/NoResultPage.styled.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ export const Container = styled.div<Pick<NoResultPageProps, 'height'>>`
77
display: flex;
88
justify-content: center;
99
align-items: center;
10+
11+
@media screen and ${({ theme }) => theme.mediaQuery.mobile} {
12+
height: ${({ height }) => `calc(${height}*0.5)`};
13+
}
1014
`;
1115

1216
export const Wrapper = styled.div`
@@ -20,4 +24,8 @@ export const Wrapper = styled.div`
2024

2125
export const Title = styled.span`
2226
font-size: 1.5rem;
27+
28+
@media screen and ${({ theme }) => theme.mediaQuery.mobile} {
29+
font-size: 1rem;
30+
}
2331
`;

‎src/components/common/skillTagBox/SkillTagBox.styled.ts‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,18 @@ import { SkillTagBoxProps } from './SkillTagBox';
44
export const Container = styled.div<Pick<SkillTagBoxProps, 'width'>>`
55
width: ${({ width }) => width};
66
border: 1px solid ${({ theme }) => theme.color.border};
7-
border-radius: 3rem;
7+
border-radius: ${({ theme }) => theme.borderRadius.large};
88
background-color: ${({ theme }) => theme.color.white};
99
padding: 2rem;
10+
11+
@media screen and ${({ theme }) => theme.mediaQuery.tablet} {
12+
padding: 1.5rem;
13+
}
14+
15+
@media screen and ${({ theme }) => theme.mediaQuery.mobile} {
16+
border-radius: ${({ theme }) => theme.borderRadius.primary};
17+
padding: 1rem;
18+
}
1019
`;
1120

1221
export const Wrapper = styled.div`
@@ -45,8 +54,36 @@ export const ResetButton = styled.button`
4554
transform: scale(1.1);
4655
transition: all 100ms ease-in;
4756
}
57+
58+
@media screen and ${({ theme }) => theme.mediaQuery.tablet} {
59+
padding: 0.4rem;
60+
gap: 0.4rem;
61+
svg {
62+
width: 0.9rem;
63+
}
64+
&:hover {
65+
transform: none;
66+
transition: none;
67+
}
68+
}
69+
70+
@media screen and ${({ theme }) => theme.mediaQuery.mobile} {
71+
padding: 0.2rem;
72+
gap: 0.2rem;
73+
svg {
74+
width: 0.8rem;
75+
}
76+
}
4877
`;
4978

5079
export const ResetSpan = styled.span`
5180
font-size: 1rem;
81+
82+
@media screen and ${({ theme }) => theme.mediaQuery.tablet} {
83+
font-size: 0.9rem;
84+
}
85+
86+
@media screen and ${({ theme }) => theme.mediaQuery.mobile} {
87+
font-size: 0.7rem;
88+
}
5289
`;

‎src/components/common/skillTagBox/skillTag/SkillTag.styled.ts‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,26 @@ export const Wrapper = styled.div<{ $select: boolean }>`
1414
align-items: center;
1515
gap: 0.5rem;
1616
transition: all 200ms ease-in;
17+
cursor: pointer;
1718
1819
&:hover {
19-
cursor: pointer;
2020
transform: scale(1.1);
2121
transition: all 100ms ease-in-out;
2222
}
23+
24+
@media screen and ${({ theme }) => theme.mediaQuery.tablet} {
25+
padding: 0.4rem;
26+
gap: 0.4rem;
27+
font-size: 0.9rem;
28+
&:hover {
29+
transform: none;
30+
transition: none;
31+
}
32+
}
33+
34+
@media screen and ${({ theme }) => theme.mediaQuery.mobile} {
35+
padding: 0.2rem;
36+
gap: 0.2rem;
37+
font-size: 0.8rem;
38+
}
2339
`;

‎src/components/common/skillTagBox/skillTag/skillTagImg/SkillTagImg.styled.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,12 @@ export const SkillImg = styled.img<Pick<SkillTagImgProps, '$select'>>`
1111
border-radius: 50%;
1212
border: 1px solid
1313
${({ theme, $select }) => ($select ? 'none' : theme.color.border)};
14+
15+
@media screen and ${({ theme }) => theme.mediaQuery.tablet} {
16+
width: 2rem;
17+
}
18+
19+
@media screen and ${({ theme }) => theme.mediaQuery.mobile} {
20+
width: 1.8rem;
21+
}
1422
`;

‎src/components/home/banner/Banner.styled.ts‎

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

3-
export const Container = styled.section`
4-
margin-top: 2rem;
5-
`;
3+
export const Container = styled.section``;
64

75
export const BannerImg = styled.img`
86
width: 100%;

‎src/components/home/projectCardLists/ProjectCardLists.styled.ts‎

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,44 @@ export const Container = styled.section`
44
width: 100%;
55
`;
66

7+
export const CardListTitleWrapper = styled.div``;
8+
9+
export const CardListTitle = styled.h1`
10+
padding: 6rem 0 2rem 0;
11+
12+
@media screen and ${({ theme }) => theme.mediaQuery.tablet} {
13+
padding: 4rem 0 2rem 0;
14+
}
15+
16+
@media screen and ${({ theme }) => theme.mediaQuery.mobile} {
17+
padding: 2rem 0 2rem 0;
18+
font-size: 1.5rem;
19+
}
20+
`;
21+
722
export const Wrapper = styled.div<{ $flex: boolean }>`
823
width: 100%;
924
display: ${({ $flex }) => ($flex ? 'flex' : 'grid')};
10-
grid-template-columns: ${({ $flex }) => ($flex ? '' : 'repeat(3, 1fr)')};
25+
grid-template-columns: ${({ $flex }) =>
26+
$flex ? '' : 'repeat(auto-fit, minmax(30%, auto))'};
1127
place-items: ${({ $flex }) => ($flex ? '' : 'center')};
28+
/* justify-content: space-evenly; */
1229
gap: 3rem;
13-
`;
1430
15-
export const CardListTitleWrapper = styled.div``;
31+
a {
32+
width: 100%;
33+
}
1634
17-
export const CardListTitle = styled.h1`
18-
padding: 4rem 0 2rem 0;
35+
@media screen and ${({ theme }) => theme.mediaQuery.tablet} {
36+
grid-template-columns: ${({ $flex }) =>
37+
$flex ? '' : 'repeat(auto-fit, minmax(40%, auto))'};
38+
gap: 2rem;
39+
}
40+
41+
@media screen and ${({ theme }) => theme.mediaQuery.mobile} {
42+
width: 100%;
43+
grid-template-columns: ${({ $flex }) =>
44+
$flex ? '' : 'repeat(auto-fit, minmax(50%, auto))'};
45+
gap: 1rem;
46+
}
1947
`;

‎src/components/home/projectCardLists/ProjectCardLists.tsx‎

Lines changed: 23 additions & 4 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 { useProjectCardListData } from '../../../hooks/useProjectCardListData';
33
import EmptyLoadingPage from '../../common/page/emptyLoadingPage/EmptyLoadingPage';
44
import NoResultPage from '../../common/page/noResultPage/NoResultPage';
@@ -7,10 +7,20 @@ import Pagination from './pagination/Pagination';
77
import * as S from './ProjectCardLists.styled';
88
import { Link } from 'react-router-dom';
99
import { ROUTES } from '../../../constants/routes';
10+
import { useModal } from '../../../hooks/useModal';
1011

1112
export default function ProjectCardLists() {
13+
const { isOpen } = useModal();
1214
const { projectListsData, isLoading } = useProjectCardListData();
1315
const [isFlex, setIsFlex] = useState(false);
16+
17+
const handleClick = (e: React.MouseEvent<HTMLElement>) => {
18+
if (isOpen) {
19+
e.preventDefault();
20+
return;
21+
}
22+
};
23+
1424
useEffect(() => {
1525
if (projectListsData && Boolean(projectListsData.projects.length)) {
1626
setIsFlex(false);
@@ -19,7 +29,10 @@ export default function ProjectCardLists() {
1929
setIsFlex(true);
2030
}, [projectListsData]);
2131

22-
if (isLoading) return <EmptyLoadingPage height='115.2rem' />;
32+
if (isLoading)
33+
return (
34+
<EmptyLoadingPage height='115.2rem' tHeight='142rem' mHeight='275rem' />
35+
);
2336

2437
return (
2538
<S.Container>
@@ -29,15 +42,21 @@ export default function ProjectCardLists() {
2942
<S.Wrapper $flex={isFlex}>
3043
{projectListsData && Boolean(projectListsData.projects.length) ? (
3144
projectListsData.projects.map((list) => (
32-
<Link to={`${ROUTES.projectDetail}/${list.id}`} key={list.id}>
45+
<Link
46+
to={`${ROUTES.projectDetail}/${list.id}`}
47+
key={list.id}
48+
onClick={handleClick}
49+
>
3350
<CardList list={list} data-cardId={list.id} />
3451
</Link>
3552
))
3653
) : (
3754
<NoResultPage height='40rem' />
3855
)}
3956
</S.Wrapper>
40-
<Pagination />
57+
<div className='PaginationWrapper'>
58+
<Pagination />
59+
</div>
4160
</S.Container>
4261
);
4362
}

‎src/components/home/projectCardLists/cardList/CardList.styled.ts‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import styled from 'styled-components';
33
export const Container = styled.article`
44
position: relative;
55
cursor: pointer;
6-
width: 22.4rem;
6+
width: 100%;
7+
min-width: 19rem;
78
height: 22rem;
89
border: 1px solid ${({ theme }) => theme.color.border};
910
border-radius: 2rem;
@@ -12,6 +13,12 @@ export const Container = styled.article`
1213
display: flex;
1314
flex-direction: column;
1415
gap: 1rem;
16+
17+
@media screen and ${({ theme }) => theme.mediaQuery.mobile} {
18+
padding: 1.5rem;
19+
gap: 0.5rem;
20+
height: 18rem;
21+
}
1522
`;
1623

1724
export const Deadline = styled.div`
@@ -60,22 +67,16 @@ export const TagWrapper = styled.div<{ $positionPadding?: boolean }>`
6067
z-index: 10;
6168
`;
6269

63-
export const EllipsisIcon = styled.button<{ $hiddenIcon: boolean }>`
70+
export const EllipsisIconButton = styled.button`
6471
display: flex;
6572
justify-content: center;
6673
align-items: center;
67-
width: 2rem;
6874
padding-left: 0.8rem;
69-
cursor: pointer;
70-
z-index: ${({ $hiddenIcon }) => ($hiddenIcon ? '0' : '100')};
71-
72-
&:hover {
73-
transform: scale(1.3);
74-
transition: all 200ms ease-in;
75-
opacity: 0;
76-
}
75+
font-size: 0.7rem;
7776
`;
7877

78+
export const MoreSpan = styled.span``;
79+
7980
export const InfoWrapper = styled.div`
8081
display: flex;
8182
justify-content: space-between;
@@ -103,6 +104,10 @@ export const StatusWrapper = styled.div`
103104

104105
export const BeginnerImg = styled.img`
105106
width: 2rem;
107+
108+
@media screen and ${({ theme }) => theme.mediaQuery.mobile} {
109+
width: 1.5rem;
110+
}
106111
`;
107112

108113
export const ViewWrapper = styled.div`
@@ -113,9 +118,20 @@ export const ViewWrapper = styled.div`
113118
width: 1.3rem;
114119
color: #5f5f5f;
115120
}
121+
122+
@media screen and ${({ theme }) => theme.mediaQuery.mobile} {
123+
svg {
124+
width: 1rem;
125+
}
126+
}
116127
`;
117128

118129
export const ViewCount = styled.span`
119130
flex-direction: row;
120131
color: #5f5f5f;
132+
133+
@media screen and ${({ theme }) => theme.mediaQuery.mobile} {
134+
align-items: end;
135+
font-size: 0.9rem;
136+
}
121137
`;

0 commit comments

Comments
 (0)