Merge pull request #112 from isd-sgcu/fix/sharp

Fix/sharp #minor

Dockerfile

@@ -23,6 +23,14 @@ COPY . .
 
 RUN pnpm build
 
+FROM node:21-alpine3.18 AS production
+
+WORKDIR /app
+
+COPY --from=base /app/.next/standalone .
+COPY --from=base /app/.next/static ./.next/static
+COPY --from=base /app/public ./public
+
 EXPOSE 3000
 
-CMD ["pnpm", "start"]
+CMD ["node", "server.js"]

next.config.mjs

@@ -1,7 +1,11 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: false,
+  reactStrictMode: true,
+  compress: true,
+  output: 'standalone',
   images: {
+    contentDispositionType: 'attachment',
+    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
     remotePatterns: [
       {
         protocol: 'https',

package.json

@@ -23,7 +23,7 @@
     "next-qrcode": "^2.5.1",
     "qr-scanner": "^1.4.2",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+  "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
     "react-markdown": "8.0.6",
     "react-qr-reader": "^3.0.0-beta-1",

src/app/globals.css

@@ -4,13 +4,13 @@
 
 @layer {
     .bg-1 {
-        background-image: url('/bg-1.svg');
+        background-image: url('https://rpkm67.sgp1.cdn.digitaloceanspaces.com/assets/bg-1.svg');
         background-repeat: repeat;
         background-size: cover;
     }
 
     .bg-2 {
-        background-image: url('/bg-2.svg');
+        background-image: url('https://rpkm67.sgp1.cdn.digitaloceanspaces.com/assets/bg-2.svg');
         background-repeat: repeat;
         background-size: cover;
     }

src/app/layout.tsx

@@ -6,7 +6,6 @@ import AuthProvider from '@/context/AuthContext';
 import BaanProvider from '@/context/BaanContext';
 import { Toaster } from 'react-hot-toast';
 import { QueryProvider } from '@/components/queryProvider';
-import Footer from '@/components/(main)/Footer';
 export const metadata: Metadata = {
   title: 'RPKM',
 };
@@ -26,7 +25,6 @@ export default function RootLayout({
           <AuthProvider>
             <BaanProvider>{children}</BaanProvider>
           </AuthProvider>
-          <Footer />
         </QueryProvider>
       </body>
     </html>

src/app/rpkm/baan/home/page.tsx

@@ -1,7 +1,31 @@
+'use client';
+
+import UserCard from '@/components/UserCard';
 import React from 'react';
+import logo from '@public/rpkm/baan/home/logo.svg';
+import Image from 'next/image';
+import GroupFinder from '@/components/rpkm/group-finder/GroupFinder';
+import BaanSelect from '@/components/rpkm/Baan/BaanSelect';
 
 const page = () => {
-  return <div>page</div>;
+  return (
+    <main className="w-full min-h-screen">
+      <div className="flex flex-col items-center justify-center gap-8 px-[10%] pb-[20%]">
+        <div className="w-[70%] mx-auto">
+          <Image
+            src={logo}
+            alt="logo"
+            width={307}
+            height={366}
+            className="w-full"
+          />
+        </div>
+        <UserCard />
+        <BaanSelect mode="select" />
+        <GroupFinder />
+      </div>
+    </main>
+  );
 };
 
 export default page;

src/app/rpkm/baan/layout.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
-
 import background from '@public/rpkm/baan/background/bg.svg';
+import Navbar from '@/components/rpkm/Navbar';
 
 const layout = ({ children }: { children: React.ReactNode }) => {
   return (
@@ -9,8 +8,11 @@ const layout = ({ children }: { children: React.ReactNode }) => {
         backgroundImage: `url(${background.src})`,
         backgroundSize: '100%',
       }}
-      className="bg-rpkm-green"
+      className="bg-rpkm-green pt-16"
     >
+      <div className="fixed top-0 w-full z-[999]">
+        <Navbar />
+      </div>
       {children}
     </div>
   );

src/components/(main)/register/UploadProfilePicture.tsx

@@ -93,11 +93,15 @@ const UploadProfilePicture: React.FC<UploadProfilePictureProps> = ({
               className="w-full h-full object-contain object-center rounded-t-full"
             />
           ) : currentPhotoUrl ? (
-            <Image
-              src={currentPhotoUrl}
-              alt="Profile"
-              className="w-full h-full object-contain object-center rounded-t-full"
-            />
+            <div className="relative w-full h-full">
+              {' '}
+              <Image
+                src={currentPhotoUrl}
+                alt="Profile"
+                fill
+                className="w-full h-full object-contain object-center rounded-t-full"
+              />
+            </div>
           ) : (
             <div className="rounded-t-full -mt-6">
               <Image

src/components/UserCard.tsx

@@ -13,19 +13,20 @@ const UserCard = () => {
   const photoUrl = user?.photoUrl;
 
   return (
-    <div className="relative w-full h-full flex justify-center items-center p-4">
+    <div className="relative w-full h-full flex justify-center items-center">
       <Image
         src={TV}
         alt="tv"
         className="w-full h-auto object-cover"
       />
-      <div className="absolute top-[15%] left-[9%] w-[65%] h-[65%] flex flex-col items-center justify-center p-4 bg-blue-900 rounded-lg">
-        <div className="w-[35%] h-[50%] overflow-hidden rounded-full">
+      <div className="absolute top-[12%] left-[8%] w-[66%] h-[70%] flex flex-col items-center justify-center p-4 bg-blue-900 rounded-lg">
+        <div className="relative w-[35%] h-[50%] overflow-hidden rounded-full">
           {photoUrl && (
             <Image
               src={photoUrl}
               alt="user-picture"
               className="w-full h-full object-cover"
+              fill
             />
           )}
         </div>
@@ -35,7 +36,7 @@ const UserCard = () => {
         </div>
       </div>
       <div
-        className="absolute top-[5%] right-[2%] w-[20%]"
+        className="absolute top-[5%] right-[0%] w-[20%]"
         onClick={() => router.push('/edit')}
       >
         <Image

src/components/rpkm/Navbar.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useState } from 'react';
 import Sidebar from '@/components/rpkm/Sidebar';
 import { Icon } from '@iconify/react';

src/components/rpkm/Sidebar/UserInfo.tsx

@@ -9,13 +9,13 @@ function UserInfo() {
   const { user } = useAuth();
   return (
     <div className="flex flex-col items-center text-center w-full h-[34.03vh] self-center relative gap-y-[0.47vh]">
-      <div className="w-[15.25vh] h-[19.59vh] rounded-t-full shadow-[0px_0px_4px_.4px_#00000036] overflow-hidden">
+      <div className="relative w-[15.25vh] h-[19.59vh] rounded-t-full shadow-[0px_0px_4px_.4px_#00000036] overflow-hidden">
         <Image
           src={user?.photoUrl ? user?.photoUrl : placeholder.src}
           alt="profile picture"
-          width={10}
-          height={10}
-          style={{ width: '100%', height: '22.066vh', top: '-2.934vh' }}
+          fill
+          objectFit="contain"
+          objectPosition="center"
         />
       </div>
       <h1 className="text-lg font-semibold text-center text-black">

src/components/rpkm/group-finder/CodeTextarea.tsx

@@ -62,17 +62,17 @@ const CodeTextarea: React.FC<CodeTextareaProps> = ({
 
   return (
     <>
-      <div className="flex flex-row items-center gap-1 bg-project-yellow rounded-3xl py-1 pl-4 pr-2 w-3/4">
+      <div className="relative gap-1 bg-project-yellow rounded-3xl py-[2%] pl-[6%] pr-[6%] w-4/5 overflow-hidden">
         <textarea
-          className="flex flex-1 hide-scrollbar bg-transparent focus:outline-none font-athiti font-semibold text-project-red whitespace-nowrap placeholder:text-project-red placeholder:text-opacity-50 resize-none"
+          className="w-[90%] flex hide-scrollbar bg-transparent focus:outline-none font-athiti font-semibold text-project-red whitespace-nowrap placeholder:text-project-red placeholder:text-opacity-50 resize-none"
           rows={1}
           placeholder="โปรดกรอกรหัสห้อง"
           value={text}
           onChange={handleTypeText}
         />
 
         <button
-          className="w-8 h-8 rounded-full p-2 bg-project-cream"
+          className="absolute top-[10%] right-[2%] w-7 h-7 rounded-full p-2 bg-project-cream"
           onClick={handleOpenModal}
         >
           <Icon