🔀 [fix] : conflict resolved

Author: seorang42

.github/workflows/CD.yml

@@ -3,7 +3,8 @@ name: CD for front using github actions
 
 on:
   release:
-    types: [created, edited]
+    types: [created, edited, published, released, prereleased]
+
 
 permissions:
   contents: read

src/components/common/EditInformation.vue

@@ -16,6 +16,15 @@
       <template #body>수정 사항을 삭제하고 이동하시겠습니까?</template>
     </ModalView>
 
+    <ModalView
+      :isOpen="isFailModalVisible"
+      :type="'failType'"
+      @click="failModalToggle"
+      @close="failModalToggle">
+      <template #header>{{ failHeader }}</template>
+      <template #body>{{ failBody }}</template>
+    </ModalView>
+
     <div class="profile">
       <p class="text-body text-xs font-bold">프로필 사진</p>
       <ImageContainer
@@ -61,14 +70,9 @@
         @blur="validateName" />
       <div class="mb-1">
         <span
-          v-show="isInvalid"
-          class="absolute text-red-1 text-xs font-bold mt-1"
-          >이름에는 특수문자가 포함될 수 없습니다.</span
-        >
-        <span
-          v-show="isFull"
+          v-show="isInvalid || isFull"
           class="absolute text-red-1 text-xs font-bold mt-1"
-          >이름은 1글자 이상, 10글자이하만 가능합니다.</span
+          >{{ nameError }}</span
         >
       </div>
     </div>
@@ -150,6 +154,12 @@ const nameInput = ref<HTMLInputElement | null>(null)
 
 const isModalVisible = ref(false)
 const isWarnningModalVisible = ref(false)
+const isFailModalVisible = ref(false)
+
+const failHeader = ref('')
+const failBody = ref('')
+
+const nameError = ref('')
 
 watchEffect(() => {
   if (info.value) {
@@ -160,10 +170,14 @@ watchEffect(() => {
 })
 
 const validateName = () => {
-  const regex = /[!@#$%^&*(),.?":{}|<>]/g
+  const regex = /[!@#$%^&*(),.?":{}|<>\p{Emoji}]/gu
   isInvalid.value = regex.test(name.value)
+  if (isInvalid.value == true) {
+    nameError.value = '이름에는 특수문자가 포함될 수 없습니다.'
+  }
   if (name.value.length > 10 || name.value.length < 1) {
     isFull.value = true
+    nameError.value = '이름은 1글자 이상, 10글자이하만 가능합니다.'
   } else {
     isFull.value = false
   }
@@ -199,13 +213,53 @@ const warningModalToggle = () => {
   isWarnningModalVisible.value = !isWarnningModalVisible.value
 }
 
+const failModalToggle = () => {
+  isFailModalVisible.value = !isFailModalVisible.value
+}
+
 const handleFileUpload = (event: Event) => {
   const target = event.target as HTMLInputElement
   if (target.files && target.files[0]) {
-    selectedFile.value = target.files[0]
-    previewUrl.value = URL.createObjectURL(selectedFile.value)
+    const file = target.files[0]
+
+    const allowedMimeTypes = [
+      'image/jpeg',
+      'image/pjpeg',
+      'image/png',
+      'image/gif',
+      'image/bmp',
+      'image/x-windows-bmp'
+    ]
+    const allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
+
+    const fileName = file.name.toLowerCase()
+    const fileExtension = fileName.split('.').pop()
+
+    if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
+      failHeader.value = '지원하지 않는 파일입니다'
+      failBody.value = 'jpg, jpeg, png, gif, bmp 파일만 업로드 가능합니다'
+      failModalToggle()
+      return
+    }
+    if (!allowedMimeTypes.includes(file.type)) {
+      failHeader.value = '파일 타입을 확인해주세요'
+      failBody.value = '파일 타입과 확장자명이 일치해야합니다'
+      failModalToggle()
+      return
+    }
+
+    const newFiles = Array.from(target.files).filter(file => file.size <= 5 * 1024 * 1024)
+    if (newFiles.length !== target.files.length) {
+      failHeader.value = '이미지 용량을 확인해주세요'
+      failBody.value = '이미지 용량은 5mb까지 가능합니다'
+      failModalToggle()
+      return
+    }
+
+    selectedFile.value = file
+    previewUrl.value = URL.createObjectURL(file)
+    imageDelete.value = false
   }
-  imageDelete.value = false
 }
 
 const handleFileDelete = () => {

src/components/top-bar/NotificationModal.vue

@@ -45,6 +45,11 @@
             알림을 전부 확인했습니다
           </span>
         </template>
+        <template v-slot:error>
+          <span class="flex py-4 items-center justify-center text-xs text-primary1">
+            데이터를 불러오는 중 오류가 발생했습니다. 다시 시도해 주세요.
+          </span>
+        </template>
       </InfiniteLoading>
     </div>
   </div>
@@ -83,7 +88,6 @@ interface InfiniteLoadingState {
 const loadMoreNotifications = async ($state: InfiniteLoadingState) => {
   try {
     const response = await getNotification(page.value, pageSize)
-
     if (response.isFirst) {
       notifications.value = response.content
     } else {

taskflow.yaml

@@ -0,0 +1,53 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: taskflow-front
+  annotations:
+    service.beta.kubernetes.io/openstack-internal-load-balancer: 'false'
+    loadbalancer.ke.kakaocloud.com/load-balancer-type: 'ALB'
+    loadbalancer.openstack.org/default-tls-container-ref: 'https://key-manager.kr-central-2.kakaoi.io/v1/secrets/69d8713f-192c-4bf1-8677-da9abc4b6447'
+spec:
+  selector:
+    app: taskflow-front
+  ports:
+    - protocol: TCP
+      port: 443
+      targetPort: 80
+  type: LoadBalancer
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: taskflow-front
+  labels:
+    app: taskflow-front
+spec:
+  replicas: 1
+  strategy:
+    type: RollingUpdate
+    rollingUpdate:
+      maxSurge: 1
+      maxUnavailable: 0
+  selector:
+    matchLabels:
+      app: taskflow-front
+  template:
+    metadata:
+      labels:
+        app: taskflow-front
+    spec:
+      containers:
+        - name: taskflow-front
+          image: clap.kr-central-2.kcr.dev/taskflow/taskflow-front:${IMAGE_TAG}
+          imagePullPolicy: Always
+          command: ["nginx", "-g", "daemon off;"]
+          env:
+            - name: TZ
+              value: "Asia/Seoul"
+          ports:
+            - containerPort: 80
+      restartPolicy: Always
+      nodeSelector:
+        label: "front"
+      imagePullSecrets:
+        - name: kc-cr-secret