feat: sass setting (#3)

* feat: sass setting

- stylelint 적용
- sass 적용
- sanitize.css 적용
- app 디렉터리 -> src 밑으로 이동

* chore: ci에 stylelint 추가 및 typescript 버전 다운그레이드

.github/workflows/ci.yml

@@ -21,7 +21,7 @@ jobs:
 
       - name: Check Lint
         if: ${{ github.event_name == 'pull_request' }}
-        run: yarn lint
+        run: yarn lint && yarn stylelint
 
       - name: Check Unit Test
         run: yarn test:coverage

.stylelintrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  extends: [
+    'stylelint-config-standard',
+    'stylelint-config-standard-scss',
+    'stylelint-config-recommended-scss',
+  ],
+  rules: {
+    'at-rule-no-unknown': null,
+    'scss/at-rule-no-unknown': true,
+    'selector-class-pattern': null,
+  },
+};

.vscode/settings.json

@@ -6,6 +6,18 @@
   "eslint.nodePath": ".yarn/sdks",
   "typescript.tsdk": ".yarn/sdks/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false,
+  "editor.formatOnSave": false,
+  "stylelint.validate": [
+    "scss",
+    "css"
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.stylelint": "explicit",
+    "source.fixAll.eslint": "explicit"
+  },
   "[typescriptreact]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   },

.yarn/sdks/eslint/lib/unsupported-api.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint/use-at-your-own-risk
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real eslint/use-at-your-own-risk your application uses
+module.exports = absRequire(`eslint/use-at-your-own-risk`);

.yarn/sdks/eslint/package.json

@@ -1,6 +1,14 @@
 {
   "name": "eslint",
-  "version": "8.18.0-sdk",
+  "version": "8.56.0-sdk",
   "main": "./lib/api.js",
-  "type": "commonjs"
+  "type": "commonjs",
+  "bin": {
+    "eslint": "./bin/eslint.js"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./lib/api.js",
+    "./use-at-your-own-risk": "./lib/unsupported-api.js"
+  }
 }

.yarn/sdks/typescript/lib/typescript.js

@@ -11,10 +11,10 @@ const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
-    // Setup the environment to be able to require typescript/lib/typescript.js
+    // Setup the environment to be able to require typescript
     require(absPnpApiPath).setup();
   }
 }
 
-// Defer to the real typescript/lib/typescript.js your application uses
-module.exports = absRequire(`typescript/lib/typescript.js`);
+// Defer to the real typescript your application uses
+module.exports = absRequire(`typescript`);

.yarn/sdks/typescript/package.json

@@ -1,6 +1,10 @@
 {
   "name": "typescript",
-  "version": "4.7.4-sdk",
+  "version": "5.3.2-sdk",
   "main": "./lib/typescript.js",
-  "type": "commonjs"
+  "type": "commonjs",
+  "bin": {
+    "tsc": "./bin/tsc",
+    "tsserver": "./bin/tsserver"
+  }
 }

next.config.js

@@ -1,9 +1,23 @@
+const path = require('path');
+
+const isProd = process.env.NODE_ENV === 'production';
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
     ignoreDuringBuilds: true,
   },
+  output: 'standalone',
+  compiler: {
+    reactRemoveProperties: isProd && {
+      properties: ['^data-test'],
+    },
+    removeConsole: isProd,
+  },
+  sassOptions: {
+    includePaths: [path.join(__dirname, 'styles')],
+  },
   swcMinify: true,
   experimental: {
     typedRoutes: true,

package.json

@@ -9,6 +9,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "eslint '**/*.{js,jsx,ts,tsx}' --fix",
+    "stylelint": "stylelint **/*.scss",
     "test:unit": "jest",
     "test:watch": "jest --watch",
     "test:watchAll": "jest --watchAll",
@@ -28,7 +29,8 @@
   "dependencies": {
     "next": "14.0.4",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "sanitize.css": "13.0.0"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "14.0.4",
@@ -58,9 +60,17 @@
     "eslint-plugin-unused-imports": "3.0.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
+    "postcss": "8.4.32",
+    "postcss-scss": "4.0.9",
     "react-test-renderer": "18.2.0",
+    "sass": "1.69.6",
     "start-server-and-test": "1.14.0",
-    "typescript": "5.3.2"
+    "stylelint": "15",
+    "stylelint-config-recommended-scss": "13",
+    "stylelint-config-standard": "34",
+    "stylelint-config-standard-scss": "11",
+    "stylelint-scss": "5",
+    "typescript": "5.2.2"
   },
   "packageManager": "[email protected]"
 }

app/globals.css → src/app/globals.css

@@ -1,14 +1,12 @@
 :root {
   --max-width: 1100px;
   --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
+  --font-mono: ui-monospace, menlo, monaco, 'Cascadia Mono', 'Segoe UI Mono',
     'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
     'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
-
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
-
   --primary-glow: conic-gradient(
     from 180deg at 50% 50%,
     #16abff33 0deg,
@@ -18,10 +16,9 @@
     transparent 360deg
   );
   --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
+    rgb(255 255 255 / 100%),
+    rgb(255 255 255 / 0%)
   );
-
   --tile-start-rgb: 239, 245, 249;
   --tile-end-rgb: 228, 232, 233;
   --tile-border: conic-gradient(
@@ -33,7 +30,6 @@
     #00000010,
     #00000080
   );
