Skip to content

Commit d3e07ce

Browse files
frorongfrorong
authored
Merge pull request #96 from Stack-Knowledge/develop
Release 1.0.3
2 parents fb65b75 + a28ccf6 commit d3e07ce

File tree

31 files changed

+220
-46
lines changed

31 files changed

+220
-46
lines changed

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121
"@types/react": "^18.2.0",
2222
"next": "13.4.2",
2323
"react": "^18.2.0",
24-
"react-toastify": "^9.1.3"
24+
"react-toastify": "^9.1.3",
25+
"zustand": "^4.4.6"
2526
},
2627
"keywords": [],
2728
"author": "",

‎packages/common/src/assets/svg/DefaultProfile.svg

+2-2
Loading

‎packages/common/src/assets/svg/HomeIcon.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const HomeIcon = () => (
22
<svg
3-
width='26'
4-
height='22'
3+
width='1.625rem'
4+
height='1.375rem'
55
viewBox='0 0 26 22'
66
fill='none'
77
xmlns='http://www.w3.org/2000/svg'

‎packages/common/src/assets/svg/LogoIcon.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const LogoIcon = () => (
22
<svg
3-
width='40'
4-
height='40'
3+
width='2.5rem'
4+
height='2.5rem'
55
viewBox='0 0 40 40'
66
fill='none'
77
xmlns='http://www.w3.org/2000/svg'

‎packages/common/src/assets/svg/QuestionIcon.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const QuestionIcon = () => (
22
<svg
3-
width='20'
4-
height='22'
3+
width='1.25rem'
4+
height='1.375rem'
55
viewBox='0 0 20 22'
66
fill='none'
77
xmlns='http://www.w3.org/2000/svg'

‎packages/common/src/assets/svg/RankingIcon.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const RankingIcon = () => (
22
<svg
3-
width='18'
4-
height='18'
3+
width='1.125rem'
4+
height='1.125rem'
55
viewBox='0 0 18 18'
66
fill='none'
77
xmlns='http://www.w3.org/2000/svg'

‎packages/common/src/assets/svg/ShopIcon.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const ShopIcon = () => (
22
<svg
3-
width='20'
4-
height='20'
3+
width='1.25rem'
4+
height='1.25rem'
55
viewBox='0 0 20 20'
66
fill='none'
77
xmlns='http://www.w3.org/2000/svg'

‎packages/common/src/assets/svg/VectorIcon.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ interface VectorIconProps {
55
const VectorIcon: React.FC<VectorIconProps> = ({ direction }) => (
66
<svg
77
xmlns='http://www.w3.org/2000/svg'
8-
width='80'
9-
height='80'
8+
width='5rem'
9+
height='5rem'
1010
viewBox='0 0 80 80'
1111
fill='none'
1212
transform={`${direction === 'right' ? 'rotate(-180)' : ''}`}

‎packages/common/src/components/Banner/style.ts

+8
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,14 @@ export const BannerContainer = styled.div<{
4141

4242
export const BannerItem = styled.div`
4343
width: 80rem;
44+
45+
@media (max-width: 1240px) {
46+
width: calc(100vw - 12.5rem);
47+
}
48+
49+
@media ${({ theme }) => theme.breakPoint[600]} {
50+
width: calc(100vw - 3rem);
51+
}
4452
`;
4553

4654
export const DotWrapper = styled.div`

‎packages/common/src/components/Header/style.ts

+20-7
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,13 @@ export const HeaderContainer = styled.div`
1414
display: flex;
1515
align-items: center;
1616
justify-content: space-between;
17+
18+
@media (max-width: 1240px) {
19+
width: calc(100vw - 12.5rem);
20+
}
21+
@media ${({ theme }) => theme.breakPoint[600]} {
22+
width: calc(100vw - 3rem);
23+
}
1724
`;
1825

1926
export const LogoContainer = styled(Link)`
@@ -34,9 +41,12 @@ export const MenuNav = styled.div`
3441
gap: ${({ role }) => (role === 'admin' ? '1.5rem' : '2.25rem')};
3542
`;
3643

37-
export const MenuStrokeItemWrapper = styled(Link)<{ $isActive?: boolean }>`
38-
${({ $isActive, theme }) => {
39-
const activeColor = $isActive ? theme.color.primary : theme.color.black;
44+
export const MenuStrokeItemWrapper = styled(Link)<{ isActive?: boolean }>`
45+
@media (max-width: 300px) {
46+
width: 30px;
47+
}
48+
${({ isActive, theme }) => {
49+
const activeColor = isActive ? theme.color.primary : theme.color.black;
4050
const hoverColor = theme.color.primary;
4151
return `
4252
display: flex;
@@ -63,9 +73,12 @@ export const MenuStrokeItemWrapper = styled(Link)<{ $isActive?: boolean }>`
6373
}}
6474
`;
6575

66-
export const MenuFillItemWrapper = styled(Link)<{ $isActive?: boolean }>`
67-
${({ $isActive, theme }) => {
68-
const activeColor = $isActive ? theme.color.primary : theme.color.black;
76+
export const MenuFillItemWrapper = styled(Link)<{ isActive?: boolean }>`
77+
@media (max-width: 300px) {
78+
width: 30px;
79+
}
80+
${({ isActive, theme }) => {
81+
const activeColor = isActive ? theme.color.primary : theme.color.black;
6982
const hoverColor = theme.color.primary;
7083
return `
7184
display: flex;
@@ -78,7 +91,7 @@ export const MenuFillItemWrapper = styled(Link)<{ $isActive?: boolean }>`
7891
rect, path {fill:${activeColor};}
7992
}
8093
81-
&:hover{
94+
&:hover{
8295
span,
8396
& svg{
8497
color:${hoverColor};

‎packages/common/src/components/MainContents/index.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@ const MainContents: React.FC<MainContentsProps> = ({ isClient }) => {
2424

2525
return (
2626
<>
27-
<S.MissionText>문제</S.MissionText>
27+
<S.MissionTextContainer>
28+
<S.MissionText>문제</S.MissionText>
29+
</S.MissionTextContainer>
2830
<S.ContentWrapper>
2931
<S.Contents>
3032
{missionList &&

‎packages/common/src/components/MainContents/style.ts

+18
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
import styled from '@emotion/styled';
22

3+
export const MissionTextContainer = styled.div`
4+
width: 80rem;
5+
@media (max-width: 1240px) {
6+
width: calc(100vw - 12.5rem);
7+
}
8+
9+
@media ${({ theme }) => theme.breakPoint[600]} {
10+
width: calc(100vw - 3rem);
11+
}
12+
`;
13+
314
export const MissionText = styled.h4`
415
${({ theme }) => theme.typo.h4};
516
color: ${({ theme }) => theme.color.black};
@@ -35,4 +46,11 @@ export const Contents = styled.div`
3546
.medalWrapper:nth-of-type(3n) .medal {
3647
background-color: #ce865d;
3748
}
49+
@media (max-width: 1240px) {
50+
width: calc(100vw - 12.5rem);
51+
}
52+
53+
@media ${({ theme }) => theme.breakPoint[600]} {
54+
width: calc(100vw - 3rem);
55+
}
3856
`;

‎packages/common/src/components/MissionDetailInput /style.ts

+9
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ export const SubmitContainer = styled.div`
66
height: 18.75rem;
77
border-radius: 0.625rem;
88
box-shadow: 0.1875rem 0.1875rem 0.25rem 0rem rgba(120, 120, 120, 0.25);
9+
10+
@media ${({ theme }) => theme.breakPoint[600]} {
11+
width: calc(100vw - 16rem);
12+
}
913
`;
1014
export const MissionDetailInputWrapper = styled.div`
1115
display: flex;
@@ -22,6 +26,11 @@ export const MissionDetailInput = styled.textarea`
2226
resize: none;
2327
border: 0;
2428
29+
@media ${({ theme }) => theme.breakPoint[600]} {
30+
width: calc(100vw - 16rem);
31+
text-indent: 0.5625rem;
32+
}
33+
2534
::placeholder {
2635
color: ${({ theme }) => theme.color.gray['050']};
2736
font-weight: 500;

‎packages/common/src/components/RankingCard/style.ts

+5
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@ export const CardWrapper = styled(Link)`
1818

1919
export const ProfileImage = styled(Image)`
2020
border-radius: 50%;
21+
22+
@media ${({ theme }) => theme.breakPoint[1024]} {
23+
width: calc(100% - 50%);
24+
height: calc(100% - 65%);
25+
}
2126
`;
2227

2328
export const UserName = styled.span`

‎packages/common/src/hooks/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as useWindowResizeEffect } from './useWindowResizeEffect';

‎packages/common/src/hooks/useWindowResizeEffect.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
'use client';
2+
3+
import { useEffect } from 'react';
4+
5+
import { useWidthState } from 'common/stores';
6+
7+
const useWindowResizeEffect = () => {
8+
const { width, setWidth } = useWidthState();
9+
10+
const handleResize = () => {
11+
setWidth(window.innerWidth);
12+
};
13+
14+
useEffect(() => {
15+
handleResize();
16+
window.addEventListener('resize', handleResize);
17+
return () => {
18+
window.removeEventListener('resize', handleResize);
19+
};
20+
}, []);
21+
22+
return width;
23+
};
24+
25+
export default useWindowResizeEffect;

‎packages/common/src/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,5 @@ export * from './styles';
33
export * from './utils';
44
export * from './assets';
55
export * from './PageContainer';
6+
export * from './hooks';
7+
export * from './stores';

‎packages/common/src/stores/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as useWidthState } from './useWidthStore';

‎packages/common/src/stores/useWidthStore.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { create } from 'zustand';
2+
3+
interface WidthState {
4+
width: number;
5+
setWidth: (value: number) => void;
6+
}
7+
8+
const useWidthState = create<WidthState>((set) => ({
9+
width: 1920,
10+
setWidth: (value) => set({ width: value }),
11+
}));
12+
13+
export default useWidthState;

‎packages/common/src/styles/GlobalStyle.tsx

+13-5
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,20 @@ export function GlobalStyle() {
1111
${emotionReset}
1212
1313
html {
14-
@media ${theme.breakPoint['600']} {
15-
font-size: 0.75rem;
14+
@media (max-width: 1600px) {
15+
font-size: 15px;
1616
}
17-
18-
@media (max-width: 400px) {
19-
font-size: 0.625rem;
17+
@media (max-width: 1300px) {
18+
font-size: 12px;
19+
}
20+
@media (max-width: 1000px) {
21+
font-size: 10px;
22+
}
23+
@media (max-width: 850px) {
24+
font-size: 9px;
25+
}
26+
@media (max-width: 750px) {
27+
font-size: 8px;
2028
}
2129
}
2230

‎pnpm-lock.yaml

+23
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎projects/client/src/PageContainer/MissionListPage/index.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ const MissionListPage = () => {
1010

1111
return (
1212
<S.PageWrapper>
13-
<S.ScoringText>문제</S.ScoringText>
13+
<S.ScoringTextContainer>
14+
<S.ScoringText>문제</S.ScoringText>
15+
</S.ScoringTextContainer>
1416
{data?.length > 0 ? <MissionCarousel /> : <h1>문제가 없습니다...</h1>}
1517
</S.PageWrapper>
1618
);

‎projects/client/src/PageContainer/MissionListPage/style.ts

+9
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,15 @@ export const PageWrapper = styled.div`
99
padding-bottom: 10.625rem;
1010
`;
1111

12+
export const ScoringTextContainer = styled.div`
13+
@media ${({ theme }) => theme.breakPoint[1024]} {
14+
width: calc(100vw - 20rem);
15+
}
16+
@media (max-width: 750px) {
17+
width: calc(100vw - 18.5rem);
18+
}
19+
`;
20+
1221
export const ScoringText = styled.h2`
1322
${({ theme }) => theme.typo.h2}
1423
color: ${({ theme }) => theme.color.black};

‎projects/client/src/assets/svg/CheckBoxIcon.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
const CheckBoxIcon = () => (
22
<svg
33
xmlns='http://www.w3.org/2000/svg'
4-
width='18'
5-
height='18'
4+
width='1.125rem'
5+
height='1.125rem'
66
viewBox='0 0 18 18'
77
fill='none'
88
>

‎projects/client/src/assets/svg/CheckedBoxIcon.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
const CheckedBoxIcon = () => (
22
<svg
33
xmlns='http://www.w3.org/2000/svg'
4-
width='18'
5-
height='18'
4+
width='1.125rem'
5+
height='1.125rem'
66
viewBox='0 0 18 18'
77
fill='none'
88
>

‎projects/client/src/assets/svg/MinusIcon.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const MinusIcon = () => (
22
<svg
3-
width='14'
4-
height='2'
3+
width='0.875rem'
4+
height='0.125rem'
55
viewBox='0 0 14 2'
66
xmlns='http://www.w3.org/2000/svg'
77
>

0 commit comments

Comments
 (0)