+
@@ -40,9 +51,9 @@ function App() {
{/* Example 리스트 로딩 및 데이터 표시 */}
-
+
스켈레톤 사용 예시
- {isExamplesLoading ? ( + {exampleQuery.error ? ( // 로딩 중일 때 Skeleton 컴포넌트 표시 <>
{example.name}
${example.number}
diff --git a/ssh-web/src/apis/Example/index.ts b/ssh-web/src/apis/Example/index.ts
deleted file mode 100644
index b9094c1..0000000
--- a/ssh-web/src/apis/Example/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { api } from '../interceptors';
-import REQUEST_DOMAINS from '../axiosConfig';
-import { ExampleResponse } from '../../interfaces/Example';
-import { showToast } from '../../utils/toastUtil';
-
-export const getExamples = async (): Promise => {
- try {
- const response = await api.get(
- `${REQUEST_DOMAINS.auth}/examples`,
- );
- showToast('success', '성공 메시지 띄우기');
-
- return response.data;
- } catch (error) {
- console.error('Error:', error);
- showToast('error', '실패 에러 메시지 띄우기');
- throw new Error(`나중에 에러 토스트에 띄울 메시지로 재가공해서 내보내기`);
- }
-};
diff --git a/ssh-web/src/apis/axiosConfig.ts b/ssh-web/src/apis/axiosConfig.ts
index 81e2403..1b6d115 100644
--- a/ssh-web/src/apis/axiosConfig.ts
+++ b/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 = {
- 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;
diff --git a/ssh-web/src/apis/exampleApi.ts b/ssh-web/src/apis/exampleApi.ts
new file mode 100644
index 0000000..6ec95a9
--- /dev/null
+++ b/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(`${REQUEST_DOMAINS.auth}/examples`);
+};
+
+export const getExamples = async (): Promise => {
+ try {
+ const response = await api.get(
+ `${REQUEST_DOMAINS.auth}/examples`,
+ );
+ showToast('success', '성공 메시지 띄우기');
+
+ return response.data;
+ } catch (error) {
+ console.error('Error:', error);
+ showToast('error', '실패 에러 메시지 띄우기');
+ throw new Error(`나중에 에러 토스트에 띄울 메시지로 재가공해서 내보내기`);
+ }
+};
+// ============= Example Test ======================
diff --git a/ssh-web/src/apis/interceptors.ts b/ssh-web/src/apis/interceptors.ts
index 0069a63..7dae97e 100644
--- a/ssh-web/src/apis/interceptors.ts
+++ b/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) {
// 비로그인 상태 확인 시 처리로직 추가작업 필요함
}
diff --git a/ssh-web/src/atoms/example.ts b/ssh-web/src/atoms/example.ts
index 509f094..bc4c0a9 100644
--- a/ssh-web/src/atoms/example.ts
+++ b/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',
},
});
diff --git a/ssh-web/src/components/atoms/Button/index.stories.tsx b/ssh-web/src/components/atoms/Button/index.stories.tsx
new file mode 100644
index 0000000..52dedf6
--- /dev/null
+++ b/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;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ children: 'Button',
+ fullWidth: true,
+ },
+};
diff --git a/ssh-web/src/components/atoms/Button/index.tsx b/ssh-web/src/components/atoms/Button/index.tsx
index b76ab2b..4d68385 100644
--- a/ssh-web/src/components/atoms/Button/index.tsx
+++ b/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,
diff --git a/ssh-web/src/interfaces/Example.ts b/ssh-web/src/interfaces/Example.ts
deleted file mode 100644
index 1209eeb..0000000
--- a/ssh-web/src/interfaces/Example.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export interface Example {
- // 스켈레톤 테스트용입니다.
- id: number;
- name: string;
- number: number;
-}
-
-export interface ExampleResponse {
- // 스켈레톤 테스트용입니다.
- examples: Example[];
-}
diff --git a/ssh-web/src/interfaces/User.ts b/ssh-web/src/interfaces/User.ts
deleted file mode 100644
index cb9f3e2..0000000
--- a/ssh-web/src/interfaces/User.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface User {
- id: number;
- name: string;
-}
-
-export interface UserResponse {
- users: User[];
-}
diff --git a/ssh-web/src/interfaces/exampleInterface.ts b/ssh-web/src/interfaces/exampleInterface.ts
new file mode 100644
index 0000000..3d85cee
--- /dev/null
+++ b/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 ==========
diff --git a/ssh-web/src/mocks/exampleHandler.ts b/ssh-web/src/mocks/exampleHandler.ts
deleted file mode 100644
index 518aabc..0000000
--- a/ssh-web/src/mocks/exampleHandler.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { mock } from './index';
-import REQUEST_DOMAINS from '../apis/axiosConfig';
-
-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 },
- ],
- },
- ]);
- }, 3000);
- });
-});
diff --git a/ssh-web/src/mocks/index.ts b/ssh-web/src/mocks/index.ts
index d66b42c..c191536 100644
--- a/ssh-web/src/mocks/index.ts
+++ b/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 ==========
diff --git a/ssh-web/src/mocks/userHandler.ts b/ssh-web/src/mocks/userHandler.ts
deleted file mode 100644
index 5befcf8..0000000
--- a/ssh-web/src/mocks/userHandler.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { mock } from './index';
-import REQUEST_DOMAINS from '../apis/axiosConfig';
-import { UserResponse } from '../interfaces/User';
-
-mock.onPost(`/${REQUEST_DOMAINS.auth}/users`).reply(200, {
- users: [{ id: 1, name: 'John Smith' }],
-});
diff --git a/ssh-web/src/stories/Button.stories.tsx b/ssh-web/src/stories/Button.stories.tsx
deleted file mode 100644
index c44c17f..0000000
--- a/ssh-web/src/stories/Button.stories.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-// src/components/Button.stories.tsx
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import Button, { ButtonProps } from './Button';
-
-export default {
- title: 'Components/Button',
- component: Button,
- argTypes: {
- variant: {
- control: { type: 'select', options: ['primary', 'secondary', 'danger'] },
- },
- size: {
- control: { type: 'select', options: ['small', 'medium', 'large'] },
- },
- },
-} as Meta;
-
-const Template: StoryFn = (args:ButtonProps) => ;
-
-export const Primary = Template.bind({});
-Primary.args = {
- variant: 'primary',
- size: 'medium',
- children: 'Primary Button',
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
- variant: 'secondary',
- size: 'medium',
- children: 'Secondary Button',
-};
-
-export const Danger = Template.bind({});
-Danger.args = {
- variant: 'danger',
- size: 'medium',
- children: 'Danger Button',
-};
-
-export const Large = Template.bind({});
-Large.args = {
- variant: 'primary',
- size: 'large',
- children: 'Large Button',
-};
-
-export const Small = Template.bind({});
-Small.args = {
- variant: 'primary',
- size: 'small',
- children: 'Small Button',
-};
diff --git a/ssh-web/src/stories/Button.tsx b/ssh-web/src/stories/Button.tsx
deleted file mode 100644
index 206d190..0000000
--- a/ssh-web/src/stories/Button.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-// src/components/Button.tsx
-import React from 'react';
-import { tv, VariantProps } from 'tailwind-variants';
-
-// Tailwind Variants 설정
-const buttonStyles = tv({
- base: 'px-4 py-2 font-semibold text-white rounded-lg',
- variants: {
- variant: {
- primary: 'bg-blue-500 hover:bg-blue-600',
- secondary: 'bg-gray-500 hover:bg-gray-600',
- danger: 'bg-red-500 hover:bg-red-600',
- },
- size: {
- small: 'text-sm',
- medium: 'text-md',
- large: 'text-lg',
- },
- },
- defaultVariants: {
- variant: 'primary',
- size: 'medium',
- },
-});
-
-// 버튼 컴포넌트 타입 정의
-export interface ButtonProps extends VariantProps {
- children: React.ReactNode;
-}
-
-const Button: React.FC = ({ variant, size, children }) => {
- return (
-
- );
-};
-
-export default Button;
diff --git a/ssh-web/src/stories/Configure.mdx b/ssh-web/src/stories/Configure.mdx
deleted file mode 100644
index 6a53730..0000000
--- a/ssh-web/src/stories/Configure.mdx
+++ /dev/null
@@ -1,364 +0,0 @@
-import { Meta } from "@storybook/blocks";
-
-import Github from "./assets/github.svg";
-import Discord from "./assets/discord.svg";
-import Youtube from "./assets/youtube.svg";
-import Tutorials from "./assets/tutorials.svg";
-import Styling from "./assets/styling.png";
-import Context from "./assets/context.png";
-import Assets from "./assets/assets.png";
-import Docs from "./assets/docs.png";
-import Share from "./assets/share.png";
-import FigmaPlugin from "./assets/figma-plugin.png";
-import Testing from "./assets/testing.png";
-import Accessibility from "./assets/accessibility.png";
-import Theming from "./assets/theming.png";
-import AddonLibrary from "./assets/addon-library.png";
-
-export const RightArrow = () =>
-
-
-
-
-
-
- # Configure your project
-
- Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
-
-
-
-
- 
-
- Add styling and CSS
-Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.
- Learn more
- 
-
- Provide context and mocking
-Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.
- Learn more
- 
-
-
-
- Load assets and resources
-To link static files (like fonts) to your projects and stories, use the - `staticDirs` configuration option to specify folders to load when - starting Storybook.
- Learn more
-
-
- # Do more with Storybook
-
- Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
-
-
-
-
-
-
-
- 
-
- Autodocs
-Auto-generate living, - interactive reference documentation from your components and stories.
- Learn more
- 
-
- Publish to Chromatic
-Publish your Storybook to review and collaborate with your entire team.
- Learn more
- 
-
- Figma Plugin
-Embed your stories into Figma to cross-reference the design and live - implementation in one place.
- Learn more
- 
-
- Testing
-Use stories to test a component in all its variations, no matter how - complex.
- Learn more
- 
-
-
- Accessibility
-Automatically test your components for a11y issues as you develop.
- Learn more
-
-
-
-
- 
-
-
-
-
-
diff --git a/ssh-web/src/stories/assets/accessibility.png b/ssh-web/src/stories/assets/accessibility.png
deleted file mode 100644
index 6ffe6fe..0000000
Binary files a/ssh-web/src/stories/assets/accessibility.png and /dev/null differ
diff --git a/ssh-web/src/stories/assets/accessibility.svg b/ssh-web/src/stories/assets/accessibility.svg
deleted file mode 100644
index 107e93f..0000000
--- a/ssh-web/src/stories/assets/accessibility.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/ssh-web/src/stories/assets/addon-library.png b/ssh-web/src/stories/assets/addon-library.png
deleted file mode 100644
index 95deb38..0000000
Binary files a/ssh-web/src/stories/assets/addon-library.png and /dev/null differ
diff --git a/ssh-web/src/stories/assets/assets.png b/ssh-web/src/stories/assets/assets.png
deleted file mode 100644
index cfba681..0000000
Binary files a/ssh-web/src/stories/assets/assets.png and /dev/null differ
diff --git a/ssh-web/src/stories/assets/avif-test-image.avif b/ssh-web/src/stories/assets/avif-test-image.avif
deleted file mode 100644
index 530709b..0000000
Binary files a/ssh-web/src/stories/assets/avif-test-image.avif and /dev/null differ
diff --git a/ssh-web/src/stories/assets/context.png b/ssh-web/src/stories/assets/context.png
deleted file mode 100644
index e5cd249..0000000
Binary files a/ssh-web/src/stories/assets/context.png and /dev/null differ
diff --git a/ssh-web/src/stories/assets/discord.svg b/ssh-web/src/stories/assets/discord.svg
deleted file mode 100644
index d638958..0000000
--- a/ssh-web/src/stories/assets/discord.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/ssh-web/src/stories/assets/docs.png b/ssh-web/src/stories/assets/docs.png
deleted file mode 100644
index a749629..0000000
Binary files a/ssh-web/src/stories/assets/docs.png and /dev/null differ
diff --git a/ssh-web/src/stories/assets/figma-plugin.png b/ssh-web/src/stories/assets/figma-plugin.png
deleted file mode 100644
index 8f79b08..0000000
Binary files a/ssh-web/src/stories/assets/figma-plugin.png and /dev/null differ
diff --git a/ssh-web/src/stories/assets/github.svg b/ssh-web/src/stories/assets/github.svg
deleted file mode 100644
index dc51352..0000000
--- a/ssh-web/src/stories/assets/github.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/ssh-web/src/stories/assets/share.png b/ssh-web/src/stories/assets/share.png
deleted file mode 100644
index 8097a37..0000000
Binary files a/ssh-web/src/stories/assets/share.png and /dev/null differ
diff --git a/ssh-web/src/stories/assets/styling.png b/ssh-web/src/stories/assets/styling.png
deleted file mode 100644
index d341e82..0000000
Binary files a/ssh-web/src/stories/assets/styling.png and /dev/null differ
diff --git a/ssh-web/src/stories/assets/testing.png b/ssh-web/src/stories/assets/testing.png
deleted file mode 100644
index d4ac39a..0000000
Binary files a/ssh-web/src/stories/assets/testing.png and /dev/null differ
diff --git a/ssh-web/src/stories/assets/theming.png b/ssh-web/src/stories/assets/theming.png
deleted file mode 100644
index 1535eb9..0000000
Binary files a/ssh-web/src/stories/assets/theming.png and /dev/null differ
diff --git a/ssh-web/src/stories/assets/tutorials.svg b/ssh-web/src/stories/assets/tutorials.svg
deleted file mode 100644
index b492a9c..0000000
--- a/ssh-web/src/stories/assets/tutorials.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/ssh-web/src/stories/assets/youtube.svg b/ssh-web/src/stories/assets/youtube.svg
deleted file mode 100644
index a7515d7..0000000
--- a/ssh-web/src/stories/assets/youtube.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/ssh-web/src/stories/button.css b/ssh-web/src/stories/button.css
deleted file mode 100644
index dc91dc7..0000000
--- a/ssh-web/src/stories/button.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.storybook-button {
- font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
- font-weight: 700;
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- line-height: 1;
-}
-.storybook-button--primary {
- color: white;
- background-color: #1ea7fd;
-}
-.storybook-button--secondary {
- color: #333;
- background-color: transparent;
- box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
- font-size: 12px;
- padding: 10px 16px;
-}
-.storybook-button--medium {
- font-size: 14px;
- padding: 11px 20px;
-}
-.storybook-button--large {
- font-size: 16px;
- padding: 12px 24px;
-}
diff --git a/ssh-web/src/utils/toastUtil.tsx b/ssh-web/src/utils/toastUtil.tsx
index bbd2bbd..dbe8f78 100644
--- a/ssh-web/src/utils/toastUtil.tsx
+++ b/ssh-web/src/utils/toastUtil.tsx
@@ -1,9 +1,10 @@
+import React from 'react';
import { toast, ToastOptions } from 'react-toastify';
import { FaCheckCircle, FaExclamationCircle } from 'react-icons/fa';
-export type ToastType = 'success' | 'error';
+export type TToast = 'success' | 'error';
-export const showToast = (type: ToastType, message: string) => {
+export const showToast = (type: TToast, message: string) => {
const toastProps: ToastOptions = {
style: { backgroundColor: '#fffff', color: 'black' },
progressStyle: {
diff --git a/ssh-web/tailwind.config.js b/ssh-web/tailwind.config.js
index 83ea911..bd0332f 100644
--- a/ssh-web/tailwind.config.js
+++ b/ssh-web/tailwind.config.js
@@ -23,5 +23,53 @@ module.exports = {
},
},
},
+ extend: {
+ colors: {
+ primary: {
+ 100: '#E6EDFF',
+ 200: '#B3C8FF',
+ 300: '#94ABFA',
+ 400: '#4C7DFF',
+ 500: '#005DF9',
+ 600: '#0046FF',
+ 700: '#0040E8',
+ 800: '#1539CB',
+ 900: '#102FA8',
+ },
+ secondary: {
+ 100: '#F3F6FB',
+ 200: '#EBEFF5',
+ 300: '#D6DBE1',
+ 400: '#B9C1C9',
+ 500: '#808892',
+ 600: '#565B64',
+ 700: '#3A3F49',
+ 800: '#24272D',
+ 900: '#121418',
+ },
+ danger: {
+ 100: '#FFF2F2',
+ 200: '#FFDDDD',
+ 300: '#FFA9A9',
+ 400: '#F07E7E',
+ 500: '#DE4141',
+ 600: '#D61111',
+ 700: '#C10F0F',
+ 800: '#AB0E0E',
+ 900: '#861E17',
+ },
+ warning: {
+ 100: '#FFF9E8',
+ 200: '#FFF6D1',
+ 300: '#FFEDBD',
+ 400: '#FEE580',
+ 500: '#FFDA4A',
+ 600: '#FFD158',
+ 700: '#F5C342',
+ 800: '#F1B33D',
+ 900: '#EA9635',
+ },
+ },
+ },
plugins: [],
};
- 
- Join our contributors building the future of UI development.
-
- Star on GitHub
-
- 
-
-
- Get support and chat with frontend developers.
-
- Join Discord server
-
- 
-
-
-
- Watch tutorials, feature previews and interviews.
-
- Watch on YouTube
-