Merge pull request #7 from junction-asia-2023/feat/setting

Feat/setting

package.json

@@ -21,7 +21,8 @@
     "jotai": "^2.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.15.0"
+    "react-router-dom": "^6.15.0",
+    "react-hook-form": "^7.45.4"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/features/app/Router.tsx

@@ -8,6 +8,7 @@ import {
 import LayoutContainer from '../shared/layout/Container';
 import HomeContainer from '../home/Container';
 import LoginContainer from '../login/Container';
+import SettingContainer from '../setting/Container';
 import ErrorContainer from '../shared/error/Container';
 import NotFound from '../shared/error/notfound/NotFound';
 
@@ -23,6 +24,7 @@ const router = createRoutesFromElements(
   >
     <Route index element={<HomeContainer />} />
     <Route path="login" element={<LoginContainer />} />
+    <Route path="setting" element={<SettingContainer />} />
     <Route path="*" element={<NotFound />} />
   </Route>,
 );

src/features/setting/Container.tsx

@@ -0,0 +1,56 @@
+import { Controller } from 'react-hook-form';
+
+import './style/index.scss';
+import { colorset } from './constants';
+import useSetting from './hooks/useSetting';
+
+const Container = () => {
+  const { register, handleSubmit, control, onSubmit } = useSetting();
+
+  return (
+    <div className="setting-container">
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div>
+          <span>Today's comment: </span>
+          <input defaultValue="퇴근하고싶다" {...register('comment')} />
+        </div>
+
+        <div>
+          {/* <select {...register('mude')}>
+          {colorset.map((color) => (
+            <option key={color} value={color}>{color}</option>
+          ))}
+        </select> */}
+          <Controller
+            name="mude"
+            control={control}
+            rules={{ required: true }}
+            render={({ field }) => (
+              <fieldset {...field}>
+                {colorset.map((color) => (
+                  <label htmlFor={color} key={color}>
+                    <input
+                      type="radio"
+                      id={color}
+                      name={field.name}
+                      value={color}
+                      checked={field.value === color}
+                      onChange={(e) => {
+                        field.onChange(e.target.value);
+                      }}
+                    />
+                    {color}
+                  </label>
+                ))}
+              </fieldset>
+            )}
+          />
+        </div>
+
+        <input type="submit" />
+      </form>
+    </div>
+  );
+};
+
+export default Container;

src/features/setting/constants.ts

@@ -0,0 +1 @@
+export const colorset = ['red', 'yellow', 'green'];

src/features/setting/hooks/useSetting.ts

@@ -0,0 +1,22 @@
+import { useForm, SubmitHandler } from 'react-hook-form';
+
+import { Inputs } from '../types';
+
+const useSetting = () => {
+  const { register, handleSubmit, control } = useForm<Inputs>({
+    defaultValues: {
+      mude: 'green',
+      comment: '퇴근!',
+    },
+  });
+  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);
+
+  return {
+    register,
+    handleSubmit,
+    control,
+    onSubmit,
+  };
+};
+
+export default useSetting;

src/features/setting/style/index.scss

@@ -0,0 +1,5 @@
+.setting {
+  &-container {
+    width: 100%;
+  }
+}

src/features/setting/types.ts

@@ -0,0 +1,4 @@
+export type Inputs = {
+  mude: string;
+  comment: string;
+};