Init 프로젝트 세팅 (#2)

* init : 프로젝트 세팅

* ci : test 브렌치로 변경

* ci : test커밋

* ci : mani 브랜츠를 반영하도록 변경

.eslintignore

@@ -0,0 +1 @@
+src/stories/**

.eslintrc

@@ -0,0 +1,56 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "prettier", "@emotion"],
+  "extends": [
+    "airbnb",
+    "airbnb/hooks",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "rules": {
+    "no-var": "warn",
+    "eqeqeq": "warn",
+    "react/prop-types": 0,
+    "no-extra-semi": "error",
+    "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
+    "arrow-parens": ["warn", "as-needed"],
+    "no-unused-vars": "off",
+    "no-console": "off",
+    "import/prefer-default-export": "off",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/jsx-pascal-case": "warn",
+    "react/jsx-key": "warn",
+    "no-debugger": "off",
+    "prettier/prettier": ["error", { "endOfLine": "auto" }],
+    "react/function-component-definition": [2, { "namedComponents": ["arrow-function", "function-declaration"] }],
+    "react/prefer-stateless-function": 0,
+    "react/jsx-one-expression-per-line": 0,
+    "no-nested-ternary": 0,
+    "react/jsx-curly-brace-presence": ["warn", { "props": "always", "children": "always" }],
+    "import/no-unresolved": ["error", { "caseSensitive": false }],
+    "react/jsx-props-no-spreading": [1, { "custom": "ignore" }],
+    "linebreak-style": 0,
+    "import/extensions": 0,
+    "no-use-before-define": 0,
+    "import/no-extraneous-dependencies": 0,
+    "no-shadow": 0,
+    "jsx-a11y/no-noninteractive-element-interactions": 0,
+    "react/react-in-jsx-scope": "off",
+    "react/no-unknown-property": ["error", { "ignore": ["css"] }]
+  },
+
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx", "prettier"]
+      }
+    }
+  }
+}

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.github/issue_template.md

@@ -0,0 +1,10 @@
+# 🚀개요
+
+# 📝작업 내용
+
+- [ ]
+- [ ]
+
+## 🔍백엔드 전달 사항
+
+# 🎸기타 (연관 이슈)

.github/pull_request_template.md

@@ -0,0 +1,14 @@
+# 🚀요약
+
+# 📸사진 (구현 캡처)
+
+# 📝작업 내용
+
+- [ ]
+- [ ]
+
+## 🔍백엔드 전달 사항
+
+# 🎸기타 (연관 이슈)
+
+close #이슈번호

.github/workflows/deploy.yml

@@ -0,0 +1,55 @@
+name: Alogrithm Front CI/CD
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.0.0'
+
+      - name: Install dependencies with Yarn
+        uses: actions/cache@v3
+        with:
+          path: ./node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build project
+        run: |
+          REACT_APP_API_URL=${{ secrets.REACT_APP_API_URL }} yarn build
+
+      - name: Deploy to S3
+        uses: jakejarvis/[email protected]
+        with:
+          args: --delete
+        env:
+          AWS_S3_BUCKET: moodi-devcourese-3team
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: ap-northeast-2
+          SOURCE_DIR: dist
+
+      - name: Invalidate CloudFront Cache
+        run: |
+          aws cloudfront create-invalidation \
+            --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
+            --paths "/*"
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: ap-northeast-2

.gitignore

@@ -0,0 +1 @@
+node_modules

.prettierignore

@@ -0,0 +1 @@
+src/stories/**

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "endOfLine": "lf",
+  "singleQuote": true,
+  "semi": false,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "arrowParens": "always"
+}

.vscode/stories.tsx.code-snippets

@@ -0,0 +1,25 @@
+{
+  "Storybook Component Template": {
+    "prefix": "story",
+    "body": [
+      "import type { Meta, StoryObj } from '@storybook/react';",
+      "",
+      "import ${TM_FILENAME_BASE/(.*)\\.stories$/${1}/} from './${TM_FILENAME_BASE/(.*)\\.stories$/${1}/}';",
+      "",
+      "const meta: Meta<typeof ${TM_FILENAME_BASE/(.*)\\.stories$/${1}/}> = {",
+      "  component: ${TM_FILENAME_BASE/(.*)\\.stories$/${1}/},",
+      "  title: '${TM_FILENAME_BASE/(.*)\\.stories$/${1}/}',",
+      "  tags: ['autodocs'],",
+      "  argTypes: {},",
+      "};",
+      "export default meta;",
+      "",
+      "type Story = StoryObj<typeof ${TM_FILENAME_BASE/(.*)\\.stories$/${1}/}>;",
+      "",
+      "export const Default: Story = {",
+      "  args: {},",
+      "};"
+    ],
+    "description": "Storybook Template"
+  }
+}

README.md

@@ -1,2 +1 @@
-# NFE1-1-3-MOODI
- 🎵 음악과 함께하는 일기 서비스 
+# algorithm-front

bable.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    "@babel/preset-react",
+    "@babel/preset-env",
+    "@babel/preset-typescript",
+  ],
+};

package.json

@@ -0,0 +1,48 @@
+{
+  "dependencies": {
+    "@tanstack/react-query": "^5.59.0",
+    "@tanstack/react-query-devtools": "^5.59.0",
+    "init": "^0.1.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "storybook": "^8.3.0",
+    "styled-components": "^6.1.13",
+    "webpack-merge": "^6.0.1",
+    "zustand": "^4.5.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.7",
+    "@babel/preset-env": "^7.25.7",
+    "@babel/preset-react": "^7.25.7",
+    "@babel/preset-typescript": "^7.25.7",
+    "@chromatic-com/storybook": "1.9.0",
+    "@storybook/addon-essentials": "^8.3.0",
+    "@storybook/addon-interactions": "^8.3.0",
+    "@storybook/addon-links": "^8.3.0",
+    "@storybook/addon-onboarding": "^8.3.0",
+    "@storybook/addon-webpack5-compiler-swc": "1.0.5",
+    "@storybook/blocks": "^8.3.0",
+    "@storybook/react": "^8.3.0",
+    "@storybook/react-webpack5": "^8.3.0",
+    "@storybook/test": "^8.3.0",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.0",
+    "babel-loader": "^9.2.1",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^12.0.2",
+    "dotenv": "^16.4.5",
+    "html-webpack-plugin": "^5.6.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.6.2",
+    "webpack": "^5.95.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0"
+  },
+  "scripts": {
+    "dev": "webpack-dev-server --mode=development --open --hot --progress",
+    "build": "webpack --mode=production  --progress",
+    "start": "webpack --mode=development  --progress",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  }
+}

public/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Webpack without CRA</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

src/App.tsx

@@ -0,0 +1,5 @@
+const App: React.FC = () => {
+  return <div>hello world!!!!!</div>
+}
+
+export default App

src/Index.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+
+const rootElement = document.getElementById('root')!
+
+const root = ReactDOM.createRoot(rootElement)
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

src/stories/Button.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

src/stories/Button.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import './button.css';
+
+export interface ButtonProps {
+  /** Is this the principal call to action on the page? */
+  primary?: boolean;
+  /** What background color to use */
+  backgroundColor?: string;
+  /** How large should the button be? */
+  size?: 'small' | 'medium' | 'large';
+  /** Button contents */
+  label: string;
+  /** Optional click handler */
+  onClick?: () => void;
+}
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};