Merge pull request #105 from softeerbootcamp4th/qa-feedback

[QA] 최종 QA 피드백 반영
softeerbootcamp4th · Aug 21, 2024 · 532f61f · 532f61f
2 parents d010a0f + 55141ed
commit 532f61f
Show file tree

Hide file tree

Showing 29 changed files with 184 additions and 118 deletions.
diff --git a/packages/admin/src/components/appLayout/SideBarContainer.tsx b/packages/admin/src/components/appLayout/SideBarContainer.tsx
@@ -16,8 +16,8 @@ function SideBarContainer() {
 		'block w-8 h-1 mb-1 relative bg-[#cdcdcd] rounded z-10 origin-[4px_0px] transition-transform transition-bg duration-500 ease-custom-bezier';
 
 	return (
-		<nav role="navigation" className="ml-5 mt-10"  >
-			<div id="menuToggle" className="fixed top-10 z-10 select-none"  >
+		<nav role="navigation" className="ml-5 mt-10">
+			<div id="menuToggle" className="fixed top-10 z-10 select-none">
 				<input
 					type="checkbox"
 					checked={isChecked}
@@ -28,17 +28,17 @@ function SideBarContainer() {
 				<span
 					className={`${spanStyled} ${
 						isChecked
-							? 'translate-x-[-2px] translate-y-[-1px] rotate-45 transform bg-slate-500 bg-[#000000]'
+							? 'translate-x-[-2px] translate-y-[-1px] rotate-45 transform bg-[#000000] bg-slate-500'
 							: ''
 					}`}
 				/>
 				<span
-					className={` ${spanStyled} ${isChecked ? 'rotate-0 scale-[0.2,0.2] transform opacity-0 bg-[#000000]' : ''}`}
+					className={` ${spanStyled} ${isChecked ? 'rotate-0 scale-[0.2,0.2] transform bg-[#000000] opacity-0' : ''}`}
 				/>
 				<span
 					className={`${spanStyled} ${
 						isChecked
-							? 'translate-x-[-2px] translate-y-[-1px] rotate-[-45deg] transform bg-slate-500 bg-[#000000]'
+							? 'translate-x-[-2px] translate-y-[-1px] rotate-[-45deg] transform bg-[#000000] bg-slate-500'
 							: ''
 					}`}
 				/>

diff --git a/packages/admin/src/components/chat/Chat.tsx b/packages/admin/src/components/chat/Chat.tsx
@@ -3,7 +3,7 @@ import { FunctionComponent, useCallback } from 'react';
 import { Button } from '../ui/button.js';
 
 type AdminChatProps = {
-	onBlock: (id: string) => void
+	onBlock: (id: string) => void;
 } & ChatProps;
 
 export default function Chat({ type, team, sender, content, id, onBlock }: AdminChatProps) {
@@ -19,13 +19,9 @@ export default function Chat({ type, team, sender, content, id, onBlock }: Admin
 			case 'm':
 			default:
 				return (
-					<Message
-						sender={sender}
-						team={team}
-						isMyMessage={false}
-					>
-						<div className="flex flex-row flex-1 w-full justify-between">
-							<div className="text-cream-100 flex mi-w-fit flex-1">{content}</div>
+					<Message sender={sender} team={team} isMyMessage={false}>
+						<div className="flex w-full flex-1 flex-row justify-between">
+							<div className="text-cream-100 mi-w-fit flex flex-1">{content}</div>
 							<Button onClick={handleHide}>hide</Button>
 						</div>
 					</Message>

diff --git a/packages/admin/src/components/common/Tab.tsx b/packages/admin/src/components/common/Tab.tsx
@@ -11,8 +11,8 @@ function Tab({ selectedTabName, setSelectedTabName, tabNames }: CommonTabProps)
 		setSelectedTabName(tabname);
 	};
 	return (
-		<div className="flex flex-row mb-4" >
-			<div className="border-cream-900 flex-0 bg-khaki-500 flex flex-row gap-2 border-2 rounded-4 p-3">
+		<div className="mb-4 flex flex-row">
+			<div className="border-cream-900 flex-0 bg-khaki-500 rounded-4 flex flex-row gap-2 border-2 p-3">
 				{tabNames.map((tabName) => (
 					<Button
 						key={tabName}

diff --git a/packages/admin/src/components/table/ResultTable.tsx b/packages/admin/src/components/table/ResultTable.tsx
@@ -34,7 +34,7 @@ function ResultTable({ headers, rows }: ResultTableProps) {
 				</TableRow>
 			</TableHeader>
 			<TableBody>
-				{rows.map((row,rowIndex) => (
+				{rows.map((row, rowIndex) => (
 					<TableRow key={rowIndex}>
 						{row.map((item, colIndex) => (
 							<TableCell className="font-medium" key={colIndex}>

diff --git a/packages/admin/src/layouts/appLayout.tsx b/packages/admin/src/layouts/appLayout.tsx
@@ -34,7 +34,7 @@ export default function AppLayout() {
 	return (
 		<div className="mx-auto flex min-h-screen w-screen min-w-[1200px]">
 			{accessToken && <SideBarContainer />}
-			<div className="mx-auto flex min-h-screen h-full w-full max-w-[1200px] gap-10">
+			<div className="mx-auto flex h-full min-h-screen w-full max-w-[1200px] gap-10">
 				<SystemContainer />
 				<div className="flex w-full flex-col p-4 pb-8 pt-8">
 					<Header headerTitle={headerTitle} />

diff --git a/packages/admin/src/pages/events/CommonEventTab.tsx b/packages/admin/src/pages/events/CommonEventTab.tsx
@@ -125,7 +125,7 @@ function CommonEventBox({
 	};
 
 	return (
-		<div className="flex flex-row flex-wrap rounded-sm border-[1px] border-black- p-4">
+		<div className="border-black- flex flex-row flex-wrap rounded-sm border-[1px] p-4">
 			<CommonEventItem description="이벤트 명" element={<div>{commonEvent.eventName}</div>} />
 			<CommonEventItem description="상태" element={<div>{status}</div>} />
 			<CommonEventItem

diff --git a/packages/admin/src/pages/events/RaceEventTab.tsx b/packages/admin/src/pages/events/RaceEventTab.tsx
@@ -21,10 +21,12 @@ function RaceEventBox({
 
 	return (
 		<div>
-			<div className="flex flex-col gap-8 bg-[#EFEFEF] p-4 rounded-3">
-				<div className="font-bold">Q.{quizIndex+1} {personalityTest.question}</div>
+			<div className="rounded-3 flex flex-col gap-8 bg-[#EFEFEF] p-4">
+				<div className="font-bold">
+					Q.{quizIndex + 1} {personalityTest.question}
+				</div>
 				{personalityTest.choices.map((choice, choiceIndex) => (
-					<div className='border-2 border-khaki-600 p-4 rounded-3' >
+					<div className="border-khaki-600 rounded-3 border-2 p-4">
 						<div>
 							<span className="mr-1 font-bold">{String.fromCharCode(65 + choiceIndex)}</span>
 							{choice.text}

diff --git a/packages/common/src/components/chat/Message.tsx b/packages/common/src/components/chat/Message.tsx
@@ -8,7 +8,7 @@ interface MessageProps extends Pick<MessageChatProps, 'sender' | 'team'> {
 }
 
 const TYPES: Record<SocketCategory | 'default', { casper: string; textColor: string }> = {
-	default: { casper: '/casper/white.webp', textColor: 'text-skyblue-500' },
+	default: { casper: '/casper/white.webp', textColor: 'text-neutral-200' },
 	p: { casper: '/casper/yellow.webp', textColor: 'text-cream-600' },
 	l: { casper: '/casper/khaki.webp', textColor: 'text-khaki-400' },
 	t: { casper: '/casper/orange.webp', textColor: 'text-orange-500' },
@@ -21,9 +21,10 @@ export default function Message({
 	isMyMessage = false,
 	children,
 }: PropsWithChildren<MessageProps>) {
-	const category = ['p', 't', 'l', 's'].includes(team?.toLowerCase())
-		? (team.toLowerCase() as SocketCategory)
-		: 'default';
+	const category = ['P', 'T', 'L', 'S'].includes(team)
+	? (team.toLowerCase() as SocketCategory)
+	: 'default';
+
 	const { casper, textColor } = TYPES[category];
 
 	return (

diff --git a/packages/common/src/utils/socket.ts b/packages/common/src/utils/socket.ts
@@ -69,7 +69,7 @@ export default class Socket {
 		}
 	}
 
-	async sendMessages({ destination, body, headers, requiresAuth = true}: SendMessageProps) {
+	async sendMessages({ destination, body, headers, requiresAuth = true }: SendMessageProps) {
 		if (requiresAuth && !this.token) {
 			throw new Error('로그인 후 참여할 수 있어요!');
 		}

diff --git a/packages/user/src/components/common/PendingContainer.tsx b/packages/user/src/components/common/PendingContainer.tsx
@@ -1,9 +1,6 @@
 export default function PendingContainer({ message }: { message: string }) {
 	return (
-		<div
-			role="status"
-			className="flex h-screen w-screen flex-col items-center justify-center"
-		>
+		<div role="status" className="flex h-screen w-screen flex-col items-center justify-center">
 			<img src="/images/fcfs/result/correct.webp" alt="로딩 중 이미지" className="max-w-[500px]" />
 			<div className="flex flex-col items-center gap-5">
 				<h4>{message}</h4>

diff --git a/packages/user/src/components/event/chatting/index.tsx b/packages/user/src/components/event/chatting/index.tsx
@@ -1,21 +1,29 @@
 import { ChatList } from '@softeer/common/components';
+import { useEffect, useRef } from 'react';
 import { UseSocketReturnType } from 'src/hooks/socket/index.ts';
 import Chat from './Chat.tsx';
 import ChatInputArea from './inputArea/index.tsx';
 import ChatInput from './inputArea/input/index.tsx';
 
 /** 실시간 기대평 섹션 */
-
-function RealTimeChatting({
+export default function RealTimeChatting({
 	chatSocket: { onSendMessage, messages },
 }: Pick<UseSocketReturnType, 'chatSocket'>) {
+	const chatListRef = useRef<HTMLDivElement | null>(null);
+
+	useEffect(() => {
+		if (chatListRef.current) {
+			chatListRef.current.scrollTop = 0;
+		}
+	}, [messages]);
+
 	return (
 		<section className="container flex max-w-[1200px] snap-start flex-col items-center pb-[115px] pt-[50px]">
 			<h3 className="text-heading-10 mb-[25px] font-medium">기대평을 남겨보세요!</h3>
 			<ChatInputArea>
 				<ChatInput onSend={onSendMessage} />
 			</ChatInputArea>
-			<div className="h-[1000px] w-full overflow-y-auto rounded-[10px] bg-neutral-800 py-10">
+			<div ref={chatListRef} className="h-[1000px] w-full overflow-y-auto rounded-[10px] bg-neutral-800 py-10">
 				<ChatList>
 					{messages.map((message) => (
 						<Chat key={message.id} {...message} />
@@ -25,5 +33,3 @@ function RealTimeChatting({
 		</section>
 	);
 }
-
-export default RealTimeChatting;
diff --git a/packages/user/src/components/event/racing/dashboard/card/UnassignedCard.tsx b/packages/user/src/components/event/racing/dashboard/card/UnassignedCard.tsx
@@ -7,7 +7,7 @@ export default function UnassignedCard() {
 				<img
 					src="/images/racing/front/pet.webp"
 					alt="캐스퍼 일렉트릭"
-					className="absolute w-[140px] opacity-20 object-contain"
+					className="absolute w-[140px] object-contain opacity-20"
 				/>
 				<p className="text-heading-1 z-10 mt-[20px] text-[110px] font-extrabold leading-[70px]">
 					?

diff --git a/packages/user/src/components/event/racing/dashboard/card/index.tsx b/packages/user/src/components/event/racing/dashboard/card/index.tsx
@@ -1,11 +1,11 @@
-import { memo } from 'react';
-import TeamSelectModal, {
-	type TeamSelectModalProps,
-} from 'src/components/shared/modal/teamSelectModal/index.tsx';
+import { lazy, memo } from 'react';
+import type { TeamSelectModalProps } from 'src/components/shared/modal/teamSelectModal/index.tsx';
 import withAuth from 'src/components/shared/withAuthHOC.tsx';
 import useGetUserInfo from 'src/hooks/query/useGetUserInfo.ts';
 import UnassignedCard from './UnassignedCard.tsx';
 
+const TeamSelectModal = lazy(() => import('src/components/shared/modal/teamSelectModal/index.tsx'));
+
 const ProtectedTeamSelectModal = withAuth<TeamSelectModalProps>(TeamSelectModal);
 
 const RacingCard = memo(() => {

diff --git a/packages/user/src/components/event/racing/dashboard/chargeButton.tsx b/packages/user/src/components/event/racing/dashboard/chargeButton.tsx
@@ -15,10 +15,10 @@ const ChargeButton = memo(({ onCharge }: ChargeButtonProps) => {
 		<button
 			type="button"
 			onClick={onCharge}
-			className="bg-skyblue-400 absolute bottom-12 right-[27px] top-[130px] z-50 flex h-[140px] min-w-[150px] flex-col items-center justify-center gap-3 break-keep rounded-[25px] px-6 py-4 text-center font-medium text-yellow-900 opacity-90 shadow-lg"
+			className="bg-skyblue-400 absolute z-50 flex opacity-80 flex-col -bottom-[50px] w-[380px] h-[100px] items-center justify-center break-keep text-center hover:opacity-100 rounded-[16px] border border-[#82B9C6] bg-gradient-to-b from-[#00AAD2] pt-3 via-[#00313C] to-[#003E4D] active:translate-y-0 hover:translate-y-1 hover:shadow-[0_0_10px_0_rgba(255,255,255,0.50),inset_6px_0_10px_0_rgba(255,255,255,0.25)]"
 		>
-			<p className="text-body-1 font-bold">1등을 차지하는</p>
-			<h3 className="text-foreground">충전 버튼</h3>
+			<p className="text-body-1 font-extrabold text-background">1등을 차지하는</p>
+			<p className="text-heading-3  font-extrabold text-foreground">충전 버튼</p>
 		</button>
 	);
 });

diff --git a/packages/user/src/components/event/racing/index.tsx b/packages/user/src/components/event/racing/index.tsx
@@ -16,9 +16,9 @@ const RealTimeRacing = memo(
 		return (
 			<section
 				id={SECTION_ID.RACING}
-				className="container flex w-[1200px] snap-start flex-col items-center gap-4 pb-[50px] pt-[80px]"
+				className="container flex w-[1200px] snap-start flex-col items-center gap-15 pb-[50px] pt-[80px]"
 			>
-				<div className="relative h-[685px] w-full">
+				<div className="relative h-[685px] w-full flex justify-center items-center">
 					<RacingDashboard ranks={ranks} isActive={isCharged} />
 					<ChargeButton onCharge={handleCharge} />
 				</div>

diff --git a/packages/user/src/components/home/eventHero/racing/Cars.tsx b/packages/user/src/components/home/eventHero/racing/Cars.tsx
@@ -36,7 +36,7 @@ function SecondCar() {
 			<img
 				alt="2등으로 달리고 있는 차"
 				src="/images/racing/front/leisure.webp"
-				className="animate-rotate2 blur-[1.5px] absolute bottom-[70px] z-20"
+				className="animate-rotate2 absolute bottom-[70px] z-20 blur-[1.5px]"
 			/>
 		</div>
 	);
@@ -53,7 +53,7 @@ function ThirdCar() {
 			<img
 				alt="3등으로 달리고 있는 차"
 				src="/images/racing/front/pet.webp"
-				className="animate-rotate3 absolute blur-[2.5px] bottom-[70px] right-0 z-10"
+				className="animate-rotate3 absolute bottom-[70px] right-0 z-10 blur-[2.5px]"
 			/>
 		</div>
 	);

diff --git a/packages/user/src/components/home/eventHero/racing/Caspers.tsx b/packages/user/src/components/home/eventHero/racing/Caspers.tsx
@@ -15,8 +15,16 @@ function OrangeCasper() {
 			<p className="text-detail-3 text-background absolute right-[18px] top-[2px] z-10 font-medium">
 				&quot;거침없이 누구보다 빠르게&quot;
 			</p>
-			<img src="images/hero/casper/orange-bubble.webp" alt="여행 팀 캐스퍼 말풍선" className="absolute right-0" />
-			<img src="images/hero/casper/orange.webp" alt="여행 팀 캐스퍼 캐릭터" className="absolute right-[100px] w-[120px] top-[35px]" />
+			<img
+				src="images/hero/casper/orange-bubble.webp"
+				alt="여행 팀 캐스퍼 말풍선"
+				className="absolute right-0"
+			/>
+			<img
+				src="images/hero/casper/orange.webp"
+				alt="여행 팀 캐스퍼 캐릭터"
+				className="absolute right-[100px] top-[35px] w-[120px]"
+			/>
 		</div>
 	);
 }
@@ -28,9 +36,21 @@ function CreamCasper() {
 				&quot;캐스퍼의 주인공은 누구?&quot;
 			</p>
 			<img src="images/hero/casper/cream-bubble.webp" alt="펫 팀 캐스퍼 말풍선" />
-			<img src="images/hero/casper/cream.webp" alt="펫 팀 캐스퍼 캐릭터" className="absolute w-[100px] left-[90px]" />
-			<img src="images/hero/casper/lighting.webp" alt="펫 팀 캐릭터 옆 큰 번개" className="animate-sparkle absolute -top-[2px] right-[4px]" />
-			<img src="images/hero/casper/lighting.webp" alt="펫 팀 캐릭터 옆 작은 번개" className="animate-sparkle-reverse absolute right-0 top-[22px] w-[10px]" />
+			<img
+				src="images/hero/casper/cream.webp"
+				alt="펫 팀 캐스퍼 캐릭터"
+				className="absolute left-[90px] w-[100px]"
+			/>
+			<img
+				src="images/hero/casper/lighting.webp"
+				alt="펫 팀 캐릭터 옆 큰 번개"
+				className="animate-sparkle absolute -top-[2px] right-[4px]"
+			/>
+			<img
+				src="images/hero/casper/lighting.webp"
+				alt="펫 팀 캐릭터 옆 작은 번개"
+				className="animate-sparkle-reverse absolute right-0 top-[22px] w-[10px]"
+			/>
 		</div>
 	);
 }

diff --git a/packages/user/src/components/home/eventHero/racing/Effects.tsx b/packages/user/src/components/home/eventHero/racing/Effects.tsx
@@ -1,16 +1,56 @@
 export default function Effects() {
 	return (
 		<>
-			<img src="images/hero/effects/light-1.webp" alt="깜박이는 효과 1" className="animate-sparkle-reverse absolute -left-[35px] bottom-[115px] z-50" />
-			<img src="images/hero/effects/light-2.webp" alt="깜박이는 효과 2" className="animate-sparkle absolute -left-[6px] bottom-[110px] z-50" />
-			<img src="images/hero/effects/light-3.webp" alt="깜박이는 효과 3" className="animate-sparkle2 absolute bottom-[166px] left-[105px] z-50" />
-			<img src="images/hero/effects/light-4.webp" alt="깜박이는 효과 4" className="animate-sparkle-reverse absolute bottom-[110px] left-[88px] z-50" />
-			<img src="images/hero/effects/light-5.webp" alt="깜박이는 효과 5" className="animate-sparkle-reverse absolute bottom-[143px] left-[110px] z-50" />
-			<img src="images/hero/effects/light-6.webp" alt="깜박이는 효과 6" className="animate-sparkle2 absolute bottom-[130px] right-[165px] z-50" />
-			<img src="images/hero/effects/light-7.webp" alt="깜박이는 효과 7" className="animate-sparkle-reverse absolute bottom-[140px] right-[38px] z-50" />
-			<img src="images/hero/effects/light-8.webp" alt="깜박이는 효과 8" className="animate-sparkle absolute bottom-[130px] right-[17px] z-50" />
-			<img src="images/hero/effects/sparkle.webp" alt="반짝이는 효과 1" className="animate-sparkle absolute bottom-[305px] w-[60px] right-[140px] z-50" />
-			<img src="images/hero/effects/sparkle.webp" alt="반짝이는 효과 2" className="animate-sparkle-reverse absolute bottom-[300px] w-[25px] right-[120px] rotate-2 z-50" />
+			<img
+				src="images/hero/effects/light-1.webp"
+				alt="깜박이는 효과 1"
+				className="animate-sparkle-reverse absolute -left-[35px] bottom-[115px] z-50"
+			/>
+			<img
+				src="images/hero/effects/light-2.webp"
+				alt="깜박이는 효과 2"
+				className="animate-sparkle absolute -left-[6px] bottom-[110px] z-50"
+			/>
+			<img
+				src="images/hero/effects/light-3.webp"
+				alt="깜박이는 효과 3"
+				className="animate-sparkle2 absolute bottom-[166px] left-[105px] z-50"
+			/>
+			<img
+				src="images/hero/effects/light-4.webp"
+				alt="깜박이는 효과 4"
+				className="animate-sparkle-reverse absolute bottom-[110px] left-[88px] z-50"
+			/>
+			<img
+				src="images/hero/effects/light-5.webp"
+				alt="깜박이는 효과 5"
+				className="animate-sparkle-reverse absolute bottom-[143px] left-[110px] z-50"
+			/>
+			<img
+				src="images/hero/effects/light-6.webp"
+				alt="깜박이는 효과 6"
+				className="animate-sparkle2 absolute bottom-[130px] right-[165px] z-50"
+			/>
+			<img
+				src="images/hero/effects/light-7.webp"
+				alt="깜박이는 효과 7"
+				className="animate-sparkle-reverse absolute bottom-[140px] right-[38px] z-50"
+			/>
+			<img
+				src="images/hero/effects/light-8.webp"
+				alt="깜박이는 효과 8"
+				className="animate-sparkle absolute bottom-[130px] right-[17px] z-50"
+			/>
+			<img
+				src="images/hero/effects/sparkle.webp"
+				alt="반짝이는 효과 1"
+				className="animate-sparkle absolute bottom-[305px] right-[140px] z-50 w-[60px]"
+			/>
+			<img
+				src="images/hero/effects/sparkle.webp"
+				alt="반짝이는 효과 2"
+				className="animate-sparkle-reverse absolute bottom-[300px] right-[120px] z-50 w-[25px] rotate-2"
+			/>
 		</>
 	);
 }
diff --git a/packages/user/src/components/home/quizHint/HintCards.tsx b/packages/user/src/components/home/quizHint/HintCards.tsx
@@ -32,7 +32,11 @@ const HINT_CARDS = [
 export default function HintCards() {
 	return (
 		<div className="relative flex flex-col items-center gap-10">
-			<img src="images/quiz/quiz-hint-casper.webp" alt="내용을 읽고 스피드 퀴즈를 준비해보세요!" className="animate-casper-float absolute -top-[120px] right-[40px] w-[280px]" />
+			<img
+				src="images/quiz/quiz-hint-casper.webp"
+				alt="내용을 읽고 스피드 퀴즈를 준비해보세요!"
+				className="animate-casper-float absolute -top-[120px] right-[40px] w-[280px]"
+			/>
 			{HINT_CARDS.map((hint, index) => {
 				const [left, right] = determinePositions(getHintElements)(hint, index);
 				return <HintCard key={hint.details} left={left} right={right} />;