AND-SOPT-WEB · m2na7 · Nov 5, 2024 · Nov 6, 2024 · Nov 6, 2024 · Nov 6, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/week4/.gitignore b/week4/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.yarn
+.env
diff --git a/week4/README.md b/week4/README.md
@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```
diff --git a/week4/eslint.config.js b/week4/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
diff --git a/week4/index.html b/week4/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>4주차 과제</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/week4/package.json b/week4/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "week4",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vanilla-extract/css": "^1.16.0",
+    "@vanilla-extract/vite-plugin": "^4.0.17",
+    "axios": "^1.7.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0",
+    "vite-tsconfig-paths": "^5.1.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.11.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.10"
+  }
+}
diff --git a/week4/src/App.tsx b/week4/src/App.tsx
@@ -0,0 +1,8 @@
+import Router from '@router/Router';
+import '@styles/global.css';
+
+function App() {
+  return <Router />;
+}
+
+export default App;
diff --git a/week4/src/api/client.ts b/week4/src/api/client.ts
@@ -0,0 +1,9 @@
+import axios from 'axios';
+import { BASE_URL } from '@constants/api';
+import { onErrorResponse } from './error';
+
+export const client = axios.create({
+  baseURL: BASE_URL,
+});
+
+client.interceptors.response.use((response) => response, onErrorResponse);
diff --git a/week4/src/api/error.ts b/week4/src/api/error.ts
@@ -0,0 +1,39 @@
+import { ERROR_MESSAGE } from '@constants/messages';
+import axios, { AxiosError, AxiosResponse } from 'axios';
+
+export const onErrorResponse = (error: AxiosError) => {
+  if (axios.isAxiosError(error)) {
+    const response = error.response as AxiosResponse;
+    const code = response.data.code;
+    let errorMessage;
+
+    // http 상태 코드에 따른 에러 메시지 처리
+    switch (response.status) {
+      case 400:
+        errorMessage = ERROR_MESSAGE.INVALID_REQUEST;
+        break;
+      case 401:
+        errorMessage = ERROR_MESSAGE.NO_TOKEN;
+        break;
+      case 403:
+        errorMessage =
+          code === '00'
+            ? ERROR_MESSAGE.INVALID_TOKEN
+            : ERROR_MESSAGE.INVALID_PASSWORD;
+        break;
+      case 404:
+        errorMessage =
+          code === '00' ? ERROR_MESSAGE.INVALID_PATH : ERROR_MESSAGE.INVALID_NO;
+        break;
+      case 409:
+        errorMessage = ERROR_MESSAGE.DUPLICATED_USERNAME;
+        break;
+      default:
+        errorMessage = ERROR_MESSAGE.DEFAULT;
+    }
+
+    return Promise.reject(new Error(errorMessage));
+  }
+
+  return Promise.reject(new Error(ERROR_MESSAGE.DEFAULT));
+};
diff --git a/week4/src/api/hobby.ts b/week4/src/api/hobby.ts
@@ -0,0 +1,35 @@
+import { ACCESS_TOKEN_KEY } from '@constants/config';
+import { client } from './client';
+import { END_POINT } from '@constants/api';
+
+export const getMyHobby = async () => {
+  try {
+    const token = sessionStorage.getItem(ACCESS_TOKEN_KEY);
+    const response = await client.get(END_POINT.MY_HOBBY, {
+      headers: {
+        token: token,
+      },
+    });
+    return response.data.result.hobby;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(error.message);
+    }
+  }
+};
+
+export const getUserHobby = async (userId: number) => {
+  try {
+    const token = sessionStorage.getItem(ACCESS_TOKEN_KEY);
+    const response = await client.get(END_POINT.USER_HOBBY(userId), {
+      headers: {
+        token: token,
+      },
+    });
+    return response.data.result.hobby;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(error.message);
+    }
+  }
+};
diff --git a/week4/src/api/user.ts b/week4/src/api/user.ts
@@ -0,0 +1,44 @@
+import { client } from './client';
+import { END_POINT } from '@constants/api';
+import { ACCESS_TOKEN_KEY } from '@constants/config';
+import { LoginData, User, UserInfoData } from '@type/user';
+
+export const postLogin = async (data: LoginData) => {
+  try {
+    const response = await client.post(END_POINT.LOGIN, data);
+
+    return response.data.result.token;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(error.message);
+    }
+  }
+};
+
+export const postSignUp = async (data: User) => {
+  try {
+    const response = await client.post(END_POINT.USER, data);
+    return response.data.result;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(error.message);
+    }
+  }
+};
+
+export const putUserInfo = async (data: UserInfoData) => {
+  try {
+    const token = sessionStorage.getItem(ACCESS_TOKEN_KEY);
+    const response = await client.put(END_POINT.USER, data, {
+      headers: {
+        token: token,
+      },
+    });
+
+    return response.data;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(error.message);
+    }
+  }
+};
diff --git a/week4/src/assets/visibility.svg b/week4/src/assets/visibility.svg
diff --git a/week4/src/assets/visibility_off.svg b/week4/src/assets/visibility_off.svg
diff --git a/week4/src/components/button/Button.css.ts b/week4/src/components/button/Button.css.ts
@@ -0,0 +1,23 @@
+import { vars } from '@styles/theme.css';
+import { style } from '@vanilla-extract/css';
+
+export const button = style({
+  marginBottom: 14,
+  padding: 12,
+  borderRadius: 8,
+  backgroundColor: vars.color.primary,
+  color: vars.color.white,
+  textAlign: 'center',
+  fontSize: vars.fontSize.md,
+
+  ':hover': {
+    backgroundColor: vars.color.blue600,
+    transition: 'background-color 0.3s',
+  },
+
+  ':disabled': {
+    backgroundColor: vars.color.gray300, 
+    color: vars.color.gray100, 
+    cursor: 'not-allowed', 
+  },
+});
diff --git a/week4/src/components/button/Button.tsx b/week4/src/components/button/Button.tsx
@@ -0,0 +1,15 @@
+import * as styles from './Button.css';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+}
+
+const Button = ({ children, ...props }: ButtonProps) => {
+  return (
+    <button className={styles.button} {...props}>
+      {children}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/week4/src/components/header/Header.css.ts b/week4/src/components/header/Header.css.ts
@@ -0,0 +1,46 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '@styles/theme.css';
+
+export const header = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '20px',
+  minHeight: vars.spacing.headerHeight,
+  gap: 20,
+
+  backgroundColor: vars.color.primary,
+  color: vars.color.white,
+});
+
+export const leftSection = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 60,
+});
+
+export const title = style({
+  fontSize: vars.fontSize['2xl'],
+  fontWeight: 'bold',
+});
+
+export const nav = style({
+  display: 'flex',
+  gap: 40,
+});
+
+export const link = style({
+  fontSize: vars.fontSize.lg,
+
+  ':hover': {
+    color: vars.color.secondary,
+  },
+});
+
+export const logoutButton = style({
+  fontSize: vars.fontSize.lg,
+
+  ':hover': {
+    color: vars.color.secondary,
+  },
+});