CLAP-223 TopBar 알림, 프로필 모달 UI 구현

src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import TopBar from './components/TopBar.vue'
+import TopBar from './components/top-bar/TopBar.vue'
 import TheView from './layout/TheView.vue'
 </script>
 

src/components/request-task/RequestTask.vue

@@ -4,13 +4,13 @@
       v-model="category1"
       :options="mainCategoryArr"
       :label-name="'1차 카테고리'"
-      :isInvalidate="isInvalidate"
+      :placeholderText="'1차 카테고리를 선택해주세요'"
       :isDisabled="false" />
     <CategoryDropDown
       v-model="category2"
       :options="afterSubCategoryArr"
       :label-name="'2차 카테고리'"
-      :is-invalidate="isInvalidate"
+      :placeholderText="'2차 카테고리를 선택해주세요'"
       :isDisabled="!category1" />
     <RequestTaskInput
       v-model="title"
@@ -42,7 +42,6 @@ import type { Category, SubCategory } from '@/types/common'
 import { onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
-import ModalView from '../ModalView.vue'
 import CategoryDropDown from './CategoryDropDown.vue'
 import RequestTaskFileInput from './RequestTaskFileInput.vue'
 import RequestTaskInput from './RequestTaskInput.vue'
@@ -112,7 +111,6 @@ const handleSubmit = async () => {
   }
   try {
     const res = await postTaskRequest(formData)
-    isModalVisible.value = true
     console.error('요청 성공:', res)
   } catch (error) {
     console.error('요청 실패:', error)

src/components/top-bar/NotificationModal.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    v-if="isOpen"
+    class="fixed inset-0 flex z-50 justify-center"
+    @click.self="closeModal">
+    <div
+      class="flex relative w-[1200px] h-[72px] bg-opacity-15"
+      @click.self="closeModal">
+      <div
+        class="absolute right-6 top-[72px] h-60 w-80 bg-white rounded-lg shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
+        <div class="flex relative px-4 pt-3 pb-2 border-b border-border-2">
+          <p class="text-body font-bold text-xs">알림</p>
+          <div class="absolute right-4">
+            <div class="flex items-center">
+              <button class="flex items-center">
+                <CommonIcons
+                  :name="smallCheckIcon"
+                  class="w-2.5 h-1.5 mr-1 fill-primary1" />
+                <p class="font-bold text-primary1 text-xs">모두 읽음</p>
+              </button>
+              <CommonIcons
+                :name="closeIcon"
+                class="ml-2 cursor-pointer"
+                @click="closeModal" />
+            </div>
+          </div>
+        </div>
+        <div class="max-h-[186px] flex flex-col h-full overflow-y-auto">
+          <div class="overflow-y-scroll flex"></div>
+          <button :class="['flex flex-col border-b py-3 px-4', { 'bg-primary2': isCheck }]">
+            <p class="text-xs text-body font-bold">{{ title }}</p>
+            <div class="flex text-xs pt-2">
+              <span class="text-black">
+                <span class="text-primary1 font-bold">"{{ taskTitle }}"</span>
+                &nbsp;요청이&nbsp;
+                <span class="text-primary1 font-bold">{{ message }}</span>
+                &nbsp;상태로 변경 되었습니다
+              </span>
+            </div>
+          </button>
+          <button :class="['flex flex-col border-b py-3 px-4', { 'bg-primary2': !isCheck }]">
+            <p class="text-xs text-body font-bold">{{ title }}</p>
+            <div class="flex text-xs pt-2">
+              <span class="text-black">
+                <span class="text-primary1 font-bold">"{{ taskTitle }}"</span>
+                &nbsp;요청이&nbsp;
+                <span class="text-primary1 font-bold">{{ message }}</span>
+                &nbsp;상태로 변경 되었습니다
+              </span>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import CommonIcons from '../common/CommonIcons.vue'
+import { smallCheckIcon, closeIcon } from '@/constants/iconPath'
+const props = defineProps<{
+  isOpen: boolean
+}>()
+
+const title = ref('작업 상태 변경 알림')
+const taskTitle = ref('VM 생성 요청')
+const message = ref('진행 중')
+const isCheck = ref(true)
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const closeModal = () => {
+  emit('close')
+}
+</script>

src/components/top-bar/ProfileModal.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    v-if="isOpen"
+    class="fixed inset-0 flex z-50 justify-center"
+    @click.self="closeModal">
+    <div
+      class="flex relative w-[1200px] h-[72px] bg-opacity-15"
+      @click.self="closeModal">
+      <div
+        class="absolute w-60 bg-white right-6 top-[72px] rounded-lg shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
+        <div
+          class="flex items-center justify-center relative px-6 py-8 border-b bg-primary2 border-border-2">
+          <div class="flex flex-col items-center justify-center">
+            <div class="w-24 h-24 bg-background-1 rounded-full mb-6"></div>
+            <div>
+              <div class="flex flex-col justify-center items-center w-[172px]">
+                <p class="text-xs text-body font-bold">{{ name }}</p>
+                <p class="text-black">{{ nickname }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <button
+          @click="handleEdit"
+          type="button"
+          class="flex w-full py-4 px-6 text-sm text-black font-bold border-b border-border-2">
+          내 정보 수정
+        </button>
+        <button
+          @click="handleLogout"
+          type="button"
+          class="flex w-full py-4 px-6 text-sm text-red-1 font-bold">
+          로그아웃
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const props = defineProps<{
+  isOpen: boolean
+}>()
+
+const name = ref('벡지연')
+const nickname = ref('Chloe.yeon')
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const closeModal = () => {
+  emit('close')
+}
+const handleEdit = () => {
+  router.push('/edit-information')
+  emit('close')
+}
+const handleLogout = () => {
+  // 로그아웃 API 추가 필요
+}
+</script>

src/components/SideBar.vue → src/components/top-bar/SideBar.vue

@@ -68,7 +68,7 @@
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
 import { computed } from 'vue'
-import CommonIcons from './common/CommonIcons.vue'
+import CommonIcons from '../common/CommonIcons.vue'
 import { hamburgerIcon } from '@/constants/iconPath'
 import { SIDE_USER_MENU, SIDE_MANAGER_MENU, SIDE_ADMIN_MENU } from '@/constants/menu'
 import { useMemberStore } from '@/stores/member'

src/components/top-bar/TopBar.vue

@@ -0,0 +1,82 @@
+<template>
+  <NotificationModal
+    :isOpen="isNotifiVisible"
+    @close="toggleNotifi" />
+  <ProfileModal
+    :isOpen="isProfileVisible"
+    @close="toggleProfile" />
+  <div class="fixed w-full bg-white text-black py-2 border-b border-border-1">
+    <div
+      class="max-w-[1200px] min-w-[1024px] mx-auto px-6 flex w-full justify-between items-center">
+      <div class="flex justify-center items-center gap-6 h-full">
+        <button
+          type="button"
+          v-show="isLogined"
+          @click="isSideOpen = true">
+          <CommonIcons :name="hamburgerIcon" />
+        </button>
+        <img src="/MainLogo.svg" />
+      </div>
+      <div
+        v-show="isLogined"
+        class="flex items-center gap-6">
+        <button
+          type="button"
+          @click="toggleNotifi">
+          <NotificationIcon :new-notification="12" />
+        </button>
+        <button
+          type="button"
+          @click="toggleProfile">
+          <img
+            v-if="info?.imageUrl"
+            class="rounded-[50%] w-10 h-10"
+            :src="info.imageUrl"
+            alt="프로필 이미지" />
+          <div
+            v-else
+            class="rounded-[50%] bg-zinc-100 p-5" />
+        </button>
+      </div>
+    </div>
+  </div>
+  <SideBar
+    v-if="isSideOpen"
+    @close="onCloseSide" />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import CommonIcons from '../common/CommonIcons.vue'
+import SideBar from './SideBar.vue'
+import { hamburgerIcon } from '../../constants/iconPath'
+import NotificationIcon from '../icons/NotificationIcon.vue'
+import { storeToRefs } from 'pinia'
+import { useMemberStore } from '@/stores/member'
+import NotificationModal from './NotificationModal.vue'
+import ProfileModal from './ProfileModal.vue'
+
+const memberStore = useMemberStore()
+const { info } = storeToRefs(memberStore)
+
+onMounted(async () => {
+  await memberStore.updateMemberInfoWithToken()
+})
+
+const isSideOpen = ref(false)
+const isLogined = ref(true)
+
+const isNotifiVisible = ref(false)
+const isProfileVisible = ref(false)
+
+const toggleNotifi = () => {
+  isNotifiVisible.value = !isNotifiVisible.value
+}
+const toggleProfile = () => {
+  isProfileVisible.value = !isProfileVisible.value
+}
+
+const onCloseSide = () => {
+  isSideOpen.value = false
+}
+</script>