From fc7bf09b09035f7b77c317e95953db0475cc4937 Mon Sep 17 00:00:00 2001
From: JAEMOONLEE <leejaemoon@lotte.net>
Date: Fri, 15 Sep 2023 11:06:40 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20Step2=20=EC=88=98=EC=A0=95,=20Stepper?=
 =?UTF-8?q?=20Component=20=EC=B6=94=EA=B0=80!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Stepper2/Stepper2.module.scss |  12 +
 components/Stepper2/Stepper2.tsx         |  30 +++
 components/index.tsx                     |   1 +
 pages/room/addRoom/step2.tsx             | 279 +++++++++++------------
 4 files changed, 173 insertions(+), 149 deletions(-)
 create mode 100644 components/Stepper2/Stepper2.module.scss
 create mode 100644 components/Stepper2/Stepper2.tsx

diff --git a/components/Stepper2/Stepper2.module.scss b/components/Stepper2/Stepper2.module.scss
new file mode 100644
index 0000000..ac8a368
--- /dev/null
+++ b/components/Stepper2/Stepper2.module.scss
@@ -0,0 +1,12 @@
+.stepper_container {
+    @apply flex items-center justify-center space-x-4;
+  }
+  
+  .rounded {
+    @apply w-[32px] h-[32px] rounded-full text-r1 flex items-center justify-center focus:outline-none;
+    background: rgba(255, 142, 0, 0.10)
+  }
+
+  .disabled {
+    @apply bg-g3 text-g0
+  }
\ No newline at end of file
diff --git a/components/Stepper2/Stepper2.tsx b/components/Stepper2/Stepper2.tsx
new file mode 100644
index 0000000..936b872
--- /dev/null
+++ b/components/Stepper2/Stepper2.tsx
@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import styles from './Stepper2.module.scss';
+
+
+interface StepperProps {
+    disabled ?: boolean
+}
+
+export default function Stepper2 ( { disabled }: StepperProps )  {
+  const [count, setCount] = useState(1);
+
+  return (
+    <div className={styles.stepper_container}>
+      <button 
+        type="button"
+        className={`${styles.rounded} ${disabled ? styles.disabled : ''} `}
+        onClick={() => setCount(count - 1)}
+        disabled={disabled}
+      >-
+      </button>
+      <span className='font-bold text-g7'>{count}</span>
+      <button 
+        type="button"
+        className={`${styles.rounded} ${disabled ? styles.disabled : ''} `}
+        onClick={() => setCount(count + 1)}
+        disabled={disabled}
+      >+</button>
+    </div>
+  );
+};
diff --git a/components/index.tsx b/components/index.tsx
index 5a947de..5b9946a 100644
--- a/components/index.tsx
+++ b/components/index.tsx
@@ -11,6 +11,7 @@ export { default as Radio } from '@/components/Radio/Radio.tsx';
 export { default as Select } from '@/components/Select/Select.tsx';
 export { default as SignUp } from '@/components/SignUp/Step1.tsx';
 export { default as Stepper } from '@/components/Stepper/Stepper.tsx';
+export { default as Stepper2 } from '@/components/Stepper2/Stepper2.tsx';
 export { default as Textarea } from '@/components/Textarea/Textarea.tsx';
 export { default as Toggle } from '@/components/Toggle/Toggle.tsx';
 export { default as Typography } from '@/components/Typography/Typography.tsx';
diff --git a/pages/room/addRoom/step2.tsx b/pages/room/addRoom/step2.tsx
index 78136ef..cd083d7 100644
--- a/pages/room/addRoom/step2.tsx
+++ b/pages/room/addRoom/step2.tsx
@@ -5,15 +5,12 @@ import { GetStaticPropsContext } from 'next';
 import Router, { useRouter } from 'next/router';
 import {
   Stepper,
-  Select,
+  Stepper2,
   Typography,
   Checkbox,
   Button,
 } from '@/components/index.tsx';
 import { FieldValues, SubmitHandler, useForm } from 'react-hook-form';
