Skip to content

Commit 989b158

Browse files
Cllaude99Cllaude99
committed
chore: default export 방식으로 통일
1 parent a050181 commit 989b158

File tree

3 files changed

+63
-39
lines changed

3 files changed

+63
-39
lines changed

‎apps/web/src/pages/MemeQuizPage/MemeQuizPage.styles.ts‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import styled from '@emotion/styled';
22

3-
export const Container = styled.div`
3+
const Container = styled.div`
44
display: flex;
55
flex-direction: column;
66
align-items: center;
@@ -10,13 +10,13 @@ export const Container = styled.div`
1010
position: relative;
1111
`;
1212

13-
export const NavigationContainer = styled.div`
13+
const NavigationContainer = styled.div`
1414
position: absolute;
1515
top: 20px;
1616
left: 20px;
1717
`;
1818

19-
export const BackButton = styled.button`
19+
const BackButton = styled.button`
2020
padding: 8px 16px;
2121
border-radius: 8px;
2222
border: 1px solid ${({ theme }) => theme.palette.gray[300]};
@@ -38,34 +38,34 @@ export const BackButton = styled.button`
3838
}
3939
`;
4040

41-
export const QuizImage = styled.img`
41+
const QuizImage = styled.img`
4242
width: 100%;
4343
max-width: 500px;
4444
height: auto;
4545
border-radius: 8px;
4646
`;
4747

48-
export const Title = styled.h1`
48+
const Title = styled.h1`
4949
${({ theme }) => theme.typography.heading.h3};
5050
color: ${({ theme }) => theme.palette.gray[900]};
5151
text-align: center;
5252
`;
5353

54-
export const Summary = styled.p`
54+
const Summary = styled.p`
5555
${({ theme }) => theme.typography.body.medium};
5656
color: ${({ theme }) => theme.palette.gray[700]};
5757
text-align: center;
5858
`;
5959

60-
export const QuestionContainer = styled.div`
60+
const QuestionContainer = styled.div`
6161
display: flex;
6262
flex-direction: column;
6363
gap: 10px;
6464
width: 100%;
6565
max-width: 500px;
6666
`;
6767

68-
export const Button = styled.button<{ isSelected: boolean }>`
68+
const Button = styled.button<{ isSelected?: boolean }>`
6969
width: 100%;
7070
padding: 12px;
7171
border-radius: 8px;
@@ -81,18 +81,24 @@ export const Button = styled.button<{ isSelected: boolean }>`
8181
background-color: ${({ theme, isSelected }) =>
8282
isSelected ? theme.palette.primaryDark : theme.palette.gray[100]};
8383
}
84-
85-
&:active {
86-
background-color: ${({ theme }) => theme.palette.primary};
87-
color: ${({ theme }) => theme.palette.white};
88-
transform: scale(0.98);
89-
}
9084
`;
9185

92-
export const ResultContainer = styled.div`
86+
const ResultContainer = styled.div`
9387
display: flex;
9488
flex-direction: column;
9589
align-items: center;
9690
gap: 20px;
9791
text-align: center;
9892
`;
93+
94+
export {
95+
Container,
96+
NavigationContainer,
97+
BackButton,
98+
QuizImage,
99+
Title,
100+
Summary,
101+
QuestionContainer,
102+
Button,
103+
ResultContainer,
104+
};

‎apps/web/src/pages/MemeQuizPage/components/MemeQuizResult/MemeQuizResult.styles.ts‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import styled from '@emotion/styled';
22

3-
export const Container = styled.div`
3+
const Container = styled.div`
44
display: flex;
55
flex-direction: column;
66
align-items: center;
@@ -10,13 +10,13 @@ export const Container = styled.div`
1010
position: relative;
1111
`;
1212

13-
export const NavigationContainer = styled.div`
13+
const NavigationContainer = styled.div`
1414
position: absolute;
1515
top: 20px;
1616
left: 20px;
1717
`;
1818

19-
export const BackButton = styled.button`
19+
const BackButton = styled.button`
2020
padding: 8px 16px;
2121
border-radius: 8px;
2222
border: 1px solid ${({ theme }) => theme.palette.gray[300]};
@@ -38,34 +38,34 @@ export const BackButton = styled.button`
3838
}
3939
`;
4040

41-
export const QuizImage = styled.img`
41+
const QuizImage = styled.img`
4242
width: 100%;
4343
max-width: 500px;
4444
height: auto;
4545
border-radius: 8px;
4646
`;
4747

