Merge pull request #77 from YAPP-Github/modify/button-active

[Modify] 버튼 요소들의 active 상태 스타일 정의
YAPP-Github · Aug 9, 2024 · c0a6ca5 · c0a6ca5
2 parents 4bb6178 + 5ad5f84
commit c0a6ca5
Show file tree

Hide file tree

Showing 19 changed files with 169 additions and 115 deletions.
diff --git a/src/app/_component/LoginButton.tsx b/src/app/_component/LoginButton.tsx
@@ -2,21 +2,21 @@
 
 import { signIn } from "next-auth/react"
 
-import Button from "@/common/Button"
 import Icon from "@/common/Icon"
+import SquareButton from "@/common/SquareButton"
 
 const LoginButton = () => {
   const handleSignIn = async () => {
     await signIn("kakao", { callbackUrl: "/scanner" })
   }
 
   return (
-    <Button
+    <SquareButton
       onClick={handleSignIn}
       className="w-full bg-kakao-600 text-gray-1000 active:bg-kakao-700">
       <Icon name={"kakaoLogo"} size={28}></Icon>
       카카오로 3초만에 계속하기
-    </Button>
+    </SquareButton>
   )
 }
 

diff --git a/src/app/album/[id]/_component/Dialog.tsx b/src/app/album/[id]/_component/Dialog.tsx
@@ -1,4 +1,4 @@
-import Button from "@/common/Button"
+import SquareButton from "@/common/SquareButton"
 
 interface DeleteDialogProps {
   title: string
@@ -23,22 +23,22 @@ export const Dialog = ({
           <p className="tp-body1-regular mt-3 text-gray-600">{desc}</p>
         </div>
         <div className="mt-7 flex w-full gap-3">
-          <Button
+          <SquareButton
             className="flex-1"
             variant="solid"
             size="large"
             theme="gray"
             onClick={onClose}>
             닫기
-          </Button>
-          <Button
+          </SquareButton>
+          <SquareButton
             className="flex-1"
             variant="solid"
             size="large"
             theme="red"
             onClick={onConfirm}>
             {confirmBtnContext}
-          </Button>
+          </SquareButton>
         </div>
       </div>
     </div>

diff --git a/src/app/album/[id]/_component/ImageDetail.tsx b/src/app/album/[id]/_component/ImageDetail.tsx
@@ -4,8 +4,8 @@ import Image from "next/image"
 import { useState } from "react"
 import Slider from "react-slick"
 
-import Button from "@/common/Button"
 import Icon from "@/common/Icon"
+import SquareButton from "@/common/SquareButton"
 import { fullDateStr } from "@/utils"
 
 import { PhotoInfo } from "../../types"
@@ -71,12 +71,9 @@ export const ImageDetail = ({
       <div className="fixed left-0 top-0 z-10 flex h-dvh w-dvw justify-center bg-gray-900">
         <div className="flex w-full max-w-[390px] flex-col">
           <header className="tp-body1-regular flex w-full items-center justify-between p-4 py-[14px]">
-            <Icon
-              name="altArrowLeftOutline"
-              size={28}
-              color="white"
-              onClick={onClose}
-            />
+            <button onClick={onClose}>
+              <Icon name="altArrowLeftOutline" size={28} color="white" />
+            </button>
             <span className="text-white">
               {idx + 1} / {photos.length}
             </span>
@@ -101,13 +98,13 @@ export const ImageDetail = ({
             </Slider>
           </div>
           <div className="w-full p-6 pb-11 pt-3">
-            <Button
+            <SquareButton
               color="green"
               className="w-full"
               onClick={() => handleDownload(photos[idx].photoUrl)}>
               <Icon name="downloadBold" size={28} color="white" />
               <span className="mr-[6px]">다운로드 받기</span>
-            </Button>
+            </SquareButton>
           </div>
         </div>
       </div>

diff --git a/src/app/album/[id]/_component/PhotoAddButton.tsx b/src/app/album/[id]/_component/PhotoAddButton.tsx
@@ -2,6 +2,7 @@
 
 import { useRouter } from "next/navigation"
 
+import Button from "@/common/Button"
 import Icon from "@/common/Icon"
 
 interface PhotoAddButtonProps {
@@ -15,10 +16,12 @@ export const PhotoAddButton = ({ albumId }: PhotoAddButtonProps) => {
   }
 
   return (
-    <button
-      className="mb-[13px] flex h-[165px] w-[165px] items-center justify-center rounded-xl border border-gray-200 bg-gray-100"
-      onClick={onClick}>
-      <Icon name="galleryAddOutline" size={56} color="gray-300" />
-    </button>
+    <Button
+      onClick={onClick}
+      className="h-[165px] w-[165px] overflow-hidden rounded-xl">
+      <div className="mb-[13px] flex h-[165px] w-[165px] items-center justify-center rounded-xl border border-gray-200 bg-gray-100">
+        <Icon name="galleryAddOutline" size={56} color="gray-300" />
+      </div>
+    </Button>
   )
 }
diff --git a/src/app/album/_component/NewAlbumButton.tsx b/src/app/album/_component/NewAlbumButton.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link"
 
+import Button from "@/common/Button"
 import Icon from "@/common/Icon"
 
 export const NewAlbumButton = () => {
@@ -8,10 +9,12 @@ export const NewAlbumButton = () => {
       href="/album/create"
       aria-label="새 앨범 만들기"
       className="fixed bottom-[114px] left-[calc(100%/2-79px)]">
-      <div className="flex items-center gap-2 rounded-full bg-green-600 p-5 py-3 text-white">
-        <span>새 앨범 만들기</span>
-        <Icon name="widgetAddOutline" size={20} color="white" />
-      </div>
+      <Button className="rounded-full">
+        <div className="flex items-center gap-2 rounded-full bg-green-600 p-5 py-3 text-white">
+          <span>새 앨범 만들기</span>
+          <Icon name="widgetAddOutline" size={20} color="white" />
+        </div>
+      </Button>
     </Link>
   )
 }
diff --git a/src/app/album/create/_components/AlbumEditSection.tsx b/src/app/album/create/_components/AlbumEditSection.tsx
@@ -4,7 +4,7 @@ import { useSearchParams } from "next/navigation"
 import { useState } from "react"
 
 import AlbumItem from "@/common/AlbumItem"
-import Button from "@/common/Button"
+import SquareButton from "@/common/SquareButton"
 
 import { AlbumType, AlbumValue } from "../../types"
 import { usePostAlbum } from "../hooks/useAlbum"
@@ -56,12 +56,12 @@ export function AlbumEditSection({
       </div>
       <div className="fixed bottom-0 flex w-full max-w-[430px] flex-col items-center">
         <AlbumTypeSelectTab type={type} handleType={handleType} />
-        <Button
+        <SquareButton
           className="mb-11 mt-3 w-[calc(100%-3rem)]"
           onClick={handleSubmit}
           disabled={!value.name.length}>
           다음으로
-        </Button>
+        </SquareButton>
       </div>
     </>
   )

diff --git a/src/app/album/create/_components/Header.tsx b/src/app/album/create/_components/Header.tsx
@@ -33,6 +33,8 @@ function Back() {
   const router = useRouter()
 
   return (
-    <Icon name="altArrowLeftOutline" size={28} onClick={() => router.back()} />
+    <button onClick={() => router.back()}>
+      <Icon name="altArrowLeftOutline" size={28} />
+    </button>
   )
 }
diff --git a/src/app/profile/_components/ListItem.tsx b/src/app/profile/_components/ListItem.tsx
@@ -50,11 +50,11 @@ const ListItem = () => {
 
           {items.map((item, index) => (
             <li key={index}>
-              <Button
-                onClick={() => handleClick(item)}
-                className="flex h-[54px] w-full items-center justify-between bg-white pl-[32px] pr-[24px]">
-                <p className="tp-body1-regular text-gray-600">{item.label}</p>
-                <Icon name="arrowRight" size={24} color="gray-500" />
+              <Button onClick={() => handleClick(item)} className="w-full">
+                <div className="flex h-[54px] w-full items-center justify-between px-6">
+                  <p className="tp-body1-regular text-gray-600">{item.label}</p>
+                  <Icon name="arrowRight" size={24} color="gray-500" />
+                </div>
               </Button>
             </li>
           ))}

diff --git a/src/app/scanner/_component/PhotoModal.tsx b/src/app/scanner/_component/PhotoModal.tsx
@@ -4,8 +4,8 @@ import { useRouter } from "next/navigation"
 import { useState } from "react"
 
 import { PostQrCodeResponse } from "@/app/api/photo"
-import Button from "@/common/Button"
 import Icon from "@/common/Icon"
+import SquareButton from "@/common/SquareButton"
 
 interface PhotoModalProps {
   scanInfo: PostQrCodeResponse
@@ -55,15 +55,15 @@ export const PhotoModal = ({ scanInfo, onClose }: PhotoModalProps) => {
           priority
         />
         <div className="flex w-full gap-3 p-6 py-3">
-          <Button
+          <SquareButton
             variant="weak"
             onClick={onAlreadyExistAlbumBtnClick}
             className="w-full">
             이미 만든 앨범
-          </Button>
-          <Button onClick={onNewAlbumBtnClick} className="w-full">
+          </SquareButton>
+          <SquareButton onClick={onNewAlbumBtnClick} className="w-full">
             새 앨범 추가
-          </Button>
+          </SquareButton>
         </div>
         <Icon
           name="closeCircleBold"

diff --git a/src/app/scanner/select-album/_component/Header.tsx b/src/app/scanner/select-album/_component/Header.tsx
@@ -7,12 +7,9 @@ export const Header = () => {
   const router = useRouter()
   return (
     <header className="w-full p-4 py-[14px]">
-      <Icon
-        name="altArrowLeftOutline"
-        size={28}
-        color="gray-800"
-        onClick={() => router.back()}
-      />
+      <button onClick={() => router.back()}>
+        <Icon name="altArrowLeftOutline" size={28} color="gray-800" />
+      </button>
     </header>
   )
 }
diff --git a/src/app/scanner/select-album/page.tsx b/src/app/scanner/select-album/page.tsx
@@ -7,7 +7,7 @@ import { useEffect, useState } from "react"
 import { AlbumValue } from "@/app/album/types"
 import { getAlbums, patchPhotoAlbum } from "@/app/api/photo"
 import AlbumItem from "@/common/AlbumItem"
-import Button from "@/common/Button"
+import SquareButton from "@/common/SquareButton"
 
 import { Header } from "./_component/Header"
 
@@ -84,13 +84,13 @@ const ScannerSelectAlbumPage = () => {
       </section>
       <div className="absolute bottom-0 w-full p-6 pb-11 pt-3">
         {selectedAlbum ? (
-          <Button className="w-full" onClick={onSubmit}>
+          <SquareButton className="w-full" onClick={onSubmit}>
             선택한 앨범에 추가하기
-          </Button>
+          </SquareButton>
         ) : (
-          <Button className="w-full" disabled>
+          <SquareButton className="w-full" disabled>
             앨범을 선택해주세요
-          </Button>
+          </SquareButton>
         )}
       </div>
     </main>

diff --git a/src/common/AlbumItem.tsx b/src/common/AlbumItem.tsx
@@ -60,7 +60,11 @@ function AlbumItem({
   return (
     <div
       {...props}
-      className={cn(albumItemVariants({ type, isEditable }), className)}>
+      className={cn(
+        albumItemVariants({ type, isEditable }),
+        !isEditable && "group",
+        className
+      )}>
       {isEditable ? (
         <>
           <input
@@ -79,10 +83,10 @@ function AlbumItem({
           <div className={`${cn(photoCountVariants({ type }))}`}>
             사진 {photoCount}장
           </div>
+          <div
+            className={`absolute left-0 top-0 h-full w-full rounded-2xl border-[3px] border-green-600 opacity-0 ${isSelected && "opacity-100"} group-active:opacity-100`}
+          />
 
-          {isSelected && (
-            <div className="absolute left-0 top-0 h-full w-full rounded-2xl border-[3px] border-green-600" />
-          )}
           {isNew && (
             <Badge className="absolute -left-2 -top-[10px]">New!</Badge>
           )}

diff --git a/src/common/Alert.tsx b/src/common/Alert.tsx
@@ -1,6 +1,6 @@
 import ReactDOM from "react-dom"
 
-import Button from "./Button"
+import SquareButton from "./SquareButton"
 
 interface AlertProps {
   title: string
@@ -18,7 +18,7 @@ const Alert = ({ title, description, onClose }: AlertProps) => {
             {description}
           </p>
         </div>
-        <Button onClick={onClose}>확인</Button>
+        <SquareButton onClick={onClose}>확인</SquareButton>
       </div>
     </div>,
     document.body