CLAP-391 UI/UX 개선 Tony.tsx

src/api/common.ts

@@ -1,42 +1,56 @@
+import { useMemberStore } from '@/stores/member'
 import { axiosInstance, formDataAxiosInstance } from '../utils/axios'
+import { createPinia, setActivePinia, storeToRefs } from 'pinia'
+
+setActivePinia(createPinia())
+
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 
 export const patchEditInfo = async (formdata: FormData) => {
+  if (!isLogined) return
   const response = await formDataAxiosInstance.patch('/api/members/info', formdata)
   return response.data
 }
 
 export const getNotification = async (pageNum: number, sizeNum: number) => {
+  if (!isLogined) return
   const response = await axiosInstance.get(`/api/notifications?page=${pageNum}&size=${sizeNum}`)
-
   return response.data
 }
 
 export const patchNotificationRead = async (notificationId: number) => {
+  if (!isLogined) return
   const response = await axiosInstance.patch(`/api/notifications/${notificationId}`)
   return response.data
 }
 
 export const getNotifiCount = async () => {
+  if (!isLogined) return
   const response = await axiosInstance.get(`/api/notifications/count`)
   return response.data
 }
 
 export const getMainCategory = async () => {
+  if (!isLogined) return
   const response = await axiosInstance.get('/api/main-category')
   return response.data
 }
 
 export const getSubCategory = async () => {
+  if (!isLogined) return
   const response = await axiosInstance.get('/api/sub-category')
   return response.data
 }
 
 export const getLabels = async () => {
+  if (!isLogined) return
   const response = await axiosInstance.get('/api/labels')
   return response.data
 }
 
 export const getCategory = async () => {
+  if (!isLogined) return
   const response = await axiosInstance.get('/api/category')
   return response.data
 }

src/assets/styles.css

