release: 6.2424.57

.github/workflows/docker-dev-image.yml

@@ -14,7 +14,7 @@ jobs:
 
       - name: Docker meta
         id: api-meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
           images: line/abc-user-feedback-api
           tags: |
@@ -47,7 +47,7 @@ jobs:
 
       - name: Docker meta
         id: web-meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
           images: line/abc-user-feedback-web
           tags: |

.github/workflows/docker-prod-image.yml

@@ -16,7 +16,7 @@ jobs:
 
       - name: Docker meta
         id: api-meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
           images: line/abc-user-feedback-api
           tags: |
@@ -49,7 +49,7 @@ jobs:
 
       - name: Docker meta
         id: web-meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
           images: line/abc-user-feedback-web
           tags: |

.github/workflows/e2e-test.yml

@@ -10,7 +10,7 @@ jobs:
 
     services:
       mysql:
-        image: mysql:8.0.19
+        image: mysql:8.4.0
         env:
           MYSQL_ROOT_PASSWORD: userfeedback
           MYSQL_DATABASE: e2e

.nvmrc

@@ -1 +1 @@
-20.11.1
+20.14.0

README.md

@@ -85,7 +85,7 @@ pnpm install
 2. Spin up all required infrastructure (Mysql, OpenSearch, etc.) using Docker Compose:
 
 ```bash
-docker-compose -f docker-compose.infra.yml up -d
+docker-compose -f docker/docker-compose.infra.yml up -d
 ```
 
 3. Make an `.env` file in `apps/api` and `apps/web` by referring to `.env.example` ([web environment variables](./apps/web/README.md), [api environment variables](./apps/api/README.md))

apps/api/package.json

@@ -30,7 +30,7 @@
     "@aws-sdk/s3-request-presigner": "^3.556.0",
     "@fastify/multipart": "^8.2.0",
     "@fastify/static": "^7.0.3",
-    "@nestjs-modules/mailer": "^1.11.2",
+    "@nestjs-modules/mailer": "^2.0.0",
     "@nestjs/axios": "^3.0.2",
     "@nestjs/common": "^10.3.8",
     "@nestjs/config": "^3.2.2",
@@ -63,23 +63,23 @@
     "magic-bytes.js": "^1.10.0",
     "mysql2": "^3.9.7",
     "nestjs-cls": "^3.6.0",
-    "nestjs-pino": "^3.5.0",
+    "nestjs-pino": "^4.0.0",
     "nestjs-typeorm-paginate": "^4.0.4",
     "nodemailer": "^6.9.13",
     "passport": "^0.7.0",
     "passport-custom": "^1.1.1",
     "passport-jwt": "^4.0.1",
     "passport-local": "^1.0.0",
-    "pino-http": "^8.6.1",
-    "pino-pretty": "^10.3.1",
+    "pino-http": "^10.0.0",
+    "pino-pretty": "^11.0.0",
     "prom-client": "^15.1.2",
     "reflect-metadata": "^0.2.2",
     "rxjs": "^7.8.1",
     "source-map-support": "^0.5.21",
     "typeorm": "^0.3.20",
     "typeorm-naming-strategies": "^4.1.0",
-    "typeorm-transactional": "^0.4.1",
-    "uuid": "^9.0.1"
+    "typeorm-transactional": "^0.5.0",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
@@ -92,7 +92,7 @@
     "@types/express": "^4.17.21",
     "@types/jest": "^29.5.12",
     "@types/luxon": "^3.4.2",
-    "@types/node": "20.12.12",
+    "@types/node": "20.14.2",
     "@types/nodemailer": "^6.4.15",
     "@types/supertest": "^6.0.2",
     "@ufb/eslint-config": "workspace:*",
@@ -101,7 +101,7 @@
     "eslint": "^8.57.0",
     "jest": "^29.7.0",
     "mockdate": "^3.0.5",
-    "supertest": "^6.3.4",
+    "supertest": "^7.0.0",
     "ts-jest": "^29.1.2",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",

apps/web/package.json

