🎨 design: 얼굴 인식 박스 UI 수정 (goorm-6zo#189)

Author: AhnRian

src/components/card/user/conferenceCard/ConferenceCard.tsx

@@ -30,6 +30,7 @@ const ConferenceCard: React.FC<ConferenceCardProps> = ({
   imageUrl,
   onClick,
 }) => {
+  console.log('img:', imageUrl);
   return (
     <S.CardContainer onClick={onClick}>
       {imageUrl && <Img size={100} imageUrl={imageUrl} />}

src/pages/face-recognition/FaceRecognition.style.ts

@@ -21,16 +21,66 @@ export const ToastBox = styled.span`
   left: 50%;
   transform: translate(-50%, -50%);
 `;
+// export const Box = styled.div<BoxProps>`
+//   position: absolute;
+//   width: ${({ $boxWidth }) => `${$boxWidth}px`};
+//   height: ${({ $boxHeight }) => `${$boxHeight}px`};
+//   border: ${({ $isFaceInside }) =>
+//     $isFaceInside ? '3px solid blue' : '3px solid red'};
+//   top: 50%;
+//   left: 50%;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   transform: translate(-50%, -50%);
+// `;
+
 export const Box = styled.div<BoxProps>`
   position: absolute;
   width: ${({ $boxWidth }) => `${$boxWidth}px`};
   height: ${({ $boxHeight }) => `${$boxHeight}px`};
-  border: ${({ $isFaceInside }) =>
-    $isFaceInside ? '3px solid blue' : '3px solid red'};
   top: 50%;
   left: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   transform: translate(-50%, -50%);
+  pointer-events: none;
+
+  &::before,
+  &::after,
+  > div::before,
+  > div::after {
+    content: '';
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    border: ${({ $isFaceInside }) =>
+      $isFaceInside ? `3px solid #1466FF` : '3px solid white'};
+  }
+
+  &::before {
+    top: 0;
+    left: 0;
+    border-right: none;
+    border-bottom: none;
+  }
+
+  &::after {
+    top: 0;
+    right: 0;
+    border-left: none;
+    border-bottom: none;
+  }
+
+  > div::before {
+    bottom: 0;
+    left: 0;
+    border-right: none;
+    border-top: none;
+  }
+
+  > div::after {
+    bottom: 0;
+    right: 0;
+    border-left: none;
+    border-top: none;
+  }
 `;

src/pages/face-recognition/FaceRecognition.tsx

@@ -119,7 +119,9 @@ const FaceRecognition = () => {
             $boxWidth={boxSize}
             $boxHeight={boxSize}
             $isFaceInside={isFaceInside || faceState === 'success'}
-          ></S.Box>
+          >
+            <div />
+          </S.Box>
         )}
         {isVideoLoaded && (
           <S.ToastBox>

src/pages/user/FaceRegistration.style.ts

@@ -20,15 +20,52 @@ export const Box = styled.div<BoxProps>`
   position: absolute;
   width: ${({ $boxWidth }) => `${$boxWidth}px`};
   height: ${({ $boxHeight }) => `${$boxHeight}px`};
-  border: ${({ $isFaceInside }) =>
-    $isFaceInside ? '3px solid green' : '3px solid red'};
   top: 50%;
   left: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   transform: translate(-50%, -50%);
+  pointer-events: none;
+
+  &::before,
+  &::after,
+  > div::before,
+  > div::after {
+    content: '';
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    border: ${({ $isFaceInside }) =>
+      $isFaceInside ? `3px solid #1466FF` : '3px solid white'};
+  }
+
+  &::before {
+    top: 0;
+    left: 0;
+    border-right: none;
+    border-bottom: none;
+  }
+
+  &::after {
+    top: 0;
+    right: 0;
+    border-left: none;
+    border-bottom: none;
+  }
+
+  > div::before {
+    bottom: 0;
+    left: 0;
+    border-right: none;
+    border-top: none;
+  }
+
+  > div::after {
+    bottom: 0;
+    right: 0;
+    border-left: none;
+    border-top: none;
+  }
 `;
+
 export const ToastBox = styled.span`
   position: absolute;
   bottom: 10%;

src/pages/user/FaceRegistration.tsx

@@ -77,7 +77,9 @@ const FaceRegistration = () => {
                 $boxWidth={230}
                 $boxHeight={230}
                 $isFaceInside={isFaceInside}
-              ></S.Box>
+              >
+                <div />
+              </S.Box>
             )}
             {isCameraVisible && isVideoLoaded && (
               <S.ToastBox>