Merge pull request #129 from KUIT-Space/feat#51-chat_detail

lighthouse: add alt attribute in img tag
KUIT-Space · Aug 20, 2024 · 1b235c9 · 1b235c9
2 parents 3cd17a7 + 0f35644
commit 1b235c9
Show file tree

Hide file tree

Showing 23 changed files with 138 additions and 93 deletions.
diff --git a/src/components/TopBarText.tsx b/src/components/TopBarText.tsx
@@ -42,7 +42,7 @@ const TopBarText: FC<topbarProps> = ({
               }
             }}
           >
-            <img src={logo}></img>
+            <img src={logo} alt="logo"></img>
           </sty.StyledLeftDiv>
           <sty.StyledCenterDiv>{center}</sty.StyledCenterDiv>
           <sty.StyledRightDiv
@@ -69,7 +69,7 @@ const TopBarText: FC<topbarProps> = ({
               }
             }}
           >
-            <img src={back}></img>
+            <img src={back} alt="back"></img>
           </sty.StyledLeftDiv>
           <sty.StyledCenterDiv>
             <sty.StyledCenterP>{center}</sty.StyledCenterP>

diff --git a/src/pages/BoardPage/BoardBottomModal.tsx b/src/pages/BoardPage/BoardBottomModal.tsx
@@ -67,7 +67,7 @@ const BoardBottomModal = ({ selectedOption, onSelect, isOpen, onClose }: BoardBo
               onClick={() => onSelect(i)}
             >
               {option.value}
-              {isSelcted && <img src={checkModal} />}
+              {isSelcted && <img src={checkModal} alt="checkModal" />}
             </BoardBottomModalItem>
           );
         })}

diff --git a/src/pages/BoardPage/BoardDetailpage/BoardDetailPage.tsx b/src/pages/BoardPage/BoardDetailpage/BoardDetailPage.tsx
@@ -314,6 +314,7 @@ const BoardDetailPage = () => {
                     key={i + postsData?.title + "img"}
                     src={img}
                     className="board-post-detail-content-img"
+                    alt="board post detail content img"
                   />
                 );
               })}
@@ -360,7 +361,7 @@ const BoardDetailPage = () => {
           placeholder="댓글을 입력하세요."
           onChange={(e) => setCommentValue(e.target.value)}
         ></BoardDetailInput>
-        <img src={send} onClick={handleRegisterComment} />
+        <img src={send} onClick={handleRegisterComment} alt="send" />
       </BoardDetailInputContainer>
     </>
   );

