feat : 프로젝트 구인 목록 페이지 퍼블리싱

techeer-sv · Nov 23, 2023 · 11d312c · 11d312c
1 parent 4025db1
commit 11d312c
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 66 deletions.
diff --git a/frontend/public/css/toggle-button.css b/frontend/public/css/toggle-button.css
@@ -1,38 +1,59 @@
-.toggle-switch {
+.switch {
   position: relative;
-  width: 53px; /* 스위치의 전체 너비 */
-  height: 25px; /* 스위치의 전체 높이 */
   display: inline-block;
-  background-color: #646464; /* 스위치의 배경색 */
-  border-radius: 15px; /* 둥근 모서리 */
+  width: 52px;
+  height: 18px;
 }
 
-.toggle-switch-checkbox {
-  display: none;
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
 }
 
-.toggle-switch-label {
-  display: block;
-  overflow: hidden;
+.slider {
+  position: absolute;
   cursor: pointer;
-  height: 100%; /* 라벨의 높이를 스위치 높이와 동일하게 설정 */
-  position: relative; /* 스위치 내부 요소를 정확히 배치하기 위함 */
+  top: 0;
+  left: 6px;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
 }
 
-.toggle-switch-switch {
-  display: block;
-  width: 20px; /* 스위치 버튼의 너비 */
-  height: 20px; /* 스위치 버튼의 높이 */
-  background: #ffffff; /* 스위치 버튼의 배경색 */
+.slider:before {
   position: absolute;
-  top: 2.5px; /* 위에서부터의 거리 */
-  bottom: 4px; /* 아래에서부터의 거리 */
-  right: 29px; /* 오른쪽에서부터의 거리 */
-  border: 2px solid #999999; /* 테두리 */
-  border-radius: 20px; /* 둥근 스위치 버튼 */
-  transition: all 0.3s ease-in-out; /* 부드러운 애니메이션 효과 */
+  content: '';
+  height: 13px;
+  width: 13px;
+  left: 3px;
+  bottom: 2.5px;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+input:checked + .slider {
+  background-color: #535f96;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #6666a5;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
 }
 
-.toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-switch {
-  right: 4px; /* 체크될 때 스위치 버튼의 위치 */
+.slider.round:before {
+  border-radius: 50%;
 }
diff --git a/frontend/src/app/recruitment/page.tsx b/frontend/src/app/recruitment/page.tsx
@@ -66,12 +66,12 @@ export default function Recruitment() {
     )
 
     if (!res.ok) {
-      throw new Error('채용공고 검색에 실패했습니다.')
+      const data = await res.json()
+      throw new Error(data.message)
     }
 
     const data = await res.json()
     setPostCount(data.data.length)
-    console.log(data.data)
     return data.data
   }
 
@@ -105,7 +105,7 @@ export default function Recruitment() {
   }
 
   return (
-    <div className="relative h-auto min-h-screen w-screen pt-28 flex flex-col items-center ">
+    <div className="relative h-auto min-h-screen w-screen pt-28 pb-12 flex flex-col items-center ">
       <MultipleFilter />
       <Filter postCount={postCount} />
       {data.pages.map((group, i) => (

diff --git a/frontend/src/components/recruitment/Filter.tsx b/frontend/src/components/recruitment/Filter.tsx
@@ -11,7 +11,10 @@ export default function Filter({ postCount }: FilterPropsType) {
         <span className="pr-3 border-r-2">게시글 {postCount}개</span>
         <div className="ml-3">최신 순</div>
       </div>
-      <ToggleButton />
+      <div className="flex items-center">
+        <span className="mr-2">모집 중인 프로젝트만 보기</span>
+        <ToggleButton />
+      </div>
     </div>
   )
 }
diff --git a/frontend/src/components/recruitment/MultipleFilter.tsx b/frontend/src/components/recruitment/MultipleFilter.tsx
@@ -153,21 +153,23 @@ export default function MultipleFilter() {
         </div>
       </div>
       <div className="w-full h-1/2 flex items-center bg-slate-100">
-        {filter.map((item) => (
-          <div
-            key={item.name}
-            className="flex items-center justify-center h-[25px] px-2 ml-2.5 rounded-md bg-white text-[10px]"
-          >
-            {item.name}
-            <button
-              type="button"
-              onClick={() => removeFilterItem(item)}
-              className="ml-2 text-black"
+        {filter
+          .filter((item) => item.category !== 'isRecruiting') // isRecruiting이 아닌 아이템들만 필터링
+          .map((item) => (
+            <div
+              key={item.name}
+              className="flex items-center justify-center h-[25px] px-2 ml-2.5 rounded-md bg-white text-[10px]"
             >
-              <Image src={x} alt="x" className="w-1.5 h-1.5" />
-            </button>
-          </div>
-        ))}
+              {item.name}
+              <button
+                type="button"
+                onClick={() => removeFilterItem(item)}
+                className="ml-2 text-black"
+              >
+                <Image src={x} alt="x" className="w-1.5 h-1.5" />
+              </button>
+            </div>
+          ))}
       </div>
     </div>
   )

diff --git a/frontend/src/components/recruitment/ToggleButton.tsx b/frontend/src/components/recruitment/ToggleButton.tsx
@@ -1,33 +1,37 @@
 import { filterState } from '@/utils/atoms'
-import '../../../public/css/toggle-button.css' // 스타일시트 임포트
+import { useEffect, useState } from 'react'
 import { useRecoilState } from 'recoil'
-import { useState } from 'react'
+import '../../../public/css/toggle-button.css'
 
 export default function ToggleButton() {
-  const [isToggled, setIsToggled] = useState(false)
   const [filter, setFilter] = useRecoilState(filterState)
 
-  const handleClick = () => {
-    setIsToggled(!isToggled)
-    setFilter({
-      ...filter,
-      isRecruiting: String(!isToggled),
-    })
+  const [isChecked, setIsChecked] = useState(
+    filter.find((f) => f.category === 'isRecruiting')?.name === 'true',
+  )
+
+  const handleToggle = () => {
+    const newIsRecruitingValue = String(!isChecked)
+
+    const updatedFilter = filter.map((f) =>
+      f.category === 'isRecruiting' ? { ...f, name: newIsRecruitingValue } : f,
+    )
+
+    setFilter(updatedFilter)
+    setIsChecked(!isChecked)
   }
 
+  useEffect(() => {
+    const recruitingFilter = filter.find((f) => f.category === 'isRecruiting')
+    if (recruitingFilter) {
+      setIsChecked(recruitingFilter.name === 'true')
+    }
+  }, [filter])
+
   return (
-    <div className="toggle-switch">
-      <input
-        type="checkbox"
-        className="toggle-switch-checkbox"
-        id="toggleSwitch"
-        checked={isToggled}
-        onChange={handleClick}
-      />
-      <label className="toggle-switch-label" htmlFor="toggleSwitch">
-        <span className="toggle-switch-inner" />
-        <span className="toggle-switch-switch" />
-      </label>
-    </div>
+    <label className="switch">
+      <input type="checkbox" checked={isChecked} onChange={handleToggle} />
+      <span className="slider round"> </span>
+    </label>
   )
 }
diff --git a/frontend/src/utils/atoms.ts b/frontend/src/utils/atoms.ts
@@ -102,7 +102,12 @@ const usernameState = atom<string>({
 
 const filterState = atom<FilterType[]>({
   key: 'FilterState',
-  default: [],
+  default: [
+    {
+      category: 'isRecruiting',
+      name: 'false',
+    },
+  ],
 })
 
 export {