design: 큰따옴표를 작은따옴표로 변경 - #11

.babelrc

@@ -1,15 +1,15 @@
 {
-  "presets": [
-    "next/babel",
-    "@babel/preset-typescript"
+  'presets': [
+    'next/babel',
+    '@babel/preset-typescript'
   ],
-  "plugins": [
+  'plugins': [
     [
-      "styled-components",
+      'styled-components',
     {
-      "ssr": true,
-      "displayName": true,
-      "preprocess": false
+      'ssr': true,
+      'displayName': true,
+      'preprocess': false
     }
     ]
   ]

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  'extends': 'next/core-web-vitals'
 }

.prettierrc.json

@@ -1,9 +1,9 @@
 {
-  "printWidth": 120,
-  "tabWidth": 2,
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "es5",
-  "requirePragma": false,
-  "arrowParens": "always"
+  'printWidth': 120,
+  'tabWidth': 2,
+  'semi': false,
+  'singleQuote': true,
+  'trailingComma': 'es5',
+  'requirePragma': false,
+  'arrowParens': 'always'
 }

.vscode/extensions.json

@@ -1,7 +1,7 @@
 {
-  "recommendations": [
-    "arcanis.vscode-zipfs",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
+  'recommendations': [
+    'arcanis.vscode-zipfs',
+    'dbaeumer.vscode-eslint',
+    'esbenp.prettier-vscode'
   ]
 }

.vscode/settings.json

@@ -1,10 +1,10 @@
 {
-  "search.exclude": {
-    "**/.yarn": true,
-    "**/.pnp.*": true
+  'search.exclude': {
+    '**/.yarn': true,
+    '**/.pnp.*': true
   },
-  "eslint.nodePath": ".yarn/sdks",
-  "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
-  "typescript.tsdk": ".yarn/sdks/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  'eslint.nodePath': '.yarn/sdks',
+  'prettier.prettierPath': '.yarn/sdks/prettier/index.js',
+  'typescript.tsdk': '.yarn/sdks/typescript/lib',
+  'typescript.enablePromptUseWorkspaceTsdk': true
 }

api/checkEntireTimeTableApi.ts

@@ -1,7 +1,7 @@
-import { client } from ".";
-import { BasicResponse } from "../types/enter/checkEntireTimeTableBody";
+import { client } from '.';
+import { BasicResponse } from '../types/enter/checkEntireTimeTableBody';
 
-//id: "653000f65b93ad7cabd3fe56"
+//id: '653000f65b93ad7cabd3fe56'
 export const getEntireTimeTable = async (id: string | string[] | undefined) => {
   const { data } = await client.get<BasicResponse>(`/meeting/${id}/time`);
   return data

api/createMeetingApi.ts

@@ -1,6 +1,6 @@
-import { client } from ".";
-import { BasicResponse } from "../types/AxiosResponse"
-import { CreateMeetingRequest, CreateMeetingResponse } from "../types/create/createMeetingBody"
+import { client } from '.';
+import { BasicResponse } from '../types/AxiosResponse'
+import { CreateMeetingRequest, CreateMeetingResponse } from '../types/create/createMeetingBody'
 
 export const postCreateMeeting = async (createMeetingRequest: CreateMeetingRequest) => {
   const { data } = await client.post<BasicResponse<CreateMeetingResponse>>(`/meeting`, createMeetingRequest)

api/meetingDetailApi.ts

@@ -1,8 +1,8 @@
-import { client } from ".";
-import { BasicResponse } from "../types/AxiosResponse";
-import { GetMeetingDetailResponse } from "../types/cardInfo/getMeetingDetailBody";
+import { client } from '.';
+import { BasicResponse } from '../types/AxiosResponse';
+import { GetMeetingDetailResponse } from '../types/cardInfo/getMeetingDetailBody';
 
-//id: "653000f65b93ad7cabd3fe56"
+//id: '653000f65b93ad7cabd3fe56'
 export const getMeetingDetail = async (id: string | string[] | undefined) => {
   const { data } = await client.get<BasicResponse<GetMeetingDetailResponse>>(`/meeting/${id}`);
   return data

components/atom/table/TableHeading.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from "styled-components"
+import styled from 'styled-components'
 
 interface TableHeadingProp {
   data: string

hooks/meetingDetail/useMeetingDetail.ts

@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react";
-import { getMeetingDetail } from "../../api/meetingDetailApi";
-import { Detail } from "../../types/cardInfo/showInfoInterface";
+import { useEffect, useState } from 'react';
+import { getMeetingDetail } from '../../api/meetingDetailApi';
+import { Detail } from '../../types/cardInfo/showInfoInterface';
 
 export const useMeetingDetail = (meetingId: string | string[] | undefined) => {
   const [isLoading, setIsLoading] = useState(true)

hooks/member/useCheckAvailableTime.ts

@@ -1,7 +1,7 @@
-import { useRecoilState, useRecoilValue } from "recoil"
-import { availableTimeInfoState, checkAvailableTimeState, checkMemberAvailableBtnActivatedState, memberSelectedTimeBlockList, priorityListState } from "../../states/atom"
-import { useRouter } from "next/router"
-import { AvailableTimeInfo } from "../../types/enter/checkMeetingInterface"
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { availableTimeInfoState, checkAvailableTimeState, checkMemberAvailableBtnActivatedState, memberSelectedTimeBlockList, priorityListState } from '../../states/atom'
+import { useRouter } from 'next/router'
+import { AvailableTimeInfo } from '../../types/enter/checkMeetingInterface'
 import { postCheckMemberAvailable } from '../../api/checkMemberAvailableApi'
 
 export const useCheckAvailableTime = () => {

hooks/member/useCheckAvailableTimeTable.ts

@@ -1,5 +1,5 @@
-import { useRecoilState, useSetRecoilState } from "recoil"
-import { checkMemberAvailableBtnActivatedState, hostSelectedAvailableWeekState, isHostSelectedPeriodState, memberSelectedTimeBlockList } from "../../states/atom"
+import { useRecoilState, useSetRecoilState } from 'recoil'
+import { checkMemberAvailableBtnActivatedState, hostSelectedAvailableWeekState, isHostSelectedPeriodState, memberSelectedTimeBlockList } from '../../states/atom'
 
 export const useCheckAvailableTimeTable = () => {
   const setIsActivated = useSetRecoilState(checkMemberAvailableBtnActivatedState)

hooks/owner/useConfirmAvailableTime.ts

@@ -1,7 +1,7 @@
-import { useRouter } from "next/router"
-import { useRecoilState } from "recoil"
-import { passwordState } from "../../states/atom"
-import { postCheckHostPassword } from "../../api/checkHostPasswordApi"
+import { useRouter } from 'next/router'
+import { useRecoilState } from 'recoil'
+import { passwordState } from '../../states/atom'
+import { postCheckHostPassword } from '../../api/checkHostPasswordApi'
 
 export const useConfirmMeeting = () => {
   const [password, setPassword] = useRecoilState(passwordState)

hooks/owner/useEntireTimeTable.ts

@@ -1,8 +1,8 @@
-import { useRecoilState } from "recoil"
-import { getEntireTimeTable } from "../../api/checkEntireTimeTableApi"
-import { CheckEntireTimeTableResponse } from "../../types/enter/checkEntireTimeTableBody"
-import { entireTimeTableListState, entireTimeTableMemberListState } from "../../states/atom"
-import { useEffect } from "react"
+import { useRecoilState } from 'recoil'
+import { getEntireTimeTable } from '../../api/checkEntireTimeTableApi'
+import { CheckEntireTimeTableResponse } from '../../types/enter/checkEntireTimeTableBody'
+import { entireTimeTableListState, entireTimeTableMemberListState } from '../../states/atom'
+import { useEffect } from 'react'
 
 export const useEntireTimeTable = (meetingId: string | string[] | undefined) => {
   const [contents, setContents] = useRecoilState(entireTimeTableListState)

package.json

@@ -1,50 +1,50 @@
 {
-  "name": "plum-client",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+  'name': 'plum-client',
+  'version': '0.1.0',
+  'private': true,
+  'scripts': {
+    'dev': 'next dev',
+    'build': 'next build',
+    'start': 'next start',
+    'lint': 'next lint'
   },
-  "dependencies": {
-    "@daybrush/utils": "^1.13.0",
-    "@tanstack/react-query": "^5.0.5",
-    "@tanstack/react-query-devtools": "^5.1.0",
-    "@types/styled-components": "^5.1.28",
-    "axios": "^1.5.1",
-    "babel-plugin-styled-components": "^2.1.4",
-    "bootstrap": "^5.3.2",
-    "dotenv": "^16.3.1",
-    "framework-utils": "^1.1.0",
-    "moment": "^2.29.4",
-    "next": "13.5.4",
-    "react": "^18",
-    "react-bootstrap": "^2.9.1",
-    "react-calendar": "^4.6.0",
-    "react-dom": "^18",
-    "react-icons": "^4.11.0",
-    "react-selecto": "^1.26.0",
-    "recoil": "^0.7.7",
-    "semantic-ui-css": "^2.5.0",
-    "semantic-ui-react": "^2.1.4",
-    "styled-components": "^6.0.8",
-    "swiper": "^11.0.3"
+  'dependencies': {
+    '@daybrush/utils': '^1.13.0',
+    '@tanstack/react-query': '^5.0.5',
+    '@tanstack/react-query-devtools': '^5.1.0',
+    '@types/styled-components': '^5.1.28',
+    'axios': '^1.5.1',
+    'babel-plugin-styled-components': '^2.1.4',
+    'bootstrap': '^5.3.2',
+    'dotenv': '^16.3.1',
+    'framework-utils': '^1.1.0',
+    'moment': '^2.29.4',
+    'next': '13.5.4',
+    'react': '^18',
+    'react-bootstrap': '^2.9.1',
+    'react-calendar': '^4.6.0',
+    'react-dom': '^18',
+    'react-icons': '^4.11.0',
+    'react-selecto': '^1.26.0',
+    'recoil': '^0.7.7',
+    'semantic-ui-css': '^2.5.0',
+    'semantic-ui-react': '^2.1.4',
+    'styled-components': '^6.0.8',
+    'swiper': '^11.0.3'
   },
-  "devDependencies": {
-    "@babel/core": "^7.23.0",
-    "@babel/preset-typescript": "^7.23.0",
-    "@babel/runtime": "^7.23.1",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "eslint": "^8",
-    "eslint-config-next": "13.5.4",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "prettier": "^3.0.3",
-    "typescript": "^5"
+  'devDependencies': {
+    '@babel/core': '^7.23.0',
+    '@babel/preset-typescript': '^7.23.0',
+    '@babel/runtime': '^7.23.1',
+    '@types/node': '^20',
+    '@types/react': '^18',
+    '@types/react-dom': '^18',
+    'eslint': '^8',
+    'eslint-config-next': '13.5.4',
+    'eslint-config-prettier': '^9.0.0',
+    'eslint-plugin-prettier': '^5.0.0',
+    'prettier': '^3.0.3',
+    'typescript': '^5'
   },
-  "packageManager": "[email protected]"
+  'packageManager': '[email protected]'
 }

pages/_document.tsx

@@ -2,9 +2,9 @@ import { Html, Head, Main, NextScript } from 'next/document'
 
 export default function Document() {
   return (
-    <Html lang="en">
+    <Html lang='en'>
       <Head>
-        <meta charSet="utf-8"></meta>
+        <meta charSet='utf-8'></meta>
       </Head>
       <body>
         <Main />

pages/create/CreateMeetingTitleComponenet.tsx

@@ -1,4 +1,4 @@
-import TitleComponent from "../../components/modules/TitleComponent"
+import TitleComponent from '../../components/modules/TitleComponent'
 
 interface CreateMeetingSteps {
   [key: string]: {

pages/create/components/SetAdditionalInfo.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import styled from "styled-components"
+import styled from 'styled-components'
 import { StepProps } from '../../../types/create/createMeetingInterface'
 
 export default function SetAdditionalInfo({ meetingInfo, setMeetingInfo}: StepProps) {

pages/create/components/SetAvailableDates.tsx

@@ -26,13 +26,13 @@ export default function SetAvailableDates({ meetingInfo, setMeetingInfo }: StepP
     <>
     <Styled.InputWrapper>
       <Styled.Input 
-        type="text"
+        type='text'
         placeholder='원하는 기간을 선택해주세요'
         value={meetingInfo.startDate || ''}
         disabled
       />
       <Styled.Input 
-        type="text"
+        type='text'
         placeholder='원하는 기간을 선택해주세요'
         value={meetingInfo.endDate || ''}
         disabled

pages/create/components/SetPlace.tsx

@@ -21,8 +21,8 @@ export default function SetPlace({ meetingInfo, setMeetingInfo }: StepProps) {
             />
             {type === 'UNDEFINED' ? null : meetingInfo.place === type ? (
               <InputComponent
-                id="placeDetail"
-                type="text"
+                id='placeDetail'
+                type='text'
                 placeholder={
                   type === 'ONLINE'
                     ? '(선택) 회의를 진행할 온라인 툴을 입력해주세요.'

pages/enter/member/CheckAvailableTitleComponent.tsx

@@ -1,4 +1,4 @@
-import TitleComponent from "../../../components/modules/TitleComponent";
+import TitleComponent from '../../../components/modules/TitleComponent';
 
 interface CheckAvailableTimeSteps {
   [key: string]: {

pages/enter/member/[meetingId].tsx

@@ -20,7 +20,7 @@ export default function Available() {
     <Layout
       buttons={['다음']}
       isButtonActivated={isActivated}
-      header="가능한 시간 입력"
+      header='가능한 시간 입력'
       onClickBackButton={handleBackBtnClick}
       onClickButton={handleBtnClick}
     >

pages/enter/member/components/SetAvailableTimeTable.tsx

@@ -25,8 +25,8 @@ export default function SetAvailableTime({ meetingDetail, availableTimeInfo, set
       <Styled.TimeTable>
         <TimeComponent />
         <Styled.TimeSelect>
-          <div className="app">
-            <div className="container">
+          <div className='app'>
+            <div className='container'>
               <Selecto
                 dragContainer={'.slot'} // .slot 자체를 드래그 영역으로
                 selectableTargets={['.selecto-area .slot']}
@@ -38,8 +38,8 @@ export default function SetAvailableTime({ meetingDetail, availableTimeInfo, set
                 onSelect={handleTimeTableSelect}
               />
 
-              <div className="select-container">
-                <div className="elements selecto-area" id="selecto1">
+              <div className='select-container'>
+                <div className='elements selecto-area' id='selecto1'>
                   {slots.map((i) => {
                     /**
                      * 30분 단위 점선
@@ -55,7 +55,7 @@ export default function SetAvailableTime({ meetingDetail, availableTimeInfo, set
                   })}
                 </div>
               </div>
-              <div className="empty elements"></div>
+              <div className='empty elements'></div>
             </div>
           </div>
         </Styled.TimeSelect>

pages/enter/member/components/SetName.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
-import styled from "styled-components"
+import styled from 'styled-components'
 import { StepProps } from '../../../../types/enter/checkMeetingInterface'
 
 
 export default function SetName({ meetingDetail, availableTimeInfo, setAvailableTimeInfo }: StepProps) {
   return (
     <Styled.Input 
-      id="name" 
-      type="text" 
+      id='name' 
+      type='text' 
       value={availableTimeInfo.name}
       onChange={(e) => { setAvailableTimeInfo({ name: e.target.value }) }}
     />

pages/enter/member/components/SetPriorityTimeTable.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from "styled-components"
+import styled from 'styled-components'
 import TimeTable from './TimeTable'
 import { StepProps } from '../../../../types/enter/checkMeetingInterface'
 import WeekComponent from '../../../../components/atom/WeekComponent'