Skip to content

Commit

Permalink
backup
Browse files Browse the repository at this point in the history
  • Loading branch information
sunub committed Apr 21, 2024
1 parent d067a8f commit 5c345d7
Show file tree
Hide file tree
Showing 12 changed files with 132 additions and 161 deletions.
Binary file modified bun.lockb
Binary file not shown.
16 changes: 0 additions & 16 deletions next.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -22,22 +22,6 @@ const nextConfig = {
},
];
},
webpack: (config, { isServer }) => {
if (isServer) {
if (Array.isArray(config.resolve.alias)) {
config.resolve.alias.push({ name: 'msw/browser', alias: false });
} else {
config.resolve.alias['msw/browser'] = false;
}
} else {
if (Array.isArray(config.resolve.alias)) {
config.resolve.alias.push({ name: 'msw/node', alias: false });
} else {
config.resolve.alias['msw/node'] = false;
}
}
return config;
},
};

const ContentSecurityPolicy = `
Expand Down
6 changes: 5 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
"test:pin": "jest --watch /tests/pin/app.spec.tsx"
},
"dependencies": {
"@conform-to/react": "^1.1.0",
"@conform-to/zod": "^1.1.0",
"@mdx-js/loader": "^2.3.0",
"@mdx-js/react": "^2.3.0",
"@next/bundle-analyzer": "^13.5.4",
Expand Down Expand Up @@ -57,13 +59,15 @@
"sharp": "^0.32.6",
"styled-components": "^5.3.11",
"swr": "^2.2.4",
"tailwind-merge": "^2.2.2",
"ts-node": "^10.9.1",
"undici": "^6.10.2",
"uuid": "^9.0.1",
"valibot": "^0.27.0",
"valibot": "^0.30.0",
"web-vitals": "^3.5.0",
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4",
"zod": "^3.22.4",
"zustand": "^4.5.2"
},
"devDependencies": {
Expand Down
Binary file added public/font/NanumSquareNeo.woff2
Binary file not shown.
21 changes: 5 additions & 16 deletions src/components/NotificationList/NotificationList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,8 @@ import NotificationItem from '../NotificationItem';
type NotificationItem = [string, Notification];

function NotificationList() {
const [notificationList, setNotificationList] = React.useState<
NotificationItem[]
>([]);
const { notifications } = useNotificationStore((state) => state);

React.useEffect(() => {
setNotificationList([...notifications.entries()]);
}, [notifications]);
const notifications = useNotificationStore((state) => state.notifications);
console.log(notifications);

return (
<ol
Expand All @@ -24,14 +18,9 @@ function NotificationList() {
aria-label="Notification"
aria-live="polite"
>
{notificationList &&
notificationList.map(([id, notification]: NotificationItem) => (
<NotificationItem
key={id}
id={id}
type={notification.type}
message={notification.message}
/>
{notifications &&
notifications.map(({ id, message, type }) => (
<NotificationItem key={id} id={id} type={type} message={message} />
))}
</ol>
);
Expand Down
33 changes: 0 additions & 33 deletions src/components/Notifications/Notifiactions.tsx

This file was deleted.

2 changes: 0 additions & 2 deletions src/components/Notifications/index.ts

This file was deleted.

72 changes: 45 additions & 27 deletions src/components/PinNumber/PinInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,15 @@ import PinSuccess from './PinSuccess';
import styled from 'styled-components';
import { motion } from 'framer-motion';
import { useNumpadStore, useSubmitNumpadStroe } from '@/context/NumpadContext';
import { useNotificationStore } from '@/context/NotificationContext';
import { goToUsername } from '@/utils/revalidate';

interface PinInputProps {
children: React.ReactNode;
uses: 'register' | 'confirm';
padInfo: KeypadInfo;
action: (
decodedPinNumbers: string[],
formData: FormData,
padInfo: KeypadInfo,
) => Promise<{
status: string;
Expand Down Expand Up @@ -58,9 +60,11 @@ function PinInput({ uses, children, padInfo, action }: PinInputProps) {
errorId: '',
msg: null,
});

const inputRef = React.useRef<HTMLInputElement>(null);
const containerRef = React.useRef<HTMLFormElement>(null);
const isHydrated = useHydrated();

const { updateStatus } =
uses === 'register'
? useNumpadStore((state) => state)
Expand Down Expand Up @@ -101,30 +105,12 @@ function PinInput({ uses, children, padInfo, action }: PinInputProps) {
setOpen(true);
}}
action={async (formData: FormData) => {
updateStatus('pending');
const isReorder = formData.get('reorder') === 'on';

if (isReorder) {
reorderKeypad(isReorder);
return;
}

let formPinNumber = formData.get('pinNumbers') as string;
const result = v.safeParse(PinNumberSchema, formPinNumber.split(','));
const actionResult = await action(formData, padInfo);

if (!result.success) {
updateStatus('idle');
setPinErrorStatus({
hasError: true,
errorId: 'pin-pattern-input',
msg: result.issues[0].message,
});
return;
}

const pinNumber = result.output as string[];
const actionResult = await action(pinNumber, padInfo);
if (actionResult.status === 'error') {
if (actionResult.id === 'username-not-found') {
return goToUsername();
}
updateStatus('idle');
setPinErrorStatus({
hasError: true,
Expand All @@ -133,10 +119,42 @@ function PinInput({ uses, children, padInfo, action }: PinInputProps) {
});
return;
}

setOpen(true);
setSuccess(true);
updateStatus('idle');
// updateStatus('pending');
// const isReorder = formData.get('reorder') === 'on';

// if (isReorder) {
// reorderKeypad(isReorder);
// return;
// }

// let formPinNumber = formData.get('pinNumbers') as string;
// const result = v.safeParse(PinNumberSchema, formPinNumber.split(','));

// if (!result.success) {
// updateStatus('idle');
// setPinErrorStatus({
// hasError: true,
// errorId: 'pin-pattern-input',
// msg: result.issues[0].message,
// });
// return;
// }

// const pinNumber = result.output as string[];
// const actionResult = await action(pinNumber, padInfo);
// if (actionResult.status === 'error') {
// updateStatus('idle');
// setPinErrorStatus({
// hasError: true,
// errorId: actionResult.id,
// msg: actionResult.msg,
// });
// return;
// }

// setOpen(true);
// setSuccess(true);
// updateStatus('idle');
}}
>
{isSuccess ? (
Expand Down
83 changes: 23 additions & 60 deletions src/context/NotificationContext.tsx
Original file line number Diff line number Diff line change
@@ -1,77 +1,40 @@
'use client';

import React from 'react';
import NotificationItem from '@/components/NotificationItem';

interface NotificationContextProps {
notificationList: Notification[];
action: {
add: (notification: Notification) => void;
remove: (id: string) => void;
};
}

export interface Notification {
id: string;
message: string;
type: 'default' | 'error' | 'success';
}

interface ContextValue {
notificationList: Notification[];
action: {
add: (notification: Notification) => void;
remove: (id: string) => void;
};
}
import { type StoreApi, useStore } from 'zustand';
import {
type NotificationStore,
createNotificationStore,
} from '@/store/notification-store';

export const NotificationContext =
React.createContext<NotificationContextProps>({
notificationList: [],
action: {
add: () => {},
remove: () => {},
},
});
React.createContext<StoreApi<NotificationStore> | null>(null);

function NotificationContextProvider({
export function NotificationProvider({
children,
}: {
children: React.ReactNode;
}) {
const [notificationList, setNotification] = React.useState<Notification[]>(
[],
);

const contextValue = React.useMemo((): ContextValue => {
const add = (notification: Notification) => {
const newNotification = [...notificationList, notification];
setNotification(newNotification);
};

const remove = (id: string) => {
if (id.length == 0) {
setNotification([]);
return;
}

const newNotification = notificationList.filter((item) => item.id !== id);
setNotification(newNotification);
};

const action = {
add,
remove,
};

return { notificationList, action };
}, [notificationList, setNotification]);
const notificationRef = React.useRef<StoreApi<NotificationStore>>();
if (!notificationRef.current) {
notificationRef.current = createNotificationStore();
}

return (
<NotificationContext.Provider value={contextValue}>
<NotificationContext.Provider value={notificationRef.current}>
{children}
</NotificationContext.Provider>
);
}

export default NotificationContextProvider;
export const useNotificationStore = <T,>(
selector: (store: NotificationStore) => T,
): T => {
const notificationContext = React.useContext(NotificationContext);
if (!notificationContext) {
throw new Error(
'useNotificationStore must be used within a NotificationContextProvider',
);
}
return useStore(notificationContext, selector);
};
Binary file added src/fonts/NanumSquareNeo-Variable.woff2
Binary file not shown.
16 changes: 10 additions & 6 deletions src/store/notification-store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,17 @@ import { createStore } from 'zustand';
import { z } from 'zod';

export type Notification = {
id: string;
message: string;
type: 'default' | 'error' | 'success';
};

export type NotificationState = {
notifications: Map<string, Notification>;
notifications: Notification[];
};

export type NotificationAction = {
add: (notification: Notification, id: string) => void;
add: (notification: Notification) => void;
remove: (id: string) => void;
};

Expand All @@ -36,7 +37,7 @@ export const NotificationStateSchema = z.map(
);

export const defaultInitState = {
notifications: new Map<string, Notification>(),
notifications: [],
} as NotificationState;

export type NotificationStore = NotificationState & NotificationAction;
Expand All @@ -46,15 +47,18 @@ export const createNotificationStore = (
) => {
return createStore<NotificationStore>((set) => ({
...initState,
add: (notification: Notification, id: string) => {
add: (notification: Notification) => {
set((state) => {
state.notifications.set(id, notification);
if (state.notifications.find((n) => n.id === notification.id)) {
return state;
}
state.notifications.push(notification);
return state;
});
},
remove: (id: string) => {
set((state) => {
state.notifications.delete(id);
state.notifications = state.notifications.filter((n) => n.id !== id);
return state;
});
},
Expand Down
Loading

0 comments on commit 5c345d7

Please sign in to comment.