Merge pull request #379 from sopt-makers/fix/#377_modify

[SP0] 메인 페이지 수정사항 반영

src/lib/constants/main.ts

@@ -3,10 +3,22 @@ import { default as ImgEvent } from '@src/assets/images/img_event.jpg';
 import { default as ImgIntroCard1 } from '@src/assets/images/img_intro_card1.png';
 import { default as ImgIntroCard2 } from '@src/assets/images/img_intro_card2.png';
 import { default as ImgIntroCard3 } from '@src/assets/images/img_intro_card3.png';
+import { default as ImgMakersCardBigPc } from '@src/assets/images/img_main_makers_card_big_pc.png';
 import { default as ImgMakersCardMo } from '@src/assets/images/img_main_makers_card_mo.png';
 import { default as ImgMakersCardPc } from '@src/assets/images/img_main_makers_card_pc.png';
+import { default as ImgMakersCardTa } from '@src/assets/images/img_main_makers_card_ta.png';
+import { default as ImgManageCardBigPc } from '@src/assets/images/img_main_manage_card_big_pc.png';
+import { default as ImgManageCardMo } from '@src/assets/images/img_main_manage_card_mo.png';
+import { default as ImgManageCardPc } from '@src/assets/images/img_main_manage_card_pc.png';
+import { default as ImgManageCardTa } from '@src/assets/images/img_main_manage_card_ta.png';
+import { default as ImgMediaCardBigPc } from '@src/assets/images/img_main_media_card_big_pc.png';
+import { default as ImgMediaCardMo } from '@src/assets/images/img_main_media_card_mo.png';
+import { default as ImgMediaCardPc } from '@src/assets/images/img_main_media_card_pc.png';
+import { default as ImgMediaCardTa } from '@src/assets/images/img_main_media_card_ta.png';
+import { default as ImgMindCardBigPc } from '@src/assets/images/img_main_mind_card_big_pc.png';
 import { default as ImgMindCardMo } from '@src/assets/images/img_main_mind_card_mo.png';
 import { default as ImgMindCardPc } from '@src/assets/images/img_main_mind_card_pc.png';
+import { default as ImgMindCardTa } from '@src/assets/images/img_main_mind_card_ta.png';
 import { default as ImgRecentNews1 } from '@src/assets/images/img_recent_news_1.png';
 import { default as ImgRecentNews2 } from '@src/assets/images/img_recent_news_2.jpg';
 import { default as ImgRecentNews3 } from '@src/assets/images/img_recent_news_3.jpg';
