Develop

src/assets/css/notification/notification-component.css

@@ -1,85 +1,87 @@
 .notification-dropdown {
-  position: absolute;
-  font-family: 'TheJamsil3Regular';
-  top: 100%;
-  left: 0;
-  width: 17vw; /* 드롭다운의 너비 */
-  background-color: white; /* 배경색 */
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
-  border-radius: 5px; /* 둥근 모서리 */
-  z-index: 100; /* 다른 요소들 위에 나타나도록 z-index 설정 */
-  padding: 1rem; /* 여백 */
-  box-sizing: border-box;
+    position: absolute;
+    font-family: 'TheJamsil';
+    font-weight: 300;
+    top: 100%;
+    left: 0;
+    width: 17vw; /* 드롭다운의 너비 */
+    background-color: white; /* 배경색 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
+    border-radius: 5px; /* 둥근 모서리 */
+    z-index: 100; /* 다른 요소들 위에 나타나도록 z-index 설정 */
+    padding: 1rem; /* 여백 */
+    box-sizing: border-box;
 }
 
 .notification-list {
-  max-height: 400px;
-  overflow-y: auto; /* 내용이 많을 경우 스크롤 */
+    max-height: 400px;
+    overflow-y: auto; /* 내용이 많을 경우 스크롤 */
 }
 
 .notification-item {
-  padding: 0.5rem 0;
-  border-bottom: 1px solid #eee;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid #eee;
 }
 
 .notification-message {
-  margin: 0.5rem 0;
+    margin: 0.5rem 0;
 }
 
 .notification-actions {
-  display: flex;
-  justify-content: flex-end; /* 오른쪽 정렬 */
-  gap: 0.5rem; /* 버튼 사이의 간격 */
+    display: flex;
+    justify-content: flex-end; /* 오른쪽 정렬 */
+    gap: 0.5rem; /* 버튼 사이의 간격 */
 }
 
 .notification-footer {
-  display: flex;
-  justify-content: flex-end; /* 오른쪽 정렬 */
-  margin-top: 1rem;
+    display: flex;
+    justify-content: flex-end; /* 오른쪽 정렬 */
+    margin-top: 1rem;
 }
 
 .notification-empty {
-  margin-top: 1vh;
-  text-align: center;
-  padding: 1rem;
+    margin-top: 1vh;
+    text-align: center;
+    padding: 1rem;
 }
 
 /* 재사용 가능한 버튼 스타일 */
 button {
-  cursor: pointer;
-  color: #c8c8c8;
-  font-family: 'TheJamsil3Regular';
-  font-size: 1rem;
-  /* background-color: #000; */
-  background-color: #fff;
-  /* color: #fff; */
-  border: none;
-  padding: 0.5rem 0.5rem 0rem 0.5rem;
-  border-radius: 5px;
-  transition: background-color 0.2s;
+    cursor: pointer;
+    color: #c8c8c8;
+    font-family: 'TheJamsil';
+    font-weight: 300;
+    font-size: 1rem;
+    /* background-color: #000; */
+    background-color: #fff;
+    /* color: #fff; */
+    border: none;
+    padding: 0.5rem 0.5rem 0rem 0.5rem;
+    border-radius: 5px;
+    transition: background-color 0.2s;
 
-  &:hover {
-    /* background-color: #333; */
-  }
+    &:hover {
+        /* background-color: #333; */
+    }
 }
 
 .flex-row-space-btw {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .notification-read {
-  color: #b7b7b7;
-  cursor: pointer;
+    color: #b7b7b7;
+    cursor: pointer;
 }
 
 .close {
-  color: #000;
-  cursor: pointer;
+    color: #000;
+    cursor: pointer;
 }
 
 .notification-unread {
-  color: #000;
-  cursor: pointer;
+    color: #000;
+    cursor: pointer;
 }

src/components/FooterComponent.vue

@@ -23,31 +23,31 @@
           <div class="person-info-top-text">Backend, Frontend, Infra: 이채민</div>
         </div>
         <div class="person-info-bottom-wrapper">
-          <div class="person-info-botton-text">SNS 커뮤니티, 인프라, QA</div>
+          <div class="person-info-botton-text">SNS, 인프라, QA</div>
         </div>
       </div>
       <div class="person-info-wrapper">
         <div class="person-info-top-wrapper">
           <div class="person-info-top-text">Backend, Frontend: 전종민</div>
         </div>
         <div class="person-info-bottom-wrapper">
-          <div class="person-info-botton-text">상품, 찜, 장바구니, 관리자, 경매</div>
+          <div class="person-info-botton-text">상품, 찜, 장바구니, 경매 관리자</div>
         </div>
       </div>
       <div class="person-info-wrapper">
         <div class="person-info-top-wrapper">
           <div class="person-info-top-text">Backend, Frontend: 김성중</div>
         </div>
         <div class="person-info-bottom-wrapper">
-          <div class="person-info-botton-text">프로모션, 관리자, 알림</div>
+          <div class="person-info-botton-text">프로모션, 알림</div>
         </div>
       </div>
       <div class="person-info-wrapper">
         <div class="person-info-top-wrapper">
           <div class="person-info-top-text">Backend, Frontend: 김기환</div>
         </div>
         <div class="person-info-bottom-wrapper">
-          <div class="person-info-botton-text">회원, 관리자</div>
+          <div class="person-info-botton-text">인증/인가, 회원, 상품 크롤링</div>
         </div>
       </div>
     </div>
@@ -63,4 +63,4 @@
 
 <style scoped>
 @import '@/assets/footer.css';
-</style>
+</style>

src/components/ootd/OOTDPostCardComponent.vue

@@ -7,6 +7,7 @@ import { storeToRefs } from 'pinia'
 import { togglePostLike } from '@/apis/ootd/PostLikeService'
 import { infoModal } from '@/utils/Modal'
 import { LOGIN_NEED_MSG } from '@/utils/CommonMessage'
+import { usePostStore } from '@/stores/post/PostStore'
 
 const VITE_STATIC_IMG_URL = ref<string>(import.meta.env.VITE_STATIC_IMG_URL)
 
@@ -19,6 +20,7 @@ const props = defineProps({
 })
 
 const postLikeStore = usePostLikeStore()
+const postStore = usePostStore()
 const { postLikes } = storeToRefs(postLikeStore)
 
 const likeButtonClickListener = async (postId: number, isLike: boolean | undefined) => {
@@ -47,6 +49,7 @@ const flushLikeStore = async () => {
 // 페이지 이동 시 이벤트
 onBeforeRouteLeave(async (to, from) => {
   await flushLikeStore()
+  await postStore.renewPostView()
 })
 
 const img = ref<Array<HTMLImageElement>>(new Array<HTMLImageElement>())

src/components/product/BreadCrumbComponent.vue

@@ -22,7 +22,7 @@ onMounted(initData)
 
 <template>
   <div class="breadcrumb-container">
-    <a href="/" style="font-family: 'TheJamsil1Thin'">홈</a>
+    <a href="/" style="font-family: 'TheJamsil'; font-weight: 100">홈</a>
     <div class="breadcrumbs" v-for="category in breadCrumbs">
       <p style="padding-right: 5px; padding-left: 5px">></p>
       <a :href="`/product-list?category=${category.id}&type=NORMAL`">
@@ -54,7 +54,8 @@ onMounted(initData)
   align-items: flex-start;
   justify-items: center;
 
-  font-family: 'TheJamsil1Thin';
+  font-family: 'TheJamsil';
+  font-weight: 100;
 }
 
 .breadcrumbs > a {

src/stores/post/PostStore.ts

@@ -47,14 +47,14 @@ export const usePostStore = defineStore('post', () => {
   }
 
   const renewPostView = async () => {
-    const expiryDate: Date = postViews.value.expiry
-    if (expiryDate < new Date()) {
-      const newPostViews = {
-        value: [] as number[],
-        expiry: new Date(Date.now() + 24 * 60 * 60 * 1000)
-      }
+    const expiryDate: Date = new Date(postViews.value.expiry)
+
+    const seoulTime = new Date().toLocaleString('en-US', { timeZone: 'Asia/Seoul' })
+    const currentSeoulTime = new Date(seoulTime)
+    if (expiryDate < currentSeoulTime) {
+      const newExpiryDate = new Date(currentSeoulTime.getTime() + 24 * 60 * 60 * 1000)
       postViews.value.value = []
-      postViews.value.expiry = new Date(Date.now() + 24 * 60 * 60 * 1000)
+      postViews.value.expiry = newExpiryDate
     }
   }
 

src/views/ProductListView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject, onBeforeMount, onMounted, onUnmounted, type Ref, ref, watch } from 'vue'
+import { inject, onBeforeMount, type Ref, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import type { ReadProductResponse, ReadProductSliceResponse } from '@/apis/product/ProductDto'
 import { getProductSlice } from '@/apis/product/ProductClient'
@@ -468,8 +468,9 @@ const getProductMaxDiscountPercentage = (product: ReadProductResponse) => {
 }
 
 .sort-item {
-  font-family: 'TheJamsil2Light';
+  font-family: 'TheJamsil';
   font-size: 1vw;
+  font-weight: 300;
   padding: 10px;
   cursor: pointer;
 }
@@ -503,15 +504,17 @@ const getProductMaxDiscountPercentage = (product: ReadProductResponse) => {
   align-items: center;
   background-color: #c6c6c6;
 
-  font-family: 'TheJamsil4Medium';
+  font-family: 'TheJamsil';
+  font-weight: 400;
   font-size: 1vw;
 }
 
 .brand-filter-item-value {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
-  font-family: 'TheJamsil3Regular';
+  font-family: 'TheJamsil';
+  font-weight: 300;
 
   overflow-x: auto;
   width: 100%;
@@ -552,7 +555,8 @@ const getProductMaxDiscountPercentage = (product: ReadProductResponse) => {
   justify-content: center;
   align-items: center;
   background-color: #c6c6c6;
-  font-family: 'TheJamsil4Medium';
+  font-family: 'TheJamsil';
+  font-weight: 400;
   font-size: 1vw;
 }
 
@@ -597,10 +601,10 @@ const getProductMaxDiscountPercentage = (product: ReadProductResponse) => {
   text-overflow: ellipsis;
   overflow: hidden;
   color: var(--Grayscale7, #000);
-  font-family: 'TheJamsil3Regular';
+  font-family: 'TheJamsil';
   font-size: 1.1vw;
   /*font-style: normal;*/
-  font-weight: 400;
+  font-weight: 300;
   line-height: 30px;
 }
 
@@ -610,10 +614,10 @@ const getProductMaxDiscountPercentage = (product: ReadProductResponse) => {
   text-overflow: ellipsis;
   overflow: hidden;
   color: var(--Grayscale7, #000);
-  font-family: 'TheJamsil2Light';
+  font-family: 'TheJamsil';
   font-size: 1.1vw;
   /*font-style: normal;*/
-  font-weight: 300;
+  font-weight: 200;
   line-height: 30px;
 }
 
@@ -623,10 +627,10 @@ const getProductMaxDiscountPercentage = (product: ReadProductResponse) => {
   justify-content: space-between;
   align-items: end;
   color: var(--Grayscale7, #000);
-  font-family: 'TheJamsil2Light';
+  font-family: 'TheJamsil';
   font-size: 0.9vw;
   font-style: normal;
-  font-weight: 400;
+  font-weight: 200;
   line-height: 30px;
 }
 
@@ -639,4 +643,4 @@ const getProductMaxDiscountPercentage = (product: ReadProductResponse) => {
   width: 10vw;
   height: 19.5vh;
 }
-</style>
+</style>