[#220] 시맨틱 태그 + MetaData 수정

components/Columns/Card.tsx

@@ -3,7 +3,7 @@ import useCardId from '@/hooks/ModalCard/useCardId';
 import useCardOpen from '@/hooks/ModalCard/useCardOpen';
 import useDashBoardId from '@/hooks/ModalCard/useDashBoardId';
 import calendar from '@/public/assets/icons/calendar.svg';
-import DefaultImg from '@/public/assets/images/jaws.png';
+import DefaultImg from '@/public/assets/images/jaws.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onPc, onTablet } from '@/styles/mediaQuery';
 import { COLORS } from '@/styles/palettes';

components/Columns/Column.tsx

@@ -2,8 +2,8 @@ import CountChip from '@/components/Chip/CountChip';
 import Card from '@/components/Columns/Card';
 import Modal from '@/components/Modal/Modal';
 import AddButton from '@/components/common/Button/AddButton';
-import useColumns from '@/hooks/Dashboard/useColumn';
 import useRefresh from '@/hooks/Common/useRefresh';
+import useColumns from '@/hooks/Dashboard/useColumn';
 import BlueEllipse from '@/public/assets/icons/BlueEllipse.svg';
 import setting from '@/public/assets/icons/setting.svg';
 import { fontStyle } from '@/styles/fontStyle';
@@ -39,7 +39,7 @@ function Column({ title, columnId, dashboardId, applyColumnDelete }: ColumnProps
 
   useEffect(() => {
     loadColumCardList(true);
-  }, [columnId, refresh]);
+  }, [columnId, refresh, loadColumCardList]);
 
   return (
     <>

components/DashboardNavbar/DashboardNavbar.tsx

@@ -30,17 +30,6 @@ function DashboardNavbar({ members, totalMembers, isMyDashboard, dashboard }: Da
 
   return (
     <StyledContainer $isMyDashboard={isMyDashboard}>
-      {isModalOpen && (
-        <Modal
-          title="초대하기"
-          getValue={setModalValue}
-          onCancelClick={() => setIsModalOpen(false)}
-          onOkClick={() => {
-            inviteFetch();
-          }}
-        />
-      )}
-
       <StyledTitleContainer>
         <h3>{dashboardTitle}</h3>
         {!isMyDashboard && dashboard && dashboard.createdByMe && (
@@ -69,6 +58,16 @@ function DashboardNavbar({ members, totalMembers, isMyDashboard, dashboard }: Da
         <DarkModeToggleButton />
         <Profile />
       </StyledWrapper>
+      {isModalOpen && (
+        <Modal
+          title="초대하기"
+          getValue={setModalValue}
+          onCancelClick={() => setIsModalOpen(false)}
+          onOkClick={() => {
+            inviteFetch();
+          }}
+        />
+      )}
     </StyledContainer>
   );
 }
@@ -99,7 +98,7 @@ const StyledTitleContainer = styled.div`
   }
 `;
 
-const StyledContainer = styled.div<{ $isMyDashboard: boolean }>`
+const StyledContainer = styled.nav<{ $isMyDashboard: boolean }>`
   position: fixed;
   top: 0;
   width: 100%;
@@ -127,7 +126,7 @@ const StyledContainer = styled.div<{ $isMyDashboard: boolean }>`
   }
 `;
 
-const StyledWrapper = styled.div`
+const StyledWrapper = styled.main`
   position: relative;
   display: flex;
   align-items: center;

components/DashboardNavbar/Members.tsx

@@ -2,7 +2,7 @@ import Image from 'next/image';
 import styled from 'styled-components';
 
 import useMembers from '@/hooks/DashboardNavbar/useMembers';
-import DefaultProfile from '@/public/assets/images/jaws.png';
+import DefaultProfile from '@/public/assets/images/jaws.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onPc, onTablet } from '@/styles/mediaQuery';
 import { GetMembersInDashboardItem } from '@/types/api';

components/DashboardNavbar/Profile.tsx

@@ -1,9 +1,9 @@
 import Image from 'next/image';
 import styled from 'styled-components';
 
-import useProfile from '@/hooks/DashboardNavbar/useProfile';
 import DashboardDropdown from '@/components/DashboardNavbar/DashboardDropdown';
-import DefaultImg from '@/public/assets/images/jaws.png';
+import useProfile from '@/hooks/DashboardNavbar/useProfile';
+import DefaultImg from '@/public/assets/images/jaws.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onPc, onTablet } from '@/styles/mediaQuery';
 

components/Landing/Card.tsx

@@ -1,6 +1,6 @@
-import cardImg1 from '@/public/assets/images/landing4.png';
-import cardImg2 from '@/public/assets/images/landing5.png';
-import cardImg3 from '@/public/assets/images/landing6.png';
+import cardImg1 from '@/public/assets/images/landing4.avif';
+import cardImg2 from '@/public/assets/images/landing5.avif';
+import cardImg3 from '@/public/assets/images/landing6.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onPc, onTablet } from '@/styles/mediaQuery';
 import { COLORS } from '@/styles/palettes';

components/Landing/Hero.tsx

@@ -1,5 +1,5 @@
 import LoginButton from '@/components/common/Button/LoginButton';
-import HeroImg from '@/public/assets/images/landing1.png';
+import HeroImg from '@/public/assets/images/landing1.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onPc, onTablet } from '@/styles/mediaQuery';
 import { COLORS } from '@/styles/palettes';

components/Landing/Nav.tsx

@@ -1,8 +1,8 @@
 import useTheme from '@/hooks/Common/useTheme';
 import moonIcon from '@/public/assets/icons/moon.svg';
 import sunIcon from '@/public/assets/icons/sun.svg';
-import logoText from '@/public/assets/images/title.png';
-import logoImage from '@/public/assets/images/transJaws.png';
+import logoText from '@/public/assets/images/title.avif';
+import logoImage from '@/public/assets/images/transJaws.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onPc, onTablet } from '@/styles/mediaQuery';
 

components/Landing/Point.tsx

@@ -1,5 +1,5 @@
-import pointImg1 from '@/public/assets/images/landing2.png';
-import pointImg2 from '@/public/assets/images/landing3.png';
+import pointImg1 from '@/public/assets/images/landing2.avif';
+import pointImg2 from '@/public/assets/images/landing3.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onPc, onTablet } from '@/styles/mediaQuery';
 

components/ModalCard/Comment.tsx

@@ -2,7 +2,7 @@ import BasicInput from '@/components/Input/ModalInputContainer/BasicInput';
 import useUser from '@/hooks/global/useUser';
 import useComment from '@/hooks/useComment';
 
-import DefaultImg from '@/public/assets/images/jaws.png';
+import DefaultImg from '@/public/assets/images/jaws.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onTablet } from '@/styles/mediaQuery';
 import { COLORS } from '@/styles/palettes';

components/ModalCard/Manager.tsx

@@ -1,5 +1,5 @@
 import useCardId from '@/hooks/ModalCard/useCardId';
-import DefaultImg from '@/public/assets/images/jaws.png';
+import DefaultImg from '@/public/assets/images/jaws.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile } from '@/styles/mediaQuery';
 import { GetCardDetailsItem } from '@/types/api';

components/ModalDropDown/DropDownMenu.tsx

@@ -1,7 +1,7 @@
 import StatusChip from '@/components/Chip/StatusChip';
 import useDropDownMenu from '@/hooks/DropDown/useDropDownMenu';
 import Check from '@/public/assets/icons/GrayCheck.svg';
-import DefaultImg from '@/public/assets/images/jaws.png';
+import DefaultImg from '@/public/assets/images/jaws.avif';
 
 import Image from 'next/image';
 import { Dispatch, SetStateAction } from 'react';

components/MyDashboard/MyDashBoardButtonBox.tsx

@@ -18,7 +18,7 @@ function MyDashBoardButtonBox({ resetToFirst }: MyDashBoardButtonBoxProps) {
 
   if (!pageNum || !totalPages) return null;
   return (
-    <div>
+    <article>
       <ButtonBoxWrapper>
         <DashBoardAddButton onClick={() => setIsOpen(true)} />
         {allItems.map((item) => (
@@ -49,7 +49,7 @@ function MyDashBoardButtonBox({ resetToFirst }: MyDashBoardButtonBoxProps) {
           }}
         />
       )}
-    </div>
+    </article>
   );
 }
 

components/Sidebar/Dashboard.tsx

@@ -75,7 +75,7 @@ const StyledDashboardGroupContainer = styled.div`
   }
 `;
 
-const StyledTitleWrapper = styled.div`
+const StyledTitleWrapper = styled.p`
   color: ${COLORS.GRAY_78};
   margin-left: 16px;
   overflow-x: hidden;

components/Sidebar/Sidebar.tsx

@@ -3,8 +3,8 @@ import Modal from '@/components/Modal/Modal';
 import Dashboard from '@/components/Sidebar/Dashboard';
 import { INIT_CREATE_DASHBOARD } from '@/constants/InitialModalValues';
 import AddBox from '@/public/assets/icons/invite.svg';
-import LogoTitle from '@/public/assets/images/title.png';
-import Logo from '@/public/assets/images/transJaws.png';
+import LogoTitle from '@/public/assets/images/title.avif';
+import Logo from '@/public/assets/images/transJaws.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onPc, onTablet } from '@/styles/mediaQuery';
 import { COLORS } from '@/styles/palettes';
@@ -76,7 +76,7 @@ function Sidebar({ boardId, refreshToggle, refresh }: SidebarProps) {
 
 export default Sidebar;
 
-const StyledContainer = styled.div`
+const StyledContainer = styled.aside`
   position: fixed;
   z-index: 10;
   display: flex;

components/Table/InviteDashBoard.tsx

@@ -2,7 +2,7 @@ import TwinButton from '@/components/common/Button/TwinButton';
 import useDeviceType from '@/hooks/Common/useDeviceType';
 import useInviteDashBoard from '@/hooks/Dashboard/useInviteDashBoard';
 import search from '@/public/assets/icons/Search.svg';
-import NoContent from '@/public/assets/images/NoContent.png';
+import NoContent from '@/public/assets/images/NoContent.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onTablet } from '@/styles/mediaQuery';
 import { COLORS } from '@/styles/palettes';
@@ -30,10 +30,10 @@ function InviteDashBoard({ refreshToFirst }: InviteDashBoardProps) {
   } = useInviteDashBoard({ refreshToFirst });
 
   return (
-    <StyledDiv $data={dataSource}>
+    <StyledArticle $data={dataSource}>
       <StyledP>초대받은 대시보드</StyledP>
       {dataSource.length !== 0 ? (
-        <div>
+        <section>
           <form>
             <StyledInputDiv>
               <label htmlFor="search">
@@ -100,18 +100,16 @@ function InviteDashBoard({ refreshToFirst }: InviteDashBoardProps) {
                         <StyleListWrapper>
                           <StyledListInWrapper>{item.dashboard.title}</StyledListInWrapper>
                           <StyledListInWrapper>{item.inviter.nickname}</StyledListInWrapper>
-                          <StyledListInWrapper>
-                            <TwinButton
-                              text1="수락"
-                              text2="거절"
-                              isViolet={true}
-                              size="small"
-                              className="temp2"
-                              leftViolet={true}
-                              onLeftClick={() => handleAccept({ acceptid: item.id, accept: true })}
-                              onRightClick={() => handleAccept({ acceptid: item.id, accept: false })}
-                            />
-                          </StyledListInWrapper>
+                          <TwinButton
+                            text1="수락"
+                            text2="거절"
+                            isViolet={true}
+                            size="small"
+                            className="temp2"
+                            leftViolet={true}
+                            onLeftClick={() => handleAccept({ acceptid: item.id, accept: true })}
+                            onRightClick={() => handleAccept({ acceptid: item.id, accept: false })}
+                          />
                         </StyleListWrapper>
                       )}
                       <StyledHr />
@@ -123,22 +121,22 @@ function InviteDashBoard({ refreshToFirst }: InviteDashBoardProps) {
               )}
             </InfiniteScroll>
           </Div>
-        </div>
+        </section>
       ) : (
         <>
           <NoContentContainer>
-            <NoContentImage src={NoContent} alt="없는컨텐츠" />
+            <NoContentImage priority width={100} height={100} src={NoContent} alt="없는컨텐츠" />
             <NoContentDiv>아직 초대받은 대시보드가 없어요</NoContentDiv>
           </NoContentContainer>
         </>
       )}
-    </StyledDiv>
+    </StyledArticle>
   );
 }
 
 export default InviteDashBoard;
 
-const Div = styled.div`
+const Div = styled.section`
   height: 430px;
   overflow-x: hidden;
 
@@ -157,7 +155,7 @@ const Div = styled.div`
   }
 `;
 
-const StyledDiv = styled.div<{ $data: any }>`
+const StyledArticle = styled.article<{ $data: any }>`
   width: 1023px;
   height: 630px;
   border-radius: 8px;
@@ -272,7 +270,7 @@ const StyledWrapper = styled.div`
     width: 23%;
   }
 `;
-const StyledInWrapper = styled.div`
+const StyledInWrapper = styled.p`
   width: 100%;
   color: ${COLORS.GRAY_9F};
   ${fontStyle(16, 400)};
@@ -294,7 +292,7 @@ const StyleListWrapper = styled.div`
     width: 70%;
   }
 `;
-const StyledListInWrapper = styled.div`
+const StyledListInWrapper = styled.p`
   float: left;
   width: 100%;
   color: var(--content-main);

components/Table/InviteDetailsTable.tsx

@@ -8,7 +8,7 @@ import Button from '@/components/common/Button/Button';
 import PaginationButton from '@/components/common/Button/PaginationButton';
 import usePagination from '@/hooks/Common/usePagination';
 import useInviteDetailsTable from '@/hooks/Edit/useInviteDetailsTable';
-import NoItem from '@/public/assets/images/noItem.png';
+import NoItem from '@/public/assets/images/NoContent.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onTablet } from '@/styles/mediaQuery';
 import { COLORS } from '@/styles/palettes';

components/Table/MembersTable.tsx

@@ -5,7 +5,7 @@ import { useDeleteMemberInDashboard } from '@/apis/queries/members';
 import Button from '@/components/common/Button/Button';
 import PaginationButton from '@/components/common/Button/PaginationButton';
 import usePagination from '@/hooks/Common/usePagination';
-import DefaultImage from '@/public/assets/images/jaws.png';
+import DefaultImage from '@/public/assets/images/jaws.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onTablet } from '@/styles/mediaQuery';
 import { COLORS } from '@/styles/palettes';

constants/Metadata.ts

@@ -1,9 +1,11 @@
-import mainLogo from '@/public/assets/images/jaws.png';
+import mainLogo from '@/public/assets/images/jaws.avif';
 
 export const METADATA = {
-  title: 'Jawstify',
-  description: '일정관리 조습니다🦈',
-  url: 'https://taskify4.vercel.app/',
-  image: mainLogo.src,
-  locale: 'ko_KR',
+  TITLE: 'Jawstify',
+  DESCRIPTION: '일정관리 조습니다🦈',
+  URL: 'https://taskify4.vercel.app/',
+  IMAGE: mainLogo.src,
+  LOCALE: 'ko_KR',
+  TYPE: 'website',
+  DOMAIN: 'taskify4.vercel.app',
 };