Merge pull request #21 from Team-INSERT/layouts/aside

사이드바 UI/UX 개선
Team-INSERT · Jul 1, 2023 · c9fb208 · c9fb208
2 parents 9551258 + 5ee4597
commit c9fb208
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 19 deletions.
diff --git a/src/components/Aside/InfomationBox.tsx b/src/components/Aside/InfomationBox.tsx
@@ -49,15 +49,15 @@ const UserType = styled.span`
 `;
 
 const InfomationButton = styled.button`
-  width: 58px;
-  height: 20px;
+  width: 76px;
+  height: 26px;
   background-color: ${color.primary_blue};
   border-radius: 5px;
   display: block;
   margin-left: auto;
 
   &:after {
-    ${font.p4};
+    ${font.btn3};
     color: ${color.white};
     content: "내 정보";
   }

diff --git a/src/components/Aside/JoinCheckBox.tsx b/src/components/Aside/JoinCheckBox.tsx
@@ -1,13 +1,20 @@
 import color from "@/styles/color";
-import Image from "next/image";
 import React from "react";
 import styled from "styled-components";
-import Check from "./assets/check.svg";
+import { font } from "@/styles/font";
+import Row from "../Flex/Row";
 
 const JoinCheckBox = () => {
   return (
     <Container>
-      <Image src={Check} alt="check" width={90} height={90} />
+      <HGroup>
+        <Date>2023년 7월 1주차</Date>
+        <Row gap="2px">
+          <RoomNumber>334</RoomNumber>
+          <UserName>박우빈</UserName>
+        </Row>
+      </HGroup>
+      <CheckButton disabled />
     </Container>
   );
 };
@@ -18,8 +25,54 @@ const Container = styled.section`
   border-radius: 5px;
   background-color: ${color.white};
   display: flex;
-  justify-content: center;
+  padding: 18px 0;
+  justify-content: space-between;
+  flex-direction: column;
   align-items: center;
 `;
 
+const HGroup = styled.hgroup`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+const Date = styled.span`
+  ${font.H6};
+  color: ${color.gray};
+`;
+
+const RoomNumber = styled.span`
+  ${font.H6};
+
+  &:after {
+    content: "호";
+  }
+`;
+
+const UserName = styled.span`
+  ${font.H6};
+`;
+
+const CheckButton = styled.button`
+  width: 78%;
+  height: 32px;
+  background-color: ${color.primary_blue};
+  border-radius: 3px;
+  color: ${color.white};
+  ${font.btn3};
+
+  &:after {
+    content: "입사 체크하기";
+  }
+
+  &:disabled {
+    background-color: ${color.content};
+
+    &:after {
+      content: "입사 체크완료";
+    }
+  }
+`;
+
 export default JoinCheckBox;
diff --git a/src/components/Aside/MeisterBox.tsx b/src/components/Aside/MeisterBox.tsx
@@ -25,9 +25,6 @@ const MeisterBox = () => {
           <Row gap="4px">
             <Score>214.2</Score>
             <Rank>48</Rank>
-            {score.type === service.reward_points.type && (
-              <ScoreGap>43-11</ScoreGap>
-            )}
           </Row>
         </ScoreHGroup>
       ))}
@@ -75,13 +72,4 @@ const Rank = styled.small`
   }
 `;
 
-const ScoreGap = styled(Rank)`
-  &:before {
-    content: "(";
-  }
-  &:after {
-    content: ")";
-  }
-`;
-
 export default MeisterBox;