38 기본 design color 변경

src/components/common/FileFind/index.tsx

@@ -9,18 +9,16 @@ type FileFindProps = {
 
 export const FileFind: React.FC<FileFindProps> = ({ handleChangeFile, fileProps }) => (
   <S.FileFindContainer>
-    {fileProps.filename != '' && fileProps.size != '' && fileProps.fileType != '' ? (
-      <S.FileFindTextBox placeholders={false}>
-        {'이름:' +
+    <S.FileFindTextBox>
+      {fileProps.filename != '' && fileProps.size != '' && fileProps.fileType != ''
+        ? '이름:' +
           fileProps.filename +
           ' / 크기:' +
           fileProps.size +
           ' / 타입:' +
-          fileProps.fileType}
-      </S.FileFindTextBox>
-    ) : (
-      <S.FileFindTextBox placeholders={true}>업로드 할 파일을 선택해주세요....</S.FileFindTextBox>
-    )}
+          fileProps.fileType
+        : '업로드 할 파일을 선택해주세요....'}
+    </S.FileFindTextBox>
 
     <S.FileFindButton htmlFor="file">찾아보기</S.FileFindButton>
     <input type={'file'} id="file" style={{ display: 'none' }} onChange={handleChangeFile} />

src/components/common/FileFind/styled.ts

@@ -7,14 +7,13 @@ export const FileFindContainer = styled.div`
   margin-top: 20px;
 `;
 
-export const FileFindTextBox = styled.div<{ placeholders: boolean }>`
+export const FileFindTextBox = styled.div`
   border: 4px solid var(--color-border);
   border-radius: 10px;
   width: 45rem;
   height: 4.2rem;
-  background-color: var(--color-text-primary);
-  color: ${(props) =>
-    props.placeholders ? 'var(--color-text-placeholder)' : ' var(--color-text-secondary)'};
+  background-color: var(--color-backgorund-black);
+  color: var(--color-text-placeholder);
   display: flex;
   align-items: center;
   white-space: nowrap;
@@ -35,7 +34,7 @@ export const FileFindButton = styled.label`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-text-secondary);
+  color: var(--color-text-primary);
   font-size: 2rem;
   font-weight: 700;
   border-radius: 10px;

src/components/common/PasswordInput/index.ts

@@ -2,6 +2,8 @@ import styled from '@emotion/styled';
 
 export const PasswordInput = styled.input`
   border: 4px solid var(--color-border);
+  background-color: var(--color-backgorund-black);
+  color: var(--color-text-placeholder);
   border-radius: 10px;
   outline: none;
   width: 100%;
@@ -10,4 +12,7 @@ export const PasswordInput = styled.input`
   font-size: 1.8rem;
   font-weight: 700;
   margin-top: 20px;
+  &::-webkit-input-placeholder {
+    color: var(--color-text-placeholder);
+  }
 `;

src/components/common/UpLoadButton/index.ts

@@ -10,6 +10,6 @@ export const UpLoadButton = styled.input`
   font-weight: 900;
   background-color: var(--color-background-secondary);
   margin-top: 30px;
-  color: var(--color-text-secondary);
+  color: var(--color-text-primary);
   text-align: center;
 `;

src/pages/main/index.tsx

@@ -5,6 +5,7 @@ import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { bindActionCreators } from 'redux';
 
+// eslint-disable-next-line
 import { CheckBox, PasswordInput, UpLoadButton, FileFind, Progress } from '../../components';
 import { actionCreators } from '../../state';
 import { getFileSize } from '../../utils';
@@ -15,8 +16,11 @@ export const MainPage: React.FC = () => {
   const [typingCount, setTypingCount] = useState(0);
   const [uploading, setUploading] = useState(true);
   const [progressValue, serProgressValue] = useState(0);
+  // eslint-disable-next-line
   const [retentionPeriod, setRetentionPeriod] = useState(false);
+  // eslint-disable-next-line
   const [downloadCount, setDownloadCount] = useState(false);
+  // eslint-disable-next-line
   const [passwordBoolean, setPasswordBoolean] = useState(false);
   const [password, setPassword] = useState('');
   const [fileProps, setFileProps] = useState({
@@ -113,7 +117,7 @@ export const MainPage: React.FC = () => {
     <S.MainPageContainer>
       {uploading ? (
         <>
-          <S.MainPageCheckBoxSection>
+          {/* <S.MainPageCheckBoxSection>
             <CheckBox
               click={() => {
                 setRetentionPeriod(false);
@@ -141,7 +145,7 @@ export const MainPage: React.FC = () => {
               isCheck={passwordBoolean}
               label={'비밀번호'}
             />
-          </S.MainPageCheckBoxSection>
+          </S.MainPageCheckBoxSection> */}
           {passwordBoolean ? (
             <PasswordInput
               onChange={(text) => {

src/styles/globalStyle.ts

@@ -9,17 +9,18 @@ export const globalStyle = css`
     --color-text-primary: #ffffff;
     --color-text-secondary: #25262e;
     --color-text-tertiary: #8f95e0;
-    --color-text-placeholder: #757575;
+    --color-text-placeholder: #c8beac;
 
     --color-backgorund-progressbar: #2d2d2d;
 
-    --color-check-true-background: #2ab514;
+    --color-check-true-background: #252728;
     --color-check-true-icon: var(--color-text-primary);
-    --color-check-false-background: var(--color-text-primary);
-    --color-check-false-icon: #c0c0c0;
+    --color-check-false-background: #252728;
+    --color-check-false-icon: #252728;
 
     --color-border: #757bab;
     --color-background: #282a3a;
+    --color-backgorund-black: #252728;
     --color-background-secondary: var(--color-border);
     --color-background-tertiary: #2e2836;
     --color-background-apicommand: #373c62cc;