tailwind fix

.gitignore

@@ -4,4 +4,6 @@
 
 node_modules
 
-serviceAccountKey.json
+serviceAccountKey.json
+
+.DS_Store

supabase/.gitignore

@@ -0,0 +1,4 @@
+# Supabase
+.branches
+.temp
+.env

supabase/config.toml

@@ -0,0 +1,161 @@
+# A string used to distinguish different Supabase projects on the same host. Defaults to the
+# working directory name when running `supabase init`.
+project_id = "techpicks"
+
+[api]
+enabled = true
+# Port to use for the API URL.
+port = 54321
+# Schemas to expose in your API. Tables, views and stored procedures in this schema will get API
+# endpoints. public and storage are always included.
+schemas = ["public", "storage", "graphql_public"]
+# Extra schemas to add to the search_path of every request. public is always included.
+extra_search_path = ["public", "extensions"]
+# The maximum number of rows returns from a view, table, or stored procedure. Limits payload size
+# for accidental or malicious requests.
+max_rows = 1000
+
+[db]
+# Port to use for the local database URL.
+port = 54322
+# Port used by db diff command to initialize the shadow database.
+shadow_port = 54320
+# The database major version to use. This has to be the same as your remote database's. Run `SHOW
+# server_version;` on the remote database to check.
+major_version = 15
+
+[db.pooler]
+enabled = false
+# Port to use for the local connection pooler.
+port = 54329
+# Specifies when a server connection can be reused by other clients.
+# Configure one of the supported pooler modes: `transaction`, `session`.
+pool_mode = "transaction"
+# How many server connections to allow per user/database pair.
+default_pool_size = 20
+# Maximum number of client connections allowed.
+max_client_conn = 100
+
+[realtime]
+enabled = true
+# Bind realtime via either IPv4 or IPv6. (default: IPv6)
+# ip_version = "IPv6"
+# The maximum length in bytes of HTTP request headers. (default: 4096)
+# max_header_length = 4096
+
+[studio]
+enabled = true
+# Port to use for Supabase Studio.
+port = 54323
+# External URL of the API server that frontend connects to.
+api_url = "http://127.0.0.1"
+# OpenAI API Key to use for Supabase AI in the Supabase Studio.
+openai_api_key = "env(OPENAI_API_KEY)"
+
+# Email testing server. Emails sent with the local dev setup are not actually sent - rather, they
+# are monitored, and you can view the emails that would have been sent from the web interface.
+[inbucket]
+enabled = true
+# Port to use for the email testing server web interface.
+port = 54324
+# Uncomment to expose additional ports for testing user applications that send emails.
+# smtp_port = 54325
+# pop3_port = 54326
+
+[storage]
+enabled = true
+# The maximum file size allowed (e.g. "5MB", "500KB").
+file_size_limit = "50MiB"
+
+[auth]
+enabled = true
+# The base URL of your website. Used as an allow-list for redirects and for constructing URLs used
+# in emails.
+site_url = "http://127.0.0.1:3000"
+# A list of *exact* URLs that auth providers are permitted to redirect to post authentication.
+additional_redirect_urls = ["https://127.0.0.1:3000"]
+# How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 (1 week).
+jwt_expiry = 3600
+# If disabled, the refresh token will never expire.
+enable_refresh_token_rotation = true
+# Allows refresh tokens to be reused after expiry, up to the specified interval in seconds.
+# Requires enable_refresh_token_rotation = true.
+refresh_token_reuse_interval = 10
+# Allow/disallow new user signups to your project.
+enable_signup = true
+# Allow/disallow testing manual linking of accounts
+enable_manual_linking = false
+
+[auth.email]
+# Allow/disallow new user signups via email to your project.
+enable_signup = true
+# If enabled, a user will be required to confirm any email change on both the old, and new email
+# addresses. If disabled, only the new email is required to confirm.
+double_confirm_changes = true
+# If enabled, users need to confirm their email address before signing in.
+enable_confirmations = false
+
+# Uncomment to customize email template
+# [auth.email.template.invite]
+# subject = "You have been invited"
+# content_path = "./supabase/templates/invite.html"
+
+[auth.sms]
+# Allow/disallow new user signups via SMS to your project.
+enable_signup = true
+# If enabled, users need to confirm their phone number before signing in.
+enable_confirmations = false
+# Template for sending OTP to users
+template = "Your code is {{ .Code }} ."
+
+# Use pre-defined map of phone number to OTP for testing.
+[auth.sms.test_otp]
+# 4152127777 = "123456"
+
+# This hook runs before a token is issued and allows you to add additional claims based on the authentication method used.
+[auth.hook.custom_access_token]
+# enabled = true
+# uri = "pg-functions://<database>/<schema>/<hook_name>"
+
+
+# Configure one of the supported SMS providers: `twilio`, `twilio_verify`, `messagebird`, `textlocal`, `vonage`.
+[auth.sms.twilio]
+enabled = false
+account_sid = ""
+message_service_sid = ""
+# DO NOT commit your Twilio auth token to git. Use environment variable substitution instead:
+auth_token = "env(SUPABASE_AUTH_SMS_TWILIO_AUTH_TOKEN)"
+
+# Use an external OAuth provider. The full list of providers are: `apple`, `azure`, `bitbucket`,
+# `discord`, `facebook`, `github`, `gitlab`, `google`, `keycloak`, `linkedin_oidc`, `notion`, `twitch`,
+# `twitter`, `slack`, `spotify`, `workos`, `zoom`.
+[auth.external.apple]
+enabled = false
+client_id = ""
+# DO NOT commit your OAuth provider secret to git. Use environment variable substitution instead:
+secret = "env(SUPABASE_AUTH_EXTERNAL_APPLE_SECRET)"
+# Overrides the default auth redirectUrl.
+redirect_uri = ""
+# Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
+# or any other third-party OIDC providers.
+url = ""
+
+[analytics]
+enabled = false
+port = 54327
+vector_port = 54328
+# Configure one of the supported backends: `postgres`, `bigquery`.
+backend = "postgres"
+
+# Experimental features may be deprecated any time
+[experimental]
+# Configures Postgres storage engine to use OrioleDB (S3)
+orioledb_version = ""
+# Configures S3 bucket URL, eg. <bucket_name>.s3-<region>.amazonaws.com
+s3_host = "env(S3_HOST)"
+# Configures S3 bucket region, eg. us-east-1
+s3_region = "env(S3_REGION)"
+# Configures AWS_ACCESS_KEY_ID for S3 bucket
+s3_access_key = "env(S3_ACCESS_KEY)"
+# Configures AWS_SECRET_ACCESS_KEY for S3 bucket
+s3_secret_key = "env(S3_SECRET_KEY)"

