Fix/qa 2 (#67)

* feat: navbar로그아웃 기능 추가 * refactor: 로그아웃 flyout 스타일 오버라이딩 방식 변경 * feat: CDN URL수정 및 홈 화면 디자인 변경
DDD-Community · Jun 19, 2024 · 7f7bd18 · 7f7bd18
1 parent deb67b6
commit 7f7bd18
Show file tree

Hide file tree

Showing 17 changed files with 390 additions and 229 deletions.
diff --git a/src/app/(afterlogin)/(common_navbar)/_components/CardItem.tsx b/src/app/(afterlogin)/(common_navbar)/_components/CardItem.tsx
@@ -47,7 +47,7 @@ const CardItem = ({ listInfo }: Props) => {
     if (PresentationListTypeGuard(listInfo)) {
       return listInfo.thumbnailPath ? (
         <Image
-          src={`${CDN_BASE_URL}/${listInfo.thumbnailPath}`}
+          src={`${CDN_BASE_URL}${listInfo.thumbnailPath}`}
           alt={`${listInfo.id} 썸네일`}
           width={440}
           height={250}
@@ -67,7 +67,7 @@ const CardItem = ({ listInfo }: Props) => {
       ) {
         return (
           <Image
-            src={`${CDN_BASE_URL}/${listInfo.thumbnailPath}`}
+            src={`${CDN_BASE_URL}${listInfo.thumbnailPath}`}
             alt={`${listInfo.id} 썸네일`}
             width={440}
             height={250}

diff --git a/src/app/(afterlogin)/(common_navbar)/home/_components/HistoryBanner.tsx b/src/app/(afterlogin)/(common_navbar)/home/_components/HistoryBanner.tsx
@@ -19,7 +19,7 @@ const HistoryBanner = ({ presentation }: Props) => {
         <div className={styles.history__contents}>
           <div className={styles.presentation__thumbnail}>
             <Image
-              src={`${CDN_BASE_URL}/${presentation.thumbnailPath}`}
+              src={`${CDN_BASE_URL}${presentation.thumbnailPath}`}
               width={165}
               height={90}
               alt="최근 발표 이미지"

diff --git a/src/app/(afterlogin)/(common_navbar)/upload/[id]/_component/ControlButtons.tsx b/src/app/(afterlogin)/(common_navbar)/upload/[id]/_component/ControlButtons.tsx
@@ -169,7 +169,7 @@ const ControlButtons = ({
                           })}
                         >
                           <Image
-                            src={`${CDN_BASE_URL}/${item.imageFilePath}`}
+                            src={`${CDN_BASE_URL}${item.imageFilePath}`}
                             fill
                             alt="ppt이미지"
                             style={{ borderRadius: '8px' }}

diff --git a/src/app/(afterlogin)/(common_navbar)/upload/[id]/_component/UploadPpt.tsx b/src/app/(afterlogin)/(common_navbar)/upload/[id]/_component/UploadPpt.tsx
@@ -128,7 +128,7 @@ const UploadPpt = ({
           <div className={styles.pptImageSection}>
             <div className={styles.hoverSection}>
               <Image
-                src={`${CDN_BASE_URL}/${pptInfo.imageFilePath}`}
+                src={`${CDN_BASE_URL}${pptInfo.imageFilePath}`}
                 alt={`${currentPageIndex + 1}페이지 ppt 이미지`}
                 fill
                 style={{ borderRadius: '16px' }}

diff --git a/src/app/(afterlogin)/_components/LogoutIcon.module.scss b/src/app/(afterlogin)/_components/LogoutIcon.module.scss
@@ -0,0 +1,48 @@
+@import '@/styles/globals';
+@import '@/styles/mixins';
+
+.container {
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  // TODO: 일반 HTML요소는 100%로 사용이 가능하지만
+  // FlyoutMenu를 사용하면 불가능해짐
+  height: 68px;
+}
+
+.menu {
+  @include pure-button;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  span {
+    color: $red-7;
+    font-size: $font-2;
+    font-weight: bolder;
+    letter-spacing: 2px;
+  }
+}
+
+.logoutList {
+  position: absolute;
+  top: 30px;
+  right: 0;
+  left: auto;
+  z-index: 2;
+  width: 120px;
+  padding: 0;
+  background: $white;
+  border: 1px solid $gray-1;
+  border-radius: 8px;
+  box-shadow: 2px 2px 3px $gray-2;
+}
+
+// .logoutList {
+//   right: 0 !important;
+//   left: auto !important;
+// }
diff --git a/src/app/(afterlogin)/_components/LogoutIcon.tsx b/src/app/(afterlogin)/_components/LogoutIcon.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import FlyoutMenu from '@/app/_components/_modules/FlyoutMenu';
+import useToggle from '@/app/_hooks/useToggle';
+import styles from './LogoutIcon.module.scss';
+import { useRouter } from 'next/navigation';
+
+const LogoutIcon = () => {
+  const flyout = useToggle();
+  const router = useRouter();
+
+  const logout = async () => {
+    // await fetch(`${ROUTE_HANDLER_BASE_URL}/api/get/logout`, {
+    //   method: 'GET',
+    // });
+    router.push(`/logout`);
+    router.refresh();
+  };
+
+  return (
+    <div className={styles.container}>
+      <FlyoutMenu context={flyout}>
+        <FlyoutMenu.ToggleButton>
+          <i>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="30"
+              height="30"
+              viewBox="0 0 30 30"
+              fill="none"
+            >
+              <path
+                d="M15 15C19.1438 15 22.5 11.6438 22.5 7.5C22.5 3.35625 19.1438 0 15 0C10.8562 0 7.5 3.35625 7.5 7.5C7.5 11.6438 10.8562 15 15 15ZM15 18.75C9.99375 18.75 0 21.2625 0 26.25V30H30V26.25C30 21.2625 20.0063 18.75 15 18.75Z"
+                fill="#BFBFBF"
+              />
+            </svg>
+          </i>
+        </FlyoutMenu.ToggleButton>
+        <FlyoutMenu.MenuList className={styles.logoutList}>
+          <FlyoutMenu.MenuItem>
+            <button className={styles.menu} onClick={logout}>
+              <span>로그아웃</span>
+            </button>
+          </FlyoutMenu.MenuItem>
+        </FlyoutMenu.MenuList>
+      </FlyoutMenu>
+    </div>
+  );
+};
+
+export default LogoutIcon;
diff --git a/src/app/(afterlogin)/_components/Navbar.tsx b/src/app/(afterlogin)/_components/Navbar.tsx
@@ -1,10 +1,11 @@
 import NavMenu from './NavMenu';
 import styles from './Navbar.module.scss';
 import LogoIcon from '@/app/_svgs/LogoIcon';
-import UserIcon from '../_svgs/UserIcon';
 
 import { serverUserApi } from '@/services/server/user';
 import { fetch_ServerAuth } from '@/services/server/fetchServer';
+import LogoutIcon from './LogoutIcon';
+import UserIcon from '../_svgs/UserIcon';
 
 const Navbar = async () => {
   // const res = await fetch_ServerAuth(`${process.env.NEXT_PUBLIC_BASE_URL_DEV}/api/accounts/me`, {
@@ -25,7 +26,8 @@ const Navbar = async () => {
         </div>
 
         <div className={styles.right}>
-          <UserIcon />
+          <LogoutIcon />
+          {/* <UserIcon /> */}
         </div>
       </div>
     </nav>

diff --git a/src/app/(afterlogin)/practice/[id]/page.module.scss b/src/app/(afterlogin)/practice/[id]/page.module.scss
@@ -120,6 +120,7 @@
     padding: 20px;
     border: 1px solid $gray-1;
     border-radius: 15px;
+    background-color: white;
   }
 }