@@ -31,11 +31,11 @@
   "dependencies": {
     "@faker-js/faker": "^8.4.1",
     "@floating-ui/react": "^0.26.12",
-    "@headlessui/react": "1.7.17",
+    "@headlessui/react": "2.0.4",
     "@headlessui/tailwindcss": "^0.2.0",
     "@hookform/resolvers": "^3.3.4",
     "@mui/base": "5.0.0-beta.40",
-    "@t3-oss/env-nextjs": "^0.7.3",
+    "@t3-oss/env-nextjs": "^0.10.0",
     "@tanstack/react-query": "^5.31.0",
     "@tanstack/react-table": "^8.16.0",
     "@ufb/shared": "workspace:*",
@@ -52,41 +52,41 @@
     "framer-motion": "^11.1.7",
     "i18next": "^23.11.2",
     "immer": "^10.0.4",
-    "iron-session": "^6.3.1",
+    "iron-session": "^8.0.0",
     "jwt-decode": "^4.0.0",
     "next": "^14.2.2",
-    "next-i18next": "^14.0.3",
+    "next-i18next": "^15.0.0",
     "nuqs": "^1.17.4",
-    "pino": "^8.20.0",
+    "pino": "^9.0.0",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-datepicker": "^6.9.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.3",
     "react-hot-toast": "^2.4.1",
-    "react-i18next": "^13.5.0",
+    "react-i18next": "^14.0.0",
     "react-select": "^5.8.0",
     "react-use": "^17.5.0",
     "recharts": "^2.12.6",
-    "sharp": "^0.32.6",
+    "sharp": "^0.33.0",
     "tailwind-scrollbar-hide": "^1.1.7",
     "zod": "^3.23.0",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",
-    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-commonjs": "^26.0.0",
     "@svgr/webpack": "^8.1.0",
     "@swc/core": "^1.4.16",
     "@swc/jest": "^0.2.36",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.3.1",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
-    "@types/node": "20.12.12",
+    "@types/node": "20.14.2",
     "@types/react": "^18.2.79",
     "@types/react-beautiful-dnd": "^13.1.8",
-    "@types/react-datepicker": "^4.19.6",
+    "@types/react-datepicker": "^6.0.0",
     "@types/react-dom": "^18.2.25",
     "@ufb/eslint-config": "workspace:*",
     "@ufb/prettier-config": "workspace:*",

apps/web/src/components/charts/ChartContainer.tsx

@@ -30,7 +30,7 @@ const ChartContainer: React.FC<IProps> = (props) => {
   const { children, description, title, dataKeys, filterContent, showLegend } =
     props;
   return (
-    <div className="border-fill-tertiary bg-tertiary rounded border px-4 ">
+    <div className="border-fill-tertiary bg-tertiary rounded border px-4">
       <div className="flex h-[72px] items-center justify-between">
         <div className="flex items-center">
           <span className="font-20-bold">{title}</span>

apps/web/src/components/etc/DateRangePicker/DateRangePicker.tsx

@@ -150,7 +150,7 @@ const DateRangePicker: React.FC<IProps> = (props) => {
         </div>
       </PopoverTrigger>
       <PopoverContent isPortal className="bg-tertiary">
-        <div className="border-fill-secondary  flex border-b">
+        <div className="border-fill-secondary flex border-b">
           <ul className="border-fill-secondary border-r p-2">
             {(options ?? items).map(({ label, startDate, endDate }, index) => (
               <li

apps/web/src/components/layouts/setting-menu/SettingMenuBox.tsx

@@ -28,16 +28,12 @@ const SettingMenuBox: React.FC<IBoxProps> = ({
   show,
   last = false,
 }) => {
-  const flexCN = useMemo(() => (last ? 'flex-0' : 'flex-1'), [last]);
-  const transitionFlexCN = useMemo(
-    () => (last ? 'flex-[2]' : 'flex-0'),
-    [last],
-  );
+  const flexCN = last ? 'flex-0' : 'flex-1';
+  const transitionFlexCN = last ? 'flex-[2]' : 'flex-0';
 
   return (
     <Transition
       show={show}
-      className={`${boxCN} ${flexCN}`}
       enter="transition-all duration-500"
       enterTo={['px-3 opacity-100 overflow-hidden', transitionFlexCN].join(' ')}
       enterFrom="flex-[0] px-0 opacity-0 overflow-hidden"
@@ -47,7 +43,7 @@ const SettingMenuBox: React.FC<IBoxProps> = ({
       )}
       leaveTo="flex-[0] px-0 opacity-0 overflow-hidden"
     >
-      {children}
+      <div className={`${boxCN} ${flexCN}`}>{children}</div>
     </Transition>
   );
 };

apps/web/src/components/templates/CreateProjectChannelTemplate/CreateProjectChannelTemplate.tsx

@@ -161,7 +161,7 @@ const Helper: React.FC<{ text: string | React.ReactNode }> = ({ text }) => {
   const { t } = useTranslation();
   return (
     <div className="border-fill-secondary rounded border px-6 py-4">
-      <div className="mb-1 flex items-center  gap-2">
+      <div className="mb-1 flex items-center gap-2">
         <Icon name="IdeaColor" size={16} />
         <h2 className="font-14-bold">{t('text.helper')}</h2>
       </div>

apps/web/src/components/templates/MainTemplate/MainTemplate.tsx

@@ -32,7 +32,7 @@ const MainTemplate: React.FC<IProps> = ({ children }) => {
           className={[
             'mx-4 my-6 flex flex-col overflow-x-auto',
             Path.hasSideNav(router.pathname) ?
-              'w-[calc(100%-104px)] '
+              'w-[calc(100%-104px)]'
             : 'w-full',
           ].join(' ')}
         >

apps/web/src/constants/iron-option.ts

@@ -13,11 +13,11 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
-import type { IronSessionOptions } from 'iron-session';
+import type { SessionOptions } from 'iron-session';
 
 import { env } from '@/env.mjs';
 
-export const ironOption: IronSessionOptions = {
+export const ironOption: SessionOptions = {
   cookieName: 'user-feedback',
   password: env.SESSION_PASSWORD,
   cookieOptions: {
@@ -26,3 +26,6 @@ export const ironOption: IronSessionOptions = {
     secure: process.env.NODE_ENV === 'production',
   },
 };
+export type JwtSession = {
+  jwt?: { accessToken: string; refreshToken: string };
+};

apps/web/src/containers/setting-menu/FieldSetting/FieldSetting.tsx

@@ -272,7 +272,7 @@ const FieldSetting: React.FC<IProps> = ({ projectId, channelId }) => {
               channelId={channelId}
             />
             <button
-              className="btn btn-primary btn-md "
+              className="btn btn-primary btn-md"
               disabled={
                 !isDirty || !canUpdateField || isPending || channelDataLoading
               }

apps/web/src/containers/setting-menu/FieldSetting/FieldSettingPopover.tsx

@@ -246,7 +246,7 @@ const FieldSettingPopover: React.FC<IProps> = (props) => {
               <label className="flex items-center gap-1">
                 <input
                   type="checkbox"
-                  className="checkbox my-2 mr-2 "
+                  className="checkbox my-2 mr-2"
                   checked={isSameKey}
                   onChange={(e) => setIsSameKey(e.target.checked)}
                 />

apps/web/src/containers/tables/FeedbackTable/IssueCell/IssueCell.tsx

@@ -244,7 +244,7 @@ const IssueCell: React.FC<IProps> = (props) => {
                 {t('main.feedback.issue-cell.issue-list')}
               </span>
             </div>
-            <div className=" max-h-[300px] overflow-y-auto">
+            <div className="max-h-[300px] overflow-y-auto">
               {filteredIssues?.map((item) => (
                 <Combobox.Option
                   key={item.id}

apps/web/src/middleware.ts

@@ -15,9 +15,10 @@
  */
 import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
-import { getIronSession } from 'iron-session/edge';
+import { getIronSession } from 'iron-session';
 
 import { DEFAULT_LOCALE } from './constants/i18n';
+import type { JwtSession } from './constants/iron-option';
 import { ironOption } from './constants/iron-option';
 import { Path } from './constants/path';
 
@@ -26,7 +27,7 @@ export async function middleware(req: NextRequest) {
 
   if (Path.isErrorPage(req.nextUrl.pathname)) return res;
 
-  const session = await getIronSession(req, res, ironOption);
+  const session = await getIronSession<JwtSession>(req, res, ironOption);
 
   const isProtected = Path.isProtectPage(req.nextUrl.pathname);
 

apps/web/src/pages/api/jwt.ts

@@ -13,10 +13,15 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
-import { withIronSessionApiRoute } from 'iron-session/next';
+import type { NextApiHandler } from 'next';
+import { getIronSession } from 'iron-session';
 
+import type { JwtSession } from '@/constants/iron-option';
 import { ironOption } from '@/constants/iron-option';
 
-export default withIronSessionApiRoute((req, res) => {
-  res.send({ jwt: req.session?.jwt ?? null });
-}, ironOption);
+const handler: NextApiHandler = async (req, res) => {
+  const session = await getIronSession<JwtSession>(req, res, ironOption);
+  res.send({ jwt: session.jwt ?? null });
+};
+
+export default handler;

apps/web/src/pages/api/login.ts

@@ -13,14 +13,16 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
+import type { NextApiHandler } from 'next';
 import axios, { AxiosError } from 'axios';
-import { withIronSessionApiRoute } from 'iron-session/next';
+import { getIronSession } from 'iron-session';
 
+import type { JwtSession } from '@/constants/iron-option';
 import { ironOption } from '@/constants/iron-option';
 import { env } from '@/env.mjs';
 import getLogger from '@/libs/logger';
 
-export default withIronSessionApiRoute(async (req, res) => {
+const handler: NextApiHandler = async (req, res) => {
   const { email, password } = req.body;
   try {
     const response = await axios.post(
@@ -31,8 +33,10 @@ export default withIronSessionApiRoute(async (req, res) => {
     if (response.status !== 201) {
       return res.status(response.status).send(response.data);
     }
-    req.session.jwt = response.data;
-    await req.session.save();
+    const session = await getIronSession<JwtSession>(req, res, ironOption);
+
+    session.jwt = response.data;
+    await session.save();
 
     return res.send(response.data);
   } catch (error) {
@@ -49,10 +53,6 @@ export default withIronSessionApiRoute(async (req, res) => {
     }
     return res.status(500).send({ message: 'Unknown Error' });
   }
-}, ironOption);
+};
 
-declare module 'iron-session' {
-  interface IronSessionData {
-    jwt?: { accessToken: string; refreshToken: string };
-  }
-}
+export default handler;