feat: about 페이지 작성

depromeet · Apr 20, 2024 · c957241 · c957241
1 parent ba18a3b
commit c957241
Show file tree

Hide file tree

Showing 8 changed files with 172 additions and 88 deletions.
diff --git a/public/sitemap-0.xml b/public/sitemap-0.xml
@@ -1,8 +1,8 @@
 <?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>2023-03-05T16:02:03.395Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.depromeet.com/about</loc><lastmod>2023-03-05T16:02:03.395Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.depromeet.com/contact</loc><lastmod>2023-03-05T16:02:03.395Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.depromeet.com/project</loc><lastmod>2023-03-05T16:02:03.395Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.depromeet.com/recruit</loc><lastmod>2023-03-05T16:02:03.395Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.depromeet.com</loc><lastmod>2024-04-20T11:02:31.474Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.depromeet.com/about</loc><lastmod>2024-04-20T11:02:31.474Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.depromeet.com/apply</loc><lastmod>2024-04-20T11:02:31.474Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.depromeet.com/project</loc><lastmod>2024-04-20T11:02:31.474Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.depromeet.com/recruit</loc><lastmod>2024-04-20T11:02:31.474Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
 </urlset>
diff --git a/src/components/AboutInfo/AboutDepromeeet.tsx b/src/components/AboutInfo/AboutDepromeeet.tsx
@@ -0,0 +1,21 @@
+import { css } from '@emotion/react';
+
+import { JourneyEntrance } from '../Main';
+import { OfflineSession } from '../OfflineSession';
+
+export default function AboutDepromeeet() {
+  return (
+    <div css={layoutCss} style={{ backgroundColor: '#f4f4f4' }}>
+      <JourneyEntrance hasLinkButton={false} style={journeyEntranceCss} />
+      <OfflineSession />
+    </div>
+  );
+}
+
+const layoutCss = css`
+  background-color: '#F4F4F4';
+`;
+
+const journeyEntranceCss = css`
+  padding: 0;
+`;
diff --git a/src/components/Contact/Contact.tsx b/src/components/Contact/Contact.tsx
@@ -1,15 +1,16 @@
 import Link from 'next/link';
 import { css, Theme } from '@emotion/react';
 
-import { SectionTitle } from '~/components/SectionTitle';
 import { CONTACT_INFO } from '~/constant/contactInfo';
-import { commonLayoutCss } from '~/styles/layout';
 import { mediaQuery } from '~/styles/media';
