Set format and lint (#71)

Co-authored-by: bluehorn07 <[email protected]>
PoApper · Mar 31, 2024 · 9364848 · 9364848
1 parent d1c14fd
commit 9364848
Show file tree

Hide file tree

Showing 96 changed files with 5,036 additions and 3,629 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,23 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
+    'plugin:@next/next/recommended',
+    'next/core-web-vitals',
+  ],
+  rules: {
+    'react/prop-types': 'off',
+    'react/react-in-jsx-scope': 'off',
+  },
+};
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/.github/workflows/github-action.yaml b/.github/workflows/github-action.yaml
@@ -10,8 +10,26 @@ env:
   ECR_REPOSITORY: popo-admin-web
 
 jobs:
+  lint:
+    name: Prettier and ESLint check
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Install dependencies
+        run: npm install
+      - name: Run Prettier
+        run: npx prettier --check .
+      - name: Run ESLint
+        run: npx next lint
+
   docker_build_and_push:
     name: Docker build and push
+    needs: lint
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -60,7 +78,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check the deployed service URL
-        uses: jtalk/url-health-check-action@v3
+        uses: jtalk/url-health-check-action@v4
         with:
           url: https://admin.popo.poapper.club|https://admin.popo-dev.poapper.club
           follow-redirect: true

diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 80
+}
diff --git a/assets/club.type.options.js b/assets/club.type.options.js
@@ -1,8 +1,8 @@
 export const ClubTypeOptions = [
-  { key: "performance1", text: "공연1", value: "performance1" },
-  { key: "performance2", text: "공연2", value: "performance2" },
-  { key: "societyAndReligion", text: "사회종교", value: "societyAndReligion" },
-  { key: "sports", text: "체육", value: "sports" },
-  { key: "hobbyAndExhibition", text: "취미전시", value: "hobbyAndExhibition" },
-  { key: "study", text: "학술", value: "study" },
+  { key: 'performance1', text: '공연1', value: 'performance1' },
+  { key: 'performance2', text: '공연2', value: 'performance2' },
+  { key: 'societyAndReligion', text: '사회종교', value: 'societyAndReligion' },
+  { key: 'sports', text: '체육', value: 'sports' },
+  { key: 'hobbyAndExhibition', text: '취미전시', value: 'hobbyAndExhibition' },
+  { key: 'study', text: '학술', value: 'study' },
 ];
diff --git a/assets/owner.options.js b/assets/owner.options.js
@@ -1,7 +1,7 @@
 export const OwnerOptions = [
-  { key: "dongyeon", text: "동아리연합회", value: "dongyeon" },
-  { key: "dormUnion", text: "생활관자치회", value: "dormUnion" },
-  { key: "chonghak", text: "총학생회", value: "chonghak" },
-  { key: "saengna", text: "생각나눔", value: "saengna" },
-  { key: "others", text: "그 외", value: "others" },
+  { key: 'dongyeon', text: '동아리연합회', value: 'dongyeon' },
+  { key: 'dormUnion', text: '생활관자치회', value: 'dormUnion' },
+  { key: 'chonghak', text: '총학생회', value: 'chonghak' },
+  { key: 'saengna', text: '생각나눔', value: 'saengna' },
+  { key: 'others', text: '그 외', value: 'others' },
 ];
diff --git a/assets/region.options.js b/assets/region.options.js
@@ -1,7 +1,7 @@
 export const RegionOptions = [
-  { key: "STUDENT_HALL", text: "학생 회관", value: "STUDENT_HALL" },
-  { key: "JIGOK_CENTER", text: "지곡 회관", value: "JIGOK_CENTER" },
-  { key: "COMMUNITY_CENTER", text: "커뮤니티 센터", value: "COMMUNITY_CENTER" },
-  { key: "RESIDENTIAL_COLLEGE", text: "RC", value: "RESIDENTIAL_COLLEGE" },
-  { key: "OTHERS", text: "기타", value: "OTHERS" },
+  { key: 'STUDENT_HALL', text: '학생 회관', value: 'STUDENT_HALL' },
+  { key: 'JIGOK_CENTER', text: '지곡 회관', value: 'JIGOK_CENTER' },
+  { key: 'COMMUNITY_CENTER', text: '커뮤니티 센터', value: 'COMMUNITY_CENTER' },
+  { key: 'RESIDENTIAL_COLLEGE', text: 'RC', value: 'RESIDENTIAL_COLLEGE' },
+  { key: 'OTHERS', text: '기타', value: 'OTHERS' },
 ];