-
   --callout-rgb: 238, 240, 241;
   --callout-border-rgb: 172, 175, 176;
   --card-rgb: 180, 185, 188;
@@ -45,15 +41,13 @@
     --foreground-rgb: 255, 255, 255;
     --background-start-rgb: 0, 0, 0;
     --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+    --primary-glow: radial-gradient(rgb(1 65 255 / 40%), rgb(1 65 255 / 0%));
     --secondary-glow: linear-gradient(
       to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
+      rgb(1 65 255 / 0%),
+      rgb(1 65 255 / 0%),
+      rgb(1 65 255 / 30%)
     );
-
     --tile-start-rgb: 2, 13, 46;
     --tile-end-rgb: 2, 5, 19;
     --tile-border: conic-gradient(
@@ -65,7 +59,6 @@
       #ffffff10,
       #ffffff80
     );
-
     --callout-rgb: 20, 20, 20;
     --callout-border-rgb: 108, 108, 108;
     --card-rgb: 100, 100, 100;

app/layout.tsx → src/app/layout.tsx

@@ -1,3 +1,4 @@
+import 'src/styles/global.scss';
 import './globals.css';
 
 export const metadata = {

app/page.module.css → src/app/page.module.css

@@ -29,8 +29,8 @@
   position: relative;
   margin: 0;
   padding: 1rem;
-  background-color: rgba(var(--callout-rgb), 0.5);
-  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
+  background-color: rgb(var(--callout-rgb) 0.5);
+  border: 1px solid rgb(var(--callout-border-rgb) 0.3);
   border-radius: var(--border-radius);
 }
 
@@ -49,8 +49,8 @@
 .card {
   padding: 1rem 1.2rem;
   border-radius: var(--border-radius);
-  background: rgba(var(--card-rgb), 0);
-  border: 1px solid rgba(var(--card-border-rgb), 0);
+  background: rgb(var(--card-rgb) 0);
+  border: 1px solid rgb(var(--card-border-rgb) 0);
   transition: background 200ms, border 200ms;
 }
 
@@ -107,11 +107,12 @@
 .logo {
   position: relative;
 }
+
 /* Enable hover only on non-touch devices */
 @media (hover: hover) and (pointer: fine) {
   .card:hover {
-    background: rgba(var(--card-rgb), 0.1);
-    border: 1px solid rgba(var(--card-border-rgb), 0.15);
+    background: rgb(var(--card-rgb) 0.1);
+    border: 1px solid rgb(var(--card-border-rgb) 0.15);
   }
 
   .card:hover span {
@@ -126,7 +127,7 @@
 }
 
 /* Mobile */
-@media (max-width: 700px) {
+@media (width <= 700px) {
   .content {
     padding: 4rem;
   }
@@ -177,11 +178,11 @@
     padding: 2rem 1rem 1.4rem;
     border-radius: 0;
     border: none;
-    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
+    border-bottom: 1px solid rgb(var(--callout-border-rgb) 0.25);
     background: linear-gradient(
       to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
+      rgb(var(--background-start-rgb) 1),
+      rgb(var(--callout-rgb) 0.5)
     );
     background-clip: padding-box;
     backdrop-filter: blur(24px);
@@ -203,7 +204,7 @@
 }
 
 /* Tablet and Smaller Desktop */
-@media (min-width: 701px) and (max-width: 1120px) {
+@media (width >= 701px) and (width <= 1120px) {
   .grid {
     grid-template-columns: repeat(2, 50%);
   }
@@ -223,6 +224,7 @@
   from {
     transform: rotate(360deg);
   }
+
   to {
     transform: rotate(0deg);
   }

src/styles/global.scss

@@ -0,0 +1,34 @@
+@import '~sanitize.css';
+@import "./variables";
+@import "./mixin/text";
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+div,
+input,
+textarea,
+button,
+select,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+button {
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}

src/styles/main.scss

@@ -0,0 +1,3 @@
+@import "./mixin/text";
+@import "./mixin/functions";
+@import "./transition";

src/styles/mixin/functions.scss

@@ -0,0 +1,44 @@
+@function str-split($string, $separator) {
+  $split-arr: ();
+  $index: string.index($string, $separator);
+
+  @while $index != null {
+    $item: string.slice($string, 1, $index - 1);
+    $split-arr: list.append($split-arr, $item);
+    $string: string.slice($string, $index + 1);
+    $index: string.index($string, $separator);
+  }
+
+  $split-arr: list.append($split-arr, $string);
+
+  @return $split-arr;
+}
+
+@function color($code) {
+  @if $code == "" {
+    @return currentColor;
+  } @else if $code == "none" {
+    @return none;
+  } @else if $code == "transparent" {
+    @return transparent;
+  } @else if length(str-split($code, "/")) == 2 {
+    $list: str-split($code, "/");
+    $key: list.nth($list, 1) + "-" + list.nth($list, 2);
+    $code: $key;
+  } @else {
+    $list: str-split($code, ".");
+    $key: "";
+
+    @if length($list) == 2 {
+      $key: list.nth($list, 1) + "-" + list.nth($list, 2);
+    } @else if length($list) == 3 {
+      $key: list.nth($list, 1) + "-" + list.nth($list, 2) + "-" + list.nth($list, 3);
+    } @else {
+      $key: $code;
+    }
+
+    $code: $key;
+  }
+
+  @return var(-- + $code);
+}