Merge pull request #276 from ItRecode/develop

[develop] 상용서버 배포

Author: sookyeonghwang

src/apis/auth.ts

@@ -23,3 +23,7 @@ export const getIsDuplicatedNickname = (nickname: string) => {
 export const logout = () => {
   return baseInstance.post(`/member/logout`)
 }
+
+export const withdrawUser = () => {
+  return baseInstance.delete(`/member/delete`)
+}

src/assets/close_icon.svg

@@ -30,9 +30,11 @@ export default function Alert({
     <Modal visible={visible} onClose={onClose}>
       <div className="flex h-auto w-[270px] flex-col justify-center">
         <div className="flex flex-col items-center justify-center border-b border-grey-2 py-6 text-center">
-          <div className="text-base font-semibold leading-6">{mainMessage}</div>
+          <div className="text-[18px] font-semibold leading-[24px]">
+            {mainMessage}
+          </div>
           {subMessage && (
-            <div className="pt-4 text-xs font-medium text-grey-8">
+            <div className="pt-4 text-[12px] font-medium leading-[18px] text-grey-8">
               {subMessage}
             </div>
           )}

src/assets/heart_large.svg

@@ -2,7 +2,11 @@ import React from 'react'
 import { ReactComponent as Back } from '@assets/back.svg'
 import { useNavigate } from 'react-router-dom'
 
-function BackButton({ onClick }: { onClick?: () => void }) {
+const BackButton = React.memo(function BackBtn({
+  onClick,
+}: {
+  onClick?: () => void
+}) {
   const navigate = useNavigate()
 
   const handleLocateBack = () => {
@@ -18,6 +22,6 @@ function BackButton({ onClick }: { onClick?: () => void }) {
   }
 
   return <Back className="cursor-pointer" onClick={handleLocateBack} />
-}
+})
 
 export default BackButton

src/assets/moon_large.svg

@@ -48,7 +48,13 @@ function Chip({
       `}
     >
       {icon && (
-        <img className="mr-2 aspect-square w-[14px] object-cover" src={icon} />
+        <div className="mr-2 aspect-square w-[14px]">
+          <img
+            className="h-full w-full object-cover"
+            src={icon}
+            alt={message}
+          />
+        </div>
       )}
       <p className="flex items-center text-[14px] leading-none">{message}</p>
     </button>

src/components/Alert.tsx

@@ -1,12 +1,14 @@
 import React from 'react'
 import Spinner from './Spinner'
 
-export default function Loading() {
+const Loading = React.memo(function LoadingComponent() {
   return (
     <div className="flex h-full flex-col items-center justify-center">
       <Spinner size="large" />
       <h3 className="mt-8 text-base font-medium">로딩 중 이에요</h3>
       <p className="mt-3 text-xs">잠시만 기다려 주세요</p>
     </div>
   )
-}
+})
+
+export default Loading

src/components/BackButton.tsx

@@ -1,14 +1,17 @@
-import React from 'react'
+import React, { Suspense } from 'react'
 import { ReactComponent as Record_icon } from '@assets/nav_icons/record_icon.svg'
 import { Outlet, useNavigate } from 'react-router-dom'
 import NavbarItem from './NavbarItem'
+import Loading from './Loading'
 
-export default function NavBar() {
+function NavBar() {
   const navigate = useNavigate()
 
   return (
     <>
-      <Outlet />
+      <Suspense fallback={<Loading />}>
+        <Outlet />
+      </Suspense>
       <nav className="fixed bottom-0 z-20 flex h-[60px] w-full max-w-[420px] justify-between rounded-t-xl border border-solid border-grey-3 bg-white px-3 pt-1.5">
         <nav className="left-3 flex">
           <NavbarItem pageName="홈" linkSrc="/" className="mr-5" />
@@ -30,3 +33,5 @@ export default function NavBar() {
     </>
   )
 }
+
+export const MemoizedNavbar = React.memo(NavBar)

src/components/Chip.tsx

@@ -43,24 +43,28 @@ export default function NavbarItem({
         return (
           <Home_icon
             className={`${iconFormat} ${checkPathWithIconImg(linkSrc)}`}
+            aria-label={pageName}
           />
         )
       case '/collect':
         return (
           <Rank_icon
             className={`${iconFormat} ${checkPathWithIconImg(linkSrc)}`}
+            aria-label={pageName}
           />
         )
       case '/myrecord':
         return (
           <MyRecord_icon
             className={`${iconFormat} ${checkPathWithIconImg(linkSrc)}`}
+            aria-label={pageName}
           />
         )
       case '/setting':
         return (
           <Setting_icon
             className={`${iconFormat} ${checkPathWithIconImg(linkSrc)}`}
+            aria-label={pageName}
           />
         )
     }