@@ -38,7 +38,7 @@ body {
 }
 
 .button-large {
-  @apply flex w-full py-3 font-bold border rounded items-center justify-center min-w-[138px];
+  @apply flex w-full py-3 font-semibold border rounded items-center justify-center min-w-[138px];
 }
 .button-large-default {
   @apply button-large bg-white text-disabled border-border-1 hover:bg-background-2;
@@ -51,7 +51,7 @@ body {
 }
 
 .button-medium {
-  @apply flex items-center justify-center rounded px-4 py-2 font-bold gap-1 text-xs cursor-pointer shrink-0 h-full;
+  @apply flex items-center justify-center rounded px-4 py-2 font-semibold gap-1 text-xs cursor-pointer shrink-0 h-full max-h-[34px];
 }
 .button-medium-primary {
   @apply button-medium bg-primary1 text-white hover:bg-[#6869DE];
@@ -70,7 +70,7 @@ body {
 }
 
 .button-small {
-  @apply flex items-center gap-1 text-xs font-bold;
+  @apply flex items-center gap-1 text-xs font-semibold;
 }
 .button-small-primary {
   @apply text-primary1;
@@ -93,7 +93,7 @@ body {
   @apply flex flex-col gap-1 shrink-0;
 }
 .filter-title {
-  @apply text-[10px] font-bold text-body;
+  @apply text-[10px] font-semibold text-body;
 }
 .filter-dropdown {
   @apply flex justify-center items-center w-full h-8 px-2 border-b border-border-1 relative text-xs cursor-pointer;
@@ -110,7 +110,7 @@ body {
 }
 
 .task-detail {
-  @apply text-xs text-body font-bold mb-2;
+  @apply text-xs text-body font-semibold mb-2;
 }
 
 .request-task-dropdown {
@@ -131,7 +131,7 @@ body {
   @apply max-w-1200 min-h-screen flex flex-col gap-6;
 }
 .task-management-title {
-  @apply flex w-full h-8 pl-6 gap-6 items-center text-xs bg-background-2 text-body font-bold border-b border-b-border-1;
+  @apply flex w-full h-8 pl-6 gap-6 items-center text-xs bg-background-2 text-body font-semibold border-b border-b-border-1;
 }
 .category-management-line {
   @apply flex items-center px-4 w-full h-11 border-b border-b-border-1;

src/components/charts/LineChart.vue

@@ -57,14 +57,26 @@ const teamData = {
   ]
 }
 
+const calculateStepSize = (data: number[]) => {
+  const max = Math.max(...data)
+  const min = Math.min(...data)
+  const range = max - min
+
+  if (range <= 10) return 1
+  if (range <= 100) return 5
+  if (range <= 1000) return 50
+  return Math.ceil(range / 10)
+}
+
 const options = {
   responsive: true,
   maintainAspectRatio: false,
   scales: {
     y: {
-      beginAtZero: true,
       ticks: {
-        stepSize: 1
+        stepSize: calculateStepSize(series),
+        maxTicksLimit: 10,
+        autoSkip: true
       },
       suggestedMax: Math.max(...series) + 1
     }

src/components/common/EditInformation.vue

@@ -3,7 +3,7 @@
     <ModalView
       :isOpen="isModalVisible"
       :type="'successType'"
-      @close="handleCancel">
+      @close="isModalVisible = !isModalVisible">
       <template #header>정보가 수정되었습니다</template>
     </ModalView>
 
@@ -26,20 +26,20 @@
     </ModalView>
 
     <div class="profile">
-      <p class="text-body text-xs font-bold">프로필 사진</p>
+      <p class="text-body text-xs font-semibold">프로필 사진</p>
       <ImageContainer
         class="mt-3"
         :url="previewUrl || info.profileImageUrl"
         :size="96" />
       <div class="flex gap-6">
         <label
           for="fileInput"
-          class="mt-3 text-xs text-primary1 font-bold cursor-pointer hover:underline"
+          class="mt-3 text-xs text-primary1 font-semibold cursor-pointer hover:underline"
           >변경</label
         >
         <label
           for="fileDelete"
-          class="mt-3 text-xs text-red-1 font-bold cursor-pointer hover:underline"
+          class="mt-3 text-xs text-red-1 font-semibold cursor-pointer hover:underline"
           >삭제</label
         >
       </div>
@@ -56,7 +56,7 @@
         class="hidden" />
     </div>
     <div class="flex flex-col relative">
-      <p class="text-body text-xs font-bold">이름</p>
+      <p class="text-body text-xs font-semibold">이름</p>
       <span class="absolute top-1 right-2 text-xs text-gray-500"> {{ name.length }} / 10 </span>
       <input
         :class="[
@@ -71,31 +71,31 @@
       <div class="mb-1">
         <span
           v-show="isInvalid || isFull"
-          class="absolute text-red-1 text-xs font-bold mt-1"
+          class="absolute text-red-1 text-xs font-semibold mt-1"
           >{{ nameError }}</span
         >
       </div>
     </div>
     <div class="flex flex-col">
-      <p class="text-body text-xs font-bold">아이디</p>
+      <p class="text-body text-xs font-semibold">아이디</p>
       <p class="mt-2">{{ info.nickname }}</p>
     </div>
     <div class="flex flex-col">
-      <p class="text-body text-xs font-bold">이메일</p>
+      <p class="text-body text-xs font-semibold">이메일</p>
       <p class="mt-2">{{ info.email }}</p>
     </div>
     <div class="flex flex-col">
-      <p class="text-body text-xs font-bold">부서</p>
+      <p class="text-body text-xs font-semibold">부서</p>
       <p class="mt-2">{{ info.departmentName }}</p>
     </div>
     <div
       v-if="info.departmentRole"
       class="flex flex-col">
-      <p class="text-body text-xs font-bold">직무</p>
+      <p class="text-body text-xs font-semibold">직무</p>
       <p class="mt-2">{{ info.departmentRole }}</p>
     </div>
     <div>
-      <p class="text-body text-xs font-bold">알림 수신 여부</p>
+      <p class="text-body text-xs font-semibold">알림 수신 여부</p>
       <div class="flex flex-col mt-2 gap-2">
         <FormCheckbox
           v-model="kakaoWorkCheck"
@@ -108,7 +108,7 @@
       </div>
     </div>
     <div>
-      <p class="text-body text-xs font-bold">비밀번호 재설정</p>
+      <p class="text-body text-xs font-semibold">비밀번호 재설정</p>
       <button
         type="button"
         class="button-medium-secondary mt-2"
@@ -279,13 +279,9 @@ const handleSubmit = async () => {
       selectedFile.value = null
     }
 
-    try {
-      await patchEditInfo(formData)
-      isModalVisible.value = true
-      await memberStore.updateMemberInfoWithToken()
-    } catch (error) {
-      console.error('요청 실패:', error)
-    }
+    await patchEditInfo(formData)
+    isModalVisible.value = true
+    await memberStore.updateMemberInfoWithToken()
   }
 }
 </script>

src/components/common/FormCheckbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-xs font-bold">
+  <div class="text-xs font-semibold">
     <p class="text-body mb-2">{{ labelName }}</p>
     <div
       @click="!isDisabled && updateValue()"

src/components/common/ModalView.vue

@@ -22,13 +22,13 @@
 
             <div
               v-if="$slots.header"
-              class="flex text-2xl font-bold justify-center whitespace-pre-wrap text-center">
+              class="flex text-2xl font-semibold justify-center whitespace-pre-wrap text-center">
               <slot name="header"></slot>
             </div>
 
             <div
               v-if="type != 'inputType' && $slots.header"
-              class="flex text-sm font-bold text-body justify-center whitespace-pre-wrap text-center">
+              class="flex text-sm font-semibold text-body justify-center whitespace-pre-wrap text-center">
               <slot name="body"></slot>
             </div>
           </div>

src/components/common/TaskCard.vue

@@ -19,25 +19,24 @@
       <span class="text-xs text-body">{{ data.mainCategoryName }} - {{ data.categoryName }}</span>
     </div>
     <div class="flex justify-between items-end">
-      <span class="text-xs font-bold whitespace-nowrap overflow-hidden text-ellipsis">
+      <span class="text-xs font-semibold whitespace-nowrap overflow-hidden text-ellipsis">
         {{ data.taskCode }}
       </span>
       <div class="flex flex-col gap-1 items-end">
-        <span class="text-xs font-bold text-body">{{ data.requesterDepartment }}</span>
+        <span class="text-xs font-semibold text-body">{{ data.requesterDepartment }}</span>
         <div class="flex items-center gap-1.5">
           <ImageContainer
             :url="data.requesterImageUrl"
             :size="16" />
-          <span class="text-xs font-bold">{{ data.requesterNickname }}</span>
+          <span class="text-xs font-semibold">{{ data.requesterNickname }}</span>
         </div>
       </div>
     </div>
   </div>
   <TaskDetail
     v-if="selectedID"
     :selected-id="selectedID"
-    :close-task-detail="() => handleModal(null)"
-    click.stop />
+    :close-task-detail="() => handleModal(null)" />
 </template>
 
 <script setup lang="ts">

src/components/common/TaskLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="px-2 py-0.5 text-[10px] font-bold border-2 rounded-full whitespace-nowrap"
+    class="px-2 py-0.5 text-[10px] font-semibold border-2 rounded-full whitespace-nowrap"
     :style="{ borderColor, backgroundColor }">
     {{ content }}
   </span>

src/components/common/TaskStatus.vue

@@ -3,7 +3,7 @@
     class="flex px-3 py-1 rounded-full"
     :class="bgColor">
     <span
-      class="text-xs font-bold"
+      class="text-xs font-semibold"
       :class="textColor">
       {{ statusAsText(status) }}
     </span>

src/components/common/TitleBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex justify-between items-center px-6 py-3 border-l-8 border-primary1">
-    <span class="text-2xl font-bold">{{ title }}</span>
+    <span class="text-2xl font-semibold">{{ title }}</span>
     <div
       v-if="$slots.button"
       class="flex gap-2">

src/components/common/TitleContainer.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-2 items-center">
-    <span class="text-4xl font-bold whitespace-pre-wrap text-center leading-tight">
+    <span class="text-4xl font-semibold whitespace-pre-wrap text-center leading-tight">
       {{ title }}
     </span>
     <span class="whitespace-pre-wrap text-body text-center">{{ content }}</span>

src/components/filters/FilterCategory.vue

@@ -20,7 +20,7 @@
             :key="category.mainCategoryId"
             :class="
               (main as number[]).includes(category.mainCategoryId)
-                ? 'bg-primary1 text-white font-bold'
+                ? 'bg-primary1 text-white font-semibold'
                 : 'hover:bg-background-2'
             "
             @click="() => onMainClick(category)">
@@ -50,7 +50,7 @@
             :key="category.name">
             <div class="w-full flex items-center gap-2">
               <div class="h-[1px] grow bg-border-2" />
-              <span class="text-[10px] font-bold text-disabled">
+              <span class="text-[10px] font-semibold text-disabled">
                 {{ category.name }}
               </span>
               <div class="h-[1px] grow bg-border-2" />
@@ -61,7 +61,7 @@
               :key="subCategory.subCategoryId"
               :class="
                 (sub as number[]).includes(subCategory.subCategoryId)
-                  ? 'bg-primary1 text-white font-bold'
+                  ? 'bg-primary1 text-white font-semibold'
                   : 'hover:bg-background-2'
               "
               @click="() => onSubClick(subCategory.subCategoryId)">

src/components/filters/FilterDropdownMulti.vue

@@ -20,7 +20,7 @@
           :key="option.value"
           :class="
             (value as string[]).includes(option.value)
-              ? 'bg-primary1 text-white font-bold'
+              ? 'bg-primary1 text-white font-semibold'
               : 'hover:bg-background-2'
           "
           @click="() => onOptionClick(option.value)">

src/components/icons/NotificationIcon.vue

@@ -18,7 +18,7 @@
     </svg>
     <div
       v-if="newNotification"
-      class="absolute top-0 right-0 w-5 h-5 rounded-full bg-red-1 text-white font-bold text-[10px] flex justify-center items-center">
+      class="absolute top-0 right-0 w-5 h-5 rounded-full bg-red-1 text-white font-semibold text-[10px] flex justify-center items-center">
       {{ newNotification < 100 ? newNotification : 99 }}
     </div>
   </div>

src/components/lists/ListBarTab.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="text-xs font-bold text-body gap-[2px] flex items-center"
+    class="text-xs font-semibold text-body gap-[2px] flex items-center"
     :style="{ width: width ? `${width}px` : '' }"
     :class="`${!width && 'grow'} ${justifyCenter && 'justify-center'}`">
     {{ content }}

src/components/lists/ListPagination.vue

@@ -21,7 +21,7 @@
       type="button"
       :key="page"
       class="w-6 h-6 flex justify-center items-center rounded text-sm"
-      :class="page === pageNumber ? 'text-white font-bold bg-primary1' : 'hover:bg-primary2'"
+      :class="page === pageNumber ? 'text-white font-semibold bg-primary1' : 'hover:bg-primary2'"
       @click="onNumClick(page)">
       {{ page }}
     </button>