코스 목록 페이지 퍼블리싱

client/package.json

@@ -15,6 +15,7 @@
         "concurrently": "^7.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-infinite-scroll-component": "^6.1.0",
         "react-router-dom": "^6.4.3",
         "react-scripts": "5.0.1",
         "recoil": "^0.7.6",

client/src/App.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import SignUp from "#pages/SignUp";
 import Login from "#pages/Login";
 import MainPage from "#pages/MainPage";
+import Courses from "#pages/Courses";
 import { useRecoilState } from "recoil";
 import { userState } from "#atoms/userState";
 import { Route, Routes } from "react-router-dom";
@@ -51,6 +52,7 @@ function App() {
             <Route path="/" element={<MainPage />} />
             <Route path="signup" element={<SignUp />} />
             <Route path="login" element={<Login />} />
+            <Route path="courses" element={<Courses />} />
             <Route path="course">
                 <Route path="new" element={<NewCourse />} />
                 <Route path="detail" element={<CourseDetail />} />

client/src/assets/icons/index.ts

@@ -1,9 +1,11 @@
 import USER_CIRCLE_ICON from "./user_circle.svg";
 import ARROW_LEFT_ICON from "./arrow_left.svg";
+import ARROW_DOWN_ICON from "./arrow_down.svg";
 import PLUS_BUTTON_ICON from "./plus_button.svg";
 import MORE_BUTTON_ICON from "./more_button.svg";
 import ZOOM_IN_ICON from "./zoom_in_icon.svg";
 import ZOOM_OUT_ICON from "./zoom_out_icon.svg";
+import SEARCH_ICON from "./search_icon.svg";
 import LOCK_ICON from "./lock_icon.svg";
 import UNLOCK_ICON from "./unlock_icon.svg";
 import UNDO_ICON from "./undo_icon.svg";
@@ -14,10 +16,12 @@ import SEARCH_ICON from "./search_icon.svg";
 export {
     USER_CIRCLE_ICON,
     ARROW_LEFT_ICON,
+    ARROW_DOWN_ICON,
     PLUS_BUTTON_ICON,
     MORE_BUTTON_ICON,
     ZOOM_IN_ICON,
     ZOOM_OUT_ICON,
+    SEARCH_ICON,
     LOCK_ICON,
     UNLOCK_ICON,
     UNDO_ICON,

client/src/components/Card/Card.styles.ts

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { COLOR } from "styles/color";
 import { flexRowSpaceBetween } from "styles/flex";
-import { fontMidium, fontSmall } from "styles/font";
+import { fontMedium, fontSmall } from "styles/font";
 
 export const CardWrapper = styled.div`
     width: 100%;
@@ -19,7 +19,7 @@ export const Summary = styled.div`
 `;
 
 export const CardTitle = styled.p`
-    ${fontMidium(COLOR.BLACK, 700)}
+    ${fontMedium(COLOR.BLACK, 700)}
 `;
 
 export const SummaryBody = styled.div`

client/src/components/Filter/Filter.stories.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Filter from "./Filter";
+
+export default {
+    title: "Example/Filter",
+    component: Filter,
+} as ComponentMeta<typeof Filter>;
+
+const Template: ComponentStory<typeof Filter> = (args) => <Filter {...args} />;
+
+export const Text = Template.bind({});
+Text.args = {
+    filterState: { currentFilter: "5km 이내", options: ["5km 이내", "3km 이내", "1km 이내"] },
+};

client/src/components/Filter/Filter.style.ts

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+import { COLOR } from "styles/color";
+import { fontSmall } from "styles/font";
+
+export const ModalFilterWrapper = styled.div`
+    width: 50vw;
+    div {
+        border-radius: 5px;
+        cursor: pointer;
+        padding: 4px 4px 8px 8px;
+        ${fontSmall(COLOR.BLACK, 500)}
+        div&:hover {
+            background: rgba(0, 0, 0, 0.1);
+        }
+    }
+    & :last-child {
+        border-top: 1px solid gray;
+    }
+    button {
+        padding-top: 4px;
+        width: 100%;
+        border: none;
+        background: transparent;
+        ${fontSmall(COLOR.BLACK, 700)}
+    }
+`;

client/src/components/Filter/Filter.tsx

@@ -0,0 +1,77 @@
+import styled from "styled-components";
+import { useState } from "react";
+import { flexRowCenter } from "styles/flex";
+import { ARROW_DOWN_ICON, LOCATION_ICON } from "#assets/icons";
+import { fontMedium } from "styles/font";
+import { COLOR } from "styles/color";
+import Modal from "#components/Modal/Modal";
+import { ModalFilterWrapper } from "./Filter.style";
+
+//does not contain dropdown logic, only primitive filter skeleton
+
+const FilterWrapper = styled.div`
+    ${flexRowCenter}
+    padding: 4px;
+    border-radius: 20px;
+    cursor: pointer;
+    p {
+        white-space: nowrap;
+        ${fontMedium(COLOR.BLACK, 500)}
+        font-family: "Noto Sans KR";
+        margin: 0 10px 0 5px;
+    }
+    img {
+        height: 18px;
+    }
+
+    &:hover {
+        background: rgba(0, 0, 0, 0.05);
+    }
+`;
+
+type _filterState = {
+    currentFilter: string;
+    options: string[];
+};
+interface FilterProps {
+    filterState: _filterState;
+    setCurrentFilterState: any;
+}
+
+const Filter = ({ filterState, setCurrentFilterState }: FilterProps) => {
+    const [showModal, setShowModal] = useState(false);
+
+    const handleToggleModal = () => {
+        setShowModal(!showModal);
+    };
+
+    const handleFilterContentClick = (e: React.MouseEvent<HTMLElement>) => {
+        const target = e.target as HTMLElement;
+        setCurrentFilterState(target.innerText);
+        handleToggleModal();
+    };
+
+    const createModalContents = (filterOptions: string[]) => {
+        return filterOptions.map((filterName: string, i: number) => (
+            <div key={i} onClick={handleFilterContentClick}>
+                {filterName}
+            </div>
+        ));
+    };
+
+    return (
+        <FilterWrapper onClick={handleToggleModal}>
+            <Modal toggled={showModal} toggleVisible={handleToggleModal}>
+                <ModalFilterWrapper>
+                    {createModalContents(filterState.options)}
+                    <button onClick={handleToggleModal}>닫기</button>
+                </ModalFilterWrapper>
+            </Modal>
+            <img src={LOCATION_ICON} />
+            <p>{filterState.currentFilter}</p>
+            <img src={ARROW_DOWN_ICON} />
+        </FilterWrapper>
+    );
+};
+
+export default Filter;

client/src/components/FilterBar/FilterBar.stories.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import FilterBar from "./FilterBar";
+
+export default {
+    title: "Example/FilterBar",
+    component: FilterBar,
+} as ComponentMeta<typeof FilterBar>;
+
+export const _FilterBar: ComponentStory<typeof FilterBar> = (args) => <FilterBar {...args} />;

client/src/components/FilterBar/FilterBar.tsx

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+import { COLOR } from "styles/color";
+import { flexRow } from "styles/flex";
+
+const FilterBarWrapper = styled.div`
+    ${flexRow};
+    padding: 4px 4px;
+    gap: 2rem;
+    border-bottom: ${`1px solid ${COLOR.BABY_BLUE}`};
+`;
+
+interface FilterBarProps {
+    children?: React.ReactNode;
+}
+
+const FilterBar = ({ children }: FilterBarProps) => {
+    return <FilterBarWrapper>{children}</FilterBarWrapper>;
+};
+
+export default FilterBar;

client/src/components/Header/Header.tsx

@@ -14,6 +14,7 @@ const HeaderWrapper = styled.div`
     img {
         width: 24px;
         height: 24px;
+        cursor: pointer;
     }
     div {
         width: 24px;

client/src/components/Modal/Modal.stories.tsx

@@ -10,10 +10,10 @@ export default {
     component: Modal,
 } as ComponentMeta<typeof Modal>;
 
-const _Modal: ComponentStory<typeof Modal> = (args) => <Modal {...args} />;
+export const _Modal: ComponentStory<typeof Modal> = (args) => <Modal {...args} />;
 
 _Modal.args = {
-    content: (
+    children: (
         <div style={{ display: "flex", flexDirection: "column" }}>
             <Input width="375px" placeholder="제목을 입력하세요" />
             <div style={{ height: "10px" }} />

client/src/components/Modal/Modal.styles.ts

@@ -9,8 +9,7 @@ export const Dimmed = styled.div`
     position: absolute;
     left: 0;
     top: 0;
-    background: ${COLOR.BLACK};
-    opacity: 0.3;
+    background-color: rgba(0, 0, 0, 0.3);
     * {
         max-width: 100vw !important;
         max-height: 100vh !important;

client/src/components/Modal/Modal.tsx

@@ -2,15 +2,20 @@ import React, { ReactNode } from "react";
 import { ContentWrapper, Dimmed } from "./Modal.styles";
 
 interface ModalProps {
-    content: ReactNode;
+    children: ReactNode;
+    toggled: boolean;
     toggleVisible: () => void;
 }
 
-const Modal = ({ content, toggleVisible }: ModalProps) => {
+const Modal = ({ children, toggleVisible, toggled }: ModalProps) => {
     return (
-        <Dimmed onClick={toggleVisible}>
-            <ContentWrapper onClick={(e) => e.stopPropagation()}>{content}</ContentWrapper>
-        </Dimmed>
+        <>
+            {toggled && (
+                <Dimmed onClick={toggleVisible}>
+                    <ContentWrapper onClick={(e) => e.stopPropagation()}>{children}</ContentWrapper>
+                </Dimmed>
+            )}
+        </>
     );
 };
 

client/src/components/MoreButton/MoreButton.tsx

@@ -2,13 +2,13 @@ import styled from "styled-components";
 import { MORE_BUTTON_ICON } from "#assets/icons";
 import { useNavigate } from "react-router-dom";
 import { flexRow } from "styles/flex";
-import { fontMidium } from "styles/font";
+import { fontMedium } from "styles/font";
 import { COLOR } from "styles/color";
 const MoreButtonWrapper = styled.div`
     ${flexRow};
     align-items: center;
     p {
-        ${fontMidium(COLOR.BLACK, 400)}
+        ${fontMedium(COLOR.BLACK, 400)}
     }
     img {
         margin-left: 4px;

client/src/components/SearchBar/SearchBar.stories.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import SearchBar from "./SearchBar";
+
+export default {
+    title: "Example/SearchBar",
+    component: SearchBar,
+} as ComponentMeta<typeof SearchBar>;
+
+const Template: ComponentStory<typeof SearchBar> = (args) => <SearchBar {...args} />;
+
+export const Text = Template.bind({});
+Text.args = {
+    placeholder: "placeholder",
+};