Update button padding and alignment***

***Update file find container margin and alignment*** ***Update progress bar styling and dimensions*** ***Update main page uploading state
tempfiles-team · Mar 30, 2024 · dec10ab · dec10ab
1 parent 427c1b2
commit dec10ab
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 17 deletions.
diff --git a/src/components/Button/styled.ts b/src/components/Button/styled.ts
@@ -15,7 +15,7 @@ export const ButtonContainer = styled.input<{ bgColor: string }>`
   border-radius: 0.8rem;
 
   margin: 0 1rem 0 1rem;
-  padding: 0.8rem 1.2rem;
+  padding: 0 3rem;
 `;
 
 ButtonContainer.defaultProps = { type: 'button' };
diff --git a/src/components/FileFind/styled.ts b/src/components/FileFind/styled.ts
@@ -4,7 +4,8 @@ export const FileFindContainer = styled.div`
   width: 100%;
   display: flex;
   align-items: center;
-  margin-top: 2rem;
+  justify-content: center;
+  margin: 2rem 2rem 0 2rem;
 `;
 
 export const FileFindText = styled.p`

diff --git a/src/components/Progress/styled.ts b/src/components/Progress/styled.ts
@@ -4,15 +4,16 @@ export const ProgressContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 100%;
 `;
 
 export const ProgressBar = styled.div<{ width: number }>`
   display: flex;
-  min-width: 70rem;
-  min-height: 5.6rem;
   background: var(--color-backgorund-progressbar);
-  border-radius: 1.5rem;
-  overflow: hidden;
+  border-radius: 0.5rem;
+  width: 90%;
+  height: 3rem;
+
   &::before {
     content: ' ';
     transition: all 1s;
@@ -28,10 +29,3 @@ export const ProgressText = styled.div`
   font-weight: 700;
   margin-top: 2rem;
 `;
-
-export const ProgressAnimationBox = styled.div`
-  width: 20rem;
-  height: 20rem;
-  overflow: hidden;
-  margin-bottom: 1rem;
-`;
diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx
@@ -17,7 +17,7 @@ import * as S from './styled';
 export function MainPage() {
   const typingText = ['.', '..', '...'];
   const [typingCount, setTypingCount] = useState(0);
-  const [uploading, setUploading] = useState(true);
+  const [uploading, setUploading] = useState(false);
   const [progressValue, setProgressValue] = useState(0);
   const [progressStateText, setProgressStateText] = useState('uploading');
 
@@ -145,8 +145,8 @@ export function MainPage() {
   }, [typingCount]);
   return (
     <S.MainPageContainer>
-      {uploading ? (
-        <>
+      {!uploading ? (
+        <S.MainControlledSection>
           <S.MainPageCheckBoxSection>
             <CheckBox
               click={() => sethideBoolean(!hideBoolean)}
@@ -191,7 +191,7 @@ export function MainPage() {
             hideBoolean={hideBoolean}
           />
           <UpLoadButton type={'button'} value={'업로드'} onClick={UpLoad} />
-        </>
+        </S.MainControlledSection>
       ) : (
         <Progress
           value={progressValue}

diff --git a/src/pages/main/styled.ts b/src/pages/main/styled.ts
@@ -4,6 +4,16 @@ export const MainPageContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 100%;
+
+  justify-content: center;
+`;
+export const MainControlledSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
 `;
 
 export const MainPageCheckBoxSection = styled.div`