Merge branch 'dev' into feat/#82/login-page

Author: halionaz

eslint.config.js

@@ -20,6 +20,7 @@ export default tseslint.config(
       react,
       'react-hooks': reactHooks,
       'react-refresh': reactRefresh,
+      '@tanstack/query': tanstackPlugin,
       prettier,
     },
     rules: {

package.json

@@ -21,7 +21,8 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.6.3",
-    "swiper": "^11.2.10"
+    "swiper": "^11.2.10",
+    "zustand": "^5.0.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",

src/assets/images/rental.png

@@ -6,18 +6,22 @@ export const Button = cva({
     gap: '0.625rem',
     flexShrink: '0',
     justifyContent: 'center',
+    alignItems: 'center',
     padding: '0.625rem',
     borderRadius: '0.375rem',
-    width: '100%',
+    // width: '100%',
     height: '3.125rem',
     fontFamily: 'Pretendard',
     fontSize: '1.25rem',
     fontStyle: 'normal',
     fontWeight: '500',
     lineHeight: 'normal',
     letterSpacing: '-0.05rem',
+    transition: 'background 0.3s ease-in-out',
+    cursor: 'pointer',
   },
   variants: {
+    // TODO: 언제 쓰이는 건지 이름 바꾸기
     color: {
       main: {
         backgroundColor: 'main',

src/common/components/Button/style.css.ts

@@ -0,0 +1,26 @@
+import type { ItemInfoInterface } from '@/features/detail/types';
+import Token from '@/common/components/Token';
+import { TAG_TYPES_MAP, type TagType } from '@/libs/types/item';
+
+interface Props {
+  itemInfo: ItemInfoInterface;
+}
+const ItemTokenList = ({ itemInfo }: Props) => {
+  const tags: TagType[] = [
+    ...itemInfo.transactionTypes,
+    ...itemInfo.productTypes,
+    itemInfo.color,
+    ...itemInfo.tradeMethods,
+    itemInfo.quality,
+    itemInfo.size,
+  ];
+
+  return (
+    <>
+      {tags.map(type => (
+        <Token key={type}>{TAG_TYPES_MAP[type]}</Token>
+      ))}
+    </>
+  );
+};
+export default ItemTokenList;

src/common/components/ItemTokenList/index.tsx

@@ -0,0 +1,14 @@
+import VerifyIcon from '@/libs/assets/VerifyIcon';
+
+import * as s from './style.css';
+
+// TODO: 디자인 업데이트 ... 지금 인증된 유저가 없어서 확인이 불가능 ㅋㅋ
+const SchoolVerifiedTag = () => {
+  return (
+    <span className={s.Container}>
+      <p>학교인증</p>
+      <VerifyIcon />
+    </span>
+  );
+};
+export default SchoolVerifiedTag;

src/common/components/SchoolVerifiedTag/index.tsx

@@ -0,0 +1,18 @@
+import { css } from '@styled-system/css';
+
+export const Container = css({
+  padding: '0.1rem 0.275rem',
+  fontSize: '0.625rem',
+  fontWeight: 400,
+  lineHeight: 1.4,
+  letterSpacing: '-0.025rem',
+  color: 'main',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.22rem',
+  borderRadius: '0.25rem',
+  backgroundColor: 'main-26',
+  '& > p': {
+    color: '100',
+  },
+});

src/common/components/SchoolVerifiedTag/style.css.ts

@@ -1,6 +1,7 @@
 import { css } from '@styled-system/css';
 
 export const Container = css({
+  width: 'fit-content',
   padding: '0.1875rem 0.3125rem',
   borderRadius: '4px',
   bgColor: 'main-26',

src/common/components/Token/style.css.ts

@@ -0,0 +1,22 @@
+/**
+ * 게시글 작성 시간 표시 함수
+ * Date 객체를 받아 알잘딱하게 한글을 뱉어줌
+ */
+export const getKoreanRelativeTime = (a: Date) => {
+  const milliSeconds = new Date().getTime() - a.getTime();
+  const seconds = milliSeconds / 1000;
+  const minutes = seconds / 60;
+  const hours = minutes / 60;
+  const days = hours / 24;
+  const weeks = days / 7;
+  const months = days / 30;
+  const years = days / 365;
+
+  if (seconds < 60) return `방금 전`;
+  if (minutes < 60) return `${Math.floor(minutes)}분 전`;
+  if (hours < 24) return `${Math.floor(hours)}시간 전`;
+  if (days < 7) return `${Math.floor(days)}일 전`;
+  if (weeks < 5) return `${Math.floor(weeks)}주 전`;
+  if (months < 12) return `${Math.floor(months)}개월 전`;
+  return `${Math.floor(years)}년 전`;
+};

src/common/utils/getKoreanRelativeTime.ts

@@ -0,0 +1,7 @@
+/**
+ * UTC Date를 KST Date로 변환
+ */
+export const toKST = (date: Date) => {
+  // KST : UTC + 9
+  return new Date(date.getTime() + 9 * 60 * 60 * 1000);
+};