update directory structure and fix eslint setting

everyt · Sep 10, 2023 · 2aa39cc · 2aa39cc
1 parent 49d59d8
commit 2aa39cc
Show file tree

Hide file tree

Showing 16 changed files with 2,371 additions and 210 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,61 @@
+module.exports = {
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint",
+    "prettier"
+  ],
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "createDefaultProgram": true
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "ignorePatterns": [
+    "node_modules/"
+  ],
+  "extends": [
+    "airbnb",
+    "airbnb-typescript",
+    "airbnb/hooks",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "prettier"
+  ],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-filename-extension": [
+      "warn",
+      {
+        "extensions": [
+          ".ts",
+          ".tsx"
+        ]
+      }
+    ],
+    "no-useless-catch": "off",
+    "undefined": 0,
+    "import/extensions": 0,
+    "@typescript-eslint/no-unused-vars": 0,
+    "react/jsx-pascal-case": 0,
+    "@typescript-eslint/naming-convention": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "import/prefer-default-export": 0,
+    "react/function-component-definition": 0,
+    "prettier/prettier": 0,
+    "import/order": 0,
+    "@typescript-eslint/no-unused-expressions": 0,
+    "lines-around-directive": 0,
+    "react-hooks/rules-of-hooks": 0,
+    "@typescript-eslint/no-non-null-asserted-optional-chain": 0,
+    "react-hooks/exhaustive-deps": 0,
+    "react/button-has-type": 0,
+    "no-irregular-whitespace": 0,
+    "global-require": 0,
+    "import/no-extraneous-dependencies": 0
+  }
+}
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,21 @@
+{
+  "jsxSingleQuote": true,
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "tabWidth": 2,
+  "importOrder": [
+    "^react",
+    "^next/(.*)$",
+    "^next-auth/(.*)$",
+    "^@/(.*)$",
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "plugins": [
+    "prettier-plugin-tailwindcss",
+    "@trivago/prettier-plugin-sort-imports"
+  ]
+}
diff --git a/components/Common/Upload.tsx b/components/Common/Upload.tsx
@@ -1,10 +1,12 @@
 type inputProps = {
   children: React.ReactNode;
   className: string;
-  handleInputFile?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+  handleInputFile: (ev: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-type divProps = inputProps & {
+type divProps = {
+  children: React.ReactNode;
+  className: string;
   handleDropFile: (ev: React.DragEvent<HTMLDivElement>) => void;
   handleDragOver: (ev: React.DragEvent<HTMLDivElement>) => void;
   handleClose: () => void;
@@ -39,24 +41,21 @@ const input = ({ children, className, handleInputFile }: inputProps) => {
         className='hidden'
         onChange={handleInputFile}
       />
-      <label
-        htmlFor='input_file'
-        className={className}
-      >
+      <label htmlFor='input_file' className={className}>
         {children}
       </label>
     </>
   );
 };
 type inputType = { input: typeof input };
 
-export const Upload: divType & inputType = ({
+export const upload: divType & inputType = ({
   children,
 }: {
   children: React.ReactNode;
 }) => {
-  return <>{children}</>;
+  return { children };
 };
 
-Upload.div = div;
-Upload.input = input;
+upload.div = div;
+upload.input = input;
diff --git a/components/Modal/WriteFeedModal.tsx b/components/Modal/WriteFeedModal.tsx
@@ -1,9 +1,6 @@
-import { useCallback, useState } from 'react';
-import { useSession } from 'next-auth/react';
-import { useSelectedFile } from '@/hooks/useSelectedFile';
-import { Upload } from '@/components/Common/Upload';
-
-import { firebaseStorage, firestore } from '@/lib/firebase';
+import { upload } from 'Components/Common/Upload';
+import { useSelectedFile } from 'Hooks/useSelectedFile';
+import { allowScroll, preventScroll } from 'Lib/utils/modal';
 import {
   Timestamp,
   addDoc,
@@ -12,25 +9,48 @@ import {
   serverTimestamp,
   updateDoc,
 } from 'firebase/firestore';
+// import { firebaseStorage, firestore } from '@/lib/firebase';
 import { getDownloadURL, ref, uploadString } from 'firebase/storage';
 
-export default function WriteFeedModal() {
+import { useCallback, useEffect, useState } from 'react';
+
+import { useSession } from 'next-auth/react';
+
+type ModalType = {
+  handleClose: () => void;
+};
+
+export default function WriteFeedModal({ handleClose }: ModalType) {
+  const ALLOWED_IMAGEEXTENSION = ['PNG', 'JPG', 'JPEG', 'WEBP', 'AVIF', 'GIF'];
   const {
     selectedFile,
-    setSelectedFile,
-    onInputSelectedFile,
-    onDropSelectedFile,
-    onDragOver,
-  } = useSelectedFile(['PNG', 'JPG']);
+    handleInputSelectedFile,
+    handleDropSelectedFile,
+    handleDragOver,
+    handleResetSelectedFile,
+  } = useSelectedFile(ALLOWED_IMAGEEXTENSION);
+
+  useEffect(() => {
+    const prevScrollY = preventScroll();
+    return () => {
+      allowScroll(prevScrollY);
+    };
+  }, []);
 
   return (
-    <Upload.div
-      className=''
-      handleDropFile={onDropSelectedFile}
-      handleDragOver={onDragOver}
-      handleClose={}
+    <upload.div
+      className='w-[400px] h-[600px]'
+      handleDropFile={handleDropSelectedFile}
+      handleDragOver={handleDragOver}
+      handleClose={handleClose}
     >
-      <div></div>
-    </Upload.div>
+      <div />
+      <upload.input
+        className='rounded-3xl'
+        handleInputFile={handleInputSelectedFile}
+      >
+        공유하기
+      </upload.input>
+    </upload.div>
   );
 }
diff --git a/components/Semantic/NavBar.tsx b/components/Semantic/NavBar.tsx
@@ -1,45 +1,91 @@
-//TODO: 반응형 웹으로 구성할 때,
-//폰 화면은 ~768px, 태블릿은 ~1024px, 데스크탑은 1024~px라고 하네
+'use client';
 
-//~1024px, 네비바가 작아지고 푸터바가 사라져
+import { motion } from 'framer-motion';
 
-//즉 ~768px일때 네비바와 푸터바가 상하단에 위치해야 해
-//이건 tailwind css를 어떻게 다르게 써야 할 텐데
-//w-18 sm:w-50 lg:w-56' 이런 느낌으로
+import { useState } from 'react';
 
-//기본 폰트 사이즈를 10pt로 주고 rem을 계산하면 쉬울 것 같네
+import Image from 'next/image';
 
-//필요한 버튼은 10개, 다크모드는 색깔만 전환하면 되니까 11개?
-//설정까지 12개?
+// TODO: 반응형 웹으로 구성할 때,
+// 폰 화면은 ~768px, 태블릿은 ~1024px, 데스크탑은 1024~px라고 하네
 
-//그럼 음. 링크 버튼이 아닌 경우엔 굳이 컴포넌트로 뺄 필요가 있나?
-//인풋은 밸류를 주기 위해서 필요해.
-//코드를 깔끔하게 유지하기 위해서 버튼 12개를 컴포넌트로 관리할 수 있을까?
+// ~1024px, 네비바가 작아지고 푸터바가 사라져
 
-//아예 애니메이션 재생시키고 다른거 띄워버리는거같은데???
-// 아하 그래서 나올땐 새로 어라 아닌데
-// 패딩이 되네 ㅋㅋㅋ
+// 즉 ~768px일때 네비바와 푸터바가 상하단에 위치해야 해
+// 이건 tailwind css를 어떻게 다르게 써야 할 텐데
+// w-18 sm:w-50 lg:w-56' 이런 느낌으로
 
-'use client';
-import { motion } from 'framer-motion';
-import { useState } from 'react';
+// 기본 폰트 사이즈를 10pt로 주고 rem을 계산하면 쉬울 것 같네
+
+// 필요한 버튼은 10개, 다크모드는 색깔만 전환하면 되니까 11개?
+// 설정까지 12개?
+
+// 그럼 음. 링크 버튼이 아닌 경우엔 굳이 컴포넌트로 뺄 필요가 있나?
+// 인풋은 밸류를 주기 위해서 필요해.
+// 코드를 깔끔하게 유지하기 위해서 버튼 12개를 컴포넌트로 관리할 수 있을까?
 
 export default function Navbar() {
   const [x, setX] = useState(0);
-  const [scaleX, setScaleX] = useState(1);
 
-  const handleClick = (ev: React.MouseEvent<HTMLButtonElement>) => {
+  const handleClick = (ev: React.MouseEvent<HTMLElement>) => {
     ev.preventDefault();
     x === 0 ? setX(80) : setX(0);
   };
 
+  const handleLogout = (ev: React.MouseEvent<HTMLElement>) => {
+    ev.preventDefault();
+  };
+
   return (
-    <motion.div
-      className='p-1 w-18 sm:w-50 lg:w-56 h-screen'
-      animate={{ x, scaleX }}
-      transition={{ ease: 'easeInOut', duration: 0.6 }}>
-      <button onClick={handleClick}>왔다리갔다리</button>
-      <div className='border-2 h-screen'></div>
-    </motion.div>
+    <motion.nav
+      className='p-1 w-18 sm:w-50 lg:w-56 h-screen' // 기본 크기 72px ~ 224px
+      animate={{ x }}
+      transition={{ ease: 'easeInOut', duration: 0.6 }}
+    >
+      <section className='border-2 h-screen'>
+        <article>
+          <button onClick={handleClick} className='flex content-center'>
+            <Image src='/Icons/Home_line.svg' alt='홈' />
+            홈　
+          </button>
+          <button onClick={handleClick} className='flex content-center'>
+            <Image src='/Icons/Home_line.svg' alt='검색' />
+            검색
+          </button>
+          <button onClick={handleClick} className='flex content-center'>
+            <Image src='/Icons/Home_line.svg' alt='탐색 탭' />
+            탐색 탭
+          </button>
+          <button onClick={handleClick} className='flex content-center'>
+            <Image src='/Icons/Home_line.svg' alt='릴스' />
+            릴스
+          </button>
+          <button onClick={handleClick} className='flex content-center'>
+            <Image src='/Icons/Home_line.svg' alt='메시지' />
+            메시지
+          </button>
+          <button onClick={handleClick} className='flex content-center'>
+            <Image src='/Icons/Home_line.svg' alt='알림' />
+            알림
+          </button>
+          <button onClick={handleClick} className='flex content-center'>
+            <Image src='/Icons/Home_line.svg' alt='만들기' />
+            만들기
+          </button>
+          <button onClick={handleClick} className='flex content-center'>
+            <Image src='/Icons/Home_line.svg' alt='프로필' />
+            프로필
+          </button>
+        </article>
+        <article>
+          <ul>
+            <li>
+              <button onClick={handleLogout}>로그아웃</button>
+            </li>
+          </ul>
+          <button onClick={handleClick}>더 보기</button>
+        </article>
+      </section>
+    </motion.nav>
   );
 }
diff --git a/hooks/useBoolean.ts b/hooks/useBoolean.ts
@@ -1,6 +1,6 @@
-import { useState, useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
-export function useBoolean() {
+export default function useBoolean() {
   const [boolean, setBoolean] = useState(false);
 
   const handleBoolean = useCallback(() => {