Merge pull request #15 from Team-Wander/feature/approveAppointmentModal

🔀 약속승인모달 제작

.eslintrc.json

@@ -3,29 +3,28 @@
     "browser": true,
     "es2021": true
   },
-  "extends": [
-    "react-app",
-    "react-app/jest",
-    "prettier"
-  ],
+  "settings": {
+    "import/resolver": {
+      "typescript": {}
+    },
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": ["prettier"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": ["@typescript-eslint", "react", "prettier"],
+  "plugins": ["@typescript-eslint", "prettier"],
   "rules": {
     "no-console": "warn",
     "no-duplicate-imports": "error",
-    "indent": "warn",
+    "indent": ["error", 2],
     "linebreak-style": 0,
     "import/prefer-default-export": "off",
     "react/prop-types": "off",
     "prettier/prettier": "error"
-  },
-  "settings": {
-    "import/resolver": {
-      "typescript": {}
-    }
   }
 }

.gitignore

@@ -127,4 +127,7 @@ dist
 .yarn/unplugged
 .yarn/build-state.yml
 .yarn/install-state.gz
-.pnp.*
+.pnp.*
+
+# ds_store
+.ds_store

.prettierrc

@@ -5,5 +5,6 @@
   "arrowParens": "always",
   "singleQuote": true,
   "semi": true,
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+  "tabWidth": 2
 }

README.md

@@ -1,2 +1,3 @@
 # Wanderring-Client
-프로젝트 진행 중...
+
+퍼블리싱 진행중

eslint.config.mjs

@@ -10,4 +10,4 @@ export default [
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
   pluginReact.configs.flat.recommended,
-];
+];

package.json

@@ -15,7 +15,7 @@
     "axios": "^1.7.5",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-import-resolver-babel-module": "^5.3.2",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.30.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
@@ -29,13 +29,16 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "eslint lint",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "format": "prettier --write **/*.{ts,tsx}"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
-      "react-app/jest"
+      "react-app/jest",
+      "react",
+      "eslint:recommended"
     ]
   },
   "browserslist": {
@@ -51,16 +54,19 @@
     ]
   },
   "devDependencies": {
-    "@eslint/js": "^9.9.0",
-    "eslint": "^8.57.0",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@eslint/js": "^9.11.0",
+    "eslint": "^9.11.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react": "^7.0.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "globals": "^15.9.0",
     "prettier": "^3.3.3",
-    "typescript-eslint": "^8.2.0"
+    "typescript-eslint": "^8.6.0"
   }
 }

src/App.tsx

@@ -1,16 +1,24 @@
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
-import { Home, Write, InputPage } from 'pages';
+import {
+  Home,
+  Write,
+  InputPage,
+  Temp,
+  NoPage,
+} from 'pages';
 
 function App() {
   return (
     <Routes>
+      <Route path="*" element={<NoPage />} />
       <Route path="/" element={<Home />} />
       <Route path="/write" element={<Write />} />
       <Route
         path="/input"
         element={<InputPage />}
       />
+      <Route path="/temp" element={<Temp />} />
     </Routes>
   );
 }

src/components/Modal/ApproveAppointment/index.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import * as S from './style';
+import { Profile } from 'components';
+import {
+  gradeType,
+  genderType,
+} from 'types/Card';
+import MateList from 'components/Post/PostCard/MateList';
+
+interface Props {
+  onClose?: () => void;
+}
+
+interface data {
+  title: string;
+  grade: gradeType[];
+  gender: genderType;
+  profile: {
+    img: string;
+    name: string;
+    info: string;
+  };
+}
+
+const ApproveAppointmentModal: React.FC<
+  Props
+> = ({ onClose }) => {
+  const [data, setData] = useState<data>({
+    title: 'hello',
+    grade: ['ONE'],
+    gender: 'ANY',
+    profile: {
+      img: '',
+      name: '',
+      info: '',
+    },
+  });
+
+  return (
+    <S.Wrapper>
+      <S.TitleBox>
+        <S.Title onClick={onClose}>
+          {data?.title}
+        </S.Title>
+        <MateList
+          grade={data?.grade}
+          gender={data?.gender}></MateList>
+      </S.TitleBox>
+      <S.Contents onClick={() => setData(data)}>
+        <Profile />
+        <S.ButtonWrapper>
+          <S.Button agreement>수락</S.Button>
+          <S.Button agreement={false}>
+            거절
+          </S.Button>
+        </S.ButtonWrapper>
+      </S.Contents>
+    </S.Wrapper>
+  );
+};
+
+export default ApproveAppointmentModal;

