refactor-fe: 일관된 UI로 리팩터링 (#221)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Jeongwoo Park <[email protected]>
woowacourse-teams · Aug 1, 2024 · a311c59 · a311c59
1 parent 26cc197
commit a311c59
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 3 deletions.
diff --git a/frontend/src/components/appModal/ApplicantDetailInfo/AppDetailHeader/style.ts b/frontend/src/components/appModal/ApplicantDetailInfo/AppDetailHeader/style.ts
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 const Container = styled.div`
-  height: 9rem;
+  height: 100%;
   padding: 1.8rem 1.6rem;
 
   display: flex;

diff --git a/frontend/src/components/common/PopOverMenu/style.ts b/frontend/src/components/common/PopOverMenu/style.ts
@@ -7,7 +7,7 @@ interface ContainerProps {
 }
 
 const Container = styled.div<ContainerProps>`
-  width: ${({ size }) => (size === 'sm' ? '90px' : '240px')};
+  min-width: ${({ size }) => (size === 'sm' ? '90px' : '240px')};
   position: absolute;
   inset: ${({ popOverPosition }) => popOverPosition ?? 'inherit'};
 

diff --git a/frontend/src/components/common/QuestionBox/index.tsx b/frontend/src/components/common/QuestionBox/index.tsx
@@ -1,3 +1,4 @@
+import { HiOutlineDownload } from 'react-icons/hi';
 import S from './style';
 
 interface TextQuestionBoxProps {
@@ -25,7 +26,9 @@ const renderContent = (props: QuestionBoxProps) => {
       <S.Content>
         <S.FileRow>
           <S.FileName>{props.fileName}</S.FileName>
-          <S.DownloadIcon onClick={props.onFileDownload}>&#x2193;</S.DownloadIcon>
+          <S.DownloadIcon onClick={props.onFileDownload}>
+            <HiOutlineDownload size="1.6rem" />
+          </S.DownloadIcon>
         </S.FileRow>
       </S.Content>
     );

diff --git a/frontend/src/components/common/QuestionBox/style.ts b/frontend/src/components/common/QuestionBox/style.ts
@@ -36,6 +36,10 @@ const FileName = styled.span`
 `;
 
 const DownloadIcon = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   font-size: 1.6rem;
   cursor: pointer;
   color: ${({ theme }) => theme.baseColors.grayscale[800]};