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

backend/package.json

@@ -1,33 +1,33 @@
-{
-  "name": "ddara-backend",
-  "private": true,
-  "workspaces": [
-    "frontend",
-    "backend"
-  ],
-  "version": "0.0.0",
-  "type": "module",
-  "description": "따라따라의 선따라길따라 BackEnd 코드",
-  "main": "index.js",
-  "scripts": {
-    "dev": "node src/index.js",
-    "test": "vitest",
-    "test:watch": "vitest --watch",
-    "test:coverage": "vitest run --coverage",
-    "lint": "pnpm lint-staged"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "bcrypt": "^5.1.1",
-    "dotenv": "^16.4.5",
-    "express": "^4.21.1",
-    "express-validator": "^7.2.0",
-    "jsonwebtoken": "^9.0.2",
-    "pg": "^8.13.1",
-    "swagger-jsdoc": "^6.2.8",
-    "swagger-ui-express": "^5.0.1",
-    "ws": "^8.11.0"
-  }
-}
+{
+  "name": "ddara-backend",
+  "private": true,
+  "workspaces": [
+    "frontend",
+    "backend"
+  ],
+  "version": "0.0.0",
+  "type": "module",
+  "description": "따라따라의 선따라길따라 BackEnd 코드",
+  "main": "index.js",
+  "scripts": {
+    "dev": "node src/index.js",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest run --coverage",
+    "lint": "pnpm lint-staged"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "bcrypt": "^5.1.1",
+    "dotenv": "^16.4.5",
+    "express": "^4.21.1",
+    "express-validator": "^7.2.0",
+    "jsonwebtoken": "^9.0.2",
+    "pg": "^8.13.1",
+    "swagger-jsdoc": "^6.2.8",
+    "swagger-ui-express": "^5.0.1",
+    "ws": "^8.11.0"
+  }
+}

frontend/package.json

@@ -1,64 +1,64 @@
-{
-  "name": "ddara-frontend",
-  "private": true,
-  "workspaces": [
-    "frontend",
-    "backend"
-  ],
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "test": "vitest",
-    "test:watch": "vitest --watch",
-    "test:coverage": "vitest run --coverage",
-    "lint": "pnpm lint-staged",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "dependencies": {
-    "@fontsource/pretendard": "^5.1.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-icons": "^5.3.0",
-    "react-router-dom": "^6.28.0"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
-    "@eslint/js": "^9.13.0",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-interactions": "^8.4.2",
-    "@storybook/addon-onboarding": "^8.4.2",
-    "@storybook/blocks": "^8.4.2",
-    "@storybook/react": "^8.4.2",
-    "@storybook/react-vite": "^8.4.2",
-    "@storybook/test": "^8.4.2",
-    "@types/navermaps": "^3.7.8",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "autoprefixer": "^10.4.20",
-    "classnames": "^2.5.1",
-    "eslint": "^9.13.0",
-    "eslint-import-resolver-typescript": "^3.6.3",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "eslint-plugin-storybook": "^0.11.0",
-    "globals": "^15.11.0",
-    "postcss": "^8.4.47",
-    "storybook": "^8.4.2",
-    "tailwindcss": "^3.4.14",
-    "typescript": "~5.6.2",
-    "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10",
-    "vite-tsconfig-paths": "^5.1.1"
-  },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
-  }
-}
+{
+  "name": "ddara-frontend",
+  "private": true,
+  "workspaces": [
+    "frontend",
+    "backend"
+  ],
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest run --coverage",
+    "lint": "pnpm lint-staged",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@fontsource/pretendard": "^5.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
+    "react-router-dom": "^6.28.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@eslint/js": "^9.13.0",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-onboarding": "^8.4.2",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-vite": "^8.4.2",
+    "@storybook/test": "^8.4.2",
+    "@types/navermaps": "^3.7.8",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-router-dom": "^5.3.3",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.20",
+    "classnames": "^2.5.1",
+    "eslint": "^9.13.0",
+    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-storybook": "^0.11.0",
+    "globals": "^15.11.0",
+    "postcss": "^8.4.47",
+    "storybook": "^8.4.2",
+    "tailwindcss": "^3.4.14",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.10",
+    "vite-tsconfig-paths": "^5.1.1"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}

frontend/src/App.tsx

@@ -6,6 +6,7 @@ import { UserRoute } from '@/pages/UserRoute';
 import { DrawRoute } from '@/pages/DrawRoute';
 import { HostView } from '@/pages/HostView';
 import { GuestView } from '@/pages/GuestView';
