(null);
-
- const onViewAvatar = ({ props: { avatarID } }: ItemParams) => {
- if (avatarID.startsWith("*")) {
- toast.warning(t("notAvatarViewFault"));
- } else {
- to(`/avatar/!${getDefaultAvatarID(avatarID)}`);
- }
- };
+ }, [getSiteView, isPath, targetSiteID]);
useEffect(() => {
window.Notification?.requestPermission();
}, []);
- const onViewsModified = useCallback(() => {
- setSiteYellsViewHeight(
- `${
- document.documentElement.clientHeight -
- (titleComponent?.current?.clientHeight ?? 0) -
- (siteViewsView.current?.clientHeight ?? 0) -
- (inputComponent.current?.clientHeight ?? 0)
- }px`,
- );
- }, [titleComponent]);
-
- useEffect(() => {
- onViewsModified();
- }, [onViewsModified, isLoading]);
-
- useEffect(() => {
- const onModified = () => {
- onViewsModified();
- siteYellsViewMove();
- };
-
- window.addEventListener("resize", onModified);
-
- return () => {
- window.removeEventListener("resize", onModified);
- };
- }, [onViewsModified, siteYellsViewMove]);
-
- const onSiteYellsViewMove = useCallback(() => {
- if (siteYellsView) {
- const { current } = siteYellsView;
- if (current) {
- const siteYellID = siteYells[0]?.siteYellID;
- if (siteYellID && siteYellID > 0 && !current.scrollTop) {
- wsAPI.send({
- eventID: EventPB.Event.EventID.GET_SITE_YELLS,
- text: JSON.stringify({
- siteID: targetSiteID,
- siteYellID: siteYellID,
- }),
- });
- }
-
- const isSiteYellsViewLowest =
- current.scrollTop + current.clientHeight >= current.scrollHeight;
- setSiteYellsViewLowest(isSiteYellsViewLowest);
- if (isSiteYellsViewLowest) {
- setPendingSiteYellOpened(false);
- }
- }
- }
- }, [
- setPendingSiteYellOpened,
- setSiteYellsViewLowest,
- siteYells,
- siteYellsView,
- targetSiteID,
- ]);
-
- useEffect(() => {
- if (siteYellsView) {
- const { current } = siteYellsView;
-
- if (current) {
- current.addEventListener("scroll", onSiteYellsViewMove);
-
- return () => {
- current.removeEventListener("scroll", onSiteYellsViewMove);
- };
- }
- }
- }, [onSiteYellsViewMove, siteYellsView]);
-
const isSiteHand = useMemo(
() => getSiteView(targetSiteID)?.siteHand === siteAvatarID,
[getSiteView, siteAvatarID, targetSiteID],
);
- const queryClient = useQueryClient();
-
if (isLoading) {
return ;
}
- const onSiteYellInput: OnSiteYellInput = (event, avatarID) => {
- viewSiteYellInput({ event, props: { avatarID } });
- };
-
return (
<>
-
-
- {siteViews.map(({ siteID, siteName, isNew }) => {
- return (
-
-
-
- );
- })}
-
-
-
- {targetSiteID && (
-
-
-
- )}
-
-
-
-
-
-
- {siteNotify}
-
-
-
-
-
-
-
- {lastPendingSiteYell && (
-
- )}
-
-
-
-
- {
+ setTargetSiteID(eventKey ?? "");
+ }}
+ onContextMenu={(event) => {
+ event.preventDefault();
+ viewSiteNameInput({ event });
}}
>
-
-
-
- setAvatarsOpened(false)}
- >
- setAvatarsOpened(false)}>
- {t("avatarCountText", { avatarCount: avatars.length })}
-
-
- {
- viewAvatarInput({ event, props: { avatarID } });
- }}
- />
-
-
-
-
-
-
+
+
+ ))}
+
-
-
-
-
diff --git "a/qwilight-fe/src/app/\133language\135/site/state/setSiteStore.ts" "b/qwilight-fe/src/app/\133language\135/site/state/setSiteStore.ts"
index 9d218bb..0ab2370 100644
--- "a/qwilight-fe/src/app/\133language\135/site/state/setSiteStore.ts"
+++ "b/qwilight-fe/src/app/\133language\135/site/state/setSiteStore.ts"
@@ -2,8 +2,7 @@
import {
AbilitySiteYell,
Avatar,
- SiteView,
- SiteYell,
+ SiteYellItem,
} from "@/app/[language]/site/type";
import {
formatText,
@@ -14,14 +13,138 @@
} from "@/utilities/Utility";
import { wwwAPIPath } from "@/utilities/wwwAPI";
import CryptoJS from "crypto-js";
-import { runInAction } from "mobx";
+import { makeAutoObservable } from "mobx";
import { useTranslations } from "next-intl";
import { RefObject } from "react";
import { toast } from "react-toastify";
const EventPB = require("@/Event_pb");
-const getSiteYellItem = ({
+export class SiteView {
+ siteID = "";
+ isEditable = false;
+ isNew = false;
+ wasNotify = false;
+ siteNotify = "";
+ siteName = "";
+ isNetMode = false;
+ avatars = [] as Avatar[];
+ siteHand = "";
+ situationValue = 0;
+ siteYellItems = [] as SiteYellItem[];
+ lastPendingSiteYell = undefined as SiteYellItem | undefined;
+ isPendingSiteYellOpened = false;
+ isSiteYellsViewLowest = false;
+ isAvatarsViewOpened = false;
+ isSiteHand = false;
+ textInput = "";
+ siteYellsView = undefined as RefObject | undefined;
+
+ constructor(
+ siteID: string,
+ siteNotify: string,
+ isEditable: boolean,
+ isNetMode: boolean,
+ siteYellItems: SiteYellItem[],
+ ) {
+ this.siteID = siteID;
+ this.siteNotify = siteNotify;
+ this.isEditable = isEditable;
+ this.isNetMode = isNetMode;
+ this.siteYellItems = siteYellItems;
+
+ makeAutoObservable(this);
+ }
+
+ setSiteYell(targetSiteYellID: number, siteYell: string) {
+ const targetSiteYell = this.siteYellItems.find(
+ ({ siteYellID }) => siteYellID === targetSiteYellID,
+ );
+ if (targetSiteYell) {
+ targetSiteYell.siteYell = siteYell;
+ }
+ }
+
+ setSiteYellsView = (siteYellsView: RefObject) => {
+ this.siteYellsView = siteYellsView;
+ };
+
+ putSiteYell(siteYellItem: SiteYellItem, isGetSiteYell: boolean) {
+ if (isGetSiteYell) {
+ this.siteYellItems.unshift(siteYellItem);
+ } else {
+ this.siteYellItems.push(siteYellItem);
+ }
+ }
+
+ siteYellsViewMove() {
+ setTimeout(() => {
+ if (this.siteYellsView) {
+ const { current } = this.siteYellsView;
+ if (current) {
+ current.scrollTop = current.scrollHeight;
+ }
+ }
+ }, 0);
+ }
+
+ setLastPendingSiteYell = (siteYellItem: SiteYellItem) => {
+ this.lastPendingSiteYell = siteYellItem;
+ this.isPendingSiteYellOpened = true;
+ };
+
+ setNew = (isNew: boolean) => {
+ this.isNew = isNew;
+ };
+
+ setSiteNotify = (siteNotify: string) => {
+ this.siteNotify = siteNotify;
+ };
+
+ setPendingSiteYellOpened = (isPendingSiteYellOpened: boolean) => {
+ this.isPendingSiteYellOpened = isPendingSiteYellOpened;
+ };
+
+ setAvatarsViewOpened = (isAvatarsViewOpened: boolean) => {
+ this.isAvatarsViewOpened = isAvatarsViewOpened;
+ };
+
+ doCallSiteAvatar = (
+ siteName: string,
+ siteHand: string,
+ situationValue: number,
+ avatars: Avatar[],
+ ) => {
+ this.siteName = siteName;
+ this.siteHand = siteHand;
+ this.situationValue = situationValue;
+ this.avatars = avatars;
+ };
+
+ setSiteYellsViewLowest = (isSiteYellsViewLowest: boolean) => {
+ this.isSiteYellsViewLowest = isSiteYellsViewLowest;
+ };
+
+ wipeSiteYell = (siteYellID: number) => {
+ const i = this.siteYellItems.findIndex(
+ (siteYellItem) => siteYellItem.siteYellID === siteYellID,
+ );
+ const siteYellItem = this.siteYellItems[i];
+ this.siteYellItems.splice(i, 1, {
+ siteYellID,
+ avatarID: siteYellItem.avatarID,
+ avatarName: siteYellItem.avatarName,
+ siteYellVariety: "@Wiped",
+ date: siteYellItem.date,
+ });
+ };
+
+ setTextInput = (textInput: string) => {
+ this.textInput = textInput;
+ };
+}
+
+const getSiteYell = ({
avatarID,
avatarName,
siteYell,
@@ -33,7 +156,7 @@
siteYell: string;
date: number;
siteYellID: number;
-}): SiteYell | null => {
+}): SiteYellItem => {
const dateText = new Date(date).toLocaleTimeString();
switch (avatarName) {
case "@Enter":
@@ -114,19 +237,16 @@
}
};
-export default function setSiteStore() {
+export default function setSiteStore(
+ t: ReturnType>,
+) {
return {
- titleComponent: undefined as RefObject | undefined,
- siteYellsView: undefined as RefObject | undefined,
- avatars: [] as Avatar[],
- siteYells: [] as SiteYell[],
- isLogInOpened: false,
+ titleView: undefined as RefObject | undefined,
isSiteWindowOpened: false,
isSiteCipherWindowOpened: false,
isNewSiteWindowOpened: false,
isConfigureOpened: false,
targetSiteID: "",
- siteNotify: "",
saveTraffic:
typeof window === "object" &&
window.localStorage.getItem("saveTraffic") === "true",
@@ -139,28 +259,18 @@
autoEnterPlatform:
typeof window === "object" &&
window.localStorage.getItem("autoEnterPlatform") !== "false",
- isEditable: true,
- input: "",
siteViews: [] as SiteView[],
siteAvatarID: "",
siteAvatarName: "",
isLoggedIn: false,
- isSiteYellsViewLowest: true,
isVisible: false,
isLoading: true,
- lastPendingSiteYell: undefined as SiteYell | undefined,
- isPendingSiteYellOpened: false,
- isAvatarsOpened: false,
- setComponents(
- titleComponent: RefObject,
- siteYellsView: RefObject,
- ) {
- this.titleComponent = titleComponent;
- this.siteYellsView = siteYellsView;
+ setTitleView(titleView: RefObject) {
+ this.titleView = titleView;
},
- setEventHandler(t: ReturnType>) {
+ setEventHandler() {
const autoEnter = () => {
wsAPI.send({
eventID: EventPB.Event.EventID.ENTER_SITE,
@@ -222,8 +332,8 @@
if (siteView?.wasNotify === false) {
new Notification("Qwilight", {
body: toNotify,
- icon: `${wwwAPIPath}/drawing?avatarID=${encodeURIComponent(
- getDefaultAvatarID(avatarID),
+ icon: `${wwwAPIPath}/drawing?avatarID=${getDefaultAvatarID(
+ avatarID,
)}&drawingVariety=0`,
});
siteView.wasNotify = true;
@@ -256,7 +366,6 @@
// EventPB.Event.EventID.LOG_IN
case undefined:
if (text) {
- this.setLogInOpened(false);
const { totem, avatarID, avatarName } = JSON.parse(text);
if (totem !== window.sessionStorage.getItem("totem")) {
toast.success(t("loggedInText", { avatarName }));
@@ -291,148 +400,139 @@
siteYellID,
date,
} = JSON.parse(text);
- const siteYellItem = getSiteYellItem({
+ const siteYellItem = getSiteYell({
avatarID,
avatarName,
siteYell,
date,
siteYellID,
});
- if (siteYellItem) {
- this.putSiteYell(siteID, siteYellItem, false);
+ const siteView = this.getSiteView(siteID);
+ if (siteView) {
+ siteView.putSiteYell(siteYellItem, false);
if (this.targetSiteID === siteID) {
- this.putTargetSiteYell(siteYellItem, false);
if (
avatarID === this.siteAvatarID ||
- this.isSiteYellsViewLowest
+ siteView.isSiteYellsViewLowest
) {
- this.siteYellsViewMove();
+ siteView.siteYellsViewMove();
} else {
- runInAction(() => {
- this.lastPendingSiteYell = siteYellItem;
- });
- this.setPendingSiteYellOpened(true);
+ siteView.setLastPendingSiteYell(siteYellItem);
}
} else {
- this.setModifiedSiteViews(siteID, (siteView) => {
- siteView.isNew = true;
- });
+ siteView.setNew(true);
}
- }
- const ltDate = new Date(Number(date)).toLocaleTimeString();
- let toNotify = "";
- switch (avatarName) {
- case "@Notify":
- if (this.targetSiteID === siteID) {
- this.siteNotify = siteYell;
- } else {
- const siteView = this.getSiteView(siteID);
- if (siteView) {
- siteView.siteNotify = siteYell;
- }
+ const ltDate = new Date(Number(date)).toLocaleTimeString();
+ let toNotify = "";
+ switch (avatarName) {
+ case "@Notify":
+ siteView.setSiteNotify(siteYell);
+ toNotify = `${t("siteYellTaehui")} (${ltDate}) ${siteYell}`;
+ break;
+ case "@Comment": {
+ const {
+ avatarName,
+ artist,
+ title,
+ genre,
+ levelText,
+ stand,
+ } = JSON.parse(siteYell);
+ toNotify = `${avatarName} (${ltDate}) ${levelText} ${artist} - ${title} ${getGenreText(
+ genre,
+ )} ${t("textStand", { value: formatText(stand) })}`;
+ break;
}
- toNotify = `${t("siteYellTaehui")} (${ltDate}) ${siteYell}`;
- break;
- case "@Comment": {
- const { avatarName, artist, title, genre, levelText, stand } =
- JSON.parse(siteYell);
- toNotify = `${avatarName} (${ltDate}) ${levelText} ${artist} - ${title} ${getGenreText(
- genre,
- )} ${t("textStand", { value: formatText(stand) })}`;
- break;
+ case "@Ability": {
+ toNotify = getAbilityUpText(
+ t,
+ JSON.parse(siteYell) as AbilitySiteYell,
+ );
+ break;
+ }
+ case "@Level": {
+ const { title } = JSON.parse(siteYell);
+ toNotify = t("wwwLevelClearText", { title });
+ break;
+ }
+ case "@Enter": {
+ toNotify = `${siteYell} ${ltDate} ${t("siteYellEnter")}`;
+ break;
+ }
+ case "@Quit": {
+ toNotify = `${siteYell} ${ltDate} ${t("siteYellQuit")}`;
+ break;
+ }
+ case "@Invite": {
+ const { avatarName, siteName } = JSON.parse(siteYell);
+ toNotify = `${avatarName} (${ltDate}) ${t(
+ "siteYellInvite",
+ {
+ siteName,
+ },
+ )}`;
+ break;
+ }
+ case "@TV": {
+ const { title, text } = JSON.parse(siteYell);
+ toNotify = `${text} (${ltDate}) ${t("siteYellTV", {
+ title,
+ })}`;
+ break;
+ }
+ case "@Wiped":
+ toNotify = `${avatarName} (${ltDate}) ${t("wipedSiteYell")}`;
+ break;
+ case "":
+ toNotify = siteYell;
+ break;
+ case null:
+ toNotify = `${avatarName} (${ltDate}) ${siteYell}`;
+ break;
}
- case "@Ability": {
- toNotify = getAbilityUpText(
- t,
- JSON.parse(siteYell) as AbilitySiteYell,
- );
- break;
+ if (toNotify) {
+ doNotify(avatarID, toNotify, siteID);
}
- case "@Level": {
- const { title } = JSON.parse(siteYell);
- toNotify = t("wwwLevelClearText", { title });
- break;
- }
- case "@Enter": {
- toNotify = `${siteYell} ${ltDate} ${t("siteYellEnter")}`;
- break;
- }
- case "@Quit": {
- toNotify = `${siteYell} ${ltDate} ${t("siteYellQuit")}`;
- break;
- }
- case "@Invite": {
- const { avatarName, siteName } = JSON.parse(siteYell);
- toNotify = `${avatarName} (${ltDate}) ${t("siteYellInvite", {
- siteName,
- })}`;
- break;
- }
- case "@TV": {
- const { title, text } = JSON.parse(siteYell);
- toNotify = `${text} (${ltDate}) ${t("siteYellTV", {
- title,
- })}`;
- break;
- }
- case "@Wiped":
- toNotify = `${avatarName} (${ltDate}) ${t("wipedSiteYell")}`;
- break;
- case "":
- toNotify = siteYell;
- break;
- case null:
- toNotify = `${avatarName} (${ltDate}) ${siteYell}`;
- break;
- }
- if (toNotify) {
- doNotify(avatarID, toNotify, siteID);
}
}
break;
case EventPB.Event.EventID.MODIFY_SITE_YELL:
if (text) {
const { siteID, siteYell, siteYellID } = JSON.parse(text);
- this.doModifySiteYell(siteID, siteYell, siteYellID);
- if (this.targetSiteID === siteID) {
- this.doModifyTargetSiteYell(siteYell, siteYellID);
- }
+ this.getSiteView(siteID)?.setSiteYell(siteYellID, siteYell);
}
break;
case EventPB.Event.EventID.WIPE_SITE_YELL:
if (text) {
const { siteID, siteYellID } = JSON.parse(text);
- this.wipeSiteYell(siteID, siteYellID);
- if (this.targetSiteID === siteID) {
- this.wipeTargetSiteYell(siteYellID);
- }
+ this.getSiteView(siteID)?.wipeSiteYell(siteYellID);
}
break;
case EventPB.Event.EventID.GET_SITE_YELLS:
if (text) {
- if (this.siteYellsView) {
- const { current } = this.siteYellsView;
- if (current) {
- const lastPosition1BeforeCalled =
- current.scrollHeight - current.clientHeight;
- const { siteID, data } = JSON.parse(text);
+ const { siteID, data } = JSON.parse(text);
+ const siteView = this.getSiteView(siteID);
+ if (siteView) {
+ if (siteView.siteYellsView) {
+ const { current } = siteView.siteYellsView;
+ if (current) {
+ const lastPosition1BeforeCalled =
+ current.scrollHeight - current.clientHeight;
- data
- .reverse()
- .map(getSiteYellItem)
- .forEach((siteYellItem: SiteYell) => {
- this.putSiteYell(siteID, siteYellItem, true);
- if (this.targetSiteID === siteID) {
- this.putTargetSiteYell(siteYellItem, true);
- }
- });
+ data
+ .reverse()
+ .map(getSiteYell)
+ .forEach((siteYellItem: SiteYellItem) => {
+ siteView.putSiteYell(siteYellItem, true);
+ });
- setTimeout(() => {
- current.scrollTop =
- current.scrollHeight -
- current.clientHeight -
- lastPosition1BeforeCalled;
- }, 0);
+ setTimeout(() => {
+ current.scrollTop =
+ current.scrollHeight -
+ current.clientHeight -
+ lastPosition1BeforeCalled;
+ }, 0);
+ }
}
}
}
@@ -441,21 +541,22 @@
if (text) {
const { siteID, siteName, situationValue, data, siteHand } =
JSON.parse(text);
- const avatars = data.map(
- ({
- avatarID,
- avatarName,
- avatarConfigure,
- isValve,
- isAudioInput,
- }: {
- avatarID: string;
- avatarName: string;
- avatarConfigure: number;
- isValve: boolean;
- isAudioInput: boolean;
- }) => {
- return {
+ const siteView = this.getSiteView(siteID);
+ if (siteView) {
+ const avatars = data.map(
+ ({
+ avatarID,
+ avatarName,
+ avatarConfigure,
+ isValve,
+ isAudioInput,
+ }: {
+ avatarID: string;
+ avatarName: string;
+ avatarConfigure: number;
+ isValve: boolean;
+ isAudioInput: boolean;
+ }) => ({
avatarID,
avatarName,
avatarConfigure,
@@ -463,17 +564,14 @@
isMe: this.siteAvatarID === avatarID,
isValve,
isAudioInput,
- };
- },
- );
- this.setModifiedSiteViews(siteID, (siteView) => {
- siteView.siteName = getSiteName(siteName, t);
- siteView.avatars = avatars;
- siteView.siteHand = siteHand;
- siteView.situationValue = situationValue;
- });
- if (siteID === this.targetSiteID) {
- this.setAvatars(avatars);
+ }),
+ );
+ siteView.doCallSiteAvatar(
+ getSiteName(siteName, t),
+ siteHand,
+ situationValue,
+ avatars,
+ );
}
}
break;
@@ -481,28 +579,20 @@
if (text) {
const { siteID, siteNotify, isEditable, isNetMode, data } =
JSON.parse(text);
- this.putSiteView({
+ const siteView = new SiteView(
siteID,
- isEditable,
- isNew: false,
- wasNotify: false,
siteNotify,
- siteName: "",
- siteHand: "",
- situationValue: 0,
+ isEditable,
isNetMode,
- avatars: [],
- siteYells: data.map(getSiteYellItem),
- });
- this.onSiteIDModified(siteID);
+ data.map(getSiteYell),
+ );
+ this.putSiteView(siteView);
+ this.setTargetSiteID(siteID);
}
break;
case EventPB.Event.EventID.QUIT_SITE:
if (text) {
- this.quitSiteView(text);
- this.onSiteIDModified(
- this.siteViews[this.siteViews.length - 1]?.siteID,
- );
+ this.wipeSiteView(text);
}
break;
case EventPB.Event.EventID.WARNING:
@@ -516,7 +606,7 @@
break;
case EventPB.Event.EventID.POST_FILE:
if (text) {
- this.setInput(text);
+ this.getSiteView(this.targetSiteID)?.setTextInput(text);
}
break;
}
@@ -527,16 +617,11 @@
wsAPI.setEventCloseHandler(() => {
this.setSiteAvatar("", "");
this.setLoggedIn(false);
- this.onSiteIDModified("");
this.wipeSiteViews();
this.setLoading(true);
});
},
- setPendingSiteYellOpened(isPendingSiteYellOpened: boolean) {
- this.isPendingSiteYellOpened = isPendingSiteYellOpened;
- },
-
setLoading(isLoading: boolean) {
this.isLoading = isLoading;
},
@@ -547,88 +632,6 @@
wsAPI.setAvatarID(this.siteAvatarID);
},
- putSiteYell(siteID: string, siteYell: SiteYell, isGetSiteYell: boolean) {
- const siteView = this.getSiteView(siteID);
- if (isGetSiteYell) {
- siteView?.siteYells?.unshift(siteYell);
- } else {
- siteView?.siteYells?.push(siteYell);
- }
- },
-
- putTargetSiteYell(siteYell: SiteYell, isGetSiteYell: boolean) {
- if (isGetSiteYell) {
- this.siteYells.unshift(siteYell);
- } else {
- this.siteYells.push(siteYell);
- }
- },
-
- doModifySiteYell(siteID: string, siteYell: string, siteYellID: number) {
- const targetSiteYell = this.getSiteView(siteID)?.siteYells?.find(
- (siteYell) => siteYell.siteYellID === siteYellID,
- );
- if (targetSiteYell) {
- targetSiteYell.siteYell = siteYell;
- }
- },
-
- doModifyTargetSiteYell(siteYell: string, siteYellID: number) {
- const targetSiteYell = this.siteYells?.find(
- (siteYell) => siteYell.siteYellID === siteYellID,
- );
- if (targetSiteYell) {
- targetSiteYell.siteYell = siteYell;
- }
- },
-
- wipeSiteYell(siteID: string, siteYellID: number) {
- const siteYells = this.getSiteView(siteID)?.siteYells;
- if (siteYells) {
- const i = siteYells.findIndex(
- (siteYell) => siteYell.siteYellID === siteYellID,
- );
- const siteYell = siteYells[i];
- siteYells.splice(i, 1, {
- siteYellID,
- avatarID: siteYell.avatarID,
- avatarName: siteYell.avatarName,
- siteYellVariety: "@Wiped",
- date: siteYell.date,
- });
- }
- },
-
- wipeTargetSiteYell(siteYellID: number) {
- const i = this.siteYells.findIndex(
- (siteYell) => siteYell.siteYellID === siteYellID,
- );
- const siteYell = this.siteYells[i];
- this.siteYells.splice(i, 1, {
- siteYellID,
- avatarID: siteYell.avatarID,
- avatarName: siteYell.avatarName,
- siteYellVariety: "@Wiped",
- date: siteYell.date,
- });
- },
-
- setModifiedSiteViews(
- targetSiteID: string,
- onModified: (siteView: SiteView) => void,
- ) {
- const tmpSiteView = this.siteViews.find(
- ({ siteID }) => targetSiteID === siteID,
- );
- if (tmpSiteView) {
- onModified(tmpSiteView);
- }
- },
-
- setInput(input: string) {
- this.input = input;
- },
-
setSaveTraffic(SaveTraffic: boolean) {
this.saveTraffic = SaveTraffic;
},
@@ -645,10 +648,6 @@
this.autoEnterPlatform = autoEnterPlatform;
},
- setLogInOpened(isLogInOpened: boolean) {
- this.isLogInOpened = isLogInOpened;
- },
-
setSiteWindowOpened(isSiteWindowOpened: boolean) {
this.isSiteWindowOpened = isSiteWindowOpened;
},
@@ -665,34 +664,15 @@
this.isConfigureOpened = isConfigureOpened;
},
- setSiteYellsViewLowest(isSiteYellsViewLowest: boolean) {
- this.isSiteYellsViewLowest = isSiteYellsViewLowest;
- },
-
getSiteView(targetSiteID: string) {
return this.siteViews.find(({ siteID }) => siteID === targetSiteID);
},
- onSiteIDModified(siteID: string) {
- this.targetSiteID = siteID;
- const siteView = this.getSiteView(siteID);
+ setTargetSiteID(targetSiteID: string) {
+ this.targetSiteID = targetSiteID;
+ const siteView = this.getSiteView(this.targetSiteID);
if (siteView) {
- if (this.isVisible) {
- siteView.wasNotify = false;
- }
- this.setModifiedSiteViews(siteID, (siteView) => {
- siteView.isNew = false;
- });
- this.isEditable = siteView.isEditable;
- this.siteNotify = siteView.siteNotify;
- this.avatars = [...siteView.avatars];
- this.siteYells = [...siteView.siteYells];
- this.siteYellsViewMove();
- } else {
- this.isEditable = false;
- this.siteNotify = "";
- this.avatars = [];
- this.siteYells = [];
+ siteView.setNew(false);
}
},
@@ -700,42 +680,25 @@
return (this.isVisible = document.visibilityState === "visible");
},
- siteYellsViewMove() {
- setTimeout(() => {
- if (this.siteYellsView) {
- const { current } = this.siteYellsView;
- if (current) {
- current.scrollTop = current.scrollHeight;
- }
- }
- }, 0);
- },
-
- setAvatarsOpened(isAvatarsOpened: boolean) {
- this.isAvatarsOpened = isAvatarsOpened;
- },
-
setLoggedIn(isLoggedIn: boolean) {
this.isLoggedIn = isLoggedIn;
},
- setAvatars(avatars: Avatar[]) {
- this.avatars = avatars;
- },
-
putSiteView(siteView: SiteView) {
this.siteViews.push(siteView);
},
- quitSiteView(siteID: string) {
+ wipeSiteView(targetSiteID: string) {
this.siteViews.splice(
- this.siteViews.findIndex((siteView) => siteView.siteID === siteID),
+ this.siteViews.findIndex(({ siteID }) => siteID === targetSiteID),
1,
);
+ this.targetSiteID = this.siteViews[this.siteViews.length - 1].siteID;
},
wipeSiteViews() {
this.siteViews = [];
+ this.targetSiteID = "";
},
};
}
diff --git "a/qwilight-fe/src/app/\133language\135/site/type/index.d.ts" "b/qwilight-fe/src/app/\133language\135/site/type/index.d.ts"
index ac2bda1..be9fb9f 100644
--- "a/qwilight-fe/src/app/\133language\135/site/type/index.d.ts"
+++ "b/qwilight-fe/src/app/\133language\135/site/type/index.d.ts"
@@ -10,7 +10,7 @@
isAudioInput: boolean;
};
-export type SiteYell = {
+export type SiteYellItem = {
avatarID?: string;
avatarName?: string;
siteYellVariety: ?string;
@@ -62,20 +62,6 @@
text: string;
};
-export type SiteView = {
- siteID: string;
- isEditable: boolean;
- isNew: boolean;
- wasNotify: boolean;
- siteNotify: string;
- siteName: string;
- isNetMode: boolean;
- avatars: Avatar[];
- siteHand: string;
- situationValue: number;
- siteYells: SiteYell[];
-};
-
export type Event = { eventID: number; text?: string; data?: ArrayBuffer[] };
export type EventHandler = (data: Event) => void;
diff --git a/qwilight-fe/src/app/globals.scss b/qwilight-fe/src/app/globals.scss
index f14bcd9..ec98da1 100644
--- a/qwilight-fe/src/app/globals.scss
+++ b/qwilight-fe/src/app/globals.scss
@@ -1,112 +1,19 @@
-@mixin default() {
- font-family: "Century Gothic", sans-serif;
- font-size: 0.75rem;
-}
-
-* {
- &.route {
- cursor: pointer;
- }
-}
-
-a {
- &.nav-link {
- @include default();
- color: white;
-
- &:hover {
- @include default();
- color: white;
- }
- }
-}
+@import "~bootstrap/scss/bootstrap";
+@import "~taehui-ts/globals";
body {
background: url("../assets/dark-honeycomb.png");
}
-button {
- &.btn {
- @include default();
- }
-
- &.page-link {
- @include default();
- }
-
- &.dropdown-item {
- @include default();
- }
-}
-
-input[type="button"],
-input[type="password"],
-input[type="submit"],
-input[type="search"],
-input[type="text"] {
- @include default();
-}
-
-li {
- &.page-item {
- @include default();
- }
-
- &.list-group-item {
- background-color: rgba(0, 0, 0, 0.125);
- border: none;
- }
-}
-
-div {
- &.offcanvas-body {
- background-color: black;
- }
-
- &.target {
- border: thin solid;
- border-image: linear-gradient(43deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
- }
-}
-
span {
- & {
- @include default();
- }
-
- :not(.page-link, .contexify_itemContent, .alert) > & {
- color: white;
- }
-
- ul.list-group > &.badge {
- font-weight: normal;
- border-radius: 0;
- }
-
- div.modal-content & {
- color: black;
+ &.artist {
+ color: lightgray;
}
&.date {
color: darkgray;
}
- &.stand {
- color: white;
- }
-
- &.point {
- color: white;
- }
-
- &.band {
- color: white;
- }
-
- &.title {
- color: white;
- }
-
&.genre {
color: darkgray;
}
@@ -115,10 +22,6 @@
color: dodgerblue;
}
- &.artist {
- color: lightgray;
- }
-
&.level0 {
color: darkgray;
}
@@ -149,28 +52,8 @@
-webkit-text-fill-color: transparent;
}
- &.highestJudgment {
- color: cyan;
- }
-
- &.higherJudgment {
- color: deepskyblue;
- }
-
- &.highJudgment {
- color: lightgreen;
- }
-
- &.lowJudgment {
- color: yellow;
- }
-
- &.lowerJudgment {
- color: mediumpurple;
- }
-
- &.lowestJudgment {
- color: red;
+ &.quit {
+ font-size: xx-large;
}
&.S\+ {
@@ -200,16 +83,4 @@
&.D {
color: red;
}
-
- &.audioMultiplier {
- color: white;
- }
-
- &.avatarPlace {
- font-size: 1.5rem;
- }
-
- &.avatarIntro {
- white-space: pre-line;
- }
}
diff --git a/qwilight-fe/src/assets/language/en.json b/qwilight-fe/src/assets/language/en.json
index 46d305b..78d9219 100644
--- a/qwilight-fe/src/assets/language/en.json
+++ b/qwilight-fe/src/assets/language/en.json
@@ -1,21 +1,24 @@
{
"abilityFittedText": "{stand} Points (+ {ability} Points)",
- "audioMultiplier": "Music speed",
"autoLogIn": "Automatic login",
- "avatarAbilitiesText": "Rating TOP 50",
+ "avatar": "Online Profile",
+ "avatarAbilityTitle": "Rating TOP 50",
+ "avatarCipher": "Password",
"avatarCountText": "{avatarCount} people",
"avatarDate": "Last Connection Date: {date}",
"avatarDateText": "Activity Trends",
- "avatarFavoritesText": "Most plays TOP 50",
+ "avatarFavoritesTitle": "Most plays TOP 50",
+ "avatarID": "ID",
"avatarIntroText": "Introduce yourself",
- "avatarLastsText": "Last plays TOP 50",
+ "avatarLastsTitle": "Last plays TOP 50",
"avatarQuitStatusText": "Rank",
"bannedNoteFile": "Illegal BMS and BMSON note files are filtered by themselves by checking the number of key notes.
If you find illegal BMS/BMSON note file, please let us know via taehui@taehui.ddns.net and delete it.",
"commentSiteName": "Performance notification room",
"defaultSiteName": "General chat room",
- "enterSite": "Enter",
+ "etc": "Statistics",
"etcAutoMode": "Turntable",
"etcAvatar": "Activity User Trends",
+ "etcEnroll": "New Subscription Trends",
"etcFaintNoteMode": "Note time",
"etcFavorites": "Favorite songs TOP 10",
"etcFavoritesAt": "Favorite songs TOP 10 for this month",
@@ -28,44 +31,41 @@
"etcNoteMobilityMode": "Even the disorder of notes",
"etcNoteModifyMode": "Modifying Notes",
"etcNoteSaltMode": "Place notes",
- "etcSignUp": "New Subscription Trends",
"etcTotal": "Play trend",
"etcTotalEdges": "Frames TOP 10",
"etcTotalNoteFiles": "Popular Songs TOP 10 for this month",
"etcTotalTitles": "Titles TOP 10",
"exileAvatar": "Kick",
- "topCountText": "Record count: {topCount}",
- "hallAbilityText": "Rating",
- "hallAtText": "Month",
+ "fit0": "Sequence of records",
+ "fit1": "Number of plays",
+ "fit2": "Update order",
+ "fit3": "Subject order",
+ "fit4": "Artist order",
+ "fit5": "Genre order",
+ "fit6": "Difficulty order",
+ "hall": "Hall of Fame",
+ "hallAbilityTitle": "Rating",
+ "hallAtTitle": "Month",
"hallBand": "Combo",
- "hallHighest": "Record",
- "hallLevelText": "Level",
+ "hallLevelTitle": "Level",
"hallStand": "Score",
+ "hallTop": "Record",
"hallTotal": "Play",
- "hallTotalText": "All",
- "inputNewSite": "Create Chat Room",
+ "hallTotalTitle": "All",
+ "loggedInText": "Welcome, {avatarName}.",
+ "logIn": "Login",
"notAvatarViewFault": "Non-member profiles are not available.",
+ "note": "Online Ranking",
"notLoggedInText": "Thank you, {avatarName}.",
- "notLogIn": "Sign out",
- "onAvatars": "User list.",
- "onClose": "Clear",
- "onConfigure": "Preferences",
- "onSiteWindow": "Chat Room List",
- "onWant": "Search",
"onWantMe": "View My Profile",
"platformSiteName": "Discord Chat Room",
"point": "Accuracy",
- "postFile": "Upload File",
- "quitSite": "Leaving the room",
"save": "Save",
"setSiteHand": "Delegation of the Director",
"setSiteName": "Modify Room Name",
"setSiteNameText": "Please enter a name to modify",
- "loggedInText": "Welcome, {avatarName}.",
- "logIn": "Login",
- "logInCipher": "Password",
- "logInID": "ID",
"silentSiteNew": "One-on-one conversation",
+ "site": "Online Chat",
"siteAudio": "Alarm sound.",
"siteAutoEnterDefault": "Automatically enter the regular chat room.",
"siteAutoEnterNotify": "Automatically enter the notification room.",
@@ -73,7 +73,6 @@
"siteCipher": "Chat Room Password",
"siteName": "Chat Room Name",
"siteSaveTraffic": "Data saving mode.",
- "siteWindowNew": "Create Chat Room",
"siteYellEnter": "Entered",
"siteYellInvite": "Click to play multiple games with me on {siteName}.",
"siteYellNewNetSite": "Create a new game room",
@@ -81,35 +80,24 @@
"siteYellQuit": "Exited",
"siteYellTaehui": "Developer",
"siteYellTV": "Click to watch Qwilight broadcast {title}",
+ "src0": "As a title",
+ "src1": "As a nickname",
+ "src2": "As an artist",
+ "src3": "As a genre",
"stand": "Score",
"textBand": "{value} combo",
"textCount": "{value}",
"textHandled": "{value} times",
"textStand": "{value} point",
- "toAvatar": "Online Profile",
- "toEtc": "Statistics",
- "toFit0": "Sequence of records",
- "toFit1": "Number of plays",
- "toFit2": "Update order",
- "toFit3": "Subject order",
- "toFit4": "Artist order",
- "toFit5": "Genre order",
- "toFit6": "Difficulty order",
- "toHall": "Hall of Fame",
"toilNoteFile": "Illegal BMS, reported as BMSON note file",
"toilNoteFileText": "Please write down the reason for the report",
- "toNote": "Online Ranking",
"toNotifySiteName": "Notification room",
- "toSite": "Online Chat",
- "toSrc0": "As a title",
- "toSrc1": "As a nickname",
- "toSrc2": "As an artist",
- "toSrc3": "As a genre",
+ "topCountText": "Record count: {topCount}",
"totalCountText": "Number of plays: {totalCount}.",
"totalLengthText": "Playtime: {h} hours {m} minutes {s} seconds",
"viewAvatarView": "View Profiles",
"wantAvatarAssist": "Enter nickname to search",
"wipedSiteYell": "Deleted message.",
- "wwwLevel": "Challenges",
- "wwwLevelClearText": "Challenge {title} cleared! Congratulations."
+ "wwwLevelClearText": "Challenge {title} cleared! Congratulations.",
+ "wwwLevels": "Challenges"
}
diff --git a/qwilight-fe/src/assets/language/ko.json b/qwilight-fe/src/assets/language/ko.json
index eb3f838..c9551bd 100644
--- a/qwilight-fe/src/assets/language/ko.json
+++ b/qwilight-fe/src/assets/language/ko.json
@@ -1,21 +1,24 @@
{
"abilityFittedText": "{stand} 점 (+ {ability} Point)",
- "audioMultiplier": "음악 속도",
"autoLogIn": "자동 로그인",
- "avatarAbilitiesText": "성과 TOP 50",
+ "avatar": "온라인 프로필",
+ "avatarAbilityTitle": "성과 TOP 50",
+ "avatarCipher": "비밀번호",
"avatarCountText": "{avatarCount} 명",
"avatarDate": "마지막 접속일: {date}",
"avatarDateText": "활동 추세",
- "avatarFavoritesText": "가장 많이 플레이 TOP 50",
+ "avatarFavoritesTitle": "가장 많이 플레이 TOP 50",
+ "avatarID": "아이디",
"avatarIntroText": "자기소개",
- "avatarLastsText": "마지막 플레이 TOP 50",
+ "avatarLastsTitle": "마지막 플레이 TOP 50",
"avatarQuitStatusText": "랭크",
"bannedNoteFile": "불법 BMS, BMSON 노트 파일은 키음 개수를 확인하여 자체적으로 걸러집니다.
만약 불법 BMS/BMSON 노트 파일을 발견하시면 taehui@taehui.ddns.net로 알려주시면 삭제합니다.",
"commentSiteName": "성과 알림방",
"defaultSiteName": "일반 대화방",
- "enterSite": "입장하기",
+ "etc": "통계",
"etcAutoMode": "턴 테이블",
"etcAvatar": "활동 사용자 추세",
+ "etcEnroll": "신규 가입 추세",
"etcFaintNoteMode": "노트 시각",
"etcFavorites": "선호곡 TOP 10",
"etcFavoritesAt": "이번 달 선호곡 TOP 10",
@@ -28,44 +31,41 @@
"etcNoteMobilityMode": "노트 무질서도",
"etcNoteModifyMode": "노트 수정",
"etcNoteSaltMode": "노트 배치",
- "etcSignUp": "신규 가입 추세",
"etcTotal": "플레이 추세",
"etcTotalEdges": "프레임 TOP 10",
"etcTotalNoteFiles": "이번 달 인기곡 TOP 10",
"etcTotalTitles": "호칭 TOP 10",
"exileAvatar": "추방",
- "topCountText": "기록 개수: {topCount} 개",
- "hallAbilityText": "레이팅",
- "hallAtText": "이번 달",
+ "fit0": "기록 개수순",
+ "fit1": "플레이 횟수순",
+ "fit2": "업데이트순",
+ "fit3": "제목순",
+ "fit4": "아티스트순",
+ "fit5": "장르순",
+ "fit6": "난이도순",
+ "hall": "명예의 전당",
+ "hallAbilityTitle": "레이팅",
+ "hallAtTitle": "이번 달",
"hallBand": "콤보",
- "hallHighest": "기록",
- "hallLevelText": "레벨",
+ "hallLevelTitle": "레벨",
"hallStand": "점수",
+ "hallTop": "기록",
"hallTotal": "플레이",
- "hallTotalText": "전체",
- "inputNewSite": "대화방 만들기",
+ "hallTotalTitle": "전체",
+ "loggedInText": "{avatarName}님 환영합니다.",
+ "logIn": "로그인",
"notAvatarViewFault": "비회원의 프로필은 제공되지 않습니다.",
+ "note": "온라인 랭킹",
"notLoggedInText": "{avatarName}님 감사합니다.",
- "notLogIn": "로그아웃",
- "onAvatars": "사용자 목록",
- "onClose": "지우기",
- "onConfigure": "환경 설정",
- "onSiteWindow": "대화방 목록",
- "onWant": "검색",
"onWantMe": "내 프로필 보기",
"platformSiteName": "디스코드 대화방",
"point": "정확도",
- "postFile": "파일 업로드",
- "quitSite": "방 나가기",
"save": "저장하기",
"setSiteHand": "방장 위임",
"setSiteName": "방 이름 수정",
"setSiteNameText": "수정할 이름을 입력하세요",
- "loggedInText": "{avatarName}님 환영합니다.",
- "logIn": "로그인",
- "logInCipher": "비밀번호",
- "logInID": "아이디",
"silentSiteNew": "1대1 대화",
+ "site": "온라인 대화",
"siteAudio": "알림 사운드",
"siteAutoEnterDefault": "일반 대화방 자동 입장",
"siteAutoEnterNotify": "알림방 자동 입장",
@@ -73,7 +73,6 @@
"siteCipher": "대화방 비밀번호",
"siteName": "대화방 이름",
"siteSaveTraffic": "데이터 절약 모드",
- "siteWindowNew": "대화방 만들기",
"siteYellEnter": "입장함",
"siteYellInvite": "저랑 같이 {siteName} 에서 멀티 플레이 하려면 클릭하세요",
"siteYellNewNetSite": "새 게임방을 만듦",
@@ -81,35 +80,24 @@
"siteYellQuit": "퇴장함",
"siteYellTaehui": "개발자",
"siteYellTV": "Qwilight 방송 {title}을 보려면 클릭하세요",
+ "src0": "제목으로",
+ "src1": "닉네임으로",
+ "src2": "아티스트로",
+ "src3": "장르로",
"stand": "점수",
"textBand": "{value} 콤보",
"textCount": "{value} 개",
"textHandled": "{value} 회",
"textStand": "{value} 점",
- "toAvatar": "온라인 프로필",
- "toEtc": "통계",
- "toFit0": "기록 개수순",
- "toFit1": "플레이 횟수순",
- "toFit2": "업데이트순",
- "toFit3": "제목순",
- "toFit4": "아티스트순",
- "toFit5": "장르순",
- "toFit6": "난이도순",
- "toHall": "명예의 전당",
"toilNoteFile": "불법 BMS, BMSON 노트 파일로 신고",
"toilNoteFileText": "신고 사유를 적어주세요",
- "toNote": "온라인 랭킹",
"toNotifySiteName": "알림방",
- "toSite": "온라인 대화",
- "toSrc0": "제목으로",
- "toSrc1": "닉네임으로",
- "toSrc2": "아티스트로",
- "toSrc3": "장르로",
+ "topCountText": "기록 개수: {topCount} 개",
"totalCountText": "플레이 횟수: {totalCount} 회",
"totalLengthText": "플레이 시간: {h} 시간 {m} 분 {s} 초",
"viewAvatarView": "프로필 보기",
"wantAvatarAssist": "검색할 닉네임을 입력하세요",
"wipedSiteYell": "삭제된 메시지입니다.",
- "wwwLevel": "도전 과제",
- "wwwLevelClearText": "도전 과제 {title} 클리어! 축하합니다."
+ "wwwLevelClearText": "도전 과제 {title} 클리어! 축하합니다.",
+ "wwwLevels": "도전 과제"
}
diff --git a/qwilight-fe/src/assets/w8.png b/qwilight-fe/src/assets/w8.png
new file mode 100644
index 0000000..e0f4e44
--- /dev/null
+++ b/qwilight-fe/src/assets/w8.png
Binary files differ
diff --git a/qwilight-fe/src/components/AvatarDrawing.tsx b/qwilight-fe/src/components/AvatarDrawing.tsx
index 4dc007f..fe40813 100644
--- a/qwilight-fe/src/components/AvatarDrawing.tsx
+++ b/qwilight-fe/src/components/AvatarDrawing.tsx
@@ -25,8 +25,8 @@
>
+
+ ＃{avatarPlace > 0 ? avatarPlace : "？"}
+
+ {typeof avatarCount === "number" && <>／{avatarCount}}
+
+ );
+}
diff --git a/qwilight-fe/src/components/AvatarTitle.tsx b/qwilight-fe/src/components/AvatarTitle.tsx
index 9d86510..fd8d57a 100644
--- a/qwilight-fe/src/components/AvatarTitle.tsx
+++ b/qwilight-fe/src/components/AvatarTitle.tsx
@@ -1,15 +1,35 @@
import Title from "@/components/Title";
import useGetTitle from "@/query/useGetTitle";
+import { DetailedHTMLProps, HTMLAttributes } from "react";
-export default function AvatarTitle({ avatarID }: { avatarID: string }) {
+export default function AvatarTitle({
+ avatarID,
+ avatarName,
+ textID = false,
+ ...props
+}: {
+ avatarID?: string;
+ avatarName?: string;
+ textID?: boolean;
+} & DetailedHTMLProps, HTMLSpanElement>) {
const {
data: { title, titleColor },
isFetched: isTitleLoaded,
} = useGetTitle(avatarID);
- if (!isTitleLoaded) {
+ if (!avatarName) {
return null;
}
- return ;
+ return (
+
+ {isTitleLoaded && (
+ <>
+ {" "}
+
+ )}
+ {avatarName}
+ {textID && avatarID && ` (${avatarID})`}
+
+ );
}
diff --git a/qwilight-fe/src/components/AvatarView.tsx b/qwilight-fe/src/components/AvatarView.tsx
new file mode 100644
index 0000000..236f38f
--- /dev/null
+++ b/qwilight-fe/src/components/AvatarView.tsx
@@ -0,0 +1,17 @@
+import LoggedInAvatarView from "@/components/LoggedInAvatarView";
+import NotLoggedInAvatarView from "@/components/NotLoggedInAvatarView";
+
+import { useSiteStore } from "@/state/Stores";
+import { observer } from "mobx-react-lite";
+
+export default observer(() => {
+ const { isLoggedIn, siteAvatarID, siteAvatarName } = useSiteStore();
+
+ if (isLoggedIn) {
+ return (
+
+ );
+ }
+
+ return ;
+});
diff --git a/qwilight-fe/src/components/DefaultLoading.tsx b/qwilight-fe/src/components/DefaultLoading.tsx
new file mode 100644
index 0000000..5dc95a9
--- /dev/null
+++ b/qwilight-fe/src/components/DefaultLoading.tsx
@@ -0,0 +1,15 @@
+import HashLoader from "react-spinners/HashLoader";
+
+export default function DefaultLoading() {
+ return (
+
+ );
+}
diff --git a/qwilight-fe/src/components/HitPointsModeText.tsx b/qwilight-fe/src/components/HitPointsModeText.tsx
new file mode 100644
index 0000000..9f6b3dd
--- /dev/null
+++ b/qwilight-fe/src/components/HitPointsModeText.tsx
@@ -0,0 +1,31 @@
+import { useMemo } from "react";
+
+export default function HitPointsModeText({
+ hitPointsMode,
+ text,
+}: {
+ hitPointsMode: number;
+ text: string;
+}) {
+ return (
+ {
+ switch (hitPointsMode) {
+ case 0:
+ return "level2";
+ case 2:
+ return "level4";
+ case 3:
+ case 5:
+ return "level5";
+ case 4:
+ return "level1";
+ default:
+ return "stand";
+ }
+ }, [hitPointsMode])}
+ >
+ {text}
+
+ );
+}
diff --git a/qwilight-fe/src/components/JudgmentModeText.tsx b/qwilight-fe/src/components/JudgmentModeText.tsx
new file mode 100644
index 0000000..4ea99b4
--- /dev/null
+++ b/qwilight-fe/src/components/JudgmentModeText.tsx
@@ -0,0 +1,30 @@
+import { useMemo } from "react";
+
+export default function JudgmentModeText({
+ judgmentMode,
+ text,
+}: {
+ judgmentMode: number;
+ text: string;
+}) {
+ return (
+ {
+ switch (judgmentMode) {
+ case 0:
+ return "level2";
+ case 2:
+ return "level4";
+ case 3:
+ return "level1";
+ case 5:
+ return "level5";
+ default:
+ return "point";
+ }
+ }, [])}
+ >
+ {text}
+
+ );
+}
diff --git a/qwilight-fe/src/components/LevelText.tsx b/qwilight-fe/src/components/LevelText.tsx
new file mode 100644
index 0000000..1ec0fb7
--- /dev/null
+++ b/qwilight-fe/src/components/LevelText.tsx
@@ -0,0 +1,14 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+
+export default function LevelText({
+ level,
+ levelText,
+ ...props
+}: {
+ level: number;
+ levelText: string;
+} & DetailedHTMLProps, HTMLSpanElement>) {
+ return (
+ {levelText}
+ );
+}
diff --git a/qwilight-fe/src/components/LoadingLayer.tsx b/qwilight-fe/src/components/LoadingLayer.tsx
deleted file mode 100644
index 7740746..0000000
--- a/qwilight-fe/src/components/LoadingLayer.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import BarLoader from "react-spinners/BarLoader";
-import { Badge, Col, ListGroup, ListGroupItem, Row } from "reactstrap";
-
-export default function LoadingLayer({ text }: { text: string }) {
- return (
-
-
-
- {text}
-
-
-
-
-
-
- );
-}
diff --git a/qwilight-fe/src/components/LoggedInAvatarView.tsx b/qwilight-fe/src/components/LoggedInAvatarView.tsx
new file mode 100644
index 0000000..d589d07
--- /dev/null
+++ b/qwilight-fe/src/components/LoggedInAvatarView.tsx
@@ -0,0 +1,48 @@
+import wsAPI from "@/app/[language]/site/lib/wsAPI";
+import AvatarDrawing from "@/components/AvatarDrawing";
+import { useTranslations } from "next-intl";
+import { Back } from "react-bootstrap-icons";
+import Button from "react-bootstrap/Button";
+import Col from "react-bootstrap/Col";
+import Row from "react-bootstrap/Row";
+import Stack from "react-bootstrap/Stack";
+
+const EventPB = require("@/Event_pb");
+
+export default function LoggedInAvatarView({
+ avatarID,
+ avatarName,
+}: {
+ avatarID: string;
+ avatarName: string;
+}) {
+ const t = useTranslations();
+
+ return (
+
+
+
+
+
+
+
+ {avatarName} ({avatarID})
+
+
+
+
+
+ );
+}
diff --git a/qwilight-fe/src/components/NotLoggedInAvatarView.tsx b/qwilight-fe/src/components/NotLoggedInAvatarView.tsx
new file mode 100644
index 0000000..42a0549
--- /dev/null
+++ b/qwilight-fe/src/components/NotLoggedInAvatarView.tsx
@@ -0,0 +1,69 @@
+import wsAPI from "@/app/[language]/site/lib/wsAPI";
+import CryptoJS from "crypto-js";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import Button from "react-bootstrap/Button";
+import FormCheck from "react-bootstrap/FormCheck";
+import FormControl from "react-bootstrap/FormControl";
+import Stack from "react-bootstrap/Stack";
+
+const EventPB = require("@/Event_pb");
+
+export default function NotLoggedInAvatarView() {
+ const [avatarID, setAvatarID] = useState("");
+ const [avatarCipher, setAvatarCipher] = useState("");
+ const [autoLogIn, setAutoLogIn] = useState(false);
+
+ const t = useTranslations();
+
+ const onLogIn = async () => {
+ if (autoLogIn) {
+ window.localStorage.setItem("avatarID", avatarID);
+ window.localStorage.setItem(
+ "avatarCipher",
+ CryptoJS.AES.encrypt(
+ avatarCipher,
+ "591A6F91-2A27-4A88-88FA-0FEB7CB5FD94",
+ ).toString(),
+ );
+ }
+ window.localStorage.setItem("autoLogIn", autoLogIn.toString());
+ wsAPI.send({
+ eventID: EventPB.Event.EventID.LOG_IN,
+ text: JSON.stringify({ avatarID, avatarCipher }),
+ });
+ };
+
+ return (
+
+ {
+ setAvatarID(value);
+ }}
+ />
+ {
+ setAvatarCipher(value);
+ }}
+ />
+
+ {
+ setAutoLogIn(!autoLogIn);
+ }}
+ />
+
+ );
+}
diff --git a/qwilight-fe/src/components/QwilightView.tsx b/qwilight-fe/src/components/QwilightView.tsx
index d6f601b..df91b38 100644
--- a/qwilight-fe/src/components/QwilightView.tsx
+++ b/qwilight-fe/src/components/QwilightView.tsx
@@ -1,91 +1,107 @@
"use client";
-import LogInWindow from "@/app/[language]/site/components/LogInWindow";
-import usewsAPI from "@/app/[language]/site/lib/useWSAPI";
+import useWSAPI from "@/app/[language]/site/lib/useWSAPI";
import platform from "@/assets/discord-logo-white.png";
+import AvatarView from "@/components/AvatarView";
import withQueryClient from "@/hoc/withQueryClient";
import { useSiteStore } from "@/state/Stores";
+import { getDefaultAvatarID } from "@/utilities/Utility";
+import { wwwAPIPath } from "@/utilities/wwwAPI";
+import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import Image from "next/image";
import Link from "next/link";
-import { ReactNode, useEffect, useRef } from "react";
+import { ReactNode, useLayoutEffect, useRef } from "react";
+import Container from "react-bootstrap/Container";
+import Nav from "react-bootstrap/Nav";
+import Navbar from "react-bootstrap/Navbar";
+import NavbarBrand from "react-bootstrap/NavbarBrand";
+import NavbarCollapse from "react-bootstrap/NavbarCollapse";
+import NavbarToggle from "react-bootstrap/NavbarToggle";
+import NavDropdown from "react-bootstrap/NavDropdown";
+import NavLink from "react-bootstrap/NavLink";
import { ToastContainer } from "react-toastify";
-import { Button, Col, Container, Navbar, NavbarBrand, Row } from "reactstrap";
import { useIsPath } from "taehui-ts/fe-utilities";
-export default withQueryClient(({ children }: { children: ReactNode }) => {
- const t = useTranslations();
- const titleComponent = useRef(null);
- const siteYellsView = useRef(null);
- const { setComponents } = useSiteStore();
+export default withQueryClient(
+ observer(({ children }: { children: ReactNode }) => {
+ const t = useTranslations();
+ const titleView = useRef(null);
+ const { setTitleView: setTitleView, siteAvatarID } = useSiteStore();
- usewsAPI();
+ useWSAPI();
- const isPath = useIsPath();
+ const isPath = useIsPath();
- const getColor = (route: string) => (isPath(route) ? "primary" : "secondary");
+ useLayoutEffect(() => {
+ setTitleView(titleView);
+ }, [setTitleView]);
- const onPlatform = () => {
- window.open("https://taehui.ddns.net/qwilight/platform");
- };
-
- useEffect(() => {
- setComponents(titleComponent, siteYellsView);
- }, [setComponents]);
-
- return (
- <>
-
-
-
+ return (
+ <>
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {children}
-
+
+
+ }
+ >
+
+
+
+
+
+
+
+
+ {children}
-
-
-
- );
-});
+
+
+ );
+ }),
+);
diff --git a/qwilight-fe/src/query/useGetTitle.ts b/qwilight-fe/src/query/useGetTitle.ts
index 4b1df49..82cbd01 100644
--- a/qwilight-fe/src/query/useGetTitle.ts
+++ b/qwilight-fe/src/query/useGetTitle.ts
@@ -3,10 +3,11 @@
import { useQuery } from "@tanstack/react-query";
import { useLanguage } from "taehui-ts/language";
-export default function useGetTitle(avatarID: string) {
+export default function useGetTitle(avatarID?: string) {
const language = useLanguage();
return useQuery({
+ enabled: !!avatarID,
queryKey: ["title", avatarID, language],
queryFn: async () => {
const { data } = await wwwAPI.get("/title", {
diff --git a/qwilight-fe/src/state/Stores.tsx b/qwilight-fe/src/state/Stores.tsx
index 4837518..df2a0e8 100644
--- a/qwilight-fe/src/state/Stores.tsx
+++ b/qwilight-fe/src/state/Stores.tsx
@@ -5,6 +5,7 @@
import setNoteStore from "@/app/[language]/note/state/setNoteStore";
import setSiteStore from "@/app/[language]/site/state/setSiteStore";
import { useLocalObservable } from "mobx-react-lite";
+import { useTranslations } from "next-intl";
import { createContext, FC, PropsWithChildren, useContext } from "react";
type MainStore = {
@@ -17,18 +18,22 @@
const mainStore = createContext({} as MainStore);
const { Provider } = mainStore;
-export const Stores: FC = ({ children }) => (
-
- {children}
-
-);
+export const Stores: FC = ({ children }) => {
+ const t = useTranslations();
+
+ return (
+ setSiteStore(t)),
+ avatarStore: useLocalObservable(setAvatarStore),
+ hallStore: useLocalObservable(setHallStore),
+ }}
+ >
+ {children}
+
+ );
+};
export const useSiteStore = () => useContext(mainStore).siteStore;
diff --git a/qwilight-fe/src/type/wwwAPI.d.ts b/qwilight-fe/src/type/wwwAPI.d.ts
index d19825f..612561d 100644
--- a/qwilight-fe/src/type/wwwAPI.d.ts
+++ b/qwilight-fe/src/type/wwwAPI.d.ts
@@ -6,7 +6,7 @@
export type GetNoteAPI = {
totalCount: number;
topCount: number;
- noteCount: number;
+ lastPage: number;
notes: {
noteID: string;
artist: string;
@@ -16,9 +16,6 @@
level: number;
topCount?: number;
totalCount?: number;
- fittedText?: string;
- wantAvatarID?: string;
- wantAvatarName?: string;
}[];
};
@@ -30,7 +27,7 @@
stand: number;
band: number;
point: number;
- isP: boolean;
+ isBand1: boolean;
commentary: string;
isTargetAvatar: boolean;
judgmentMode: number;
@@ -66,15 +63,12 @@
date: number;
avatarLevels: number[];
avatarAbility5K: number;
- avatarAbility5KClass: number;
avatarAbility5KPlace: number;
avatarAbility5KCount: number;
avatarAbility7K: number;
- avatarAbility7KClass: number;
avatarAbility7KPlace: number;
avatarAbility7KCount: number;
avatarAbility9K: number;
- avatarAbility9KClass: number;
avatarAbility9KPlace: number;
avatarAbility9KCount: number;
dateSet: number[];
@@ -121,15 +115,15 @@
levelID: string;
title: string;
levelText: string;
- level: string;
+ level: number;
date: number;
}[];
export type GetEtcAPI = {
totalDateSet: string[];
totalDateValues: number[];
- signUpDateSet: string[];
- signUpDateValues: number[];
+ enrollDateSet: string[];
+ enrollDateValues: number[];
avatarDateSet: string[];
avatarDateValues: number[];
totalNoteFiles: EtcAPINoteFile[];
diff --git a/qwilight-fe/src/utilities/Utility.ts b/qwilight-fe/src/utilities/Utility.ts
index 146a89f..cbfef84 100644
--- a/qwilight-fe/src/utilities/Utility.ts
+++ b/qwilight-fe/src/utilities/Utility.ts
@@ -1,3 +1,4 @@
+import { AbilitySiteYell } from "@/app/[language]/site/type";
import i10 from "@/assets/i10.png";
import i11 from "@/assets/i11.png";
import i12 from "@/assets/i12.png";
@@ -60,7 +61,6 @@
import m79 from "@/assets/m79.png";
import m80 from "@/assets/m80.png";
import m81 from "@/assets/m81.png";
-import { AbilitySiteYell } from "@/app/[language]/site/type";
import { useTranslations } from "next-intl";
export const is = [
@@ -157,11 +157,6 @@
: `${inputModeText} ${ability.toFixed(2)} Point ↑`;
};
-export const toDate = (date: number) => {
- const dateText = new Date(date);
- return `${dateText.toLocaleDateString()} ${dateText.toLocaleTimeString()}`;
-};
-
export const getSiteName = (
siteName: string,
t: ReturnType>,
@@ -210,59 +205,3 @@
export const getDefaultAvatarID = (avatarID: string) =>
avatarID.substring(avatarID.indexOf("@") + 1);
-
-export const getHitPointsClass = (hitPointsMode: number) => {
- switch (hitPointsMode) {
- case 0:
- return "level2";
- case 2:
- return "level4";
- case 3:
- case 5:
- return "level5";
- case 4:
- return "level1";
- default:
- return "stand";
- }
-};
-
-export const getInputMode = (
- tabPosition: number,
-): "6K" | "5K" | "7K" | "9K" | "10K" | "14K" | "24K" | "48K" => {
- switch (tabPosition) {
- case 0:
- return "6K";
- case 1:
- return "5K";
- case 2:
- return "7K";
- case 3:
- return "9K";
- case 4:
- return "10K";
- case 5:
- return "14K";
- case 6:
- return "24K";
- case 7:
- return "48K";
- default:
- throw new Error(tabPosition.toString());
- }
-};
-
-export const getAbilityInputMode = (
- tabPosition: number,
-): "5K" | "7K" | "9K" => {
- switch (tabPosition) {
- case 0:
- return "5K";
- case 1:
- return "7K";
- case 2:
- return "9K";
- default:
- throw new Error(tabPosition.toString());
- }
-};
diff --git a/taehui-fe/package.json b/taehui-fe/package.json
index c6493ca..55cebc8 100644
--- a/taehui-fe/package.json
+++ b/taehui-fe/package.json
@@ -11,43 +11,44 @@
"stop": "pm2 stop taehui-fe"
},
"dependencies": {
- "@tanstack/react-query": "^5.28.4",
+ "@tanstack/react-query": "^5.29.0",
"axios": "^1.6.8",
"bootstrap": "^5.3.3",
"crypto-js": "^4.2.0",
"dayjs": "^1.11.10",
- "dompurify": "^3.0.9",
+ "dompurify": "^3.0.11",
"htmlparser2": "^9.1.0",
- "isomorphic-dompurify": "^2.4.0",
- "mariadb": "^3.2.3",
- "mobx": "^6.12.0",
- "mobx-react-lite": "^4.0.6",
- "next": "^14.1.3",
- "next-intl": "^3.9.5",
+ "isomorphic-dompurify": "^2.6.0",
+ "mariadb": "^3.3.0",
+ "mobx": "^6.12.3",
+ "mobx-react-lite": "^4.0.7",
+ "next": "^14.1.4",
+ "next-intl": "^3.11.1",
"react": "^18.2.0",
+ "react-bootstrap": "^2.10.2",
+ "react-bootstrap-icons": "^1.11.3",
"react-contexify": "^6.0.0",
"react-dom": "^18.2.0",
"react-infinite-scroll-component": "^6.1.0",
"react-textarea-autosize": "^8.5.3",
"react-toastify": "^10.0.5",
- "reactstrap": "^9.2.2",
"redis": "^4.6.13",
- "sweetalert2": "^11.10.6",
+ "sweetalert2": "^11.10.7",
"taehui-ts": "workspace:^",
"uuid": "^9.0.1",
- "winston": "^3.12.0",
+ "winston": "^3.13.0",
"winston-daily-rotate-file": "^5.0.0"
},
"devDependencies": {
"@types/crypto-js": "^4.2.2",
"@types/dompurify": "^3.0.5",
"@types/jest": "^29.5.12",
- "@types/node": "^20.11.28",
- "@types/react": "^18.2.66",
- "@types/react-dom": "^18.2.22",
+ "@types/node": "^20.12.5",
+ "@types/react": "^18.2.74",
+ "@types/react-dom": "^18.2.24",
"@types/showdown": "^2.0.6",
"@types/uuid": "^9.0.8",
- "eslint-config-next": "^14.1.3",
- "typescript": "^5.4.2"
+ "eslint-config-next": "^14.1.4",
+ "typescript": "^5.4.4"
}
}
diff --git "a/taehui-fe/src/app/\133language\135/avatar/page.tsx" "b/taehui-fe/src/app/\133language\135/avatar/page.tsx"
index ca76448..aebbc6a 100644
--- "a/taehui-fe/src/app/\133language\135/avatar/page.tsx"
+++ "b/taehui-fe/src/app/\133language\135/avatar/page.tsx"
@@ -1,12 +1,12 @@
"use client";
+import EnrollView from "@/components/EnrollView";
import ModifyAvatarView from "@/components/ModifyAvatarView";
-import SignUpView from "@/components/SignUpView";
import { useTaehuiStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
export default observer(() => {
const { totem } = useTaehuiStore();
- return totem ? : ;
+ return totem ? : ;
});
diff --git "a/taehui-fe/src/app/\133language\135/commentary/components/CommentaryItem.tsx" "b/taehui-fe/src/app/\133language\135/commentary/components/CommentaryItem.tsx"
index 68310d3..b58acf6 100644
--- "a/taehui-fe/src/app/\133language\135/commentary/components/CommentaryItem.tsx"
+++ "b/taehui-fe/src/app/\133language\135/commentary/components/CommentaryItem.tsx"
@@ -3,17 +3,17 @@
import { GetCommentaryAPI } from "@/type/wwwAPI";
import { useTranslations } from "next-intl";
import { useState } from "react";
+import { PencilFill, TrashFill } from "react-bootstrap-icons";
+import Button from "react-bootstrap/Button";
+import ButtonGroup from "react-bootstrap/ButtonGroup";
+import Col from "react-bootstrap/Col";
+import FormControl from "react-bootstrap/FormControl";
+import InputGroup from "react-bootstrap/InputGroup";
+import InputGroupText from "react-bootstrap/InputGroupText";
+import Row from "react-bootstrap/Row";
+import Stack from "react-bootstrap/Stack";
import ReactTextareaAutosize from "react-textarea-autosize";
import { toast } from "react-toastify";
-import {
- Button,
- Col,
- Collapse,
- Form,
- Input,
- ListGroupItem,
- Row,
-} from "reactstrap";
import { getDatetime } from "taehui-ts/date";
export default function CommentaryItem({
@@ -30,86 +30,94 @@
const { mutateAsync: wipeCommentary } = useWipeCommentary();
const { mutateAsync: putCommentary } = usePutCommentary();
- return (
- {
- setModifyOpened(true);
- }}
- >
-
-
- {avatarName}
-
-
- {isModifyOpened ? (
-
+
+
+ {avatarName}
+ {
- setTextInput(value);
- }}
+ onChange={({ target: { value } }) => setTextInput(value)}
/>
- ) : (
- {text}
- )}
-
-
- {getDatetime(date)}
-
+
+ {getDatetime(date)}
+
+
+
+ {t("avatarCipher")}
+ setAvatarCipher(value)}
+ />
+
+
+
-
-
-
-
+ );
+ }
+
+ const isLoading = !(commentaryID >= 0);
+
+ return (
+
+ {avatarName}
+
+ {text}
+
+
+
+ {getDatetime(date)}
+
+
+
+
+
+
+
);
}
diff --git "a/taehui-fe/src/app/\133language\135/commentary/page.tsx" "b/taehui-fe/src/app/\133language\135/commentary/page.tsx"
index 071983b..e967be6 100644
--- "a/taehui-fe/src/app/\133language\135/commentary/page.tsx"
+++ "b/taehui-fe/src/app/\133language\135/commentary/page.tsx"
@@ -5,9 +5,17 @@
import usePostCommentary from "@/app/[language]/commentary/query/usePostCommentary";
import { useTranslations } from "next-intl";
import { useState } from "react";
+import { PencilFill } from "react-bootstrap-icons";
+import Button from "react-bootstrap/Button";
+import FormControl from "react-bootstrap/FormControl";
+import InputGroup from "react-bootstrap/InputGroup";
+import InputGroupText from "react-bootstrap/InputGroupText";
+import ListGroup from "react-bootstrap/ListGroup";
+import ListGroupItem from "react-bootstrap/ListGroupItem";
+import Stack from "react-bootstrap/Stack";
import ReactTextareaAutosize from "react-textarea-autosize";
import { toast } from "react-toastify";
-import { Button, Col, Form, Input, ListGroup, Row } from "reactstrap";
+import { getDatetime } from "taehui-ts/date";
export default function Page() {
const t = useTranslations();
@@ -21,77 +29,79 @@
const { mutateAsync: postCommentary } = usePostCommentary();
return (
- <>
-
- {isCommentaryLoaded && (
-
-
-
- {commentary.map((commentary) => (
-
- ))}
-
-
-
- )}
-
+
+ )}
+
+
);
}
diff --git "a/taehui-fe/src/app/\133language\135/commentary/query/usePostCommentary.ts" "b/taehui-fe/src/app/\133language\135/commentary/query/usePostCommentary.ts"
index 28fee98..075296f 100644
--- "a/taehui-fe/src/app/\133language\135/commentary/query/usePostCommentary.ts"
+++ "b/taehui-fe/src/app/\133language\135/commentary/query/usePostCommentary.ts"
@@ -1,6 +1,6 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-
import { wwwAPI } from "@/utilities/wwwAPI";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { getMillis } from "taehui-ts/date";
export default function usePostCommentary() {
const queryClient = useQueryClient();
@@ -15,11 +15,19 @@
avatarCipher: string;
text: string;
}) => {
- await wwwAPI.post("/commentary", {
- avatarName,
- avatarCipher,
- text,
- });
+ await wwwAPI.post(
+ "/commentary",
+ {
+ avatarName,
+ avatarCipher,
+ text,
+ },
+ {
+ headers: {
+ millis: getMillis(),
+ },
+ },
+ );
},
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: ["commentary"] });
diff --git "a/taehui-fe/src/app/\133language\135/commentary/query/usePutCommentary.ts" "b/taehui-fe/src/app/\133language\135/commentary/query/usePutCommentary.ts"
index cba778b..e8529cc 100644
--- "a/taehui-fe/src/app/\133language\135/commentary/query/usePutCommentary.ts"
+++ "b/taehui-fe/src/app/\133language\135/commentary/query/usePutCommentary.ts"
@@ -2,6 +2,7 @@
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { toast } from "react-toastify";
+import { getMillis } from "taehui-ts/date";
export default function usePutCommentary() {
const queryClient = useQueryClient();
@@ -18,11 +19,19 @@
avatarCipher: string;
text: string;
}) => {
- await wwwAPI.put("/commentary", {
- commentaryID,
- avatarCipher,
- text,
- });
+ await wwwAPI.put(
+ "/commentary",
+ {
+ commentaryID,
+ avatarCipher,
+ text,
+ },
+ {
+ headers: {
+ millis: getMillis(),
+ },
+ },
+ );
},
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: ["commentary"] });
diff --git "a/taehui-fe/src/app/\133language\135/components/HitText.tsx" "b/taehui-fe/src/app/\133language\135/components/HitText.tsx"
index 71ae543..d920ce9 100644
--- "a/taehui-fe/src/app/\133language\135/components/HitText.tsx"
+++ "b/taehui-fe/src/app/\133language\135/components/HitText.tsx"
@@ -1,4 +1,5 @@
import { useTranslations } from "next-intl";
+import Stack from "react-bootstrap/Stack";
export default function HitText({
hitBefore,
@@ -10,12 +11,10 @@
const t = useTranslations();
return (
-
- {t("hit01", { hitBefore })}
-
- {t("hit02", { hit })}
-
- {t("hit03")}
-
+
+ {t("hit01", { hitBefore })}
+ {t("hit02", { hit })}
+ {t("hit03")}
+
);
}
diff --git "a/taehui-fe/src/app/\133language\135/components/HitView.tsx" "b/taehui-fe/src/app/\133language\135/components/HitView.tsx"
index 0945bb3..2966102 100644
--- "a/taehui-fe/src/app/\133language\135/components/HitView.tsx"
+++ "b/taehui-fe/src/app/\133language\135/components/HitView.tsx"
@@ -22,7 +22,7 @@
return (
<>
- {t("hit00")}
+ {t("hit00")}
{isHitLoaded ? (
) : (
diff --git "a/taehui-fe/src/app/\133language\135/components/LatestAvatarView.tsx" "b/taehui-fe/src/app/\133language\135/components/LatestAvatarView.tsx"
new file mode 100644
index 0000000..4b4ae93
--- /dev/null
+++ "b/taehui-fe/src/app/\133language\135/components/LatestAvatarView.tsx"
@@ -0,0 +1,29 @@
+import AvatarDrawing from "@/components/AvatarDrawing";
+import Col from "react-bootstrap/Col";
+import Row from "react-bootstrap/Row";
+import Stack from "react-bootstrap/Stack";
+import { getDatetime } from "taehui-ts/date";
+
+export default function LatestAvatarView({
+ avatarID,
+ avatarName,
+ date,
+}: {
+ avatarID: string;
+ avatarName: string;
+ date: string;
+}) {
+ return (
+
+
+
+
+
+
+ {avatarName}
+ {getDatetime(date)}
+
+
+
+ );
+}
diff --git "a/taehui-fe/src/app/\133language\135/components/LatestAvatarsView.tsx" "b/taehui-fe/src/app/\133language\135/components/LatestAvatarsView.tsx"
deleted file mode 100644
index 6e0bd17..0000000
--- "a/taehui-fe/src/app/\133language\135/components/LatestAvatarsView.tsx"
+++ /dev/null
@@ -1,37 +0,0 @@
-import useGetLatestAvatar from "@/app/[language]/query/useGetLatestAvatar";
-import AvatarTitle from "@/components/AvatarTitle";
-import { useTranslations } from "next-intl";
-import { Col, Row } from "reactstrap";
-import { getDatetime } from "taehui-ts/date";
-
-export default function LatestAvatarsView() {
- const t = useTranslations();
-
- const { data: latestAvatar, isFetched: isLatestAvatarLoaded } =
- useGetLatestAvatar();
-
- return (
-
- {[...Array(2).keys()].map((i) => (
-
- {t(`latestAvatarsView${i}`)}
- {isLatestAvatarLoaded
- ? latestAvatar[i].map(({ avatarID, avatarName, date }) => (
-
-
- {getDatetime(date)}
-
-
- ))
- : [...Array(5).keys()].map((i) => (
-
-
- {null}
-
-
- ))}
-
- ))}
-
- );
-}
diff --git "a/taehui-fe/src/app/\133language\135/components/LatestCommentsView.tsx" "b/taehui-fe/src/app/\133language\135/components/LatestCommentsView.tsx"
index b628138..b4c65da 100644
--- "a/taehui-fe/src/app/\133language\135/components/LatestCommentsView.tsx"
+++ "b/taehui-fe/src/app/\133language\135/components/LatestCommentsView.tsx"
@@ -1,7 +1,9 @@
-import CommentTitleView from "@/app/[language]/forum/components/CommentTitleView";
import useGetLatestComment from "@/app/[language]/query/useGetLatestComment";
+import CommentTitleView from "@/components/CommentTitleView";
import { useTranslations } from "next-intl";
-import { ListGroup, ListGroupItemHeading } from "reactstrap";
+import ListGroup from "react-bootstrap/ListGroup";
+import ListGroupItem from "react-bootstrap/ListGroupItem";
+import { getDatetime } from "taehui-ts/date";
export default function LatestCommentsView() {
const t = useTranslations();
@@ -10,35 +12,33 @@
useGetLatestComment();
return (
- <>
- {t("latestCommentsView")}
-
- {isLatestCommentLoaded
- ? latestComment.map((latestComment) => {
- return (
-
- );
- })
- : [...Array(5).keys()].map((i) => (
+
+ {t("latestCommentsView")}
+ {isLatestCommentLoaded
+ ? latestComment.map((latestComment) => (
+
+
+ ))
+ : [...Array(5).keys()].map((i) => (
+
+
- ))}
-
-
+
+ ))}
+
);
}
diff --git "a/taehui-fe/src/app/\133language\135/components/LatestEnrolledAvatarsView.tsx" "b/taehui-fe/src/app/\133language\135/components/LatestEnrolledAvatarsView.tsx"
new file mode 100644
index 0000000..de9cbe1
--- /dev/null
+++ "b/taehui-fe/src/app/\133language\135/components/LatestEnrolledAvatarsView.tsx"
@@ -0,0 +1,40 @@
+import LatestAvatarView from "@/app/[language]/components/LatestAvatarView";
+import useGetLatestEnrolledAvatar from "@/app/[language]/query/useGetLatestEnrolledAvatar";
+import { useTranslations } from "next-intl";
+import ListGroup from "react-bootstrap/ListGroup";
+import ListGroupItem from "react-bootstrap/ListGroupItem";
+import { getDatetime } from "taehui-ts/date";
+
+export default function LatestEnrolledAvatarsView() {
+ const t = useTranslations();
+
+ const {
+ data: latestEnrolledAvatar,
+ isFetched: isLatestEnrolledAvatarLoaded,
+ } = useGetLatestEnrolledAvatar();
+
+ return (
+
+ {t("latestEnrolledAvatarsView")}
+ {isLatestEnrolledAvatarLoaded
+ ? latestEnrolledAvatar.map(({ avatarID, avatarName, date }) => (
+
+
+
+ ))
+ : [...Array(5).keys()].map((i) => (
+
+
+
+ ))}
+
+ );
+}
diff --git "a/taehui-fe/src/app/\133language\135/components/LatestEssaysView.tsx" "b/taehui-fe/src/app/\133language\135/components/LatestEssaysView.tsx"
index e65bf3c..7d5bc07 100644
--- "a/taehui-fe/src/app/\133language\135/components/LatestEssaysView.tsx"
+++ "b/taehui-fe/src/app/\133language\135/components/LatestEssaysView.tsx"
@@ -1,7 +1,9 @@
-import EssayTitleView from "@/app/[language]/forum/components/EssayTitleView";
import useGetLatestEssay from "@/app/[language]/query/useGetLatestEssay";
+import EssayTitleView from "@/components/EssayTitleView";
import { useTranslations } from "next-intl";
-import { ListGroup, ListGroupItemHeading } from "reactstrap";
+import ListGroup from "react-bootstrap/ListGroup";
+import ListGroupItem from "react-bootstrap/ListGroupItem";
+import { getDatetime } from "taehui-ts/date";
export default function LatestEssaysView() {
const t = useTranslations();
@@ -10,33 +12,34 @@
useGetLatestEssay();
return (
- <>
- {t("latestEssaysView")}
-
- {isLatestEssayLoaded
- ? latestEssay.map((latestEssay) => (
+
+ {t("latestEssaysView")}
+ {isLatestEssayLoaded
+ ? latestEssay.map((latestEssay) => (
+
- ))
- : [...Array(5).keys()].map((i) => (
+
+ ))
+ : [...Array(5).keys()].map((i) => (
+
- ))}
-
-
+
+ ))}
+
);
}
diff --git "a/taehui-fe/src/app/\133language\135/components/LatestLoggedInAvatarsView.tsx" "b/taehui-fe/src/app/\133language\135/components/LatestLoggedInAvatarsView.tsx"
new file mode 100644
index 0000000..65fafef
--- /dev/null
+++ "b/taehui-fe/src/app/\133language\135/components/LatestLoggedInAvatarsView.tsx"
@@ -0,0 +1,40 @@
+import LatestAvatarView from "@/app/[language]/components/LatestAvatarView";
+import useGetLatestLoggedInAvatar from "@/app/[language]/query/useGetLatestLoggedInAvatar";
+import { useTranslations } from "next-intl";
+import ListGroup from "react-bootstrap/ListGroup";
+import ListGroupItem from "react-bootstrap/ListGroupItem";
+import { getDatetime } from "taehui-ts/date";
+
+export default function LatestLoggedInAvatarsView() {
+ const t = useTranslations();
+
+ const {
+ data: latestLoggedInAvatar,
+ isFetched: isLatestLoggedInAvatarLoaded,
+ } = useGetLatestLoggedInAvatar();
+
+ return (
+
+ {t("latestLoggedInAvatarsView")}
+ {isLatestLoggedInAvatarLoaded
+ ? latestLoggedInAvatar.map(({ avatarID, avatarName, date }) => (
+
+
+
+ ))
+ : [...Array(5).keys()].map((i) => (
+
+
+
+ ))}
+
+ );
+}
diff --git "a/taehui-fe/src/app/\133language\135/components/MainView.tsx" "b/taehui-fe/src/app/\133language\135/components/MainView.tsx"
new file mode 100644
index 0000000..5826d4e
--- /dev/null
+++ "b/taehui-fe/src/app/\133language\135/components/MainView.tsx"
@@ -0,0 +1,15 @@
+import { useTranslations } from "next-intl";
+import Stack from "react-bootstrap/Stack";
+
+export default function MainView() {
+ const t = useTranslations();
+
+ return (
+
+ {t("main00")}
+ {t("main01")}
+ {t("main02")}
+ {t("main03")}
+
+ );
+}
diff --git "a/taehui-fe/src/app/\133language\135/forum/\133forumID\135/\133essayID\135/page.tsx" "b/taehui-fe/src/app/\133language\135/forum/\133forumID\135/\133essayID\135/page.tsx"
index 376e4f1..cb81e3f 100644
--- "a/taehui-fe/src/app/\133language\135/forum/\133forumID\135/\133essayID\135/page.tsx"
+++ "b/taehui-fe/src/app/\133language\135/forum/\133forumID\135/\133essayID\135/page.tsx"
@@ -1,18 +1,21 @@
"use client";
import CommentView from "@/app/[language]/forum/components/CommentView";
-import EssayTitleView from "@/app/[language]/forum/components/EssayTitleView";
import TextView from "@/app/[language]/forum/components/TextView";
import useGetEssay from "@/app/[language]/forum/query/useGetEssay";
import useWipeEssay from "@/app/[language]/forum/query/useWipeEssay";
-
+import EssayTitleView from "@/components/EssayTitleView";
import { useTaehuiStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
-import { useParams } from "next/navigation";
-import { Button, Col, Row } from "reactstrap";
+import { useParams, useRouter } from "next/navigation";
+import { Back, EraserFill, PencilFill } from "react-bootstrap-icons";
+import Button from "react-bootstrap/Button";
+import ButtonGroup from "react-bootstrap/ButtonGroup";
+import Col from "react-bootstrap/Col";
+import Row from "react-bootstrap/Row";
+import Stack from "react-bootstrap/Stack";
import Swal from "sweetalert2";
-import { useTo } from "taehui-ts/fe-utilities";
export default observer(() => {
const t = useTranslations();
@@ -24,7 +27,7 @@
essayID: string;
}>();
- const to = useTo();
+ const { push } = useRouter();
const { mutateAsync: wipeEssay } = useWipeEssay();
@@ -52,54 +55,53 @@
(
await Swal.fire({
title: "Taehui",
- text: t("wipeEssayQuestion"),
+ text: t("wipeEssayText"),
icon: "question",
showDenyButton: true,
})
).isConfirmed
) {
await wipeEssay({ essayID });
- to(`/forum/${forumID}`);
+ push(`/forum/${forumID}`);
}
};
- const onQuit = () => {
- to(`/forum/${forumID}`);
- };
-
const isAllowModify = isSU || taehuiAvatarID === avatarID;
return (
- <>
-
+
+
+
+ {forumTitle}
+
{isAllowModify && (
- <>
-
-
-
- {essayLater && (
-
- )}
- {essayBefore && (
-
+ {(essayLater || essayBefore) && (
+ <>
+
+ {essayLater && (
+
+ )}
+ {essayBefore && (
+
+ )}
+
)}
-
+
);
});
diff --git "a/taehui-fe/src/app/\133language\135/forum/\133forumID\135/edit/\133\133...essayID\135\135/page.tsx" "b/taehui-fe/src/app/\133language\135/forum/\133forumID\135/edit/\133\133...essayID\135\135/page.tsx"
index 6b9dca7..9838160 100644
--- "a/taehui-fe/src/app/\133language\135/forum/\133forumID\135/edit/\133\133...essayID\135\135/page.tsx"
+++ "b/taehui-fe/src/app/\133language\135/forum/\133forumID\135/edit/\133\133...essayID\135\135/page.tsx"
@@ -1,78 +1,83 @@
"use client";
-import AutoEssayTitleView from "@/app/[language]/forum/components/AutoEssayTitleView";
+import AutoEssayWindow from "@/app/[language]/forum/components/AutoEssayWindow";
+import FileUploading from "@/app/[language]/forum/components/FileUploadingWindow";
import TextView from "@/app/[language]/forum/components/TextView";
-import useGetAutoEssay from "@/app/[language]/forum/query/useGetAutoEssay";
import useGetEssay from "@/app/[language]/forum/query/useGetEssay";
+import useGetForum from "@/app/[language]/forum/query/useGetForum";
import usePostAutoEssay from "@/app/[language]/forum/query/usePostAutoEssay";
import usePostEssay from "@/app/[language]/forum/query/usePostEssay";
import usePostFile from "@/app/[language]/forum/query/usePostFile";
import usePutAutoEssay from "@/app/[language]/forum/query/usePutAutoEssay";
import usePutEssay from "@/app/[language]/forum/query/usePutEssay";
import { useForumStore, useTaehuiStore } from "@/state/Stores";
+import { useQueryClient } from "@tanstack/react-query";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
-import { useParams } from "next/navigation";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { PencilFill } from "react-bootstrap-icons";
+import Button from "react-bootstrap/Button";
+import CloseButton from "react-bootstrap/CloseButton";
+import Col from "react-bootstrap/Col";
+import FormCheck from "react-bootstrap/FormCheck";
+import FormControl from "react-bootstrap/FormControl";
+import InputGroup from "react-bootstrap/InputGroup";
+import InputGroupText from "react-bootstrap/InputGroupText";
+import Row from "react-bootstrap/Row";
+import Stack from "react-bootstrap/Stack";
import { toast } from "react-toastify";
-import {
- Button,
- Col,
- Collapse,
- Input,
- ListGroup,
- Modal,
- ModalBody,
- Row,
- TabContent,
- TabPane,
-} from "reactstrap";
-import { useTo, useWindowArea } from "taehui-ts/fe-utilities";
+import { useWindowArea } from "taehui-ts/fe-utilities";
export default observer(() => {
const {
isTitleTextFilled,
title,
text,
+ viewUnit,
setTitle,
setText,
autoEssayID,
setAutoEssayID,
+ setAutoEssayOpened,
} = useForumStore();
- const { titleViewHeight, avatarViewHeight } = useTaehuiStore();
+
+ const inputView = useRef(null);
+
const { taehuiAvatarID, taehuiAvatarName } = useTaehuiStore();
const t = useTranslations();
const [isTestMode, setTestMode] = useState(false);
const [testText, setTestText] = useState("");
- const [textViewHeight, setTextViewHeight] = useState(100);
- const [isAutoEssayOpened, setAutoEssayOpened] = useState(false);
- const { forumID, essayID } = useParams<{
+ const { forumID, essayID: [essayID] = [""] } = useParams<{
forumID: string;
- essayID?: string;
+ essayID: string[];
}>();
- const { isFetched: isAutoEssayLoaded, data: autoEssay } = useGetAutoEssay(
- forumID,
- isAutoEssayOpened,
- );
-
- const editView = useRef(null);
const textView = useRef(null);
- const inputView = useRef(null);
+ const [textViewHeight, setTextViewHeight] = useState("");
+
+ const { windowLength, windowHeight } = useWindowArea();
+
+ useLayoutEffect(() => {
+ const textViewArea = textView.current?.getBoundingClientRect();
+ const inputViewArea = inputView.current?.getBoundingClientRect();
+ setTextViewHeight(
+ `${windowHeight - 8 * 4 - ((textViewArea?.top ?? 0) + (inputViewArea?.height ?? 0))}px`,
+ );
+ }, [windowLength, windowHeight]);
const { mutateAsync: postAutoEssay } = usePostAutoEssay();
const { mutateAsync: putAutoEssay } = usePutAutoEssay();
const { mutateAsync: putEssay } = usePutEssay();
- const { isPending, mutateAsync: postFile } = usePostFile();
+ const { mutateAsync: postFile, isPending: isPostFilePending } = usePostFile();
const { mutateAsync: postEssay } = usePostEssay();
- const {
- data: essay,
- data: { forumTitle },
- isFetched: isEssayLoaded,
- } = useGetEssay(essayID);
+ const { data: essay, isFetched: isEssayLoaded } = useGetEssay(essayID);
+ const searchParams = useSearchParams();
+
+ const { push } = useRouter();
useEffect(() => {
if (isEssayLoaded) {
@@ -81,10 +86,6 @@
}
}, [essay, isEssayLoaded, setText, setTitle]);
- const { windowHeight } = useWindowArea();
-
- const to = useTo();
-
const setTag = (tag: string) => {
const { current } = textView;
if (current) {
@@ -124,16 +125,6 @@
};
useEffect(() => {
- setTextViewHeight(
- windowHeight -
- titleViewHeight -
- avatarViewHeight -
- (editView.current?.clientHeight ?? 0) -
- (inputView.current?.clientHeight ?? 0),
- );
- }, [avatarViewHeight, titleViewHeight, windowHeight]);
-
- useEffect(() => {
if (!essayID) {
setTitle("");
setText("");
@@ -177,226 +168,184 @@
}
}, [isTestMode, text]);
+ const {
+ data: { title: forumTitle },
+ } = useGetForum(
+ forumID,
+ Number.parseInt(searchParams.get("page") ?? "1"),
+ viewUnit,
+ );
+
+ const onFileUpload = () => {
+ const inputElement = document.createElement("input");
+ inputElement.type = "file";
+ inputElement.accept = "audio/*,image/*,video/*";
+ inputElement.addEventListener("change", async ({ target }) => {
+ const file = (target as HTMLInputElement).files?.[0];
+ const { current } = textView;
+ if (file && current) {
+ const text = await postFile({
+ file,
+ textView: current,
+ });
+ if (text) {
+ setText(text);
+ }
+ }
+ });
+ inputElement.click();
+ };
+
+ const { back } = useRouter();
+
+ const queryClient = useQueryClient();
+
return (
<>
- {!isTestMode && (
-
-
-
-
+
+
+ {forumTitle}
+
+
+ {
+ setTestMode((prevState) => !prevState);
+ }}
+ />
+
+
+
+
+
+
+ {isTestMode ? (
+ <>
+
+
+
+ ) : (
+ <>
+
+ {t("title")}
+ {
setTitle(value);
}}
/>
-
-
-
-
-
-
-
-
-
-
-
-
-
- {isAutoEssayLoaded ? (
- autoEssay.map((autoEssay) => (
-
- ))
- ) : (
-
- )}
-
-
-
-
-
-
-
-
- {
- setText(value);
- }}
- innerRef={textView}
- style={{ height: textViewHeight }}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {essayID ? (
-
+
+
+
-
- ) : (
-
-
- )}
-
-
+ {
+ setText(value);
}}
- >
- {t("quit")}
-
-
-
-
-
-
- {t("fileUploading")}
-
-
+ />
+
+ )}
+ {essayID ? (
+
+ ) : (
+
+ )}
+
+
+
);
});
diff --git "a/taehui-fe/src/app/\133language\135/forum/\133forumID\135/page.tsx" "b/taehui-fe/src/app/\133language\135/forum/\133forumID\135/page.tsx"
index 7df4baa..076a122 100644
--- "a/taehui-fe/src/app/\133language\135/forum/\133forumID\135/page.tsx"
+++ "b/taehui-fe/src/app/\133language\135/forum/\133forumID\135/page.tsx"
@@ -1,23 +1,20 @@
"use client";
-import EssayTitleView from "@/app/[language]/forum/components/EssayTitleView";
import PositionInput from "@/app/[language]/forum/components/PositionInput";
import useGetForum from "@/app/[language]/forum/query/useGetForum";
+import EssayTitleView from "@/components/EssayTitleView";
import { useForumStore, useTaehuiStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
-import Link from "next/link";
-import { useParams } from "next/navigation";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useEffect } from "react";
-import {
- Badge,
- Button,
- Col,
- ListGroup,
- ListGroupItemHeading,
- Row,
-} from "reactstrap";
-import { useIntParam, useTo } from "taehui-ts/fe-utilities";
+import { PencilFill } from "react-bootstrap-icons";
+import Button from "react-bootstrap/Button";
+import Col from "react-bootstrap/Col";
+import ListGroup from "react-bootstrap/ListGroup";
+import ListGroupItem from "react-bootstrap/ListGroupItem";
+import Row from "react-bootstrap/Row";
+import Stack from "react-bootstrap/Stack";
export default observer(() => {
const { taehuiLevel } = useTaehuiStore();
@@ -27,14 +24,18 @@
const { forumID } = useParams<{
forumID: string;
}>();
- const { param: page } = useIntParam("page", 1);
+ const searchParams = useSearchParams();
- const to = useTo();
+ const { push } = useRouter();
const {
data: { title, essays, essayCount, level },
isFetched: isForumLoaded,
- } = useGetForum(forumID, page, viewUnit);
+ } = useGetForum(
+ forumID,
+ Number.parseInt(searchParams.get("page") ?? "1"),
+ viewUnit,
+ );
useEffect(() => {
if (isForumLoaded) {
@@ -42,52 +43,37 @@
}
}, [essayCount, isForumLoaded, setLastPage, viewUnit]);
+ if (!isForumLoaded) {
+ return null;
+ }
+
return (
- <>
-
-
-
- {title}
-
-
- {isForumLoaded &&
- essays.map((essay) => (
-
- ))}
-
-
-
-
-
+
+
+ {title}
+ {essays.map((essay) => (
+
+
+
+ ))}
+
+
+
-
-
- {taehuiLevel >= level && (
-
-
-
-
-
- )}
- = level ? "auto" : undefined}
- >
-
+
+ {taehuiLevel >= level && (
+
+ )}
-
+
);
});
diff --git "a/taehui-fe/src/app/\133language\135/forum/components/AutoEssayTitleView.tsx" "b/taehui-fe/src/app/\133language\135/forum/components/AutoEssayTitleView.tsx"
index 4c32612..33afba4 100644
--- "a/taehui-fe/src/app/\133language\135/forum/components/AutoEssayTitleView.tsx"
+++ "b/taehui-fe/src/app/\133language\135/forum/components/AutoEssayTitleView.tsx"
@@ -1,52 +1,57 @@
import useWipeAutoEssay from "@/app/[language]/forum/query/useWipeAutoEssay";
-
import { useForumStore } from "@/state/Stores";
import { GetAutoEssayAPI } from "@/type/wwwAPI";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
-import { Col, ListGroupItem, Row } from "reactstrap";
+import { useParams } from "next/navigation";
+import Col from "react-bootstrap/Col";
+import Row from "react-bootstrap/Row";
import Swal from "sweetalert2";
import { getDatetime } from "taehui-ts/date";
-export default observer<{ autoEssay: GetAutoEssayAPI[0] }>(
+export default observer<{ autoEssay: GetAutoEssayAPI[number] }>(
({ autoEssay: { autoEssayID, title, text, date } }) => {
const { mutateAsync: wipeAutoEssay } = useWipeAutoEssay();
+ const { forumID } = useParams<{
+ forumID: string;
+ }>();
+
const { setTitle, setText, setAutoEssayID } = useForumStore();
const t = useTranslations();
+ const isLoading = !(autoEssayID >= 0);
+
return (
- {
- const { isConfirmed, isDenied } = await Swal.fire({
- title: t("autoEssay"),
- text: t("setAutoEssayQuestion"),
- icon: "question",
- showDenyButton: true,
- denyButtonText: t("wipeEssay"),
- });
+ {
+ const { isConfirmed, isDenied } = await Swal.fire({
+ title: "Taehui",
+ text: t("autoEssayText"),
+ icon: "question",
+ showDenyButton: true,
+ denyButtonText: t("wipeAutoEssay"),
+ });
- if (isConfirmed) {
- setTitle(title);
- setText(text);
- setAutoEssayID(autoEssayID);
- }
+ if (isConfirmed) {
+ setTitle(title);
+ setText(text);
+ setAutoEssayID(autoEssayID);
+ }
- if (isDenied) {
- await wipeAutoEssay({ autoEssayID });
- }
- }}
+ if (isDenied) {
+ await wipeAutoEssay({ forumID, autoEssayID });
+ }
+ },
+ })}
>
-
-
- {title}
-
-
- {getDatetime(date)}
-
-
-
+ {title}
+
+ {getDatetime(date)}
+
+
);
},
);
diff --git "a/taehui-fe/src/app/\133language\135/forum/components/AutoEssayWindow.tsx" "b/taehui-fe/src/app/\133language\135/forum/components/AutoEssayWindow.tsx"
new file mode 100644
index 0000000..cb5362f
--- /dev/null
+++ "b/taehui-fe/src/app/\133language\135/forum/components/AutoEssayWindow.tsx"
@@ -0,0 +1,55 @@
+import AutoEssayTitleView from "@/app/[language]/forum/components/AutoEssayTitleView";
+import useGetAutoEssay from "@/app/[language]/forum/query/useGetAutoEssay";
+import { useForumStore } from "@/state/Stores";
+import { observer } from "mobx-react-lite";
+import { useParams } from "next/navigation";
+import ListGroup from "react-bootstrap/ListGroup";
+import ListGroupItem from "react-bootstrap/ListGroupItem";
+import Modal from "react-bootstrap/Modal";
+import ModalBody from "react-bootstrap/ModalBody";
+import { getDatetime } from "taehui-ts/date";
+
+export default observer(() => {
+ const { isAutoEssayOpened, setAutoEssayOpened } = useForumStore();
+
+ const { forumID } = useParams<{
+ forumID: string;
+ }>();
+
+ const { isFetched: isAutoEssayLoaded, data: autoEssay } = useGetAutoEssay(
+ forumID,
+ isAutoEssayOpened,
+ );
+
+ return (
+ {
+ setAutoEssayOpened(false);
+ }}
+ >
+
+
+ {isAutoEssayLoaded ? (
+ autoEssay.map((autoEssay) => (
+
+
+
+ ))
+ ) : (
+
+
+
+ )}
+
+
+
+ );
+});
diff --git "a/taehui-fe/src/app/\133language\135/forum/components/CommentItem.tsx" "b/taehui-fe/src/app/\133language\135/forum/components/CommentItem.tsx"
index 17fe846..5ebcca8 100644
--- "a/taehui-fe/src/app/\133language\135/forum/components/CommentItem.tsx"
+++ "b/taehui-fe/src/app/\133language\135/forum/components/CommentItem.tsx"
@@ -1,15 +1,23 @@
import usePostComment from "@/app/[language]/forum/query/usePostComment";
import usePutComment from "@/app/[language]/forum/query/usePutComment";
import useWipeComment from "@/app/[language]/forum/query/useWipeComment";
-import AvatarTitle from "@/components/AvatarTitle";
+import AvatarDrawing from "@/components/AvatarDrawing";
import { useTaehuiStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import { useParams } from "next/navigation";
-import { useMemo, useState } from "react";
+import { useState } from "react";
+import { Back, EraserFill, PencilFill, ReplyFill } from "react-bootstrap-icons";
+import Button from "react-bootstrap/Button";
+import ButtonGroup from "react-bootstrap/ButtonGroup";
+import Col from "react-bootstrap/Col";
+import Collapse from "react-bootstrap/Collapse";
+import FormControl from "react-bootstrap/FormControl";
+import InputGroup from "react-bootstrap/InputGroup";
+import Row from "react-bootstrap/Row";
+import Stack from "react-bootstrap/Stack";
import ReactTextareaAutosize from "react-textarea-autosize";
import { toast } from "react-toastify";
-import { Button, Col, Collapse, Row } from "reactstrap";
import Swal from "sweetalert2";
import { getDatetime } from "taehui-ts/date";
@@ -34,129 +42,166 @@
const { essayID } = useParams<{ essayID: string }>();
- const [textInput, setTextInput] = useState("");
- const [targetTextInput, setTargetTextInput] = useState("");
- const [isTargetOpened, setTargetOpened] = useState(false);
-
- const isAllowModify = useMemo(
- () => isSU || taehuiAvatarID === avatarID,
- [isSU, avatarID, taehuiAvatarID],
- );
+ const [textInputModify, setTextInputModify] = useState("");
+ const [textInputPost, setTextInputPost] = useState("");
+ const [isPostOpened, setPostOpened] = useState(false);
+ const [isModifyOpened, setModifyOpened] = useState(false);
const { mutateAsync: wipeComment } = useWipeComment();
const { mutateAsync: putComment } = usePutComment();
const { mutateAsync: postComment } = usePostComment();
+ const isAllowModify = isSU || taehuiAvatarID === avatarID;
+
return (
-
-
{
- if (totem && !isTargetOpened) {
- setTargetOpened(true);
- }
- }}
- >
-
- {isTargetOpened && isAllowModify ? (
-
-
-
+
+ {isModifyOpened ? (
+ <>
+
+
+
+
+ {avatarName}
+
+ {
- setTextInput(value);
+ setTextInputModify(value);
}}
/>
-
-
-
-
-
-
- ) : (
- {text}
- )}
-
-
- {getDatetime(date)}
-
+
+
+
+ ) : (
+ <>
+
+
+
+
+
+ {avatarName}
+ {text}
+
+
+
+
+ {getDatetime(date)}
+ {(totem || isAllowModify) && (
+
+ {totem && (
+
+ )}
+ {isAllowModify && (
+
+ )}
+ {isAllowModify && (
+
+ )}
+
+ )}
+
+
+
+ )}
-
-
-
-
-
- {
- setTargetTextInput(value);
- }}
- />
-
-
-
-
-
-
+
+
+
+
+
+
+ {taehuiAvatarName}
+
+ {
+ setTextInputPost(value);
+ }}
+ />
+
+
+
-
-
- {text}
-
-
- {getDatetime(date)}
-
-
-
- );
-}
diff --git "a/taehui-fe/src/app/\133language\135/forum/components/CommentView.tsx" "b/taehui-fe/src/app/\133language\135/forum/components/CommentView.tsx"
index afd8b21..7d99f3d 100644
--- "a/taehui-fe/src/app/\133language\135/forum/components/CommentView.tsx"
+++ "b/taehui-fe/src/app/\133language\135/forum/components/CommentView.tsx"
@@ -1,16 +1,22 @@
import CommentItem from "@/app/[language]/forum/components/CommentItem";
import useGetComment from "@/app/[language]/forum/query/useGetComment";
import usePostComment from "@/app/[language]/forum/query/usePostComment";
-import AvatarTitle from "@/components/AvatarTitle";
+import AvatarDrawing from "@/components/AvatarDrawing";
import { useTaehuiStore } from "@/state/Stores";
import { GetCommentAPI } from "@/type/wwwAPI";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import { useParams } from "next/navigation";
import { ReactNode, useMemo, useState } from "react";
+import { PencilFill } from "react-bootstrap-icons";
+import Button from "react-bootstrap/Button";
+import Col from "react-bootstrap/Col";
+import FormControl from "react-bootstrap/FormControl";
+import InputGroup from "react-bootstrap/InputGroup";
+import Row from "react-bootstrap/Row";
+import Stack from "react-bootstrap/Stack";
import ReactTextareaAutosize from "react-textarea-autosize";
import { toast } from "react-toastify";
-import { Badge, Button, Col, Row } from "reactstrap";
export default observer(() => {
const t = useTranslations();
@@ -22,10 +28,10 @@
const { data: comment } = useGetComment(essayID);
const { mutateAsync: postComment } = usePostComment();
- const commentComponents = useMemo(() => {
- const commentComponents: ReactNode[] = [];
+ const commentItems = useMemo(() => {
+ const commentItems: ReactNode[] = [];
- const setCommentComponents =
+ const setCommentItems =
(level: number) =>
({
commentID,
@@ -35,7 +41,7 @@
text,
comments,
}: GetCommentAPI[number]) => {
- commentComponents.push(
+ commentItems.push(
,
);
- comments.forEach(setCommentComponents(level + 1));
+ comments.forEach(setCommentItems(level + 1));
};
comment.forEach((comment) => {
- setCommentComponents(0)(comment);
+ setCommentItems(0)(comment);
});
- return commentComponents;
+ return commentItems;
}, [comment]);
return (
- <>
-
-
-
- {t("commentCount", { commentCount: commentComponents.length })}
-
-
-
- {commentComponents}
+
+ {t("commentCount", { commentCount: commentItems.length })}
+
+ {commentItems}
{taehuiLevel >= 1 && (
-
-
-
-
- {
- setTextInput(value);
- }}
- />
-
-
-
-
-
-
+
+
+
+
+
+ {taehuiAvatarName}
+
+ {
+ setTextInput(value);
+ }}
+ />
+
+
+
)}
-
+
);
});
diff --git "a/taehui-fe/src/app/\133language\135/forum/components/EssayTitleView.tsx" "b/taehui-fe/src/app/\133language\135/forum/components/EssayTitleView.tsx"
deleted file mode 100644
index 9d5d872..0000000
--- "a/taehui-fe/src/app/\133language\135/forum/components/EssayTitleView.tsx"
+++ /dev/null
@@ -1,47 +0,0 @@
-import AvatarTitle from "@/components/AvatarTitle";
-import { EssayAPIEssay } from "@/type/wwwAPI";
-import { useTranslations } from "next-intl";
-import { Col, ListGroupItem, Row } from "reactstrap";
-import { getDatetime } from "taehui-ts/date";
-import { useTo } from "taehui-ts/fe-utilities";
-
-export default function EssayTitleView({
- forumID,
- forumTitle,
- essay: { essayID, title, avatarID, avatarName, date, commentCount, hitCount },
-}: {
- forumID?: string;
- forumTitle?: string;
- essay: EssayAPIEssay;
-}) {
- const t = useTranslations();
- const to = useTo();
-
- const isLoading = !(forumID && essayID);
-
- return (
- {
- to(`/forum/${forumID}/${essayID}`);
- }
- }
- >
-
-
-
- {forumTitle && `[${forumTitle}]`} {title} [{commentCount}]
-
-
-
- {getDatetime(date)}
-
- {t("hitCount", { hitCount })}
-
-
-
- );
-}
diff --git "a/taehui-fe/src/app/\133language\135/forum/components/FileUploadingWindow.tsx" "b/taehui-fe/src/app/\133language\135/forum/components/FileUploadingWindow.tsx"
new file mode 100644
index 0000000..26d1b34
--- /dev/null
+++ "b/taehui-fe/src/app/\133language\135/forum/components/FileUploadingWindow.tsx"
@@ -0,0 +1,17 @@
+import { useTranslations } from "next-intl";
+import Modal from "react-bootstrap/Modal";
+import ModalBody from "react-bootstrap/ModalBody";
+
+export default function FileUploadingWindow({
+ isOpened,
+}: {
+ isOpened: boolean;
+}) {
+ const t = useTranslations();
+
+ return (
+
+ {t("fileUploading")}
+
+ );
+}
diff --git "a/taehui-fe/src/app/\133language\135/forum/components/ForumItem.tsx" "b/taehui-fe/src/app/\133language\135/forum/components/ForumItem.tsx"
index cb9f0cf..9ca4e98 100644
--- "a/taehui-fe/src/app/\133language\135/forum/components/ForumItem.tsx"
+++ "b/taehui-fe/src/app/\133language\135/forum/components/ForumItem.tsx"
@@ -1,7 +1,8 @@
-import EssayTitleView from "@/app/[language]/forum/components/EssayTitleView";
+import EssayTitleView from "@/components/EssayTitleView";
import { EssayAPIEssay } from "@/type/wwwAPI";
import Link from "next/link";
-import { Badge, ListGroup, ListGroupItemHeading } from "reactstrap";
+import ListGroup from "react-bootstrap/ListGroup";
+import ListGroupItem from "react-bootstrap/ListGroupItem";
export default function ForumItem({
forum: { forumID, title, essays },
@@ -13,17 +14,15 @@
};
}) {
return (
- <>
-
-
- {title}
-
-
-
- {essays.map((essay) => (
-
- ))}
-
-
+
+
+ {title}
+
+ {essays.map((essay) => (
+
+
+
+ ))}
+
);
}
diff --git "a/taehui-fe/src/app/\133language\135/forum/components/PositionInput.tsx" "b/taehui-fe/src/app/\133language\135/forum/components/PositionInput.tsx"
index d664c53..2bd3508 100644
--- "a/taehui-fe/src/app/\133language\135/forum/components/PositionInput.tsx"
+++ "b/taehui-fe/src/app/\133language\135/forum/components/PositionInput.tsx"
@@ -1,7 +1,7 @@
import { useForumStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useMemo } from "react";
-import { Pagination, PaginationItem, PaginationLink } from "reactstrap";
+import Pagination from "react-bootstrap/Pagination";
import { useIntParam } from "taehui-ts/fe-utilities";
export default observer(() => {
@@ -9,8 +9,8 @@
const { param: page, setParam: setPage } = useIntParam("page", 1);
- const targetPages = useMemo(() => {
- const targetPages = [];
+ const pages = useMemo(() => {
+ const pages = [];
for (
let i = 1 + Math.floor((page - 1) / pageUnit) * pageUnit;
i <=
@@ -20,9 +20,9 @@
);
++i
) {
- targetPages.push(i);
+ pages.push(i);
}
- return targetPages;
+ return pages;
}, [lastPage, page, pageUnit]);
const isLowestPage = useMemo(() => page === 1, [page]);
@@ -30,49 +30,41 @@
return (
-
- {
+ setPage(1);
+ }}
+ />
+ {
+ setPage(page - 1);
+ }}
+ />
+ {pages.map((targetPage) => (
+ {
- setPage(1);
+ setPage(targetPage);
}}
- />
-
-
- {
- setPage(page - 1);
- }}
- />
-
- {targetPages.map((targetPage) => (
-
- {
- setPage(targetPage);
- }}
- >
- {targetPage}
-
-
+ >
+ {targetPage}
+
))}
-
- {
- setPage(page + 1);
- }}
- />
-
-
- {
- setPage(lastPage);
- }}
- />
-
+ {
+ setPage(page + 1);
+ }}
+ />
+ {
+ setPage(lastPage);
+ }}
+ />
);
});
diff --git "a/taehui-fe/src/app/\133language\135/forum/components/TextView.module.scss" "b/taehui-fe/src/app/\133language\135/forum/components/TextView.module.scss"
index f097979..627ee3f 100644
--- "a/taehui-fe/src/app/\133language\135/forum/components/TextView.module.scss"
+++ "b/taehui-fe/src/app/\133language\135/forum/components/TextView.module.scss"
@@ -1,5 +1,4 @@
@mixin essay() {
- border: thin black solid;
max-width: 100%;
}
diff --git "a/taehui-fe/src/app/\133language\135/forum/components/TextView.tsx" "b/taehui-fe/src/app/\133language\135/forum/components/TextView.tsx"
index 4297ad2..199a740 100644
--- "a/taehui-fe/src/app/\133language\135/forum/components/TextView.tsx"
+++ "b/taehui-fe/src/app/\133language\135/forum/components/TextView.tsx"
@@ -1,15 +1,16 @@
import scss from "@/app/[language]/forum/components/TextView.module.scss";
import useGetHit from "@/app/[language]/forum/query/useGetHit";
-import AvatarTitle from "@/components/AvatarTitle";
+import AvatarDrawing from "@/components/AvatarDrawing";
import { getHitTexts, tag } from "@/utilities/Utility";
import { sanitize } from "isomorphic-dompurify";
import { useTranslations } from "next-intl";
import { useEffect, useMemo, useState } from "react";
-import { Badge, Col, Row } from "reactstrap";
+import Col from "react-bootstrap/Col";
+import Row from "react-bootstrap/Row";
+import Stack from "react-bootstrap/Stack";
import { getDatetime } from "taehui-ts/date";
export default function TextView({
- forumTitle,
title,
text,
avatarID,
@@ -17,7 +18,6 @@
date,
hitCount,
}: {
- forumTitle: string;
title: string;
text: string;
avatarID: string;
@@ -60,35 +60,32 @@
return (
<>
-
-
- {forumTitle}
+
+
+
-
-
-
- {title}
-
-
- {typeof hitCount === "number" && (
- <>
- {getDatetime(date)}
-
+
+
+ {avatarName}
+ {title}
+
+
+
+
+ {getDatetime(date)}
+ {typeof hitCount === "number" && (
{t("hitCount", { hitCount })}
-
- )}
+ )}
+
-
-
-
-
-
+
+
);
}
diff --git "a/taehui-fe/src/app/\133language\135/forum/query/useGetEssay.ts" "b/taehui-fe/src/app/\133language\135/forum/query/useGetEssay.ts"
index ec65822..bd39312 100644
--- "a/taehui-fe/src/app/\133language\135/forum/query/useGetEssay.ts"
+++ "b/taehui-fe/src/app/\133language\135/forum/query/useGetEssay.ts"
@@ -1,6 +1,7 @@
import { EssayAPIEssay, GetEssayAPI } from "@/type/wwwAPI";
import { wwwAPI } from "@/utilities/wwwAPI";
import { useQuery } from "@tanstack/react-query";
+import { getDatetime } from "taehui-ts/date";
import { useLanguage } from "taehui-ts/language";
export default function useGetEssay(essayID?: string) {
@@ -29,7 +30,7 @@
forumTitle: "",
title: "",
text: "",
- date: "",
+ date: getDatetime(),
avatarID: "",
avatarName: "",
hitCount: 0,
diff --git "a/taehui-fe/src/app/\133language\135/forum/query/useWipeAutoEssay.ts" "b/taehui-fe/src/app/\133language\135/forum/query/useWipeAutoEssay.ts"
index 3035212..7932d0a 100644
--- "a/taehui-fe/src/app/\133language\135/forum/query/useWipeAutoEssay.ts"
+++ "b/taehui-fe/src/app/\133language\135/forum/query/useWipeAutoEssay.ts"
@@ -10,8 +10,14 @@
const queryClient = useQueryClient();
return useMutation({
- mutationFn: async ({ autoEssayID }: { autoEssayID: number }) => {
- await wwwAPI.delete(`/autoEssay/${autoEssayID}`, {
+ mutationFn: async ({
+ forumID,
+ autoEssayID,
+ }: {
+ forumID: string;
+ autoEssayID: number;
+ }) => {
+ await wwwAPI.delete(`/autoEssay/${forumID}/${autoEssayID}`, {
headers: { millis: getMillis(), totem },
});
},
diff --git "a/taehui-fe/src/app/\133language\135/forum/state/setForumStore.ts" "b/taehui-fe/src/app/\133language\135/forum/state/setForumStore.ts"
index cefc759..ee04ce9 100644
--- "a/taehui-fe/src/app/\133language\135/forum/state/setForumStore.ts"
+++ "b/taehui-fe/src/app/\133language\135/forum/state/setForumStore.ts"
@@ -3,6 +3,7 @@
title: "",
text: "",
autoEssayID: undefined as number | undefined,
+ isAutoEssayOpened: false,
lastPage: 0,
pageUnit: 10,
@@ -21,6 +22,10 @@
this.autoEssayID = autoEssayID;
},
+ setAutoEssayOpened(isAutoEssayOpened: boolean) {
+ this.isAutoEssayOpened = isAutoEssayOpened;
+ },
+
setLastPage(lastPage: number) {
this.lastPage = lastPage;
},
diff --git "a/taehui-fe/src/app/\133language\135/forums/\133\133...forumGroup\135\135/page.tsx" "b/taehui-fe/src/app/\133language\135/forums/\133\133...forumGroup\135\135/page.tsx"
index a1c25bd..fff5a43 100644
--- "a/taehui-fe/src/app/\133language\135/forums/\133\133...forumGroup\135\135/page.tsx"
+++ "b/taehui-fe/src/app/\133language\135/forums/\133\133...forumGroup\135\135/page.tsx"
@@ -3,30 +3,21 @@
import ForumItem from "@/app/[language]/forum/components/ForumItem";
import useGetForums from "@/app/[language]/forums/query/useGetForums";
import { useParams } from "next/navigation";
-import { useEffect, useState } from "react";
-import { Col, Row } from "reactstrap";
-import { useWindowArea } from "taehui-ts/fe-utilities";
+import Col from "react-bootstrap/Col";
+import Row from "react-bootstrap/Row";
export default function Page() {
- const [table, setTable] = useState(1);
-
- const { windowLength } = useWindowArea();
-
- useEffect(() => {
- setTable(windowLength < 992 ? 1 : 2);
- }, [windowLength]);
-
const { forumGroup } = useParams<{ forumGroup?: string }>();
const { data: forums, isFetched: isForumsLoaded } = useGetForums(forumGroup);
- return [...Array(Math.ceil(forums.length / table)).keys()].map((i) => (
-
- {forums.slice(table * i, table * i + table).map((forum) => (
-
+ return (
+
+ {forums.map((forum) => (
+
))}
- ));
+ );
}
diff --git "a/taehui-fe/src/app/\133language\135/layout.tsx" "b/taehui-fe/src/app/\133language\135/layout.tsx"
index 3ad3e2c..5189e04 100644
--- "a/taehui-fe/src/app/\133language\135/layout.tsx"
+++ "b/taehui-fe/src/app/\133language\135/layout.tsx"
@@ -4,13 +4,11 @@
import { getMessages } from "next-intl/server";
import { ReactNode } from "react";
-import "bootstrap/dist/css/bootstrap.min.css";
import "react-contexify/dist/ReactContexify.css";
import "react-toastify/dist/ReactToastify.css";
-
import "@/app/globals.scss";
-export default async function RootLayout({
+export default async function Layout({
children,
params: { language },
}: {
@@ -18,7 +16,7 @@
params: { language: string };
}) {
return (
-
+
Taehui
diff --git "a/taehui-fe/src/app/\133language\135/page.tsx" "b/taehui-fe/src/app/\133language\135/page.tsx"
index 1a00587..a4fa63c 100644
--- "a/taehui-fe/src/app/\133language\135/page.tsx"
+++ "b/taehui-fe/src/app/\133language\135/page.tsx"
@@ -1,35 +1,42 @@
"use client";
import HitView from "@/app/[language]/components/HitView";
-import LatestAvatarsView from "@/app/[language]/components/LatestAvatarsView";
import LatestCommentsView from "@/app/[language]/components/LatestCommentsView";
+import LatestEnrolledAvatarsView from "@/app/[language]/components/LatestEnrolledAvatarsView";
import LatestEssaysView from "@/app/[language]/components/LatestEssaysView";
+import LatestLoggedInAvatarsView from "@/app/[language]/components/LatestLoggedInAvatarsView";
+import MainView from "@/app/[language]/components/MainView";
import WantInput from "@/app/[language]/want/components/WantInput";
-import { useTranslations } from "next-intl";
+import Col from "react-bootstrap/Col";
+import Row from "react-bootstrap/Row";
+import Stack from "react-bootstrap/Stack";
export default function Page() {
- const t = useTranslations();
-
return (
- <>
+
- {t("main00")}
-
- {t("main01")}
-
- {t("main02")}
-
- {t("main03")}
-
+
-
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
);
}
diff --git "a/taehui-fe/src/app/\133language\135/ppt/page.tsx" "b/taehui-fe/src/app/\133language\135/ppt/page.tsx"
index d650e1b..b63761e 100644
--- "a/taehui-fe/src/app/\133language\135/ppt/page.tsx"
+++ "b/taehui-fe/src/app/\133language\135/ppt/page.tsx"
@@ -1,156 +1,154 @@
export default function Page() {
return (
<>
-
- 이름: 박태희
-
- 생년월일: 1994년 12월 21일
-
- 메일 주소:{" "}
- taehui@taehui.ddns.net
-
- 직장
-
- -
- (주) 네이버파이낸셜{" "}
- 프론트엔드 개발자 (2020년 3월 12일 ~)
-
- 경기도 성남시 분당구 정자일로 95 1784
-
- -
- (주) 네이버 2020 신입 프론트엔드
- 2020 신입 프론트엔드 개발자 (2020년 1월 2일 ~ 2020년 3월 11일)
-
- 경기도 성남시 분당구 불정로 6 NAVER
-
-
-
- 거주지
-
- - 경기도 성남시 분당구 (2020년)
- - 세종특별자치시 (2018년 ~ 2020년)
- - 대전광역시 유성구 (1994년 ~ 2018년)
-
-
- 경력
-
- -
-
- (주) 라인플러스 주 3일 인턴
- {" "}
- 안드로이드 앱 개발자 (2019년 4월 22일 ~ 2019년 6월 12일)
-
- 경기도 성남시 분당구 분당내곡로 117 크래프톤타워
-
-
-
- 학력
-
- -
- 금성초등학교 졸업 (2001년
- ~ 2007년)
-
- 대전광역시 유성구 신성로72번길 5
-
- -
- 성덕중학교 졸업 (2007년 ~
- 2010년)
-
- 대전광역시 유성구 신성로 19
-
- -
- 대덕고등학교 중퇴 후 고졸
- 검정고시 (2010년 ~ 2012년)
-
- 대전광역시 유성구 대덕대로556번길 15
-
- -
-
- 서울과학기술대학교 컴퓨터공학과
- {" "}
- 졸업 (평점 3.81 / 4.5) (2013년 3월 2일 ~ 2019년 2월 22일)
-
- 서울특별시 노원구 공릉로 232
-
-
-
- 군 복무
-
- -
- 대전시립박물관{" "}
- 사회복무요원 (2015년 3월 9일 ~ 2017년 3월 8일)
-
- 대전광역시 유성구 도안대로 398
-
- -
-
- {`"판, 세상을 담다"`}
- {" "}
- 골패점 개발자 (2015년 4월 30일 ~ 2015년 8월 30일)
-
- 대전광역시 유성구 도안대로 398
-
-
-
- 자격증
-
-
- 공모전
-
-
+ 이름: 박태희
+
+ 생년월일: 1994년 12월 21일
+
+ 메일 주소:{" "}
+ taehui@taehui.ddns.net
+
+ 직장
+
+ -
+ (주) 네이버파이낸셜{" "}
+ 프론트엔드 개발자 (2020년 3월 12일 ~)
+
+ 경기도 성남시 분당구 정자일로 95 1784
+
+ -
+ (주) 네이버 2020 신입 프론트엔드
+ 2020 신입 프론트엔드 개발자 (2020년 1월 2일 ~ 2020년 3월 11일)
+
+ 경기도 성남시 분당구 불정로 6 NAVER
+
+
+
+ 거주지
+
+ - 경기도 성남시 분당구 (2020년)
+ - 세종특별자치시 (2018년 ~ 2020년)
+ - 대전광역시 유성구 (1994년 ~ 2018년)
+
+
+ 경력
+
+ -
+
+ (주) 라인플러스 주 3일 인턴
+ {" "}
+ 안드로이드 앱 개발자 (2019년 4월 22일 ~ 2019년 6월 12일)
+
+ 경기도 성남시 분당구 분당내곡로 117 크래프톤타워
+
+
+
+ 학력
+
+ -
+ 금성초등학교 졸업 (2001년 ~
+ 2007년)
+
+ 대전광역시 유성구 신성로72번길 5
+
+ -
+ 성덕중학교 졸업 (2007년 ~
+ 2010년)
+
+ 대전광역시 유성구 신성로 19
+
+ -
+ 대덕고등학교 중퇴 후 고졸
+ 검정고시 (2010년 ~ 2012년)
+
+ 대전광역시 유성구 대덕대로556번길 15
+
+ -
+
+ 서울과학기술대학교 컴퓨터공학과
+ {" "}
+ 졸업 (평점 3.81 / 4.5) (2013년 3월 2일 ~ 2019년 2월 22일)
+
+ 서울특별시 노원구 공릉로 232
+
+
+
+ 군 복무
+
+ -
+ 대전시립박물관{" "}
+ 사회복무요원 (2015년 3월 9일 ~ 2017년 3월 8일)
+
+ 대전광역시 유성구 도안대로 398
+
+ -
+
+ {`"판, 세상을 담다"`}
+ {" "}
+ 골패점 개발자 (2015년 4월 30일 ~ 2015년 8월 30일)
+
+ 대전광역시 유성구 도안대로 398
+
+
+
+ 자격증
+
+
+ 공모전
+
);
}
diff --git "a/taehui-fe/src/app/\133language\135/query/useGetLatestAvatar.ts" "b/taehui-fe/src/app/\133language\135/query/useGetLatestAvatar.ts"
deleted file mode 100644
index 0acd626..0000000
--- "a/taehui-fe/src/app/\133language\135/query/useGetLatestAvatar.ts"
+++ /dev/null
@@ -1,15 +0,0 @@
-import { GetLatestAvatarAPI } from "@/type/wwwAPI";
-
-import { wwwAPI } from "@/utilities/wwwAPI";
-import { useQuery } from "@tanstack/react-query";
-
-export default function useGetLatestAvatar() {
- return useQuery({
- queryKey: ["latestAvatar"],
- queryFn: async () => {
- const { data } = await wwwAPI.get("/avatar/latest");
- return data;
- },
- initialData: [[], []],
- });
-}
diff --git "a/taehui-fe/src/app/\133language\135/query/useGetLatestEnrolledAvatar.ts" "b/taehui-fe/src/app/\133language\135/query/useGetLatestEnrolledAvatar.ts"
new file mode 100644
index 0000000..0558fd1
--- /dev/null
+++ "b/taehui-fe/src/app/\133language\135/query/useGetLatestEnrolledAvatar.ts"
@@ -0,0 +1,15 @@
+import { GetLatestAPI } from "@/type/wwwAPI";
+
+import { wwwAPI } from "@/utilities/wwwAPI";
+import { useQuery } from "@tanstack/react-query";
+
+export default function useGetLatestEnrolledAvatar() {
+ return useQuery({
+ queryKey: ["latestEnrolledAvatar"],
+ queryFn: async () => {
+ const { data } = await wwwAPI.get("/avatar/latestEnrolled");
+ return data;
+ },
+ initialData: [],
+ });
+}
diff --git "a/taehui-fe/src/app/\133language\135/query/useGetLatestLoggedInAvatar.ts" "b/taehui-fe/src/app/\133language\135/query/useGetLatestLoggedInAvatar.ts"
new file mode 100644
index 0000000..688040e
--- /dev/null
+++ "b/taehui-fe/src/app/\133language\135/query/useGetLatestLoggedInAvatar.ts"
@@ -0,0 +1,15 @@
+import { GetLatestAPI } from "@/type/wwwAPI";
+
+import { wwwAPI } from "@/utilities/wwwAPI";
+import { useQuery } from "@tanstack/react-query";
+
+export default function useGetLatestLoggedInAvatar() {
+ return useQuery({
+ queryKey: ["latestLoggedInAvatar"],
+ queryFn: async () => {
+ const { data } = await wwwAPI.get("/avatar/latestLoggedIn");
+ return data;
+ },
+ initialData: [],
+ });
+}
diff --git "a/taehui-fe/src/app/\133language\135/want/\133wantVariety\135/\133\133...want\135\135/page.tsx" "b/taehui-fe/src/app/\133language\135/want/\133wantVariety\135/\133\133...want\135\135/page.tsx"
index fac28a7..b4d9b0b 100644
--- "a/taehui-fe/src/app/\133language\135/want/\133wantVariety\135/\133\133...want\135\135/page.tsx"
+++ "b/taehui-fe/src/app/\133language\135/want/\133wantVariety\135/\133\133...want\135\135/page.tsx"
@@ -1,27 +1,28 @@
"use client";
-import CommentTitleView from "@/app/[language]/forum/components/CommentTitleView";
-import EssayTitleView from "@/app/[language]/forum/components/EssayTitleView";
import WantInput from "@/app/[language]/want/components/WantInput";
import useGetWant from "@/app/[language]/want/query/useGetWant";
+import CommentTitleView from "@/components/CommentTitleView";
+import EssayTitleView from "@/components/EssayTitleView";
import { useWantStore } from "@/state/Stores";
import { GetWantAPIComment, GetWantAPIEssay } from "@/type/wwwAPI";
-import { useTranslations } from "next-intl";
import { useParams } from "next/navigation";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
+import ListGroup from "react-bootstrap/ListGroup";
+import ListGroupItem from "react-bootstrap/ListGroupItem";
+import Stack from "react-bootstrap/Stack";
import InfiniteScroll from "react-infinite-scroll-component";
-import { Col, ListGroup, ListGroupItemHeading, Row } from "reactstrap";
-import { useWant } from "taehui-ts/fe-utilities";
export default function Page() {
- const t = useTranslations();
-
const { setTextInput } = useWantStore();
const { wantVariety } = useParams<{
wantVariety: "essay" | "comment";
}>();
- const { want } = useWant("/want");
+ let { want: [want] = [""] } = useParams<{
+ want: string[];
+ }>();
+ want = useMemo(() => decodeURIComponent(want), [want]);
const {
fetchNextPage,
@@ -35,50 +36,42 @@
}, [setTextInput, want]);
return (
- <>
+
-
-
-
- {t("wantView")}
-
- {isWantLoaded && (
-
- fetchNextPage()}
- hasMore={hasNextPage}
- loader={null}
- >
- {wantVariety === "essay" &&
- (pages as GetWantAPIEssay[]).flatMap((wantedEssayTitle) => {
- return (
-
- );
- })}
- {wantVariety === "comment" &&
- (pages as GetWantAPIComment[]).flatMap(
- (wantedCommentTitle) => {
- return (
-
- );
- },
- )}
-
-
- )}
-
-
-
+ {isWantLoaded && (pages as unknown[]).length > 0 && (
+ <>
+
+
+ fetchNextPage()}
+ hasMore={hasNextPage}
+ loader={null}
+ >
+ {wantVariety === "essay" &&
+ (pages as GetWantAPIEssay[]).flatMap((wantedEssayTitle) => (
+
+
+
+ ))}
+ {wantVariety === "comment" &&
+ (pages as GetWantAPIComment[]).flatMap((wantedCommentTitle) => (
+
+
+
+ ))}
+
+
+
+ )}
+
);
}
diff --git "a/taehui-fe/src/app/\133language\135/want/components/WantInput.tsx" "b/taehui-fe/src/app/\133language\135/want/components/WantInput.tsx"
index dd82816..b42e1f5 100644
--- "a/taehui-fe/src/app/\133language\135/want/components/WantInput.tsx"
+++ "b/taehui-fe/src/app/\133language\135/want/components/WantInput.tsx"
@@ -1,32 +1,28 @@
import { useWantStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
-import { ChangeEventHandler, KeyboardEventHandler, useState } from "react";
-import {
- Button,
- Col,
- Dropdown,
- DropdownItem,
- DropdownMenu,
- DropdownToggle,
- Input,
- Row,
-} from "reactstrap";
-import { useTo } from "taehui-ts/fe-utilities";
+import { useRouter } from "next/navigation";
+import { ChangeEventHandler, KeyboardEventHandler } from "react";
+import { Search } from "react-bootstrap-icons";
+import Button from "react-bootstrap/Button";
+import Dropdown from "react-bootstrap/Dropdown";
+import DropdownItem from "react-bootstrap/DropdownItem";
+import DropdownMenu from "react-bootstrap/DropdownMenu";
+import DropdownToggle from "react-bootstrap/DropdownToggle";
+import FormControl from "react-bootstrap/FormControl";
+import InputGroup from "react-bootstrap/InputGroup";
export default observer(() => {
const { textInput, setTextInput, wantVariety, setWantVariety } =
useWantStore();
- const [isWantVarietyOpened, setWantVarietyOpened] = useState(false);
-
const t = useTranslations();
- const to = useTo();
+ const { push } = useRouter();
const onWant = () => {
if (textInput) {
- to(`/want/${wantVariety}/${encodeURIComponent(textInput)}`);
+ push(`/want/${wantVariety}/${textInput}`);
}
};
@@ -42,42 +38,30 @@
}
};
- const onCloseWantVariety = () => {
- setWantVarietyOpened(!isWantVarietyOpened);
- };
-
- const onInputWantVariety = (wantVariety: "essay" | "comment") => () => {
- setWantVariety(wantVariety);
- };
-
return (
-
-
-
- {t(wantVariety)}
-
-
- {t("essay")}
-
-
- {t("comment")}
-
-
-
-
-
-
-
-
-
-
-
+
+ {
+ if (eventKey) {
+ setWantVariety(eventKey);
+ }
+ }}
+ >
+ {t(wantVariety)}
+
+ {t("essay")}
+ {t("comment")}
+
+
+
+
+
);
});
diff --git a/taehui-fe/src/app/globals.scss b/taehui-fe/src/app/globals.scss
index 49a6948..052b097 100644
--- a/taehui-fe/src/app/globals.scss
+++ b/taehui-fe/src/app/globals.scss
@@ -1,62 +1,6 @@
-@mixin default() {
- font-family: "Century Gothic", sans-serif;
- font-size: 0.75rem;
-}
+@import "~bootstrap/scss/bootstrap";
+@import "taehui-ts/globals";
body {
- background: url("../assets/hexellence.png")
-}
-
-button {
- &.btn {
- @include default();
- }
-
- &.page-link {
- @include default();
- }
-
- &.dropdown-item {
- @include default();
- }
-}
-
-div, li, span {
- &.route {
- cursor: pointer;
- }
-}
-
-textarea {
- &.form-control {
- @include default();
- }
-}
-
-img {
- &.avatar {
- border: thin black solid;
- border-radius: 50%;
- }
-}
-
-input[type="search"],
-input[type="submit"],
-input[type="text"],
-input[type="email"],
-input[type="password"] {
- @include default();
-}
-
-span {
- @include default();
-
- &.badge {
- @include default();
- font-weight: normal;
- }
-
- &.ln {
- white-space: break-spaces;
- }
+ background: url("../assets/dark-honeycomb.png");
}
diff --git "a/taehui-fe/src/app/www/autoEssay/\133forumID\135/\133autoEssayID\135/route.ts" "b/taehui-fe/src/app/www/autoEssay/\133forumID\135/\133autoEssayID\135/route.ts"
index 5642836..71305f1 100644
--- "a/taehui-fe/src/app/www/autoEssay/\133forumID\135/\133autoEssayID\135/route.ts"
+++ "b/taehui-fe/src/app/www/autoEssay/\133forumID\135/\133autoEssayID\135/route.ts"
@@ -1,18 +1,11 @@
-import logIP from "@/app/www/media/logIP";
-import validateMillis from "@/app/www/media/validateMillis";
-import validateTotem from "@/app/www/media/validateTotem";
import {
doModifyAutoEssay,
- getAutoEssays,
postAutoEssay,
wipeAutoEssay,
} from "@/app/www/logic/autoEssay";
-
-export const GET = validateMillis(async (req, { params: { forumID } }) => {
- const avatarID = req.headers.get("avatarID");
-
- return Response.json(await getAutoEssays(forumID, avatarID as string));
-});
+import logIP from "@/app/www/media/logIP";
+import validateMillis from "@/app/www/media/validateMillis";
+import validateTotem from "@/app/www/media/validateTotem";
export const POST = logIP(
validateMillis(
@@ -55,10 +48,10 @@
export const DELETE = logIP(
validateMillis(
validateTotem(async (req, { params: { autoEssayID } }) => {
- const avatarID = req.headers.get("avatarID");
+ const avatarID = req.headers.get("avatarID") as string;
return new Response(undefined, {
- status: (await wipeAutoEssay(Number(autoEssayID), avatarID as string))
+ status: (await wipeAutoEssay(Number(autoEssayID), avatarID))
? 204
: 403,
});
diff --git "a/taehui-fe/src/app/www/autoEssay/\133forumID\135/route.ts" "b/taehui-fe/src/app/www/autoEssay/\133forumID\135/route.ts"
index bc491be..ca72f1a 100644
--- "a/taehui-fe/src/app/www/autoEssay/\133forumID\135/route.ts"
+++ "b/taehui-fe/src/app/www/autoEssay/\133forumID\135/route.ts"
@@ -1,12 +1,14 @@
+import { getAutoEssays, postAutoEssay } from "@/app/www/logic/autoEssay";
import validateMillis from "@/app/www/media/validateMillis";
import validateTotem from "@/app/www/media/validateTotem";
-import { getAutoEssays, postAutoEssay } from "@/app/www/logic/autoEssay";
-export const GET = validateMillis(async (req, { params: { forumID } }) => {
- const avatarID = req.headers.get("avatarID") as string;
+export const GET = validateMillis(
+ validateTotem(async (req, { params: { forumID } }) => {
+ const avatarID = req.headers.get("avatarID") as string;
- return Response.json(await getAutoEssays(forumID, avatarID));
-});
+ return Response.json(await getAutoEssays(forumID, avatarID));
+ }),
+);
export const POST = validateMillis(
validateTotem(async (req, { params: { forumID } }) => {
diff --git a/taehui-fe/src/app/www/avatar/latest/route.ts b/taehui-fe/src/app/www/avatar/latest/route.ts
deleted file mode 100644
index 3e8e607..0000000
--- a/taehui-fe/src/app/www/avatar/latest/route.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import logIP from "@/app/www/media/logIP";
-import { getLatestAvatars } from "@/app/www/logic/avatar";
-
-export const GET = logIP(async () => {
- return Response.json(await getLatestAvatars());
-});
diff --git a/taehui-fe/src/app/www/avatar/latestEnrolled/route.ts b/taehui-fe/src/app/www/avatar/latestEnrolled/route.ts
new file mode 100644
index 0000000..3c66f91
--- /dev/null
+++ b/taehui-fe/src/app/www/avatar/latestEnrolled/route.ts
@@ -0,0 +1,6 @@
+import { getLatestEnrolledAvatars } from "@/app/www/logic/avatar";
+import logIP from "@/app/www/media/logIP";
+
+export const GET = logIP(async () => {
+ return Response.json(await getLatestEnrolledAvatars());
+});
diff --git a/taehui-fe/src/app/www/avatar/latestLoggedIn/route.ts b/taehui-fe/src/app/www/avatar/latestLoggedIn/route.ts
new file mode 100644
index 0000000..c2233ab
--- /dev/null
+++ b/taehui-fe/src/app/www/avatar/latestLoggedIn/route.ts
@@ -0,0 +1,6 @@
+import { getLatestLoggedInAvatars } from "@/app/www/logic/avatar";
+import logIP from "@/app/www/media/logIP";
+
+export const GET = logIP(async () => {
+ return Response.json(await getLatestLoggedInAvatars());
+});
diff --git a/taehui-fe/src/app/www/avatar/totem/route.ts b/taehui-fe/src/app/www/avatar/totem/route.ts
index 0b9b1b8..96aa014 100644
--- a/taehui-fe/src/app/www/avatar/totem/route.ts
+++ b/taehui-fe/src/app/www/avatar/totem/route.ts
@@ -9,10 +9,10 @@
return Response.json(
{
avatarID: headers.get("avatarID"),
- avatarName: headers.get("avatarName"),
+ avatarName: decodeURIComponent(headers.get("avatarName") as string),
level: Number(headers.get("level")),
- fax: headers.get("fax"),
- avatarIntro: headers.get("avatarIntro"),
+ fax: decodeURIComponent(headers.get("fax") as string),
+ avatarIntro: decodeURIComponent(headers.get("avatarIntro") as string),
},
{ status: 201 },
);
diff --git a/taehui-fe/src/app/www/commentary/route.ts b/taehui-fe/src/app/www/commentary/route.ts
index de1d8c1..55b1e98 100644
--- a/taehui-fe/src/app/www/commentary/route.ts
+++ b/taehui-fe/src/app/www/commentary/route.ts
@@ -1,11 +1,11 @@
-import logIP from "@/app/www/media/logIP";
-import validateMillis from "@/app/www/media/validateMillis";
import {
doModifyCommentary,
getCommentary,
postCommentary,
wipeCommentary,
} from "@/app/www/logic/commentary";
+import logIP from "@/app/www/media/logIP";
+import validateMillis from "@/app/www/media/validateMillis";
export const GET = logIP(async () => {
return Response.json(await getCommentary());
diff --git a/taehui-fe/src/app/www/file/route.ts b/taehui-fe/src/app/www/file/route.ts
index 53ca5f2..07f8a15 100644
--- a/taehui-fe/src/app/www/file/route.ts
+++ b/taehui-fe/src/app/www/file/route.ts
@@ -22,7 +22,7 @@
await writeFile(
join(ESSAY_ENTRY_PATH, fileName),
Buffer.from(await file.arrayBuffer()),
- { flag: "wx" },
+ { flag: "w" },
);
return Response.json({ fileName }, { status: 201 });
}),
diff --git a/taehui-fe/src/app/www/logic/avatar.ts b/taehui-fe/src/app/www/logic/avatar.ts
index ce4d9f6..8b6ab38 100644
--- a/taehui-fe/src/app/www/logic/avatar.ts
+++ b/taehui-fe/src/app/www/logic/avatar.ts
@@ -2,7 +2,8 @@
doModifyAvatar as dbModifyAvatar,
doModifyAvatarIntro as dbModifyAvatarIntro,
getAvatar,
- getLatestAvatars as dbGetLatestAvatars,
+ getLatestEnrolledAvatars as dbGetLatestEnrolledAvatars,
+ getLatestLoggedInAvatars as dbGetLatestLoggedInAvatars,
postAvatar as dbPostAvatar,
setLastDate,
} from "@/app/www/system/DB";
@@ -133,8 +134,12 @@
}
};
-export const getLatestAvatars = async () => {
- return dbGetLatestAvatars();
+export const getLatestLoggedInAvatars = async () => {
+ return dbGetLatestLoggedInAvatars();
+};
+
+export const getLatestEnrolledAvatars = async () => {
+ return dbGetLatestEnrolledAvatars();
};
export const doInvalidateDrawing = async (avatarID: string) => {
diff --git a/taehui-fe/src/app/www/media/validateTotem.ts b/taehui-fe/src/app/www/media/validateTotem.ts
index c71d87b..6abf0d4 100644
--- a/taehui-fe/src/app/www/media/validateTotem.ts
+++ b/taehui-fe/src/app/www/media/validateTotem.ts
@@ -22,7 +22,7 @@
const avatar = await getAvatar(avatarID);
if (avatar) {
const { avatarID, avatarName, level, fax, avatarIntro } = avatar;
- req.headers.set("avatarID", encodeURIComponent(avatarID));
+ req.headers.set("avatarID", avatarID);
req.headers.set("avatarName", encodeURIComponent(avatarName));
req.headers.set("level", level.toString());
req.headers.set("fax", encodeURIComponent(fax));
diff --git a/taehui-fe/src/app/www/system/DB.ts b/taehui-fe/src/app/www/system/DB.ts
index a6cd2c8..3ef22a4 100644
--- a/taehui-fe/src/app/www/system/DB.ts
+++ b/taehui-fe/src/app/www/system/DB.ts
@@ -1,6 +1,6 @@
import Logger from "@/app/www/system/Logger";
import { ESSAY_ENTRY_PATH } from "@/app/www/utilities/Path";
-import { equalCipher, isTaehui } from "@/app/www/utilities/Utility";
+import { equalCipher, isSU } from "@/app/www/utilities/Utility";
import { readdir, unlink } from "fs/promises";
import {
Connection,
@@ -379,8 +379,9 @@
}[]
>(
`SELECT Essay_ID, tn_essay.Avatar_ID, Avatar_Name, tn_essay.Date, Title
- FROM tn_essay, tn_avatar
- WHERE Forum_ID = ? AND tn_avatar.Avatar_ID = tn_essay.Avatar_ID AND tn_essay.Date < ?
+ FROM tn_essay
+ INNER JOIN tn_avatar USING(Avatar_ID)
+ WHERE Forum_ID = ? AND tn_essay.Date < ?
ORDER BY tn_essay.Date DESC
LIMIT 1`,
[forumID, datetime],
@@ -414,8 +415,9 @@
}[]
>(
`SELECT Essay_ID, tn_essay.Avatar_ID, Avatar_Name, tn_essay.Date, Title
- FROM tn_essay, tn_avatar
- WHERE Forum_ID = ? AND tn_avatar.Avatar_ID = tn_essay.Avatar_ID AND tn_essay.Date > ?
+ FROM tn_essay
+ INNER JOIN tn_avatar USING(Avatar_ID)
+ WHERE Forum_ID = ? AND tn_essay.Date > ?
ORDER BY tn_essay.Date
LIMIT 1`,
[forumID, datetime],
@@ -450,8 +452,8 @@
}[]
>(
`SELECT Forum_ID, Essay_ID, tn_essay.Avatar_ID, Avatar_Name, tn_essay.Date, Title, tn_essay.Text
- FROM tn_essay, tn_avatar
- WHERE tn_avatar.Avatar_ID = tn_essay.Avatar_ID
+ FROM tn_essay
+ INNER JOIN tn_avatar USING(Avatar_ID)
ORDER BY tn_essay.Date DESC
LIMIT 5`,
);
@@ -578,7 +580,7 @@
text: string,
level: number,
) {
- const { affectedRows } = isTaehui(level)
+ const { affectedRows } = isSU(level)
? await db.query(
`UPDATE tn_essay
SET Title = ?, Text = ?
@@ -600,7 +602,7 @@
level: number,
) {
return getDB(async (db) => {
- const { affectedRows } = isTaehui(level)
+ const { affectedRows } = isSU(level)
? await db.query(
`DELETE
FROM tn_essay
@@ -652,8 +654,9 @@
}[]
>(
`SELECT Forum_ID, Essay_ID, tn_essay.Avatar_ID, Avatar_Name, tn_essay.Date, Title, Text
- FROM tn_essay, tn_avatar
- WHERE Essay_ID = ? AND tn_avatar.Avatar_ID = tn_essay.Avatar_ID`,
+ FROM tn_essay
+ INNER JOIN tn_avatar USING(Avatar_ID)
+ WHERE Essay_ID = ?`,
[essayID],
)
)[0];
@@ -711,8 +714,9 @@
}[]
>(
`SELECT Essay_ID, tn_essay.Avatar_ID, Avatar_Name, tn_essay.Date, Title
- FROM tn_essay, tn_avatar
- WHERE Forum_ID = ? AND tn_avatar.Avatar_ID = tn_essay.Avatar_ID
+ FROM tn_essay
+ INNER JOIN tn_avatar USING(Avatar_ID)
+ WHERE Forum_ID = ?
ORDER BY tn_essay.Date DESC
LIMIT ?, ?`,
[forumID, (page - 1) * viewUnit, viewUnit],
@@ -753,11 +757,12 @@
}[]
>(
`SELECT Forum_ID, Essay_ID, tn_essay.Avatar_ID, Avatar_Name, tn_essay.Date, Title
- FROM tn_essay, tn_avatar
- WHERE tn_avatar.Avatar_ID = tn_essay.Avatar_ID AND MATCH(Text) AGAINST(?)
+ FROM tn_essay
+ INNER JOIN tn_avatar USING(Avatar_ID)
+ WHERE MATCH(Text) AGAINST(? IN BOOLEAN MODE)
ORDER BY tn_essay.Date DESC
LIMIT ?, ?`,
- [wantInput, (page - 1) * viewUnit, viewUnit],
+ [`${wantInput}*`, (page - 1) * viewUnit, viewUnit],
)
).map(async (data) => {
const essayID = Number(data["Essay_ID"]);
@@ -794,11 +799,13 @@
}[]
>(
`SELECT Forum_ID, tn_comment.Essay_ID, tn_comment.Avatar_ID, Avatar_Name, tn_comment.Date, tn_comment.Text
- FROM tn_essay, tn_comment, tn_avatar
- WHERE tn_essay.Essay_ID = tn_comment.Essay_ID AND tn_comment.Avatar_ID = tn_avatar.Avatar_ID AND MATCH(tn_comment.Text) AGAINST(?)
+ FROM tn_comment
+ INNER JOIN tn_essay USING(Essay_ID)
+ INNER JOIN tn_avatar USING(Avatar_ID)
+ WHERE MATCH(tn_comment.Text) AGAINST(? IN BOOLEAN MODE)
ORDER BY tn_comment.Date DESC
LIMIT ?, ?`,
- [wantInput, (page - 1) * viewUnit, viewUnit],
+ [`${wantInput}*`, (page - 1) * viewUnit, viewUnit],
)
).map((data) => ({
forumID: data["Forum_ID"],
@@ -857,7 +864,7 @@
level: number,
) {
return getDB(async (db) => {
- const { affectedRows } = isTaehui(level)
+ const { affectedRows } = isSU(level)
? await db.query(
`UPDATE tn_comment
SET Text = ?
@@ -880,7 +887,7 @@
level: number,
) {
return getDB(async (db) => {
- const { affectedRows } = isTaehui(level)
+ const { affectedRows } = isSU(level)
? await db.query(
`DELETE
FROM tn_comment
@@ -910,8 +917,9 @@
}[]
>(
`SELECT Comment_ID, Target_Comment_ID, tn_comment.Avatar_ID, Avatar_Name, tn_comment.Date, Text
- FROM tn_comment, tn_avatar
- WHERE Essay_ID = ? AND tn_avatar.Avatar_ID = tn_comment.Avatar_ID
+ FROM tn_comment
+ INNER JOIN tn_avatar USING(Avatar_ID)
+ WHERE Essay_ID = ?
ORDER BY tn_comment.Date`,
[essayID],
);
@@ -940,8 +948,9 @@
}[]
>(
`SELECT Comment_ID, Forum_ID, tn_comment.Essay_ID AS Essay_ID, tn_comment.Avatar_ID, Avatar_Name, tn_comment.Date, tn_comment.Text
- FROM tn_comment, tn_essay, tn_avatar
- WHERE tn_comment.Essay_ID = tn_essay.Essay_ID AND tn_avatar.Avatar_ID = tn_comment.Avatar_ID
+ FROM tn_comment
+ INNER JOIN tn_essay USING(Essay_ID)
+ INNER JOIN tn_avatar ON tn_comment.Avatar_ID = tn_avatar.Avatar_ID
ORDER BY tn_comment.Date DESC
LIMIT 5`,
);
@@ -1118,36 +1127,41 @@
});
}
-export async function getLatestAvatars() {
+export async function getLatestLoggedInAvatars() {
return getDB(async (db) => {
- return Promise.all(
- ["Date", "Last_Date"].map(async (date) => {
- return (
- await db.query<
- { Avatar_ID: string; Avatar_Name: string; Date: string }[]
- >(
- `SELECT Avatar_ID, Avatar_Name, ${date} AS Date
+ return (
+ await db.query<
+ { Avatar_ID: string; Avatar_Name: string; Last_Date: string }[]
+ >(
+ `SELECT Avatar_ID, Avatar_Name, Last_Date
+ FROM tn_avatar
+ ORDER BY Last_Date DESC
+ LIMIT 5`,
+ )
+ ).map(({ Avatar_ID, Avatar_Name, Last_Date }) => ({
+ avatarID: Avatar_ID,
+ avatarName: Avatar_Name,
+ date: Last_Date,
+ }));
+ });
+}
+
+export async function getLatestEnrolledAvatars() {
+ return getDB(async (db) => {
+ return (
+ await db.query<
+ { Avatar_ID: string; Avatar_Name: string; Date: string }[]
+ >(
+ `SELECT Avatar_ID, Avatar_Name, Date
FROM tn_avatar
ORDER BY Date DESC
LIMIT 5`,
- )
- ).map(
- ({
- Avatar_ID,
- Avatar_Name,
- Date,
- }: {
- Avatar_ID: string;
- Avatar_Name: string;
- Date: string;
- }) => ({
- avatarID: Avatar_ID,
- avatarName: Avatar_Name,
- date: Date,
- }),
- );
- }),
- );
+ )
+ ).map(({ Avatar_ID, Avatar_Name, Date }) => ({
+ avatarID: Avatar_ID,
+ avatarName: Avatar_Name,
+ date: Date,
+ }));
});
}
@@ -1181,8 +1195,8 @@
>(
`SELECT Auto_Essay_ID, Title, Text, Date
FROM tn_auto_essay
- WHERE Forum_ID = ? AND Avatar_ID = ?`,
- [forumID, avatarID],
+ WHERE Avatar_ID = ? AND Forum_ID = ?`,
+ [avatarID, forumID],
)
).map(({ Auto_Essay_ID, Title, Text, Date }) => ({
autoEssayID: Auto_Essay_ID,
diff --git a/taehui-fe/src/app/www/utilities/Utility.ts b/taehui-fe/src/app/www/utilities/Utility.ts
index cb3c21d..563a2e2 100644
--- a/taehui-fe/src/app/www/utilities/Utility.ts
+++ b/taehui-fe/src/app/www/utilities/Utility.ts
@@ -109,4 +109,4 @@
}
};
-export const isTaehui = (level: number) => level === 2;
+export const isSU = (level: number) => level === 2;
diff --git a/taehui-fe/src/assets/dark-honeycomb.png b/taehui-fe/src/assets/dark-honeycomb.png
index 6ac0c5f..b6a0b0d 100644
--- a/taehui-fe/src/assets/dark-honeycomb.png
+++ b/taehui-fe/src/assets/dark-honeycomb.png
Binary files differ
diff --git a/taehui-fe/src/assets/language/en.json b/taehui-fe/src/assets/language/en.json
index e816da3..940b155 100644
--- a/taehui-fe/src/assets/language/en.json
+++ b/taehui-fe/src/assets/language/en.json
@@ -1,8 +1,8 @@
{
"alreadyAvatarID": "This ID is already registered.",
- "assistForum": "Manual",
- "autoEssay": "Auto Save",
+ "assist": "Manual",
"autoEssays": "Auto Save List",
+ "autoEssayText": "Do you want to load auto-saved posts? The text you are writing will disappear.",
"autoLogIn": "Automatic login",
"avatarCipher": "Password",
"avatarCipherModified": "Password to be modified",
@@ -13,12 +13,9 @@
"comment": "Comment",
"commentary": "Guestbook",
"commentCount": "{commentCount} comments",
- "dateForum": "Update History",
+ "date": "Update History",
"doModifiedAvatar": "Please log in again because your password has been modified",
- "doModifyAvatar": "Edit information",
- "doModifyComment": "Edit comment",
- "doModifyCommentary": "Edit guestbook",
- "doModifyEssay": "Edit post",
+ "enroll": "Join membership",
"essay": "Bulletin",
"essayBefore": "Previous post",
"essayLater": "Next post",
@@ -27,6 +24,7 @@
"fax": "E-mail",
"fileUpload": "Upload File",
"fileUploading": "Uploading.",
+ "forum": "Qwilight Bulletin",
"forums": "All Bulletins",
"hit00": "Visitor statistics",
"hit01": "{hitBefore} visitors yesterday",
@@ -34,39 +32,27 @@
"hit03": "Visits count from 2022-11-07.",
"hitCount": "{hitCount} views",
"hitFileCount": "Download {hit} times",
- "latestAvatarsView0": "Registered member",
- "latestAvatarsView1": "Member visited",
"latestCommentsView": "Comment written",
+ "latestEnrolledAvatarsView": "Registered member",
"latestEssaysView": "Posts Created",
- "notLoggedIn": "Sign out",
- "notLoggedInText": "Thank you, {avatarName}.",
- "onWant": "Search",
- "postComment": "Write comment",
- "postCommentary": "Write guestbook",
- "postedAutoEssay": "Your post will be saved automatically.",
- "postEssay": "Write post",
- "quit": "Exit",
- "qwilightForum": "Qwilight Bulletin",
- "setAutoEssayQuestion": "Do you want to load auto-saved posts? The text you are writing will disappear.",
+ "latestLoggedInAvatarsView": "Member visited",
"loggedInText": "Welcome, {avatarName}.",
"logIn": "Login",
- "signUp": "Join membership",
- "softwareForum": "Software",
- "ppt": "Developer Profile",
"main": "Home",
"main00": "Hello",
"main01": "This is 불로그 run by Taehui.",
"main02": "I am in charge of providing and operating the software I made.",
"main03": "This site is still under development.",
+ "notLoggedInText": "Thank you, {avatarName}.",
+ "postedAutoEssay": "Your post will be saved automatically.",
+ "ppt": "Developer Profile",
+ "setTestMode": "Preview",
+ "software": "Software",
"text": "Main text",
"textTag": "Letter",
"title": "Title",
- "viewEditedEssay": "Preview",
- "wantView": "Search Results",
- "wipeComment": "Delete Comment",
- "wipeCommentary": "Delete guestbook",
- "wipeCommentQuestion": "Are you sure you want to delete the comment?",
- "wipeEssay": "Delete post",
- "wipeEssayQuestion": "Are you sure you want to delete the post?",
+ "wipeAutoEssay": "Delete",
+ "wipeCommentText": "Are you sure you want to delete the comment?",
+ "wipeEssayText": "Are you sure you want to delete the post?",
"wrongAvatar": "This account is not valid."
}
diff --git a/taehui-fe/src/assets/language/ko.json b/taehui-fe/src/assets/language/ko.json
index 6fed780..3fbf176 100644
--- a/taehui-fe/src/assets/language/ko.json
+++ b/taehui-fe/src/assets/language/ko.json
@@ -1,8 +1,8 @@
{
"alreadyAvatarID": "이미 가입된 아이디입니다.",
- "assistForum": "매뉴얼",
- "autoEssay": "자동 저장",
+ "assist": "매뉴얼",
"autoEssays": "자동 저장 목록",
+ "autoEssayText": "자동 저장된 게시글을 불러올까요? 작성중인 글은 사라집니다.",
"autoLogIn": "자동 로그인",
"avatarCipher": "비밀번호",
"avatarCipherModified": "수정할 비밀번호",
@@ -13,12 +13,9 @@
"comment": "덧글",
"commentary": "방명록",
"commentCount": "덧글 {commentCount} 개",
- "dateForum": "업데이트 내역",
+ "date": "업데이트 내역",
"doModifiedAvatar": "비밀번호가 수정되어 다시 로그인하세요",
- "doModifyAvatar": "정보 수정",
- "doModifyComment": "덧글 수정",
- "doModifyCommentary": "방명록 수정",
- "doModifyEssay": "게시글 수정",
+ "enroll": "회원 가입",
"essay": "게시글",
"essayBefore": "이전 게시글",
"essayLater": "다음 게시글",
@@ -27,6 +24,7 @@
"fax": "이메일",
"fileUpload": "파일 업로드",
"fileUploading": "업로드하는 중입니다.",
+ "forum": "Qwilight 게시판",
"forums": "모든 게시판",
"hit00": "방문자 통계",
"hit01": "어제 방문자 {hitBefore} 명",
@@ -34,39 +32,27 @@
"hit03": "방문자 수는 2022-11-07 부터 집계됩니다.",
"hitCount": "조회수 {hitCount} 회",
"hitFileCount": "{hit} 회 다운로드",
- "latestAvatarsView0": "가입한 회원",
- "latestAvatarsView1": "방문한 회원",
"latestCommentsView": "작성된 덧글",
+ "latestEnrolledAvatarsView": "가입한 회원",
"latestEssaysView": "작성된 게시글",
- "notLoggedIn": "로그아웃",
- "notLoggedInText": "{avatarName}님 감사합니다.",
- "onWant": "검색",
- "postComment": "덧글 쓰기",
- "postCommentary": "방명록 쓰기",
- "postedAutoEssay": "게시글이 자동으로 저장됩니다.",
- "postEssay": "게시글 쓰기",
- "quit": "나가기",
- "qwilightForum": "Qwilight 게시판",
- "setAutoEssayQuestion": "자동 저장된 게시글을 불러올까요? 작성중인 글은 사라집니다.",
+ "latestLoggedInAvatarsView": "방문한 회원",
"loggedInText": "{avatarName}님 환영합니다.",
"logIn": "로그인",
- "signUp": "회원 가입",
- "softwareForum": "소프트웨어",
- "ppt": "개발자 프로필",
"main": "홈으로",
"main00": "안녕하세요",
"main01": "Taehui가 운영하는 불로그입니다.",
"main02": "제가 만든 소프트웨어의 제공과 운영을 담당합니다.",
"main03": "이 사이트는 아직 개발 중입니다.",
+ "notLoggedInText": "{avatarName}님 감사합니다.",
+ "postedAutoEssay": "게시글이 자동으로 저장됩니다.",
+ "ppt": "개발자 프로필",
+ "setTestMode": "미리 보기",
+ "software": "소프트웨어",
"text": "본문",
"textTag": "글자",
"title": "제목",
- "viewEditedEssay": "미리 보기",
- "wantView": "검색 결과",
- "wipeComment": "덧글 삭제",
- "wipeCommentary": "방명록 삭제",
- "wipeCommentQuestion": "덧글을 삭제할까요?",
- "wipeEssay": "게시글 삭제",
- "wipeEssayQuestion": "게시글을 삭제할까요?",
+ "wipeAutoEssay": "삭제",
+ "wipeCommentText": "덧글을 삭제할까요?",
+ "wipeEssayText": "게시글을 삭제할까요?",
"wrongAvatar": "올바르지 않은 계정입니다."
}
diff --git a/taehui-fe/src/assets/light_honeycomb.png b/taehui-fe/src/assets/light_honeycomb.png
new file mode 100644
index 0000000..b40112b
--- /dev/null
+++ b/taehui-fe/src/assets/light_honeycomb.png
Binary files differ
diff --git a/taehui-fe/src/assets/vcs.png b/taehui-fe/src/assets/vcs.png
index 007cc4c..910f993 100644
--- a/taehui-fe/src/assets/vcs.png
+++ b/taehui-fe/src/assets/vcs.png
Binary files differ
diff --git a/taehui-fe/src/components/AvatarDrawing.tsx b/taehui-fe/src/components/AvatarDrawing.tsx
new file mode 100644
index 0000000..909d5c1
--- /dev/null
+++ b/taehui-fe/src/components/AvatarDrawing.tsx
@@ -0,0 +1,23 @@
+import { wwwAPIPath } from "@/utilities/wwwAPI";
+import dayjs from "dayjs";
+import Image from "next/image";
+
+export default function AvatarDrawing({
+ avatarID,
+ drawingLength = 48,
+ drawingHeight = 48,
+}: {
+ avatarID: string;
+ drawingLength?: number;
+ drawingHeight?: number;
+}) {
+ return (
+
+ );
+}
diff --git a/taehui-fe/src/components/AvatarTitle.tsx b/taehui-fe/src/components/AvatarTitle.tsx
deleted file mode 100644
index 8b73349..0000000
--- a/taehui-fe/src/components/AvatarTitle.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { wwwAPIPath } from "@/utilities/wwwAPI";
-import dayjs from "dayjs";
-import Image from "next/image";
-import { ReactNode } from "react";
-import { Col } from "reactstrap";
-
-export default function AvatarTitle({
- avatarID,
- avatarName,
- children,
-}: {
- avatarID: string;
- avatarName: string;
- children: ReactNode;
-}) {
- return (
- <>
- {
- e.stopPropagation();
- }}
- >
-
-
-
- {avatarName}
-
- {children}
-
-
- );
-}
diff --git a/taehui-fe/src/components/AvatarView.tsx b/taehui-fe/src/components/AvatarView.tsx
index 200168d..694ae66 100644
--- a/taehui-fe/src/components/AvatarView.tsx
+++ b/taehui-fe/src/components/AvatarView.tsx
@@ -3,12 +3,9 @@
import { useTaehuiStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
-import { useTranslations } from "next-intl";
export default observer(
({ isSessionLoading }: { isSessionLoading: boolean }) => {
- const t = useTranslations();
-
const { totem, taehuiAvatarID, taehuiAvatarName } = useTaehuiStore();
if (isSessionLoading) {
diff --git a/taehui-fe/src/components/CommentTitleView.tsx b/taehui-fe/src/components/CommentTitleView.tsx
new file mode 100644
index 0000000..e762758
--- /dev/null
+++ b/taehui-fe/src/components/CommentTitleView.tsx
@@ -0,0 +1,46 @@
+import AvatarDrawing from "@/components/AvatarDrawing";
+import { GetLatestCommentAPI } from "@/type/wwwAPI";
+import Link from "next/link";
+import Col from "react-bootstrap/Col";
+import Row from "react-bootstrap/Row";
+import Stack from "react-bootstrap/Stack";
+import { getDatetime } from "taehui-ts/date";
+
+export default function CommentTitleView({
+ forumID,
+ essayID,
+ comment: { commentID, avatarID, avatarName, date, text },
+}: {
+ forumID?: string;
+ essayID?: number;
+ comment: GetLatestCommentAPI[number];
+}) {
+ const isLoading = !(
+ typeof forumID === "string" &&
+ commentID >= 0 &&
+ typeof essayID === "number"
+ );
+
+ return (
+
+
+
+
+
+
+ {avatarName}
+ {text}
+
+
+
+ {getDatetime(date)}
+
+
+ );
+}
diff --git a/taehui-fe/src/components/EnrollView.tsx b/taehui-fe/src/components/EnrollView.tsx
new file mode 100644
index 0000000..744af1a
--- /dev/null
+++ b/taehui-fe/src/components/EnrollView.tsx
@@ -0,0 +1,121 @@
+import usePostAvatar from "@/query/usePostAvatar";
+import { useTranslations } from "next-intl";
+import { useMemo, useState } from "react";
+import Button from "react-bootstrap/Button";
+import FormControl from "react-bootstrap/FormControl";
+import InputGroup from "react-bootstrap/InputGroup";
+import InputGroupText from "react-bootstrap/InputGroupText";
+import Stack from "react-bootstrap/Stack";
+import { toast } from "react-toastify";
+
+export default function EnrollView() {
+ const t = useTranslations();
+
+ const [avatarID, setAvatarID] = useState("");
+ const [avatarCipher, setAvatarCipher] = useState("");
+ const [avatarCipherTest, setAvatarCipherTest] = useState("");
+ const [avatarName, setAvatarName] = useState("");
+ const [fax, setFax] = useState("");
+
+ const isValidFax = useMemo(() => /^.+@.+$/.test(fax), [fax]);
+ const isValidAvatarID = useMemo(
+ () => /[a-zA-Z\d]/.test(avatarID),
+ [avatarID],
+ );
+
+ const { mutateAsync: postAvatar } = usePostAvatar();
+
+ return (
+
+
+ {t("avatarID")}
+ {
+ setAvatarID(value);
+ }}
+ />
+
+
+ {t("avatarCipher")}
+ {
+ setAvatarCipher(value);
+ }}
+ />
+
+
+ {t("avatarCipherTest")}
+ {
+ setAvatarCipherTest(value);
+ }}
+ />
+
+
+ {t("avatarName")}
+ 0 && avatarName.length <= 16}
+ isInvalid={avatarName.length > 16}
+ maxLength={16}
+ placeholder={t("avatarName")}
+ value={avatarName}
+ onChange={({ target: { value } }) => {
+ setAvatarName(value);
+ }}
+ />
+
+
+ {t("fax")}
+ {
+ setFax(value);
+ }}
+ />
+
+
+
+ );
+}
diff --git a/taehui-fe/src/components/EssayTitleView.tsx b/taehui-fe/src/components/EssayTitleView.tsx
new file mode 100644
index 0000000..49c1f92
--- /dev/null
+++ b/taehui-fe/src/components/EssayTitleView.tsx
@@ -0,0 +1,50 @@
+import AvatarDrawing from "@/components/AvatarDrawing";
+import { EssayAPIEssay } from "@/type/wwwAPI";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import Col from "react-bootstrap/Col";
+import Row from "react-bootstrap/Row";
+import Stack from "react-bootstrap/Stack";
+import { getDatetime } from "taehui-ts/date";
+
+export default function EssayTitleView({
+ forumID,
+ forumTitle,
+ essay: { essayID, title, avatarID, avatarName, date, commentCount, hitCount },
+}: {
+ forumID?: string;
+ forumTitle?: string;
+ essay: EssayAPIEssay;
+}) {
+ const t = useTranslations();
+
+ const isLoading = !(typeof forumID === "string" && essayID >= 0);
+
+ return (
+
+
+
+
+
+
+ {avatarName}
+
+ {forumTitle && `[${forumTitle}]`} {title} [{commentCount}]
+
+
+
+
+
+ {getDatetime(date)}
+ {t("hitCount", { hitCount })}
+
+
+
+ );
+}
diff --git a/taehui-fe/src/components/LoggedInAvatarView.tsx b/taehui-fe/src/components/LoggedInAvatarView.tsx
index a3db2ef..2ba7713 100644
--- a/taehui-fe/src/components/LoggedInAvatarView.tsx
+++ b/taehui-fe/src/components/LoggedInAvatarView.tsx
@@ -1,29 +1,68 @@
-import AvatarTitle from "@/components/AvatarTitle";
+import usePostDrawing from "@/query/usePostDrawing";
import useWipeTotem from "@/query/useWipeTotem";
import { useTaehuiStore } from "@/state/Stores";
+import { wwwAPIPath } from "@/utilities/wwwAPI";
+import dayjs from "dayjs";
import { observer } from "mobx-react-lite";
-import { useTranslations } from "next-intl";
-import { Button, Col, Row } from "reactstrap";
-import { useTo } from "taehui-ts/fe-utilities";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { Back, PencilFill } from "react-bootstrap-icons";
+import Button from "react-bootstrap/Button";
+import ButtonGroup from "react-bootstrap/ButtonGroup";
+import Col from "react-bootstrap/Col";
+import Row from "react-bootstrap/Row";
+import Stack from "react-bootstrap/Stack";
export default observer<{ avatarID: string; avatarName: string }>(
({ avatarID, avatarName }) => {
const { totem, setAvatarCipher, setAutoLogIn } = useTaehuiStore();
- const t = useTranslations();
+ const { push } = useRouter();
- const to = useTo();
-
+ const { mutateAsync: postDrawing } = usePostDrawing();
const { mutateAsync: wipeTotem } = useWipeTotem();
return (
-
-
-
-
+
+
+ {
+ const inputElement = document.createElement("input");
+ inputElement.type = "file";
+ inputElement.accept = "image/png";
+ inputElement.addEventListener("change", async ({ target }) => {
+ const file = (target as HTMLInputElement).files?.[0];
+ if (file) {
+ await postDrawing({ file });
+ }
+ });
+ inputElement.click();
+ }}
+ />
+
+
+
+
+ {avatarName} ({avatarID})
+
+
+
-
-
-
-
-
-
+
+
+
);
},
diff --git a/taehui-fe/src/components/ModifyAvatarView.tsx b/taehui-fe/src/components/ModifyAvatarView.tsx
index b65627f..261f60b 100644
--- a/taehui-fe/src/components/ModifyAvatarView.tsx
+++ b/taehui-fe/src/components/ModifyAvatarView.tsx
@@ -1,16 +1,16 @@
-import usePostDrawing from "@/query/usePostDrawing";
import usePutAvatar from "@/query/usePutAvatar";
import { useTaehuiStore } from "@/state/Stores";
-import { wwwAPIPath } from "@/utilities/wwwAPI";
-import dayjs from "dayjs";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
-import Image from "next/image";
import { useMemo, useState } from "react";
+import { PencilFill } from "react-bootstrap-icons";
+import Button from "react-bootstrap/Button";
+import FormControl from "react-bootstrap/FormControl";
+import InputGroup from "react-bootstrap/InputGroup";
+import InputGroupText from "react-bootstrap/InputGroupText";
+import Stack from "react-bootstrap/Stack";
import ReactTextareaAutosize from "react-textarea-autosize";
import { toast } from "react-toastify";
-import { Button, Col, Form, Input, Row } from "reactstrap";
-import { useTo } from "taehui-ts/fe-utilities";
export default observer(() => {
const { taehuiAvatarID, taehuiAvatarName, taehuiFax, taehuiAvatarIntro } =
@@ -23,143 +23,94 @@
const [fax, setFax] = useState(taehuiFax);
const [avatarIntro, setAvatarIntro] = useState(taehuiAvatarIntro);
- const to = useTo();
-
const isValidFax = useMemo(() => /^.+@.+$/.test(fax), [fax]);
const { mutateAsync: putAvatar } = usePutAvatar();
- const { mutateAsync: postDrawing } = usePostDrawing();
return (
-
+
+
+ {t("avatarID")}
+
+
+
+ {t("avatarCipher")}
+ {
+ setAvatarCipher(value);
+ }}
+ />
+
+
+ {t("avatarCipherModified")}
+ {
+ setAvatarCipherModified(value);
+ }}
+ />
+
+
+ {t("avatarName")}
+ 0}
+ isInvalid={avatarName.length === 0}
+ placeholder={t("avatarName")}
+ value={avatarName}
+ onChange={({ target: { value } }) => {
+ setAvatarName(value);
+ }}
+ />
+
+
+ {t("fax")}
+ 0 && isValidFax}
+ isInvalid={fax.length > 0 && !isValidFax}
+ placeholder={t("fax")}
+ value={fax}
+ onChange={({ target: { value } }) => {
+ setFax(value);
+ }}
+ />
+
+
+ {t("avatarIntro")}
+ {
+ setAvatarIntro(value);
+ }}
+ />
+
+
+
);
});
diff --git a/taehui-fe/src/components/NotLoggedInAvatarView.tsx b/taehui-fe/src/components/NotLoggedInAvatarView.tsx
index 8520a0e..d071f23 100644
--- a/taehui-fe/src/components/NotLoggedInAvatarView.tsx
+++ b/taehui-fe/src/components/NotLoggedInAvatarView.tsx
@@ -3,9 +3,12 @@
import CryptoJS from "crypto-js";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
-import Link from "next/link";
+import { useRouter } from "next/navigation";
import { useState } from "react";
-import { Button, Col, Form, Input, Row } from "reactstrap";
+import Button from "react-bootstrap/Button";
+import FormCheck from "react-bootstrap/FormCheck";
+import FormControl from "react-bootstrap/FormControl";
+import Stack from "react-bootstrap/Stack";
export default observer(() => {
const { autoLogIn, avatarCipher, setAvatarCipher, setAutoLogIn } =
@@ -17,6 +20,8 @@
const { mutateAsync: postGetTotem } = usePostGetTotem();
+ const { push } = useRouter();
+
const onLogIn = async () => {
await postGetTotem({ avatarID, avatarCipher });
if (autoLogIn) {
@@ -32,54 +37,47 @@
window.localStorage.setItem("autoLogIn", autoLogIn.toString());
};
+ const onEnroll = () => {
+ push("/avatar");
+ };
+
return (
-
+
+ {
+ setAvatarID(value);
+ }}
+ />
+ {
+ setAvatarCipher(value);
+ }}
+ />
+
+
+
+
+
+ {
+ setAutoLogIn(!autoLogIn);
+ }}
+ />
+
+
);
});
diff --git a/taehui-fe/src/components/SignUpView.tsx b/taehui-fe/src/components/SignUpView.tsx
deleted file mode 100644
index a6cf258..0000000
--- a/taehui-fe/src/components/SignUpView.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import usePostAvatar from "@/query/usePostAvatar";
-import { useTranslations } from "next-intl";
-import { useMemo, useState } from "react";
-import { toast } from "react-toastify";
-import { Button, Col, Form, Input, Row } from "reactstrap";
-import { useTo } from "taehui-ts/fe-utilities";
-
-export default function SignUpView() {
- const t = useTranslations();
-
- const [avatarID, setAvatarID] = useState("");
- const [avatarCipher, setAvatarCipher] = useState("");
- const [avatarCipherTest, setAvatarCipherTest] = useState("");
- const [avatarName, setAvatarName] = useState("");
- const [fax, setFax] = useState("");
-
- const to = useTo();
-
- const isValidFax = useMemo(() => /^.+@.+$/.test(fax), [fax]);
- const isValidAvatarID = useMemo(
- () => /[a-zA-Z\d]/.test(avatarID),
- [avatarID],
- );
-
- const { mutateAsync: postAvatar } = usePostAvatar();
-
- return (
-
- );
-}
diff --git a/taehui-fe/src/components/TaehuiView.tsx b/taehui-fe/src/components/TaehuiView.tsx
index 7716fd8..654711b 100644
--- a/taehui-fe/src/components/TaehuiView.tsx
+++ b/taehui-fe/src/components/TaehuiView.tsx
@@ -2,133 +2,122 @@
import useSession from "@/app/[language]/query/useSession";
import vcs from "@/assets/vcs.png";
+import AvatarDrawing from "@/components/AvatarDrawing";
import AvatarView from "@/components/AvatarView";
import withQueryClient from "@/hoc/withQueryClient";
import { useTaehuiStore } from "@/state/Stores";
+import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import Image from "next/image";
import Link from "next/link";
-import { ReactNode, useEffect, useMemo, useRef } from "react";
+import { ReactNode } from "react";
+import Container from "react-bootstrap/Container";
+import Nav from "react-bootstrap/Nav";
+import Navbar from "react-bootstrap/Navbar";
+import NavbarBrand from "react-bootstrap/NavbarBrand";
+import NavbarCollapse from "react-bootstrap/NavbarCollapse";
+import NavbarToggle from "react-bootstrap/NavbarToggle";
+import NavDropdown from "react-bootstrap/NavDropdown";
+import NavLink from "react-bootstrap/NavLink";
import { ToastContainer } from "react-toastify";
-import { Button, Col, Container, Navbar, NavbarBrand, Row } from "reactstrap";
import { useIsPath } from "taehui-ts/fe-utilities";
-export default withQueryClient(function TaehuiView({
- children,
-}: {
- children: ReactNode;
-}) {
- const t = useTranslations();
+export default withQueryClient(
+ observer(({ children }: { children: ReactNode }) => {
+ const { taehuiAvatarID } = useTaehuiStore();
- const { setTitleViewHeight, setAvatarViewHeight } = useTaehuiStore();
+ const t = useTranslations();
- const titleView = useRef(null);
- const avatarView = useRef(null);
+ const isSessionLoading = useSession();
- const isSessionLoading = useSession();
+ const isPath = useIsPath();
- const isPath = useIsPath();
-
- const isAvatarViewVisible = useMemo(
- () => !isPath("/avatar") && !isPath("/commentary"),
- [isPath],
- );
-
- useEffect(() => {
- setTitleViewHeight(titleView.current?.clientHeight ?? 0);
- setAvatarViewHeight(avatarView.current?.clientHeight ?? 0);
- }, [setAvatarViewHeight, setTitleViewHeight]);
-
- const getColor = (route: string, equals = false) =>
- isPath(route, equals) ? "primary" : "secondary";
-
- return (
- <>
-
-
-
-
+ return (
+ <>
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-