Merge branch 'develop' into feat/#2

prgrms-fe-devcourse · Oct 28, 2024 · d2227c6 · d2227c6
2 parents 1ac8c30 + f41f8e2
commit d2227c6
Show file tree

Hide file tree

Showing 16 changed files with 532 additions and 125 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -6,6 +6,8 @@ import PageLayout from './layouts/pageLayout'
 import MyPage from './pages/MyPage'
 import PostPage from './pages/PostPage'
 import MainPage from './pages/MainPage'
+import SearchPage from './pages/SearchPage'
+
 function App() {
   return (
     <BrowserRouter>
@@ -32,6 +34,10 @@ function App() {
             element={<PostPage />}
           />
           <Route
+            path='/search'
+            element={<SearchPage />}
+          />
+           <Route
             path='/'
             element={<MainPage />}
           />

diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx
@@ -47,7 +47,12 @@ const NavigationBar: React.FC = () => {
 
   // 내 정보 페이지 이동
   const handleProfile = () => {
-    navigate('/profile') // 프로필 페이지로 이동
+    navigate('/profile')
+  }
+
+  // 게시물 작성 네비게이션
+  const handleWriting = () => {
+    navigate('/write')
   }
 
   // 카테고리 배열
@@ -97,7 +102,9 @@ const NavigationBar: React.FC = () => {
           onClick={() => navigate('/search')}
         />
         <LogInBtnContainer>
-          {loggedIn ? (
+          {' '}
+          {/*loggedIn ! 추후에 수정 */}
+          {!loggedIn ? (
             <AvatarContainer>
               <StyledAvatar
                 size={64}
@@ -112,6 +119,10 @@ const NavigationBar: React.FC = () => {
                   <ModalContent>
                     <ModalButton onClick={handleProfile}>내 정보</ModalButton>
                     <ModalDivider />
+                    <ModalButton onClick={handleWriting}>
+                      게시물 작성
+                    </ModalButton>
+                    <ModalDivider />
                     <ModalButton onClick={handleLogout}>로그아웃</ModalButton>
                   </ModalContent>
                 </CustomModal>

diff --git a/frontend/src/components/PostCard.tsx b/frontend/src/components/PostCard.tsx
@@ -1,68 +1,72 @@
-import styled from 'styled-components';
+import styled from 'styled-components'
 
 interface CardProps {
-  category: string;
-  title: string;
-  author: string;
-  date: string;
-  text: string;
-  image_url: string;
+  category: string
+  title: string
+  author: string
+  date: string
+  text: string
+  imgUrl: string
+
 }
 
 const Card = styled.div`
   display: flex;
   padding: 16px;
-  margin: 0 50px; 
+  margin: 0 50px;
   margin-bottom: 16px;
   background-color: #fff;
-`;
+`
 
 const PostImage = styled.img`
-  width: 200px;
+  width: 150px;
+  height: 150px;
   height: auto;
   margin-right: 20px;
-`;
+`
 
 const PostContent = styled.div`
   display: flex;
   flex-direction: column;
-`;
+`
 
 const PostCategory = styled.p`
   font-size: 20px;
   color: #7d7d7d;
   margin: 0;
   font-weight: bold;
-`;
+`
 
 const PostTitle = styled.h2`
   font-size: 33px;
   margin: 8px 0;
-`;
+`
 
 const PostAuthor = styled.p`
   font-size: 16px;
   color: #7d7d7d;
   margin: 0;
-`;
+`
 
 const PostDate = styled.p`
   font-size: 16px;
   color: #7d7d7d;
   margin: 4px 0;
-`;
+`
 
 const PostText = styled.p`
   font-size: 1rem;
-  color: #1C1C1C;
+  color: #1c1c1c;
   margin-top: 8px;
-`;
-
+`
 
 function PostCard({ title, author, date, text, category, image_url }: CardProps) {
   return (
     <Card>
-      <PostImage src={image_url} alt='Post Thumbnail' />
+      <PostImage
+        src={imgUrl}
+        alt='Post Thumbnail'
+      />
       <PostContent>
         <PostCategory>{category}</PostCategory>
         <PostTitle>{title}</PostTitle>
@@ -71,7 +75,7 @@ function PostCard({ title, author, date, text, category, image_url }: CardProps)
         <PostText>{text}</PostText>
       </PostContent>
     </Card>
-  );
+  )
 }
 
-export default PostCard;
+export default PostCard
diff --git a/frontend/src/components/SearchPageInput/index.tsx b/frontend/src/components/SearchPageInput/index.tsx
@@ -0,0 +1,22 @@
+import { SearchOutlined } from '@ant-design/icons'
+import { SearchPageInputContainer } from './style'
+
+const SearchPageInput = () => {
+  return (
+    <SearchPageInputContainer>
+      <button>
+        <span>
+          <SearchOutlined
+            style={{ fontSize: '1.8rem', color: 'rgb(176, 184, 193)' }}
+          />
+        </span>
+      </button>
+      <input
+        type='text'
+        placeholder='검색어를 입력하세요.'
+      />
+    </SearchPageInputContainer>
+  )
+}
+
+export default SearchPageInput
diff --git a/frontend/src/components/SearchPageInput/style.tsx b/frontend/src/components/SearchPageInput/style.tsx
@@ -0,0 +1,36 @@
+import styled from 'styled-components'
+
+export const SearchPageInputContainer = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-bottom: 1.5px solid rgb(176, 184, 193);
+
+  & button {
+    border: none;
+    background-color: transparent;
+  }
+
+  & input {
+    font-family: 'Noto Sans KR', sans-serif !important;
+    width: 100%;
+    height: 4rem;
+    border: none;
+    background-color: transparent;
+    padding-left: 1rem;
+    font-size: 1.3rem;
+    font-weight: 500;
+  }
+
+  & input::placeholder {
+    color: #7d7d7d;
+  }
+
+  & input:focus {
+    outline: none;
+  }
+
+  &:focus-within {
+    border-bottom: 1.5px solid #1c1c1c;
+  }
+`
diff --git a/frontend/src/components/SearchPageNav/index.tsx b/frontend/src/components/SearchPageNav/index.tsx
@@ -0,0 +1,29 @@
+import { SearchPageNavContainer, SearchPageNavItem } from './style'
+
+const SearchPageNav = () => {
+  const categories = [
+    '전체',
+    '한식',
+    '중식',
+    '일식',
+    '양식',
+    '동남아 요리',
+    '남미 요리',
+    '중동 요리',
+    '퓨전 요리',
+    '채식 요리',
+    '해산물 요리',
+    '바베큐 요리',
+    '디저트 요리',
+  ]
+
+  return (
+    <SearchPageNavContainer>
+      {categories.map((category) => (
+        <SearchPageNavItem key={category}>{category}</SearchPageNavItem>
+      ))}
+    </SearchPageNavContainer>
+  )
+}
+
+export default SearchPageNav
diff --git a/frontend/src/components/SearchPageNav/style.ts b/frontend/src/components/SearchPageNav/style.ts
@@ -0,0 +1,28 @@
+import styled from 'styled-components'
+
+export const SearchPageNavContainer = styled.ul`
+  font-family: 'Noto Sans KR', sans-serif;
+`
+export const SearchPageNavItem = styled.a`
+  display: block;
+  width: 100%;
+  margin-bottom: 1rem;
+  list-style: none;
+  padding: 1rem 4rem 1rem 1rem;
+  font-size: 1.1rem;
+  font-weight: 600;
+  border-radius: 0.7rem;
+  color: #7d7d7d;
+  letter-spacing: -0.05rem;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f0f0f0;
+    color: #1c1c1c;
+  }
+
+  &:active {
+    background-color: #e0e0e0;
+    color: #1c1c1c;
+  }
+`
diff --git a/frontend/src/components/DraftEditor.tsx → ...nts/WritingPageComponents/DraftEditor.tsx b/frontend/src/components/DraftEditor.tsx → ...nts/WritingPageComponents/DraftEditor.tsx
@@ -13,22 +13,6 @@ const DraftEditor: React.FC<DraftEditorProps> = ({
   editorState,
   setEditorState,
 }) => {
-  // 이미지 업로드 콜백
-  const uploadImageCallBack = (file: File): Promise<any> => {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader()
-      reader.onloadend = () => {
-        resolve({
-          data: { link: reader.result as string },
-        })
-      }
-      reader.onerror = (error) => {
-        reject(error)
-      }
-      reader.readAsDataURL(file) // 파일을 Base64로 변환
-    })
-  }
-
   return (
     <EditorContainer>
       <EditorWrapper>
@@ -44,18 +28,7 @@ const DraftEditor: React.FC<DraftEditorProps> = ({
               'textAlign',
               'link',
               'history',
-              'image',
-            ],
-            image: {
-              uploadCallback: uploadImageCallBack,
-              previewImage: true,
-              alt: { present: true, mandatory: false },
-              inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
-              defaultSize: {
-                height: 'auto',
-                width: 'auto',
-              },
-            },
+            ], // 이미지 옵션 제거
           }}
           wrapperClassName='wrapper-class'
           editorClassName='editor-class'
@@ -70,13 +43,12 @@ const DraftEditor: React.FC<DraftEditorProps> = ({
 const EditorContainer = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: center;
-  width: 80%;
+  /* align-items: flex-end;  */
   margin: 0 auto;
 `
 
 const EditorWrapper = styled.div`
-  width: 100%;
+  width: auto;
   min-height: 300px;
   margin-bottom: 20px;
   border: 1px solid #ddd;