+import { theme } from '~/styles/theme';
+
+import { SectionTitleV2 } from '../SectionTitleV2';
 
 export function Contact() {
   return (
-    <div css={[commonLayoutCss, layoutCss]}>
-      <SectionTitle label="Contact" title="디프만에 대해 궁금한게 있으신가요?" />
+    <div css={[layoutCss]}>
+      <SectionTitleV2 style={titleCss}>CONTACT</SectionTitleV2>
       <ul css={infoListCss}>
         {CONTACT_INFO.map(footer => (
           <li key={footer.name}>
@@ -25,52 +26,51 @@ export function Contact() {
 }
 
 const layoutCss = css`
-  margin-top: 150px;
-  margin-bottom: 150px;
-  ${mediaQuery('tablet')} {
-    margin-top: 150px;
-    margin-bottom: 150px;
-  }
-  ${mediaQuery('mobile')} {
-    margin-top: 100px;
-    margin-bottom: 100px;
-  }
+  padding: 120px 0;
+  background-color: ${theme.colors.lightGray};
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
 `;
 
 const infoListCss = css`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
+  width: 100%;
+  max-width: 960px;
+
+  ${mediaQuery('tablet')} {
+    padding: 0 32px;
+  }
+
   ${mediaQuery('mobile')} {
-    gap: 10px;
+    grid-template-columns: repeat(1, 1fr);
+    padding: 0 16px;
   }
 `;
 
 const InfoCss = (theme: Theme) => css`
-  ${theme.typos.pretendard.body1};
-  background-color: ${theme.colors.black400};
-  color: ${theme.colors.gray20};
-  width: 470px;
+  ${theme.typos.notosans.regular18};
+  background-color: ${theme.colors.white};
+  color: black;
+  width: 100%;
   height: 172px;
   padding: 48px 36px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-start;
   gap: 20px;
-  ${mediaQuery('tablet')} {
-    width: 100%;
-  }
-
-  ${mediaQuery('mobile')} {
-    font-size: 0.8rem;
-    width: 100%;
-    height: 96px;
-    padding: 16px 8px;
-  }
 `;
 
 const infoNameCss = (theme: Theme) => css`
-  ${theme.typos.decimal.subTitle1};
-  color: ${theme.colors.blue300};
+  ${theme.typos.bebas.regular32};
+  color: black;
+`;
+
+const titleCss = (theme: Theme) => css`
+  ${theme.typos.bebas.regular24}
 `;
diff --git a/src/components/OfflineSession/OfflineSession.tsx b/src/components/OfflineSession/OfflineSession.tsx
@@ -1,15 +1,16 @@
-import { css } from '@emotion/react';
+import { css, Theme } from '@emotion/react';
 
 import { OfflineThumbnail } from '~/components/OfflineSession/OfflineThumbnail';
-import { SectionTitle } from '~/components/SectionTitle';
 import { OFFLINE_SESSIONS } from '~/constant/offline';
 import { commonLayoutCss } from '~/styles/layout';
 import { mediaQuery } from '~/styles/media';
 
+import { SectionTitleV2 } from '../SectionTitleV2';
+
 export function OfflineSession() {
   return (
-    <div css={[commonLayoutCss, layoutCss]}>
-      <SectionTitle label="Offline Activity" title="오프라인 세션" />
+    <div css={[commonLayoutCss, conatinerCss]}>
+      <SectionTitleV2 style={titleCss}>오프라인 세션</SectionTitleV2>
       <ul css={sessionContainerCss}>
         {OFFLINE_SESSIONS.map(session => (
           <OfflineThumbnail key={session.title} {...session} showInfoDefault backgroundShow />
@@ -19,21 +20,33 @@ export function OfflineSession() {
   );
 }
 
-const layoutCss = css`
-  margin-top: 150px;
-  ${mediaQuery('tablet')} {
-    margin-top: 150px;
-  }
-  ${mediaQuery('mobile')} {
-    margin-top: 100px;
-  }
+const conatinerCss = css`
+  padding: 120px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 36px;
 `;
 
 const sessionContainerCss = css`
   display: grid;
+  width: 100%;
+  max-width: 960px;
   grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
+  row-gap: 20px;
+  column-gap: 12px;
+
   ${mediaQuery('tablet')} {
     grid-template-columns: repeat(2, 1fr);
+    padding: 0 32px;
   }
+
+  ${mediaQuery('mobile')} {
+    grid-template-columns: repeat(2, 1fr);
+    padding: 0 16px;
+  }
+`;
+
+const titleCss = (theme: Theme) => css`
+  ${theme.typos.notosans.semibold20}
 `;
diff --git a/src/components/OfflineSession/OfflineThumbnail.tsx b/src/components/OfflineSession/OfflineThumbnail.tsx
@@ -1,12 +1,14 @@
 import Image from 'next/image';
-import { css } from '@emotion/react';
+import { css, Theme } from '@emotion/react';
 import { m, Variants } from 'framer-motion';
 
-import { ArrowIcon } from '~/components/Icons';
 import { useCheckWindowSize } from '~/hooks/useCheckWindowSize';
 import useToggle from '~/hooks/useToggle';
 import { colors } from '~/styles/colors';
 import { mediaQuery } from '~/styles/media';
+import { theme } from '~/styles/theme';
+
+import { ArrowIcon } from '../Icons';
 
 export type Link = {
   type: 'Behance' | 'Github' | 'Web' | 'App';
@@ -18,6 +20,7 @@ type ThumbnailProps = {
   subTitle: string;
   img: string;
   description: string;
+  titleTextColor: string;
   links?: Link[];
   showInfoDefault?: boolean;
   backgroundShow?: boolean;
@@ -30,6 +33,7 @@ export function OfflineThumbnail({
   subTitle,
   img,
   description,
+  titleTextColor,
   links,
   showInfoDefault = false,
   backgroundShow = false,
@@ -54,8 +58,7 @@ export function OfflineThumbnail({
           ? {
               ...articleVariants,
               default: {
-                background:
-                  'linear-gradient(180deg, rgba(19, 28, 40, 0.9) 0%, rgba(19, 28, 40, 0) 100%)',
+                background: 'linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.75) 100%)',
               },
             }
           : articleVariants
@@ -67,14 +70,18 @@ export function OfflineThumbnail({
       <m.div css={contentsCss}>
         <m.div>
           <m.p
-            css={titleCss}
+            css={titleCss(titleTextColor)}
             variants={showInfoDefault ? { ...textVariants, default: { opacity: 1 } } : textVariants}
           >
             {title}
           </m.p>
           <m.p
             css={subTitleCss}
-            variants={showInfoDefault ? { ...textVariants, default: { opacity: 1 } } : textVariants}
+            variants={
+              showInfoDefault
+                ? { ...textVariants, default: { opacity: 1 }, hover: { color: 'white' } }
+                : textVariants
+            }
           >
             {subTitle}
           </m.p>
@@ -99,12 +106,14 @@ export function OfflineThumbnail({
           </m.div>
         )}
       </m.div>
+      <Image src={img} alt={title} fill />
     </m.article>
   );
 }
 
 const articleCss = css`
   position: relative;
+  width: 100%;
   height: 208px;
   padding: 24px;
   overflow: hidden;
@@ -155,24 +164,20 @@ const linkCss = css`
   margin-right: 2px;
 `;
 
-const titleCss = css`
+const titleCss = (color: string) => css`
+  ${theme.typos.bebas.regular40}
   position: relative;
-  font-weight: 700;
-  font-size: 1.25rem;
-  line-height: 30px;
-  color: ${colors.white};
+  color: ${color};
   z-index: 10;
   ${mediaQuery('mobile')} {
     font-size: 1rem;
   }
 `;
 
-const subTitleCss = css`
+const subTitleCss = (theme: Theme) => css`
+  ${theme.typos.notosans.semibold20}
   position: relative;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 22px;
-  color: ${colors.gray100};
+  color: black;
   z-index: 10;
   ${mediaQuery('mobile')} {
     font-size: 0.8rem;
@@ -185,7 +190,7 @@ const descriptionCss = css`
   font-weight: 500;
   font-size: 1rem;
   line-height: 22px;
-  color: ${colors.white};
+  color: white;
   z-index: 10;
   letter-spacing: -0.16px;
   white-space: pre-wrap;
@@ -207,8 +212,9 @@ const textVariants: Variants = {
 };
 
 const articleVariants: Variants = {
-  default: { background: 'transparent' },
+  default: { backgroundColor: 'transparent' },
   hover: {
+    backgroundColor: 'black',
     transition: {
       duration: 0.3,
       ease: defaultEasing,
@@ -218,10 +224,11 @@ const articleVariants: Variants = {
 
 const imageVariants: Variants = {
   default: {
-    filter: 'blur(0px)',
+    background: 'white',
   },
   hover: {
-    filter: 'blur(5px) brightness(0.4)',
+    background: 'rgba(19, 28, 40, 0.70)',
+    backdropFilter: 'blur(7.198952674865723px)',
     transition: {
       duration: 0.3,
       ease: defaultEasing,

diff --git a/src/components/Supports/SupportThumbnail.tsx b/src/components/Supports/SupportThumbnail.tsx
@@ -5,6 +5,7 @@ import { m } from 'framer-motion';
 import { ArrowIcon } from '~/components/Icons';
 import { defaultFadeInVariants } from '~/constant/motion';
 import { colors } from '~/styles/colors';
+import { mediaQuery } from '~/styles/media';
 
 export type Link = {
   type: 'Behance' | 'Github' | 'Web' | 'App';
@@ -70,8 +71,9 @@ const articleCss = css`
   position: relative;
   height: 208px;
   padding: 24px;
-  width: 312px;
+  width: 100%;
   overflow: hidden;
+
   &:hover {
     cursor: pointer;
   }
@@ -81,6 +83,10 @@ const articleCss = css`
   &:hover > div {
     opacity: 1;
   }
+
+  ${mediaQuery('mobile')} {
+    height: 164px;
+  }
 `;
 
 const imageArticleCss = css`