[Deploy] 로그아웃 기능 구현 - #117

src/app/(post)/posts/[postId]/page.module.scss

@@ -17,7 +17,7 @@
     padding: 24px;
 
     @include flexColumnStart;
-    gap: 24px;
+    gap: 40px;
 
     .postInfoArea {
       width: 100%;

src/app/(post)/posts/[postId]/page.tsx

@@ -125,7 +125,14 @@ export default function PostPage({ params: { postId } }: Props) {
                 </p>
               </div>
             </div>
-            <div className={s.review}>{menu?.menuContent}</div>
+            <div
+              className={s.review}
+              dangerouslySetInnerHTML={{
+                __html: menu?.menuContent
+                  ? menu.menuContent.replace(/\n/g, '<br>')
+                  : '',
+              }}
+            />
             {postDetails.menus.length > 1 &&
               currentMenuIndex < postDetails.menus.length - 1 && (
                 <button type="button" onClick={goToNextMenu}>

src/app/share/page.module.scss

@@ -119,6 +119,11 @@
 }
 
 /* 투표 종료 (우승 가게 페이지) */
+
+.winStoreCardAnchor {
+  width: 100%;
+}
+
 .endVoteContainer {
   display: flex;
   flex-direction: column;
@@ -130,6 +135,8 @@
     height: 200px;
     background-color: $bgBrown;
 
+    @include flexCenter;
+
     .winningMsgArea {
       @include flexCenter;
       gap: 8px;

src/app/share/page.tsx

@@ -803,18 +803,6 @@ export default function SharePage() {
             handleAddVote={handleVoteStoreClick}
             handleDeleteVote={handleCancelVote}
           />
-
-          {/* {votedStores.map((store) => {
-
-            return (
-              <VotedStoreCard
-                key={store.storeId}
-                {...store}
-                handleAddVote={handleVoteStoreClick}
-                handleDeleteVote={handleCancelVote}
-              />
-            );
-          })} */}
           <div className={s.navUpperBtnContainer}>
             <button
               className={s.myVoteDoneBtn}
@@ -836,7 +824,6 @@ export default function SharePage() {
         <ResultHeader />
         <div className={s.endVoteContainer}>
           <div className={s.top}>
-            <LiveFriends liveFriends={streamerFromStores} />
             <div className={s.winningMsgArea}>
               <KingSVG />
               <Heading
@@ -965,21 +952,6 @@ export default function SharePage() {
               </div> */}
             </div>
           )}
-
-          {/* <div className={s.voteContainer}>
-            <button
-              className={s.voteRemoveButton}
-              type="button"
-              onClick={() => {
-                if (!sessionId) return;
-
-                deleteStoreFromVoteList(sessionId, selectedStoreId);
-              }}
-            >
-              투표 삭제
-            </button>
-          </div> */}
-
           {subscribers.map((subscriber, index) => (
             <video
               style={{ display: 'none' }}
@@ -1009,20 +981,22 @@ function WinStoreCard({
   const { url } = menuImage;
 
   return (
-    <div className={s.winStoreCardContainer}>
-      <ImageFill
-        src={url}
-        id={String(storeId)}
-        alt="vote-win-store-img"
-        height="280px"
-        fill
-        borderRadius="24px"
-      />
-      <div className={s.titleArea}>
-        <p className={s.storeName}>{storeName}</p>
-        <p className={s.menuName}>{menuName}</p>
+    <Link className={s.winStoreCardAnchor} href={`/store/${storeId}`}>
+      <div className={s.winStoreCardContainer}>
+        <ImageFill
+          src={url}
+          id={String(storeId)}
+          alt="vote-win-store-img"
+          height="280px"
+          fill
+          borderRadius="24px"
+        />
+        <div className={s.titleArea}>
+          <p className={s.storeName}>{storeName}</p>
+          <p className={s.menuName}>{menuName}</p>
+        </div>
       </div>
-    </div>
+    </Link>
   );
 }
 

src/components/Header.module.scss

@@ -28,17 +28,68 @@
   .navBtnArea {
     @include flexCenter;
     gap: 16px;
-  }
-}
 
-.profileArea {
-  width: 40px;
-  height: 40px;
+    .profileContainer {
+      position: relative;
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
+      &:hover .dropdownMenu {
+        display: block;
+      }
+
+      .profileIcon {
+        cursor: pointer;
+      }
+
+      .dropdownMenu {
+        display: none;
+
+        position: absolute;
+        z-index: $dropDown;
+        right: 0;
+
+        width: 140px;
+
+        background-color: $white;
+
+        border: 1px solid $gray300;
+        border-radius: $radiusSmall;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 
-  border: 1px solid $primaryOrange;
-  border-radius: $radiusMedium;
+        .myPage {
+          display: inline-block;
+          height: 40px;
+
+          @include flexCenter;
+
+          font-size: $textMedium;
+          font-weight: $medium;
+          color: $textTitleColor;
+
+          cursor: pointer;
+        }
+
+        .logout {
+          display: inline-block;
+
+          width: 100%;
+          height: 40px;
+
+          @include flexCenter;
+
+          background-color: transparent;
+
+          cursor: pointer;
+
+          .logoutBtn {
+            background-color: transparent;
+          }
+          .text {
+            font-size: $textMedium;
+            font-weight: $medium;
+            color: $textTitleColor;
+          }
+        }
+      }
+    }
+  }
 }

src/components/Header.tsx

@@ -1,16 +1,23 @@
 'use client';
 
+import { MouseEventHandler } from 'react';
+
 import Image from 'next/image';
 import Link from 'next/link';
 import {
   usePathname,
+  useRouter,
   useSelectedLayoutSegment,
   useSelectedLayoutSegments,
 } from 'next/navigation';
 
+import { localStorageApi } from '@/services/localStorageApi';
+import { apiService } from '@/services/apiService';
+
 import s from './Header.module.scss';
 
 export default function Header() {
+  const router = useRouter();
   const segment = useSelectedLayoutSegment();
   const segments = useSelectedLayoutSegments();
   const path = usePathname();
@@ -31,6 +38,18 @@ export default function Header() {
     if (!!postid) return null;
   }
 
+  const handleClickLogout: MouseEventHandler<HTMLButtonElement> = async () => {
+    try {
+      await apiService.logout();
+      localStorageApi.setName('');
+      router.push('/login');
+    } catch (e) {
+      if (e instanceof Error) {
+        alert(e.message);
+      }
+    }
+  };
+
   return (
     <header
       className={s.container}
@@ -59,14 +78,35 @@ export default function Header() {
             }}
           />
         )}
-        <Link href="/profile">
+        <div className={s.profileContainer}>
           <Image
+            className={s.profileIcon}
             src="/newDesign/nav/user_profile.svg"
-            alt="heart-btn"
+            alt="profile-btn"
             width={24}
             height={24}
           />
-        </Link>
+          <div className={s.dropdownMenu}>
+            <Link className={s.myPage} href="/profile">
+              마이페이지
+            </Link>
+            <div className={s.logout}>
+              <button
+                type="button"
+                className={s.logoutBtn}
+                onClick={handleClickLogout}
+              >
+                <p className={s.text}>로그아웃</p>
+              </button>
+              <Image
+                src="/newDesign/sign_out.svg"
+                alt="arrow-down"
+                width={20}
+                height={20}
+              />
+            </div>
+          </div>
+        </div>
       </div>
     </header>
   );

src/components/StoreCard.module.scss

@@ -73,6 +73,8 @@
 }
 
 .votedStoreCardWrapper {
+  position: relative;
+
   width: 100%;
   height: 56px;
 
@@ -88,9 +90,15 @@
   }
 
   .removeBtn {
-    background-color: red;
-    width: 100px;
-    height: 100px;
+    position: absolute;
+    top: 0;
+    left: -12px;
+
+    background-color: $red700;
+
+    color: $white;
+
+    border-radius: 50%;
   }
 }
 

src/components/StoreCard.tsx

@@ -7,7 +7,6 @@ import { MouseEvent, MouseEventHandler, useState } from 'react';
 
 import { UserIcon } from '@/components/UserIcon';
 import ImageFill from '@/components/ui/ImageFill';
-import Image from 'next/image';
 
 import s from './StoreCard.module.scss';
 
@@ -79,8 +78,6 @@ export function VotedStoreCards({
   stores: VotedStoreCardProps[];
   handleRemoveVotedStore: MouseEventHandler<HTMLButtonElement>;
 }) {
-  console.log('in voted stores :', stores);
-
   return (
     <ul className={s.votedStoreCardsContainer}>
       {stores.map((store) => (
@@ -118,7 +115,7 @@ function VotedStoreCard({
         data-store-id={storeId}
         onClick={handleRemoveVotedStore}
       >
-        remove
+        x
       </button>
     </li>
   );

src/services/apiService.ts

@@ -68,6 +68,21 @@ class ApiService {
     return data;
   }
 
+  async logout() {
+    const res = await fetch(`${this.baseUrl}/logout`, {
+      method: 'GET',
+      credentials: 'include',
+    });
+
+    if (!res.ok) {
+      const { status, message, error } = await res.json();
+
+      throw new Error(`[${status}, ${error}] ${message}`);
+    }
+
+    return res.text();
+  }
+
   async signup({
     username,
     password,

src/styles/variables/zIndex.scss

@@ -1,4 +1,5 @@
 $header: 50;
 $footer: 50;
+$dropDown: 100;
 $modal: 500;
 $toast: 1000;