Feat/study

package.json

@@ -16,6 +16,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.0",
     "react-scripts": "5.0.1",
+    "socket.io-client": "^4.7.5",
     "styled-components": "^6.1.2",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -8,6 +8,7 @@ import Member from './views/Member';
 import Shop from './views/Shop';
 import Setting from './views/Setting';
 import Login from './views/Login';
+import Study from './views/Study';
 import { setupInterceptors } from './api/axios';
 import useLoginState from './hooks/useLoginState';
 import useUserState from './hooks/useUserState';
@@ -74,6 +75,7 @@ function App() {
           <Route path="/member" element={<Member />} />
           <Route path="/shop" element={<Shop />} />
           <Route path="/setting" element={<Setting />} />
+          <Route path="/study" element={<Study />} />
         </Routes>
       </Router>
     </ThemeProvider>

src/SetupProxy.js

@@ -0,0 +1,29 @@
+//src/setupProxy.js
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function (app) {
+  app.use(
+    '/ws',
+    createProxyMiddleware({
+      target: 'https://www.iflab.run',
+      changeOrigin: true,
+      ws: true,
+      secure: false,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+      },
+    })
+  );
+
+  app.use(
+    '/api2',
+    createProxyMiddleware({
+      target: 'https://www.iflab.run',
+      changeOrigin: true,
+      secure: false,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+      },
+    })
+  );
+};

src/components/Buttons/style.js

@@ -29,25 +29,34 @@ const Button = styled.button`
     filter: brightness(0.8);
   }`}
 
