[fix/#50] 사진선택페이지 사진추가 오류 해결

src/components/ImgContentCut.tsx

@@ -8,19 +8,20 @@ import * as style from "@/styles/choiceCard/ImgContentCut";
 import { CropperContainer } from "@/styles/choiceCard/ChoiceCardStyle";
 
 const ImgContentCut: React.FC = () => {
-
   const location = useLocation();
   const navigate = useNavigate();
   const cropperRef = useRef<HTMLImageElement>(null); 
   const image = location.state?.image || ""; // 선택된 이미지 가져오기
 
+  // Cropper.js의 초기 상태로 리셋
   const handleReset = () => {
     if (cropperRef.current) {
       const cropper = (cropperRef.current as any).cropper;
-      cropper.reset(); // Cropper.js의 초기 상태로 리셋
+      cropper.reset();
     }
   };
 
+  // 자른 이미지 저장 후 이동
   const handleNext = () => {
     if (cropperRef.current) {
       const cropper = (cropperRef.current as any).cropper;
@@ -30,14 +31,19 @@ const ImgContentCut: React.FC = () => {
       navigate("/choicecard");
     }
   };
-
 
   return (
     <>
-      <ReactNB Back="취소" Front="재설정" Color="white" onBackClick={() => navigate("/choicecard")} onFrontClick={handleReset} />
-      <style.Container>
-        <CropperContainer>
-        <Cropper
+      <ReactNB
+        Back="취소"
+        Front="재설정"
+        Color="white"
+        onBackClick={() => navigate("/choicecard")}
+        onFrontClick={handleReset}
+      />
+      <style.Container as="main" aria-label="이미지 자르기 페이지">
+        <CropperContainer as="section" aria-label="이미지 크롭 영역">
+          <Cropper
             src={image} // 이미지 URL
             style={{ height: '100%', width: '100%' }}
             aspectRatio={4 / 3}
@@ -48,11 +54,18 @@ const ImgContentCut: React.FC = () => {
             scalable={true} // 이미지 비율 변경 가능
             cropBoxResizable={true} // 크롭 박스 크기 조정 가능
             background={false} // 배경 제거
-        />
+            aria-label="이미지 자르기 도구"
+          />
         </CropperContainer>
       </style.Container>
-      <style.Bottom>
-        <NextButton text="다음" color="blue" width={true} onClick={handleNext} />
+      <style.Bottom as="footer">
+        <NextButton
+          text="다음"
+          color="blue"
+          width={true}
+          onClick={handleNext}
+          aria-label="자른 이미지 저장 후 다음 단계로 이동"
+        />
       </style.Bottom>
     </>
   );

src/components/choiceCard/Modal.tsx

@@ -8,10 +8,10 @@ interface ModalProps {
 
 const Modal: React.FC<ModalProps> = ({ onClose }) => {
   return (
-    <style.ModalBackground>
+    <style.ModalBackground as="section" role="dialog" aria-modal="true" aria-label="사진 추가 안내 모달">
         <style.Modal>
             <style.Title>로그인 후 사진을 추가할 수 있어요!</style.Title> 
-            <NextButton text='확인' color='blue' onClick={onClose} />
+            <NextButton text='확인' color='blue' onClick={onClose} aria-label='모달 닫기' />
         </style.Modal>
     </style.ModalBackground>
   );

src/components/choiceCard/Rectangle.tsx

@@ -4,19 +4,19 @@ import * as style from '@/styles/choiceCard/RectangleStyle';
 type RectangleProps = {
   toggled: boolean;
   onClick: () => void;
-  children?: React.ReactNode; // children 속성 추가
+  children?: React.ReactNode;
 };
 
 const Rectangle: React.FC<RectangleProps> = ({ toggled, onClick, children }) => {
   return toggled ? (
-    <style.ActiveRectangle onClick={onClick}>
+    <style.ActiveRectangle as="article" onClick={onClick} aria-pressed="true">
       {children} 
     </style.ActiveRectangle>
   ) : (
-    <style.Rectangle onClick={onClick}>
+    <style.Rectangle as="article" onClick={onClick} aria-pressed="false">
       {children} 
     </style.Rectangle>
   );
 };
 
-export default Rectangle;
+export default Rectangle;

src/components/choiceCard/Wrap.tsx

@@ -15,9 +15,9 @@ const Wrap: React.FC<WrapProps> = ({ Title, SubText, WrapBool }) => {
     const navigate = useNavigate();
 
   return (
-    <style.WrapBoxContainer>
-        <style.WrapTitle>{ Title }</style.WrapTitle>
-        <style.WrapSubTitle>
+    <style.WrapBoxContainer as="section" aria-label="초대장 안내 영역">
+        <style.WrapTitle as="h1">{ Title }</style.WrapTitle>
+        <style.WrapSubTitle as="p">
           {lines.map((line, index) => {
                   if (line.includes(targetWord)) {
                       const parts = line.split(targetWord);
@@ -31,7 +31,7 @@ const Wrap: React.FC<WrapProps> = ({ Title, SubText, WrapBool }) => {
               })}
           {WrapBool ? (
             <div style={{ marginTop: '20px' }}>
-              <Btn text='초대장 만들기' color='blue' width={false} onClick={() => navigate('/choicecard')} />
+              <Btn text='초대장 만들기' color='blue' width={false} onClick={() => navigate('/choicecard')} aria-label='초대장 만들기 페이지로 이동' />
             </div>
           ) : null}
         </style.WrapSubTitle>

src/components/login/FeatureBoxEmpty.tsx

@@ -5,30 +5,27 @@ interface FeatureBoxEmptyProps {
     title: string;
 }
 
-const FeatureBoxEmpty: React.FC<FeatureBoxEmptyProps> = ({title}) => {
-
+const FeatureBoxEmpty: React.FC<FeatureBoxEmptyProps> = ({ title }) => {
     switch (title) {
         case "Rectangle1":
-            return <Style.Rectangle1/>;
+            return <Style.Rectangle1 as="div" aria-hidden="true" />;
         case "Rectangle2":
-            return <Style.Rectangle2/>;
+            return <Style.Rectangle2 as="div" aria-hidden="true" />;
         case "Rectangle3":
-            return <Style.Rectangle3/>;
+            return <Style.Rectangle3 as="div" aria-hidden="true" />;
         case "Rectangle5":
-            return <Style.Rectangle5/>
+            return <Style.Rectangle5 as="div" aria-hidden="true" />;
         case "Rectangle6":
-            return <Style.Rectangle6/>;
+            return <Style.Rectangle6 as="div" aria-hidden="true" />;
         case "Rectangle7":
-            return <Style.Rectangle7/>;
+            return <Style.Rectangle7 as="div" aria-hidden="true" />;
         case "Rectangle8":
-            return <Style.Rectangle8/>;
+            return <Style.Rectangle8 as="div" aria-hidden="true" />;
         case "Rectangle10":
-            return <Style.Rectangle10/>
+            return <Style.Rectangle10 as="div" aria-hidden="true" />;
         case "Rectangle11":
-            return <Style.Rectangle11/>;
+            return <Style.Rectangle11 as="div" aria-hidden="true" />;
     }
-
 };
 
-export default FeatureBoxEmpty;
-
+export default FeatureBoxEmpty;

src/components/login/FeatureBoxFull.tsx

@@ -10,46 +10,26 @@ interface FeatureBoxProps {
 }
 
 const FeatureBoxFull: React.FC<FeatureBoxProps> = ({ title, subtitle, Icon, iconSize = { width: 45, height: 45 } }) => {
+    const commonContent = (
+        <>
+            <Style.TextFeature as="div">
+                <Style.TitleText as="h2">{title}</Style.TitleText>
+                <Style.SubText as="p">{subtitle}</Style.SubText>
+            </Style.TextFeature>
+            <Style.ImageBox as="figure">
+                <Icon width={iconSize.width} height={iconSize.height} />
+            </Style.ImageBox>
+        </>
+    );
+
     switch (title) {
         case FirstColumConstants.txt_Feature:
-            return (
-                <Style.FeatureBoxContainer>
-                    <Style.TextFeature>
-                        <Style.TitleText>{title}</Style.TitleText>
-                        <Style.SubText>{subtitle}</Style.SubText>
-                    </Style.TextFeature>
-                    <Style.ImageBox>
-                        <Icon width={iconSize.width} height={iconSize.height} />
-                    </Style.ImageBox>
-                </Style.FeatureBoxContainer>
-            );
-
+            return <Style.FeatureBoxContainer as="article">{commonContent}</Style.FeatureBoxContainer>;
         case FirstColumConstants.txt_Feature2:
-            return (
-                <Style.FeatureBoxContainer2>
-                    <Style.TextFeature>
-                        <Style.TitleText>{title}</Style.TitleText>
-                        <Style.SubText>{subtitle}</Style.SubText>
-                    </Style.TextFeature>
-                    <Style.ImageBox>
-                        <Icon width={iconSize.width} height={iconSize.height} />
-                    </Style.ImageBox>
-                </Style.FeatureBoxContainer2>
-            );
-
+            return <Style.FeatureBoxContainer2 as="article">{commonContent}</Style.FeatureBoxContainer2>;
         case SecondColumConstants.txt_Feature:
-            return (                
-            <Style.FeatureBoxContainer3>
-                <Style.TextFeature>
-                    <Style.TitleText>{title}</Style.TitleText>
-                    <Style.SubText>{subtitle}</Style.SubText>
-                </Style.TextFeature>
-                <Style.ImageBox>
-                    <Icon width={iconSize.width} height={iconSize.height} />
-                </Style.ImageBox>
-            </Style.FeatureBoxContainer3>
-            );
+            return <Style.FeatureBoxContainer3 as="article">{commonContent}</Style.FeatureBoxContainer3>;
     }
 };
 
-export default FeatureBoxFull;
+export default FeatureBoxFull;

src/components/login/GoogleLogin.tsx

@@ -1,23 +1,19 @@
 import React from 'react';
-//import axios from "axios";
-import { LogIn } from '@/constants/login/loginScreen'
+import { LogIn } from '@/constants/login/loginScreen';
 import * as Style from '@/styles/login/LoginSectionComponentStyle';
 import Google from '@/assets/icons/화면GUI_Full/3232/Google.svg?react';
 
 const GoogleLogin: React.FC = () => {
-
     const handleGoogleLogin = () => {
         window.location.href = 'https://wishwesee.n-e.kr/oauth2/authorize/google';
     };
-    
+
     return (
-    <>
-        <Style.GoogleLoginButton onClick={handleGoogleLogin}>
+        <Style.GoogleLoginButton as="button" onClick={handleGoogleLogin} aria-label="구글 계정으로 로그인">
             <Google />
             {LogIn.logIn}
         </Style.GoogleLoginButton>
-    </>
-    )
+    );
 };
 
 export default GoogleLogin;

src/components/login/GreetingMessage.tsx

@@ -10,7 +10,7 @@ const GreetingMessage: React.FC<GreetingMessageProps> = ({ message }) => {
     const lines = message.split('\n');
 
     return (
-        <Style.GreetingMessageContainer>
+        <Style.GreetingMessageContainer as="section" aria-label="환영 메시지">
             {lines.map((line, index) => {
                 if (line.includes(targetWord)) {
                     const parts = line.split(targetWord);

src/components/login/LoginBoxColumn.tsx

@@ -13,17 +13,17 @@ interface ColumnProps {
 }
 
 const LoginBoxColumn: React.FC<ColumnProps> = ({ features }) => (
-    <Style.ColumnContainer>
+    <Style.ColumnContainer as="section" aria-label="기능 박스 컬럼">
         {features.map((feature, index) => (
             feature.title.includes('Rectangle') ? 
             <FeatureBoxEmpty key={index} title={feature.title}/> : 
             <FeatureBoxFull
-            key={index}
-            title={feature.title}
-            subtitle={feature.subtitle}
-            Icon={feature.Icon}
-            iconSize={feature.iconSize}
-         />
+                key={index}
+                title={feature.title}
+                subtitle={feature.subtitle}
+                Icon={feature.Icon}
+                iconSize={feature.iconSize}
+            />
         ))}
     </Style.ColumnContainer>
 );

src/components/login/LoginSection.tsx

@@ -4,22 +4,21 @@ import * as Style from "@/styles/login/LoginSectionComponentStyle";
 import GoogleLogin from "@/components/login/GoogleLogin";
 
 const LoginSection: React.FC = () => {
-  //토큰갱신 및 구글로그인 후 이동할 페이지 서버에서 세팅해주면 바꾸기
   const handleGoogleLogin = () => {
     window.location.href = "https://wishwesee.n-e.kr/oauth2/authorize/google";
   };
 
   return (
-    <Style.LoginContainer>
+    <Style.LoginContainer as="section" aria-label="로그인 섹션">
       <GoogleLogin />
-      <Style.RegisterContainer>
-        <Style.RegisterMessage>{LogIn.registerMessage}</Style.RegisterMessage>
-        <Style.RegisterLink onClick={handleGoogleLogin}>
+      <Style.RegisterContainer as="div">
+        <Style.RegisterMessage as="p">{LogIn.registerMessage}</Style.RegisterMessage>
+        <Style.RegisterLink as="a" onClick={handleGoogleLogin} role="link" aria-label="회원가입 페이지로 이동">
           {LogIn.register}
         </Style.RegisterLink>
       </Style.RegisterContainer>
     </Style.LoginContainer>
   );
 };
 
-export default LoginSection;
+export default LoginSection;

src/components/myInvitation/LetterContainer.tsx

@@ -15,21 +15,17 @@ const LetterContainer: React.FC<NBProps> = ({ Title, Date, Image, token }) => {
   let titleContent;
 
   if (Title) {
-    if (Title.length >= 9) {
-      titleContent = Title.slice(0, 8) + "...";
-    } else {
-      titleContent = Title;
-    }
+    titleContent = Title.length >= 9 ? Title.slice(0, 8) + "..." : Title;
   } else {
     titleContent = <div></div>;
   }
 
   return (
-    <style.LetterContainer onClick={() => navigate(`/invites/${token}`)}>
-      <style.LetterImgBox>
+    <style.LetterContainer as="article" onClick={() => navigate(`/invites/${token}`)} aria-label={`초대장 ${Title}`}> 
+      <style.LetterImgBox as="figure">
         <img
           src={Image}
-          alt={Title}
+          alt={`${Title} 이미지`}
           style={{
             width: "100%",
             aspectRatio: "4 / 3",
@@ -39,15 +35,15 @@ const LetterContainer: React.FC<NBProps> = ({ Title, Date, Image, token }) => {
         />
       </style.LetterImgBox>
 
-      <style.LetterTextBox>
-        <style.LetterTitleBox>
+      <style.LetterTextBox as="div">
+        <style.LetterTitleBox as="h3">
           {titleContent}
           <ArrowRight />
         </style.LetterTitleBox>
-        <style.LetterDateBox>{Date}</style.LetterDateBox>
+        <style.LetterDateBox as="time">{Date}</style.LetterDateBox>
       </style.LetterTextBox>
     </style.LetterContainer>
   );
 };
 
-export default LetterContainer;
+export default LetterContainer;