+import { Layout } from './component/Layout/Layout';
 
 const ChannelRoutes = () => (
   <Routes>
@@ -18,7 +19,14 @@ export const App = () => (
   <Routes>
     <Route path="/" element={<Main />} />
     <Route path="/register" element={<Register />} />
-    <Route path="/add-channel" element={<AddChannel />} />
+    <Route
+      path="/add-channel"
+      element={
+        <Layout footerTitle="제작 완료">
+          <AddChannel />
+        </Layout>
+      }
+    />
     <Route path="/add-channel/:user" element={<UserRoute />} />
     <Route path="/add-channel/:user/draw" element={<DrawRoute />} />
     <Route path="/channel/:channelId/*" element={<ChannelRoutes />} />

frontend/src/component/Layout/Footer.tsx

@@ -12,7 +12,7 @@ export const Footer = (props: IFooterProps) => {
   const buttonStyle = props.active ? buttonActiveType.ACTIVE : buttonActiveType.PASSIVE;
 
   return (
-    <footer className="absolute bottom-5 w-[95%] h-[6%]">
+    <footer className="absolute bottom-5 h-[6%] w-[95%]">
       <button
         className={classNames(
           'w-full',

frontend/src/component/Layout/Header.tsx

@@ -17,9 +17,9 @@ export const Header = (props: IHeaderProps) => {
         'w-full',
         'h-16',
         'p-4',
-        'flex ',
-        'items-center ',
-        'text-black ',
+        'flex',
+        'items-center',
+        'text-black',
         'gap-[16px]',
         background,
       )}

frontend/src/component/Layout/Layout.tsx

@@ -14,9 +14,7 @@ interface ILayoutProps {
 }
 
 export const Layout = (props: ILayoutProps) => (
-  <div
-    className={classNames('flex', 'flex-col', 'items-center', 'w-full', 'h-full', 'bg-gray-400')}
-  >
+  <div className={classNames('flex', 'flex-col', 'items-center', 'h-[852px]', 'w-[393px]')}>
     {/* Header */}
     <Header
       title={props.headerTitle}

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 focus:border-grayscale-400 flex h-11 w-full rounded border px-3 text-xs focus:border-2 focus:outline-none ${className}`}
+  />
+);

frontend/src/component/maps/NaverMap.tsx

@@ -29,5 +29,5 @@ export const NaverMap = (props: INaverMapOptions) => {
     }
   }, []);
 
-  return <section ref={mapRef} className="w-full h-full" />;
+  return <section ref={mapRef} className="h-full w-full" />;
 };

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/main.tsx

@@ -2,7 +2,7 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import './index.css';
-import { App } from './App2';
+import { App } from './App';
 // 우선은 폰트 다 포함시켰는데, 나중에 사용할 것들만 따로 뺴자.
 import '@fontsource/pretendard/100.css';
 import '@fontsource/pretendard/200.css';

frontend/src/pages/AddChannel.tsx

@@ -1 +1,62 @@
-export const AddChannel = () => <>Hello</>;
+import { useState } from 'react';
+import { InputBox } from '../component/common/InputBox';
+
+interface IUser {
+  id: number;
+  name: string;
+}
+
+const Divider = () => <hr className="my-6 w-full border-gray-300" />;
+
+export const AddChannel = () => {
+  const [users, setUsers] = useState<IUser[]>([{ id: 1, name: '사용자1' }]);
+
+  const addUser = () => {
+    if (users.length === 5) return;
+    const newUser: IUser = {
+      id: users.length + 1,
+      name: `사용자${users.length + 1}`,
+    };
+    setUsers([...users, newUser]);
+  };
+
+  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-200 flex h-12 w-16 items-center justify-center rounded-lg border text-xs">
+              {user.name}
+            </div>
+            <div className="text-grayscale-150 m-0 flex h-11 w-64 items-center justify-center rounded-md bg-gray-100 text-xs font-semibold">
+              클릭시 출발지/도착지, 경로 설정 가능
+            </div>
+          </div>
+        ))}
+      </section>
+      <section className="my-4 flex flex-row items-center justify-center gap-[2px] text-xs text-gray-400">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="11px"
+          height="11px"
+          fill="black"
+          className="bi bi-info-circle-fill"
+          viewBox="0 0 16 16"
+        >
+          <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2" />
+        </svg>
+        사용자 별로 출발지/도착지(마커), 경로(그림)을 설정할 수 있습니다.
+      </section>
+      <section className="flex w-full justify-end">
+        <button
+          onClick={addUser}
+          className="bg-grayscale-25 border-gray-75 w-64 rounded border p-2 text-xs"
+        >
+          사용자 추가
+        </button>
+      </section>
+    </main>
+  );
+};

frontend/tailwind.config.js

@@ -9,9 +9,11 @@ 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',
@@ -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)',
       },