PUSH :: Front End code to repo

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { createContext, Fragment, useState } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 
 import CssBaseline from '@mui/material/CssBaseline';
@@ -12,19 +12,27 @@ import Notifications from '@/sections/Notifications';
 import SW from '@/sections/SW';
 import TabBar from '@/sections/TabBar';
 
+export const HiddenContext = createContext<React.Dispatch<React.SetStateAction<boolean>>>(
+  () => false,
+);
+
 function App() {
+  const [isHidden, setHidden] = useState<boolean>(false);
+
   return (
-    <Fragment>
-      <CssBaseline />
-      <Notifications />
-      <HotKeys />
-      <SW />
-      <BrowserRouter>
-        <Header />
-        <Pages />
-        <TabBar />
-      </BrowserRouter>
-    </Fragment>
+    <HiddenContext.Provider value={setHidden}>
+      <Fragment>
+        <CssBaseline />
+        <Notifications />
+        <HotKeys />
+        <SW />
+        <BrowserRouter>
+          <Header isHidden={isHidden} />
+          <Pages />
+          <TabBar isHidden={isHidden} />
+        </BrowserRouter>
+      </Fragment>
+    </HiddenContext.Provider>
   );
 }
 

frontend/src/components/Button/PlusButton.tsx

@@ -1,13 +1,9 @@
 import { PlusButtonStyle } from '@/components/Button/styled';
 import plus from '/plus.svg';
 
