feat: 부산대 12조 FE 8,9주차 PR (#48)

.eslintrc.cjs

@@ -56,6 +56,7 @@ module.exports = {
     'react/jsx-props-no-spreading': 'off',
     '@typescript-eslint/no-use-before-define': 'off',
     'react/jsx-boolean-value': 'off',
+    'react/jsx-no-constructed-context-values': 'off',
     'import/prefer-default-export': 'off',
   },
 }

.gitignore

@@ -26,4 +26,6 @@ dist-ssr
 *.sln
 *.sw?
 
+.env
+
 *storybook.log

package.json

@@ -18,8 +18,10 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@tanstack/react-query": "^5.59.0",
+    "axios": "^1.7.7",
     "emotion-normalize": "^11.0.1",
     "react": "^18.3.1",
+    "react-datepicker": "^7.5.0",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
     "react-router-dom": "^6.26.2",

src/api/auth/index.ts

@@ -0,0 +1,8 @@
+import axios from 'axios';
+import endpoints from '@constants/endpoints';
+import { TokenReIssueResponse } from '@/types/auth';
+
+export async function reIssueAccessToken() {
+  const response = await axios.get<TokenReIssueResponse>(endpoints.reIssue);
+  return response.data.AccessToken;
+}

src/api/member/index.ts

@@ -0,0 +1,8 @@
+import endpoints from '@constants/endpoints';
+import { MyInfoResponse } from '@/types/member';
+import axiosInstance from '@/utils/network';
+
+export async function getMyInfo(): Promise<MyInfoResponse> {
+  const response = await axiosInstance.get<MyInfoResponse>(endpoints.myInfo);
+  return response.data;
+}

src/components/button/useButtonStyle.ts

@@ -39,6 +39,16 @@ function useButtonStyle({ variant = 'default' }: UseButtonStyleProps) {
       disabledBackgroundColor: globalTheme.colors.primary.passive,
       disabledColor: globalTheme.colors.text.subtle,
     },
+    transparent: {
+      backgroundColor: 'transparent',
+      color: globalTheme.colors.primary.main,
+      border: 'none',
+      hoverBackgroundColor: 'transparent',
+      hoverColor: globalTheme.colors.primary.darken,
+      hoverBorderColor: 'none',
+      disabledBackgroundColor: 'transparent',
+      disabledColor: globalTheme.colors.text.subtle,
+    },
   };
 
   const styles = variantStyles[variant];

src/components/checkbox/index.tsx

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes } from 'react';
+import { forwardRef, InputHTMLAttributes } from 'react';
 import { CSSObject } from '@emotion/react';
 import useCheckboxStyle from '@components/checkbox/useCheckboxStyle';
 
@@ -9,12 +9,12 @@ interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
   checked?: boolean;
 }
 
-function Radio({ type = 'checkbox', ...rest }: RadioProps) {
+const Radio = forwardRef<HTMLInputElement, RadioProps>(({ type = 'checkbox', ...rest }, ref) => {
   const { checkboxStyle } = useCheckboxStyle();
 
   return (
-    <input type={type} css={checkboxStyle} {...rest} />
+    <input type={type} css={checkboxStyle} ref={ref} {...rest} />
   );
-}
+});
 
 export default Radio;

src/components/container/variants/index.tsx

@@ -1,5 +1,6 @@
 import Container, { ContainerProps } from '@components/container';
 import { css } from '@emotion/react';
+import { rootWidth } from '@styles/length';
 
 interface DefaultPaddedContainerProps extends ContainerProps {
 }