src/components/Modal/ApproveAppointment/style.ts

@@ -0,0 +1,57 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+  width: 42.5rem;
+  padding: 1rem 1.25rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.25rem;
+  border-radius: 0.5rem;
+  /* background: white; */
+  background: lightgrey;
+`;
+
+export const TitleBox = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+`;
+
+export const Title = styled.h2`
+  color: var(--BLACK-black, #333);
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 150%;
+`;
+
+export const Contents = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 1.25rem;
+`;
+
+export const Button = styled.button<{
+  agreement: boolean;
+}>`
+  display: flex;
+  padding: 0.75rem 1.75rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.625rem;
+  border: 0;
+  border-radius: 0.5rem;
+  background: ${({ theme, agreement }) =>
+    agreement
+      ? theme.color.main
+      : theme.color.system};
+  color: ${({ theme }) => theme.color.white};
+`;

src/components/Modal/DeclarationModal/index.tsx → src/components/Modal/Declaration/index.tsx

@@ -3,7 +3,7 @@ import Container from '../container';
 import * as S from './style';
 import { XIcon, SelectButton } from 'svg';
 import { ReportType } from 'types';
-import { useNavigate } from 'react-router-dom';
+// import { useNavigate } from 'react-router-dom';
 
 interface Props {
   onClose: () => void;
@@ -12,7 +12,7 @@ interface Props {
 
 const DeclarationModal: React.FC<Props> = ({
   onClose,
-  postId,
+  // postId,
 }) => {
   // const [id, setId] = useState(postId); //추후에 신고할 게시물의 아이디를 받아와서 백엔드에게 보내줄 예정
   // const navigation = useNavigate();

src/components/Modal/index.tsx

@@ -1 +1,2 @@
-export { default as DeclarationModal } from './DeclarationModal';
+export { default as DeclarationModal } from './Declaration';
+export { default as ApproveAppointmentModal } from './ApproveAppointment';

src/components/Profile/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import * as S from './style';
+
+const Profile = () => {
+  return (
+    <S.Container>
+      <S.ProfileImg
+        src="https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e668b566dca82634c93f811198148a26065"
+        alt="아무사진"
+      />
+      <S.TextBox>
+        <S.Name>한재형</S.Name>
+        <S.School>
+          광주소프트웨어마이스터고
+        </S.School>
+      </S.TextBox>
+    </S.Container>
+  );
+};
+
+export default Profile;

src/components/Profile/style.ts

@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.75rem;
+`;
+
+export const ProfileImg = styled.img`
+  border-radius: 100%;
+  width: 3rem;
+  height: 3rem;
+`;
+
+export const TextBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+`;
+
+export const Name = styled.h2`
+  color: ${({ theme }) => theme.color.gray[800]};
+  font-size: 1rem;
+  ${({ theme }) => theme.fontStyle.m3}
+`;
+
+export const School = styled.h2`
+  color: ${({ theme }) => theme.color.gray[600]};
+  font-size: 1rem;
+  ${({ theme }) => theme.fontStyle.m3}
+`;

src/components/index.ts

@@ -1,3 +1,4 @@
 export * from './Modal';
 export * from './Post';
 export * from './Input';
+export { default as Profile } from './Profile';

src/pages/NoPage/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const NoPage = () => {
+  return (
+    <div>
+      This Page is not defined. Try another pages
+    </div>
+  );
+};
+
+export default NoPage;

src/pages/index.ts

@@ -1,3 +1,5 @@
 export { default as Home } from './home';
 export { default as Write } from './write';
 export { default as InputPage } from './InputPage';
+export { default as Temp } from './temp';
+export { default as NoPage } from './NoPage';

src/pages/temp/index.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const temp = () => {
+  // 스토리북을 사용하지 않으니 임시로 여기에다가 만드신 컴포넌트를 추가하셔서 확인하시면 될 것 같습니다.
+  return <></>;
+};
+
+export default temp;