예약 페이지 제외 전체 페이지 퍼블리싱

src/app/(artist)/artist/home/page.tsx

@@ -1,21 +1,115 @@
 'use client';
-import { logout } from '@/app/auth';
-import { Box, Button, Typography } from '@mui/material';
+// import { ReservationItem } from '@/app/(model)/model/reservation/components/ReservationItem';
+import { JButton } from '@/components/JButton';
+import { JIcon } from '@/components/JIcon';
+import { JImage } from '@/components/JImage';
+import { MotionWrapper } from '@/components/MotionWrapper';
+import { Row } from '@/components/Row';
+import { SquareImage } from '@/components/SquareImage';
+import { COLORS } from '@/styles/colors';
+import { Stack, Typography } from '@mui/material';
+// import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 
 const Page = () => {
+  const router = useRouter();
   return (
-    <Box>
-      <Typography>ArtistHome</Typography>
-      <Button
-        variant="contained"
-        onClick={() => {
-          logout();
-          // navigate('/enter');
-        }}
-      >
-        로그아웃
-      </Button>
-    </Box>
+    <MotionWrapper>
+      <Stack px={2} height={'100%'}>
+        <Row justifyContent={'space-between'} paddingX={2}>
+          <JImage image='logo-sm' />
+          <JButton
+            sx={{ borderRadius: 6, width: 40, height: 40 }}
+            onClick={() => router.push('/notification')}
+          >
+            <JIcon icon='notice' />
+          </JButton>
+        </Row>
+        <Row gap={2} mt={'20px'}>
+          <JButton
+            sx={{
+              width: 75,
+              height: 75,
+              borderRadius: '50%',
+              background: COLORS.primary,
+            }}
+            onClick={() => router.push('/artist/profile')}
+          >
+            <SquareImage url={''} />
+          </JButton>
+          <Typography fontWeight={600} fontSize={20}>
+            안녕하세요,
+            <br />
+            치즈가 많이 좋아 님<br />
+            {/* 오늘 예약 N건이 있어요. */}
+          </Typography>
+        </Row>
+        <Stack flex={1} gap={2} justifyContent={'center'}>
+          <Typography fontSize={20} fontWeight={600} textAlign={'center'}>
+            아직 프로필이 완성되지 않았어요!
+          </Typography>
+          <Typography fontSize={18} fontWeight={400} textAlign={'center'}>
+            프로필을 완성하고 모델과의
+            <br />
+            예약을 잡아보세요!
+          </Typography>
+          <JButton
+            sx={{
+              maxWidth: '194px',
+              height: '49px',
+              margin: '0 auto',
+              marginTop: '20px',
+              background: '#222',
+              color: COLORS.white,
+              borderRadius: '10px',
+              fontSize: '14px',
+            }}
+            onClick={() => router.push('/artist/profile/setup')}
+          >
+            프로필 완성하러 가기
+          </JButton>
+        </Stack>
+        {/* <Stack px={2} py={2}>
+          <Row justifyContent={'end'}>
+            <Link href={'/model/reservation'}>
+              <Row sx={{ gap: 0.7, width: 'auto', px: 1, borderRadius: 8 }}>
+                <Typography fontSize={14}>전체 예약 보기</Typography>
+                <JIcon icon='rightArrow' />
+              </Row>
+            </Link>
+          </Row>
+        </Stack>
+        <Stack>
+          <Stack gap={2}>
+            <ReservationItem
+              makeup={'메이크업명'}
+              date={'2024. 02. 22 목'}
+              time={'13:00'}
+              location={'장소'}
+              artistName={'아티스트 명'}
+              price={'10,000'}
+              onClick={() => router.push(`reservation/${0}`)}
+              type='today'
+            />
+          </Stack>
+        </Stack>
+        <Stack mt={4}>
+          <Typography fontWeight={600} fontSize={20} mb={1}>
+            모델과의 예약을 확정해주세요!
+          </Typography>
+          <ReservationItem
+            makeup={'메이크업명'}
+            date={'2024. 02. 22 목'}
+            time={'13:00'}
+            location={'장소'}
+            artistName={'아티스트 명'}
+            price={'10,000'}
+            onClick={() => router.push(`/reservation/${0}`)}
+            type='wait'
+          />
+        </Stack> */}
+      </Stack>
+    </MotionWrapper>
   );
 };
 export default Page;

src/app/(artist)/artist/makeup/[id]/edit/page.tsx

