Merge branch 'sor4chi/strict-auth-env' of https://github.com/saitamau…

…-maximum/meline into sor4chi/strict-auth-env

client/.storybook/main.ts

@@ -1,4 +1,7 @@
 import type { StorybookConfig } from "@storybook/react-vite";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { mergeConfig } from "vite"
+import path from "path";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -15,5 +18,16 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
+  viteFinal: async (config) => {
+    return mergeConfig(config, {
+      plugins: [vanillaExtractPlugin()],
+      resolve: {
+        alias: {
+          "@": path.resolve(__dirname, "../src"),
+        },
+        base: "./",
+      },
+    });
+  }
 };
 export default config;

client/src/styles/__stories__/Theme.tsx

@@ -0,0 +1,28 @@
+import "../global.css";
+import { vars } from "../theme.css";
+
+const styles = {
+  background: vars.color.gray[1],
+  color: vars.color.gray[12],
+  padding: "16px",
+  border: `1px solid ${vars.color.gray[6]}`,
+  borderRadius: "8px",
+  width: "fit-content",
+};
+
+const LightWrapper = ({ children }: { children: React.ReactNode }) => (
+  <div className="light" style={styles}>
+    {children}
+  </div>
+);
+
+const DarkWrapper = ({ children }: { children: React.ReactNode }) => (
+  <div className="dark" style={styles}>
+    {children}
+  </div>
+);
+
+export const Theme = {
+  Light: LightWrapper,
+  Dark: DarkWrapper,
+};

client/src/styles/__stories__/color-tokens.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta } from "@storybook/react";
+import { vars } from "../theme.css";
+import { Theme } from "./Theme";
+
+const meta = {
+  title: "Styles/Color Tokens",
+} satisfies Meta;
+
+export default meta;
+
+const ColorTokens = () => (
+  <>
+    <h1>Color Tokens</h1>
+    <div
+      style={{
+        display: "flex",
+        gap: "32px",
+        padding: "32px",
+      }}
+    >
+      {Object.entries(vars.color.gray).map(([key, value]) => (
+        <div
+          key={key}
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: "12px",
+          }}
+        >
+          <div
+            key={key}
+            style={{
+              backgroundColor: value,
+              height: "48px",
+              width: "48px",
+              borderRadius: "50%",
+              border: `1px solid ${vars.color.gray[6]}`,
+            }}
+          />
+          <code
+            style={{
+              fontSize: "0.75rem",
+              color: vars.color.gray[12],
+            }}
+          >
+            Gray {key}
+          </code>
+        </div>
+      ))}
+    </div>
+  </>
+);
+
+export const Light = () => (
+  <Theme.Light>
+    <ColorTokens />
+  </Theme.Light>
+);
+
+export const Dark = () => (
+  <Theme.Dark>
+    <ColorTokens />
+  </Theme.Dark>
+);

server/domain/entity/user.go

@@ -14,12 +14,12 @@ type User struct {
 	DeletedAt  time.Time `json:"deleted_at"`
 }
 
-func NewUserEntity(id uint64, providerID, name, ImageURL string, createdAt, updatedAt, deletedAt time.Time) *User {
+func NewUserEntity(id uint64, providerID, name, imageURL string, createdAt, updatedAt, deletedAt time.Time) *User {
 	return &User{
 		ID:         id,
 		ProviderID: providerID,
 		Name:       name,
-		ImageURL:   ImageURL,
+		ImageURL:   imageURL,
 		CreatedAt:  createdAt,
 		UpdatedAt:  updatedAt,
 		DeletedAt:  deletedAt,