@@ -61,4 +65,4 @@ const halfStarEmptyStyle = (size: number) => css`
height: ${size}px;
position: absolute;
clip-path: inset(0 0 0 50%); // 오른쪽 절반만 표시
-`;
\ No newline at end of file
+`;
diff --git a/src/pages/Signin/index.tsx b/src/pages/Signin/index.tsx
index 4bb78d0..28fe4cb 100644
--- a/src/pages/Signin/index.tsx
+++ b/src/pages/Signin/index.tsx
@@ -1,15 +1,15 @@
/** @jsxImportSource @emotion/react */
-import { css } from "@emotion/react";
-import colors from "styles/color";
+import { css } from '@emotion/react';
+import colors from 'styles/color';
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
-import { type SubmitHandler } from "react-hook-form";
+import { type SubmitHandler } from 'react-hook-form';
-import * as z from "zod";
-import { loginSchema } from "schema";
-import { Input } from "common/components";
+import * as z from 'zod';
+import { loginSchema } from 'schema';
+import { Input } from 'common/components';
type SignInFormType = z.infer
;
@@ -23,8 +23,8 @@ const SignIn = () => {
resolver: zodResolver(loginSchema),
});
- const onSubmit: SubmitHandler = (data) => {
- console.log(data);
+ const onSubmit: SubmitHandler = () => {
+ // console.log(data);
reset();
};
@@ -36,7 +36,7 @@ const SignIn = () => {
css={_input}
type="text"
placeholder="Email"
- {...register("accountId")}
+ {...register('accountId')}
/>
{errors.accountId && {errors.accountId.message}
}
@@ -44,7 +44,7 @@ const SignIn = () => {
css={_input}
type="password"
placeholder="Password"
- {...register("password")}
+ {...register('password')}
/>
{errors.password && {errors.password.message}
}
@@ -63,7 +63,7 @@ const _container = css`
justify-content: center;
align-items: center;
height: 100vh;
- background: url("/src/assets/login.jpg") no-repeat center center;
+ background: url('/src/assets/login.jpg') no-repeat center center;
background-size: cover;
@media (max-width: 768px) {
diff --git a/src/pages/dashboard/AdminHome.tsx b/src/pages/dashboard/AdminHome.tsx
new file mode 100644
index 0000000..4d0f47d
--- /dev/null
+++ b/src/pages/dashboard/AdminHome.tsx
@@ -0,0 +1,9 @@
+const AdminHome = () => {
+ return (
+
+ );
+};
+
+export default AdminHome;
diff --git a/src/pages/dashboard/OwnerHome.tsx b/src/pages/dashboard/OwnerHome.tsx
new file mode 100644
index 0000000..ead639e
--- /dev/null
+++ b/src/pages/dashboard/OwnerHome.tsx
@@ -0,0 +1,39 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+import CardList from './components/CardList';
+import StoreInfo from './components/StoreInfo';
+import { useGetStoresQuery } from 'queries/modules/stores/useStoresQuery';
+import { CARD_LIST_ARR } from './constants';
+import OrderTable from './components/OrderTable';
+
+const OwnerHome = () => {
+ const {
+ data: { response },
+ } = useGetStoresQuery(1);
+
+ const storeData = response;
+
+ const { name, contactNumber, openTime, closeTime } = storeData;
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default OwnerHome;
+
+const _ownerContainer = css`
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+`;
diff --git a/src/pages/dashboard/components/Card.tsx b/src/pages/dashboard/components/Card.tsx
new file mode 100644
index 0000000..e5fb845
--- /dev/null
+++ b/src/pages/dashboard/components/Card.tsx
@@ -0,0 +1,77 @@
+/** @jsxImportSource @emotion/react */
+
+import { css } from '@emotion/react';
+import colors from 'styles/color';
+import fonts from 'styles/font';
+
+type CardProps = {
+ icon?: React.FunctionComponent>;
+ title: string;
+ total?: number | string; // 총 산출 - 추후 백엔드 요청
+ due?: number; // 산출 기간 - 추후 백엔드 요청
+ width?: number;
+ height?: number;
+ titleText?: boolean;
+ border?: boolean;
+};
+
+const Card = ({
+ icon: Icon,
+ total,
+ title,
+ due,
+ width = 339,
+ height = 168,
+ titleText = false,
+ border = false,
+}: CardProps) => {
+ return (
+
+ {Icon &&
}
+
+
+
{total ?? total}
+
{title ?? title}
+
{due ? `(${due} days)` : null}
+
+
+ {cardListArr.map((card, idx) => (
+
{card}
+ ))}
+
+
+
+ {successTxt}
+
+
+
+
+ {cancelTxt}
+
+
New Order
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => (
+
+
+ {flexRender(
+ header.column.columnDef.header,
+ header.getContext(),
+ )}
+
+ {
+ header.column.getIsSorted() ? (
+ header.column.getIsSorted() === 'asc' ? (
+
+ ) : (
+
+ )
+ ) : (
+
+ ) // 정렬되지 않은 상태의 기본 아이콘
+ }
+
+ |
+ ))}
+
+ ))}
+
+
+ {table.getRowModel().rows.map((row) => (
+
+ {row.getVisibleCells().map((cell) => (
+ |
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
+ |
+ ))}
+
+ ))}
+
+
+ {/* 페이지네이션 컨트롤 */}
+
+
+
+ {`${pageIndex + 1} / ${Math.ceil(orderData.length / PAGE_SIZE)} 페이지`}
+
+
+
+
+ );
+};
+
+const StyledArrow = styled(UpdownArrow)<{ state: 'none' | 'up' | 'down' }>`
+ width: 18px;
+ height: 18px;
+
+ /* 위쪽 화살표 색상 변경 */
+ path:first-of-type {
+ fill: ${({ state }) => (state === 'up' ? colors.textMuted : '#d3d3e0')};
+ }
+
+ /* 아래쪽 화살표 색상 변경 */
+ path:last-of-type {
+ fill: ${({ state }) => (state === 'down' ? colors.textMuted : '#d3d3e0')};
+ }
+`;
+
+const Arrow = ({ clicked }: { clicked: 'none' | 'up' | 'down' }) => {
+ return ;
+};
+
+export default OrderTable;
+
+const _mainTxt = css`
+ ${fonts['24_800']};
+ margin-bottom: 20px;
+`;
+
+const _table = css`
+ width: 100%;
+ border-collapse: collapse;
+ background-color: ${colors.white};
+ border-radius: 12px;
+
+ th,
+ td {
+ padding: 2% 4%;
+ border-bottom: 1px solid #e9ecff;
+ }
+
+ td {
+ color: ${colors.textMuted};
+ }
+`;
+
+const _header = [css``, fonts['18_500']];
+
+const _tbody = [css``, fonts['16_400']];
+
+const _icoWrapper = css`
+ display: flex;
+ gap: 4px;
+`;
+
+const _arrowWrapper = css`
+ cursor: pointer;
+`;
+
+const _pagination = [
+ css`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 20px;
+ gap: 10px;
+
+ button {
+ padding: 8px 12px;
+ background-color: ${colors.primary};
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ &:disabled {
+ background-color: ${colors.lightGray};
+ cursor: not-allowed;
+ }
+ }
+ `,
+ fonts['16_500'],
+];
diff --git a/src/pages/dashboard/components/StoreInfo.tsx b/src/pages/dashboard/components/StoreInfo.tsx
new file mode 100644
index 0000000..3f8e8d7
--- /dev/null
+++ b/src/pages/dashboard/components/StoreInfo.tsx
@@ -0,0 +1,165 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { Button } from 'common/components';
+
+import { useNavigate } from 'react-router-dom';
+
+import colors from 'styles/color';
+import fonts from 'styles/font';
+import CardList from './CardList';
+
+import { StoreInfoProps } from '../types';
+import { STORE_CARD_LIST_ARR } from '../constants';
+
+import { isCurrentTimeWithinRange } from 'utils/isCurrentTimeWithinRange';
+import OptionMenu from './OptionMenu';
+
+import { useEffect, useRef, useState } from 'react'; // useState 추가
+
+// StoreInfo 컴포넌트 내부 수정된 부분
+const StoreInfo = ({
+ openTime,
+ closeTime,
+ name,
+ contactNumber,
+}: StoreInfoProps) => {
+ const [open, setOpen] = useState(
+ isCurrentTimeWithinRange(openTime, closeTime),
+ ); // 현재 시간이 영업 시간인지 상태 관리
+ const [isOptionMenuVisible, setOptionMenuVisible] = useState(false); // 모달 상태 관리
+ const [isSelected, setIsSelected] = useState(false); // 옵션이 선택되었는지 상태 관리
+
+ const navigate = useNavigate();
+
+ const handleNavigate = () => {
+ navigate('/store'); // 수정 페이지로 이동
+ };
+
+ const buttonRef = useRef(null); // 버튼을 참조하기 위한 useRef
+
+ useEffect(() => {
+ if (isSelected) {
+ setOptionMenuVisible(false); // 옵션이 선택되면 모달 닫기
+ setIsSelected(false);
+ }
+ }, [isSelected]);
+
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (
+ buttonRef.current &&
+ !buttonRef.current.contains(event.target as Node) // 버튼이나 모달 바깥을 클릭한 경우
+ ) {
+ setOptionMenuVisible(false); // 모달 닫기
+ }
+ };
+
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, [buttonRef]);
+
+ const handleMouseEnter = () => setOptionMenuVisible(true);
+
+ return (
+
+
+
+
가게정보
+
{name}
+
연락처 : {contactNumber}
+
+
+
+
+ {/* OptionMenu 모달 표시 제어 */}
+ {isOptionMenuVisible && (
+
+ )}
+
+
+
+
+
+ {`${openTime} ~ ${closeTime}`}
+
+ {`Manage Store Info >`}
+
+
+
+
+
+
Welcome, Admin! This is your dashboard.
;
-};
-
-const OwnerHome = () => {
- return Welcome, Owner! This is your home screen.
;
-};
+import OwnerHome from './OwnerHome';
+import AdminHome from './AdminHome';
+import { DashboardProps } from './types';
+import fonts from 'styles/font';
-const Home = ({ role }: Props) => {
- if (role === "admin") return ;
- else return ;
+const Home = ({ role }: DashboardProps) => {
+ return (
+
+ );
};
export default Home;
+
+const _container = css`
+ display: flex;
+ flex-direction: column;
+ padding: 32px;
+ gap: 16px;
+`;
+
+const _mainTxt = [css``, fonts['24_800']];
diff --git a/src/pages/dashboard/types.ts b/src/pages/dashboard/types.ts
new file mode 100644
index 0000000..fb7d172
--- /dev/null
+++ b/src/pages/dashboard/types.ts
@@ -0,0 +1,18 @@
+export type DashboardProps = {
+ role: 'admin' | 'owner'; // 역할 타입 정의, enum으로 빼고 API에 맞출 예정
+};
+
+export type StoreInfoProps = {
+ name: string;
+ openTime: string;
+ closeTime: string;
+ contactNumber: string;
+};
+
+export type OptionMenuProps = {
+ successTxt?: string;
+ cancelTxt?: string;
+ open: boolean;
+ setOpen: React.Dispatch>;
+ setIsSelected: React.Dispatch>;
+};
diff --git a/src/pages/store/components/Category.tsx b/src/pages/store/components/Category.tsx
new file mode 100644
index 0000000..eaf6096
--- /dev/null
+++ b/src/pages/store/components/Category.tsx
@@ -0,0 +1,65 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+import { Textarea, Input } from 'common/components';
+import type { CategoryProps } from '../types';
+
+import colors from 'styles/color';
+
+const Category = ({
+ contactNumber,
+ zipCode,
+ addressDetail,
+ address,
+ // categories,
+}: CategoryProps) => {
+ const defaultAddress = `${zipCode} ${address} ${addressDetail}`;
+
+ return (
+
+
+ 카테고리
+
+
+
+
+ 연락처
+
+
+
+
+ 주소
+
+
+
+
+
+
+ );
+};
+
+const OpeningHoursAndFees = ({
+ open,
+ close,
+ minCost,
+ delivery,
+}: OpeningHoursAndFeesProps) => {
+ const [openTime, setOpenTime] = useState(open);
+ const [closeTime, setCloseTime] = useState(close);
+ const [minOrder, setMinOrder] = useState(minCost);
+ const [deliveryFee, setDeliveryFee] = useState(delivery);
+
+ return (
+
+
+
영업 시간
+
+
+
+
+
+
최소 주문 금액 및 배달료
+
+ setMinOrder(Number(value))}
+ />
+ setDeliveryFee(value)}
+ />
+
+
+
+ {src ? (
+
+ ) : (
+
Please upload a picture
+ )}
+
+
{name}
+
+
+
+
+
+
+