[PR]: #19 -> develop

[Chore/#19] color palette 등록 및 리팩토링

ssh-web/.storybook/main.ts

@@ -1,20 +1,20 @@
-import type { StorybookConfig } from "@storybook/react-webpack5";
+import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    "@storybook/preset-create-react-app",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
-    "@storybook/addon-styling-webpack"
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    '@storybook/addon-styling-webpack',
   ],
   framework: {
-    name: "@storybook/react-webpack5",
+    name: '@storybook/react-webpack5',
     options: {},
   },
-  staticDirs: ["../public"],
+  staticDirs: ['../public'],
 };
 export default config;

ssh-web/.storybook/preview.ts

@@ -1,15 +1,15 @@
-import type { Preview } from "@storybook/react";
-import "../src/stories/tailwind.css";
+import type { Preview } from '@storybook/react';
+import './tailwind.css';
 
 const preview: Preview = {
-    parameters: {
-        controls: {
-            matchers: {
-                color: /(background|color)$/i,
-                date: /Date$/i,
-            },
-        },
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
     },
+  },
 };
 
 export default preview;

ssh-web/src/App.tsx

@@ -1,12 +1,12 @@
 import './App.css';
+import React from 'react';
 import { Button } from './components/atoms/Button';
 import { Skeleton } from './components/atoms/Skeleton';
