Merge pull request #72 from mbti-nf-team/feat/nf-team-storage

feat(@nf-team/storage): localStorage, sessionStorage safe 함수 구현

.changeset/hungry-otters-itch.md

@@ -0,0 +1,5 @@
+---
+"@nf-team/storage": major
+---
+
+feat(@nf-team/storage): localStorage, sessionStorage safe 함수 구현

package.json

@@ -15,10 +15,11 @@
     "turbo:lint": "turbo run lint",
     "workspace:core": "yarn workspace @nf-team/core",
     "workspace:react": "yarn workspace @nf-team/react",
+    "workspace:storage": "yarn workspace @nf-team/storage",
     "workspace:docs": "yarn workspace docs",
     "docs:build": "yarn run workspace:docs build",
-    "test:unit": "yarn run workspace:core test:coverage && yarn run workspace:react test:coverage",
-    "lint": "yarn run workspace:core lint && yarn run workspace:react lint"
+    "test:unit": "yarn run workspace:core test:coverage && yarn run workspace:react test:coverage && yarn run workspace:storage test:coverage",
+    "lint": "yarn run workspace:core lint && yarn run workspace:react lint && yarn run workspace:storage lint"
   },
   "dependencies": {
     "@changesets/cli": "^2.26.2"

packages/storage/.eslintrc.js

@@ -0,0 +1,37 @@
+module.exports = {
+  root: true,
+  env: {
+    es6: true,
+    browser: true,
+    jest: true,
+  },
+  ignorePatterns: [
+    'node_modules/',
+    'public/',
+    'dist/',
+    'coverage/',
+  ],
+  plugins: ['eslint-plugin-tsdoc'],
+  extends: ['@nf-team/eslint-config'],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        project: ['./tsconfig.json'],
+      },
+    },
+    {
+      files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+      rules: {
+        '@typescript-eslint/no-explicit-any': 'off',
+      },
+    },
+  ],
+  rules: {
+    'import/export': 'off',
+    'import/prefer-default-export': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'tsdoc/syntax': 'warn',
+  },
+};

packages/storage/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 NFTeam
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/storage/README.md

