Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

feat: vanilla-extract 추가 #7

Merged
merged 2 commits into from
Feb 24, 2025
Merged

feat: vanilla-extract 추가 #7

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cbb0ff6
feat: vanilla-extract 추가
qkrdmstlr3 Feb 23, 2025
cecfb2e
update pnpm
qkrdmstlr3 Feb 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions apps/web/next.config.js
View file
Open in desktop

This file was deleted.

9 changes: 9 additions & 0 deletions apps/web/next.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
const { createVanillaExtractPlugin } = require("@vanilla-extract/next-plugin");
const withVanillaExtract = createVanillaExtractPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {};

const config = withVanillaExtract(nextConfig);

export default config;
4 changes: 3 additions & 1 deletion apps/web/package.json
View file
Open in desktop
Copy link
Member

@banhogu banhogu Feb 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

classNames or clsx도 설치해야되지 않나

Copy link
Collaborator

@hjy0951 hjy0951 Feb 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p2) recipe 활용하거나 배열로 합성 가능해서 크게 상관없을수도 있겠다는 생각도 드는데, 요소에 id나 class를 사용하는 경우 때문에 그런가??

Copy link
Member

@banhogu banhogu Feb 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p2) recipe 사용법 찾아보니까, 설치 안해도 되겠다.
근데 useState 같은 상태에 따라 스타일이 동적으로 변하게 될 경우

// styles.css.ts
export const button = recipe({
  base: { padding: '8px 16px' },
  variants: {
    size: {
      large: { fontSize: '20px' },
      small: { fontSize: '12px' },
    },
    isActive: {
      true: { backgroundColor: 'blue', color: 'white' },
      false: { backgroundColor: 'gray', color: 'black' },
    },
  },
  defaultVariants: { isActive: false },
});

export default function DynamicButton() {
  const [isActive, setIsActive] = useState(false);

  return (
    <button
      className={button({ size: 'large', isActive })}
      onClick={() => setIsActive((prev) => !prev)}
    >
      버튼
    </button>
  );
}

이렇게 작성될텐데, 이러면 스타일에 상태 전달을 해야 돼서, 스타일쪽에서 넘겨 받는 상태값이 많아질수록 변수 관리가
복잡해지고, 버튼처럼 공통 컴포넌트로 만든다고 해도 각자 작업하는 컴포넌트에서 사용할 때 넘겨주는 useState 변수명을 팀 내 컨벤션으로 다같이 맞춰야 하는건가?
그리고 매번 recipe를 작성 하는건 공수가 크니까 디자인팀에도 최대한 컴포넌트 재사용 할 수 있게 일관된 디자인 가이드로 신경써서 만들어달라고 해야되겠네 (사실 잘 모름 맞나?)

@hjy0951 @thwjddlqslek @qkrdmstlr3

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

음 지금 당장은 상태에 따른 스타일링이 많이 들어갈까 싶기는 한데, 내일 같이 이야기해봐도 좋겠다

나는 사실 버튼이나 타이포 등등 공통 컴포넌트는 상태에 따른 스타일링이 어느 정도 범위가 정해져있다고 생각해서 크게 문제 없을 거라고 생각했었어!

우선 변수명 같은 경우에는 크게 컨벤션을 정하거나 할 필요는 없는 것 같은게 객체에 key-value로 값을 넣어주는거라 { isActive: isClicked } 같이 이런 방식으로 넣어주면 괜찮지 않을까?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

그리고 매번 recipe를 작성 하는건 공수가 크니까 디자인팀에도 최대한 컴포넌트 재사용 할 수 있게 일관된 디자인 가이드로 신경써서 만들어달라고 해야되겠네 (사실 잘 모름 맞나?)

나는 초기 단계에서 재사용성을 고려하긴 어려울 것 같고, 우리가 맞춰야 하지 않을까라는 생각이야

Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"type": "module",
"private": true,
"scripts": {
"dev": "next dev --turbopack --port 3003",
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint --max-warnings 0",
Expand All @@ -13,6 +13,7 @@
"dependencies": {
"@repo/shared": "workspace:*",
"@repo/ui": "workspace:*",
"@vanilla-extract/css": "^1.17.1",
"next": "^15.1.6",
"react": "^19.0.0",
"react-dom": "^19.0.0"
Expand All @@ -23,6 +24,7 @@
"@types/node": "^22",
"@types/react": "19.0.8",
"@types/react-dom": "19.0.3",
"@vanilla-extract/next-plugin": "^2.4.10",
"eslint": "^9.19.0",
"typescript": "5.7.3"
}
Expand Down
12 changes: 10 additions & 2 deletions apps/web/src/components/test/Test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
import { useGetTestData } from "@/hooks/api/mocks/useGetTestData";
import { usePostTestData } from "@/hooks/api/mocks/usePostTestData";
import React, { useState, useCallback, useMemo } from "react";
import * as Style from "./styles.css";
import "@/styles/GlobalStyle.css";

const Test = () => {
const [currentIndex, setCurrentIndex] = useState(1); // 현재 데이터 인덱스
Expand Down Expand Up @@ -48,8 +50,14 @@ const Test = () => {
<span>{testData?.title}</span>
)}
</div>
<button onClick={handleClick}>다음글</button>
<button onClick={handleSubmit} disabled={isCreating}>
<button className={Style.nextButton} onClick={handleClick}>
다음글
</button>
<button
className={Style.addButton}
onClick={handleSubmit}
disabled={isCreating}
>
{isCreating ? "업로드 중..." : "새 데이터 추가"}
</button>
</div>
Expand Down
28 changes: 28 additions & 0 deletions apps/web/src/components/test/styles.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { style, styleVariants } from "@vanilla-extract/css";

const base = style({ color: "white" });
export const variant = styleVariants({
primary: [base, { background: "blue" }],
secondary: [base, { background: "red" }],
});

// 배열로 합성 가능
export const nextButton = style([
variant.primary,
{
padding: "8px 14px",
borderRadius: 50,
backgroundColor: "none",
border: "1px solid black",
},
]);

export const addButton = style([
variant.secondary,
{
padding: "8px 14px",
borderRadius: 50,
backgroundColor: "none",
border: "1px solid black",
},
]);
5 changes: 5 additions & 0 deletions apps/web/src/styles/GlobalStyle.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { globalStyle } from "@vanilla-extract/css";

globalStyle("html, body", {
backgroundColor: "rgb(100,100,100)",
});
3 changes: 2 additions & 1 deletion apps/web/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
"@components/*": ["src/components/*"],
"@constants/*": ["src/constants/*"],
"@hooks/*": ["src/hooks/*"],
"@utils/*": ["src/utils/*"]
"@utils/*": ["src/utils/*"],
"@styles/*": ["src/styles/*"]
}
},
"include": [
Expand Down
Loading