[SP0] 34기 리크루팅 관련 소개 페이지 업데이트 (#363)

* design: 소개페이지 컬러 수정사항 반영

* design: OriginFooter 컬러 수정사항 반영

* chore: Current Generation 값 수정

* fix: 소개탭 커리큘럼 영역 배경색 삭제

* fix: 소개탭 핵심가치 스타일 수정

* feat: 임원진 정보 업데이트

* design: 임원진 카드 디자인 수정

* design: 임원진 Description 반응형 수정

* fix: 임원진 정보 업데이트 사항 반영

* fix: PositionType type error 해결

* design: 헤더 31기로고->전체로고로 수정

src/assets/mainLogo/index.ts

@@ -19,6 +19,7 @@ import logo29 from './logo_29.svg';
 import logo30 from './logo_30.svg';
 import logo31 from './logo_31.svg';
 import logoDoSopt from './[email protected]';
+import imgLogoSopt from './img_logo_sopt.png';
 import logoNowSopt from './logo_nowsopt.png';
 
 export {
@@ -43,5 +44,6 @@ export {
   logo30,
   logo31,
   logoDoSopt,
+  imgLogoSopt,
   logoNowSopt,
 };

src/components/Footer/OriginFooter/style.ts

@@ -4,7 +4,7 @@ import { colors } from '@sopt-makers/colors';
 export const Root = styled.footer`
   width: 100%;
   min-height: 162px;
-  background-color: ${colors.gray800};
+  background-color: #202020;
 
   /* 태블릿 + 데스크탑 뷰 */
   @media (min-width: 766px) {

src/components/Header/Desktop/DesktopHeader.tsx

@@ -2,11 +2,11 @@ import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
 import Link from 'next/link';
 import { css } from '@emotion/react';
-import { LOGO_IMAGE_URL } from '@src/assets/mainLogo/base64_logo';
 import useHeader from '@src/hooks/useHeader';
 import { GrowDown } from '@src/lib/styles/animation';
 import { menuTapList } from '../menuTapList';
 import { MenuTapType } from '../types';
+import { imgLogoSopt } from '@src/assets/mainLogo';
 
 function DesktopHeader() {
   const { handleClickLogo, handleIsSelected } = useHeader();
@@ -68,12 +68,11 @@ export const Logo = styled.button`
   width: 87px;
   height: 30px;
 
-  background: url(${LOGO_IMAGE_URL}) center no-repeat;
+  background: url(${imgLogoSopt.src}) center no-repeat;
   background-size: 100% 100%;
   cursor: pointer;
 
-  /* 모바일 뷰 */
-  @media (max-width: 1279px) {
+  @media (max-width: 940px) {
     width: 63px;
     height: 21px;
   }

src/components/Header/Mobile/MobileHeader.tsx

@@ -5,10 +5,10 @@ import { useRouter } from 'next/router';
 import { useState } from 'react';
 import menuBar from '@src/assets/icons/menuBar.svg';
 import xButton from '@src/assets/icons/xButton.png';
-import { LOGO_IMAGE_URL } from '@src/assets/mainLogo/base64_logo';
 import { Condition } from '@src/components/common/Condition';
 import { MenuState } from '../types';
 import HeaderMenu from './HeaderMenu';
+import { imgLogoSopt } from '@src/assets/mainLogo';
 
 function MobileHeader() {
   const router = useRouter();
@@ -48,7 +48,7 @@ export const StyledHeader = styled.div<{ isMenuShown: boolean }>`
 export const Logo = styled.button`
   width: 63px;
   height: 21px;
-  background: url(${LOGO_IMAGE_URL}) center no-repeat;
+  background: url(${imgLogoSopt.src}) center no-repeat;
   background-size: 100% 100%;
   cursor: pointer;
 `;

src/lib/api/mock/about.ts

@@ -54,107 +54,114 @@ const getAboutInfo = async (): Promise<GetAboutInfoResponse> => ({
 const getMemberInfo = async (): Promise<GetMembersInfoResponse> => ({
   members: [
     {
-      id: 80,
-      name: '양정윤',
+      id: 1,
+      name: '조승우',
       position: '회장',
-      currentProject: 'palmspring',
-      description: '알은 세계이다. 태어나려는 자는 세계를 부숴야 한다.',
-      imageSrc: '/images/members/80.png',
-      gmail: '[email protected]',
+      currentProject: '성균관대학교',
+      description: '솝트의 지금, 여러분과 함께',
+      imageSrc: '/images/members/1.png',
+      gmail: '[email protected]',
+      linkedin: 'https://www.linkedin.com/in/seungwoo-cho-7a5676236/',
     },
     {
-      id: 291,
-      name: '김대덕',
-      position: '부회장',
-      currentProject: 'palmspring',
-      imageSrc: '/images/members/291.png',
-      gmail: '[email protected]',
+      id: 2,
+      name: '박세은',
+      position: '총무',
+      currentProject: '한양대학교, doorip',
+      description: '나와 우리의 성장을 위해 파이팅!',
+      imageSrc: '/images/members/2.png',
+      gmail: '[email protected]',
+      github: 'seeunplayer',
+      linkedin: 'https://www.linkedin.com/in/tina-park-755ab8230/?locale=ko_KR',
     },
     {
-      id: 49,
-      name: '이호재',
-      position: '총무',
-      currentProject: 'ZOOC',
-      description: '함께 성장하는 환경',
-      imageSrc: '/images/members/49.png',
-      gmail: '[email protected]',
+      id: 3,
+      name: '정동규',
+      position: '메이커스 팀장',
+      currentProject: 'palmspring',
+      description: '하고 싶은건 모두 도전합니다.',
+      imageSrc: '/images/members/3.png',
+      gmail: '[email protected]',
+      github: 'yummygyudon',
+      linkedin:'https://www.linkedin.com/in/yummygyudon/',
     },
     {
-      id: 246,
-      name: '김해린',
+      id: 4,
+      name: '정채은',
       position: '미디어 팀장',
-      currentProject: '타투어',
-      description: '순간의 감정까지 쌓이도록 온 마음을 담아 기록합니다',
-      imageSrc: '/images/members/246.png',
-      gmail: '[email protected]',
-      linkedin: '해린-김-bb4a8027a',
+      currentProject: 'YELL:O, PINGLE',
+      description: '이상적인 기억을 기록합니다.',
+      imageSrc: '/images/members/4.png',
+      gmail: '[email protected]',
+      github: 'chaentopia',
     },
     {
-      id: 354,
-      name: '이승준',
+      id: 5,
+      name: '곽성준',
       position: '운영 팀장',
-      currentProject: '엄빠도 어렸다',
-      description: '안녕하세요',
-      imageSrc: '/images/members/354.png',
-      gmail: '[email protected]',
+      currentProject: 'doorip',
+      description: '잊지 못할 추억을 드립니다.',
+      imageSrc: '/images/members/5.png',
+      gmail: '[email protected]',
+      github: 'sjk4618',
     },
     {
-      id: 408,
-      name: '서지원',
+      id: 6,
+      name: '여민서',
       position: '기획 파트장',
-      currentProject: 'ASAP',
-      description: '프로덕트 성공에 대한 모든 책임을 질 것',
-      imageSrc: '/images/members/408.png',
-      gmail: '[email protected]',
+      currentProject: 'YELL:O, 하면함',
+      description: '성장에 미쳐있는 사람',
+      imageSrc: '/images/members/6.png',
+      gmail: '[email protected]',
     },
     {
-      id: 174,
-      name: '김채현',
+      id: 7,
+      name: '황현진',
       position: '디자인 파트장',
-      currentProject: '타투어',
-      imageSrc: '/images/members/174.png',
-      gmail: '[email protected]',
+      currentProject: 'growthook, doorip',
+      description: '디자인의 지니어스',
+      imageSrc: '/images/members/7.png',
+      gmail: '[email protected]',
     },
     {
-      id: 57,
-      name: '이태희',
+      id: 8,
+      name: '곽의진',
       position: '안드로이드 파트장',
-      currentProject: 'SPARKLE',
-      description: '안드로이드 그 자체가 되고 싶은 남자',
-      imageSrc: '/images/members/57.png',
-      gmail: '[email protected]',
-      github: 'taeheeL',
-      linkedin: '태희-이-b4988a272',
+      currentProject: 'pophory, 하면함',
+      description: '인간 안드가 되어봅시다.',
+      imageSrc: '/images/members/8.png',
+      gmail: '[email protected]',
+      github: 'KwakEuiJin',
     },
     {
-      id: 387,
-      name: '박익범',
+      id: 9,
+      name: '류희재',
       position: 'iOS 파트장',
-      currentProject: 'SPARKLE',
-      imageSrc: '/images/members/387.png',
-      gmail: '[email protected]',
-      github: 'parkikbum',
+      currentProject: 'ZOOC',
+      description: '낭만 사과 꽃길 같이 걸어가요',
+      imageSrc: '/images/members/9.png',
+      gmail: '[email protected]',
+      github: 'HELLOHIDI',
     },
     {
-      id: 209,
-      name: '김서현',
+      id: 10,
+      name: '이재훈',
       position: '웹 파트장',
-      currentProject: 'palmspring',
-      description: '사용자를 생각하는 개발자',
-      imageSrc: '/images/members/209.png',
-      gmail: '[email protected]',
-      github: 'seobbang',
-      linkedin: 'seohyun-kim-9784ab29a',
+      currentProject: 'ASAP, Mile',
+      description: '소속감에 미쳐있는 사람',
+      imageSrc: '/images/members/10.png',
+      gmail: '[email protected]',
+      github: 'ljh0608',
     },
     {
-      id: 152,
-      name: '최윤한',
+      id: 11,
+      name: '도소현',
       position: '서버 파트장',
-      currentProject: '스밈, 포포리, 캐쳡',
-      description: '아슈파',
-      imageSrc: '/images/members/152.png',
-      gmail: 'unusualc@likelion.org',
-      github: 'unanchoi',
+      currentProject: '이화여자대학교',
+      description: '단단한 서비스를 제공합니다.',
+      imageSrc: '/images/members/11.png',
+      gmail: 'develop@sopt.org',
+      github: 'sohyundoh',
     },
   ],
 });

src/lib/api/remote/about.ts

@@ -15,7 +15,7 @@ const client = axios.create({
   timeout: DEFAULT_TIMEOUT,
 });
 
-const CURRENT_GENERATION = 33;
+const CURRENT_GENERATION = 34;
 
 const getAboutInfo = async (): Promise<GetAboutInfoResponse> => {
   const { data: dataCurrent } = await client.get(`/aboutsopt?generation=${CURRENT_GENERATION}`);

src/lib/types/about.ts

@@ -30,6 +30,7 @@ export type PositionType =
   | 'iOS 파트장'
   | '웹 파트장'
   | '서버 파트장'
+  | '메이커스 팀장'
   | '';
 
 export interface AboutInfoType {

src/views/AboutPage/components/CoreValue/Item/style.ts

@@ -12,10 +12,10 @@ export const ItemContainer = styled.div<{ src: string; isInView: boolean; order:
   max-height: 323px;
   height: calc(196px + 6.6vw);
 
-  padding: min(35.98px, 1.87vw) 0 min(80.5px, 4.19vw) 0;
+  padding: min(35.98px, 5vw) 0 min(80.5px, 4.19vw) 0;
   border-radius: 10px;
-  background: center bottom 0 no-repeat #17181c url(${({ src }) => src});
-  background-size: min(200px + 9.37vw) min(170px + 7.96vw);
+  background: center bottom 0px no-repeat #181818 url(${({ src }) => src});
+  background-size: min(170px + 7vw) min(170px + 7vw);
 
   opacity: 0;
 
@@ -32,13 +32,15 @@ export const ItemContainer = styled.div<{ src: string; isInView: boolean; order:
   @media (max-width: 768px) {
     width: 380px;
     height: 323px;
-    background-size: 100%;
+    background-size: 90%;
+    background-position: center bottom -20px;
   }
 
   /* 모바일 뷰 */
   @media (max-width: 428px) {
     width: 268.769px;
     height: 228.454px;
+    background-position: center bottom -20px;
   }
 `;
 
@@ -96,7 +98,7 @@ export const ValueNumber = styled.div`
   width: 25.154px;
   height: 25.154px;
   border-radius: 6px;
-  background: #363a45;
+  background: #364536;
 
   color: ${colors.white};
   font-family: SUIT;

src/views/AboutPage/components/Curriculum/Content/style.ts

@@ -20,7 +20,6 @@ export const ImageWrapper = styled.div`
   position: relative;
   max-width: 1200px;
   height: calc(300px + 25.72vw);
-  background-color: #0A0A0A;
   border-radius: 10px;
 
   /* 태블릿 뷰 */