feat: 기본 디자인 마무리하기

0ne6yte · Nov 15, 2023 · 11135d7 · 11135d7
1 parent 07d3a0a
commit 11135d7
Show file tree

Hide file tree

Showing 14 changed files with 205 additions and 20 deletions.
diff --git a/src/Main.tsx b/src/Main.tsx
@@ -8,11 +8,11 @@ import App from './App';
 import './global.css';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <ModalProvider>
-        <App />
-      </ModalProvider>
-    </BrowserRouter>
-  </React.StrictMode>
+  // <React.StrictMode>
+  <BrowserRouter>
+    <ModalProvider>
+      <App />
+    </ModalProvider>
+  </BrowserRouter>
+  // </React.StrictMode>
 );
diff --git a/src/domain/_common/components/Checkbox.tsx b/src/domain/_common/components/Checkbox.tsx
@@ -40,7 +40,7 @@ export function Checkbox({ type, control }: CheckboxProps) {
 
         return (
           <button
-            className={`w-[336px] h-[101px] border-2 rounded-xl flex justify-start items-center font-bold text-[24px] p-3 ${
+            className={`w-full h-[101px] border-2 rounded-xl flex justify-start items-center font-bold text-[24px] p-3 ${
               isSelected
                 ? 'text-white bg-primary-default border-primary-default'
                 : 'text-grey-placeholder border-grey-placeholder'

diff --git a/src/domain/_common/components/IconButton.tsx b/src/domain/_common/components/IconButton.tsx
@@ -5,9 +5,10 @@ interface IconButtonProps {
   disabled?: boolean;
   text: string;
   icon: ReactNode;
+  className?: string;
 }
 
-export function IconButton({ onClick = () => {}, disabled = false, text, icon }: IconButtonProps) {
+export function IconButton({ onClick = () => {}, disabled = false, text, icon, className = '' }: IconButtonProps) {
   const handleButtonClick = () => {
     onClick();
   };
@@ -18,7 +19,7 @@ export function IconButton({ onClick = () => {}, disabled = false, text, icon }:
       disabled={disabled}
       className={`group flex px-2 py-[10px] space-x-4 items-center justify-center rounded-[4px] bg-highlight-gradient active:bg-highlight-gradient-dark disabled:bg-grey-whitegray disabled:bg-none ${
         disabled ? 'fill-grey-placeholder' : 'fill-white'
-      }`}
+      } ${className}`}
     >
       <p className="text-white text-headline3 font-bold group-disabled:text-grey-placeholder">{text}</p>
       {icon}

diff --git a/src/domain/_common/components/NoticeBubble.tsx b/src/domain/_common/components/NoticeBubble.tsx
@@ -1,10 +1,11 @@
 interface BubbleProps {
   message: string;
+  className?: string;
 }
 
-export default function Bubble({ message }: BubbleProps) {
+export default function Bubble({ message, className = '' }: BubbleProps) {
   return (
-    <div className="relative w-60 leading-[30px] rounded-[20px] bg-black">
+    <div className={`relative w-60 leading-[30px] rounded-[20px] bg-black ${className}`}>
       <div className="px-[15px] text-center">
         <p className="text-white text-[13px] font-bold">{message}</p>
       </div>

diff --git a/src/domain/_common/components/Stepper.tsx b/src/domain/_common/components/Stepper.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 interface StepperProps {
   stepLength: number;
   activeStep: number;
+  classProps?: number;
 }
 
 const indicatorStyle = {
@@ -11,7 +12,7 @@ const indicatorStyle = {
   next: 'bg-white border border-grey-placeholder text-grey-placeholder',
 };
 
-export function Stepper({ stepLength, activeStep }: StepperProps) {
+export function Stepper({ stepLength, activeStep, classProps }: StepperProps) {
   const getIndicatorStyle = (step: number) => {
     if (step < activeStep) {
       return indicatorStyle.previous;

diff --git a/src/domain/_common/components/TextInput.tsx b/src/domain/_common/components/TextInput.tsx
@@ -17,9 +17,9 @@ export function TextInput({ name, label, control, useCheckmark = false, ...props
       name={name}
       control={control}
       render={({ field, fieldState: { error, invalid, isDirty } }) => (
-        <div className="flex flex-col">
+        <div className="flex flex-col w-full">
           <div
-            className={`p-[12px] border-grey-placeholder border-[1px] border-solid rounded-[12px] w-full min-w-[336px] flex items-center bg-white ${
+            className={`p-[12px] border-grey-placeholder border-[1px] border-solid rounded-[12px] w-full flex items-center bg-white ${
               error ? 'border-red-default' : ''
             }`}
           >

diff --git a/src/domain/photo/RegisterPhoto/ScanQRCode.tsx b/src/domain/photo/RegisterPhoto/ScanQRCode.tsx
@@ -3,7 +3,23 @@ import { Html5QrcodeScanner } from 'html5-qrcode';
 import { useEffect, useState } from 'react';
 
 export default function ScanQRCode() {
-  const [scanResult, setScanResult] = useState('');
+  const [scanResultUrl, setscanResultUrl] = useState('');
+
+  const isImgUrl = async (url: string) => {
+    console.log(url);
+
+    const img = new Image();
+    img.src = `${url}.png`;
+
+    return await new Promise((resolve) => {
+      img.onerror = () => {
+        resolve(false);
+      };
+      img.onload = () => {
+        resolve(true);
+      };
+    });
+  };
 
   useEffect(() => {
     const scanner = new Html5QrcodeScanner(
@@ -19,7 +35,7 @@ export default function ScanQRCode() {
     );
 
     const qrSuccessCallback = (decodedText: any, decodedResult: any) => {
-      setScanResult(String(decodedText));
+      setscanResultUrl(String(decodedText));
 
       scanner.clear().catch((err) => {
         console.log(err);
@@ -29,9 +45,29 @@ export default function ScanQRCode() {
     const qrFailCallback = () => {};
 
     scanner.render(qrSuccessCallback, qrFailCallback);
+
+    return () => {
+      scanner.clear().catch((error) => {
+        console.error('Failed to clear html5QrcodeScanner. ', error);
+      });
+    };
   }, []);
 
+  useEffect(() => {
+    if (scanResultUrl) {
+      isImgUrl(scanResultUrl)
+        .then((result) => {
+          console.log(result);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    }
+  }, [scanResultUrl]);
+
   return (
-    <>{scanResult ? <h1>주소 이름은 {scanResult}입니다.</h1> : <div id="reader" className="w-full h-[250px]"></div>}</>
+    <>
+      <div id="reader" className="w-full h-[250px]"></div>
+    </>
   );
 }
diff --git a/src/domain/photo/RegisterPhoto/index.tsx b/src/domain/photo/RegisterPhoto/index.tsx
@@ -21,8 +21,7 @@ export default function RegisterPhoto() {
   ];
 
   return (
-    <div className="h-full flex flex-col">
-      RegisterPhoto 페이지
+    <div className="small-h-screen flex flex-col">
       <div className="p-10 bg-black-80 rounded-tl-[30px] rounded-tr-[30px] flex-1 flex flex-col items-center gap-5 w-full">
         <h1 className="text-white font-bold text-[24px]">QR 코드를 스캔하세여</h1>
         <Tab.Group initialIndex={1}>

diff --git a/src/domain/photo/UploadPhoto/components/AddPhotoIntoAlbum.tsx b/src/domain/photo/UploadPhoto/components/AddPhotoIntoAlbum.tsx
@@ -0,0 +1,32 @@
+import { ReactComponent as ArrowDownIcon } from '@/assets/arrow-down.svg';
+import { IconButton } from '@/domain/_common/components';
+import { Dropdown } from '@/domain/_common/components/Dropdown';
+import Bubble from '@/domain/_common/components/NoticeBubble';
+
+const sampleAlbumInfo = { id: '이건 내 엘범이야', link: 'https://ifh.cc/g/ySOj5R.jpg' };
+
+export default function AddPhotoIntoAlbum() {
+  return (
+    <>
+      <div className="flex flex-col gap-1 items-start justify-center relative pb-2">
+        <Bubble message="추억을 저장할 공간을 선택해주세요" className="z-30 fixed" />
+        <div className="flex flex-row justify-start gap-3 items-center">
+          <Dropdown className="relative">
+            <Dropdown.Trigger>
+              <IconButton text="일상" icon={<ArrowDownIcon />} className="py-1 text-lg" />
+            </Dropdown.Trigger>
+            <Dropdown.List className="z-20 absolute">
+              <Dropdown.Item>앨범이름 1</Dropdown.Item>
+              <Dropdown.Item>앨범이름 2</Dropdown.Item>
+              <Dropdown.Item>앨범이름 3</Dropdown.Item>
+            </Dropdown.List>
+          </Dropdown>
+          <h2 className="font-bold text-[18px]">앨범에 사진 추가</h2>
+        </div>
+      </div>
+      <div className="flex flex-col items-center justify-start h-full w-full py-5">
+        <img src={sampleAlbumInfo.link} alt="샘플 사진" className="rounded-2xl h-4/5" />
+      </div>
+    </>
+  );
+}
diff --git a/src/domain/photo/UploadPhoto/components/SelectFrame.tsx b/src/domain/photo/UploadPhoto/components/SelectFrame.tsx
@@ -0,0 +1,32 @@
+import { Checkbox } from '@/domain/_common/components';
+import { useForm } from '@/hooks';
+import { yupSchema } from '@/utils/validation';
+
+export default function SelectFrame() {
+  const { control } = useForm({
+    defaultValues: {
+      checkbox: '',
+    },
+    schema: {
+      checkbox: yupSchema.requiredString,
+    },
+    mode: 'onChange',
+  });
+
+  return (
+    <>
+      <h2 className="font-bold text-[18px] pb-5">프레임 선택</h2>
+      <ul className="w-full flex flex-col gap-3">
+        <li>
+          <Checkbox type="fatHorizontal" control={control} />
+        </li>
+        <li>
+          <Checkbox type="fatVertical" control={control} />
+        </li>
+        <li>
+          <Checkbox type="thinVertical" control={control} />
+        </li>
+      </ul>
+    </>
+  );
+}
diff --git a/src/domain/photo/UploadPhoto/components/UploadInfo.tsx b/src/domain/photo/UploadPhoto/components/UploadInfo.tsx
@@ -0,0 +1,36 @@
+import { TextInput } from '@/domain/_common/components';
+import { useForm } from '@/hooks';
+import { yupSchema } from '@/utils/validation';
+
+export default function UploadInfo() {
+  const { control } = useForm({
+    defaultValues: {
+      value1: '',
+    },
+    schema: { value1: yupSchema.requiredNumber },
+    mode: 'onChange',
+  });
+
+  return (
+    <ul className="w-full flex flex-col gap-10">
+      <li className="flex flex-col gap-2">
+        <label className="font-bold text-[18px]" htmlFor="date">
+          날짜
+        </label>
+        <TextInput name="날짜" label="날짜" control={control} />
+      </li>
+      <li className="flex flex-col gap-2">
+        <label className="font-bold text-[18px]" htmlFor="memo">
+          메모작성
+        </label>
+        <TextInput name="메모작성" label="메모작성" control={control} />
+      </li>
+      <li className="flex flex-col gap-2">
+        <label className="font-bold text-[18px]" htmlFor="tag">
+          태그
+        </label>
+        <TextInput name="태그" label="태그" control={control} />
+      </li>
+    </ul>
+  );
+}
diff --git a/src/domain/photo/UploadPhoto/index.tsx b/src/domain/photo/UploadPhoto/index.tsx
@@ -0,0 +1,42 @@
+import { useState } from 'react';
+
+import { Stepper } from '@/domain/_common/components';
+import { Button } from '@/domain/_common/components/Button';
+
+import AddPhotoIntoAlbum from './components/AddPhotoIntoAlbum';
+import SelectFrame from './components/SelectFrame';
+import UploadInfo from './components/UploadInfo';
+
+export default function UploadPhoto() {
+  const [step, setStep] = useState(1);
+
+  const handleStepForward = () => {
+    setStep((prev) => prev + 1);
+  };
+
+  const handleStepBackward = () => {
+    setStep((prev) => prev - 1);
+  };
+
+  return (
+    <div className="h-full flex flex-col p-10">
+      <h1 className="font-bold text-[24px] mb-4">새 사진 등록</h1>
+      <div className="h-[75%] w-full relative mb-10 flex flex-col justify-center">
+        {step === 1 && <AddPhotoIntoAlbum />}
+        {step === 2 && <SelectFrame />}
+        {step === 3 && <UploadInfo />}
+      </div>
+      <div className="w-full flex flex-col justify-center items-center gap-5">
+        <Stepper stepLength={3} activeStep={step} />
+        <div className="w-full flex gap-3">
+          <Button variant="contained" onClick={handleStepBackward}>
+            뒤로 가기
+          </Button>
+          <Button color="primary" variant="contained" onClick={handleStepForward}>
+            다음
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/routers/PhotoRouters.tsx b/src/routers/PhotoRouters.tsx
@@ -2,12 +2,14 @@ import { Route, Routes } from 'react-router-dom';
 
 import PhotoList from '@/domain/photo/PhotoList';
 import RegisterPhoto from '@/domain/photo/RegisterPhoto';
+import UploadPhoto from '@/domain/photo/UploadPhoto';
 
 function PhotoRouters() {
   return (
     <Routes>
       <Route index element={<PhotoList />} />
       <Route path={'register'} element={<RegisterPhoto />} />
+      <Route path={'register/upload'} element={<UploadPhoto />} />
     </Routes>
   );
 }

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -4,6 +4,9 @@ module.exports = {
   content: ['./src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
+      heights: {
+        'small-h-screen': '100svh',
+      },
       colors: {
         black: {
           DEFAULT: '#000000',