scss 설치 및 stylelint 적용

.eslintignore

@@ -0,0 +1 @@
+next.config.js

.eslintrc.json

@@ -58,8 +58,8 @@
   "rules": {
     "quotes": [
       "error",
-      "double"
-    ], // 모든 따옴표를 큰따옴표(")로 강제합니다.
+      "single"
+    ], // 모든 따옴표를 작은 따옴표(')로 강제합니다.
     "@typescript-eslint/quotes": "off", // TypeScript 코드에 대해 따옴표 규칙을 비활성화합니다.
     "@next/next/no-html-link-for-pages": "off", // 이 규칙은 HTML <a> 태그를 사용하여 내부 페이지를 링크하는 것을 금지합니다. "off"는 이 규칙을 비활성화합니다.
     "@typescript-eslint/no-use-before-define": [

.stylelintrc.json

@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "stylelint-config-standard-scss",
+    "stylelint-config-property-sort-order-smacss"
+  ],
+  "rules": {
+    "selector-class-pattern": "^[a-z][a-zA-Z0-9]+$"
+  }
+}

CODEOWNERS

@@ -0,0 +1 @@
+* @wookki @seoye0ng

next.config.js

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const path = require('path')
 
-module.exports = nextConfig
+module.exports = {
+  sassOptions: {
+    includePaths: [path.join(__dirname, 'styles')],
+  },
+}

package.json

@@ -55,7 +55,11 @@
     "eslint-plugin-storybook": "^0.6.15",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "sass": "^1.69.6",
     "storybook": "^7.6.6",
+    "stylelint": "^16.1.0",
+    "stylelint-config-property-sort-order-smacss": "^10.0.0",
+    "stylelint-config-standard-scss": "^12.0.0",
     "ts-node": "^10.9.2",
     "typescript": "^5"
   }

src/__tests__/page.test.tsx

@@ -1,13 +1,13 @@
-import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
 
-import Page from "../app/page";
+import Page from '../app/page';
 
