](https://github.com/kwons0) | [
](https://github.com/choiyoungae) | [
](https://github.com/minok9708) |
-| :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------: |
-| ๊ถ์์ | ์ต์์ | ๊น๋ฏผ์ฅ |
-| [@kwons0](https://github.com/kwons0) | [@goldegg127](https://github.com/goldegg127) | [@minok9708](https://github.com/minok9708) |
+---
+
+## ๐ก ๊ธฐํ ์๋
+
+์ค๊ณ ๊ฑฐ๋๋ ๋ง์ง๋ง, **๊ฐ๊น์ด ์ด์๋ผ๋ฆฌ ๋ฏฟ๊ณ ๊ฑฐ๋ํ๊ธฐ์ ์์ฌ์**์ด ์์์ต๋๋ค.
+๋ํ ํฅ์ ๊ณผ์ ์์ ์๊ธฐ๋ **๋ฒ๊ฑฐ๋ก์๊ณผ ๋ถํฌ๋ช
ํจ**๋ ์ค์ด๊ณ ์ถ์์ต๋๋ค.
+
+> **โ๋ ๊ฐ๊น์ด, ๋ ๊ณต์ ํ๊ฒ, ๋ ์ฌ๋ฏธ์๊ฒ!โ**
+
+๊ทธ๋์ **Bider**๋ ๊ฐ์ฅ ๊ฐ๊น์ด ์ด์๊ณผ,
+๊ฐ์ฅ ์ค๋งํธํ ๋ฐฉ์์ผ๋ก ๊ฑฐ๋ํ๋ **์๋ก์ด ์ค๊ณ ๊ฒฝ๋งค ๊ฒฝํ**์ ๋ชฉํ๋ก ํฉ๋๋ค.
+
+---
+
+## ๐ Bider๊ฐ ์ ๊ณตํ๋ ๊ฐ์น
+
+- ๐ **๊ทผ๊ฑฐ๋ฆฌ ์ ๋ขฐ** โ ๋ฐ๊ฒฝ 5km ์ ํ์ผ๋ก ์ง์ง ๋ด ๋๋ค ๊ฑฐ๋
+- โ๏ธ **๊ณต์ ํ ๊ฐ๊ฒฉ** โ ์
์ฐฐ ์์คํ
์ ํตํ ํฉ๋ฆฌ์ ์ธ ๊ฑฐ๋
+- ๐ **ํฌ๋ช
ํ ์ ๋ณด** โ ์ค์๊ฐ ์
์ฐฐ ํํฉ ํ์ธ
+- ๐บ๏ธ **์ง๊ด์ ํ์** โ ์ง๋ ์ค์ฌ UI์ ๋ฆฌ์คํธ ๋ทฐ ์ง์
+- ๐ฎ **์ฆ๊ฑฐ์ด ๊ฒฝํ** โ ํฌ์ธํธ, ์ ์ํ๊ธฐ, ์ํฌ๋ฆฟ ๊ฒฝ๋งค ๋ฑ ์ฌ๋ฏธ ์์
+
+---
+
+## โจ ํต์ฌ ๊ธฐ๋ฅ
+
+### ๐ ์์น ๊ธฐ๋ฐ ๊ฑฐ๋
-| [
](https://github.com/haruyam15) | [
](https://github.com/hayoon-shin) |
-| :-------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------: |
-| ๋ฐฐํ์ | ์ ํ์ค |
-| [@haruyam15](https://github.com/haruyam15) | [@hayoon-shin](https://github.com/hayoon-shin) |
+- ํ์๊ฐ์
ํ **์์น ๋ฑ๋ก** ํ์
+- ๋ฐ๊ฒฝ **5km** ์ด๋ด ์ํ๋ง ์กฐํ ๊ฐ๋ฅ
+- ๊ฐ๊น์ด ์ด์๊ณผ๋ง ๊ฑฐ๋ ์ฑ์ฌ โ ์ ๋ขฐ๋ ๋์ ๊ฑฐ๋
-
-
+ ๋ก๋ฉ ์ค...
;
+ }
+
+ if (alarms.length === 0) {
+ return ์๋ฆผ์ด ์์ต๋๋ค.
;
+ }
+
+ const handleCancelDelete = () => {
+ setSelectedAlarmId(undefined);
+ setIsDialogOpen(false);
+ };
+
+ const handleConfirmDelete = (alarmId?: number) => {
+ const idToDelete = alarmId || selectedAlarmId;
+ if (idToDelete) {
+ handleAlarmDelete(idToDelete);
+ setSelectedAlarmId(undefined);
+ setIsDialogOpen(false);
+ }
+ };
+
+ const handleOpen = (id: string) => {
+ // ์ด๋ฏธ ๊ฐ์ ์์ดํ
์ด ์ด๋ ค์์ผ๋ฉด ๋ฌด์
+ if (openItemId === id) return;
+
+ // ๋ค๋ฅธ ์์ดํ
์ด ์ด๋ ค์์ผ๋ฉด ์ฆ์ ๋ซ๊ณ ์ ์์ดํ
์ด๊ธฐ
+ setOpenItemId(id);
+ };
+
+ const handleClose = () => {
+ setOpenItemId(null);
+ };
+
+ const handleDeleteClick = (alarmId: number) => {
+ setSelectedAlarmId(alarmId);
+ setIsDialogOpen(true);
+ setOpenItemId(null); // ์ค์์ดํ ์ํ ๋ซ๊ธฐ
+ };
+
+ return (
+ <>
+
+ {alarms.map((alarm) => (
+
+
+
+
+ );
+};
+
+export default Alarm;
diff --git a/apps/web/app/(header)/alarm/setting/page.tsx b/apps/web/app/(header)/alarm/setting/page.tsx
new file mode 100644
index 00000000..a880b109
--- /dev/null
+++ b/apps/web/app/(header)/alarm/setting/page.tsx
@@ -0,0 +1,55 @@
+'use client';
+import { useCreatePushToken } from '@/features/alarm/setting/model/useCreatePushToken';
+import { useAlarmSetting } from '@/features/alarm/setting/useAlarmSetting';
+import { Switch } from '@repo/ui/components/Switch/Switch';
+
+const AlarmSetting = () => {
+ const {
+ isAuctionChecked,
+ isChatChecked,
+ isPointChecked,
+ isGradeChecked,
+ isStarChecked,
+ setIsAuctionChecked,
+ setIsChatChecked,
+ setIsPointChecked,
+ setIsGradeChecked,
+ setIsStarChecked,
+ } = useAlarmSetting();
+
+ const checked =
+ isAuctionChecked || isChatChecked || isPointChecked || isGradeChecked || isStarChecked;
+
+ useCreatePushToken(checked);
+
+ return (
+
+ handleOpen(alarm.id.toString())}
+ onClose={handleClose}
+ onDragChange={(dragging) => setIsDragging(dragging)}
+ btnText="์ญ์ "
+ onDelete={() => handleDeleteClick(alarm.id)}
+ >
+
+
+ ))}
+ handleAlarmClick(alarm.id, alarm.link)}
+ className={`p-box flex h-full min-h-[90px] w-full items-center justify-between py-[13px] ${alarm.isRead ? 'opacity-50' : ''}`}
+ >
+
+
+
+
+ {alarm.image && alarm.image !== '/alarm_thumb.png' && (
+ {alarm.contents}
+ {alarm.time} +
+ src}
+ unoptimized
+ width={60}
+ height={60}
+ className="h-full w-full rounded-sm object-cover"
+ />
+
+ )}
+
+
+ );
+};
+
+export default AlarmSetting;
diff --git a/apps/web/app/(header)/auction/[shortId]/BottomBar.tsx b/apps/web/app/(header)/auction/[shortId]/BottomBar.tsx
deleted file mode 100644
index 24c77494..00000000
--- a/apps/web/app/(header)/auction/[shortId]/BottomBar.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-'use client';
-
-import { formatNumberWithComma } from '@/shared/lib/formatNumberWithComma';
-import { getCountdown } from '@/shared/lib/getCountdown';
-import { useAuthStore } from '@/shared/model/authStore';
-import { Button } from '@repo/ui/components/Button/Button';
-import { Dialog, DialogHeader, DialogTitle } from '@repo/ui/components/Dialog/Dialog';
-
-import { Input } from '@repo/ui/components/Input/Input';
-import { toast } from '@repo/ui/components/Toast/Sonner';
-import { MessageSquareMore } from 'lucide-react';
-import React, { useEffect, useState } from 'react';
-
-interface BottomBarProps {
- shortId: string;
- auctionEndAt: string | Date;
- title: string;
- lastPrice: string;
-}
-
-const BottomBar = ({ shortId, auctionEndAt, title, lastPrice }: BottomBarProps) => {
- const user = useAuthStore();
- const [countdown, setCountdown] = useState('');
- const [hasMounted, setHasMounted] = useState(false);
- const [openBiddingSheet, setOpenBiddingSheet] = useState(false);
- const [biddingPrice, setBiddingPrice] = useState(formatNumberWithComma(Number(lastPrice) + 1000));
- const [biddingPriceWon, setBiddingPriceWon] = useState(biddingPrice + ' ์');
- const [isSubmitting, setIsSubmitting] = useState(false);
-
- useEffect(() => {
- setHasMounted(true);
-
- const update = () => setCountdown(getCountdown(auctionEndAt));
- update(); // ์ด๊ธฐ ๋ ๋
- const timer = setInterval(update, 1000);
-
- return () => clearInterval(timer);
- }, [auctionEndAt]);
-
- if (!hasMounted) return null;
-
- const handleBiddingPriceChange = (e: React.ChangeEvent
+
+ ๊ฒฝ๋งค ๊ด๋ จ ์๋ฆผ
+
+
+ ์๋ก์ด ์ฑํ ์๋ฆผ
+
+
+ ํฌ์ธํธ ์๋ฆผ
+
+
+ ๋ฑ๊ธ ์๋ฆผ
+
+
+ ๋ณ์ ์๋ฆผ
+
-
- );
-};
-
-export default BottomBar;
diff --git a/apps/web/app/(header)/auction/[shortId]/ProductImageSlider.tsx b/apps/web/app/(header)/auction/[shortId]/ProductImageSlider.tsx
deleted file mode 100644
index 3fabcada..00000000
--- a/apps/web/app/(header)/auction/[shortId]/ProductImageSlider.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client';
-import React, { useRef, useState } from 'react';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Pagination } from 'swiper/modules';
-import 'swiper/css';
-import 'swiper/css/pagination';
-import type { Swiper as SwiperType } from 'swiper';
-import { ProductImage } from '@/app/api/product/route';
-
-interface Props {
- images: ProductImage[];
-}
-
-export default function ProductImageSlider({ images }: Props) {
- const [activeIndex, setActiveIndex] = useState(0);
- const swiperRef = useRef
-
-
-
-
-
-
- ์
์ฐฐ ๋ง๊ฐ ์๊ฐ
- {countdown}
-
-
-
-
-
- {/* Main Swiper */}
-
- );
-}
diff --git a/apps/web/app/(header)/auction/[shortId]/page.tsx b/apps/web/app/(header)/auction/[shortId]/page.tsx
index 4ef882f2..752ca9b9 100644
--- a/apps/web/app/(header)/auction/[shortId]/page.tsx
+++ b/apps/web/app/(header)/auction/[shortId]/page.tsx
@@ -1,128 +1,9 @@
-'use client';
+import AuctionDetailPageContent from '@/features/auction/detail/ui/AuctionDetailPageContent';
+import React from 'react';
-import ProductImageSlider from './ProductImageSlider';
-import { AlarmClock, PencilLine } from 'lucide-react';
-import { formatNumberWithComma } from '@/shared/lib/formatNumberWithComma';
-import { formatTimestamptz } from '@/shared/lib/formatTimestamp';
-import { Avatar } from '@repo/ui/components/Avatar/Avatar';
-import BottomBar from './BottomBar';
-import { useEffect, useState, use } from 'react';
-import { Auction } from '@/app/api/product/route';
-import Loading from '@/shared/ui/Loading/Loading';
-
-const ProductDetailPage = ({ params }: { params: Promise<{ shortId: string }> }) => {
- const resolvedParams = use(params);
- const [data, setData] = useState
- (swiperRef.current = swiper)}
- onSlideChange={(swiper) => setActiveIndex(swiper.activeIndex)}
- className="h-full p-0"
- >
- {images.map((img) => (
-
- 
-
- ))}
-
-
-
- {/* Thumbnail Gallery */}
-
- {images.map((img, idx) => (
-
- ))}
- {[...Array(5 - images.length)].map((_, idx) => (
-
- ))}
-
- ์ค๋ฅ: {error}
; - if (!data) return๊ฒฝ๋งค ์ ๋ณด๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค.
; - - const auction = data; - const mapped = { - auctionId: auction.auction_id, - productTitle: auction.product?.title, - productDescription: auction.product?.description, - images: auction.product?.product_image ?? [], - minPrice: auction.min_price, - auctionEndAt: auction.auction_end_at, - exhibitUser: auction.product?.exhibit_user, - currentHighestBid: auction.current_highest_bid || auction.min_price, - bidHistory: auction.bid_history, - }; - - return ( -
- {/* ์ด๋ฏธ์ง ์ฌ๋ผ์ด๋ */}
-
- );
+const AuctionDetailPage = async ({ params }: { params: Promise<{ shortId: string }> }) => {
+ const { shortId } = await params;
+ return
-
-
- {mapped.productTitle}
-
-
-
-
- ์ต๊ณ ์
์ฐฐ๊ฐ
-
- {formatNumberWithComma(mapped.currentHighestBid)}์
-
-
-
-
-
-
-
-
-
- ์
์ฐฐ ์์๊ฐ
- {formatNumberWithComma(mapped.minPrice)}์
-
-
-
-
- ์
์ฐฐ ๋ง๊ฐ ์ผ์
- {formatTimestamptz(mapped.auctionEndAt)}
- {mapped.productDescription}
-
- {/* ์
์ฐฐ ํ์คํ ๋ฆฌ (์ ํ์ฌํญ) */}
- {/* {mapped.bidHistory.length > 0 && (
-
-
-
-
- )}
-
- */}
-
- {/* ํ๋งค์ ์ ๋ณด */}
- ์
์ฐฐ ํํฉ
-
- ์ด {mapped.bidHistory.length}๊ฑด์ ์
์ฐฐ
-
-
-
-
-
- {mapped.exhibitUser?.nickname}
- {mapped.exhibitUser?.address}
- ์ค๋ฅ: {error}
; - if (!data) return์ํ ์ ๋ณด๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค.
; - - const handleMinPriceChange = (e: React.ChangeEvent
-
- {/* ์ฌ์ง ์
๋ก๋ */}
-
-
-
- ์ํ ์ ๋ชฉ*
-
- setTitle(e.target.value)}
- required
- />
-
-
-
- ์นดํ
๊ณ ๋ฆฌ*
-
-
-
-
- ์์ธํ ์ค๋ช
*
-
-