Merge pull request #85 from JS-Ninjaaaa/84-dream-input-align-top

#の入力欄と夢の入力欄を上揃えにした

Author: kimurash

frontend/package.json

@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
+    "@tailwindcss/line-clamp": "^0.4.4",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",

frontend/pnpm-lock.yaml

@@ -37,13 +37,12 @@ const MyDreamCard = ({ dream, setMyDreams }: MyDreamCardProps) => {
         <div
           className={`
             relative rounded-[50px] md:w-[220px] md:h-[220px] w-[240px] h-[240px] 
-            transform transition-transform duration-300
             flex flex-col items-center justify-center gap-2
             bg-gradient-to-b from-white border-2 border-gray-500
-            ${gradientClass} 
+            ${gradientClass}
           `}
         >
-          <div className="text-base font-mpulus text-center px-6">
+          <div className="text-base font-mpulus text-center px-6 mb-1 line-clamp-3">
             {dream.content}
           </div>
           <div className="bg-white rounded-2xl px-4 py-2 flex flex-col items-center">

frontend/src/pages/dreams/mine/card/MyDreamCard.tsx

@@ -46,7 +46,7 @@ const MyDreamInput = ({ setMyDreams }: MyDreamInputProps) => {
       <h2 className="text-2xl font-mpulus mb-4 mt-2 ml-3">
         あなたの夢を教えてください
       </h2>
-      <div className="flex w-full flex-wrap justify-center items-center  px-8">
+      <div className="flex w-full flex-wrap justify-center items-start  px-8">
         <MyDreamFormInput content={content} setContent={setContent} />
         <MyDreamFormHashtagList hashtags={hashtags} setHashtags={setHashtags} />
       </div>

frontend/src/pages/dreams/mine/form/MyDreamForm.tsx

@@ -26,11 +26,10 @@ const PublicDreamCard = ({ dream, setPublicDreams }: PublicDreamCardProps) => {
           className={`
             bg-[#fff1fa] relative rounded-[50px] 
             md:w-[220px] md:h-[220px] w-[240px] h-[240px] 
-            transform transition-transform duration-300
             flex flex-col items-center justify-center border-2 border-gray-500
           `}
         >
-          <div className="text-base font-mpulus text-center px-6 mb-3">
+          <div className="text-base font-mpulus text-center px-6 mb-3 line-clamp-3">
             {dream.content}
           </div>
           <div className="bg-white px-4 gap-3 py-2 rounded-2xl flex items-center gap-2">

frontend/src/pages/dreams/public/card/PublicDreamCard.tsx

@@ -11,5 +11,7 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/line-clamp'),
+  ],
 };