diff --git a/components/board/benefit/affiliate/affiliate.cards.jsx b/components/board/benefit/affiliate/affiliate.cards.jsx
@@ -1,50 +1,44 @@
-import React, { useState } from 'react'
-import { Card, Modal, Grid, Header } from 'semantic-ui-react'
+import React, { useState } from 'react';
+import { Card, Modal, Grid, Header } from 'semantic-ui-react';
 
-const AffiliateCards = ({affiliates}) => {
+const AffiliateCards = ({ affiliates }) => {
   const initialFlags = Array.from({ length: affiliates.length }, () => false);
   const [flags, setFlags] = useState(initialFlags);
   const toggleFlag = (index) => {
-    setFlags(prevFlags => {
+    setFlags((prevFlags) => {
       const newFlags = [...prevFlags];
       newFlags[index] = !newFlags[index];
       return newFlags;
     });
   };
-  
+
   return (
-    <Grid stackable columns={4} >
-    {
-      affiliates.map((affiliate, idx) =>
-      <Grid.Column key={idx}>
-        <Modal
-          closeIcon
-          open={flags[idx]}
-          trigger={
-            <Card color='pink' style={{minHeight:"160px"}}>
-              <Card.Content>
-                <Card.Header>{affiliate.title}</Card.Header>
-                <Card.Description>
-                  {affiliate.meta_content}
-                </Card.Description>
-              </Card.Content>
-            </Card>
-          }
-          onClose={() => toggleFlag(idx)}
-          onOpen={() => toggleFlag(idx)}
-        >
-          <Header icon='paperclip' content={affiliate.title} />
-          <Modal.Content>
-            <p style={{ whiteSpace: "pre-line" }}>
-              {affiliate.content}
-            </p>
-          </Modal.Content>
-        </Modal>
-      </Grid.Column>
-      )
-    }
+    <Grid stackable columns={4}>
+      {affiliates.map((affiliate, idx) => (
+        <Grid.Column key={idx}>
+          <Modal
+            closeIcon
+            open={flags[idx]}
+            trigger={
+              <Card color="pink" style={{ minHeight: '160px' }}>
+                <Card.Content>
+                  <Card.Header>{affiliate.title}</Card.Header>
+                  <Card.Description>{affiliate.meta_content}</Card.Description>
+                </Card.Content>
+              </Card>
+            }
+            onClose={() => toggleFlag(idx)}
+            onOpen={() => toggleFlag(idx)}
+          >
+            <Header icon="paperclip" content={affiliate.title} />
+            <Modal.Content>
+              <p style={{ whiteSpace: 'pre-line' }}>{affiliate.content}</p>
+            </Modal.Content>
+          </Modal>
+        </Grid.Column>
+      ))}
     </Grid>
-  )
-}
+  );
+};
 
-export default AffiliateCards
+export default AffiliateCards;
diff --git a/components/board/benefit/affiliate/affiliate.table.jsx b/components/board/benefit/affiliate/affiliate.table.jsx
@@ -1,54 +1,40 @@
-import React from 'react'
-import Link from "next/link";
-import moment from 'moment'
-import { Table } from 'semantic-ui-react'
+import React from 'react';
+import Link from 'next/link';
+import moment from 'moment';
+import { Table } from 'semantic-ui-react';
 
 const AffiliateTable = ({ affiliateList }) => {
-
   return (
-    <Table
-      celled selectable
-      textAlign={'center'}>
+    <Table celled selectable textAlign={'center'}>
       <Table.Header>
         <Table.Row>
-          <Table.HeaderCell width={1}>
-            id
-          </Table.HeaderCell>
-          <Table.HeaderCell width={2}>
-            업체명
-          </Table.HeaderCell>
-          <Table.HeaderCell width={4}>
-            짤은 설명
-          </Table.HeaderCell>
-          <Table.HeaderCell width={6}>
-            설명
-          </Table.HeaderCell>
-          <Table.HeaderCell width={2}>
-            생성일
-          </Table.HeaderCell>
+          <Table.HeaderCell width={1}>id</Table.HeaderCell>
+          <Table.HeaderCell width={2}>업체명</Table.HeaderCell>
+          <Table.HeaderCell width={4}>짤은 설명</Table.HeaderCell>
+          <Table.HeaderCell width={6}>설명</Table.HeaderCell>
+          <Table.HeaderCell width={2}>생성일</Table.HeaderCell>
         </Table.Row>
       </Table.Header>
       <Table.Body>
-        {
-          affiliateList.map((affiliate) => (
-            <Link href={`benefit/affiliate/update/${affiliate.id}`} key={affiliate.id}>
-              <Table.Row>
-                <Table.Cell>{affiliate.id}</Table.Cell>
-                <Table.Cell>{affiliate.title}</Table.Cell>
-                <Table.Cell>{affiliate.content_short}</Table.Cell>
-                <Table.Cell>{affiliate.content}</Table.Cell>
-                <Table.Cell>
-                  {
-                    moment(affiliate.created_at).format('YYYY-MM-DD HH:mm')
-                  }
-                </Table.Cell>
-              </Table.Row>
-            </Link>
-          ))
-        }
+        {affiliateList.map((affiliate) => (
+          <Link
+            href={`benefit/affiliate/update/${affiliate.id}`}
+            key={affiliate.id}
+          >
+            <Table.Row>
+              <Table.Cell>{affiliate.id}</Table.Cell>
+              <Table.Cell>{affiliate.title}</Table.Cell>
+              <Table.Cell>{affiliate.content_short}</Table.Cell>
+              <Table.Cell>{affiliate.content}</Table.Cell>
+              <Table.Cell>
+                {moment(affiliate.created_at).format('YYYY-MM-DD HH:mm')}
+              </Table.Cell>
+            </Table.Row>
+          </Link>
+        ))}
       </Table.Body>
     </Table>
-  )
-}
+  );
+};
 
 export default AffiliateTable;