@@ -13,6 +14,7 @@ export function DefaultPaddedContainer(
     flex-direction: column;
     align-items: center;
     padding: 0 20px;
+    max-width: ${rootWidth};
   `;
 
   return (

src/components/footer/index.tsx

@@ -1,27 +1,33 @@
 import Container from '@components/container';
 import { css } from '@emotion/react';
-import logo from '@assets/logo.svg';
+import logo from '@assets/logo-inset.svg';
+import { rootWidth } from '@styles/length';
 
 function Footer() {
   const dividerStyle = css`
-    color: black;
+    color: #d3d3d3;
     font-size: 15px;
   `;
   return (
     <Container
-      justify="space-between"
-      padding="30px 70px"
       height="150px"
-      cssOverride={css`background-color: #f8f8f8;`}
+      cssOverride={css`background-color: #2c2c2c;`}
     >
-      <img src={logo} alt="logo" css={css`width: 50px;`} />
-      <Container width="auto" gap="30px">
-        <div css={dividerStyle}>
-          kakaotechcampus
-        </div>
-        <div css={dividerStyle}>
-          Team 12
-        </div>
+      <Container
+        width={rootWidth}
+        justify="flex-end"
+        padding="20px"
+        gap="15px"
+      >
+        <Container width="auto" direction="column" gap="8px" align="flex-end">
+          <div css={dividerStyle}>
+            &copy; 2024, Kakao Tech campus
+          </div>
+          <div css={dividerStyle}>
+            Team 12
+          </div>
+        </Container>
+        <img src={logo} alt="logo" css={css`width: 80px;`} />
       </Container>
     </Container>
   );

src/components/header/index.tsx

@@ -1,65 +1,69 @@
 import Container from '@components/container';
 import Button from '@components/button';
 import Avatar from '@components/avatar';
-import { css } from '@emotion/react';
+import { css, useTheme } from '@emotion/react';
 import logo from '@assets/logo.svg';
 import alarm from '@assets/icons/alarm.svg';
 import dropDown from '@assets/icons/dropdown.svg';
 import { useState } from 'react';