@@ -35,31 +47,33 @@ export const Activity: ActivityListType = {
     navKor: '앱잼',
     navEng: 'App jam',
     description: [
-      { content: '3~5주간 ', color: 'yellow' },
+      { content: '4~5주간 ', color: 'yellow' },
       {
         content:
-          '기획, 디자인, 개발 파트가 팀을 이뤄 하나의 웹 또는 앱 서비스를 제작하는 SOPT 내 장기 프로젝트예요. ',
+          '기획, 디자인, 개발 파트가 팀을 이뤄 하나의 웹 또는 앱 서비스를 제작하는 솝트 내 장기 ',
+        color: 'white',
+      },
+      { content: '해커톤', color: 'yellow' },
+      {
+        content: '예요. 데모데이 에서 각 파트 현직자들에게 결과물에 대한 피드백을 받아요.',
         color: 'white',
       },
-      { content: '데모데이 ', color: 'yellow' },
-      { content: '에서 ', color: 'white' },
-      { content: '각 파트 현직자', color: 'yellow' },
-      { content: '들에게 결과물에 대한 피드백을 받아요.', color: 'white' },
     ],
   },
   [ActivityType.SOPKATHON]: {
     img: ImgSoptkaton.src,
     navKor: '솝커톤',
     navEng: 'Sopkathon',
     description: [
-      { content: '무박 2일 ', color: 'yellow' },
+      { content: '무박 2일', color: 'yellow' },
       {
-        content: '간 기획, 디자인, 개발 파트가 팀을 이뤄 최소 단위의 서비스를 제작하는 SOPT내 ',
+        content: '간 기획, 디자인, 개발 파트가 팀을 이뤄 최소 단위의 서비스를 제작하는 솝트내 ',
         color: 'white',
       },
-      { content: '단기 프로젝트', color: 'yellow' },
+      { content: '단기 해커톤', color: 'yellow' },
       {
-        content: '예요. 협업 감각을 익힐 수 있어요.',
+        content:
+          '예요. 앱잼에 앞서 팀 단위의 협업 과정을 빠르게 경험하며, IT 프로젝트에 대한 협업 감각을 익힐 수 있어요.',
         color: 'white',
       },
     ],
@@ -115,15 +129,11 @@ export const Activity: ActivityListType = {
     navKor: '행사',
     navEng: 'Events',
     description: [
-      { content: '운영팀', color: 'yellow' },
-      { content: '에서는 SOPT 회원들의 원활한 ', color: 'white' },
-      { content: '네트워킹', color: 'yellow' },
-      { content: '을 위한 다양한 행사를 기획해요. ', color: 'white' },
-      { content: '미디어팀', color: 'yellow' },
-      { content: '에서는 SOPT와 관련된 ', color: 'white' },
-      { content: '콘텐츠를 제작', color: 'yellow' },
+      { content: '솝트 내 운영팀이 기획한 ', color: 'white' },
+      { content: '1차, 2차 행사', color: 'yellow' },
       {
-        content: '하여 SOPT를 대내외적으로 알려요.',
+        content:
+          '가 열려요. 행사 내 다양한 콘텐츠를 통해 모든 파트 회원들과 자연스럽게 유대감을 쌓고 잊지 못 할 즐거운 추억을 만들어요.',
         color: 'white',
       },
     ],
@@ -444,51 +454,111 @@ export const OWN_ORGANIZATION_LIST: {
   nameKor: string;
   nameEng: string;
   description: TextWeightType[];
-  frontSideBg: { mo: string; pc: string };
+  frontSideBg: { mo: string; pc: string; ta: string; bigPc: string };
   backSideBg: string;
 }[] = [
   {
-    nameKor: '메이커스',
-    nameEng: 'Makers',
+    nameKor: '운영팀',
+    nameEng: 'Manage',
     description: [
-      { content: 'SOPT를 한 기수 이상 수료한 사람들이 모여 ', weight: 'normal' },
-      { content: 'SOPT에 필요한 프로덕트를 만드는 정식 기구', weight: 'bold' },
+      { content: '운영팀은 솝트의 ', weight: 'normal' },
+      { content: '1, 2차 행사와 다양한 이벤트를 직접 브랜딩, 기획, 진행하며', weight: 'bold' },
       {
         content:
-          '입니다. 3천여 명의 구성원들을 연결하고 새로운 가치를 제공하기 위한 방법을 끊임없이 고민해요. ',
+          ' 회원들간의 네트워킹을 도모해요. 솝트 구성원들이 재미있게 행사를 즐기고, 다양한 사람들과의 네트워킹을 통해 ',
         weight: 'normal',
       },
-      { content: '앞으로도 SOPT를 지속적으로 운영하고자, ', weight: 'bold' },
+      { content: '더욱 더 소중하고 기억에 남는 솝트 생활', weight: 'bold' },
+      {
+        content: '을 만들어 가실 수 있도록 도와요.',
+        weight: 'normal',
+      },
+    ],
+    frontSideBg: {
+      bigPc: ImgManageCardBigPc.src,
+      pc: ImgManageCardPc.src,
+      ta: ImgManageCardTa.src,
+      mo: ImgManageCardMo.src,
+    },
+    backSideBg: '#FFC700',
+  },
+  {
+    nameKor: '미디어팀',
+    nameEng: 'Media',
+
+    description: [
+      { content: '미디어팀은 솝트의 핵심 가치를 실현하는 ', weight: 'normal' },
       {
         content:
-          '어떻게 하면 우리의 활동이 더 즐거울 수 있을지, 대내외적으로 잘 알릴 수 있을지 고민할 거예요. ',
+          '구성원들의 다양한 활동을 기록하고 인스타그램과 유튜브 등의 매체를 통해 솝트를 대내외적으로 홍보해요.',
+        weight: 'bold',
+      },
+      {
+        content:
+          ' 다양한 활동 스케치 영상, 인터뷰 등 솝트에서의 잊지 못할 기억을 기록하고 있어요. ',
         weight: 'normal',
       },
     ],
-    frontSideBg: { pc: ImgMakersCardPc.src, mo: ImgMakersCardMo.src },
-    backSideBg: '#FF7C53',
+    frontSideBg: {
+      bigPc: ImgMediaCardBigPc.src,
+      pc: ImgMediaCardPc.src,
+      ta: ImgMediaCardTa.src,
+      mo: ImgMediaCardMo.src,
+    },
+    backSideBg: '#3E74FD',
   },
   {
     nameKor: '마인드',
     nameEng: 'Mind',
     description: [
-      { content: 'SOPT MIND는 SOPT 내외에 ', weight: 'normal' },
+      { content: '솝트 MIND는 솝트 내외에 ', weight: 'normal' },
       { content: '기업가정신과 창업도전 문화 확산 목적', weight: 'bold' },
       {
         content:
-          '으로 설립된 기구입니다. 매 기수 SOPT 앱잼 팀이 더 적극적이고 똑똑하게 창업에 도전할 수 있도록 필요한 컨텐츠와 시스템을 고민하고 있어요. ',
+          '으로 하는 기구입니다. 매 기수 솝트 앱잼 팀이 더 적극적이고 똑똑하게 창업에 도전할 수 있도록 필요한 콘텐츠와 시스템을 고민하고 있어요. ',
         weight: 'normal',
       },
       {
         content:
-          'SOPT가 창업동아리임을 잊지 않도록, 그리고 전국에 열정으로 도전하는 SOPT의 MIND가 널리 공유되도록 ',
+          '솝트가 창업동아리 임을 잊지 않도록, 그리고 전국에 열정으로 도전하는 솝트의 MIND가 널리 공유되도록',
         weight: 'bold',
       },
-      { content: 'MIND도 도전하겠습니다.', weight: 'normal' },
+      { content: ' MIND도 도전하겠습니다.', weight: 'normal' },
     ],
-    frontSideBg: { pc: ImgMindCardPc.src, mo: ImgMindCardMo.src },
+    frontSideBg: {
+      bigPc: ImgMindCardBigPc.src,
+      pc: ImgMindCardPc.src,
+      ta: ImgMindCardTa.src,
+      mo: ImgMindCardMo.src,
+    },
     backSideBg: '#F66FF8',
   },
+  {
+    nameKor: '메이커스',
+    nameEng: 'Makers',
+    description: [
+      { content: '솝트를 한 기수 이상 수료한 사람들이 모여 ', weight: 'normal' },
+      { content: '솝트에 필요한 프로덕트를 만드는', weight: 'bold' },
+      {
+        content:
+          ' 정식 기구 입니다. 3천여 명의 구성원들을 연결하고 새로운 가치를 제공하기 위한 방법을 끊임없이 고민해요. ',
+        weight: 'normal',
+      },
+      { content: '앞으로도 솝트를 지속적으로 운영하고자, ', weight: 'bold' },
+      {
+        content:
+          '어떻게 하면 우리의 활동이 더 즐거울 수 있을지, 대내외적으로 잘 알릴 수 있을지 고민할 거예요. ',
+        weight: 'normal',
+      },
+    ],
+    frontSideBg: {
+      bigPc: ImgMakersCardBigPc.src,
+      pc: ImgMakersCardPc.src,
+      ta: ImgMakersCardTa.src,
+      mo: ImgMakersCardMo.src,
+    },
+    backSideBg: '#FF7C53',
+  },
 ];
 
 export const RecentNewsList: RecentNewsListType[] = [
@@ -522,7 +592,7 @@ export const RecentNewsList: RecentNewsListType[] = [
 export const SOPT_COMMENT_LIST: SoptCommentType[] = [
   {
     summary: '후회없는 활동',
-    color: '#FFD161',
+    color: '#FF7C53',
     comment:
       '후회없는 활동. 좋은 사람들도 많이 만났고 기획분야를 제대로 배울 수 있었던 기회였어요. 대학생활 마지막 대외 활동이었지만, 회사 일을 하면서도 미련을 못버리고 메이커스나 솝텀을 기웃거려요. 엄청 오랜 기간동안 애정을 담고 있는 단체예요.',
     commenter: {
@@ -533,7 +603,7 @@ export const SOPT_COMMENT_LIST: SoptCommentType[] = [
   },
   {
     summary: '넓어지는 시야',
-    color: '#DFFF61',
+    color: '#FFC700',
     comment:
       '나름 많은 경험을 해왔다고 자부했는데, SOPT에서 제가 여전히 "우물 안 개구리"라는 것을 깨달았어요. SOPT를 통해 세상을 더 넓은 시야로 볼 수 있게 됐습니다. 자신의 것을 아낌없이 공유하는 건강한 조직과 똑똑한 사람들에게 많이 그리고 즐겁게 배웠어요.',
     commenter: {
@@ -544,7 +614,7 @@ export const SOPT_COMMENT_LIST: SoptCommentType[] = [
   },
   {
     summary: '유의미한 배움',
-    color: '#CBD0FF',
+    color: '#3E74FD',
     comment:
       '솝트에서 안드로이드를 처음 접하게 되었는데요, 세미나로 내용을 익히고 과제를 하며 금잔디 조원들과 디스코드에서 코드 띄워 놓고 토론도 해보고 코드리뷰로 서로 도움을 주고 받으며 성장했습니다. 그리고 솝커톤으로 무박2일의 개발 경험도 가져보고 앱잼으로 밤낮 없이 합숙하고 끝내 릴리즈 경험까지! 그리고 가장 중요한 저희 팀이 생겼습니다! 너무 유의미하고 재미있는 1년이었어요.',
     commenter: {
@@ -555,7 +625,7 @@ export const SOPT_COMMENT_LIST: SoptCommentType[] = [
   },
   {
     summary: '함께하는 도전,\n열정의 실천',
-    color: '#FFBEFC',
+    color: '#F66FF8',
     comment:
       'IT에 대한 배경지식이 많이 부족한 상태로 왔었지만, 정말 후회없고 행복한 시간이었어요. 모르는 것에 대해 부끄러워하는 것이 아닌 함께 알려주고 성장하는 문화, 도전을 두려워하지 않는 멋진 사람들, 활동하며 배우고 체화하게 되는 세미나 내용 등 SOPT와 함께 열정을 실천하는 과정에서 정말 많이 배우고 즐거웠어요.',
     commenter: {
@@ -566,7 +636,7 @@ export const SOPT_COMMENT_LIST: SoptCommentType[] = [
   },
   {
     summary: '깊이있는 학습,\n협업의 즐거움',
-    color: '#DFFF61',
+    color: '#FF7C53',
     comment:
       'YB 때는 개발의 시작을 SOPT에서 했는데 다양한 분야의 동료들과 협업하며 도움을 받아 빠르게 성장할 수 있었어요. OB 때는 기술적인 고민들을 동료들과 나누며 더욱 깊이있게 학습해 내실을 다질 수 있었고, 이를 YB들에게 공유하면서 소통하며 협업하는 것의 즐거움과 함께 성장하는 가치를 배울 수 있어 좋았어요.',
     commenter: {
@@ -577,7 +647,7 @@ export const SOPT_COMMENT_LIST: SoptCommentType[] = [
   },
   {
     summary: '성취감, 자신감',
-    color: '#CBD0FF',
+    color: '#FFC700',
     comment:
       '열정 넘치는 사람들과 함께하면서 긍정적인 에너지를 많이 얻었고, 혼자였다면 해내기 어려웠을 일들을 성취하는데 많은 도움이 되었어요. 미친듯이 몰입하는 경험을 통해 성취감 및 자신감을 얻었을뿐만 아니라, 앱잼 등 프로젝트를 진행하며 효율적으로 협업하는 방법을 배웠어요.',
     commenter: {
@@ -588,7 +658,7 @@ export const SOPT_COMMENT_LIST: SoptCommentType[] = [
   },
   {
     summary: '인생의\n터닝포인트',
-    color: '#FFBEFC',
+    color: '#3E74FD',
     comment:
       '활동을 더 일찍 시작하지 못한 것이 유일하게 남는 후회일 정도로 SOPT를 통해 많이 성장했다고 느껴요. 커리어적인 부분에서 방향성을 정할 수 있었던, 인생의 터닝포인트와 같은 활동이었어요.',
     commenter: {

src/views/MainPage/components/Activity/index.tsx

@@ -1,20 +1,22 @@
+import { Ref, forwardRef } from 'react';
 import { useIsMobile } from '@src/hooks/useDevice';
 import { Activity } from '@src/lib/constants/main';
 import Tab from '../Tab';
 import Card from './Card';
 import MobileCard from './MobileCard';
 import * as S from './style';
 
-export default function CardHover() {
+function CardHover(_props: unknown, ref: Ref<HTMLDivElement>) {
   const isMobileSize = useIsMobile('768px');
+  const tab = isMobileSize ? 'Activity' : '';
 
   return (
-    <div>
+    <div ref={ref}>
       <Tab
-        tab={'(1) 기수 내 정기 행사'}
+        tab={tab}
         title={'매 기수 진행되는, 다양한 활동들!'}
         description={
-          'SOPT에서는 매 기수 내 정기적으로 진행되는 다양한 활동들이 있어요. \n 각 파트원들과 친목 및 실력을 쌓을 수 있는 행사들을 통해, SOPT를 보다 즐겨봅시다.'
+          '솝트에서는 매 기수 내 정기적으로 진행되는 다양한 활동들이 있어요.\n 각 파트원들과 친목 및 실력을 쌓을 수 있는 행사들을 통해, 솝트를 더 즐겁게 보낼 수 있어요.'
         }
       />
       {isMobileSize ? (
@@ -37,3 +39,5 @@ export default function CardHover() {
     </div>
   );
 }
+
+export default forwardRef(CardHover);

src/views/MainPage/components/ActivitySection/index.tsx

@@ -1,17 +1,29 @@
-import { forwardRef } from 'react';
+import useInView from '@src/hooks/useInView';
 import Activity from '@src/views/MainPage/components/Activity';
 import OwnOrganization from '@src/views/MainPage/components/OwnOrganization';
 import PartConfig from '@src/views/MainPage/components/PartConfig';
+import Comment from '../Comment';
 import * as S from './style';
 
-function ActivitySection(_props: unknown, ref: React.Ref<HTMLDivElement>) {
+interface SectionInView {
+  activityInView: ReturnType<typeof useInView>;
+  partInView: ReturnType<typeof useInView>;
+  teamInView: ReturnType<typeof useInView>;
+  reviewInView: ReturnType<typeof useInView>;
+}
+
+export default function ActivitySection({
+  activityInView,
+  partInView,
+  teamInView,
+  reviewInView,
+}: SectionInView) {
   return (
-    <S.Wrapper id="activity" ref={ref}>
-      <Activity />
-      <PartConfig />
-      <OwnOrganization />
+    <S.Wrapper>
+      <Activity ref={activityInView.ref} />
+      <PartConfig ref={partInView.ref} />
+      <OwnOrganization ref={teamInView.ref} />
+      <Comment ref={reviewInView.ref} />
     </S.Wrapper>
   );
 }
-
-export default forwardRef(ActivitySection);

src/views/MainPage/components/ActivitySection/style.ts

@@ -3,9 +3,8 @@ import styled from '@emotion/styled';
 export const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 146px;
+  gap: 42px;
 
-  margin-bottom: 300px;
   padding-top: 68px;
 
   @media (max-width: 768px) {