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

.github/workflows/ci.yml

@@ -14,8 +14,8 @@ env:
     .yarn/install-state.gz
     .pnp.*
   CACHED_BUILD_PATHS: ${{ github.workspace }}/.next
-  DEFAULT_NODE_VERSION: "v20.12.2"
-  DEFAULT_YARN_VERSION: "4.5.0"
+  DEFAULT_NODE_VERSION: 'v20.12.2'
+  DEFAULT_YARN_VERSION: '4.5.0'
 
 jobs:
   job_install_dependencies:
@@ -28,6 +28,8 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ env.DEFAULT_NODE_VERSION }}
+          registry-url: 'https://npm.pkg.github.com'
+          scope: '@sipe-team'
 
       - name: Set up Yarn
         run: |
@@ -57,6 +59,8 @@ jobs:
       - name: Install dependencies
         if: steps.cache_dependencies.outputs.cache-hit != 'true'
         run: yarn install --immutable
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
     outputs:
       dependency_cache_key: ${{ steps.compute_lockfile_hash.outputs.hash }}
@@ -87,3 +91,5 @@ jobs:
       - name: Check Lint
         if: ${{ github.event_name == 'pull_request' }}
         run: yarn run eslint $(git diff --name-only --diff-filter=d origin/main | grep  -E '(.js$|.jsx|.ts$|.tsx$)')
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -37,5 +37,12 @@ dist-ssr
 
 # google spreadsheet data
 src/db/*.json
+
+# playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
 .vercel
 
+.env*.local

.yarnrc.yml

@@ -2,6 +2,12 @@ compressionLevel: mixed
 
 enableGlobalCache: false
 
+npmScopes:
+  sipe-team:
+    npmRegistryServer: 'https://npm.pkg.github.com'
+    npmAuthToken: "${NODE_ENV==='local' ? '' : NODE_AUTH_TOKEN}"
+
+
 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) : ''}
-      </div>
-      <div className={styles.text}>일</div>
-      <div className={styles.time}>
-        {isRecruiting ? formattedTime(hours) : ''}
-      </div>
-      <div className={styles.text}>시간</div>
-      <div className={styles.time}>
-        {isRecruiting ? formattedTime(minutes) : ''}
-      </div>
-      <div className={styles.text}>분</div>
-      <div className={styles.time}>
-        {isRecruiting ? formattedTime(seconds) : ''}
-      </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>
   );
 }