@@ -0,0 +1,17 @@
+# @nf-team/storage
+
+<a href="https://github.com/mbti-nf-team/frontend-libraries/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc">
+  <img src="https://img.shields.io/github/issues/mbti-nf-team/frontend-libraries?style=flat-square" />
+</a>
+
+<a href="https://github.com/mbti-nf-team/frontend-libraries/blob/main/LICENSE">
+  <img src="https://img.shields.io/github/license/mbti-nf-team/frontend-libraries?style=flat-square" />
+</a>
+
+[Check out our @nf-team/storage libraries docs.](https://mbti-nf-team.github.io/frontend-libraries/docs/storage)
+
+## 🐛 Bug reporting
+[Issues](https://github.com/mbti-nf-team/frontend-libraries/issues)
+
+## 🔒 LICENSE
+This libraries is [MIT licensed](https://github.com/mbti-nf-team/frontend-libraries/blob/main/packages/storage/LICENSE).

packages/storage/jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  transform: {
+    '^.+\\.(t|j)sx?$': [
+      '@swc/jest',
+    ],
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  testPathIgnorePatterns: ['node_modules'],
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  testEnvironment: 'jest-environment-jsdom',
+};

packages/storage/jest.setup.js

@@ -0,0 +1,2 @@
+import 'jest-plugin-context/setup';
+import 'given2/setup';

packages/storage/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@nf-team/storage",
+  "version": "0.0.0",
+  "description": "nf-team storage",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "MIT",
+  "author": {
+    "email": "[email protected]",
+    "name": "SEUNGMIN SA (Harang)",
+    "url": "https://github.com/saseungmin"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mbti-nf-team/frontend-libraries.git"
+  },
+  "homepage": "https://mbti-nf-team.github.io/frontend-libraries/docs/storage",
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs --dts",
+    "dev": "yarn run build -- --watch",
+    "test:unit": "jest",
+    "test:watch": "jest --watch",
+    "test:watchAll": "jest --watchAll",
+    "test:coverage": "yarn test:unit --coverage",
+    "lint": "eslint \"**/*.ts*\""
+  },
+  "devDependencies": {
+    "@nf-team/eslint-config": "2.1.0",
+    "@nf-team/tsconfig": "1.0.0",
+    "@swc/core": "^1.3.96",
+    "@swc/jest": "^0.2.29",
+    "@types/jest": "^29.5.2",
+    "@types/jest-plugin-context": "^2.9.5",
+    "eslint": "^8.53.0",
+    "eslint-plugin-tsdoc": "^0.2.17",
+    "given2": "^2.1.7",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-plugin-context": "^2.9.0",
+    "tsup": "^7.3.0",
+    "typescript": "5.1.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "email": "[email protected]",
+    "url": "https://github.com/mbti-nf-team/frontend-libraries/issues"
+  }
+}

packages/storage/src/index.ts

@@ -0,0 +1,10 @@
+export {
+  getLocalStorageItem,
+  removeLocalStorageItem,
+  setLocalStorageItem,
+} from './localStorage';
+export {
+  getSessionStorageItem,
+  removeSessionStorageItem,
+  setSessionStorageItem,
+} from './sessionStorage';

packages/storage/src/localStorage.test.ts

@@ -0,0 +1,104 @@
+/* eslint-disable no-proto */
+import { getLocalStorageItem, removeLocalStorageItem, setLocalStorageItem } from './localStorage';
+
+describe('localStorage', () => {
+  describe('setLocalStorageItem', () => {
+    beforeEach(() => {
+      jest.spyOn(window.localStorage.__proto__, 'setItem');
+    });
+
+    const value = {
+      key: 'value',
+    };
+
+    it('localStorage setItem이 호출되어야만 한다', () => {
+      setLocalStorageItem('key', value);
+
+      expect(window.localStorage.setItem).toHaveBeenCalledWith('key', JSON.stringify(value));
+    });
+  });
+
+  describe('getLocalStorageItem', () => {
+    const spyOnGetItem = jest.spyOn(window.localStorage.__proto__, 'getItem');
+    const spyOnJsonParse = jest.spyOn(JSON, 'parse');
+
+    afterEach(() => {
+      spyOnGetItem.mockReset();
+      spyOnJsonParse.mockReset();
+    });
+
+    context('Error가 발생하지 않은 경우', () => {
+      context('key값에 대한 item이 존재하지 않는 경우', () => {
+        beforeEach(() => {
+          spyOnGetItem.mockReturnValueOnce(null);
+          spyOnJsonParse.mockReturnValueOnce('');
+        });
+
+        it('localStorage getItem이 호출되어야만 한다', () => {
+          const result = getLocalStorageItem('key');
+
+          expect(window.localStorage.getItem).toHaveBeenCalledWith('key');
+          expect(result).toBe('');
+        });
+      });
+
+      context('key값에 대한 item이 존재하는 경우', () => {
+        const value = 'test';
+
+        beforeEach(() => {
+          spyOnGetItem.mockReturnValueOnce(value);
+          spyOnJsonParse.mockReturnValueOnce(value);
+        });
+
+        it('localStorage getItem이 호출되어야만 한다', () => {
+          const result = getLocalStorageItem('key');
+
+          expect(window.localStorage.getItem).toHaveBeenCalledWith('key');
+          expect(result).toBe(value);
+        });
+      });
+
+      context('window가 undefined인 경우', () => {
+        const windowSpy = jest.spyOn(window, 'window', 'get') as jest.Mock;
+
+        beforeEach(() => {
+          windowSpy.mockImplementationOnce(() => undefined);
+        });
+
+        afterEach(() => {
+          windowSpy.mockRestore();
+        });
+
+        it('null를 반환해야만 한다', () => {
+          const result = getLocalStorageItem('key');
+
+          expect(result).toBeNull();
+        });
+      });
+    });
+
+    context('Error가 발생한 경우', () => {
+      beforeEach(() => {
+        spyOnGetItem.mockReturnValue(new Error('error'));
+      });
+
+      it('null을 반환해야만 한다', () => {
+        const result = getLocalStorageItem('key');
+
+        expect(result).toBeNull();
+      });
+    });
+  });
+
+  describe('removeLocalStorageItem', () => {
+    beforeEach(() => {
+      jest.spyOn(window.localStorage.__proto__, 'removeItem');
+    });
+
+    it('localStorage removeItem이 호출되어야만 한다', () => {
+      removeLocalStorageItem('key');
+
+      expect(window.localStorage.removeItem).toHaveBeenCalledWith('key');
+    });
+  });
+});

packages/storage/src/localStorage.ts

@@ -0,0 +1,20 @@
+export const setLocalStorageItem = (key: string, value: unknown) => {
+  localStorage.setItem(key, JSON.stringify(value));
+};
+
+export const getLocalStorageItem = <T>(key: string) => {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  try {
+    const item = localStorage.getItem(key);
+    const parsed = JSON.parse(item || '') as T | null;
+
+    return parsed;
+  } catch (error) {
+    return null;
+  }
+};
+
+export const removeLocalStorageItem = (key: string) => localStorage.removeItem(key);