-import { ExampleResponse } from './interfaces/Example';
-import { useQuery } from '@tanstack/react-query';
-import { getExamples } from './apis/Example';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { getExample2 } from './apis/exampleApi';
 
 function App() {
-  const {
+  /*const {
     data: examplesData,
     isLoading: isExamplesLoading,
     error: examplesError,
@@ -18,7 +18,18 @@ function App() {
 
   if (examplesError) {
     console.error('Error fetching examples:', examplesError);
+  }*/
+
+  // ============= Example Test ======================
+  const exampleQuery = useSuspenseQuery({
+    queryKey: ['example'],
+    queryFn: async () => await getExample2(),
+  });
+
+  if (exampleQuery.error && !exampleQuery.isFetching) {
+    throw exampleQuery.error;
   }
+  // ============= Example Test ======================
 
   return (
     <div className="flex flex-col p-4">
@@ -28,8 +39,8 @@ function App() {
       </div>
 
       {/* Button 사용 예시 */}
-      <div className="flex flex-col gap-3 mt-4 w-36 border-2 border-gray-400">
-        <Button>버튼1</Button>
+      <div className="flex flex-col gap-3 p-2 mt-4 border-2 border-gray-400 w-36">
+        <Button color="blue">버튼1</Button>
         <Button color="gray">버튼2</Button>
         <Button outlined>버튼3</Button>
         <Button rounded>버튼4</Button>
@@ -40,9 +51,9 @@ function App() {
       </div>
 
       {/* Example 리스트 로딩 및 데이터 표시 */}
-      <div className="flex flex-col gap-3 mt-4 w-80 border-2 border-gray-400 p-4">
+      <div className="flex flex-col gap-3 p-4 mt-4 border-2 border-gray-400 w-80">
         <h3 className="text-sm">스켈레톤 사용 예시</h3>
-        {isExamplesLoading ? (
+        {exampleQuery.error ? (
           // 로딩 중일 때 Skeleton 컴포넌트 표시
           <>
             <Skeleton variant="rectangular" width="100%" height="40px" />
@@ -51,7 +62,7 @@ function App() {
           </>
         ) : (
           // 로딩이 완료되면 Example 데이터를 표시
-          examplesData?.examples.map((example) => (
+          exampleQuery.data.data.examples.map((example) => (
             <div key={example.id} className="flex justify-between">
               <span>{example.name}</span>
               <span>${example.number}</span>

ssh-web/src/apis/axiosConfig.ts

@@ -1,16 +1,16 @@
-type Domain = "auth" | "users" | "quizs" | "accounts" | "promises" | "missions";
+type Domain = 'auth' | 'users' | 'quizs' | 'accounts' | 'promises' | 'missions';
 
 /** 도메인 맵핑 객체
  *
  * API 명세가 합의되면 하위 엔드포인트도 추가로 만들어서 타이핑
  */
 const REQUEST_DOMAINS: Record<Domain, Domain> = {
-  auth: "auth",
-  users: "users",
-  quizs: "quizs",
-  accounts: "accounts",
-  promises: "promises",
-  missions: "missions",
+  auth: 'auth',
+  users: 'users',
+  quizs: 'quizs',
+  accounts: 'accounts',
+  promises: 'promises',
+  missions: 'missions',
 };
 
 export default REQUEST_DOMAINS;

ssh-web/src/apis/exampleApi.ts

@@ -0,0 +1,32 @@
+import REQUEST_DOMAINS from './axiosConfig';
+import { showToast } from '../utils/toastUtil';
+import { api } from './interceptors';
+import { IExampleResponse } from '../interfaces/exampleInterface';
+
+// ============= Example Test ======================
+export const getExample1 = () => {
+  return api({
+    url: `${REQUEST_DOMAINS.auth}/examples`,
+    method: 'get',
+  });
+};
+
+export const getExample2 = () => {
+  return api.get<IExampleResponse>(`${REQUEST_DOMAINS.auth}/examples`);
+};
+
+export const getExamples = async (): Promise<IExampleResponse> => {
+  try {
+    const response = await api.get<IExampleResponse>(
+      `${REQUEST_DOMAINS.auth}/examples`,
+    );
+    showToast('success', '성공 메시지 띄우기');
+
+    return response.data;
+  } catch (error) {
+    console.error('Error:', error);
+    showToast('error', '실패 에러 메시지 띄우기');
+    throw new Error(`나중에 에러 토스트에 띄울 메시지로 재가공해서 내보내기`);
+  }
+};
+// ============= Example Test ======================

ssh-web/src/apis/interceptors.ts

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import { showToast } from '../utils/toastUtil';
 
 const baseURL = process.env.REACT_APP_API_BASE_URL;
 
@@ -24,6 +25,7 @@ api.interceptors.response.use(
     return response;
   },
   (error) => {
+    showToast('error', '오류가 발생하였습니다.');
     if (error.response?.status === 401) {
       // 비로그인 상태 확인 시 처리로직 추가작업 필요함
     }

ssh-web/src/atoms/example.ts

@@ -1,8 +1,8 @@
-import { atom } from "recoil";
+import { atom } from 'recoil';
 
 export const exampleState = atom({
-  key: "exampleState",
+  key: 'exampleState',
   default: {
-    exampleKey: "exampleValue",
+    exampleKey: 'exampleValue',
   },
 });

ssh-web/src/components/atoms/Button/index.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './index';
+
+const meta = {
+  component: Button,
+  argTypes: {
+    children: {
+      description: '버튼 안에 표시할 텍스트',
+    },
+    fullWidth: {
+      description: '버튼의 스타일',
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Button',
+    fullWidth: true,
+  },
+};

ssh-web/src/components/atoms/Button/index.tsx

@@ -1,11 +1,12 @@
-import { buttonStyles } from "./Button.styles";
-import { ButtonProps } from "./Button.types";
+import React from 'react';
+import { buttonStyles } from './Button.styles';
+import { ButtonProps } from './Button.types';
 
 export const Button = ({
   children,
-  type = "button",
-  color = "blue",
-  size = "md",
+  type = 'button',
+  color = 'blue',
+  size = 'md',
   onClick,
   disabled = false,
   outlined = false,
@@ -14,8 +15,8 @@ export const Button = ({
   classNameStyles,
 }: ButtonProps) => {
   const className = buttonStyles({
-    bg: outlined ? "none" : color,
-    borderColor: outlined ? color : "none",
+    bg: outlined ? 'none' : color,
+    borderColor: outlined ? color : 'none',
     text: outlined ? `outlined_${color}` : color,
     size,
     rounded,

ssh-web/src/interfaces/exampleInterface.ts

@@ -0,0 +1,13 @@
+// ========== Example Test ==========
+export interface IExample {
+  // 스켈레톤 테스트용입니다.
+  id: number;
+  name: string;
+  number: number;
+}
+
+export interface IExampleResponse {
+  // 스켈레톤 테스트용입니다.
+  examples: IExample[];
+}
+// ========== Example Test ==========

ssh-web/src/mocks/index.ts

@@ -1,8 +1,28 @@
 import AxiosMockAdapter from 'axios-mock-adapter';
 import { api } from '../apis/interceptors';
+import REQUEST_DOMAINS from '../apis/axiosConfig';
 
 export const mock = new AxiosMockAdapter(api);
 
-// 핸들러 파일들 로드
-require('./userHandler');
-require('./exampleHandler');
+// ========== Test Domain ==========
+mock.onPost(`/${REQUEST_DOMAINS.auth}/users`).reply(200, {
+  users: [{ id: 1, name: 'John Smith' }],
+});
+
+mock.onGet(`/${REQUEST_DOMAINS.auth}/examples`).reply(() => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([
+        200,
+        {
+          examples: [
+            { id: 1, name: '스켈레톤 테스트용 1', number: 100 },
+            { id: 2, name: '스켈레톤 테스트용 2', number: 200 },
+            { id: 3, name: '스켈레톤 테스트용 3', number: 300 },
+          ],
+        },
+      ]);
+    }, 500);
+  });
+});
+// ========== Test Domain ==========