diff --git a/components/board/benefit/discount/discount.cards.jsx b/components/board/benefit/discount/discount.cards.jsx
@@ -1,54 +1,60 @@
-import React, { useState } from 'react'
-import { Card, Modal, Grid, Header, Divider, Icon } from 'semantic-ui-react'
+import React, { useState } from 'react';
+import { Card, Modal, Grid, Header, Divider, Icon } from 'semantic-ui-react';
 
-const DiscountOfferCards = ({discountOffers}) => {
-  const initialFlags = Array.from({ length: discountOffers.length }, () => false);
+const DiscountOfferCards = ({ discountOffers }) => {
+  const initialFlags = Array.from(
+    { length: discountOffers.length },
+    () => false,
+  );
   const [flags, setFlags] = useState(initialFlags);
   const toggleFlag = (index) => {
-    setFlags(prevFlags => {
+    setFlags((prevFlags) => {
       const newFlags = [...prevFlags];
       newFlags[index] = !newFlags[index];
       return newFlags;
     });
   };
-  
+
   return (
-    <Grid stackable columns={4} >
-    {
-      discountOffers.map((discountOffer, idx) =>
-      <Grid.Column key={idx}>
-        <Modal
-          closeIcon
-          open={flags[idx]}
-          trigger={
-            <Card color='pink' style={{minHeight:"160px"}}>
-              <Card.Content>
-                <Card.Header>{discountOffer.title}</Card.Header>
-                <Card.Description>
-                  {discountOffer.content}
-                </Card.Description>
-              </Card.Content>
-            </Card>
-          }
-          onClose={() => toggleFlag(idx)}
-          onOpen={() => toggleFlag(idx)}
-        >
-          <Header icon='pin' content={discountOffer.title} />
-          <Modal.Content>
-            <p><Icon name='clock outline'/>영업 시간: {discountOffer.open_hour}</p>
-            <p><Icon name='phone'/>가게 번호: {discountOffer.phone}</p>
-            <Divider/>
-            <p><Icon name='star'/>할인 내용</p>
-            <p style={{ whiteSpace: "pre-line" }}>
-              {discountOffer.content}
-            </p>
-          </Modal.Content>
-        </Modal>
-      </Grid.Column>
-      )
-    }
+    <Grid stackable columns={4}>
+      {discountOffers.map((discountOffer, idx) => (
+        <Grid.Column key={idx}>
+          <Modal
+            closeIcon
+            open={flags[idx]}
+            trigger={
+              <Card color="pink" style={{ minHeight: '160px' }}>
+                <Card.Content>
+                  <Card.Header>{discountOffer.title}</Card.Header>
+                  <Card.Description>{discountOffer.content}</Card.Description>
+                </Card.Content>
+              </Card>
+            }
+            onClose={() => toggleFlag(idx)}
+            onOpen={() => toggleFlag(idx)}
+          >
+            <Header icon="pin" content={discountOffer.title} />
+            <Modal.Content>
+              <p>
+                <Icon name="clock outline" />
+                영업 시간: {discountOffer.open_hour}
+              </p>
+              <p>
+                <Icon name="phone" />
+                가게 번호: {discountOffer.phone}
+              </p>
+              <Divider />
+              <p>
+                <Icon name="star" />
+                할인 내용
+              </p>
+              <p style={{ whiteSpace: 'pre-line' }}>{discountOffer.content}</p>
+            </Modal.Content>
+          </Modal>
+        </Grid.Column>
+      ))}
     </Grid>
-  )
-}
+  );
+};
 
-export default DiscountOfferCards
+export default DiscountOfferCards;