-import { GuList, DongList } from '@/public/js/guDongList.ts';
-import { Option } from '@/components/Select/Select';
-import { GuDong } from '../addRoom';
 
 export const getStaticProps = async ({ locale }: GetStaticPropsContext) => ({
   props: {
@@ -23,52 +20,35 @@ export const getStaticProps = async ({ locale }: GetStaticPropsContext) => ({
 
 export default function Step1() {
   console.log('useRouter >>', useRouter());
-  
-  const filterTranslation = useTranslation('filter');
   const { register, handleSubmit, watch } = useForm({ mode: 'onChange' });
-  const [guValue, setGuValue] = useState<Option>({
-    value: '',
-    label: '',
-  });
+  const [selectedButton, setSelectedButton] = useState('Studio');
+  const [buttonState, setButtonState] = useState('YES');
   
-  const [dongValue, setDongValue] = useState<GuDong>({
-    gu: '',
-    guLabel: '',
-    value: '',
-    label: '',
-  });
-  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
   const onSubmit: SubmitHandler<FieldValues> = (data) => {
     Router.push('/room/addRoom/step3');
   };
 
-  // 옵션 선택 시 실행될 함수, 유효성 검증
-  const handleOptionSelect = useCallback(() => {
-    if (!dongValue.label) return;
+  const buttons = [
+    { label: 'Studio'},
+    { label: '1bed flat'},
+    { label: 'Share house'}
+  ];
 
-    let resultOptions: string[];
-    const option = dongValue.label;
-    setSelectedOptions((prevSelectedOptions) => {
-      const isExist = prevSelectedOptions.some((item) => item.includes(option));
-      // Location이 5개 이상 선택 될 경우 Toast 노출
-      if (prevSelectedOptions.length >= 5) {
-        
-        return [...prevSelectedOptions];
-      }
+  const handleButtonClick = (label: string) => {
+    setSelectedButton(label);
+  };
 
-      if (!isExist) {
-        resultOptions = [...prevSelectedOptions, guValue?.label.concat(`, ${option}`)];
-      } else {
-        // TODO translation 사용해서 여기 나중에 바꿔줘야함
-        resultOptions = prevSelectedOptions;
-      }
-      return [...resultOptions];
-    });
-  }, [dongValue.label, guValue?.label]);
-  
-  useEffect(() => {
-    handleOptionSelect();
-  }, [dongValue.label, handleOptionSelect]);
+  const getButtonColor = (label: string) => {
+    return selectedButton === label ? 'r1' : 'outlined';
+  }
+
+  const handleYNButtonClick = (value: string) => {
+    setButtonState(value);
+  };
+
+  const getYNButtonColor = (value: string) => {
+    return buttonState === value ? 'r1' : 'outlined';
+  };
 
   return (
     <>
@@ -85,25 +65,25 @@ export default function Step1() {
               Type of housing
             </Typography>
           </div>
-          <div className="mb-[14px]">
+          <div className="mb-[32px]">
             <div className="mb-3 grid grid-cols-3 gap-0 text-g0">
-              <div className="col-span-1 text-[16px] text-g0">
-                <Button size="lg" type="button" disabled={false}>
-                  Studio
-                </Button>
-              </div>
-              <div className="col-span-1 text-[16px] bg-g0">
-                <Button size="lg" type="button" disabled={false}>
-                  1bed flat
-                </Button>
-              </div>
-              <div className="col-span-1 text-[16px]">
-                <Button size="lg" type="button" disabled={false}>
-                  Share house
-                </Button>
-              </div>
+              {buttons.map( (button,index) => (
+                <div key={button.label + index} >
+                  <Button 
+                    size="lg"
+                    type="button"
+                    color={getButtonColor(button.label)}
+                    onClick={() => handleButtonClick(button.label)}
+                  >
+                    {button.label}
+                  </Button>
+                </div>
+              ))}
             </div>
           </div>
+
+          <hr />
+
           <div className="py-[28px]">
             <div className="mb-[16px]">
               <Typography variant="body" customClassName="text-[16px] font-bold text-g7">
@@ -114,106 +94,107 @@ export default function Step1() {
               <Typography variant="label" fontStyle="semiBold" customClassName="text-[16px]">
                 Total bedrooms
               </Typography>
+              <Stepper2 disabled={true}/>
             </div>
-            <div className="mb-[8px]">
-              <Select
-                options={[]}
-                register={register('dateAvailable')}
-                placeholder={"Select"}
-              />
-              <Select
-                options={[]}
-                register={register('dateAvailable')}
-                placeholder={"Select"}
-              />
-              <Select
-                options={[]}
-                register={register('dateAvailable')}
-                placeholder={"Select"}
-              />
+            <div className="flex justify-between items-center mb-[8px]">
+              <Typography variant="label" fontStyle="semiBold" customClassName="text-[16px]">
+                Total bathrooms
+              </Typography>
+              <Stepper2 />
+            </div>
+            <div className="flex justify-between items-center mb-[8px]">
+              <Typography variant="label" fontStyle="semiBold" customClassName="text-[16px]">
+                Total roommates
+              </Typography>
+              <Stepper2 />
             </div>
           </div>
-          <div className="flex justify-between items-center mb-[8px]">
-            <Typography variant="label" fontStyle="semiBold" customClassName="text-[16px]">
-              Total Roomates
-            </Typography>
-          </div>
-          <Select
-            options={[]}
-            register={register('dateAvailable')}
-            placeholder={"Select"}
-          />
-          <div className="mb-[4px] mt-[30px]">
+
+          <hr />
+          
+          <div className="mb-[4px] mt-[32px]">
             <Typography variant="body" customClassName="text-[16px] font-bold text-g7">
-              Furnishing
+              Furnished
             </Typography>
           </div>
-          <div className="flex justify-between items-center mb-[20px]">
-            <Typography variant="label" fontStyle="semiBold" customClassName="text-[16px]">
-              Not furnished
-            </Typography>
-          </div>
-          <div className="grid grid-cols-2 gap-[8px] mt-[12px]">
-            <Checkbox
-              type="outlined"
-              label="Bed"
-              register={register('gasChecked')}
-              checked={watch('gasChecked')}
-            />
-            <Checkbox
-              type="outlined"
-              label="Wardrobe"
-              register={register('waterChecked')}
-              checked={watch('waterChecked')}
-            />
-            <Checkbox
-              type="outlined"
-              label="TV"
-              register={register('electricityChecked')}
-              checked={watch('electricityChecked')}
-            />
-            <Checkbox
-              type="outlined"
-              label="Air conditioner"
-              register={register('cleaningChecked')}
-              checked={watch('cleaningChecked')}
-            />
-             <Checkbox
-              type="outlined"
-              label="Heater"
-              register={register('electricityChecked')}
-              checked={watch('electricityChecked')}
-            />
-            <Checkbox
-              type="outlined"
-              label="Washing machine"
-              register={register('cleaningChecked')}
-              checked={watch('cleaningChecked')}
-            />
-             <Checkbox
-              type="outlined"
-              label="Stove"
-              register={register('electricityChecked')}
-              checked={watch('electricityChecked')}
-            />
-            <Checkbox
-              type="outlined"
-              label="Refrigerator"
-              register={register('cleaningChecked')}
-              checked={watch('cleaningChecked')}
-            />
-             <Checkbox
-              type="outlined"
-              label="Door lock"
-              register={register('electricityChecked')}
-              checked={watch('electricityChecked')}
-            />
+          <div className="mb-[16px]">
+            <div className="mb-3 grid grid-cols-2 gap-0">
+              <div className="col-span-1">
+                <Button size="lg" type="button" onClick={() => handleYNButtonClick('YES')} color={getYNButtonColor('YES')} >
+                  YES
+                </Button>
+              </div>
+              <div className="col-span-1">
+                <Button size="lg" type="button" onClick={() => handleYNButtonClick('NO')} color={getYNButtonColor('NO')} >
+                  NO
+                </Button>
+              </div>
+            </div>
           </div>
-          <div className="mt-[111px] fixed bottom-0 w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max">
+          {
+            (buttonState === 'YES') &&
+            <div className="grid grid-cols-2 gap-[12px] mt-[16px]">
+              <Checkbox
+                type="outlined"
+                label="Bed"
+                register={register('gasChecked')}
+                checked={watch('gasChecked')}
+              />
+              <Checkbox
+                type="outlined"
+                label="Wardrobe"
+                register={register('waterChecked')}
+                checked={watch('waterChecked')}
+              />
+              <Checkbox
+                type="outlined"
+                label="TV"
+                register={register('electricityChecked')}
+                checked={watch('electricityChecked')}
+              />
+              <Checkbox
+                type="outlined"
+                label="Air conditioner"
+                register={register('cleaningChecked')}
+                checked={watch('cleaningChecked')}
+              />
+              <Checkbox
+                type="outlined"
+                label="Heater"
+                register={register('electricityChecked')}
+                checked={watch('electricityChecked')}
+              />
+              <Checkbox
+                type="outlined"
+                label="Washing machine"
+                register={register('cleaningChecked')}
+                checked={watch('cleaningChecked')}
+              />
+              <Checkbox
+                type="outlined"
+                label="Stove"
+                register={register('electricityChecked')}
+                checked={watch('electricityChecked')}
+              />
+              <Checkbox
+                type="outlined"
+                label="Refrigerator"
+                register={register('cleaningChecked')}
+                checked={watch('cleaningChecked')}
+              />
+              <Checkbox
+                type="outlined"
+                label="Door lock"
+                register={register('electricityChecked')}
+                checked={watch('electricityChecked')}
+              />
+            </div>
+          }
+          <div className=" fixed bottom-0 w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max">
             <div className="w-full">
               <div className="mb-[13px]">
-                <Button size="lg" type="submit" disabled={false}>
-                  {filterTranslation.t('Next')}
+                <Button size="lg" type="submit" disabled={true}>
+                  Next
                 </Button>
               </div>
             </div>