Merge pull request #61 from DDD-Community/feature/second-qa

[Feature/QA] 2차 QA
DDD-Community · Jul 24, 2024 · 9a449e6 · 9a449e6
2 parents 4d8a2f1 + 5f5efc4
commit 9a449e6
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 33 deletions.
diff --git a/src/app/(board)/board/create/components/BoardNameForm.tsx b/src/app/(board)/board/create/components/BoardNameForm.tsx
@@ -35,7 +35,7 @@ const BoardNameForm = ({ children }: { children: ReactNode }) => {
   return (
     <>
       <div>
-        <div className="text-gray-900 text-lg font-thin leading-6 py-9 text-center">
+        <div className="py-9 text-center text-xl font-thin leading-8 text-gray-900">
           보드 주제를 정해주세요!
         </div>
         <TextInput

diff --git a/src/app/(board)/board/create/components/BoardNameRecommendations.tsx b/src/app/(board)/board/create/components/BoardNameRecommendations.tsx
@@ -8,7 +8,7 @@ import { ReactNode } from 'react'
 
 const Tag = ({ children }: { children: ReactNode }) => {
   return (
-    <div className="border border-gray-900 bg-gray-0 text-xxs rounded-[36px] h-[26px] flex items-center justify-center px-2.5 first:ml-2 gap-1.5">
+    <div className="flex h-[26px] items-center justify-center gap-1.5 rounded-[36px] border border-gray-900 bg-gray-0 px-2.5 text-xxs first:ml-2">
       {children}
     </div>
   )
@@ -36,15 +36,15 @@ const RecommendationBtns = ({
 
   return (
     <div className="relative flex w-screen max-w-md overflow-x-hidden">
-      <div className={`${animationClass} whitespace-nowrap flex gap-2`}>
+      <div className={`${animationClass} flex gap-2 whitespace-nowrap`}>
         {recommendations.map((recommendation) => (
           <Tag key={recommendation.title}>
             {recommendation.icon}
             {recommendation.title}
           </Tag>
         ))}
       </div>
-      <div className={`${delayedAnimationClass} whitespace-nowrap flex gap-2`}>
+      <div className={`${delayedAnimationClass} flex gap-2 whitespace-nowrap`}>
         {recommendations.map((recommendation) => (
           <Tag key={recommendation.title}>
             {recommendation.icon}
@@ -89,10 +89,10 @@ const BoardNameRecommendations = () => {
 
   return (
     <div>
-      <div className="text-gray-400 text-xs text-center my-5">
+      <div className="my-5 text-center text-sm leading-4 text-gray-400">
         다른 사용자들은 이런 보드를 만들었어요
       </div>
-      <div className="flex flex-col gap-3 mb-20">
+      <div className="mb-20 flex flex-col gap-3">
         <RecommendationBtns
           recommendations={topRecommendations}
           direction="left"

diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
@@ -7,15 +7,15 @@ import TotalCount from './components/TotalCount'
 
 const HomePage = () => {
   return (
-    <div className="fixed left-0 right-0 max-w-md mx-auto h-dvh px-5 flex flex-col items-center justify-between bg-cover bg-[url('/images/home.png')]">
-      <div className="pt-12 overscroll-none">
+    <div className="fixed left-0 right-0 mx-auto flex h-dvh max-w-md flex-col items-center justify-between bg-[url('/images/home.png')] bg-cover px-5">
+      <div className="overscroll-none pt-12">
         <PolaroidsIcon className="m-auto" />
-        <span className="pt-2 font-jooree text-sm leading-4 block text-center m-auto">
+        <span className="m-auto block pt-2 text-center font-jooree text-sm leading-4">
           함께 꾸미는 폴라로이드 보드
         </span>
         <Image src={PolaboLogo} priority alt="logo" className="px-20 py-0.5" />
       </div>
-      <div className="flex flex-col w-full items-center mb-[30px]">
+      <div className="mb-[30px] flex w-full flex-col items-center">
         <TotalCount />
         <CreateBoardBtn />
         <CopyLinkBtn />

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -53,8 +53,10 @@ export default function RootLayout({
       <body
         className={`${PretendVariable.variable} ${Jooree.variable} ${Hesom.variable}`}
       >
-        <main className="mx-auto max-w-md font-pretendard bg-gray-0">{children}</main>
-        <div className="fixed top-0 left-0 -z-10 bg-gray-200 w-screen h-dvh" />
+        <main className="mx-auto max-w-md bg-gray-0 font-pretendard">
+          {children}
+        </main>
+        <div className="fixed left-0 top-0 -z-10 h-dvh w-screen bg-gray-200" />
         <div className="font-pretendard" id="modal-root" />
       </body>
     </html>

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -32,7 +32,7 @@ const ModalOverlay = ({
 
   return (
     <div
-      className={`fixed inset-0 flex justify-center items-center bg-gray-900/60 ${
+      className={`fixed inset-0 flex items-center justify-center bg-gray-900/60 ${
         isVisible ? 'opacity-100' : 'opacity-0'
       }`}
       onClick={handleClick}
@@ -83,13 +83,13 @@ const CenterModal = ({
   children: ReactNode
 }) => {
   return (
-    <div className="fixed max-w-[300px] pt-10 w-4/5 bg-gray-0 rounded-lg flex flex-col justify-items-start items-start shadow-lg">
+    <div className="fixed flex w-4/5 max-w-[300px] flex-col items-start justify-items-start rounded-lg bg-gray-0 pt-10 shadow-lg">
       {icon && (
-        <div className="absolute -top-[0%] left-[50%] -translate-y-1/2 -translate-x-1/2">
+        <div className="absolute -top-[0%] left-[50%] -translate-x-1/2 -translate-y-1/2">
           {icon}
         </div>
       )}
-      <div className="flex flex-col w-full justify-center items-center">
+      <div className="flex w-full flex-col items-center justify-center">
         {children}
       </div>
     </div>
@@ -106,12 +106,12 @@ const BottomModal = ({
   const { isVisible } = useContext(ModalContext)
   return (
     <div
-      className={`fixed w-full bg-gray-0 bottom-0 rounded-t-[20px] flex flex-col justify-items-start items-start shadow-lg ${isVisible ? 'translate-y-0' : 'translate-y-full'}`}
+      className={`fixed bottom-0 flex w-full flex-col items-start justify-items-start rounded-t-[20px] bg-gray-0 shadow-lg ${isVisible ? 'translate-y-0' : 'translate-y-full'}`}
     >
       {icon && (
-        <div className="w-full flex justify-center mt-5 mb-3">{icon}</div>
+        <div className="mb-3 mt-5 flex w-full justify-center">{icon}</div>
       )}
-      <div className="flex flex-col w-full justify-center items-center">
+      <div className="flex w-full flex-col items-center justify-center">
         {children}
       </div>
     </div>
@@ -127,15 +127,15 @@ const ModalClose = () => {
 
 const ModalBodyTitle = ({ children }: { children: ReactNode }) => {
   return (
-    <div className="font-semibold text-md font-semiBold leading-6 whitespace-pre text-center">
+    <div className="font-semibold whitespace-pre text-center text-md font-semiBold leading-6">
       {children}
     </div>
   )
 }
 
 const ModalBodyContent = ({ children }: { children: ReactNode }) => {
   return (
-    <div className="w-40 text-center whitespace-pre text-gray-700 mt-2 text-xs leading-4">
+    <div className="mt-2 w-40 whitespace-pre text-center text-xs leading-4 text-gray-700">
       {children}
     </div>
   )
@@ -159,7 +159,7 @@ const CenterModalConfirm = ({
     <Button
       variant="primary"
       size="md"
-      className="my-4 flex justify-center items-center gap-1"
+      className="my-4 flex items-center justify-center gap-1"
       onClick={clickHandler}
     >
       {confirmText}
@@ -182,7 +182,7 @@ const BottomModalConfirm = ({
   }
 
   return (
-    <div className="my-4 w-full flex">
+    <div className="my-4 flex w-full">
       <Button
         variant="primary"
         size="lg"
@@ -213,12 +213,12 @@ const CenterConfirmCancel = ({
 
   return (
     <div className="my-4 flex gap-1.5">
-      <Button variant="secondary" size="sm" onClick={clickHandler}>
-        {confirmText}
-      </Button>
-      <Button variant="primary" size="sm" onClick={onClose}>
+      <Button variant="secondary" size="sm" onClick={onClose}>
         {cancelText}
       </Button>
+      <Button variant="primary" size="sm" onClick={clickHandler}>
+        {confirmText}
+      </Button>
     </div>
   )
 }
@@ -245,17 +245,17 @@ const BottomConfirmCancel = ({
         variant="secondary"
         size="md"
         className="w-[135px]"
-        onClick={clickHandler}
+        onClick={onClose}
       >
-        {confirmText}
+        {cancelText}
       </Button>
       <Button
         variant="primary"
         size="md"
         className="w-[135px]"
-        onClick={onClose}
+        onClick={clickHandler}
       >
-        {cancelText}
+        {confirmText}
       </Button>
     </div>
   )

diff --git a/src/components/TextInput/index.tsx b/src/components/TextInput/index.tsx
@@ -26,7 +26,7 @@ const TextInput = ({
   )
 
   return (
-    <div className={`w-60 ${hasError ? 'text-negative' : ''}`}>
+    <div className={`w-[264px] ${hasError ? 'text-negative' : ''}`}>
       <div className={borderClass}>
         <div className="mr-2">
           {hasError ? <ExitIcon className="text-negative" /> : <PinIcon />}
@@ -37,7 +37,7 @@ const TextInput = ({
           onChange={(e: ChangeEvent<HTMLInputElement>) =>
             setValue(e.target.value)
           }
-          className="flex-1 outline-none p-1 bg-transparent"
+          className="flex-1 bg-transparent p-1 outline-none"
         />
       </div>
       <div className="text-right text-xs">