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

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/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

@@ -23,6 +23,6 @@ export const InputBox = ({
     onChange={onChange}
     onFocus={onFocus}
     onBlur={onBlur}
-    className={`border-input flex h-10 w-80 rounded-sm border px-3 py-2 ${className}`}
+    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/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

@@ -6,7 +6,7 @@ interface IUser {
   name: string;
 }
 
-const Divider = () => <hr className="my-5 w-[90%] border-gray-300" />;
+const Divider = () => <hr className="my-6 w-full border-gray-300" />;
 
 export const AddChannel = () => {
   const [users, setUsers] = useState<IUser[]>([{ id: 1, name: '사용자1' }]);
@@ -19,45 +19,43 @@ export const AddChannel = () => {
     };
     setUsers([...users, newUser]);
   };
-  // main의 경우 임시로 w와 h 설정
+
   return (
-    <main className="h-[852px] w-[393px] bg-white">
-      <section className="flex h-[95%] w-full flex-col items-center">
-        <InputBox
-          className="placeholder:text-xs"
-          placeholder="경로 이름을 입력해주세요. ex) 아들 집 가는 길"
-        />
-        <Divider />
-        <section className="w-[90%] space-y-2">
-          {users.map(user => (
-            <div className="flex flex-row space-x-5" key={user.id}>
-              <div className="flex h-[45px] w-[60px] items-center justify-center border border-gray-300 text-sm">
-                {user.name}
-              </div>
-              <div className="m-0 flex h-[45px] w-[80%] items-center justify-center rounded-sm bg-gray-100 text-xs text-gray-400">
-                클릭시 출발지/도착지, 경로 설정 가능
-              </div>
+    <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>
-          ))}
-        </section>
-        <section className="text-2xs my-4 flex flex-row items-center justify-center gap-[10px] text-gray-400">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            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-[90%] justify-end">
-          <button onClick={addUser} className="w-[75%] rounded border border-gray-300 p-2 text-xs">
-            사용자 추가
-          </button>
-        </section>
+          </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)',
       },