refactor: (#54) 몇몇 컴포넌트 반응형 웹 기준 상수화 적용

- 게시글, 선택지, 투표 통계 컴포넌트
woowacourse-teams · Jul 17, 2023 · 6e77579 · 6e77579
1 parent 54d3a9b
commit 6e77579
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 22 deletions.
diff --git a/frontend/src/components/VoteStatistics/GraphStyle.ts b/frontend/src/components/VoteStatistics/GraphStyle.ts
@@ -2,6 +2,8 @@ import { styled } from 'styled-components';
 
 import { Size } from '@components/common/AddButton/type';
 
+import { theme } from '@styles/theme';
+
 const size: { [key in Size]: { height: string; linePositionTop: string } } = {
  sm: { height: '200px', linePositionTop: '165px' },
  md: { height: '230px', linePositionTop: '194px' },
@@ -17,7 +19,7 @@ export const GraphContainer = styled.div<{ $size: Size }>`
 
  font-size: 1.2rem;
 
- @media (min-width: 576px) {
+ @media (${theme.breakpoint.sm}) {
  font-size: 1.4rem;
  }
 `;

diff --git a/frontend/src/components/VoteStatistics/OneLineGraph/style.ts b/frontend/src/components/VoteStatistics/OneLineGraph/style.ts
@@ -2,6 +2,8 @@ import { styled } from 'styled-components';
 
 import { Size } from '@components/common/AddButton/type';
 
+import { theme } from '@styles/theme';
+
 export const OptionContainer = styled.div<{ $size: Size }>`
  display: flex;
  flex-direction: column;
@@ -18,7 +20,7 @@ export const OptionContainer = styled.div<{ $size: Size }>`
  word-break: keep-all;
  }
 
- @media (min-width: 576px) {
+ @media (${theme.breakpoint.sm}) {
  width: ${props => (props.$size === 'sm' ? '40px' : props.$size === 'md' ? '50px' : '60px')};
  }
 `;

diff --git a/frontend/src/components/VoteStatistics/TwoLineGraph/style.ts b/frontend/src/components/VoteStatistics/TwoLineGraph/style.ts
@@ -2,6 +2,8 @@ import { styled } from 'styled-components';
 
 import { Size } from '@components/common/AddButton/type';
 
+import { theme } from '@styles/theme';
+
 export const OptionContainer = styled.div<{ $size: Size }>`
  display: flex;
  flex-direction: column;
@@ -18,7 +20,7 @@ export const OptionContainer = styled.div<{ $size: Size }>`
  word-break: keep-all;
  }
 
- @media (min-width: 576px) {
+ @media (${theme.breakpoint.sm}) {
  width: ${props => (props.$size === 'sm' ? '40px' : props.$size === 'md' ? '50px' : '60px')};
  }
 `;
@@ -30,7 +32,7 @@ export const DataWrapper = styled.div`
  height: 90%;
  width: 50px;
 
- @media (min-width: 576px) {
+ @media (${theme.breakpoint.sm}) {
  width: 60px;
  }
 `;

diff --git a/frontend/src/components/VoteStatistics/style.ts b/frontend/src/components/VoteStatistics/style.ts
@@ -1,5 +1,7 @@
 import { styled } from 'styled-components';
 
+import { theme } from '@styles/theme';
+
 export const Container = styled.div`
  display: flex;
  flex-direction: column;
@@ -8,7 +10,7 @@ export const Container = styled.div`
 
  font-size: 1.2rem;
 
- @media (min-width: 576px) {
+ @media (${theme.breakpoint.sm}) {
  font-size: 1.4rem;
  }
 `;

diff --git a/frontend/src/components/common/Post/style.ts b/frontend/src/components/common/Post/style.ts
@@ -1,5 +1,7 @@
 import { styled } from 'styled-components';
 
+import { theme } from '@styles/theme';
+
 export const Container = styled.li`
  display: flex;
  flex-direction: column;
@@ -9,15 +11,15 @@ export const Container = styled.li`
  letter-spacing: 0.5px;
  line-height: 1.5;
 
- @media (min-width: 576px) {
+ @media (${theme.breakpoint.sm}) {
  font-size: 1.4rem;
  }
 `;
 
 export const Category = styled.span`
  font-size: 1.2rem;
 
- @media (min-width: 576px) {
+ @media (${theme.breakpoint.sm}) {
  font-size: 1.4rem;
  }
 `;
@@ -34,7 +36,7 @@ export const Title = styled.p<{ $isPreview: boolean }>`
  -webkit-line-clamp: ${props => props.$isPreview && '2'};
  -webkit-box-orient: vertical;
 
- @media (min-width: 576px) {
+ @media (${theme.breakpoint.sm}) {
  font-size: 2.2rem;
  }
 `;
@@ -52,7 +54,7 @@ export const Wrapper = styled.div`
  margin-left: 10px;
  }
 
- @media (min-width: 576px) {
+ @media (${theme.breakpoint.sm}) {
  font-size: 1.4rem;
  }
 `;
@@ -73,7 +75,7 @@ export const Content = styled.p<{ $isPreview: boolean }>`
  -webkit-line-clamp: ${props => props.$isPreview && '10'};
  -webkit-box-orient: vertical;
 
- @media (min-width: 576px) {
+ @media (${theme.breakpoint.sm}) {
  font-size: 1.6rem;
  }
 `;
diff --git a/frontend/src/components/optionList/WritingVoteOptionList/WritingVoteOption/style.ts b/frontend/src/components/optionList/WritingVoteOptionList/WritingVoteOption/style.ts
@@ -1,5 +1,7 @@
 import { styled } from 'styled-components';
 
+import { theme } from '@styles/theme';
+
 export const Container = styled.li`
  display: flex;
  gap: 10px;
@@ -37,7 +39,7 @@ export const ContentTextArea = styled.textarea`
 
  resize: none;
 
- @media (min-width: 960px) {
+ @media (${theme.breakpoint.md}) {
  height: 120px;
 
  font-size: 1.6rem;
@@ -83,7 +85,7 @@ background-color: #bebebe;
 
 cursor: pointer;
 
-@media (min-width: 960px) {
+@media (${theme.breakpoint.md}) {
  width:28px;
  height:28px;
 }
@@ -93,7 +95,7 @@ export const IconImage = styled.img`
  width: 14px;
  height: 14px;
 
- @media (min-width: 960px) {
+ @media (${theme.breakpoint.md}) {
  width: 16px;
  height: 16px;
  }

diff --git a/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/style.ts b/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/style.ts
@@ -1,5 +1,7 @@
 import { styled } from 'styled-components';
 
+import { theme } from '@styles/theme';
+
 export const Container = styled.li<{ $isSelected: boolean }>`
  display: flex;
  flex-direction: column;
@@ -13,7 +15,7 @@ export const Container = styled.li<{ $isSelected: boolean }>`
 
  cursor: pointer;
 
- @media (min-width: 960px) {
+ @media (${theme.breakpoint.md}) {
  padding: 20px 30px;
  }
 `;
@@ -26,7 +28,7 @@ export const Image = styled.img`
 
  aspect-ratio: 1/1;
  object-fit: cover;
- @media (min-width: 960px) {
+ @media (${theme.breakpoint.md}) {
  margin-bottom: 24px;
  }
 `;
@@ -44,7 +46,7 @@ export const PreviewContent = styled.p`
  -webkit-line-clamp: 2; // 원하는 라인수
  -webkit-box-orient: vertical;
 
- @media (min-width: 960px) {
+ @media (${theme.breakpoint.md}) {
  font-size: 1.6rem;
  }
 `;
@@ -53,15 +55,15 @@ export const DetailContent = styled.p`
  font-size: 1.4rem;
  font-weight: 500;
 
- @media (min-width: 960px) {
+ @media (${theme.breakpoint.md}) {
  font-size: 1.6rem;
  }
 `;
 
 export const ProgressContainer = styled.div`
  margin-top: 12px;
 
- @media (min-width: 960px) {
+ @media (${theme.breakpoint.md}) {
  margin-top: 18px;
  }
 `;
@@ -72,7 +74,7 @@ export const TextContainer = styled.div`
  text-align: end;
  font-weight: 500;
 
- @media (min-width: 960px) {
+ @media (${theme.breakpoint.md}) {
  margin-top: 12px;
 
  font-size: 1.6rem;
@@ -82,7 +84,7 @@ export const TextContainer = styled.div`
 export const PeopleText = styled.span`
  font-size: 1.4rem;
 
- @media (min-width: 960px) {
+ @media (${theme.breakpoint.md}) {
  font-size: 1.6rem;
  }
 `;
@@ -94,7 +96,7 @@ export const PercentText = styled.span`
 
  opacity: 0.7;
 
- @media (min-width: 960px) {
+ @media (${theme.breakpoint.md}) {
  font-size: 1.4rem;
  }
 `;
diff --git a/frontend/src/components/optionList/WrittenVoteOptionList/style.ts b/frontend/src/components/optionList/WrittenVoteOptionList/style.ts
@@ -1,13 +1,15 @@
 import { styled } from 'styled-components';
 
+import { theme } from '@styles/theme';
+
 export const VoteOptionListContainer = styled.ul`
  display: flex;
  flex-direction: column;
  gap: 12px;
 
  width: 100%;
 
- @media (min-width: 960px) {
+ @media (${theme.breakpoint.md}) {
  gap: 18px;
  }
 `;