Merge pull request #483 from Team-WeQuiz/feat/#465

[FE] 코드로 입장하기 구현

chatty-fe/src/app/(game)/create-room/_components/FileUploadBox.tsx

@@ -110,6 +110,7 @@ export default function FileUploadBox({ setFiles }: FileUploadBoxProps) {
           </div>
           <input
             type="file"
+            accept="application/pdf"
             ref={fileInputRef}
             onChange={handleFileInputChange}
             className={styles.fileInput}

chatty-fe/src/app/(game)/main-lobby/_components/CodeInput/CodeInput.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { useState } from 'react';
+import TextInputField from '@/app/_components/TextInputField';
+import SolidButton from '@/app/_components/SolidButton';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { findByCode } from '@/app/_api/quiz';
+import useAuthStore from '@/app/_store/useAuthStore';
+
+const CodeInput = () => {
+  const [code, setCode] = useState('');
+  const router = useRouter();
+  const { accessToken } = useAuthStore();
+
+  const enterRoomWithCode = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!code) return alert('코드를 입력해주세요');
+
+    console.log('code', code);
+    if (code || accessToken) {
+      try {
+        const res = (await findByCode(code, accessToken)) as any;
+        router.push(`/enter-room/${res.roomId}`);
+      } catch (error: any) {
+        alert(error.message);
+      }
+    }
+  };
+
+  return (
+    <>
+      <form onSubmit={enterRoomWithCode}>
+        <TextInputField
+          value={code}
+          placeholder="코드로 입장하기"
+          borderRadius={12}
+          onChange={(e) => {
+            setCode(e.target.value);
+          }}
+          inputmode="numeric"
+          endAdornment={
+            <SolidButton shadowExist={false} type="submit">
+              <Image
+                src="/images/log-in.svg"
+                alt="enter-room"
+                width={24}
+                height={24}
+              />
+            </SolidButton>
+          }
+        />
+      </form>
+    </>
+  );
+};
+
+export default CodeInput;

chatty-fe/src/app/(game)/main-lobby/page.css.ts

@@ -26,13 +26,15 @@ export const toolBar = style({
   gap: 30,
 });
 
-export const searchInput = style({
-  width: 360,
+export const codeInput = style({
+  width: 300,
+  padding: 1,
 });
 
 export const createButton = style({
   width: 168,
   maxHeight: 60,
+  padding: 1,
 });
 
 export const buttonText = style({

chatty-fe/src/app/(game)/main-lobby/page.tsx

@@ -8,35 +8,19 @@ import GradButton from '@/app/_components/GradButton';
 import GameListGrid from './_components/GameListGrid/GameListGrid';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
+import CodeInput from './_components/CodeInput/CodeInput';
 
 const MainLobby = () => {
   const router = useRouter();
-  const [search, setSearch] = useState('');
+  const [code, setCode] = useState('');
 
   return (
     <Suspense>
       <div className={styles.lobbyContainer}>
         <div className={styles.centerContainer}>
           <div className={styles.toolBar}>
-            <div className={styles.searchInput}>
-              <TextInputField
-                value={search}
-                placeholder="검색"
-                borderRadius={12}
-                onChange={(e) => {
-                  setSearch(e.target.value);
-                }}
-                endAdornment={
-                  <SolidButton shadowExist={false}>
-                    <Image
-                      src="/images/Search.svg"
-                      alt="search"
-                      width={24}
-                      height={24}
-                    /> 
-                  </SolidButton>
-                }
-              />
+            <div className={styles.codeInput}>
+              <CodeInput />
             </div>
             <div className={styles.createButton}>
               <GradButton

chatty-fe/src/app/(game)/waiting-room/[id]/_components/QuizInfoCard/QuizInfoCard.css.ts

@@ -63,9 +63,11 @@ export const name = style({
 export const nameText = style({
   position: 'relative',
   zIndex: 1,
+  padding: '0 25px',
   '@media': {
     '(max-width: 768px)': {
       fontSize: 12,
+      padding: 0,
     },
   },
 });
@@ -122,6 +124,7 @@ export const detailBlock = style({
   fontWeight: 400,
   backgroundColor: globals.color.blue_7,
   borderRadius: 16,
+  overflow: 'scroll',
   '@media': {
     '(max-width: 768px)': {
       fontSize: 10,
@@ -158,7 +161,7 @@ export const numText = style({
   lineHeight: 1.2,
   '@media': {
     '(max-width: 768px)': {
-      fontSize: 12,
+      fontSize: 10,
     },
   },
 });