sopt-makers · f0rever0 · Sep 21, 2023 · Sep 18, 2023 · Sep 18, 2023 · Sep 18, 2023
diff --git a/src/components/Footer/Channels/index.tsx b/src/components/Footer/Channels/index.tsx
@@ -37,39 +37,39 @@ function Channels({ isFooter = false }: ChannelsProps) {
         width={30}
         height={30}
         id="mail"
-        alt="mail"
+        alt="메일"
         onClick={handleClick}
       />
       <S.ClickableChannelButton
         src={facebookLogo}
         width={30}
         height={30}
         id="facebook"
-        alt="facebook"
+        alt="페이스북"
         onClick={handleClick}
       />
       <S.ClickableChannelButton
         src={instagramLogo}
         width={30}
         height={30}
         id="instagram"
-        alt="instagram"
+        alt="인스타그램"
         onClick={handleClick}
       />
       <S.ClickableChannelButton
         src={youtubeLogo}
         width={30}
         height={30}
         id="youtube"
-        alt="youtube"
+        alt="유튜브"
         onClick={handleClick}
       />
       <S.ClickableChannelButton
         src={kakaoLogo}
         width={30}
         height={30}
         id="kakao"
-        alt="kakao"
+        alt="카카오톡 채널"
         onClick={handleClick}
       />
     </S.ChannelButtonsWrap>

diff --git a/src/components/Header/Mobile/MobileHeader.tsx b/src/components/Header/Mobile/MobileHeader.tsx
@@ -22,11 +22,7 @@ function MobileHeader() {
       <StyledHeader>
         <Logo onClick={() => router.push('/')} />
         <ToggleButton onClick={handleHeaderToggleButton}>
-          <Image
-            src={isMenuShown === 'open' ? xButton.src : menuBar}
-            alt="header toggle button"
-            fill
-          />
+          <Image src={isMenuShown === 'open' ? xButton.src : menuBar} alt="메뉴 토글 버튼" fill />
         </ToggleButton>
       </StyledHeader>
       <Condition statement={isMenuShown === 'open'}>

diff --git a/src/components/corporate/JobPostingCard/index.tsx b/src/components/corporate/JobPostingCard/index.tsx
@@ -19,7 +19,7 @@ const JobPostingCard = ({
 }: JobPostingCardProps) => {
   return (
     <St.Card>
-      <St.Logo src={imgSrc} alt={corporation} width={80} height={80} />
+      <St.Logo src={imgSrc} alt={`${corporation} 로고`} width={80} height={80} />
       <St.Contents>
         <St.Chip>{type}</St.Chip>
         <St.Title>{title}</St.Title>

diff --git a/...ActivityReview/utils/parsePartToKorean.ts → src/lib/utils/parsePartToKorean.ts b/...ActivityReview/utils/parsePartToKorean.ts → src/lib/utils/parsePartToKorean.ts
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -23,7 +23,7 @@ function Wrong() {
           src={Sopt404.src}
           width={isDesktop ? 296 : 196}
           height={isDesktop ? 78 : 52}
-          alt="SOPT"
+          alt="솝트 공식 로고"
           blurDataURL={Sopt404.src}
           placeholder="blur"
         />

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -25,6 +25,19 @@ function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
       <Head>
+        <title>SOPT</title>
+        <meta
+          name="description"
+          content="SOPT는 IT와 벤처 창업에 뜻이 있는 대학생들이 모인 국내 최대 규모의 대학생 연합 IT 벤처 창업 동아리입니다."
+        />
+        <meta name="title" content="SOPT" />
+        <meta name="keyword" content="IT, 창업, 개발, 대학생, 동아리" />
+        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+
+        <meta name="apple-mobile-web-app-title" content="SOPT" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
         <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
         <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
         <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
@@ -48,35 +61,30 @@ function MyApp({ Component, pageProps }: AppProps) {
           content="width=device-width, initial-scale=1.0, minimum-scale=1.0,  maximum-scale=1"
         />
         <meta content="yes" name="apple-mobile-web-app-capable" />
-        <meta name="title" content="SOPT" />
-        <meta property="og:title" content="SOPT" />
-        <meta name="twitter:title" content="SOPT" />
-        <meta
-          name="description"
-          content="SOPT는 IT와 벤처창업에 뜻이 있는 대학생들이 모인 국내 최대 규모의 대학생 연합 IT벤처창업 동아리입니다."
-        />
-        <meta
-          property="og:description"
-          content="SOPT는 IT와 벤처창업에 뜻이 있는 대학생들이 모인 국내 최대 규모의 대학생 연합 IT벤처창업 동아리입니다."
-        />
-        <meta
-          name="twitter:description"
-          content="SOPT는 IT와 벤처창업에 뜻이 있는 대학생들이 모인 국내 최대 규모의 대학생 연합 IT벤처창업 동아리입니다."
-        />
 
+        {/*  Open Graph */}
+        <meta property="og:type" content="website" />
+        <meta property="og:locale" content="ko_KR" />
+        <meta property="og:url" content="https://sopt.org/" />
+        <meta property="og:title" content="SOPT" />
+        <meta property="og:site_name" content="SOPT 공식 홈페이지" />
+        <meta property="og:description" content="대학생 연합 IT 벤처 창업 동아리" />
         <meta
           property="og:image"
-          content="https://sopt-makers.s3.ap-northeast-2.amazonaws.com/mainpage/seo/sopt_discord_seo.png"
+          content="https://s3.ap-northeast-2.amazonaws.com/sopt.org/admin/origin/img_sopt_homepage.png"
         />
-        <meta property="og:url" content="https://sopt.org/" />
+        <meta property="og:image:alt" content="SOPT 공식 홈페이지 이미지" />
 
+        {/*  Twitter */}
+        <meta name="twitter:title" content="SOPT" />
+        <meta name="twitter:description" content="대학생 연합 IT 벤처 창업 동아리" />
         <meta property="twitter:card" content="website" />
         <meta property="twitter:site" content="https://sopt.org/" />
-
         <meta
           name="twitter:image"
-          content="https://sopt-makers.s3.ap-northeast-2.amazonaws.com/mainpage/seo/sopt_twitter_seo.png"
+          content="https://s3.ap-northeast-2.amazonaws.com/sopt.org/admin/origin/img_sopt_homepage.png"
         />
+        <meta property="twitter:image:alt" content="SOPT 공식 홈페이지 이미지" />
       </Head>
       <GoogleTagManagerScript />
       <Global styles={global} />

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -2,7 +2,7 @@ import { Head, Html, Main, NextScript } from 'next/document';
 
 export default function Document() {
   return (
-    <Html>
+    <Html lang="ko" dir="ltr">
       <Head>
         <link
           rel="preload"

diff --git a/src/views/AboutPage/components/Banner/index.tsx b/src/views/AboutPage/components/Banner/index.tsx
@@ -11,7 +11,13 @@ const Banner = (props: BannerProps) => {
 
   return (
     <St.ImageWrapper>
-      <Image src={imageSrc} alt="" fill style={{ objectFit: 'cover' }} priority />
+      <Image
+        src={imageSrc}
+        alt="솝트 공식홈페이지 어바웃페이지 배너 사진"
+        fill
+        style={{ objectFit: 'cover' }}
+        priority
+      />
       <St.HeadTitle>{title}</St.HeadTitle>
     </St.ImageWrapper>
   );

diff --git a/src/views/AboutPage/components/Cirriculum/Content/index.tsx b/src/views/AboutPage/components/Cirriculum/Content/index.tsx
@@ -2,6 +2,7 @@ import Image from 'next/image';
 import { useState } from 'react';
 import Flex from '@src/components/common/Flex';
 import { Part } from '@src/lib/types/universal';
+import { parsePartToKorean } from '@src/lib/utils/parsePartToKorean';
 import TabBar from '../../common/TabBar';
 import * as St from './style';
 
@@ -18,7 +19,7 @@ const CirriculumContent = ({ cirriculums }: CirriculumContentProps) => {
       <St.ImageWrapper>
         <Image
           src={cirriculums[currentPart]}
-          alt={currentPart}
+          alt={`${parsePartToKorean(currentPart)}파트 커리큘럼 이미지`}
           fill
           style={{ objectFit: 'contain' }}
         />

diff --git a/src/views/AboutPage/components/Member/Card/index.tsx b/src/views/AboutPage/components/Member/Card/index.tsx
@@ -12,7 +12,7 @@ const MemberCard = ({ imgSrc, name, description, part }: MeberCardProps) => {
   return (
     <St.Card>
       <St.ImageWrapper>
-        <St.ProfileImage src={imgSrc || NullImage.src} alt={name} fill />
+        <St.ProfileImage src={imgSrc || NullImage.src} alt={`${name}의 프로필`} fill />
       </St.ImageWrapper>
       <St.Name>{name}</St.Name>
       <St.Desc>{description || '-'}</St.Desc>

diff --git a/src/views/MainPage/components/ActivityDescription/ActivityDescription.tsx b/src/views/MainPage/components/ActivityDescription/ActivityDescription.tsx
@@ -128,7 +128,7 @@ function MobileActivityDescription() {
           <Image
             className={styles.cardImage}
             src={currentTab.imgSrc}
-            alt="card"
+            alt={`${currentTab.type} 활동 사진`}
             fill
             sizes="(max-width: 766px) 309px, 585px"
           />

diff --git a/src/views/MainPage/components/ActivityReview/ActivityReview.tsx b/src/views/MainPage/components/ActivityReview/ActivityReview.tsx
@@ -4,10 +4,10 @@ import { ReactComponent as ArrowLeft } from '@src/assets/icons/arrow_left_28x28.
 import { ReactComponent as ArrowRight } from '@src/assets/icons/arrow_right_28x28.svg';
 import ArrowRightGrey from '@src/assets/icons/arrow_right_grey.svg';
 import { useHorizontalScroll } from '@src/hooks/useHorizontalScroll';
+import { parsePartToKorean } from '@src/lib/utils/parsePartToKorean';
 import cc from 'classcat';
 import styles from './activity-review.module.scss';
 import useFetch from './hooks/useFetch';
-import { parsePartToKorean } from './utils/parsePartToKorean';
 
 export function ActivityReview() {
   const reviews = useFetch();

diff --git a/src/views/MainPage/components/BannerImage/BannerImage.tsx b/src/views/MainPage/components/BannerImage/BannerImage.tsx
@@ -23,7 +23,13 @@ export function BannerImage() {
         <ArrowDown className={styles.downArrow} width="24" height="24" />
       </div>
       <div className={styles.bannerWrapper}>
-        <Image src={MainPageBanner} className={styles.bannerImage} alt="banner" fill priority />
+        <Image
+          src={MainPageBanner}
+          className={styles.bannerImage}
+          alt="솝트 공식홈페이지 메인페이지 배너 사진"
+          fill
+          priority
+        />
         <div className={styles.bannerGradient} />
       </div>
     </section>

diff --git a/src/views/MainPage/components/DetailedInformation/DetailedInformation.tsx b/src/views/MainPage/components/DetailedInformation/DetailedInformation.tsx
@@ -52,7 +52,7 @@ export function DetailedInformation() {
               <div className={`${styles.nameWrapper}  ${GTM_CLASS[`informationCard${name}`]}`}>
                 <h4 className={`${styles.name}  ${GTM_CLASS[`informationCard${name}`]}`}>{name}</h4>
                 <div className={`${styles.arrow}`}>
-                  <Image src={ArrowRight} alt="이동" fill sizes="100%" />
+                  <Image src={ArrowRight} alt={`${name} 더보기 이동 버튼`} fill sizes="100%" />
                 </div>
               </div>
               <p className={`${styles.desc}  ${GTM_CLASS[`informationCard${name}`]}`}>{desc}</p>

diff --git a/src/views/ProjectDetailPage/ProjectDetailPage.tsx b/src/views/ProjectDetailPage/ProjectDetailPage.tsx
@@ -55,7 +55,7 @@ function ProjectDetailPage() {
         <S.Container>
           <S.ProjectHeader>
             <S.LogoImageWrapper>
-              <Image src={logoImage} alt="logo" width="72" height="72" />
+              <Image src={logoImage} alt={`${name} 프로젝트 로고`} width="72" height="72" />
             </S.LogoImageWrapper>
             <div>
               <h1>{name}</h1>
@@ -64,7 +64,7 @@ function ProjectDetailPage() {
           </S.ProjectHeader>
           {projectImage && (
             <S.ProjectImageWrapper>
-              <Image src={projectImage} alt="project image" fill />
+              <Image src={projectImage} alt={`${name} 프로젝트 썸네일`} fill />
             </S.ProjectImageWrapper>
           )}
           <S.ProjectWrapper>
@@ -115,7 +115,7 @@ function ProjectDetailPage() {
                         <Link href={url} key={title}>
                           <S.ProjectLink>
                             <S.ImageWrapper>
-                              <Image src={src} alt={name} width="56" height="56" />
+                              <Image src={src} alt={`${name} 로고`} width="56" height="56" />
                             </S.ImageWrapper>
                             <span>{name}</span>
                           </S.ProjectLink>

diff --git a/src/views/ProjectPage/components/project/ProjectCard.tsx b/src/views/ProjectPage/components/project/ProjectCard.tsx
@@ -17,7 +17,7 @@ export function ProjectCard({ project }: { project: ProjectType }) {
   return (
     <Link href={`/project/${project.id}`}>
       <article className={`${styles.item} ${GTM_CLASS.projectCard}`}>
-        {RepresentativeImageRender(project.logoImage, project?.thumbnailImage)}
+        {RepresentativeImageRender(project.name, project.logoImage, project?.thumbnailImage)}
         <div className={`${styles.content} ${GTM_CLASS.projectCard}`}>
           <div className={`${styles.types} ${GTM_CLASS.projectCard}`}>
             {ServiceTypeRender(project.serviceTypes)}
@@ -40,29 +40,29 @@ export function ProjectCard({ project }: { project: ProjectType }) {
   );
 }
 
-function RepresentativeImageRender(logoImage: string, thumbnailImage?: string) {
+function RepresentativeImageRender(name: string, logoImage: string, thumbnailImage?: string) {
   const isDesktop = useIsDesktop();
   const isTablet = useIsTablet();
   const isMobile = useIsMobile();
 
   return (
     <div className={styles['image-wrapper']}>
-      {isDesktop && ProjectCardDesktopImage(logoImage, thumbnailImage)}
-      {isTablet && ProjectCardMobileImage(logoImage, thumbnailImage)}
-      {isMobile && ProjectCardMobileImage(logoImage, thumbnailImage)}
+      {isDesktop && ProjectCardDesktopImage(name, logoImage, thumbnailImage)}
+      {isTablet && ProjectCardMobileImage(name, logoImage, thumbnailImage)}
+      {isMobile && ProjectCardMobileImage(name, logoImage, thumbnailImage)}
     </div>
   );
 }
 
-function ProjectCardMobileImage(logoImage: string, thumbnailImage?: string) {
+function ProjectCardMobileImage(name: string, logoImage: string, thumbnailImage?: string) {
   const isCardThumbnail = thumbnailImage && thumbnailImage?.length > 0;
   return (
     <>
       {isCardThumbnail && (
         <StyledThumbnail
           className={`${GTM_CLASS.projectCard}`}
           src={thumbnailImage}
-          alt="thumbnail"
+          alt={`${name} 프로젝트 썸네일`}
           fill
           sizes="100%"
         />
@@ -73,7 +73,7 @@ function ProjectCardMobileImage(logoImage: string, thumbnailImage?: string) {
           src={logoImage}
           width={100}
           height={100}
-          alt="logo"
+          alt={`${name} 프로젝트 로고`}
         />
       )}
     </>
@@ -86,7 +86,7 @@ const StyledThumbnail = styled(Image)`
   object-fit: cover;
 `;
 
-function ProjectCardDesktopImage(logoImage: string, thumbnailImage?: string) {
+function ProjectCardDesktopImage(name: string, logoImage: string, thumbnailImage?: string) {
   const isCardThumbnail = thumbnailImage && thumbnailImage?.length > 0;
   return (
     <>
@@ -96,7 +96,7 @@ function ProjectCardDesktopImage(logoImage: string, thumbnailImage?: string) {
           src={thumbnailImage}
           width={368}
           height={208}
-          alt="thumbnail"
+          alt={`${name} 프로젝트 썸네일`}
         />
       )}
       {!isCardThumbnail && (
@@ -105,7 +105,7 @@ function ProjectCardDesktopImage(logoImage: string, thumbnailImage?: string) {
           src={logoImage}
           width={100}
           height={100}
-          alt="logo"
+          alt={`${name} 프로젝트 로고`}
         />
       )}
     </>

diff --git a/src/views/RecruitPage/components/ActivityReview/ActivityReview.tsx b/src/views/RecruitPage/components/ActivityReview/ActivityReview.tsx
@@ -3,6 +3,7 @@ import { ReactComponent as ArrowLeft } from '@src/assets/icons/arrow_left_28x28.
 import { ReactComponent as ArrowRight } from '@src/assets/icons/arrow_right_28x28.svg';
 import arrowRightWhite from '@src/assets/icons/arrow_right_white.svg';
 import { useHorizontalScroll } from '@src/hooks/useHorizontalScroll';
+import { parsePartToKorean } from '@src/lib/utils/parsePartToKorean';
 import { SectionTitle, SectionTitleTranslate, SectionTitleWrapper } from '../common/styles';
 import useFetch from './hooks/useFetch';
 import {
@@ -18,7 +19,6 @@ import {
   DescWrapper,
   MoreLinkWrapper,
 } from './styles';
-import { parsePartToKorean } from './utils/parsePartToKorean';
 
 export function ActivityReview() {
   const reviews = useFetch();
@@ -52,7 +52,7 @@ export function ActivityReview() {
                     {parsePartToKorean(review.part)}파트 {review.semester}기{'\n'}
                     <DescName>{review.reviewer}</DescName>
                   </Desc>
-                  <Arrow src={arrowRightWhite} alt="" width={30} height={30} />
+                  <Arrow src={arrowRightWhite} alt={`${review.title} 활동후기 더보기 버튼`} width={30} height={30} />
                 </DescWrapper>
               </CardWrapper>
             </Link>

diff --git a/src/views/RecruitPage/components/ActivityReview/utils/parsePartToKorean.ts b/src/views/RecruitPage/components/ActivityReview/utils/parsePartToKorean.ts