[FE][Feat] #106 - AddChannel 페이지 구현

frontend/src/component/common/InputBox.tsx

@@ -0,0 +1,28 @@
+import { ChangeEvent, FocusEvent } from 'react';
+
+export interface IInputBoxProps {
+  type?: 'text' | 'number' | 'password' | 'email' | 'tel';
+  placeholder?: string;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  className?: string;
+}
+
+export const InputBox = ({
+  type = 'text',
+  placeholder = '',
+  onChange,
+  onFocus,
+  onBlur,
+  className = '',
+}: IInputBoxProps) => (
+  <input
+    type={type}
+    placeholder={placeholder}
+    onChange={onChange}
+    onFocus={onFocus}
+    onBlur={onBlur}
+    className={`border-grayscale-75 placeholder:text-grayscale-50 focus:border-grayscale-400 text-grayscale-400 flex h-11 w-full rounded border px-3 text-xs focus:border-2 focus:outline-none ${className}`}
+  />
+);

frontend/src/component/layout/Footer.tsx

@@ -6,12 +6,13 @@ interface IFooterProps {
   title?: string;
   onClick?: () => void;
   active?: boolean;
+  isTranperency?: boolean;
 }
 
-export const Footer = (props: IFooterProps) => {
-  const buttonStyle = props.active ? buttonActiveType.ACTIVE : buttonActiveType.PASSIVE;
+export const Footer = ({ title, onClick, active = false, isTranperency = true }: IFooterProps) => {
+  const buttonStyle = active ? buttonActiveType.ACTIVE : buttonActiveType.PASSIVE;
 
-  return (
+  return isTranperency ? (
     <footer className="absolute bottom-5 h-[6%] w-[95%]">
       <button
         className={classNames(
@@ -24,10 +25,12 @@ export const Footer = (props: IFooterProps) => {
           buttonStyle,
         )}
         type="button"
-        onClick={props.onClick}
+        onClick={onClick}
       >
-        {props.title}
+        {title}
       </button>
     </footer>
+  ) : (
+    <div />
   );
 };

frontend/src/component/layout/Layout.tsx

@@ -7,6 +7,7 @@ interface ILayoutProps {
   footerTitle?: string;
   footerActive?: boolean;
   handleFooterClick?: () => void;
+  footerTransperency?: boolean;
 }
 
 export const Layout = (props: ILayoutProps) => {
@@ -25,6 +26,7 @@ export const Layout = (props: ILayoutProps) => {
         title={props.footerTitle}
         onClick={props.handleFooterClick}
         active={props.footerActive}
+        isTranperency={props.footerTransperency}
       />
     </>
   );

frontend/src/component/layout/header/LayoutHeader.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { Header } from '@/component/header/Header';
 import { NoticeText } from '@/component/text/NoticeText';
-import { HeaderContext } from '@/component/layout/header/LayoutHeaderProvider.tsx';
+import { HeaderContext } from '@/component/layout/header/LayoutHeaderProvider';
 
 export const LayoutHeader = () => {
   const { headerOption } = useContext(HeaderContext);

frontend/src/index.css

@@ -37,6 +37,7 @@ time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
+  border-style: solid;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;

frontend/src/pages/AddChannel.tsx

@@ -1 +1,142 @@
-export const AddChannel = () => <>Hello</>;
+import { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { IoClose } from 'react-icons/io5';
+import { HiMiniInformationCircle } from 'react-icons/hi2';
+import { InputBox } from '../component/common/InputBox';
+
+interface IUser {
+  id: number;
+  name: string;
+  mockData?: number;
+}
+
+/**
+ * Divider 컴포넌트: 구분선 역할을 하는 컴포넌트입니다.
+ * @return {JSX.Element} 수평선 `<hr />` 요소를 반환합니다.
+ */
+const Divider = () => <hr className="my-6 w-full border-gray-300" />;
+
+/**
+ * AddChannel 컴포넌트
+ *
+ * 사용자가 경로 이름을 입력하고 최대 5명까지 사용자 추가가 가능합니다.
+ * 각 사용자는 출발지와 도착지의 설정이 가능합니다.
+ *
+ * @return {JSX.Element} 채널 추가 페이지 레이아웃을 반환합니다.
+ *
+ * @remarks
+ * 이 컴포넌트는 사용자가 지정된 이름으로 사용자를 추가하고,
+ * 추가된 사용자마다 출발지, 도착지, 그리고 경로 설정이 가능합니다.
+ *
+ * @example
+ * ```tsx
+ * <AddChannel />
+ * ```
+ */
+
+export const AddChannel = () => {
+  const [users, setUsers] = useState<IUser[]>([{ id: 1, name: '사용자1', mockData: 10 }]);
+
+  /**
+   * 사용자 추가 함수
+   *
+   * 현재 사용자 목록에 새로운 사용자를 추가합니다.
+   * 최대 5명까지 추가할 수 있으며, 그 이상은 추가할 수 없습니다.
+   *
+   * @return {void} 반환값이 없습니다.
+   *
+   * @remarks
+   * 사용자가 5명 이상일 경우 추가되지 않도록 제한하고,
+   * 추가되는 사용자는 '사용자[n]' 형식의 이름을 가집니다.
+   *
+   * @example
+   * ```
+   * addUser(); // 사용자 추가
+   * ```
+   */
+  const addUser = () => {
+    if (users.length === 5) return;
+    const newUser: IUser = {
+      id: users.length + 1,
+      name: `사용자${users.length + 1}`,
+      mockData: Math.floor(Math.random() * 100),
+    };
+    setUsers([...users, newUser]);
+  };
+
+  /**
+   * 사용자 추가 함수
+   *
+   * 현재 사용자 목록에 사용자를 삭제합니다.
+   * 최대 4명까지 삭제할 수 있으며, 첫 사용자는 삭제할 수 없습니다.
+   *
+   * @return {void} 반환값이 없습니다.
+   *
+   * @remarks
+   * 사용자 2번 부터 삭제 버튼이 생깁니다.
+   * 사용자가 삭제되면 id를 다시 부여하여 빈 부분을 당겨와 채웁니다.
+   *
+   * @example
+   * ```
+   * deleteUser(3); // 3번 id 사용자 삭제
+   * ```
+   */
+
+  const deleteUser = (id: number) => {
+    const updatedUsers = users
+      .filter(user => user.id !== id)
+      .map((user, index) => ({
+        ...user,
+        id: index + 1,
+        name: `사용자${index + 1}`,
+      }));
+    setUsers(updatedUsers);
+  };
+
+  useEffect(() => {
+    console.log(users);
+  }, [users]);
+
+  return (
+    <main className="flex h-full w-full flex-col items-center px-8">
+      <InputBox placeholder="경로 이름을 입력해주세요. ex) 아들 집 가는 길" />
+      <Divider />
+      <section className="w-full space-y-4">
+        {users.map(user => (
+          <div className="flex flex-row items-center justify-center space-x-2" key={user.id}>
+            <div className="shadow-userName border-grayscale-400 flex h-12 w-16 items-center justify-center rounded-lg border text-xs">
+              {user.name}
+            </div>
+            <div
+              className={classNames(
+                'text-grayscale-150 bg-grayscale-100 m-0 flex h-11 items-center justify-center rounded-md text-xs font-semibold',
+                user.id > 1 ? 'w-56' : 'w-64',
+              )}
+            >
+              클릭시 출발지/도착지, 경로 설정 가능
+            </div>
+            {user.id > 1 && (
+              <button onClick={() => deleteUser(user.id)}>
+                <IoClose className="text-grayscale-400 h-6 w-6" />
+              </button>
+            )}
+          </div>
+        ))}
+      </section>
+      <section className="text-grayscale-400 my-4 flex flex-row items-center justify-center gap-[2px] text-xs">
+        <HiMiniInformationCircle className="h-4 w-4 text-black" />
+        사용자 별로 출발지/도착지(마커), 경로(그림)을 설정할 수 있습니다.
+      </section>
+      {users.length < 5 && (
+        <section className="flex w-full justify-end">
+          <button
+            onClick={addUser}
+            className="bg-grayscale-25 border-gray-75 h-8 w-64 rounded border p-2 text-xs"
+          >
+            사용자 추가
+          </button>
+        </section>
+      )}
+    </main>
+  );
+};

frontend/src/pages/DrawRoute.tsx

@@ -1,4 +1,4 @@
-import { Footer } from '@/component/Layout/Footer';
+import { Footer } from '@/component/layout/Footer';
 import { Map } from '@/component/maps/Map';
 import { MdArrowBack } from 'react-icons/md';
 import { Linedrawer } from '@/component/linedrawer/Linedrawer';

frontend/src/pages/GuestView.tsx

@@ -1,5 +1,5 @@
 import { Map } from '@/component/maps/Map.tsx';
-import { HeaderContext } from '@/component/layout/header/LayoutHeaderProvider.tsx';
+import { HeaderContext } from '@/component/layout/header/LayoutHeaderProvider';
 import { useContext, useEffect } from 'react';
 
 export const GuestView = () => {

frontend/src/pages/Main.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { getUserLocation } from '@/hooks/getUserLocation';
 import { Map } from '@/component/maps/Map';
-import { BottomSheet } from '@/component/bottomsheet/BottomSheet';
+import { BottomSheet } from '@/component/BottomSheet/BottomSheet';
 import { Content } from '@/component/content/Content';
 import { MdFormatListBulleted } from 'react-icons/md';
 

frontend/src/stories/BottomSheet.stories.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import { Meta, Story } from '@storybook/react';
-import { BottomSheet } from '@/component/bottomsheet/BottomSheet';
+import { BottomSheet } from '@/component/BottomSheet/BottomSheet';
 import { Content } from '@/component/content/Content';
 
 export default {

frontend/tailwind.config.js

@@ -9,13 +9,15 @@ module.exports = {
       colors: {
         grayscale: {
           white: '#FFFFFF',
-          25: '#FEFEFEF2',
-          50: 'rgba(60, 60, 67, 0.36)',
-          100: '#B7B7B7',
+          25: '#FBFBFB',
+          50: '#A0AEC0',
+          75: '#E2E8F0',
+          100: '#EDF2F7',
+          150: '#AAB6C7',
           200: '#6D6D6D',
           400: '#555555',
           800: '#3E3E3E',
-          900: '1C1C1C',
+          900: '#1C1C1C',
         },
         blueGray: {
           200: '#495664',
@@ -48,6 +50,7 @@ module.exports = {
         floatButton: '0 5px 10px rgba(0,0,0,0.3)',
         floatMenuButton: '0 4px 4px rgba(0,0,0,0.25)',
         float: '0 4px 20px rgba(0, 0, 0, 0.13)',
+        userName: '5px 4px 7.1px rgba(0, 0, 0, 0.05)',
         basic: 'inset 0 0 3px rgba(0, 0, 0, 0.11)',
         dark: '0px -6px 20px 0px rgba(0, 0, 0, 0.25)',
       },