投稿した質問数 3

0

오타 때문이었네요.. 지금은 해결했습니다! 같이 고민해주셔서 감사합니다!!

0

워크스페이스 추가했는데 이러면 안가는거죠..?

0

import axios from 'axios';
import React, { FC, useCallback, useState } from 'react';
import { Redirect, Route, Switch } from 'react-router';
import useSWR from 'swr';
import {
  AddButton,
  Channels,
  Chats,
  Header,
  LogOutButton,
  MenuScroll,
  ProfileImg,
  ProfileModal,
  RightMenu,
  WorkspaceButton,
  WorkspaceName,
  Workspaces,
  WorkspaceWrapper,
} from '@layouts/Workspace/styles';
import gravatar from 'gravatar';
import loadable from '@loadable/component';
import Menu from '@components/Menu';
import { Link } from 'react-router-dom';
import { IUser } from '@typings/db';
import { Button, Input, Label } from '@pages/SignUp/styles';
import useInput from '@hooks/useInput';
import Modal from '@components/Modal';
import { toast } from 'react-toastify';
import fetcher from "@utils/fetcher";

const Channel = loadable(() => import('@pages/Channel'));
const DirectMessage = loadable(() => import('@pages/DirectMessage'));

const Workspace: FC<React.PropsWithChildren<{}>> = ({ children }) => {
  const [showUserMenu, setShowUserMenu] = useState(false);
  const [showCreateWorkspaceModal, setShowCreateWorkspaceModal] = useState(false);
  const [newWorkspace, onChangeNewWorkspace, setNewWorkspace] = useInput('');
  const [newUrl, onChangeNewUrl, setNewUrl] = useInput('');
  const {
    data: userData,
    error,
    mutate,
  } = useSWR<IUser | false>('/api/users', fetcher, {
    dedupingInterval: 2000,
  });

  const onLogout = useCallback(() => {
    axios
        .post('http://localhost:3095/api/users/logout', null, {
          withCredentials: true,
        })
        .then(() => {
          mutate(false, false);
        });
  }, []);

  const onCloseUserProfile = useCallback((e: any) => {
    e.stopPropagation();
    setShowUserMenu(false);
  }, []);

  const onClickUserProfile = useCallback(() => {
    setShowUserMenu((prev) => !prev);
  }, []);

  const onClickCreateWorkspace = useCallback(() => {
    setShowCreateWorkspaceModal(true);
  }, []);

  const onCreateWorkspace = useCallback(
      (e: any) => {
        e.prevenDefault();
        if (!newWorkspace || !newWorkspace.trim()) return;
        if (!newUrl || !newUrl.trim()) return;
        axios
            .post(
                '/api/workspaces',
                {
                  workspace: newWorkspace,
                  url: newUrl,
                },
                {
                  withCredentials: true,
                },
            )
            .then(() => {
              mutate();
              setShowCreateWorkspaceModal(false);
              setNewWorkspace('');
              setNewUrl('');
            })
            .catch((error) => {
              console.dir(error);
              toast.error(error.response?.data, { position: 'bottom-center' });
            });
      },
      [newWorkspace, newUrl],
  );

  const onCloseModal = useCallback(() => {
    setShowCreateWorkspaceModal(false);
  }, []);

  if (!userData) {
    return <Redirect to="/login" />;
  }

  return (
      <div>
        <Header>
          <RightMenu>
          <span onClick={onClickUserProfile}>
            <ProfileImg src={gravatar.url(userData.email, { s: '28px', d: 'retro' })} alt={userData.email} />
            {showUserMenu && (
                <Menu style={{ right: 0, top: 38 }} show={showUserMenu} onCloseModal={onCloseUserProfile}>
                  <ProfileModal>
                    <img src={gravatar.url(userData.email, { s: '28px', d: 'retro' })} alt={userData.email} />
                    <div>
                      <span id="profile-name">{userData.email}</span>
                      <span id="profile-active">Active</span>
                    </div>
                  </ProfileModal>
                  <LogOutButton onClick={onLogout}>로그아웃</LogOutButton>
                </Menu>
            )}
          </span>
          </RightMenu>
        </Header>
        <WorkspaceWrapper>
          <Workspaces>
            {userData?.Workspaces?.map((ws) => {
              return (
                  <Link key={ws.id} to={`/workspace/${ws.url}/channel/일반`}>
                    <WorkspaceButton>{ws.name.slice(0, 1).toUpperCase()}</WorkspaceButton>
                  </Link>
              );
            })}
            <AddButton onClick={onClickCreateWorkspace}>+</AddButton>
          </Workspaces>
          <Channels>
            <WorkspaceName>Sleact</WorkspaceName>
            <MenuScroll>MenuScroll</MenuScroll>
          </Channels>
          <Chats>
            <Switch>
              <Route path="/workspace/channel" component={Channel} />
              <Route path="/workspace/dm" component={DirectMessage} />
            </Switch>
          </Chats>
        </WorkspaceWrapper>
        <Modal show={showCreateWorkspaceModal} onCloseModal={onCloseModal}>
          <form onSubmit={onCreateWorkspace}>
            <Label id="workspace-label">
              <span>워크스페이스 이름</span>
              <Input id="workspace" value={newWorkspace} onChange={onChangeNewWorkspace} />
            </Label>
            <Label id="workspace-url-label">
              <span>워크스페이스 url</span>
              <Input id="workspace" value={newUrl} onChange={onChangeNewUrl} />
            </Label>
            <Button type="submit">생성하기</Button>
          </form>
        </Modal>
      </div>
  );
};

export default Workspace;

이렇게 작성했는데 워크스페이스 추가가 되지 않습니다ㅠ

0

저게 워크스페이스 목록인데요. 뭘 하셨는데 뭐가 안 되는 건가요?