[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';