[FE] 방 생성, 수정 기능 추가(#743)

frontend/src/@types/icon.ts

@@ -2,7 +2,7 @@ type IconKind =
   | "person"
   | "link"
   | "calendar"
-  | "plus"
+  | "more"
   | "star"
   | "people"
   | "pencil"
@@ -25,6 +25,10 @@ type IconKind =
   | "close"
   | "githubLogo"
   | "notificationBell"
-  | "search";
+  | "search"
+  | "add"
+  | "delete"
+  | "edit"
+  | "control";
 
 export default IconKind;

frontend/src/@types/roomInfo.ts

@@ -20,7 +20,7 @@ interface BaseRoomInfo {
   keywords: string[];
   limitedParticipants: number;
   classification: Classification;
-  isPrivate: boolean;
+  isPublic: boolean;
 }
 export interface CreateRoomInfo extends BaseRoomInfo {
   recruitmentDeadline: Date;

frontend/src/components/common/calendar/Calendar.style.ts

@@ -1,8 +1,9 @@
 import styled from "styled-components";
+import { Z_INDEX } from "@/styles/zIndex";
 
 export const CalendarContainer = styled.section`
   position: absolute;
-  z-index: 999;
+  z-index: ${Z_INDEX.dropdown};
 
   width: 400px;
   padding: 2rem;

frontend/src/components/common/calendar/Calendar.tsx

@@ -36,11 +36,10 @@ const Calendar = ({ selectedDate, handleSelectedDate, options }: CalendarProps)
   const checkIsAvailableClick = (day: number) => {
     if (!options?.isPastDateDisabled) return true;
 
-    const targetDate = options.disabledBeforeDate || new Date();
+    const targetDate = new Date(options.disabledBeforeDate || new Date());
     targetDate.setHours(0, 0, 0, 0);
 
     const checkingDate = new Date(currentViewYear, currentViewMonth - 1, day);
-
     return targetDate <= checkingDate;
   };
 

frontend/src/components/common/calendarDropdown/CalendarDropdown.stories.tsx

@@ -20,6 +20,11 @@ const meta = {
       description: "달력 날짜 선택 함수",
       action: "selected",
     },
+    error: {
+      control: {
+        type: "boolean",
+      },
+    },
   },
 } satisfies Meta<typeof CalendarDropdown>;
 
@@ -30,6 +35,7 @@ export const Default: Story = {
   args: {
     selectedDate: new Date(),
     handleSelectedDate: () => {},
+    error: false,
   },
   render: (args) => {
     const [selectedDate, setSelectedDate] = useState<Date>(args.selectedDate);
@@ -38,7 +44,13 @@ export const Default: Story = {
       setSelectedDate(newSelectedDate);
     };
 
-    return <CalendarDropdown selectedDate={selectedDate} handleSelectedDate={handleSelectedDate} />;
+    return (
+      <CalendarDropdown
+        selectedDate={selectedDate}
+        handleSelectedDate={handleSelectedDate}
+        error={false}
+      />
+    );
   },
 };
 
@@ -49,6 +61,7 @@ export const 이전날짜_선택_불가_캘린더: Story = {
     options: {
       isPastDateDisabled: true,
     },
+    error: false,
   },
   render: (args) => {
     const [selectedDate, setSelectedDate] = useState<Date>(args.selectedDate);
@@ -62,6 +75,7 @@ export const 이전날짜_선택_불가_캘린더: Story = {
         selectedDate={selectedDate}
         handleSelectedDate={handleSelectedDate}
         options={args.options}
+        error={false}
       />
     );
   },
@@ -74,6 +88,7 @@ export const 캘린더_드롭다운_에러: Story = {
     options: {
       isPastDateDisabled: true,
     },
+    error: false,
   },
   render: (args) => {
     const [selectedDate, setSelectedDate] = useState<Date>(args.selectedDate);
@@ -87,6 +102,7 @@ export const 캘린더_드롭다운_에러: Story = {
         selectedDate={selectedDate}
         handleSelectedDate={handleSelectedDate}
         options={args.options}
+        error={false}
       />
     );
   },

frontend/src/components/common/calendarDropdown/CalendarDropdown.style.ts

@@ -5,7 +5,7 @@ export const CalendarDropdownContainer = styled.section`
   width: 130px;
 `;
 
-export const CalendarDropdownToggle = styled.input`
+export const CalendarDropdownToggle = styled.input<{ $error: boolean }>`
   cursor: pointer;
 
   width: 100%;
@@ -15,7 +15,7 @@ export const CalendarDropdownToggle = styled.input`
   text-align: center;
   letter-spacing: 0.2rem;
 
-  border: 1px solid ${({ theme }) => theme.COLOR.grey1};
+  border: 1px solid ${({ theme, $error }) => ($error ? theme.COLOR.error : theme.COLOR.grey1)};
   border-radius: 6px;
   outline-color: ${({ theme }) => theme.COLOR.black};
 `;

frontend/src/components/common/calendarDropdown/CalendarDropdown.tsx

@@ -4,12 +4,14 @@ import useDropdown from "@/hooks/common/useDropdown";
 import Calendar, { CalendarProps } from "@/components/common/calendar/Calendar";
 import { formatDate } from "@/utils/dateFormatter";
 
-type CalendarDropdownProps = CalendarProps & InputHTMLAttributes<HTMLInputElement>;
+type CalendarDropdownProps = CalendarProps &
+  InputHTMLAttributes<HTMLInputElement> & { error: boolean };
 
 const CalendarDropdown = ({
   selectedDate,
   handleSelectedDate,
   options,
+  error,
   ...rest
 }: CalendarDropdownProps) => {
   const { isDropdownOpen, handleToggleDropdown, dropdownRef } = useDropdown();
@@ -27,6 +29,7 @@ const CalendarDropdown = ({
         value={formatDate(selectedDate)}
         onClick={handleToggleDropdown}
         placeholder="날짜를 선택하세요"
+        $error={error}
         readOnly
         {...rest}
       />

frontend/src/components/common/contentSection/ContentSection.stories.tsx

@@ -16,10 +16,6 @@ const meta = {
       description: "ContentSection 제목",
       control: "text",
     },
-    button: {
-      description: "ContentSection 버튼 (옵션)",
-      control: "object",
-    },
   },
 } satisfies Meta<typeof ContentSection>;
 
@@ -37,16 +33,3 @@ export const Default: Story = {
     </ContentSection>
   ),
 };
-
-export const WithButton: Story = {
-  args: {
-    title: "버튼이 있는 ContentSection",
-    button: {
-      label: "클릭하세요",
-      onClick: () => alert("버튼이 클릭되었습니다!"),
-    },
-  },
-  render: (args) => (
-    <ContentSection {...args}>이 ContentSection에는 버튼이 포함되어 있습니다.</ContentSection>
-  ),
-};

frontend/src/components/common/contentSection/ContentSection.style.ts

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 
 export const ContentSectionContainer = styled.div`
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 1rem;

frontend/src/components/common/contentSection/ContentSection.tsx

@@ -1,19 +1,14 @@
 import { ReactNode } from "react";
-import Button, { ButtonProps } from "@/components/common/button/Button";
 import * as S from "@/components/common/contentSection/ContentSection.style";
 
-interface ContentSectionButton extends ButtonProps {
-  label: string;
-}
-
 interface ContentSectionProps {
   title: string;
   subtitle?: string;
+  controlSection?: ReactNode;
   children?: ReactNode;
-  button?: ContentSectionButton | undefined;
 }
 
-const ContentSection = ({ title, subtitle, children, button }: ContentSectionProps) => {
+const ContentSection = ({ title, subtitle, children, controlSection }: ContentSectionProps) => {
   return (
     <S.ContentSectionContainer>
       <S.ContentSectionHeader>
@@ -22,11 +17,7 @@ const ContentSection = ({ title, subtitle, children, button }: ContentSectionPro
           <S.ContentSectionSubtitle>{subtitle}</S.ContentSectionSubtitle>
         </S.TitleContainer>
 
-        {button && (
-          <Button onClick={button.onClick} size="small">
-            {button.label}
-          </Button>
-        )}
+        {controlSection && controlSection}
       </S.ContentSectionHeader>
       {children}
     </S.ContentSectionContainer>

frontend/src/components/common/dropdown/Dropdown.style.ts

@@ -1,4 +1,5 @@
 import styled, { keyframes } from "styled-components";
+import { Z_INDEX } from "@/styles/zIndex";
 
 const dropdown = keyframes`
   0% {
@@ -37,7 +38,7 @@ export const DropdownToggle = styled.button<{ $error: boolean }>`
 
 export const DropdownMenu = styled.div`
   position: absolute;
-  z-index: 1;
+  z-index: ${Z_INDEX.dropdown};
   right: 0;
 
   display: flex;

frontend/src/components/common/header/ProfileDropdown.style.ts

@@ -1,4 +1,5 @@
 import styled, { keyframes } from "styled-components";
+import { Z_INDEX } from "@/styles/zIndex";
 
 const dropdown = keyframes`
   0% {
@@ -17,7 +18,7 @@ export const ProfileContainer = styled.div`
 
 export const DropdownMenu = styled.div`
   position: absolute;
-  z-index: 1;
+  z-index: ${Z_INDEX.dropdown};
   right: 0;
 
   display: flex;

frontend/src/components/common/icon/Icon.tsx

@@ -9,17 +9,21 @@ import {
 import { IoLogoGithub } from "react-icons/io";
 import { IconType } from "react-icons/lib";
 import {
+  MdAdd,
   MdArrowBackIos,
   MdArrowDropDown,
   MdArrowForwardIos,
   MdAutorenew,
   MdCalendarMonth,
   MdCheck,
   MdClear,
+  MdDelete,
+  MdEdit,
   MdExpandMore,
   MdInfoOutline,
   MdInsertLink,
   MdMenu,
+  MdMoreHoriz,
   MdNotificationsNone,
   MdOutlineArrowDropDown,
   MdOutlineArrowDropUp,
@@ -37,7 +41,7 @@ const ICON: { [key in IconKind]: IconType } = {
   person: MdPerson,
   link: MdInsertLink,
   calendar: MdCalendarMonth,
-  plus: MdExpandMore,
+  more: MdExpandMore,
   info: MdInfoOutline,
   star: MdOutlineStar,
   people: MdOutlinePeopleAlt,
@@ -61,6 +65,10 @@ const ICON: { [key in IconKind]: IconType } = {
   githubLogo: IoLogoGithub,
   notificationBell: MdNotificationsNone,
   search: MdOutlineSearch,
+  add: MdAdd,
+  delete: MdDelete,
+  edit: MdEdit,
+  control: MdMoreHoriz,
 };
 
 interface IconProps {

frontend/src/components/common/input/Input.style.ts

@@ -18,7 +18,7 @@ export const StyledInput = styled.input<{ $error: boolean }>`
 
 export const CharCount = styled.div`
   position: absolute;
-  right: 10px;
+  right: 0;
   bottom: -20px;
 
   font: ${({ theme }) => theme.TEXT.xSmall};

frontend/src/components/common/input/Input.tsx

@@ -29,7 +29,7 @@ export const Input = ({
         {...rest}
       />
       {showCharCount && (
-        <S.CharCount>
+        <S.CharCount aria-hidden>
           {value.toString().length}
           {rest.maxLength ? ` / ${rest.maxLength}자` : ""}
         </S.CharCount>

frontend/src/components/common/keyword/Keyword.style.ts

@@ -0,0 +1,53 @@
+import styled from "styled-components";
+
+export const KeywordContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+export const KeywordLabelContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+`;
+
+export const KeywordButton = styled.button`
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: fit-content;
+  height: fit-content;
+  padding: 0.4rem 0.8rem;
+
+  font: ${({ theme }) => theme.TEXT.small};
+  color: ${({ theme }) => theme.COLOR.grey4};
+  white-space: nowrap;
+
+  background-color: ${({ theme }) => theme.COLOR.grey0};
+  border: 1px solid ${({ theme }) => theme.COLOR.grey0};
+  border-radius: 15px;
+
+  svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    color: ${({ theme }) => theme.COLOR.white};
+
+    opacity: 0;
+  }
+
+  &:hover {
+    opacity: 0.5;
+    background-color: ${({ theme }) => theme.COLOR.grey3};
+  }
+
+  &:hover svg {
+    opacity: 1;
+  }
+`;