Merge pull request #90 from ASAP-Lettering/hotfix/#86

[Design] 편지 날짜 보일 때의 font-size 조절

Author: yyypearl

src/app/verify/letter/page.tsx

@@ -80,7 +80,7 @@ const VerifyLetter = () => {
 
         // letterCode가 있을 경우 추가 검증 진행
         if (url) {
-          verifyLetter(url)
+          await verifyLetter(url)
             .then((res) => {
               if (res.data.letterId) {
                 setletterId(res.data.letterId);

src/components/common/Check.tsx

@@ -81,8 +81,8 @@ const CheckContainer = styled.label<{ $checkType: checkType }>`
 const CheckInput = styled.input<{ $checkType: checkType; $label: boolean }>`
   appearance: none;
   flex-shrink: 0;
-  width: ${({ $checkType }) => ($checkType ? "24px" : "32px")};
-  height: ${({ $checkType }) => ($checkType ? "24px" : "32px")};
+  width: ${({ $checkType }) => ($checkType !== "large" ? "24px" : "32px")};
+  height: ${({ $checkType }) => ($checkType !== "large" ? "24px" : "32px")};
   margin-right: ${({ $label }) => ($label ? "17px" : "0px")};
   border-radius: 4px;
   background-color: ${(props) =>
@@ -92,12 +92,13 @@ const CheckInput = styled.input<{ $checkType: checkType; $label: boolean }>`
         : theme.colors.gray500
       : "transparent"};
   position: relative;
+  display: flex;
 `;
 
 const StyledImage = styled(Image)<{ $checkType: checkType }>`
   position: absolute;
-  top: ${({ $checkType }) => ($checkType ? "2px" : "6px")};
-  left: ${({ $checkType }) => ($checkType ? "2px" : "6px")};
+  top: ${({ $checkType }) => ($checkType !== "large" ? "2px" : "6px")};
+  left: ${({ $checkType }) => ($checkType !== "large" ? "2px" : "6px")};
   pointer-events: none;
   z-index: 10;
 `;

src/components/common/Tag.tsx

@@ -377,36 +377,34 @@ const Box = styled.div<{
       background: ${theme.colors.gray800};
       ${(props) => props.theme.fonts.body08};
       display: flex;
-      ${
-        $hasEditIcon &&
-        css`
+      ${$hasEditIcon &&
+      css`
         height: 47px;
         padding: 9px 18px;
         border-radius: 200px;
         background: rgba(255, 255, 255, 0.2);
         backdrop-filter: blur(2px);
         ${(props) => props.theme.fonts.title01};
         gap: 4px;
-      `
-      }
-      ${
-        $hasName === false &&
-        css`
+      `}
+      ${$hasName === false &&
+      css`
         padding: 7.5px 13px 7.5px 13px;
-      `
-      }
+      `}
     `}
   
     ${({ $tagType, $orbitType }) =>
-      $tagType === "letter" &&
-      css`
+    $tagType === "letter" &&
+    css`
       display: block;
       max-width: 90px;
-      padding: ${$orbitType === "2" ? "10px" : "11px 15px"};
-      border-radius: 100px;
+      padding: ${$orbitType === "2" ? "7.5px 15px" : "11px 15px"};
+      border-radius: 40px;
       background: ${theme.colors.sub01};
-      ${(props) => props.theme.fonts.body07};
+      ${(props) =>
+        $orbitType === "2" ? props.theme.fonts.body8 : props.theme.fonts.body6};
       line-height: 16px;
+      font-size: ${$orbitType === "2" && "14px"};
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -449,7 +447,7 @@ const Name = styled.span`
 
 const Date = styled.span`
   color: ${theme.colors.gray300};
-  ${(props) => props.theme.fonts.caption03};
+  ${(props) => props.theme.fonts.caption05};
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-use-select: none;