Merge pull request #72 from DevKor-github/feat/#43/step5

Author: jw0202058

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

@@ -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

@@ -1,19 +1,19 @@
-import type { ColorType, TransactionType, ProductType, QualityType, SizeType, TradeType } from '@/libs/types/item';
+import type { Color, TransactionType, ProductType, Quality, Size, TradeMethods } from '@/libs/types/item';
 import type { UserInterface } from '@/libs/types/user';
 
 export interface ItemInfoInterface {
   productTypes: ProductType[];
   transactionTypes: TransactionType[];
   title: string;
   description: string;
-  color: ColorType;
-  size: SizeType;
-  quality: QualityType;
+  color: Color;
+  size: Size;
+  quality: Quality;
   rentalFee: number;
   salePrice: number;
   deposit: number;
   location: string;
-  tradeMethods: TradeType[];
+  tradeMethods: TradeMethods[];
   canDeal: boolean;
   likeCount: number;
   chatRoomCount: number;

src/features/detail/types.ts

@@ -0,0 +1,21 @@
+// 클라이언트 -> 백엔드로 presigned url 요청
+// 캐싱 필요없고 파일을 순회, 반복문 내에서 호출해야 돼서 리액트 쿼리 훅 안 써도 될 것 같은데 선생님 의견이 궁금합니다
+
+import client from '@/common/utils/client';
+
+export const getPresignedUrl = async (file: File) => {
+  try {
+    const res = await client.get('/api/v1/item/presigned-url', {
+      params: {
+        fileName: file.name,
+        contentType: file.type,
+        fileSize: file.size,
+      },
+    });
+
+    return res.data.data;
+  } catch (error) {
+    console.error(`presigned URL 요청 실패 (${file.name}):`, error);
+    throw error;
+  }
+};

src/features/post/apis/useGetPresignedUrl.ts

@@ -0,0 +1,21 @@
+// baseUrl 무시 (외부 주소)
+
+import axios from 'axios';
+
+export const s3PutImageToUrl = async (file: File, url: string) => {
+  try {
+    const res = await axios.put(url, file, {
+      headers: { 'Content-Type': file.type },
+    });
+
+    if (![200, 201].includes(res.status)) {
+      throw new Error(`S3 responded ${res.status}`);
+    }
+  } catch (err) {
+    const msg =
+      axios.isAxiosError(err) && err.response
+        ? `S3 upload failed (${err.response.status})`
+        : 'Network error during S3 upload';
+    throw new Error(msg);
+  }
+};

src/features/post/apis/usePutPresignedUrl.ts

@@ -0,0 +1,38 @@
+import Btn from '@/common/components/Button';
+import * as s from './style.css';
+import { resetAllStores } from '../../stores/StoreReset';
+import { useNavigate } from 'react-router';
+
+interface Props {
+  onUnshow: () => void;
+}
+
+const CustomAlert = ({ onUnshow }: Props) => {
+  const navigator = useNavigate();
+
+  const onReset = () => {
+    resetAllStores();
+    navigator(-1);
+  };
+
+  return (
+    <div className={s.Filter}>
+      <div className={s.Container}>
+        <div className={s.Text}>
+          <span>지금 그만두면 진행상황이 저장되지 않아요!</span>
+          <p>정말 글 작성을 그만두실 건가요?</p>
+        </div>
+        <div className={s.Btn}>
+          <Btn onClick={onUnshow} style={{ flex: '1' }}>
+            아니오
+          </Btn>
+          <Btn color="main" onClick={onReset} style={{ width: '13.125rem' }}>
+            네, 다음에 다시 쓸게요
+          </Btn>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CustomAlert;

src/features/post/components/Alert/index.tsx

@@ -0,0 +1,56 @@
+import { css } from '@styled-system/css';
+
+export const Filter = css({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: 'rgba(0,0,0,0.60)',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  zIndex: 1000,
+  backdropFilter: 'blur(2px)',
+});
+
+export const Container = css({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '21.875rem',
+  padding: '3.125rem 1.5rem 1.25rem 1.5rem',
+  alignItems: 'center',
+  gap: '3.125rem',
+  borderRadius: '0.625rem',
+  border: '1px solid',
+  borderColor: 'systemGray5',
+  backgroundColor: 'systemGray6',
+});
+
+export const Text = css({
+  display: 'flex',
+  flexDirection: 'column',
+  textAlign: 'center',
+  fontFamily: 'Pretendard',
+  '& span': {
+    fontSize: '1rem',
+    fontWeight: 600,
+    color: '100',
+  },
+  '& p': {
+    fontSize: '0.875rem',
+    fontWeight: 400,
+    color: '80',
+  },
+  fontStyle: 'normal',
+  lineHeight: 'normal',
+  gap: '1.25rem',
+});
+
+export const Btn = css({
+  display: 'flex',
+  flex: '1',
+  justifyContent: 'flex-end',
+  w: '100%',
+  gap: '0.62rem',
+});