- ${props =>
-    props.color === 'white' &&
-    css`
-      border: 1px #a9adb9 solid;
-      background-color: #fff;
-      transition: none;
-    `}
-  ${props =>
-    props.color === 'blue' &&
-    css`
-      color: #ffffff;
-      background-color: #408cff;
-    `}
-  ${props =>
-    props.color === 'red' &&
-    css`
-      color: #ffffff;
-      background-color: #ff5a5f;
-    `}
+  ${props => {
+    switch (props.color) {
+      case 'white':
+        return css`
+          border: 1px #a9adb9 solid;
+          background-color: #fff;
+          transition: none;
+         }`;
+      case 'blue':
+        return css`
+          color: #ffffff;
+          background-color: #408cff;
+        `;
+      case 'red':
+        return css`
+          color: #ffffff;
+          background-color: #ff5a5f;
+        `;
+      case 'gradationBlue':
+        return css`
+          color: #ffffff;
+          background: linear-gradient(180deg, #408cff 0%, #8e9aff 100%);
+        `;
+      default:
+        return;
+    }
+  }}
+
   ${props =>
     props.buttonType === 'disabled' &&
     css`
@@ -65,6 +74,12 @@ const Button = styled.button`
       border-radius: 8px;
       align-self: flex-end;
     `}
+    ${props =>
+    props.size === 'big' &&
+    css`
+      padding: 30px;
+      font-size: 20px;
+    `}
 `;
 
 export { Button };

src/components/Card/index.js

@@ -1,14 +1,43 @@
-import React, { useEffect, useState } from 'react';
-import { CardContainer, CardWrapper, CardTop, CardLabel, CardTitle } from './style';
+import React, { useEffect, useRef, useState } from 'react';
+import { CardContainer, CardWrapper, CardTop, CardLabel, CardTitle, StudyButton } from './style';
 import LocationIcon from '../../assets/location-icon.svg';
 import CalendarIcon from '../../assets/calendar-icon.svg';
 import CardContent from './CardContent';
 import HistoryList from './HistoryList';
+import useUserState from '../../hooks/useUserState';
+import useModal from '../../hooks/useModal';
+import { useNavigate } from 'react-router-dom';
+import Input from '../Input/Input';
 import { API } from '../../api/axios';
 
 const Card = () => {
   const [week, setWeek] = useState();
   const [schedule, setSchedule] = useState([]);
+  const createModalInputRef = useRef();
+  const { user } = useUserState();
+  const navigate = useNavigate();
+  const noStudyModal = useModal({
+    description: '지금 스터디가 진행되고 있지 않아요!',
+    onOk: () => console.log('hello'),
+  });
+  const createRoomModal = useModal({
+    closable: true,
+    onOk: () => {
+      //스터디룸 생성 API
+      navigate('/study');
+    },
+  });
+  const handleClickStudyButton = () => {
+    if (user?.authority === 'ROLE_USER') {
+      //스터디 중일 때
+      // navigate('/study');
+      //스터디가 없을 때
+      noStudyModal.show();
+    }
+  };
+  const handleClickCreateRoomButton = () => {
+    createRoomModal.show();
+  };
   const setSeminarData = schedule => {
     return [
       {
@@ -43,6 +72,10 @@ const Card = () => {
   }, []);
   return (
     <CardContainer>
+      {noStudyModal.render()}
+      {createRoomModal.render({
+        children: <Input type="number" ref={createModalInputRef} placeholder={'참여 인원'} />,
+      })}
       <CardWrapper>
         <CardTop>
           <CardLabel> 우리의 흔적 </CardLabel>
@@ -60,6 +93,12 @@ const Card = () => {
             <CardContent key={index} subscription={data.subscription} contents={data.contents} />
           );
         })}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+          {user?.authority === 'ROLE_USER' && (
+            <StudyButton onClick={handleClickCreateRoomButton}>방 만들기</StudyButton>
+          )}
+          {user && <StudyButton onClick={handleClickStudyButton}>스터디 참여하기</StudyButton>}
+        </div>
       </CardWrapper>
     </CardContainer>
   );

src/components/Card/style.js

@@ -43,4 +43,23 @@ const CardTitle = styled.div`
   font-weight: bold;
 `;
 
-export { CardContainer, CardWrapper, CardTop, CardLabel, CardTitle };
+const StudyButton = styled.button`
+  width: 100%;
+  height: 52px;
+  border: none;
+  flex-shrink: 0;
+  border-radius: 10px;
+  background: linear-gradient(180deg, #408cff 0%, #8e9aff 100%);
+  cursor: pointer;
+
+  color: white;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+
+  &:hover {
+    transform: scale(1.03);
+  }
+`;
+
+export { CardContainer, CardWrapper, CardTop, CardLabel, CardTitle, StudyButton };

src/utils/index.js

@@ -16,6 +16,19 @@ export const getDifficultyIcon = difficulty => {
   return Platinum;
 };
 
+export const getMemberRank = rank => {
+  switch (rank / 10) {
+    case 1:
+      return 'bronze';
+    case 2:
+      return 'silver';
+    case 3:
+      return 'gold';
+    default:
+      return 'platinum';
+  }
+};
+
 export const formatSolveTime = solvedAt => {
   const now = dayjs();
   const currentDate = now.format('YYYY-MM-DD');

src/views/Study/components/ChatFooter.js

@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+import Button from '../../../components/Buttons';
+import React, { useRef } from 'react';
+import { useCallback } from 'react';
+
+const ChatFooter = ({ addMyMessage }) => {
+  const inputRef = useRef();
+  const sendMessage = useCallback(() => {
+    const now = new Date();
+    const hours = now.getHours().toString().padStart(2, '0'); // 시각 두 자리로
+    const minutes = now.getMinutes().toString().padStart(2, '0'); // 분 두 자리로
+    addMyMessage({ message: inputRef.current.value, messageTime: `${hours}:${minutes}` });
+    inputRef.current.value = '';
+  }, [addMyMessage]);
+  return (
+    <Container>
+      <ChatInputContainer
+        onClick={() => inputRef.current.focus()}
+        onSubmit={e => e.preventDefault()}
+      >
+        <ChatInput placeholder="내용을 입력하세요" ref={inputRef} />
+        <Button color={'blue'} size={'small'} onClick={sendMessage}>
+          전송
+        </Button>
+      </ChatInputContainer>
+    </Container>
+  );
+};
+export default React.memo(ChatFooter);
+
+const ChatInputContainer = styled.form`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  background: ${props => props.theme.background};
+  padding: 10px 20px;
+  border-radius: 25px;
+  border: 1px solid #a9adb9;
+  outline: none;
+  letter-spacing: -0.4px;
+  font-size: 14px;
+  cursor: pointer;
+  &:focus {
+    border: 1px solid ${props => props.theme.titleText};
+  }
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-basis: 8%;
+  justify-content: center;
+  background: ${props => props.theme.background};
+  padding: 10px;
+`;
+const ChatInput = styled.input`
+  background: ${props => props.theme.background};
+  outline: none;
+  letter-spacing: -0.4px;
+  font-size: 14px;
+  border: none;
+  width: 88%;
+`;