@@ -1,4 +1,186 @@
+'use client';
+import { AppBar } from '@/components/AppBar';
+import { MotionWrapper } from '@/components/MotionWrapper';
+import { Row } from '@/components/Row';
+import {
+  Button,
+  OutlinedInput,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { useRef, useState } from 'react';
+import { SpecializationItem } from '../../../profile/setup/components/SpecializationItem';
+import { JButton } from '@/components/JButton';
+import { COLORS } from '@/styles/colors';
+import { JIcon } from '@/components/JIcon';
+import { ImageThumb } from '../../components/ImageThumb';
+
+const category = {
+  daily: '데일리 메이크업',
+  actor: '배우 메이크업',
+  interview: '면접 메이크업',
+  party: '파티/이벤트 메이크업',
+  wedding: '웨딩 메이크업',
+  special: '특수 메이크업',
+  studio: '스튜디오 메이크업',
+  etc: '기타 (속눈썹, 퍼스널컬러)',
+};
+
 const Page = () => {
-  return <></>;
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [formData, setFormData] = useState({
+    category: [] as string[],
+    makeupName: '',
+    price: '',
+    information: '',
+  });
+  const [images, setImages] = useState<File[]>([]);
+
+  const isButtonDisabled = !(
+    images.length > 0 &&
+    formData.category.length > 0 &&
+    formData.makeupName.trim() &&
+    formData.price.trim() &&
+    formData.information.trim()
+  );
+
+  const toggleCategory = (key: string) => {
+    setFormData((prev) => {
+      const isSelected = prev.category.includes(key);
+      return {
+        ...prev,
+        category: isSelected
+          ? prev.category.filter((item) => item !== key)
+          : [...prev.category, key],
+      };
+    });
+  };
+
+  const FileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const newFiles = Array.from(event.target.files);
+      setImages((prevImages) => [...prevImages, ...newFiles]);
+    }
+  };
+
+  const SelectImageDelete = (index: number) => {
+    setImages((prevImages) => prevImages.filter((_, i) => i !== index));
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { id, value } = e.target;
+    setFormData((prev) => ({ ...prev, [id]: value }));
+  };
+
+  return (
+    <MotionWrapper>
+      <Stack height={'100%'}>
+        <Stack flex={1}>
+          <AppBar title='포트폴리오 수정' backIcon />
+          <Stack px={3}>
+            <Typography fontSize={14} fontWeight={400} mt={3} mb={'4.5px'}>
+              사진 등록 (최대 3장)
+            </Typography>
+            <Row justifyContent={'flex-start'} gap={1}>
+              {images.length !== 3 && (
+                <JButton
+                  onClick={() => fileInputRef.current?.click()}
+                  sx={{
+                    width: '80px',
+                    height: '80px',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    border: `1px solid ${COLORS.gray300}`,
+                    borderRadius: '5px',
+                  }}
+                >
+                  <JIcon icon='gallery' />
+                  <input
+                    ref={fileInputRef}
+                    type='file'
+                    multiple
+                    hidden
+                    accept='image/*'
+                    onChange={FileChange}
+                  />
+                </JButton>
+              )}
+
+              <ImageThumb images={images} onDelete={SelectImageDelete} />
+            </Row>
+            <Typography fontSize={14} fontWeight={400} mt={'22px'} mb={'10px'}>
+              카테고리
+            </Typography>
+            <Row flexWrap={'wrap'} gap={2} justifyContent={'flex-start'}>
+              {Object.entries(category).map(([key, value]) => (
+                <SpecializationItem
+                  key={key}
+                  text={value}
+                  onClick={() => toggleCategory(key)}
+                  isActive={formData.category.includes(key)}
+                />
+              ))}
+            </Row>
+            <Typography fontSize={14} fontWeight={400} mt={'22px'} mb={'5px'}>
+              메이크업명
+            </Typography>
+            <OutlinedInput
+              id='makeupName'
+              placeholder='메이크업명을 입력해주세요'
+              onChange={handleChange}
+              value={formData.makeupName}
+              sx={{
+                height: '41px',
+                borderRadius: '9px',
+                fontSize: '14px',
+              }}
+              aria-describedby='outlined-weight-helper-text'
+              inputProps={{
+                'aria-label': 'weight',
+              }}
+            />
+            <Typography fontSize={14} fontWeight={400} mt={'22px'} mb={'5px'}>
+              가격
+            </Typography>
+            <OutlinedInput
+              id='price'
+              placeholder='가격을 입력해주세요'
+              onChange={handleChange}
+              value={formData.price}
+              sx={{
+                height: '41px',
+                borderRadius: '9px',
+                fontSize: '14px',
+              }}
+              aria-describedby='outlined-weight-helper-text'
+              inputProps={{
+                'aria-label': 'weight',
+              }}
+            />
+            <Typography fontSize={14} fontWeight={400} mt={'22px'} mb={'5px'}>
+              정보
+            </Typography>
+            <TextField
+              id='information'
+              onChange={handleChange}
+              value={formData.information}
+              multiline
+              rows={10}
+              variant='outlined'
+              placeholder='모델에게 보여줄 메이크업 정보를 작생해주세요.'
+              sx={{ fontSize: '14px' }}
+              fullWidth
+            />
+          </Stack>
+        </Stack>
+        <Stack p={3}>
+          <Button variant='contained' disabled={isButtonDisabled}>
+            수정하기
+          </Button>
+        </Stack>
+      </Stack>
+    </MotionWrapper>
+  );
 };
 export default Page;