web/client/.eslintrc.json

@@ -3,9 +3,10 @@
     "next/core-web-vitals",
     "prettier",
     "plugin:import/recommended",
-    "plugin:import/warnings"
+    "plugin:import/warnings",
+    "plugin:tailwindcss/recommended"
   ],
-  "plugins": ["import", "unused-imports"],
+  "plugins": ["import", "unused-imports", "tailwindcss"],
   "rules": {
     "import/order": [
       "error",

web/client/package.json

@@ -52,6 +52,7 @@
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-simple-import-sort": "^12.0.0",
+    "eslint-plugin-tailwindcss": "^3.15.1",
     "eslint-plugin-unused-imports": "^3.1.0",
     "husky": "^8.0.0",
     "lint-staged": "^15.2.2",

web/client/src/app/(auth)/login/page.tsx

@@ -2,7 +2,7 @@ import { LoginForm } from "@/features/auth/LoginForm";
 
 export default function Login() {
   return (
-    <div className="w-[40%] mx-auto mt-20 p-4 border-2 border-gray-300 rounded-md shadow-md">
+    <div className="mx-auto mt-20 w-2/5 rounded-md border-2 border-gray-300 p-4 shadow-md">
       <h2 className="text-center text-2xl font-bold text-gray-800">
         Login Page
       </h2>

web/client/src/app/bookmark/page.tsx

@@ -1,6 +1,6 @@
 export default function Bookmark() {
   return (
-    <div className="w-[40%] mx-auto mt-20 p-4 border-2 border-gray-300 rounded-md shadow-md">
+    <div className="mx-auto mt-20 w-2/5 rounded-md border-2 border-gray-300 p-4 shadow-md">
       <h2 className="text-center text-2xl font-bold text-gray-800">
         Bookmark Page
       </h2>

web/client/src/app/favorite/page.tsx

@@ -1,6 +1,6 @@
 export default function Favorite() {
   return (
-    <div className="w-[40%] mx-auto mt-20 p-4 border-2 border-gray-300 rounded-md shadow-md">
+    <div className="mx-auto mt-20 w-2/5 rounded-md border-2 border-gray-300 p-4 shadow-md">
       <h2 className="text-center text-2xl font-bold text-gray-800">
         Favorite Page
       </h2>

web/client/src/app/feed/page.tsx

@@ -1,6 +1,6 @@
 export default function Feed() {
   return (
-    <div className="w-[40%] mx-auto mt-20 p-4 border-2 border-gray-300 rounded-md shadow-md">
+    <div className="mx-auto mt-20 w-2/5 rounded-md border-2 border-gray-300 p-4 shadow-md">
       <h2 className="text-center text-2xl font-bold text-gray-800">
         Feed Page
       </h2>

web/client/src/app/mypage/page.tsx

@@ -1,6 +1,6 @@
 export default function MyPage() {
   return (
-    <div className="w-[40%] mx-auto mt-20 p-4 border-2 border-gray-300 rounded-md shadow-md">
+    <div className="mx-auto mt-20 w-2/5 rounded-md border-2 border-gray-300 p-4 shadow-md">
       <h2 className="text-center text-2xl font-bold text-gray-800">
         Mypage Page
       </h2>

web/client/src/components/layout/BaseLayout/index.tsx

@@ -12,11 +12,11 @@ export const BaseLayout = ({ children }: { children: ReactNode }) => {
 
       <div className="h-16" />
       <main className="md:flex">
-        <div className="invisible md:visible fixed w-[200px] h-lvh">
+        <div className="invisible fixed h-lvh w-[200px] md:visible">
           <Sidebar />
         </div>
-        <div className="invisible md:visible w-[200px] mr-[10px]" />
-        <div className="md:w-[70%] w-[90%] mx-auto">{children}</div>
+        <div className="invisible mr-[10px] w-[200px] md:visible" />
+        <div className="mx-auto w-[90%] md:w-[70%]">{children}</div>
       </main>
     </div>
   );

web/client/src/components/layout/Header/index.tsx

@@ -9,9 +9,9 @@ import { NotLoggedMenu } from "./NotLoggedMenu";
 export async function Header() {
   const session = await getServerSession(authOptions);
   return (
-    <div className="z-50 fixed flex justify-between px-8 w-screen h-16 items-center bg-white border-b border-gray-300 shadow-md">
+    <div className="fixed z-50 flex h-16 w-screen items-center justify-between border-b border-gray-300 bg-white px-8 shadow-md">
       <Link href="/" className="cursor-pointer">
-        <h1 className="font-bold text-2xl">Tech Picks</h1>
+        <h1 className="text-2xl font-bold">Tech Picks</h1>
       </Link>
 
       <div className="flex">

web/client/src/components/layout/Sidebar/index.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 
 export function Sidebar() {
   return (
-    <div className="pb-12 w-full h-lvh border-r-2">
+    <div className="h-lvh w-full border-r-2 pb-12">
       <div className="space-y-4 py-4">
         <div className="px-4 py-2">
           <h2 className="mb-2 px-2 text-lg font-semibold tracking-tight">

web/client/src/components/ui/button.tsx

@@ -23,7 +23,7 @@ const buttonVariants = cva(
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
+        icon: "size-10",
       },
     },
     defaultVariants: {

web/client/src/components/ui/dialog.tsx

@@ -45,7 +45,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
+        <X className="size-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

web/client/src/features/articles/components/ArticleCard.tsx

@@ -17,23 +17,23 @@ export const ArticleCard: FC<ArticleCardProps> = ({
 }: ArticleCardProps) => {
   const imageUrl = useCheckImageExist(article.thumbnailURL);
   return (
-    <div className="cursor-pointer relative w-full rounded hover:opacity-30">
+    <div className="relative w-full cursor-pointer rounded hover:opacity-30">
       <div className="flex justify-around">
         <div className="w-[65%]">
-          <h3 className="w-full h-18 pt-2 font-bold text-lg md:text-xl  tracking-wide line-clamp-3">
+          <h3 className="line-clamp-3 h-16 w-full pt-2 text-lg font-bold  tracking-wide md:text-xl">
             {article.title}
           </h3>
           <div className="py-2">
             <img
-              className="w-[24px] h-[24px] inline-block mr-2"
+              className="mr-2 inline-block size-[24px]"
               src={article.platform.faviconUrl}
               alt=""
             />
-            <span className="md:text-md text-xs font-bold px-2 py-1 rounded-lg text-white bg-sky-500">
+            <span className="rounded-lg bg-sky-500 px-2 py-1 text-xs font-bold text-white md:text-base">
               {article.platform.name}
             </span>
             {article.platform.categoryName && (
-              <span className="md:text-md text-xs font-bold ml-2 px-2 py-1 rounded-lg text-white bg-yellow-600">
+              <span className="ml-2 rounded-lg bg-yellow-600 px-2 py-1 text-xs font-bold text-white md:text-base">
                 {article.platform.categoryName}
               </span>
             )}
@@ -43,9 +43,9 @@ export const ArticleCard: FC<ArticleCardProps> = ({
           </div>
         </div>
 
-        <div className="md:w-48 md:h-32 w-24 h-16  flex justify-center">
+        <div className="flex h-16 w-24 justify-center  md:h-32 md:w-48">
           <img
-            className="h-full object-cover object-center rounded-lg border-2 shadow-md"
+            className="h-full rounded-lg border-2 object-cover object-center shadow-md"
             src={imageUrl}
             alt=""
           />

web/client/src/features/articles/components/ArticleDetail.tsx

@@ -30,7 +30,7 @@ export const ArticleDetail = ({ article }: ArticleDetailProps) => {
       <div>
         <Link href={article.articleUrl} target="_blank">
           <img
-            className="cursor-pointer m-auto h-[370px] pb-8 rounded-md object-cover object-center hover:opacity-80"
+            className="m-auto h-[370px] cursor-pointer rounded-md object-cover object-center pb-8 hover:opacity-80"
             src={imageUrl}
             alt=""
           />
@@ -50,7 +50,7 @@ export const ArticleDetail = ({ article }: ArticleDetailProps) => {
             href={article.platform.siteUrl}
             target="_blank"
           >
-            <span className="md:text-basic text-sm font-bold px-2 py-1 rounded-lg text-white bg-sky-500">
+            <span className="rounded-lg bg-sky-500 px-2 py-1 text-sm font-bold text-white md:text-base">
               {article.platform.name}
             </span>
           </Link>
@@ -67,7 +67,7 @@ export const ArticleDetail = ({ article }: ArticleDetailProps) => {
           <Link href={article.articleUrl} target="_blank">
             <Button
               size={"lg"}
-              className="bg-blue-700 text-xl w-[50%] hover:bg-blue-900"
+              className="w-1/2 bg-blue-700 text-xl hover:bg-blue-900"
             >
               続きを読む
             </Button>