From 8a19fc67676a05aa7585632e7f7bc58626b6b91b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=99=8D=EB=AF=BC?= <khhm3787@gmail.com>
Date: Wed, 26 Mar 2025 12:35:53 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=EC=A7=81=EC=A0=91=EC=82=AC=EC=A7=84?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ChoiceCard.tsx | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/pages/ChoiceCard.tsx b/src/pages/ChoiceCard.tsx
index e03e5f5..aeab20c 100644
--- a/src/pages/ChoiceCard.tsx
+++ b/src/pages/ChoiceCard.tsx
@@ -47,21 +47,34 @@ const ChoiceCard: React.FC = () => {
 
   const frontProp = isDesktop || isTablet ? "다음" : Top.NullFront;
 
-  // 컴포넌트 마운트 시 Birthday1을 기본값으로 설정
   useEffect(() => {
     const setDefaultImage = async () => {
       try {
-        const response = await fetch(Birthday1);
-        const blob = await response.blob();
-        const file = new File([blob], "Birthday1.png", { type: "image/png" });
-        setSelectedImage(file);
-        setCardImage(file);
+        const savedImages = JSON.parse(localStorage.getItem("myImages") || "[]");
+  
+        if (savedImages.length > 0) {
+          const res = await fetch(savedImages[0]);
+          const blob = await res.blob();
+          const file = new File([blob], "MyImage.png", { type: blob.type });
+  
+          setSelectedImage(file);
+          setCardImage(file);
+        } else {
+          const response = await fetch(Birthday1);
+          const blob = await response.blob();
+          const file = new File([blob], "Birthday1.png", { type: "image/png" });
+  
+          setSelectedImage(file);
+          setCardImage(file);
+        }
       } catch (error) {
         console.error("기본 이미지 설정 오류:", error);
       }
     };
+
     setDefaultImage();
-  }, [setSelectedImage, setCardImage]);
+  }, [setSelectedImage, setCardImage]); //경고회피용
+  
 
   const handleSBToggle = (index: number) => {
     setActiveIndex(index);

From 8bec99ec0b6e03ee78d25327bcfe591cdb3034b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=99=8D=EB=AF=BC?= <khhm3787@gmail.com>
Date: Sun, 30 Mar 2025 20:13:06 +0900
Subject: [PATCH 2/2] =?UTF-8?q?seo=EC=B5=9C=EC=A0=81=ED=99=94=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ImgContentCut.tsx              | 33 +++++++----
 src/components/choiceCard/Modal.tsx           |  4 +-
 src/components/choiceCard/Rectangle.tsx       |  8 +--
 src/components/choiceCard/Wrap.tsx            |  8 +--
 src/components/login/FeatureBoxEmpty.tsx      | 25 ++++-----
 src/components/login/FeatureBoxFull.tsx       | 52 ++++++-----------
 src/components/login/GoogleLogin.tsx          | 12 ++--
 src/components/login/GreetingMessage.tsx      |  2 +-
 src/components/login/LoginBoxColumn.tsx       | 14 ++---
 src/components/login/LoginSection.tsx         | 11 ++--
 .../myInvitation/LetterContainer.tsx          | 20 +++----
 src/components/myInvitation/MenuContainer.tsx | 56 +++++++------------
 src/components/myInvitation/ReviewModal.tsx   | 23 +++-----
 src/components/myInvitation/SlideBar.tsx      |  9 +--
 src/pages/ChoiceCard.tsx                      | 48 +++++++++++-----
 src/pages/LoginScreen.tsx                     |  8 ++-
 src/pages/MyInvitation.tsx                    | 10 ++--
 17 files changed, 161 insertions(+), 182 deletions(-)

diff --git a/src/components/ImgContentCut.tsx b/src/components/ImgContentCut.tsx
index e525ca7..c17c0b6 100644
--- a/src/components/ImgContentCut.tsx
+++ b/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>
     </>
   );
diff --git a/src/components/choiceCard/Modal.tsx b/src/components/choiceCard/Modal.tsx
index 13d8484..587a9a1 100644
--- a/src/components/choiceCard/Modal.tsx
+++ b/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>
   );
