feat-fe: 공고 대시보드 사이드바의 각 버튼 항목에 대한 툴팁 요소 구현 (#936)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Seongjin Hong <[email protected]>
woowacourse-teams · Oct 24, 2024 · fc9d8f5 · fc9d8f5
1 parent 74be06d
commit fc9d8f5
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 8 deletions.
diff --git a/frontend/src/components/dashboard/DashboardSidebar/index.tsx b/frontend/src/components/dashboard/DashboardSidebar/index.tsx
@@ -110,7 +110,7 @@ export default function DashboardSidebar({
 
       <S.SidebarNav>
         <S.Contents>
-          <S.SidebarItem>
+          <S.SidebarItem isSidebarOpen={sidebarStyle.isSidebarOpen}>
             <Link to={routes.dashboard.list()}>
               <S.SidebarItemLink
                 isSelected={location.pathname === routes.dashboard.list()}
@@ -125,6 +125,7 @@ export default function DashboardSidebar({
                 {sidebarStyle.isSidebarOpen && <S.SidebarItemTextHeader>모집 공고</S.SidebarItemTextHeader>}
               </S.SidebarItemLink>
             </Link>
+            {!sidebarStyle.isSidebarOpen && <div className="sidebar-tooltip">모집 공고</div>}
           </S.SidebarItem>
 
           {!!options?.length && <S.Divider />}
@@ -137,7 +138,10 @@ export default function DashboardSidebar({
 
                 return (
                   /* eslint-disable react/jsx-indent */
-                  <S.SidebarItem key={label}>
+                  <S.SidebarItem
+                    isSidebarOpen={sidebarStyle.isSidebarOpen}
+                    key={label}
+                  >
                     <S.SidebarItemLink
                       isSelected={currentMenu === label}
                       isSidebarOpen={sidebarStyle.isSidebarOpen}
@@ -151,6 +155,7 @@ export default function DashboardSidebar({
                       </S.IconContainer>
                       {sidebarStyle.isSidebarOpen && <S.SidebarItemText>{label}</S.SidebarItemText>}
                     </S.SidebarItemLink>
+                    {!sidebarStyle.isSidebarOpen && <div className="sidebar-tooltip">{label}</div>}
                   </S.SidebarItem>
                 );
               })}
@@ -167,7 +172,10 @@ export default function DashboardSidebar({
                   {posts?.map(({ text, isSelected, applyFormId, dashboardId, status }) => {
                     const Icon = IconObj[status.status];
                     return (
-                      <S.SidebarItem key={applyFormId}>
+                      <S.SidebarItem
+                        isSidebarOpen={sidebarStyle.isSidebarOpen}
+                        key={applyFormId}
+                      >
                         <Link
                           to={routes.dashboard.post({ dashboardId: String(dashboardId), applyFormId })}
                           onClick={onResetTab}
@@ -185,6 +193,7 @@ export default function DashboardSidebar({
                             {sidebarStyle.isSidebarOpen && <S.SidebarItemText>{text}</S.SidebarItemText>}
                           </S.SidebarItemLink>
                         </Link>
+                        {!sidebarStyle.isSidebarOpen && <div className="sidebar-tooltip">{text}</div>}
                       </S.SidebarItem>
                     );
                   })}

diff --git a/frontend/src/components/dashboard/DashboardSidebar/style.ts b/frontend/src/components/dashboard/DashboardSidebar/style.ts
@@ -54,12 +54,37 @@ const SidebarItemGroup = styled.ul`
   margin-bottom: 2.4rem;
 `;
 
-const SidebarItem = styled.li`
+const SidebarItem = styled.li<{ isSidebarOpen: boolean }>`
   display: flex;
   align-items: center;
 
   list-style: none;
   height: 2.4rem;
+
+  & .sidebar-tooltip {
+    position: absolute;
+    transform: ${({ isSidebarOpen }) => (isSidebarOpen ? 'translate(26rem, 1.4rem)' : 'translate(4rem, 1.4rem)')};
+    transition: all 0.5s ease;
+    z-index: 5;
+
+    background: ${({ theme }) => theme.baseColors.grayscale[900]};
+    ${({ theme }) => theme.typography.common.block};
+    color: ${({ theme }) => theme.baseColors.grayscale[100]};
+    line-height: inherit;
+
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+    border-radius: 0.8rem;
+    padding: 0.8rem 1.2rem;
+    opacity: 0;
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+  &:hover .sidebar-tooltip {
+    opacity: 1;
+    pointer-events: auto;
+    transform: ${({ isSidebarOpen }) => (isSidebarOpen ? 'translate(26.5rem, 1.4rem)' : 'translate(4.5rem, 1.4rem)')};
+  }
 `;
 
 const SidebarItemLink = styled.div<{ isSelected: boolean; isSidebarOpen?: boolean }>`

diff --git a/frontend/src/components/recruitmentPost/ApplyForm/index.tsx b/frontend/src/components/recruitmentPost/ApplyForm/index.tsx
@@ -39,6 +39,8 @@ export default function ApplyForm({ questions, isClosed }: ApplyFormProps) {
 
   const { error } = useToast();
 
+  const questionCount = questions.length + 4;
+
   const handleSubmit: FormEventHandler<HTMLFormElement> = (e) => {
     e.preventDefault();
 
@@ -78,7 +80,7 @@ export default function ApplyForm({ questions, isClosed }: ApplyFormProps) {
   return (
     <C.ContentContainer>
       <S.Form onSubmit={handleSubmit}>
-        <S.AriaCustomQuestion aria-label={`총 ${questions.length + 3}의 입력 중 1번째 입력입니다.`}>
+        <S.AriaCustomQuestion aria-label={`총 ${questionCount}의 입력 중 1번째 입력입니다.`}>
           <InputField
             {...register('name', { validate: { onBlur: validateName.onBlur, onChange: validateName.onChange } })}
             name="name"
@@ -89,7 +91,7 @@ export default function ApplyForm({ questions, isClosed }: ApplyFormProps) {
           />
         </S.AriaCustomQuestion>
 
-        <S.AriaCustomQuestion aria-label={`총 ${questions.length + 3}의 입력 중 2번째 입력입니다.`}>
+        <S.AriaCustomQuestion aria-label={`총 ${questionCount}의 입력 중 2번째 입력입니다.`}>
           <InputField
             {...register('email', { validate: { onBlur: validateEmail.onBlur } })}
             label="이메일"
@@ -98,7 +100,7 @@ export default function ApplyForm({ questions, isClosed }: ApplyFormProps) {
           />
         </S.AriaCustomQuestion>
 
-        <S.AriaCustomQuestion aria-label={`총 ${questions.length + 3}의 입력 중 3번째 입력입니다.`}>
+        <S.AriaCustomQuestion aria-label={`총 ${questionCount}의 입력 중 3번째 입력입니다.`}>
           <InputField
             {...register('phone', {
               validate: {
@@ -117,7 +119,7 @@ export default function ApplyForm({ questions, isClosed }: ApplyFormProps) {
         {questions.map((question, index) => (
           <S.AriaCustomQuestion
             key={question.questionId}
-            aria-label={`총 ${questions.length + 3}의 입력 중 ${index + 4}번째 질문입니다.`}
+            aria-label={`총 ${questionCount}의 입력 중 ${index + 4}번째 질문입니다.`}
           >
             <CustomQuestion
               question={question}