48-
export const Title = styled.h1`
48+
const Title = styled.h1`
4949
${({ theme }) => theme.typography.heading.h3};
5050
color: ${({ theme }) => theme.palette.gray[900]};
5151
text-align: center;
5252
`;
5353

54-
export const Summary = styled.p`
54+
const Summary = styled.p`
5555
${({ theme }) => theme.typography.body.medium};
5656
color: ${({ theme }) => theme.palette.gray[700]};
5757
text-align: center;
5858
`;
5959

60-
export const QuestionContainer = styled.div`
60+
const QuestionContainer = styled.div`
6161
display: flex;
6262
flex-direction: column;
6363
gap: 10px;
6464
width: 100%;
6565
max-width: 500px;
6666
`;
6767

68-
export const Button = styled.button<{ isSelected?: boolean }>`
68+
const Button = styled.button<{ isSelected?: boolean }>`
6969
width: 100%;
7070
padding: 12px;
7171
border-radius: 8px;
@@ -83,10 +83,22 @@ export const Button = styled.button<{ isSelected?: boolean }>`
8383
}
8484
`;
8585

86-
export const ResultContainer = styled.div`
86+
const ResultContainer = styled.div`
8787
display: flex;
8888
flex-direction: column;
8989
align-items: center;
9090
gap: 20px;
9191
text-align: center;
9292
`;
93+
94+
export {
95+
Container,
96+
NavigationContainer,
97+
BackButton,
98+
QuizImage,
99+
Title,
100+
Summary,
101+
QuestionContainer,
102+
Button,
103+
ResultContainer,
104+
};

‎apps/web/src/pages/MemeQuizPage/components/QuizStep/QuizStep.styles.ts‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import styled from '@emotion/styled';
22

3-
export const Container = styled.div`
3+
const Container = styled.div`
44
display: flex;
55
flex-direction: column;
66
align-items: center;
@@ -10,13 +10,13 @@ export const Container = styled.div`
1010
position: relative;
1111
`;
1212

13-
export const NavigationContainer = styled.div`
13+
const NavigationContainer = styled.div`
1414
position: absolute;
1515
top: 20px;
1616
left: 20px;
1717
`;
1818

19-
export const BackButton = styled.button`
19+
const BackButton = styled.button`
2020
padding: 8px 16px;
2121
border-radius: 8px;
2222
border: 1px solid ${({ theme }) => theme.palette.gray[300]};
@@ -38,34 +38,34 @@ export const BackButton = styled.button`
3838
}
3939
`;
4040

41-
export const QuizImage = styled.img`
41+
const QuizImage = styled.img`
4242
width: 100%;
4343
max-width: 500px;
4444
height: auto;
4545
border-radius: 8px;
4646
`;
4747

48-
export const Title = styled.h1`
48+
const Title = styled.h1`
4949
${({ theme }) => theme.typography.heading.h3};
5050
color: ${({ theme }) => theme.palette.gray[900]};
5151
text-align: center;
5252
`;
5353

54-
export const Summary = styled.p`
54+
const Summary = styled.p`
5555
${({ theme }) => theme.typography.body.medium};
5656
color: ${({ theme }) => theme.palette.gray[700]};
5757
text-align: center;
5858
`;
5959

60-
export const QuestionContainer = styled.div`
60+
const QuestionContainer = styled.div`
6161
display: flex;
6262
flex-direction: column;
6363
gap: 10px;
6464
width: 100%;
6565
max-width: 500px;
6666
`;
6767

68-
export const Button = styled.button<{ isSelected: boolean }>`
68+
const Button = styled.button<{ isSelected?: boolean }>`
6969
width: 100%;
7070
padding: 12px;
7171
border-radius: 8px;
@@ -81,18 +81,24 @@ export const Button = styled.button<{ isSelected: boolean }>`
8181
background-color: ${({ theme, isSelected }) =>
8282
isSelected ? theme.palette.primaryDark : theme.palette.gray[100]};
8383
}
84-
85-
&:active {
86-
background-color: ${({ theme }) => theme.palette.primary};
87-
color: ${({ theme }) => theme.palette.white};
88-
transform: scale(0.98);
89-
}
9084
`;
9185

92-
export const ResultContainer = styled.div`
86+
const ResultContainer = styled.div`
9387
display: flex;
9488
flex-direction: column;
9589
align-items: center;
9690
gap: 20px;
9791
text-align: center;
9892
`;
93+
94+
export {
95+
Container,
96+
NavigationContainer,
97+
BackButton,
98+
QuizImage,
99+
Title,
100+
Summary,
101+
QuestionContainer,
102+
Button,
103+
ResultContainer,
104+
};

0 commit comments

Comments
 (0)