Feat: 16기 웹 개발 리소스 추가 (#386)

public/sitemap-0.xml

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://www.depromeet.com</loc><lastmod>2024-06-10T14:25:51.284Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.depromeet.com/about</loc><lastmod>2024-06-10T14:25:51.284Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.depromeet.com/apply</loc><lastmod>2024-06-10T14:25:51.284Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.depromeet.com/blog</loc><lastmod>2024-06-10T14:25:51.284Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.depromeet.com/project</loc><lastmod>2024-06-10T14:25:51.284Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.depromeet.com/recruit</loc><lastmod>2024-06-10T14:25:51.284Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.depromeet.com</loc><lastmod>2024-11-17T07:04:27.144Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.depromeet.com/about</loc><lastmod>2024-11-17T07:04:27.144Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.depromeet.com/apply</loc><lastmod>2024-11-17T07:04:27.144Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.depromeet.com/blog</loc><lastmod>2024-11-17T07:04:27.144Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.depromeet.com/project</loc><lastmod>2024-11-17T07:04:27.144Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.depromeet.com/recruit</loc><lastmod>2024-11-17T07:04:27.144Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
 </urlset>

src/components/Icons/NarrowArrowIcon.tsx

@@ -22,9 +22,8 @@ export function NarrowArrowIcon({
       {...props}
     >
       <path
-        xmlns="http://www.w3.org/2000/svg"
-        d="M12.396 14.6999C12.596 14.4279 12.856 14.1359 13.176 13.8239C13.496 13.5199 13.816 13.2479 14.136 13.0079L14.688 13.9919C14.336 14.2639 13.984 14.5719 13.632 14.9159C13.288 15.2599 12.96 15.6199 12.648 15.9959C12.344 16.3719 12.076 16.7399 11.844 17.0999C11.612 16.7399 11.34 16.3719 11.028 15.9959C10.724 15.6199 10.396 15.2599 10.044 14.9159C9.7 14.5719 9.352 14.2639 9 13.9919L9.552 13.0079C9.88 13.2479 10.2 13.5199 10.512 13.8239C10.832 14.1359 11.092 14.4279 11.292 14.6999V5.99988H12.396V14.6999Z"
-        strokeWidth="0"
+        d="M12.9705 14.8378C13.3221 14.3661 13.7792 13.8597 14.3418 13.3186C14.9044 12.7914 15.4669 12.3197 16.0295 11.9035L17 13.61C16.3812 14.0817 15.7623 14.6159 15.1435 15.2124C14.5387 15.809 13.962 16.4333 13.4135 17.0854C12.879 17.7375 12.4079 18.3757 12 19C11.5921 18.3757 11.1139 17.7375 10.5654 17.0854C10.0309 16.4333 9.45429 15.809 8.83544 15.2124C8.23066 14.6159 7.61885 14.0817 7 13.61L7.97046 11.9035C8.54712 12.3197 9.10971 12.7914 9.65823 13.3186C10.2208 13.8597 10.6779 14.3661 11.0295 14.8378V5H12.9705V14.8378Z"
+        fill="black"
       />
     </Svg>
   );

src/components/Intro/Intro.tsx

@@ -1,29 +1,38 @@
 import Image from 'next/image';
 import { css } from '@emotion/react';
 
-import { ColorType } from '~/constant/color';
+import { colors } from '~/styles/colors';
 import { mediaQuery } from '~/styles/media';
-import { theme } from '~/styles/theme';
 
 type IntroProps = {
   imageUrl: string;
   title: string;
   width: number;
   height: number;
-  color: ColorType;
+  color: keyof typeof colors | string;
 };
 
-type ImageSize = {
-  width: number;
-  height: number;
-};
+export function Intro({ imageUrl, title, width, height, color }: IntroProps) {
+  const getColor = (color: string) => {
+    const keys = color.split('.');
+    let current: any = colors;
 
-const MAX_WIDTH = 1024;
+    for (const key of keys) {
+      if (!current[key]) {
+        throw new Error(`Invalid color key: ${color}`);
+      }
+      current = current[key];
+    }
 
-export function Intro({ imageUrl, title, width, height, color }: IntroProps) {
+    if (typeof current !== 'string') {
+      throw new Error(`Color key '${color}' points to a nested object, not a string.`);
+    }
+
+    return current;
+  };
   return (
-    <section css={containerCss({ color: theme.colors[color] })}>
-      <div css={bgImageCss({ width, height })}>
+    <section css={containerCss({ color: getColor(color) })}>
+      <div css={bgImageCss}>
         <Image src={imageUrl} alt={title} width={width} height={height} priority />
       </div>
     </section>
@@ -42,17 +51,21 @@ const containerCss = ({ color }: { color: string }) => css`
   }
 `;
 
-const bgImageCss = (props: ImageSize) => css`
+const bgImageCss = () => css`
   top: 20px;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
   img {
-    width: ${props.width}px;
-    height: ${props.height}px;
-    vertical-align: bottom;
+    object-fit: cover;
 
-    @media screen and (max-width: ${MAX_WIDTH}px) {
+    ${mediaQuery('mobile')} {
       width: 100%;
       height: auto;
+      object-fit: contain;
     }
   }
 

src/components/Journey/Journey.tsx

@@ -24,14 +24,23 @@ export function Journey() {
 }
 
 function DepromeetInformation() {
+  // NOTE: 빌드 에러 수정을 위해 임시 주석처리
   return (
     <div css={infoContainerCss}>
-      {QUANTIFIED_INFO.map(({ label, text }, idx) => (
-        <div key={idx} css={gridItemCss}>
-          <span>{text}</span>
-          <h3>{label}</h3>
-        </div>
-      ))}
+      {QUANTIFIED_INFO.map(
+        (
+          {
+            label,
+            // text
+          },
+          idx
+        ) => (
+          <div key={idx} css={gridItemCss}>
+            {/* <span>{text}</span> */}
+            <h3>{label}</h3>
+          </div>
+        )
+      )}
     </div>
   );
 }

src/components/Supports/SupportThumbnail.tsx

@@ -68,7 +68,7 @@ const articleCss = css`
   padding: 24px;
   width: 100%;
   overflow: hidden;
-  background-color: black;
+  background-color: ${colors.gray[900]};
 
   &:hover {
     cursor: pointer;

src/constant/aboutInfo.ts

@@ -21,8 +21,8 @@ export const ABOUT_INFO = [
 ];
 
 export const QUANTIFIED_INFO = [
-  { label: '탄생한지', text: '8YEARS' },
-  { label: '10-14기 런칭 성공률', text: '100%' },
-  { label: '5-14기 런칭 서비스', text: '50+' },
-  { label: '누적 멤버 수', text: '900+' },
+  { label: '디프만이 탄생한지', number: 8, unit: '년' },
+  { label: '10-15기 런칭 성공률', number: 100, unit: '%' },
+  { label: '런칭 서비스', number: 60, unit: '개' },
+  { label: '누적 멤버수', number: 1009, unit: '명' },
 ];

src/constant/contactInfo.ts

@@ -22,6 +22,6 @@ export const SECOND_ROW_FOOTER_INFOS = [
 ];
 
 export const CONTACT_INFO = [
-  { name: 'Kakao channel', detail: '@depromeet', href: DEPROMEET_KAKAO_PLUS_FRIEND },
-  { name: 'E-mail', detail: 'depromeet@gmail.com', href: DEPROMEET_EMAIL },
+  { name: '카카오톡 문의', detail: '@depromeet', href: DEPROMEET_KAKAO_PLUS_FRIEND },
+  { name: '이메일 문의', detail: 'depromeet@gmail.com', href: DEPROMEET_EMAIL },
 ];

src/constant/supports.ts

@@ -6,6 +6,7 @@ export type Support = {
   link: string;
 };
 
+/* TODO: 16기 후원사 image export */
 export const SUPPORTS: Support[] = [
   {
     title: '팀스파르타',

src/features/About/components/Result.tsx

@@ -0,0 +1,78 @@
+import Image from 'next/image';
+import { css } from '@emotion/react';
+
+import { useCheckWindowSize } from '~/hooks/useCheckWindowSize';
+import { theme } from '~/styles/theme';
+
+import { ResultCardList } from './ResultCardList';
+
+// TODO: 공통 컴포넌트 분리 / 반응형 작업
+export const Result = () => {
+  const { isTargetSize: isMobileSize } = useCheckWindowSize('mobile');
+  return (
+    <div css={layoutCss}>
+      <div css={title.wrapper}>
+        <h1>
+          디프만은 디자이너와 개발자가
+          {isMobileSize && <br />}
+          기획, 릴리즈, 이후 개선까지
+        </h1>
+        <h1>
+          <span css={emphasis.leftText}>모든 과정을 경험하는</span>
+          {isMobileSize && <br />}
+          <span css={emphasis.text}>
+            <div css={emphasis.imageWrapper}>
+              <Image
+                src="/images/16th/about/emphasis.png"
+                alt="성장추구형 강조"
+                width={124}
+                height={40}
+              />
+            </div>
+          </span>
+          <span css={emphasis.text}>성장추구형</span>
+          <span css={emphasis.rightText}>커뮤니티입니다.</span>
+        </h1>
+      </div>
+
+      <ResultCardList />
+    </div>
+  );
+};
+
+const layoutCss = () => css`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 84px;
+  color: black;
+`;
+
+const title = {
+  wrapper: css`
+    h1 {
+      ${theme.typosV2.pretendard.semibold24};
+      line-height: 150%;
+      text-align: center;
+      height: fit-content;
+    }
+  `,
+};
+
+const emphasis = {
+  leftText: css`
+    margin-right: 13px;
+  `,
+  rightText: css`
+    margin-left: 14px;
+  `,
+  text: css`
+    position: relative;
+  `,
+  imageWrapper: css`
+    position: absolute;
+    left: -11px;
+    top: -3px;
+  `,
+};

src/features/About/components/ResultCardList.tsx

@@ -0,0 +1,82 @@
+import { css } from '@emotion/react';
+
+import { QUANTIFIED_INFO } from '~/constant/aboutInfo';
+import { colors } from '~/styles/colors';
+import { mediaQuery } from '~/styles/media';
+import { theme } from '~/styles/theme';
+
+export const ResultCardList = () => {
+  return (
+    <div css={containerCss}>
+      {QUANTIFIED_INFO.map(({ label, number, unit }, idx) => (
+        <div key={idx} css={cardCss}>
+          <p css={textCss.label}>{label}</p>
+          <p css={textCss.wrapper}>
+            <span css={textCss.number}>{number}</span>
+            <span css={textCss.unit}>{unit}</span>
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const containerCss = css`
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  width: 1040px;
+  height: 240px;
+
+  ${mediaQuery('mobile')} {
+    grid-template-columns: repeat(2, 1fr);
+    width: 100%;
+    height: auto;
+    padding: 0 24px;
+  }
+`;
+
+const cardCss = css`
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  justify-content: center;
+  align-items: center;
+  aspect-ratio: 1/1;
+  background-color: ${colors.grey[100]};
+  border-radius: 20px;
+
+  ${mediaQuery('mobile')} {
+    gap: 18px;
+  }
+`;
+
+const textCss = {
+  wrapper: css`
+    display: flex;
+    align-items: center;
+  `,
+  label: css`
+    color: ${colors.grey[600]};
+    ${theme.typosV2.pretendard.semibold20};
+
+    ${mediaQuery('mobile')} {
+      ${theme.typosV2.pretendard.semibold15};
+      line-height: 150%;
+    }
+  `,
+  number: css`
+    ${theme.typosV2.pretendard.bold62};
+
+    ${mediaQuery('mobile')} {
+      ${theme.typosV2.pretendard.bold32};
+    }
+  `,
+  unit: css`
+    ${theme.typosV2.pretendard.semibold48};
+
+    ${mediaQuery('mobile')} {
+      ${theme.typosV2.pretendard.semibold24};
+    }
+  `,
+};