-function PlusButton() {
+function PlusButton(props: { onClick?: () => void }) {
   return (
-    <PlusButtonStyle
-      onClick={() => {
-        console.log('button clicked');
-      }}
-    >
+    <PlusButtonStyle onClick={props.onClick}>
       <img src={plus} alt="plus" />
     </PlusButtonStyle>
   );

frontend/src/pages/Auth/SigninPage.tsx

@@ -0,0 +1,57 @@
+import { ColumnFlexBox } from '@/components/styled';
+import { AuthField, AuthFieldBackground } from '@/pages/Auth/styled';
+import Box from '@mui/material/Box';
+import { FinalButton } from '@/pages/Post/styled';
+import back from '/back.svg';
+import IconButton from '@mui/material/IconButton';
+import { useNavigate } from 'react-router-dom';
+
+function SigninPage() {
+  const navigate = useNavigate();
+
+  return (
+    <ColumnFlexBox padding='5%' marginTop='10%' >
+      <IconButton
+        style={{ position: 'fixed', top: 20, left: 20 }}
+        onClick={() => {
+          navigate('/');
+        }}
+      >
+        <img src={back} style={{ width: '45px', height: '45px' }} />
+      </IconButton>
+
+      <Box
+        sx={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <div
+          style={{
+            fontFamily: 'WAGURITTF',
+            fontWeight: 'Bold',
+            color: '#00AF20',
+            fontSize: 42,
+          }}
+        >
+          나누리
+        </div>
+
+        <AuthFieldBackground>
+          <AuthField placeholder={'아이디를 입력해주세요'} />
+        </AuthFieldBackground>
+
+        <AuthFieldBackground>
+          <AuthField placeholder={'비밀번호를 입력해주세요'} />
+        </AuthFieldBackground>
+      </Box>
+
+      <FinalButton>로그인</FinalButton>
+    </ColumnFlexBox>
+  );
+}
+
+export default SigninPage;

frontend/src/pages/Auth/SignupPage.tsx

@@ -0,0 +1,7 @@
+import { ColumnFlexBox } from '@/components/styled';
+
+function SignupPage() {
+  return <ColumnFlexBox></ColumnFlexBox>;
+}
+
+export default SignupPage;

frontend/src/pages/Auth/styled.ts

@@ -0,0 +1,17 @@
+import { styled } from '@mui/material/styles';
+import { InputBase } from '@mui/material';
+import { FieldBackground } from '@/pages/Post/styled';
+
+const AuthFieldBackground = styled(FieldBackground)({
+  margin: '8px auto',
+});
+
+const AuthField = styled(InputBase)({
+  flexGrow: 1,
+  padding: '12px',
+  fontFamily: 'Pretendard',
+  fontSize: '20px',
+  fontWeight: '500',
+});
+
+export { AuthFieldBackground, AuthField };

frontend/src/pages/Detail/DetailPage.tsx

@@ -0,0 +1,35 @@
+import { ColumnFlexBox } from '@/components/styled';
+import { DetailContent, DetailImg, DetailRegion, DetailTitle } from '@/pages/Detail/styled';
+import Box from '@mui/material/Box';
+
+function DetailPage() {
+  return (
+    <ColumnFlexBox style={{ alignItems: 'center' }}>
+      <DetailImg
+        src={
+          new URL(
+            'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzWaHRKYynnJJvBanWuAVxpma7c3USTWu7WQ&s',
+          ).href
+        }
+        alt="DetailImage"
+      />
+
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        flexDirection="row"
+        width="90%"
+        alignItems="center"
+        marginTop="12px"
+      >
+        <DetailTitle>의성식 성능좋은 상추겉절이</DetailTitle>
+
+        <DetailRegion>경북 의성군</DetailRegion>
+      </Box>
+
+      <DetailContent>상추겉절이 입니다.</DetailContent>
+    </ColumnFlexBox>
+  );
+}
+
+export default DetailPage;

frontend/src/pages/Detail/index.ts

@@ -0,0 +1,3 @@
+import DetailPage from './DetailPage';
+
+export default DetailPage;

frontend/src/pages/Detail/styled.ts

@@ -0,0 +1,34 @@
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+
+const DetailImg = styled('img')({
+  width: '90%',
+  maxWidth: '500px',
+  maxHeight: '300px',
+  borderRadius: '12px',
+});
+
+const DetailTitle = styled(Typography)({
+  fontFamily: 'Pretendard',
+  fontSize: '24px',
+  fontWeight: 'bold',
+  color: '#3C3C3C',
+});
+
+const DetailRegion = styled(Typography)({
+  marginLeft: '20px',
+  fontFamily: 'Pretendard',
+  fontSize: '16px',
+  fontWeight: '500',
+  color: '#7C7C7C',
+});
+
+const DetailContent = styled(Typography)({
+  marginTop: '12px',
+  fontFamily: 'Pretendard',
+  fontSize: '16px',
+  fontWeight: '500',
+  width: '90%',
+});
+
+export { DetailImg, DetailTitle, DetailRegion, DetailContent };

frontend/src/pages/Home/HomePage.tsx

@@ -1,40 +1,47 @@
 import { ColumnFlexBox } from '@/components/styled';
 import share from '/public/share.svg';
-
 import MainCell from '@/components/Cell/MainCell';
 import NanuriDevider from '@/components/Devider/NanuriDevider';
 import PlusButton from '@/components/Button/PlusButton';
 import Box from '@mui/material/Box';
+import { Link, useNavigate } from 'react-router-dom';
+import { ButtonBase } from '@mui/material';
 
 function HomePage() {
   const list = Array.from({ length: 10 }).map((_, i) => i);
+  const navigate = useNavigate();
 
   return (
     <>
       <ColumnFlexBox>
-        {/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
         <Box style={{ paddingBottom: 60, paddingTop: 20 }}>
           {list.map((index) => {
             return (
               <Box key={index} style={{ paddingBottom: 50, paddingTop: 10 }}>
-                <MainCell
-                  title={'의성식 성능 좋은 상추 3봉 나눔합니다@@@'}
-                  region={'경상북도 의성군'}
-                  badges={[
-                    { content: '나눔', imgSrc: share },
-                    { content: '김건우', imgSrc: share },
-                  ]}
-                  imgUrl={
-                    'https://health.chosun.com/site/data/img_dir/2023/06/07/2023060701939_0.jpg'
-                  }
-                />
+                <ButtonBase component={Link} to="/detail">
+                  <MainCell
+                    title={'의성식 성능 좋은 상추 3봉 나눔합니다@@@'}
+                    region={'경상북도 의성군'}
+                    badges={[
+                      { content: '나눔', imgSrc: share },
+                      { content: '김건우', imgSrc: share },
+                    ]}
+                    imgUrl={
+                      'https://health.chosun.com/site/data/img_dir/2023/06/07/2023060701939_0.jpg'
+                    }
+                  />
+                </ButtonBase>
                 <NanuriDevider />
               </Box>
             );
           })}
         </Box>
 
-        <PlusButton />
+        <PlusButton
+          onClick={() => {
+            navigate('/post');
+          }}
+        />
       </ColumnFlexBox>
     </>
   );

frontend/src/pages/My/MyPage.tsx

@@ -29,7 +29,9 @@ function MyPage() {
       </Box>
 
       <MyPageButton title={'내 게시글 보기'} imgSrc={memo} />
+
       <MyPageButton title={'내 정보 수정하기'} imgSrc={edit} />
+
       <MyPageButton title={'나누리 로그아웃'} imgSrc={logout} destructive={true} />
     </ColumnFlexBox>
   );

frontend/src/pages/Post/PostPage.tsx

@@ -0,0 +1,55 @@
+import { ColumnFlexBox } from '@/components/styled';
+import IconButton from '@mui/material/IconButton';
+import back from '/back.svg';
+import { useNavigate } from 'react-router-dom';
+import Box from '@mui/material/Box';
+import {
+  ContentField,
+  FieldBackground,
+  FieldTitle,
+  FinalButton,
+  TitleField,
+} from '@/pages/Post/styled';
+
+function PostPage() {
+  const navigate = useNavigate();
+
+  return (
+    <ColumnFlexBox style={{ alignItems: 'center' }}>
+      <IconButton
+        style={{ position: 'fixed', top: 20, left: 20 }}
+        onClick={() => {
+          navigate('/');
+        }}
+      >
+        <img src={back} style={{ width: '45px', height: '45px' }} />
+      </IconButton>
+
+      <Box
+        sx={{
+          position: 'relative',
+          display: 'flex',
+          flexDirection: 'column',
+          marginTop: '80px',
+          paddingBottom: '120px',
+        }}
+      >
+        <FieldTitle>제목</FieldTitle>
+
+        <FieldBackground>
+          <TitleField placeholder="제목을 입력해주세요" />
+        </FieldBackground>
+
+        <FieldTitle>내용</FieldTitle>
+
+        <FieldBackground>
+          <ContentField placeholder="내용을 입력해주세요" multiline={true} minRows={2} />
+        </FieldBackground>
+
+        <FinalButton>작성 완료</FinalButton>
+      </Box>
+    </ColumnFlexBox>
+  );
+}
+
+export default PostPage;

frontend/src/pages/Post/index.ts

@@ -0,0 +1,3 @@
+import PostPage from '@/pages/Post/PostPage';
+
+export default PostPage;