diff --git a/src/pages/BoardPage/BoardPage.tsx b/src/pages/BoardPage/BoardPage.tsx
@@ -53,12 +53,16 @@ const BoardPage = () => {
 
   return (
     <>
-      <TopBarText left={LeftEnum.Logo} center="게시판" right={<img src={search} />}></TopBarText>
+      <TopBarText
+        left={LeftEnum.Logo}
+        center="게시판"
+        right={<img src={search} alt="search" />}
+      ></TopBarText>
       <BoardHeader>
         <span>게시글 {postsData.length}개</span>
         <div className="board-filter-section" onClick={() => setIsModalOpen((prev) => !prev)}>
           {boardSelectedOption[selectedOption].value}
-          <img src={arrowDown} />
+          <img src={arrowDown} alt="arrowDown" />
         </div>
       </BoardHeader>
       {postsData.length !== 0 ? (

diff --git a/src/pages/BoardPage/BoardPostItem.tsx b/src/pages/BoardPage/BoardPostItem.tsx
@@ -216,7 +216,12 @@ const BoardPostItem = ({
         <div className="board-post-item-content-img-container">
           {thumbnail &&
             thumbnail.map((img, i) => (
-              <img key={img + i} src={img} className="board-post-item-content-img" />
+              <img
+                key={img + i}
+                src={img}
+                className="board-post-item-content-img"
+                alt="board post item content img"
+              />
             ))}
         </div>
       </BoardPostItemContent>

diff --git a/src/pages/BoardPage/BoardRegisterPage/BoardRegisterPage.tsx b/src/pages/BoardPage/BoardRegisterPage/BoardRegisterPage.tsx
@@ -203,6 +203,7 @@ const BoardRegisterPage = () => {
                 className="board-register-selected-image"
                 key={i + image.name}
                 src={URL.createObjectURL(image)}
+                alt="board register selected image"
               />
             );
           })}
@@ -216,9 +217,9 @@ const BoardRegisterPage = () => {
           onChange={handleImageImport}
           style={{ display: "none" }}
         />
-        <img src={camera} />
+        <img src={camera} alt="camera" />
         <img src={gallery} onClick={() => inputImgRef.current?.click()} />
-        <img src={link} />
+        <img src={link} alt="link" />
       </BoardRegisterFooter>
     </>
   );

diff --git a/src/pages/ChatPage/ChatCreatePage/ChatCreatePage.tsx b/src/pages/ChatPage/ChatCreatePage/ChatCreatePage.tsx
@@ -142,7 +142,10 @@ const ChatCreatePage = () => {
                 }}
               >
                 <section>
-                  <img src={member.profileImgUrl ?? getUserDefaultImageURL(member.userId)} />
+                  <img
+                    src={member.profileImgUrl ?? getUserDefaultImageURL(member.userId)}
+                    alt="member profile"
+                  />
                   <span className="name">{member.userName}</span>
                   {member.userAuth === "manager" && <span className="admin">관리자</span>}
                 </section>

diff --git a/src/pages/ChatPage/ChatSettingPage/ChatSettingInvitePage.tsx b/src/pages/ChatPage/ChatSettingPage/ChatSettingInvitePage.tsx
@@ -88,7 +88,10 @@ const ChatSettingInvitePage = () => {
               }}
             >
               <section>
-                <img src={member.profileImgUrl ?? getUserDefaultImageURL(member.userId)} />
+                <img
+                  src={member.profileImgUrl ?? getUserDefaultImageURL(member.userId)}
+                  alt="member profile"
+                />
                 <span className="name">{member.userName}</span>
                 {member.userAuth === "manager" && <span className="admin">관리자</span>}
               </section>

diff --git a/src/pages/ChatPage/ChatSettingPage/ChatSettingMemberPage.tsx b/src/pages/ChatPage/ChatSettingPage/ChatSettingMemberPage.tsx
@@ -56,7 +56,7 @@ const ChatSettingMemberPage = () => {
             }
           >
             <section>
-              <img src={AddMemberImg} />
+              <img src={AddMemberImg} alt="add member" />
               <span className="name">채팅방에 초대하기</span>
             </section>
           </Member>
@@ -65,7 +65,10 @@ const ChatSettingMemberPage = () => {
         {userList.map((member, index) => (
           <Member key={index} $cursor="default">
             <section>
-              <img src={member.profileImgUrl ?? getUserDefaultImageURL(member.userId)} />
+              <img
+                src={member.profileImgUrl ?? getUserDefaultImageURL(member.userId)}
+                alt="member profile img"
+              />
               <span className="name">{member.userName}</span>
               {member.userAuth === "manager" && <span className="admin">관리자</span>}
             </section>

diff --git a/src/pages/HomePage/HomePageMember.tsx b/src/pages/HomePage/HomePageMember.tsx
@@ -1,13 +1,13 @@
 import { useEffect, useState } from "react";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { toast, ToastContainer } from "react-toastify";
 
-import { Chatroom, ChatroomSearchAllUserApi, User, spaceSearchAllUserApi } from "@/apis";
+import { Chatroom, ChatroomSearchAllUserApi, spaceSearchAllUserApi, User } from "@/apis";
 import AddMemberImg from "@/assets/ChatPage/btn_add_member.svg";
 import TopBarText, { LeftEnum } from "@/components/TopBarText";
 import { Member, MemberContainer } from "@/pages/ChatPage/ChatCreatePage/ChatCreatePage.styled";
-import { getUserDefaultImageURL } from "@/utils/getUserDefaultImageURL";
 import * as s from "@/pages/HomePage/HomePage.styled";
-import { ToastContainer, toast } from "react-toastify";
+import { getUserDefaultImageURL } from "@/utils/getUserDefaultImageURL";
 
 const HomePageMemberPage = () => {
   const navigate = useNavigate();
@@ -67,7 +67,7 @@ const HomePageMemberPage = () => {
           onClick={clickInviteHandler}
           style={{ alignItems: "center", padding: "1rem 0rem 1rem 0rem", cursor: "pointer" }}
         >
-          <img src={AddMemberImg} width={"40px"} height={"40px"}></img>
+          <img src={AddMemberImg} width={"40px"} height={"40px"} alt="add member" />
           <div style={{ marginLeft: "1rem" }}>스페이스에 초대하기</div>
         </s.RowFlexDiv>
         {userList.map((member, index) => (

diff --git a/src/pages/PayPage/CompleteCreatePay.tsx b/src/pages/PayPage/CompleteCreatePay.tsx
@@ -1,7 +1,8 @@
-import { BottomBtn } from "@/components/BottomBtn";
+import { useNavigate } from "react-router-dom";
+
 import Check from "@/assets/PayPage/check.svg";
+import { BottomBtn } from "@/components/BottomBtn";
 import * as s from "@/pages/PayPage/PayPage.styled";
-import { useNavigate } from "react-router-dom";
 
 const CompleteCreatePay = () => {
   const navigator = useNavigate();
@@ -10,7 +11,7 @@ const CompleteCreatePay = () => {
       {/* 여기에 지금 height 넣어줘야 */}
       <s.ContainerDiv>
         <div style={{ display: "flex", justifyContent: "center" }}>
-          <img src={Check}></img>
+          <img src={Check} alt="check"></img>
         </div>
         <s.LargeTxt style={{ flex: 1, textAlign: "center" }}>
           <p>정산요청을</p>

diff --git a/src/pages/PayPage/CompletePay.tsx b/src/pages/PayPage/CompletePay.tsx
@@ -1,7 +1,8 @@
-import { BottomBtn } from "@/components/BottomBtn";
+import { useNavigate } from "react-router-dom";
+
 import Check from "@/assets/PayPage/check.svg";
+import { BottomBtn } from "@/components/BottomBtn";
 import * as s from "@/pages/PayPage/PayPage.styled";
-import { useNavigate } from "react-router-dom";
 
 export type CompletePayType = {
   money?: number;
@@ -17,7 +18,7 @@ const CompletePay = ({ money, account }: CompletePayType) => {
       {/* 여기에 지금 height 넣어줘야 */}
       <s.ContainerDiv>
         <div style={{ display: "flex", justifyContent: "center" }}>
-          <img src={Check}></img>
+          <img src={Check} alt="check"></img>
         </div>
         <s.LargeTxt style={{ flex: 1, textAlign: "center" }}>
           <p>요청받은 정산을</p>

diff --git a/src/pages/PayPage/CompleteReqDataDiv.tsx b/src/pages/PayPage/CompleteReqDataDiv.tsx
@@ -1,13 +1,14 @@
-import * as s from "@/pages/PayPage/PayPage.styled";
-import { NormalBtn } from "@/pages/PayPage/NormalBtn";
-import reactIcon from "@/assets/react.svg";
 import { useEffect, useState } from "react";
+import { toast, ToastContainer } from "react-toastify";
+
+import reactIcon from "@/assets/react.svg";
 import { DarkNormalBtn } from "@/pages/PayPage/DarkNormalBtn";
+import { GrayBtn } from "@/pages/PayPage/GrayBtn";
+import { NormalBtn } from "@/pages/PayPage/NormalBtn";
+import { addComma, PayReceiveInfo } from "@/pages/PayPage/PayPage";
+import * as s from "@/pages/PayPage/PayPage.styled";
 
-import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
-import { PayReceiveInfo, addComma } from "@/pages/PayPage/PayPage";
-import { GrayBtn } from "@/pages/PayPage/GrayBtn";
 
 const ReqDataDiv = ({ data }: { data: PayReceiveInfo }) => {
   // useEffect(() => {
@@ -25,7 +26,8 @@ const ReqDataDiv = ({ data }: { data: PayReceiveInfo }) => {
           width={"40px"}
           height={"40px"}
           style={{ marginRight: "0.625rem" }}
-        ></img>
+          alt="reaction"
+        />
         <s.TextDiv>{data.payCreatorName}</s.TextDiv>
         <s.GrayBTextDiv style={{ position: "absolute", right: "0rem", marginRight: "3rem" }}>
           {price}원

diff --git a/src/pages/PayPage/CreatePayComponents.tsx b/src/pages/PayPage/CreatePayComponents.tsx
@@ -19,6 +19,7 @@ const PayChatMemberDiv = ({ info }: { info: UserInfoInSpace }) => {
       <img
         style={{ width: "2.5rem", height: "2.5rem", marginLeft: "1.875rem" }}
         src={info.profileImgUrl ?? getUserDefaultImageURL(info.userId)}
+        alt="profile"
       />
       <span className="name" style={{ marginLeft: "0.75rem" }}>
         {info.userName}
@@ -37,7 +38,7 @@ export const PayChatDiv = ({ info }: { info: ChatUserInfoInSpace }) => {
     <s.ColumnFlexDiv>
       <Member>
         <section>
-          <img src={info.imgUrl} />
+          <img src={info.imgUrl} alt="info img" />
           <span className="name">{info.chatRoomName}</span>
           <s.CountText className="count">{info.userList?.length}</s.CountText>
         </section>

diff --git a/src/pages/PayPage/CreateRequestPage.tsx b/src/pages/PayPage/CreateRequestPage.tsx
@@ -52,7 +52,7 @@ const idToPrice = new Map<number, number>();
 const RecentAccountDiv = ({ data }: { data: BankInfo }) => {
   return (
     <s.RowFlexDiv style={{ margin: "0.25rem" }}>
-      <img style={{ marginRight: "0.75rem" }} src={Kookmin}></img>
+      <img style={{ marginRight: "0.75rem" }} src={Kookmin} alt="kookmin 은행" />
       <s.ColumnFlexDiv>
         <s.GrayTextDiv>{data.bankName}</s.GrayTextDiv>
         <s.RegularText>{data.bankAccountNum}</s.RegularText>
@@ -235,6 +235,7 @@ const CreateRequestPage2 = ({
                               ? value.profileImgUrl
                               : getUserDefaultImageURL(value.userId)
                           }
+                          alt="profile img"
                         />
                         <span className="name">{value.userName}</span>
                       </section>
@@ -365,6 +366,7 @@ const CreateRequestPage3 = ({
                           ? value.userProfileImg
                           : getUserDefaultImageURL(value.userId!)
                       }
+                      alt="profile img"
                     />
                     <span className="name">{value.userName}</span>
                   </section>
@@ -392,6 +394,7 @@ const CreateRequestPage3 = ({
                           ? value.userProfileImg
                           : getUserDefaultImageURL(value.userId!)
                       }
+                      alt="profile img"
                     />
                     <span className="name">{value.userName}</span>
                   </section>
@@ -479,6 +482,7 @@ const CreateRequestPage4 = ({
                         ? _userData?.profileImgUrl
                         : getUserDefaultImageURL(_userData!.userId)
                     }
+                    alt="profile img"
                   />
                   <span className="name">{_userData?.userName}</span>
                 </section>

diff --git a/src/pages/PayPage/PayPage.tsx b/src/pages/PayPage/PayPage.tsx
@@ -1,14 +1,15 @@
-import TopBarText, { LeftEnum } from "@/components/TopBarText";
-import { GradientBtn } from "@/pages/PayPage/GradientBtn";
-import right from "@/assets/PayPage/arrow_right.svg";
-import * as s from "@/pages/PayPage/PayPage.styled";
-import { useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import axios from "axios";
+
 import { payCompleteApi, payDetailApi, payHomeApi } from "@/apis/Pay/PayPageAPI";
+import right from "@/assets/PayPage/arrow_right.svg";
+import TopBarText, { LeftEnum } from "@/components/TopBarText";
+import { GradientBtn } from "@/pages/PayPage/GradientBtn";
+import * as s from "@/pages/PayPage/PayPage.styled";
 
 export const addComma = (price: number) => {
-  let returnString = price?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  const returnString = price?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
   return returnString;
 };
 
@@ -108,8 +109,8 @@ const PayPage = () => {
         >
           <s.TitleDiv>
             <s.TitleContentDiv>요청한 정산</s.TitleContentDiv>
-            <img src={right}></img>
-            {/* <img src={right} onClick={navigator("요청정산페이지")}></img> */}
+            <img src={right} alt="right" />
+            {/* <img src={right} onClick={navigator("요청정산페이지")} alt="right" /> */}
           </s.TitleDiv>
           {reqData?.length == 0 ? (
             <s.NoAlertDiv>요청한 정산이 없어요!</s.NoAlertDiv>
@@ -129,8 +130,8 @@ const PayPage = () => {
         >
           <s.TitleDiv>
             <s.TitleContentDiv>요청받은 정산</s.TitleContentDiv>
-            <img src={right}></img>
-            {/* <img src={right} onClick={navigator("요청받은정산페이지")}></img> */}
+            <img src={right} alt="right" />
+            {/* <img src={right} onClick={navigator("요청받은정산페이지")} /> */}
           </s.TitleDiv>
           <div>
             {recData?.length == 0 ? (

diff --git a/src/pages/PayPage/PayResult.tsx b/src/pages/PayPage/PayResult.tsx
@@ -1,10 +1,11 @@
-import * as s from "@/pages/PayPage/PayPage.styled";
 import bell from "@/assets/PayPage/bell.svg";
 import check from "@/assets/PayPage/check.svg";
 import ReactImg from "@/assets/react.svg";
-import { addComma, payTargetInfoDtoList } from "./PayPage";
+import * as s from "@/pages/PayPage/PayPage.styled";
 import { getUserDefaultImageURL } from "@/utils/getUserDefaultImageURL";
 
+import { addComma, payTargetInfoDtoList } from "./PayPage";
+
 const PayResult = ({ props }: { props: payTargetInfoDtoList }) => {
   const price = addComma(props.requestAmount);
   return (
@@ -17,7 +18,8 @@ const PayResult = ({ props }: { props: payTargetInfoDtoList }) => {
         }
         width={"40px"}
         height={"40px"}
-      ></img>
+        alt="profile"
+      />
       <s.ColumnFlexDiv style={{ marginLeft: "0.75rem", justifyContent: "start" }}>
         <s.TextDiv>{props.targetUserName}</s.TextDiv>
         <s.BoldText style={{ textAlign: "start" }}>{price}원</s.BoldText>
@@ -27,7 +29,8 @@ const PayResult = ({ props }: { props: payTargetInfoDtoList }) => {
         width={"36px"}
         height={"36px"}
         style={{ marginLeft: "auto" }}
-      ></img>
+        alt="check"
+      />
     </s.RowFlexDiv>
   );
 };