Feat/#231

src/api/http.api.ts

@@ -12,7 +12,10 @@ export const createClient = (config?: AxiosRequestConfig) => {
     timeout: DEFAULT_TIMEOUT,
     headers: {
       'content-type': 'application/json',
-      authorization: getTokens() ? `Bearer ${getTokens().accessToken}` : '',
+      authorization:
+        getTokens().accessToken || getTokens().refreshToken
+          ? `Bearer ${getTokens().accessToken}`
+          : '',
     },
     withCredentials: true,
     ...config,

src/api/joinProject.api.ts

@@ -1,13 +1,21 @@
 import { FormData } from '../models/createProject';
 import { joinProject } from '../models/joinProject';
-import { ProjectDetailExtended } from '../models/projectDetail';
+import { ProjectDetailPlusExtended } from '../models/projectDetail';
 import { httpClient } from './http.api';
 
 export const getProjectData = async (
   id: number
-): Promise<ProjectDetailExtended> => {
-  const response = await httpClient.get(`/project/${id}`);
-  return response.data;
+): Promise<ProjectDetailPlusExtended> => {
+  try {
+    const response = await httpClient.get(`/project/${id}`);
+    if (response.status !== 200) {
+      throw new Error(`${response.status}`);
+    }
+    return response.data.data;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
 };
 
 export const postProject = async (formData: FormData) => {
@@ -19,7 +27,7 @@ export const postApplicantProject = async (
   formData: joinProject,
   id: number
 ) => {
-  const response = await httpClient.post(`/project/${id}/applicant`, formData);
+  const response = await httpClient.post(`/project/${id}/apply`, formData);
   return response.status;
 };
 

src/api/mypage.api.ts

@@ -7,7 +7,7 @@ import { httpClient } from './http.api';
 
 export const getMyInfo = async () => {
   try {
-    const response = await httpClient.get<UserInfo>('/user/me');
+    const response = await httpClient.get<UserInfo>('/user');
     return response.data;
   } catch (error) {
     console.error('mypage-myinfo:', error);

src/api/projectSearchFiltering.api.ts

@@ -1,9 +1,13 @@
-import type { MethodTag, PositionTag, SkillTag } from '../models/tags';
+import type {
+  MethodTagHeader,
+  PositionTagHeader,
+  SillTagHeader,
+} from '../models/tags';
 import { httpClient } from './http.api';
 
 export const getSkillTag = async () => {
   try {
-    const response = await httpClient.get<SkillTag[]>('/skill-tag');
+    const response = await httpClient.get<SillTagHeader>('/skill-tag');
     return response.data;
   } catch (e) {
     console.log('getSkillTag', e);
@@ -12,7 +16,7 @@ export const getSkillTag = async () => {
 
 export const getPositionTag = async () => {
   try {
-    const response = await httpClient.get<PositionTag[]>('/position-tag');
+    const response = await httpClient.get<PositionTagHeader>('/position-tag');
     return response.data;
   } catch (e) {
     console.log('getPositionTag', e);
@@ -21,7 +25,7 @@ export const getPositionTag = async () => {
 
 export const getMethodTag = async () => {
   try {
-    const response = await httpClient.get<MethodTag[]>('/method');
+    const response = await httpClient.get<MethodTagHeader>('/method-type');
     return response.data;
   } catch (e) {
     console.log('getMethodTag', e);

src/components/command/CommandLayout.styled.ts

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+export const Container = styled.div``;
+
+export const CommandCountsContainer = styled.div`
+  margin-bottom: 20px;
+`;
+
+export const Count = styled.span``;
+
+export const CommandContainer = styled.div``;
+
+export const CommandInput = styled.div`
+  margin-bottom: 60px;
+`;
+
+export const ShowReply = styled.div`
+  padding-left: 100px;
+`;
+
+export const ShowReplyButton = styled.span`
+  display: flex;
+`;
+
+export const Icon = styled.div``;
+export const Content = styled.span`
+  margin-left: 10px;
+`;
+
+export const ReplyContainer = styled.div`
+  padding-left: 100px;
+  margin-top: 20px;
+`;

src/components/command/CommandLayout.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import * as S from './CommandLayout.styled';
+import CommandComponent from './commandComponent/CommandComponent';
+import { IoIosArrowDown } from 'react-icons/io';
+import { IoIosArrowUp } from 'react-icons/io';
+
+import CommandInput from './commandInput/CommandInput';
+
+const CommandLayout = () => {
+  const [isShowReply, setIsShowReply] = useState<boolean>(false);
+
+  const handleClick = () => {
+    setIsShowReply(!isShowReply);
+  };
+
+  return (
+    <S.Container>
+      <S.CommandCountsContainer>
+        <S.Count>댓글 {2}개</S.Count>
+      </S.CommandCountsContainer>
+
+      <S.CommandInput>
+        <CommandInput />
+      </S.CommandInput>
+
+      <S.CommandContainer>
+        <CommandComponent data={[]} />
+      </S.CommandContainer>
+
+      <S.ShowReply onClick={handleClick}>
+        <S.ShowReplyButton>
+          <S.Icon>{isShowReply ? <IoIosArrowUp /> : <IoIosArrowDown />}</S.Icon>
+          <S.Content>답글 확인하기</S.Content>
+        </S.ShowReplyButton>
+      </S.ShowReply>
+
+      {isShowReply && (
+        <S.ReplyContainer>
+          <CommandComponent data={[]} reply={true} />
+        </S.ReplyContainer>
+      )}
+    </S.Container>
+  );
+};
+
+export default CommandLayout;

src/components/command/commandComponent/CommandComponent.styled.ts

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-grow: 1;
+`;
+
+export const CommandWrapper = styled.div`
+  margin-top: 4px;
+  flex: 1;
+`;
+
+export const NickName = styled.p`
+  font-size: ${({ theme }) => theme.heading.xsSmall.fontSize};
+  margin-left: 11px;
+  margin-bottom: 3px;
+`;
+
+export const Command = styled.span`
+  margin-left: 11px;
+`;
+
+export const ReplyContainer = styled.div`
+  margin-top: 11px;
+  margin-left: 11px;
+`;
+
+export const ReplyButton = styled.div`
+  display: flex;
+  margin-top: 11px;
+`;
+
+export const Icon = styled.div`
+  margin-left: 11px;
+`;
+
+export const ReplyContent = styled.p`
+  margin-left: 10px;
+  margin-bottom: 10px;
+`;
+
+export const CommandInput = styled.div`
+  text-indent: 20px;
+`;
+
+export const ReplyInput = styled.div`
+  width: 100%;
+  padding-left: 15px;
+`;

src/components/command/commandComponent/CommandComponent.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import * as S from './CommandComponent.styled';
+import Avatar from '../../common/avatar/Avatar';
+import DefaultImg from '../../../assets/defaultImg.png';
+import { IoChatbubbleEllipsesOutline } from 'react-icons/io5';
+import CommandInput from '../commandInput/CommandInput';
+import { CiMenuKebab } from 'react-icons/ci';
+import DropDown from '../../common/dropDown/DropDown';
+import DropDownItem from '../../common/dropDown/DropDownItem';
+import useDropDownItem from '../../../hooks/useDropDownItem';
+
+interface CommandLayoutProps {
+  data: [];
+  reply?: boolean;
+}
+
+const command = '안녕하세요';
+
+const CommandComponent = ({ data, reply }: CommandLayoutProps) => {
+  const [showReplyInput, setShowReplyInput] = useState<boolean>(false);
+  const [showMenu, setShowMenu] = useState<boolean>(false);
+
+  const { onReport, onEdit, onDelete, isEditMode } = useDropDownItem();
+
+  const handleClick = () => {
+    setShowReplyInput(!showReplyInput);
+  };
+
+  console.log(isEditMode);
+
+  const onClick = () => {
+    setShowMenu(!showMenu);
+  };
+
+  return (
+    <S.Container>
+      {/* 전체를 map으로 감싸 하기 */}
+      <S.Wrapper>
+        <Avatar size={reply ? '55px' : '75px'} image={DefaultImg} />
+        <S.CommandWrapper>
+          <S.NickName>SeungYeon</S.NickName>
+          {isEditMode ? (
+            <CommandInput
+              isEditMode={isEditMode}
+              onEdit={onEdit}
+              command={command}
+            />
+          ) : (
+            <S.Command>{command}</S.Command>
+          )}
+          {!reply && (
+            <S.ReplyButton onClick={handleClick}>
+              <S.Icon>
+                <IoChatbubbleEllipsesOutline />
+              </S.Icon>
+              <S.ReplyContent>댓글 달기</S.ReplyContent>
+            </S.ReplyButton>
+          )}
+          {showReplyInput && (
+            <S.ReplyInput>
+              <CommandInput reply={true} />
+            </S.ReplyInput>
+          )}
+        </S.CommandWrapper>
+      </S.Wrapper>
+      <DropDown toggleButton={<CiMenuKebab size='20' onClick={onClick} />}>
+        <DropDownItem
+          commandId={4}
+          onReport={onReport}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          isEditMode={isEditMode}
+        />
+      </DropDown>
+    </S.Container>
+  );
+};
+
+export default CommandComponent;

src/components/command/commandInput/CommandInput.styled.ts

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+import Button from '../../common/Button/Button';
+
+export const InputContainer = styled.div`
+  display: flex;
+  margin-left: 8px;
+`;
+
+export const Input = styled.input`
+  width: 100%;
+`;
+
+export const InputWrapper = styled.div`
+  width: 100%;
+  margin-left: 5px;
+  margin-top: 7px;
+`;
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 3px;
+`;
+export const Line = styled.hr<{ $isFocused: boolean }>`
+  opacity: ${({ $isFocused }) => ($isFocused ? 1.0 : 0.2)};
+  border: ${({ $isFocused }) => ($isFocused ? 2 : 1)};
+`;
+
+export const ButtonCancel = styled(Button)``;
+
+export const ButtonSubmit = styled(Button)``;