Merge branch 'develop' into feat/#156

package.json

@@ -16,6 +16,7 @@
     "defaults"
   ],
   "dependencies": {
+    "@hello-pangea/dnd": "^17.0.0",
     "@next/bundle-analyzer": "^15.0.1",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-collapsible": "^1.1.1",
@@ -49,8 +50,7 @@
     "slate-react": "^0.110.3",
     "slick-carousel": "^1.8.1",
     "socket.io-client": "^4.8.0",
-    "sockjs-client": "^1.6.1",
-    "zustand": "^4.5.5"
+    "sockjs-client": "^1.6.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",

src/app/create/Basicauction.css.ts

@@ -1,4 +1,4 @@
-import { style, styleVariants } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
 
 import colors from '@/styles/color';
 import shadow from '@/styles/shadow';
@@ -187,8 +187,8 @@ export const imageUpload = style({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  margin: '10px',
-  minWidth: '250px',
+  margin: '10px 8px 10px 10px',
+  minWidth: '150px',
   border: `1.5px dashed ${colors.gray8} `,
   borderRadius: '10px',
   cursor: 'pointer',
@@ -203,69 +203,50 @@ export const imageInput = style({
 export const imageList = style({
   display: 'flex',
   listStyle: 'none',
-  margin: '10px',
-  gap: '10px',
+  margin: '10px 0',
 });
 
 export const imageWrapper = style({
   position: 'relative',
   display: 'flex',
-  gap: '10px',
   justifyContent: 'center',
-  width: '250px',
+  width: '150px',
   height: 'auto',
   objectFit: 'contain',
   borderRadius: '10px',
+  padding: '0 8px',
 });
 
 export const image = style({
   position: 'relative',
   display: 'flex',
   gap: '10px',
   justifyContent: 'center',
-  width: '250px',
+  width: '150px',
   height: 'auto',
   objectFit: 'contain',
   border: `1.5px dashed ${colors.gray8} `,
   borderRadius: '10px',
 });
 
-export const thumbnailButtonBase = style({
+export const thumbnailButton = style({
   cursor: 'pointer',
   position: 'absolute',
   top: '5px',
   left: '18px',
   zIndex: '1',
   padding: '4px',
   fontSize: '12px',
-  color: colors.gray8,
   borderRadius: '4px',
-
-  border: `1px solid ${colors.gray8}`,
-  ':hover': {
-    color: colors.primary10,
-    fontWeight: 'bold',
-    border: `1.5px solid ${colors.primary9}`,
-    backgroundColor: colors.primary3,
-  },
-});
-
-export const thumbnailButton = styleVariants({
-  default: [thumbnailButtonBase, {}],
-  selected: [
-    thumbnailButtonBase,
-    {
-      color: colors.primary10,
-      border: `1.5px solid ${colors.primary9}`,
-      backgroundColor: colors.primary3,
-    },
-  ],
+  color: colors.primary10,
+  border: `1.5px solid ${colors.primary9}`,
+  backgroundColor: colors.primary3,
 });
 
 export const deleteButton = style({
   position: 'absolute',
-  top: '-10px',
-  right: '-10px',
+  top: '-5px',
+  right: '5px',
   zIndex: '1',
   cursor: 'pointer',
 });
@@ -307,3 +288,46 @@ export const editorContent = style({
   fontSize: '16px',
   lineHeight: '1.5',
 });
+
+// --- auctionconfirmmodal.tsx ---
+
+export const confirmModal = style({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '80%',
+  gap: '20px',
+});
+
+export const confirmDescription = style({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  fontSize: '14px',
+  gap: '5px',
+});
+
+export const buttonWrapper = style({
+  display: 'flex',
+  flexDirection: 'row',
+  gap: '10px',
+  justifyContent: 'center',
+});
+
+export const submitButton = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '100%',
+  borderRadius: '8px',
+  border: 'none',
+  backgroundColor: colors.primary9,
+  color: '#fff',
+  cursor: 'pointer',
+  transition: 'background-color 0.3s',
+  boxShadow: shadow.box3,
+  padding: '8px 12px',
+
+  ':hover': {
+    backgroundColor: colors.primary11,
+  },
+});

src/app/create/components/auctionconfirmmodal.tsx

@@ -0,0 +1,33 @@
+import { useFormContext } from 'react-hook-form';
+
+import { AuctionInputs } from '@/app/create/types/InputTypes';
+import CommonButton from '@/components/CommonButton';
+
+import * as S from '../Basicauction.css';
+
+interface AuctionConfirmModalProps {
+  onSubmit: (data: AuctionInputs) => void;
+  onCancel: () => void;
+}
+
+function AuctionConfirmModal({ onSubmit, onCancel }: AuctionConfirmModalProps) {
+  const { getValues } = useFormContext<AuctionInputs>();
+  const values = getValues();
+
+  return (
+    <div className={S.confirmModal}>
+      <div className={S.confirmDescription}>
+        <span>정말 판매를 등록하시겠습니까?</span>
+        <span>한 번 등록하면 수정할 수 없습니다.</span>
+      </div>
+      <div className={S.buttonWrapper}>
+        <button className={S.submitButton} type="submit" onClick={() => onSubmit(values)}>
+          등록하기
+        </button>
+        <CommonButton content="취소" type="button" size="sm" onClick={onCancel} />
+      </div>
+    </div>
+  );
+}
+
+export default AuctionConfirmModal;