diff --git a/src/components/choiceCard/Rectangle.tsx b/src/components/choiceCard/Rectangle.tsx
index 78a3b04..52aa548 100644
--- a/src/components/choiceCard/Rectangle.tsx
+++ b/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;
\ No newline at end of file
diff --git a/src/components/choiceCard/Wrap.tsx b/src/components/choiceCard/Wrap.tsx
index 15d3196..9aa7bb4 100644
--- a/src/components/choiceCard/Wrap.tsx
+++ b/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>
diff --git a/src/components/login/FeatureBoxEmpty.tsx b/src/components/login/FeatureBoxEmpty.tsx
index 2d7a654..ff389c4 100644
--- a/src/components/login/FeatureBoxEmpty.tsx
+++ b/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;
-    
\ No newline at end of file
+export default FeatureBoxEmpty;
\ No newline at end of file
diff --git a/src/components/login/FeatureBoxFull.tsx b/src/components/login/FeatureBoxFull.tsx
index 4fba55f..d227a52 100644
--- a/src/components/login/FeatureBoxFull.tsx
+++ b/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;
\ No newline at end of file
diff --git a/src/components/login/GoogleLogin.tsx b/src/components/login/GoogleLogin.tsx
index 69ec416..75656d9 100644
--- a/src/components/login/GoogleLogin.tsx
+++ b/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;
\ No newline at end of file
diff --git a/src/components/login/GreetingMessage.tsx b/src/components/login/GreetingMessage.tsx
index 030dadf..d53f561 100644
--- a/src/components/login/GreetingMessage.tsx
+++ b/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);
diff --git a/src/components/login/LoginBoxColumn.tsx b/src/components/login/LoginBoxColumn.tsx
index 0cc44fa..22e0a28 100644
--- a/src/components/login/LoginBoxColumn.tsx
+++ b/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>
 );
diff --git a/src/components/login/LoginSection.tsx b/src/components/login/LoginSection.tsx
index 35c2ca9..797c600 100644
--- a/src/components/login/LoginSection.tsx
+++ b/src/components/login/LoginSection.tsx
@@ -4,17 +4,16 @@ 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>
@@ -22,4 +21,4 @@ const LoginSection: React.FC = () => {
   );
 };
 
-export default LoginSection;
+export default LoginSection;
\ No newline at end of file
diff --git a/src/components/myInvitation/LetterContainer.tsx b/src/components/myInvitation/LetterContainer.tsx
index 034f4e1..c8987c0 100644
--- a/src/components/myInvitation/LetterContainer.tsx
+++ b/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;
\ No newline at end of file
diff --git a/src/components/myInvitation/MenuContainer.tsx b/src/components/myInvitation/MenuContainer.tsx
index a833f32..9451489 100644
--- a/src/components/myInvitation/MenuContainer.tsx
+++ b/src/components/myInvitation/MenuContainer.tsx
@@ -13,64 +13,50 @@ type NBProps = {
   ShowDetailBool?: boolean;
 };
 