-describe("Page", () => {
-  it("renders a heading", () => {
+describe('Page', () => {
+  it('renders a heading', () => {
     render(<Page />);
 
-    const heading = screen.getByRole("heading", { level: 1 });
+    const heading = screen.getByRole('heading', { level: 1 });
 
     expect(heading).toBeInTheDocument();
   });

src/app/layout.tsx

@@ -1,25 +1,25 @@
-import type { Metadata } from "next";
+import type { Metadata } from 'next';
 
-import localFont from "next/font/local";
+import localFont from 'next/font/local';
 
-import "./globals.css";
+import './globals.css';
 
-import StoreProvider from "@providers/StoreProvider";
-import TanstackQueryProvider from "@providers/TanstackQueryProvider";
+import StoreProvider from '@providers/StoreProvider';
+import TanstackQueryProvider from '@providers/TanstackQueryProvider';
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'Create Next App',
+  description: 'Generated by create next app',
 };
 
 const pretendard = localFont({
   src: [{
-    path: "./font/PretendardVariable.woff2",
+    path: './font/PretendardVariable.woff2',
   },
   {
-    path: "./font/PretendardVariable.ttf",
+    path: './font/PretendardVariable.ttf',
   }],
-  display: "fallback",
+  display: 'fallback',
 });
 
 export default function RootLayout({

src/app/page.tsx

@@ -1,4 +1,4 @@
-import Link from "next/link";
+import Link from 'next/link';
 
 export default function Home() {
   return (

src/components/query/HydrateClient.tsx

@@ -1,6 +1,6 @@
-"use client";
+'use client';
 
-import { Hydrate, HydrateProps } from "@tanstack/react-query";
+import { Hydrate, HydrateProps } from '@tanstack/react-query';
 
 function HydrateClient(props: HydrateProps) {
   return <Hydrate {...props} />;

src/lib/getQueryClient.ts

@@ -1,6 +1,6 @@
-import { cache } from "react";
+import { cache } from 'react';
 
-import { QueryClient } from "@tanstack/query-core";
+import { QueryClient } from '@tanstack/query-core';
 
 const getQueryClient = cache(() => { return new QueryClient(); });
 export default getQueryClient;

src/providers/StoreProvider.tsx

@@ -1,9 +1,9 @@
-"use client";
+'use client';
 
-import { useRef } from "react";
-import { Provider } from "react-redux";
+import { useRef } from 'react';
+import { Provider } from 'react-redux';
 
-import { makeStore, AppStore } from "@stores/store";
+import { makeStore, AppStore } from '@stores/store';
 
 function StoreProvider({
   children,

src/providers/TanstackQueryProvider.tsx

@@ -1,9 +1,9 @@
-"use client";
+'use client';
 
-import { useState } from "react";
+import { useState } from 'react';
 
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 function TanstackQueryProvider({ children }: { children: React.ReactNode }) {
   const [client] = useState(new QueryClient());

src/stores/hooks.ts

@@ -1,7 +1,7 @@
-import type { RootState, AppDispatch, AppStore } from "./store";
-import type { TypedUseSelectorHook } from "react-redux";
+import type { RootState, AppDispatch, AppStore } from './store';
+import type { TypedUseSelectorHook } from 'react-redux';
 
-import { useDispatch, useSelector, useStore } from "react-redux";
+import { useDispatch, useSelector, useStore } from 'react-redux';
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch: () => AppDispatch = useDispatch;

src/stores/store.ts

@@ -1,4 +1,4 @@
-import { configureStore } from "@reduxjs/toolkit";
+import { configureStore } from '@reduxjs/toolkit';
 
 export const makeStore = () => {
   return configureStore({
@@ -9,5 +9,5 @@ export const makeStore = () => {
 // Infer the type of makeStore
 export type AppStore = ReturnType<typeof makeStore>;
 // Infer the `RootState` and `AppDispatch` types from the store itself
-export type RootState = ReturnType<AppStore["getState"]>;
-export type AppDispatch = AppStore["dispatch"];
+export type RootState = ReturnType<AppStore['getState']>;
+export type AppDispatch = AppStore['dispatch'];

src/stories/Button.stories.ts

@@ -1,20 +1,20 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from '@storybook/react';
 
-import { Button } from "./Button";
+import { Button } from './Button';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: "Example/Button",
+  title: 'Example/Button',
   component: Button,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: "centered",
+    layout: 'centered',
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
-    backgroundColor: { control: "color" },
+    backgroundColor: { control: 'color' },
   },
 } satisfies Meta<typeof Button>;
 
@@ -25,26 +25,26 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   args: {
     primary: true,
-    label: "Button",
+    label: 'Button',
   },
 };
 
 export const Secondary: Story = {
   args: {
-    label: "Button",
+    label: 'Button',
   },
 };
 
 export const Large: Story = {
   args: {
-    size: "large",
-    label: "Button",
+    size: 'large',
+    label: 'Button',
   },
 };
 
 export const Small: Story = {
   args: {
-    size: "small",
-    label: "Button",
+    size: 'small',
+    label: 'Button',
   },
 };

src/stories/Button.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import "./button.css";
+import React from 'react';
+import './button.css';
 
 interface ButtonProps {
   /**
@@ -13,7 +13,7 @@ interface ButtonProps {
   /**
    * How large should the button be?
    */
-  size?: "small" | "medium" | "large";
+  size?: 'small' | 'medium' | 'large';
   /**
    * Button contents
    */
@@ -29,16 +29,16 @@ interface ButtonProps {
  */
 export function Button({
   primary = false,
-  size = "medium",
+  size = 'medium',
   backgroundColor,
   label,
   ...props
 }: ButtonProps) {
-  const mode = primary ? "storybook-button--primary" : "storybook-button--secondary";
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
   return (
     <button
       type="button"
-      className={["storybook-button", `storybook-button--${size}`, mode].join(" ")}
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
       {...props}
     >
       {label}

src/stories/Header.stories.ts

@@ -1,15 +1,15 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from '@storybook/react';
 
-import { Header } from "./Header";
+import { Header } from './Header';
 
 const meta = {
-  title: "Example/Header",
+  title: 'Example/Header',
   component: Header,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: "fullscreen",
+    layout: 'fullscreen',
   },
 } satisfies Meta<typeof Header>;
 
@@ -19,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 export const LoggedIn: Story = {
   args: {
     user: {
-      name: "Jane Doe",
+      name: 'Jane Doe',
     },
   },
 };

src/stories/Header.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React from 'react';
 
-import { Button } from "./Button";
-import "./header.css";
+import { Button } from './Button';
+import './header.css';
 
 type User = {
   name: string;
@@ -44,7 +44,7 @@ export function Header({
             <>
               <span className="welcome">
                 Welcome,
-                {" "}
+                {' '}
                 <b>{user.name}</b>
                 !
               </span>

src/stories/Page.stories.ts

@@ -1,15 +1,15 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from '@storybook/react';
 
-import { within, userEvent, expect } from "@storybook/test";
+import { within, userEvent, expect } from '@storybook/test';
 
-import { Page } from "./Page";
+import { Page } from './Page';
 
 const meta = {
-  title: "Example/Page",
+  title: 'Example/Page',
   component: Page,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: "fullscreen",
+    layout: 'fullscreen',
   },
 } satisfies Meta<typeof Page>;
 
@@ -22,13 +22,13 @@ export const LoggedOut: Story = {};
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const loginButton = canvas.getByRole("button", { name: /Log in/i });
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
     await expect(loginButton).toBeInTheDocument();
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
     await userEvent.click(loginButton);
     await expect(loginButton).not.toBeInTheDocument();
 
-    const logoutButton = canvas.getByRole("button", { name: /Log out/i });
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
     await expect(logoutButton).toBeInTheDocument();
   },
 };