feat: 사이프 디자인 시스템 적용

.gitignore

@@ -37,3 +37,9 @@ dist-ssr
 
 # google spreadsheet data
 src/db/*.json
+
+# playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.yarnrc.yml

@@ -2,6 +2,10 @@ compressionLevel: mixed
 
 enableGlobalCache: false
 
+npmScopes:
+  sipe-team:
+    npmRegistryServer: 'https://npm.pkg.github.com'
+
 supportedArchitectures:
   cpu:
     - x64

e2e/screenshot.spec.ts

@@ -0,0 +1,45 @@
+import { expect, test } from '@playwright/test';
+
+test('메인 페이지', async ({ page }) => {
+  await page.goto('/', { waitUntil: 'networkidle' });
+
+  await expect(page).toHaveScreenshot({
+    fullPage: true,
+  });
+});
+
+test('사이프 소개 페이지', async ({ page }) => {
+  await page.goto('/about', { waitUntil: 'networkidle' });
+
+  await expect(page).toHaveScreenshot({
+    fullPage: true,
+    maxDiffPixelRatio: 0.2,
+  });
+});
+
+test('사이퍼 모집 페이지', async ({ page }) => {
+  await page.goto('/recruit', { waitUntil: 'networkidle' });
+
+  await expect(page).toHaveScreenshot({
+    fullPage: true,
+    maxDiffPixelRatio: 0.2,
+  });
+});
+
+test('사이퍼 소개 페이지', async ({ page }) => {
+  await page.goto('/people', { waitUntil: 'networkidle' });
+
+  await expect(page).toHaveScreenshot({
+    fullPage: true,
+    maxDiffPixelRatio: 0.2,
+  });
+});
+
+test('사이퍼 활동 페이지', async ({ page }) => {
+  await page.goto('/activity', { waitUntil: 'networkidle' });
+
+  await expect(page).toHaveScreenshot({
+    fullPage: true,
+    maxDiffPixelRatio: 0.2,
+  });
+});

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@channel.io/channel-web-sdk-loader": "^2.0.0",
     "@next/third-parties": "^14.2.11",
+    "@sipe-team/side": "^0.2.2",
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.12",
     "clsx": "^2.1.1",
@@ -27,6 +28,7 @@
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.2.11",
+    "@playwright/test": "^1.49.1",
     "@svgr/webpack": "8.1.0",
     "@types/node": "^20.12.2",
     "@types/react": "^18.3.4",

playwright.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:6100',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: devices['Desktop Chrome'],
+    },
+    {
+      name: 'webkit',
+      use: devices['Desktop Safari'],
+    },
+    {
+      name: 'mobile chrome',
+      use: devices['Pixel 5'],
+    },
+    {
+      name: 'mobile safari',
+      use: devices['iPhone 12'],
+    },
+  ],
+});

src/components/atoms/ContentWithTitle/index.module.scss

@@ -2,19 +2,14 @@
   width: 100%;
   margin-top: 100px;
   margin-bottom: 160px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
 
   @include mobile {
     margin-bottom: 100px;
   }
 }
 
 .title {
-  font-size: 36px;
   font-weight: 800;
-  line-height: 50px;
   margin-bottom: 40px;
-  color: color('white');
+  line-height: 50px;
 }

src/components/atoms/ContentWithTitle/index.tsx

@@ -1,3 +1,5 @@
+import { color, Flex, Typography } from '@sipe-team/side';
+
 import styles from './index.module.scss';
 
 type ContentWithTitleProps = {
@@ -7,10 +9,12 @@ type ContentWithTitleProps = {
 
 function ContentWithTitle({ title, children }: ContentWithTitleProps) {
   return (
-    <div className={styles.wrapper}>
-      <div className={styles.title}>{title}</div>
+    <Flex align="center" className={styles.wrapper} direction="column">
+      <Typography color={color.white} className={styles.title} size={36}>
+        {title}
+      </Typography>
       {children}
-    </div>
+    </Flex>
   );
 }
 

src/components/atoms/Layout/index.module.scss

@@ -1,7 +1,4 @@
 .wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: 100%;
 
   .layout {

src/components/atoms/Layout/index.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 
+import { Flex } from '@sipe-team/side';
 import clsx from 'clsx';
 
 import styles from './index.module.scss';
@@ -12,9 +13,14 @@ function Layout({
   children: ReactNode;
 }) {
   return (
-    <div className={styles.wrapper}>
+    <Flex
+      align="center"
+      className={styles.wrapper}
+      direction="row"
+      justify="center"
+    >
       <div className={clsx(styles.layout, className)}>{children}</div>
-    </div>
+    </Flex>
   );
 }
 

src/components/atoms/Timer/index.module.scss

@@ -1,7 +1,4 @@
 .wrapper {
-  display: flex;
-  gap: 8px;
-  align-items: center;
   font-size: 20px;
   font-weight: 700;
   line-height: 28px;
@@ -13,12 +10,4 @@
   background-color: rgba(255, 255, 255, 0.16);
   border: 1px solid color('primary');
   border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  @include text('h4/bold', 'white');
-}
-
-.text {
-  @include text('h5/semibold', 'white');
 }

src/components/atoms/Timer/index.tsx

@@ -1,5 +1,23 @@
+import { ComponentProps } from 'react';
+
+import { color, Flex, Typography } from '@sipe-team/side';
+
 import styles from './index.module.scss';
 
+function Time(props: ComponentProps<typeof Typography>) {
+  return (
+    <Flex align="center" asChild className={styles.time} justify="center">
+      <Typography color={color.white} size={24} weight="bold" {...props} />
+    </Flex>
+  );
+}
+
+function Text(props: ComponentProps<typeof Typography>) {
+  return (
+    <Typography color={color.white} size={20} weight="semiBold" {...props} />
+  );
+}
+
 type Props = {
   dates: number;
   hours: number;
@@ -12,24 +30,16 @@ function Timer({ dates, hours, minutes, seconds, isRecruiting }: Props) {
   const formattedTime = (number: number) => String(number).padStart(2, '0');
 
   return (
-    <div className={styles.wrapper}>
-      <div className={styles.time}>
-        {isRecruiting ? formattedTime(dates) : 0}
-      </div>
-      <div className={styles.text}>일</div>
-      <div className={styles.time}>
-        {isRecruiting ? formattedTime(hours) : 0}
-      </div>
-      <div className={styles.text}>시간</div>
-      <div className={styles.time}>
-        {isRecruiting ? formattedTime(minutes) : 0}
-      </div>
-      <div className={styles.text}>분</div>
-      <div className={styles.time}>
-        {isRecruiting ? formattedTime(seconds) : 0}
-      </div>
-      <div className={styles.text}>초</div>
-    </div>
+    <Flex align="center" className={styles.wrapper} direction="row" gap="8px">
+      <Time>{isRecruiting ? formattedTime(dates) : 0}</Time>
+      <Text>일</Text>
+      <Time>{isRecruiting ? formattedTime(hours) : 0}</Time>
+      <Text>시간</Text>
+      <Time>{isRecruiting ? formattedTime(minutes) : 0}</Time>
+      <Text>분</Text>
+      <Time>{isRecruiting ? formattedTime(seconds) : 0}</Time>
+      <Text>초</Text>
+    </Flex>
   );
 }
 

src/components/global/Footer/index.module.scss

@@ -1,7 +1,5 @@
 .wrapper {
   width: 100%;
-  display: flex;
-  justify-content: center;
   position: relative;
 }
 
@@ -21,15 +19,3 @@
     gap: 0;
   }
 }
-
-.copyright {
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 17px;
-  color: color('white');
-}
-
-.logos {
-  display: flex;
-  gap: 8px;
-}

src/components/global/Footer/index.tsx

@@ -1,32 +1,41 @@
+import { color, Flex, Typography } from '@sipe-team/side';
+
 import Layout from '@/components/atoms/Layout';
 import SocialIconLink from '@/components/molecules/SocialIconLink';
 
 import styles from './index.module.scss';
 
 function Footer() {
   return (
-    <footer className={styles.wrapper}>
-      <Layout>
-        <div className={styles.group}>
-          <div className={styles.copyright}>All rights reserved ⓒ SIPE</div>
-          <div className={styles.logos}>
-            <SocialIconLink
-              type="INSTAGRAM"
-              url="https://www.instagram.com/sipe_team"
-            />
-            <SocialIconLink type="GITHUB" url="https://github.com/sipe-team" />
-            <SocialIconLink
-              type="YOUTUBE"
-              url="https://www.youtube.com/@sipe_team"
-            />
-            <SocialIconLink
-              type="LINKEDIN"
-              url="https://www.linkedin.com/company/sipe.team"
-            />
+    <Flex asChild className={styles.wrapper} direction="row" justify="center">
+      <footer>
+        <Layout>
+          <div className={styles.group}>
+            <Typography color={color.white} size={12} weight="medium">
+              All rights reserved ⓒ SIPE
+            </Typography>
+            <Flex direction="row" gap="8px">
+              <SocialIconLink
+                type="INSTAGRAM"
+                url="https://www.instagram.com/sipe_team"
+              />
+              <SocialIconLink
+                type="GITHUB"
+                url="https://github.com/sipe-team"
+              />
+              <SocialIconLink
+                type="YOUTUBE"
+                url="https://www.youtube.com/@sipe_team"
+              />
+              <SocialIconLink
+                type="LINKEDIN"
+                url="https://www.linkedin.com/company/sipe.team"
+              />
+            </Flex>
           </div>
-        </div>
-      </Layout>
-    </footer>
+        </Layout>
+      </footer>
+    </Flex>
   );
 }
 

src/components/global/Navigation/index.module.scss

@@ -1,9 +1,6 @@
 .wrapper {
   background-color: color('black');
   width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   position: fixed;
   top: 0;
   left: 0;
@@ -20,10 +17,6 @@
 
     .header {
       width: 100%;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
       height: 64px;
 
       @include desktop {
@@ -32,8 +25,6 @@
     }
 
     .menuWrapper {
-      display: flex;
-      align-items: center;
       width: initial;
 
       @include mobile-and-tablet {
@@ -52,10 +43,8 @@
 
       .menuList {
         width: 100%;
-        display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 12px;
         padding-bottom: 20px;
 
         @include mobile-and-tablet {