+import { rootWidth } from '@styles/length';
 
 function Header() {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const theme = useTheme();
 
   const toggleDropdown = () => {
     setIsDropdownOpen((prev) => !prev);
   };
 
   return (
-    <Container
-      justify="space-between"
-      padding="20px 40px"
-      height="60px"
-      cssOverride={css`box-shadow: 0 4px 7px rgba(0, 0, 0, 0.2); position: relative;`}
-    >
-      <img
-        src={logo}
-        alt="logo"
-        css={{ width: '75px' }}
-      />
+    <Container cssOverride={css`background-color: ${theme.colors.background.main}; box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); position: relative;`}>
       <Container
-        width="auto"
-        gap="20px"
+        justify="space-between"
+        padding="20px"
+        height="60px"
+        width={rootWidth}
       >
-        <Button css={css`
+        <img
+          src={logo}
+          alt="logo"
+          css={{ width: '75px' }}
+        />
+        <Container
+          width="auto"
+          gap="20px"
+        >
+          <Button css={css`
           width: 140px;
           height: 35px;
           font-size:14px;
           border-color: #ECEDEE;
         `}
-        >
-          스터디 생성하기
-        </Button>
-        <img src={alarm} alt="alarm" css={{ width: '25px' }} />
-        <Container
-          width="auto"
-          padding="0"
-          gap="10px"
-        >
-          <Avatar
-            size="small"
-            css={{ borderRadius: '15px' }}
-            onClick={toggleDropdown}
-          />
-          <img
-            src={dropDown}
-            alt="dropDown"
-            css={{ width: '10px' }}
-            onClick={toggleDropdown}
-            role="presentation"
-          />
-          {isDropdownOpen && (
+          >
+            스터디 생성하기
+          </Button>
+          <img src={alarm} alt="alarm" css={{ width: '25px' }} />
+          <Container
+            width="auto"
+            padding="0"
+            gap="10px"
+          >
+            <Avatar
+              size="small"
+              css={{ borderRadius: '15px' }}
+              onClick={toggleDropdown}
+            />
+            <img
+              src={dropDown}
+              alt="dropDown"
+              css={{ width: '10px' }}
+              onClick={toggleDropdown}
+              role="presentation"
+            />
+            {isDropdownOpen && (
             <Dropdown />
-          )}
+            )}
+          </Container>
         </Container>
       </Container>
     </Container>

src/components/input/useInputStyle.ts

@@ -13,7 +13,7 @@ function useInputStyle({ enableToggleShow, icon }: UseInputStyleProps) {
     css`
       padding: 10px ${enableToggleShow ? '34px' : '10px'} 10px ${icon ? '34px' : '10px'};
       border-radius: ${theme.corners.small};
-      border: 1px solid ${theme.colors.border.subtle};
+      border: 1px solid ${theme.colors.border.prominent};
       width: 100%;
       box-sizing: border-box;
       font-size: 15px;

src/components/select/useSelectStyle.ts

@@ -12,13 +12,10 @@ function useSelectStyle() {
   const selectStyle = (
     css`
       outline: none;
-      border: 1px solid ${theme.colors.border.subtle};
+      border: 1px solid ${theme.colors.border.prominent};
       border-radius: ${theme.corners.small};
       height: 30px;
       padding: 5px;
-      &::after {
-        color: ${theme.colors.text.subtle};
-      }
     `
   );
 

src/components/template/Page.tsx

@@ -0,0 +1,29 @@
+import Header from '@components/header';
+import Footer from '@components/footer';
+import { ReactNode } from 'react';
+import Container from '@components/container';
+import { useTheme } from '@emotion/react';
+
+interface PageProps {
+  hideHeader?: boolean;
+  hideFooter?: boolean;
+  children?: ReactNode;
+}
+function Page({ hideHeader, hideFooter, children }: PageProps) {
+  const theme = useTheme();
+  return (
+    <div css={{ backgroundColor: theme.colors.background.darken }}>
+      { !hideHeader && (
+        <Header />
+      )}
+      <Container direction="column" justify="flex-start">
+        {children}
+      </Container>
+      { !hideFooter && (
+        <Footer />
+      )}
+    </div>
+  );
+}
+
+export default Page;

src/components/textarea/index.tsx

@@ -15,10 +15,11 @@ export interface TextareaProps extends HTMLAttributes<HTMLTextAreaElement> {
   cols?: number;
   maxLength?: number;
   resize?: 'vertical' | 'horizontal' | 'none' | 'both';
+  placeholder?: string;
 }
 
 const TextArea = forwardRef<HTMLTextAreaElement, TextareaProps>(({
-  onChange, label, css, rows = 4, cols = 50, maxLength, resize = 'both', ...rest
+  onChange, label, css, rows = 4, cols = 50, maxLength, resize = 'both', placeholder = '', ...rest
 }, ref) => {
   const textareaId = useRef(generateRandomId());
   const { textAreaStyle } = useTextAreaStyle({ resize });
@@ -42,6 +43,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextareaProps>(({
         maxLength={maxLength}
         ref={ref}
         onChange={onChange}
+        placeholder={placeholder}
         {...rest}
       />
     </>

src/constants/endpoints.ts

@@ -0,0 +1,16 @@
+const prefix = '/api';
+
+const endpoints = {
+  myInfo: `${prefix}/users`,
+  reIssue: `${prefix}/reissue`,
+};
+
+const authRequiredEndpoints = {
+  [endpoints.myInfo]: true,
+};
+
+export function isAuthRequired(endpoint?: string) {
+  return endpoint && endpoint in authRequiredEndpoints;
+}
+
+export default endpoints;

src/features/main/studyList/StudyItem.tsx

@@ -29,6 +29,7 @@ function StudyItem(
     ...singleEllipsis,
     whiteSpace: 'normal',
     wordBreak: 'break-all',
+    lineHeight: '16px',
   };
 
   return (
@@ -37,9 +38,9 @@ function StudyItem(
         <Container
           padding="8px 0"
           align="flex-start"
-          width="175px"
+          width="150px"
           direction="column"
-          gap="3px"
+          gap="8px"
           cssOverride={singleEllipsis}
         >
           <Paragraph variant="large" weight="bold" css={{ ...singleEllipsis, width: '100%' }}>{study.name}</Paragraph>
@@ -50,11 +51,11 @@ function StudyItem(
         </Container>
         <Tag variant={study.isOpen ? 'primary' : 'default'}>
           <Paragraph variant="small">
-            {study.isOpen ? '모집중' : '모집마감'}
+            {study.isOpen ? '모집중' : '마감'}
           </Paragraph>
         </Tag>
       </Container>
-      <Container justify="flex-start" align="flex-start" height="42px" cssOverride={doubleEllipsis}>
+      <Container justify="flex-start" align="flex-start" height="56px" padding="8px 0 0 0" cssOverride={doubleEllipsis}>
         <Paragraph variant="small" css={doubleEllipsis}>{study.description}</Paragraph>
       </Container>
       <Container padding="12px 0 0 0">