Merge pull request #62 from boostcamp-2020/feat/style

[FE] 전체적인 UI 개선작업
boostcamp-2020 · Dec 4, 2020 · 1f26266 · 1f26266
2 parents 8c4df2c + 7256884
commit 1f26266
Show file tree

Hide file tree

Showing 15 changed files with 162 additions and 53 deletions.
diff --git a/client/src/components/atoms/Button/Button.tsx b/client/src/components/atoms/Button/Button.tsx
@@ -25,6 +25,10 @@ const StyledButton = styled.button<StyledProps>`
     cursor: not-allowed;
     opacity: 0.5;
   }
+  &:hover {
+    background-color: ${color.BORDER};
+    box-shadow: 0 0 10px 8px rgba(255, 255, 255, 0.2);
+  }
 `;
 
 interface Props {

diff --git a/client/src/components/atoms/Button/index.ts b/client/src/components/atoms/Button/index.ts
@@ -1,3 +1,3 @@
 export { default } from './Button';
 
-export type ButtonType = 'default' | 'transparent';
+export type ButtonType = 'default' | 'transparent' | 'selected';
diff --git a/client/src/components/atoms/Button/style.ts b/client/src/components/atoms/Button/style.ts
@@ -13,6 +13,11 @@ export default (type: ButtonType) => {
       return `
         background : transparent;
       `;
+    case 'selected':
+      return `
+          background : transparent;
+          color: ${color.PALE_PURPLE};
+        `;
     default:
       return ``;
   }

diff --git a/client/src/components/atoms/VideoList/VideoItem.tsx b/client/src/components/atoms/VideoList/VideoItem.tsx
@@ -8,8 +8,9 @@ import { parseDateString } from '@/utils/time';
 const StyledDiv = styled.div`
   display: flex;
   align-items: center;
-  justify-content: space-around;
+  justify-content: space-between;
   border-bottom: 1px solid ${color.BORDER};
+  font-size: 13px;
   ${({ isChecked }) =>
     `background-color: ${
       isChecked ? `${color.DARK_PURPLE}` : `${color.MODAL}`
@@ -20,14 +21,31 @@ const StyledDiv = styled.div`
   }
 `;
 
+const WrapperDiv = styled.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 1rem;
+`;
+
 const Image = styled.img`
   width: 2.5rem;
   height: 2rem;
 `;
+const NameDiv = styled.div`
+  width: 70%;
+  margin-left: 1rem;
+`;
 
-const Name = styled.p``;
+const Name = styled.p`
+  white-space: nowrap;
+`;
 
-const Timestamp = styled.p``;
+const Timestamp = styled.p`
+  font-size: 12px;
+  white-space: nowrap;
+`;
 
 interface Props {
   video: Video;
@@ -41,9 +59,13 @@ const VideoItem: React.FC<Props> = ({ video, handleCheck, selected }) => {
       onClick={() => handleCheck(video)}
       isChecked={selected === video}
     >
-      <Image src="https://user-images.githubusercontent.com/49153756/99666210-03b80600-2aae-11eb-95b9-f61f52694708.png" />
-      <Name>{video.name}</Name>
-      <Timestamp>{parseDateString(new Date(), video.updatedAt)}</Timestamp>
+      <WrapperDiv>
+        <Image src="https://user-images.githubusercontent.com/49153756/99666210-03b80600-2aae-11eb-95b9-f61f52694708.png" />
+        <NameDiv>
+          <Name>{video.name}</Name>
+        </NameDiv>
+        <Timestamp>{parseDateString(new Date(), video.updatedAt)}</Timestamp>
+      </WrapperDiv>
     </StyledDiv>
   );
 };

diff --git a/client/src/components/molecules/ButtonGroup/ButtonGroup.tsx b/client/src/components/molecules/ButtonGroup/ButtonGroup.tsx
@@ -14,7 +14,7 @@ const StyledDiv = styled.div<string>`
 interface button {
   onClick: () => void;
   message: string;
-  type: 'default' | 'transparent';
+  type: 'default' | 'transparent' | 'selected';
   children: React.ReactChild;
   disabled: boolean;
 }

diff --git a/client/src/components/molecules/FileInput/FileInput.tsx b/client/src/components/molecules/FileInput/FileInput.tsx
@@ -7,7 +7,7 @@ import color from '@/theme/colors';
 
 const slide = keyframes`
   from {
-    transform: translate(0, -50px) rotate(90deg);
+    transform: translate(0, -2rem) rotate(90deg);
     opacity: 0;
   }
   to {
@@ -22,7 +22,7 @@ const StyledDiv = styled.div`
   flex-direction: column;
   justify-content: center;
   border-radius: 5px;
-  top: 2rem;
+  top: 3rem;
   right: 0;
   border: 1px solid ${color.BORDER};
   background-color: ${color.BLACK};

diff --git a/client/src/components/molecules/Modal/Modal.tsx b/client/src/components/molecules/Modal/Modal.tsx
@@ -33,17 +33,27 @@ const StyledModalSection = styled.div`
   box-shadow: 0 0 10px 8px rgba(255, 255, 255, 0.2);
   color: ${color.WHITE};
   z-index: 3;
+  margin-bottom: 1rem;
 `;
 
 const StyledModalButtonRow = styled.div`
   position: absolute;
   width: 100%;
-  bottom: 1rem;
-  margin-top: 1rem;
-  text-align: center;
+  bottom: 0.5rem;
+  padding-top: 0.5rem;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-top: 1px solid ${color.BORDER};
 
   button {
     color: ${color.WHITE};
+    padding: 0.5rem 2rem;
+    border-radius: 40%;
+    &:hover {
+      background-color: ${color.BORDER};
+      box-shadow: 0 0 10px 8px rgba(255, 255, 255, 0.2);
+    }
   }
 `;
 

diff --git a/client/src/components/molecules/UploadArea/UploadArea.tsx b/client/src/components/molecules/UploadArea/UploadArea.tsx
@@ -8,7 +8,12 @@ import { setVideo } from '@/store/originalVideo/actions';
 import { getName } from '@/store/selectors';
 
 const StyledDiv = styled.div`
+  height: 100%;
+`;
+
+const WrapperDiv = styled.div`
   display: flex;
+  height: 100%;
   align-items: center;
   position: relative;
 `;
@@ -36,14 +41,16 @@ const UploadArea: React.FC = () => {
 
   return (
     <StyledDiv>
-      <StyledP>{name}</StyledP>
-      <Button
-        message="불러오기"
-        onClick={() => setVisible(!visible)}
-        type="default"
-        disabled={false}
-      />
-      {visible && <FileInput ref={ref} handleChange={handleChange} />}
+      <WrapperDiv>
+        <StyledP>{name}</StyledP>
+        <Button
+          message="불러오기"
+          onClick={() => setVisible(!visible)}
+          type="default"
+          disabled={false}
+        />
+        {visible && <FileInput ref={ref} handleChange={handleChange} />}
+      </WrapperDiv>
     </StyledDiv>
   );
 };

diff --git a/client/src/components/organisms/Header/Header.tsx b/client/src/components/organisms/Header/Header.tsx
@@ -22,6 +22,8 @@ const StyledHeader = styled.header`
   align-items: center;
   height: 100px;
   padding: 0 2rem 0 1rem;
+  background-color: ${color.VIDEO};
+  border-bottom: 1px solid ${color.BORDER};
 `;
 
 interface button {
@@ -84,6 +86,14 @@ const getCancelConfirmData = (
 
 const HistoryTool = styled(ButtonGroup)``;
 
+const HistoryWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 20rem;
+  position: absolute;
+  left: calc(50% - 10rem);
+`;
+
 const CancelConfirm = styled(ButtonGroup)``;
 const CancelConfirmStyle = `
   button {
@@ -93,30 +103,34 @@ const CancelConfirmStyle = `
 
 const StyledModalRow = styled.div`
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  padding: 5%;
+  padding: 1rem;
 `;
 
 const StyledInput = styled.input`
-  margin-left: 5px;
-  padding: 5px;
+  width: 75%;
+  padding: 0.5rem;
   border-radius: 5px;
   border: none;
   box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.1);
   background-color: ${color.MODAL};
   color: ${color.WHITE};
+  outline: none;
 `;
 
 const StyledP = styled.p`
   margin: 0;
+  width: 25%;
   font-size: 12px;
+  text-align: center;
 `;
 
 const modalLayout = `
-top: 45vh;
+top: 35vh;
 left: 40vw;
 width: 20vw;
-height: 10vh;
+height: 12vh;
 `;
 
 const Header: React.FC = () => {
@@ -162,14 +176,16 @@ const Header: React.FC = () => {
   return (
     <StyledHeader>
       <Logo />
-      <HistoryTool
-        buttonData={getHistoryToolData(
-          handlePrevious,
-          handleNext,
-          handleReset,
-          hasEmptyVideo
-        )}
-      />
+      <HistoryWrapper>
+        <HistoryTool
+          buttonData={getHistoryToolData(
+            handlePrevious,
+            handleNext,
+            handleReset,
+            hasEmptyVideo
+          )}
+        />
+      </HistoryWrapper>
       <CancelConfirm
         StyledProps={CancelConfirmStyle}
         buttonData={getCancelConfirmData(

diff --git a/client/src/components/organisms/TimeLine/TimeLine.tsx b/client/src/components/organisms/TimeLine/TimeLine.tsx
@@ -7,6 +7,8 @@ import TimeZone from '@/components/molecules/TimeZone';
 import CurrentTime from '@/components/molecules/CurrentTime';
 import { getName } from '@/store/selectors';
 import color from '@/theme/colors';
+import size from '@/theme/sizes';
+import { MdVideoLibrary } from 'react-icons/md';
 
 const Container = styled.div`
   display: flex;
@@ -41,6 +43,7 @@ const StyledDiv = styled.div`
   width: 100%;
   height: 70%;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
 `;
@@ -51,6 +54,7 @@ const WrapperDiv = styled(StyledDiv)`
 
 const Name = styled.p`
   margin: 0;
+  margin-top: 0.5rem;
   font-size: 12px;
 `;
 
@@ -62,6 +66,7 @@ const TimeLine: React.FC = () => {
       <TimeLineLeft>
         <CurrentTime />
         <StyledDiv>
+          <MdVideoLibrary size={size.ICON_SIZE} />
           <Name>{name}</Name>
         </StyledDiv>
       </TimeLineLeft>

diff --git a/client/src/components/organisms/Tools/Tools.tsx b/client/src/components/organisms/Tools/Tools.tsx
@@ -9,6 +9,7 @@ import video from '@/video';
 import { play, pause, moveTo } from '@/store/currentVideo/actions';
 import { getStartEnd, getPlaying, getVisible } from '@/store/selectors';
 import { cropStart, cropCancel, cropConfirm } from '@/store/crop/actions';
+import color from '@/theme/colors';
 import reducer, { initialData, ButtonTypes } from './reducer';
 import {
   getEditToolData,
@@ -24,24 +25,29 @@ const StyledDiv = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
+  flex-wrap: wrap;
   padding: 1rem;
+  height: 5.5rem;
 `;
 
 const slide = keyframes`
   from {
-    transform: translate(0, 50px);
+    transform: translate(0, 2rem);
     opacity: 0;
   }
   to {
-    transform: translate(0, 0);
+    transform: translate(0, -1.5rem);
     opacity: 1;
   }
 `;
 
 const StyledEditToolDiv = styled.div`
   display: flex;
+  width: 20rem;
   flex-direction: column;
   align-items: center;
+  position: absolute;
+  left: calc(50% - 10rem);
 `;
 
 const EditTool = styled(ButtonGroup)`
@@ -52,20 +58,27 @@ const WrapperDiv = styled.div`
   width: 25rem;
   display: flex;
   justify-content: center;
-  animation: ${slide} 0.5s -0.1s ease-out;
+  animation: ${slide} 0.5s -0.2s ease-out;
+  ${({ isEdit }) =>
+    `transform: ${
+      isEdit === UP ? `translate(0, -1.5rem)` : `translate(0, 0)`
+    }`};
 `;
 
 const SubEditTool = styled(ButtonGroup)`
   width: 100%;
 `;
 
-const VideoTool = styled(ButtonGroup)``;
+const VideoTool = styled(ButtonGroup)`
+  display: flex;
+`;
 
 interface props {
   setEdit: Function;
+  isEdit: string;
 }
 
-const Tools: React.FC<props> = ({ setEdit }) => {
+const Tools: React.FC<props> = ({ setEdit, isEdit }) => {
   const playing = useSelector(getPlaying);
   const dispatch = useDispatch();
   const [toolType, setToolType] = useState(null);
@@ -199,7 +212,7 @@ const Tools: React.FC<props> = ({ setEdit }) => {
       />
       <StyledEditToolDiv>
         {toolType && (
-          <WrapperDiv>
+          <WrapperDiv isEdit={isEdit}>
             <SubEditTool buttonData={getSubEditToolsData(buttonData)} />
           </WrapperDiv>
         )}
@@ -208,7 +221,8 @@ const Tools: React.FC<props> = ({ setEdit }) => {
             handleRotateReverse,
             handleRatio,
             handleCrop,
-            hasEmptyVideo
+            hasEmptyVideo,
+            toolType
           )}
         />
       </StyledEditToolDiv>