-//API 연동할때는 초대장 받은게 없으면 ~하는 로직으로 바꿀것.
-const SlideBar: React.FC<NBProps> = ({
-  MenuTitle,
-  MenuSub,
-  ShowDetailBool,
-  Data,
-}) => {
+const SlideBar: React.FC<NBProps> = ({ MenuTitle, MenuSub, ShowDetailBool, Data }) => {
   const navigate = useNavigate();
-  const [NoInvitationText, setNoInvitationText] =
-    useState("저장된 초대장이 없어요");
+  const [NoInvitationText, setNoInvitationText] = useState("저장된 초대장이 없어요");
 
   useEffect(() => {
     if (Data.length === 0) {
-      if (MenuTitle === "작성 중인 초대장") {
-        setNoInvitationText("저장된 초대장이 없어요");
-      } else if (MenuTitle === "내가 보낸 초대장") {
-        setNoInvitationText("아직 보낸 초대장이 없어요");
-      } else {
-        setNoInvitationText("아직 받은 초대장이 없어요");
-      }
+      if (MenuTitle === "작성 중인 초대장") setNoInvitationText("저장된 초대장이 없어요");
+      else if (MenuTitle === "내가 보낸 초대장") setNoInvitationText("아직 보낸 초대장이 없어요");
+      else setNoInvitationText("아직 받은 초대장이 없어요");
     }
   }, [Data, MenuTitle]);
 
   const handleNavigate = () => {
-    if (MenuTitle === "내가 받은 초대장") {
-      navigate("/invites/received");
-    } else if (MenuTitle === "내가 보낸 초대장") {
-      navigate("/invites/sent");
-    }
+    if (MenuTitle === "내가 받은 초대장") navigate("/invites/received");
+    else if (MenuTitle === "내가 보낸 초대장") navigate("/invites/sent");
   };
 
   return (
-    <>
+    <section aria-label={`${MenuTitle} 리스트`}>
       {ShowDetailBool ? (
-        <style.MenuContainerWithArrow>
-          <style.MenuTitleBox>{MenuTitle}</style.MenuTitleBox>
-          {Data.length == 0 ? (
+        <style.MenuContainerWithArrow as="header">
+          <style.MenuTitleBox as="h2">{MenuTitle}</style.MenuTitleBox>
+          {Data.length === 0 ? (
             <ArrowRight stroke="#88898A" />
           ) : (
             <ArrowRight onClick={handleNavigate} />
           )}
         </style.MenuContainerWithArrow>
       ) : (
-        <style.MenuContainer>
-          <style.MenuTitleBox>{MenuTitle}</style.MenuTitleBox>
-          {MenuSub ? (
-            <style.MenuSubBox>
+        <style.MenuContainer as="header">
+          <style.MenuTitleBox as="h2">{MenuTitle}</style.MenuTitleBox>
+          {MenuSub && (
+            <style.MenuSubBox as="span">
               {MenuSub}
               {MenuSubText.number}
             </style.MenuSubBox>
-          ) : null}
+          )}
         </style.MenuContainer>
       )}
 
-      {Data.length == 0 ? (
-        <style.NoInvitationText>{NoInvitationText}</style.NoInvitationText>
+      {Data.length === 0 ? (
+        <style.NoInvitationText as="p">{NoInvitationText}</style.NoInvitationText>
       ) : (
-        <style.SlideBar>
+        <style.SlideBar as="section">
           {Data.map((invitation) => (
             <LetterContainer
               key={invitation.invitationId}
@@ -82,8 +68,8 @@ const SlideBar: React.FC<NBProps> = ({
           ))}
         </style.SlideBar>
       )}
-    </>
+    </section>
   );
 };
 
-export default SlideBar;
+export default SlideBar;
\ No newline at end of file
diff --git a/src/components/myInvitation/ReviewModal.tsx b/src/components/myInvitation/ReviewModal.tsx
index 2b09e15..b632292 100644
--- a/src/components/myInvitation/ReviewModal.tsx
+++ b/src/components/myInvitation/ReviewModal.tsx
@@ -12,31 +12,26 @@ type ReviewModalProps = {
 };
 
 const ReviewModal: React.FC<ReviewModalProps> = ({ targetWord, isModalOn, imageSrc, onClose }) => {
-  
   if (!isModalOn) return null;
 
   const lines = ReviewModalText.SubText.split('\n');
 
   return (
-    <style.ModalBG>
-      <style.ModalContainer>
-        <style.DeleteContainer>
-
-          {/* onClick 시 부모에서 전달한 onClose 함수 호출 */}
-          <DeleteIcon onClick={onClose} style={{ cursor: 'pointer' }}/>
+    <style.ModalBG as="section" role="dialog" aria-modal="true" aria-label="리뷰 모달">
+      <style.ModalContainer as="div">
+        <style.DeleteContainer as="div">
+          <DeleteIcon onClick={onClose} style={{ cursor: 'pointer' }} />
         </style.DeleteContainer>
 
-        <img src={imageSrc} style={{width:"310px", height:"238.5px"}}/>
+        <img src={imageSrc} alt="초대장 카드 이미지" style={{ width: "310px", height: "238.5px" }} />
 
-        <style.TextContainer>
+        <style.TextContainer as="div">
           {lines.map((line, index) => {
             if (line.includes(targetWord)) {
               const parts = line.split(targetWord);
               return (
                 <div key={index}>
-                  {parts[0]}
-                  <span className="highlight">{targetWord}</span>
-                  {parts[1]}
+                  {parts[0]}<span className="highlight">{targetWord}</span>{parts[1]}
                 </div>
               );
             }
@@ -44,10 +39,10 @@ const ReviewModal: React.FC<ReviewModalProps> = ({ targetWord, isModalOn, imageS
           })}
         </style.TextContainer>
 
-        <ButtonBottomNext text="후기 남기러 가기" color="blue" />
+        <ButtonBottomNext text="후기 남기러 가기" color="blue" aria-label="후기 작성 페이지로 이동" />
       </style.ModalContainer>
     </style.ModalBG>
   );
 };
 
-export default ReviewModal;
+export default ReviewModal;
\ No newline at end of file
diff --git a/src/components/myInvitation/SlideBar.tsx b/src/components/myInvitation/SlideBar.tsx
index 124e46f..433c5a5 100644
--- a/src/components/myInvitation/SlideBar.tsx
+++ b/src/components/myInvitation/SlideBar.tsx
@@ -10,14 +10,9 @@ type NBProps = {
   ShowDetailBool?: boolean;
 };
 
-const SlideBar: React.FC<NBProps> = ({
-  MenuTitle,
-  MenuSub,
-  ShowDetailBool,
-  Data,
-}) => {
+const SlideBar: React.FC<NBProps> = ({ MenuTitle, MenuSub, ShowDetailBool, Data }) => {
   return (
-    <style.CardContainer>
+    <style.CardContainer as="section" aria-label="초대장 카드 섹션">
       <MenuContainer
         MenuTitle={MenuTitle}
         MenuSub={MenuSub}
diff --git a/src/pages/ChoiceCard.tsx b/src/pages/ChoiceCard.tsx
index aeab20c..078f25b 100644
--- a/src/pages/ChoiceCard.tsx
+++ b/src/pages/ChoiceCard.tsx
@@ -51,19 +51,19 @@ const ChoiceCard: React.FC = () => {
     const setDefaultImage = async () => {
       try {
         const savedImages = JSON.parse(localStorage.getItem("myImages") || "[]");
-  
+
         if (savedImages.length > 0) {
           const res = await fetch(savedImages[0]);
           const blob = await res.blob();
           const file = new File([blob], "MyImage.png", { type: blob.type });
-  
+
           setSelectedImage(file);
           setCardImage(file);
         } else {
           const response = await fetch(Birthday1);
           const blob = await response.blob();
           const file = new File([blob], "Birthday1.png", { type: "image/png" });
-  
+
           setSelectedImage(file);
           setCardImage(file);
         }
@@ -73,8 +73,7 @@ const ChoiceCard: React.FC = () => {
     };
 
     setDefaultImage();
-  }, [setSelectedImage, setCardImage]); //경고회피용
-  
+  }, [setSelectedImage, setCardImage]);
 
   const handleSBToggle = (index: number) => {
     setActiveIndex(index);
@@ -169,7 +168,7 @@ const ChoiceCard: React.FC = () => {
     <>
       {activeModal && (
         <modalStyle.ModalBackground>
-          <modalStyle.Modal>
+          <modalStyle.Modal as="section">
             <modalStyle.Title>{Modal.Title}</modalStyle.Title>
             <NextButton
               text={ButtonNext.text}
@@ -182,6 +181,7 @@ const ChoiceCard: React.FC = () => {
       {isCautionModalOpen && (
         <AddImageCautionModal onClose={() => setIsCautionModalOpen(false)} />
       )}
+
       <ReactNB
         Back={Top.Btn_rNB_Back}
         Front={frontProp}
@@ -189,12 +189,14 @@ const ChoiceCard: React.FC = () => {
         onFrontClick={() => navigate("/write")}
       />
 
-      <style.Content>
+      <style.Content as="main">
         <Wrap Title={WrapTexts.Title} SubText={WrapTexts.SubText} />
-        <style.Wrap_Card>
-          <style.HorizontalSB_Content>
+
+        <style.Wrap_Card as="section">
+          <style.HorizontalSB_Content as="nav" aria-label="카테고리 선택">
             <style.Btn_hSB_New
               as="label"
+              aria-label="내 이미지 추가"
               onClick={(e) => {
                 const authToken = getAuthTokenFromCookie();
                 if (!authToken) {
@@ -212,6 +214,7 @@ const ChoiceCard: React.FC = () => {
                 onChange={handleFileChange}
               />
             </style.Btn_hSB_New>
+
             {sbItems.map((item, index) => (
               <HorizontalSB
                 key={index}
@@ -221,29 +224,46 @@ const ChoiceCard: React.FC = () => {
               />
             ))}
           </style.HorizontalSB_Content>
-          <style.Img_Content_Card>
+
+          <style.Img_Content_Card as="section" aria-label="이미지 카드 선택">
             {filteredCards.map((item, index) => {
               const imageSrc =
                 item.content instanceof File
                   ? URL.createObjectURL(item.content)
-                  : (typeof item.content === "string" ? item.content : "");
+                  : typeof item.content === "string"
+                  ? item.content
+                  : "";
+
+              const altText =
+                item.content instanceof File
+                  ? `사용자 업로드 이미지 ${index + 1}`
+                  : item.category === SB.Birth
+                  ? `생일 카드 이미지 ${index + 1}`
+                  : item.category === SB.Trav
+                  ? `여행 테마 카드 ${index + 1}`
+                  : item.category === SB.Year
+                  ? `연말 카드 이미지 ${index + 1}`
+                  : `카드 이미지 ${index + 1}`;
 
               return (
                 <Rectangle
                   key={index}
                   toggled={activeRectangle === index}
                   onClick={() => handleRectangleToggle(index, item.content)}
+                  aria-label={`카드 선택 ${index + 1}`}
                 >
-                  <style.ImgCard src={imageSrc} alt={`card-${index}`} />
+                  <style.ImgCard src={imageSrc} alt={altText} loading="lazy" />
                 </Rectangle>
               );
             })}
           </style.Img_Content_Card>
-          <style.Bottom>
+
+          <style.Bottom as="footer">
             <NextButton
               text={Button.text}
               color={Button.color}
               onClick={() => navigate("/write")}
+              aria-label="다음 단계로 이동"
             />
           </style.Bottom>
         </style.Wrap_Card>
@@ -252,4 +272,4 @@ const ChoiceCard: React.FC = () => {
   );
 };
 
-export default ChoiceCard;
\ No newline at end of file
+export default ChoiceCard;
diff --git a/src/pages/LoginScreen.tsx b/src/pages/LoginScreen.tsx
index d908193..15d46c4 100644
--- a/src/pages/LoginScreen.tsx
+++ b/src/pages/LoginScreen.tsx
@@ -298,12 +298,14 @@ const LoginScreen: React.FC = () => {
   };
 
   return (
-    <Style.Background>
-      <Style.HeaderComp>
+    <Style.Background as="main">
+      <Style.HeaderComp as="header">
         <GreetingMessage message={greetingMessage.greetingMessage} />
         <LoginSection />
       </Style.HeaderComp>
-      <Style.Columns>{renderColumns()}</Style.Columns>
+      <Style.Columns as="section" aria-label="기능 소개 섹션">
+        {renderColumns()}
+      </Style.Columns>
     </Style.Background>
   );
 };
diff --git a/src/pages/MyInvitation.tsx b/src/pages/MyInvitation.tsx
index b77e073..032b3df 100644
--- a/src/pages/MyInvitation.tsx
+++ b/src/pages/MyInvitation.tsx
@@ -27,7 +27,7 @@ const MyInvitation: React.FC = () => {
         setDraftingInvitation(data.draftingInvitations || []);
         setSentInvitation(data.sentInvitations || []);
       } catch (error) {
-        console.error("Error fetching invitations:", error);
+        console.error("초대장 데이터 불러오기 오류:", error);
         setDraftCount("0");
       }
     };
@@ -42,7 +42,7 @@ const MyInvitation: React.FC = () => {
           setIsModalOn(true);
         }
       } catch (error) {
-        console.error("Error fetching review data:", error);
+        console.error("리뷰 데이터 불러오기 오류:", error);
       }
     };
 
@@ -60,19 +60,19 @@ const MyInvitation: React.FC = () => {
           onClose={() => setIsModalOn(false)} 
         />
       )}
-      <style.Container>
+      <style.Container as="main">
         <Wrap
           Title={WrapTexts.Title}
           WrapBool={sentInvitation.length === 0 && receivedInvitation.length === 0}
           SubText={
             sentInvitation.length === 0 && receivedInvitation.length === 0
             ? isMobile
-              ? WrapTexts.NoSubTextMobile // 모바일일 때 다른 텍스트 사용
+              ? WrapTexts.NoSubTextMobile
               : WrapTexts.NoSubText
             : WrapTexts.SubText 
           }
         />
-        <style.SlideBarContainer>
+        <style.SlideBarContainer as="section" aria-label="초대장 분류 섹션">
           <SlideBar MenuTitle={MenuTitle.Writing} MenuSub={draftCount || "n"} Data={draftingInvitation} />
           <SlideBar MenuTitle={MenuTitle.Send} ShowDetailBool={true} Data={sentInvitation} />
           <SlideBar MenuTitle={MenuTitle.Recieve} ShowDetailBool={true} Data={receivedInvitation} />