#340 feat: 일정 상세 UI 수정

src/App.jsx

@@ -7,8 +7,8 @@ import AttendCheck from '@/pages/AttendCheck';
 import Calendar from '@/pages/Calendar';
 import Dues from '@/pages/Dues';
 import Edit from '@/pages/Edit';
-import EventAdmin from '@/pages/EventAdmin';
-import EventDetails from '@/pages/EventDetails';
+import EventPost from '@/pages/EventPost';
+import EventDetail from '@/pages/EventDetail';
 import Home from '@/pages/Home';
 import Landing from '@/pages/Landing';
 import Login from '@/pages/Login';
@@ -45,9 +45,9 @@ const App = () => {
 
         <Route path="/attendance" element={<Attendance />} />
         <Route path="/calendar" element={<Calendar />} />
-        <Route path="/:type/:id" element={<EventDetails />} />
-        <Route path="/events/create" element={<EventAdmin />} />
-        <Route path="/events/:id/edit" element={<EventAdmin />} />
+        <Route path="/:type/:id" element={<EventDetail />} />
+        <Route path="/events/create" element={<EventPost />} />
+        <Route path="/events/:id/edit" element={<EventPost />} />
         <Route path="/home" element={<Home />} />
         <Route path="/attendCheck" element={<AttendCheck />} />
         <Route path="/member" element={<Member />} />

src/api/EventAdminAPI.tsx

@@ -6,11 +6,11 @@ const BASE_URL = import.meta.env.VITE_API_URL;
 
 export interface EventRequestType {
   title: string;
+  cardinal: Array<number>;
   start: string;
   end: string;
   location: string;
   requiredItem: string;
-  memberCount: string;
   content: string;
 }
 

src/styles/calendar/ToggleButton.styled.ts → src/components/Calendar/CalendarToggle.tsx

@@ -63,3 +63,23 @@ export const TextYear = styled.div<{ $isMonth: boolean }>`
   font-size: 12px;
   z-index: 1;
 `;
+
+const CalendarToggle = ({
+  onToggle,
+  isMonth,
+}: {
+  onToggle: () => void;
+  isMonth: boolean;
+}) => {
+  return (
+    <Switch>
+      <Checkbox type="checkbox" onChange={onToggle} />
+      <Slider $isMonth={isMonth}>
+        <TextMonth $isMonth={isMonth}>Month</TextMonth>
+        <TextYear $isMonth={isMonth}>Year</TextYear>
+      </Slider>
+    </Switch>
+  );
+};
+
+export default CalendarToggle;

src/components/Event/CardinalLabel.tsx

@@ -0,0 +1,45 @@
+import theme from '@/styles/theme';
+import styled from 'styled-components';
+import close from '@/assets/images/ic_close.svg';
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 15px;
+  width: 76px;
+  height: 30px;
+  border-radius: 29px;
+  box-sizing: border-box;
+  border: 1px solid ${theme.color.gray[30]};
+  font-size: 14px;
+  font-family: ${theme.font.semiBold};
+`;
+
+const DeleteButton = styled.img`
+  width: 14px;
+  cursor: pointer;
+`;
+
+const CardinalLabel = ({
+  cardinal,
+  onDelete,
+}: {
+  cardinal: number;
+  onDelete: (val: number) => void;
+}) => {
+  return (
+    <Container>
+      <p>{cardinal}기</p>
+      <DeleteButton
+        src={close}
+        alt="close"
+        onClick={() => {
+          onDelete(cardinal);
+        }}
+      />
+    </Container>
+  );
+};
+
+export default CardinalLabel;

src/components/Event/EventContent.tsx

@@ -1,15 +1,24 @@
-/* eslint-disable no-console */
-
-import icClock from '@/assets/images/ic_clock.svg';
 import icCalendar from '@/assets/images/ic_date.svg';
 import { WEEK_DAYS } from '@/constants/dateConstants';
-import { EventDetailData } from '@/pages/EventDetails';
+import { EventDetailData } from '@/pages/EventDetail';
 import useCustomBack from '@/hooks/useCustomBack';
 import * as S from '@/styles/event/EventContent.styled';
+import Button from '@/components/Button/Button';
+import theme from '@/styles/theme';
+import Modal from '@/components/common/Modal';
+import { useState } from 'react';
 
-const EventContent = ({ data }: { data: EventDetailData }) => {
+const EventContent = ({
+  data,
+  isAdmin,
+}: {
+  data: EventDetailData;
+  isAdmin: boolean;
+}) => {
   useCustomBack('/calendar');
 
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
   const origStartDate = data.start;
   const origEndDate = data.end;
 
@@ -30,56 +39,64 @@ const EventContent = ({ data }: { data: EventDetailData }) => {
   }
 
   return (
-    <>
+    <S.Container>
+      {isModalOpen && (
+        <Modal hasCloseButton={false} onClose={() => setIsModalOpen(false)}>
+          <S.Title>출석코드</S.Title>
+          <S.AttendanceCode>1234</S.AttendanceCode>
+        </Modal>
+      )}
+      {isAdmin && (
+        <Button
+          color={theme.color.mainMiddle}
+          onClick={() => {
+            setIsModalOpen(true);
+          }}
+        >
+          출석코드 확인
+        </Button>
+      )}
       <S.ContentBlock>
         {isOneday ? (
-          <>
-            <S.TimeInfo>
-              <S.Icon src={icCalendar} alt="calendar" />
-              <div>
-                {startDate[0]}년 {parseInt(startDate[1], 10)}월{' '}
-                {parseInt(startDate[2], 10)}일{' '}
-                {WEEK_DAYS[new Date(origStartDate).getDay()]}요일
-              </div>
-            </S.TimeInfo>
-            <S.TimeInfo>
-              <S.Icon src={icClock} alt="clock" />
-              <div>
-                {startTime[0]}:{startTime[1]} ~ {endTime[0]}:{endTime[1]}
-              </div>
-            </S.TimeInfo>
-          </>
+          <S.Time>
+            <img src={icCalendar} alt="calendar" style={{ marginRight: 5 }} />
+            <div>
+              {startDate[0]}년 {parseInt(startDate[1], 10)}월{' '}
+              {parseInt(startDate[2], 10)}일 (
+              {WEEK_DAYS[new Date(origStartDate).getDay()]}) {startTime[0]}:
+              {startTime[1]} ~ {endTime[0]}:{endTime[1]}
+            </div>
+          </S.Time>
         ) : (
           <>
-            <S.TimeInfo>
-              <S.Icon src={icCalendar} alt="calendar" />
+            <S.Time>
+              <img src={icCalendar} alt="calendar" style={{ marginRight: 5 }} />
               <div>
                 {startDate[0]}년 {parseInt(startDate[1], 10)}월{' '}
-                {parseInt(startDate[2], 10)}일 &#40;
-                {WEEK_DAYS[new Date(origStartDate).getDay()]}&#41;{' '}
-                {startTime[0]}:{startTime[1]}에서
+                {parseInt(startDate[2], 10)}일 (
+                {WEEK_DAYS[new Date(origStartDate).getDay()]}) {startTime[0]}:
+                {startTime[1]}
               </div>
-            </S.TimeInfo>
-            <S.TimeInfo>
+            </S.Time>
+            <S.Time>
               <S.EndTime>
-                {endDate[0]}년 {parseInt(endDate[1], 10)}월{' '}
-                {parseInt(endDate[2], 10)}일 &#40;
-                {WEEK_DAYS[new Date(origEndDate).getDay()]}&#41; {endTime[0]}:
-                {endTime[1]}까지
+                ~ {endDate[0]}년 {parseInt(endDate[1], 10)}월{' '}
+                {parseInt(endDate[2], 10)}일 (
+                {WEEK_DAYS[new Date(origEndDate).getDay()]}) {endTime[0]}:
+                {endTime[1]}
               </S.EndTime>
-            </S.TimeInfo>
+            </S.Time>
           </>
         )}
       </S.ContentBlock>
       <S.ContentBlock>
         <div>장소 : {data.location} </div>
-        <div>준비물 : {data.requiredItem} </div>
         <div>총 인원 : {data.memberCount}</div>
       </S.ContentBlock>
       <S.ContentBlock>
         <div>{data.content}</div>
       </S.ContentBlock>
-    </>
+    </S.Container>
   );
 };