Yang/user/qrcode

src/components/profile/Header.tsx

@@ -1,8 +1,15 @@
+'use client';
+
 import Image from 'next/image';
 import { getImageURL } from '@/utils/image';
+import { useAuth } from '@/contexts/auth';
 
-export default function header() {
-  const username = 'Yang';
+export default function Header() {
+  const { user } = useAuth();
+  let username = user?.name;
+  if (username) {
+    username = username.split(' ')[0];
+  }
 
   return (
     <div className="relative mx-auto items-center justify-center">

src/components/profile/Ticket/Information.tsx

@@ -1,14 +1,20 @@
-export default function Inf() {
-  const ID = '0123456789';
-  const fname = 'พงษ์บุริศร์ ว่องไชยกุล';
+'use client';
+import { useLiff } from '@/contexts/liff';
+import { useAuth } from '@/contexts/auth';
 
+export default function Inf() {
+  const { client } = useLiff();
+  const context = client?.getContext();
+  const userId = context?.userId || '';
+  const { user } = useAuth();
+  const username = user?.name;
   return (
     <div className="flex flex-col items-center justify-center text-[12px] text-white">
       <p>
-        #UID<span>{ID}</span>
+        #UID<span>{userId}</span>
       </p>
       <p>
-        <span>{fname}</span>
+        <span>{username}</span>
       </p>
       <div className="mt-[5px] h-[1px] w-[245px] bg-white" />
       <div className="mt-3 flex flex-col items-center">

src/components/profile/Ticket/Qrcode.tsx

@@ -1,9 +1,15 @@
+'use client';
+
 import React from 'react';
 import QRCode from 'react-qr-code';
 import Image from 'next/image';
 import { getImageURL } from '@/utils/image';
+import { useLiff } from '@/contexts/liff';
 
 export default function QR() {
+  const { client } = useLiff();
+  const context = client?.getContext();
+  const userId = context?.userId || '';
   return (
     <div>
       <div className="flex justify-center gap-2">
@@ -16,7 +22,7 @@ export default function QR() {
         <h2 className="text-center text-white">Your QR-Code</h2>
       </div>
       <div className="mt-4">
-        <QRCode value={'UID'} className="bg-white p-4" />
+        <QRCode value={userId} className="bg-white p-4" />
       </div>
     </div>
   );

src/components/profile/Ticket/Ticket.tsx

@@ -14,7 +14,7 @@ export default function Ticket() {
           <Inf />
           <InfButton />
         </div>
-        <div className="mt-20">
+        <div className="mt-24">
           <EditButton />
         </div>
       </div>

src/components/registered-prepare/Header.tsx

@@ -8,7 +8,7 @@ export default function header() {
       <div className="relative flex flex-col pt-14">
         <div>
           <Image
-            src={getImageURL('/user/registered-prepare/Logo.svg')}
+            src={getImageURL('/profile/Logo.svg')}
             className="mx-auto"
             width={60}
             height={70}