Merge pull request #457 from boostcampwm-2022/dev

실서버에 v1.0.2 버전을 배포합니다.

.github/workflows/deployment-dev.yml

@@ -1,5 +1,4 @@
 name: "[CD] DEV"
-
 on:
   push:
     branches:

.github/workflows/deployment-main.yml

@@ -15,11 +15,17 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Get Prev Tag
+        id: prev-tag-finder
+        uses: WOOSERK/[email protected]
 
       - uses: dorny/paths-filter@v2
         id: filter
         with:
-          base: ${{ github.ref }}
+          base: ${{ steps.prev-tag-finder.outputs.prev-tag }}
           ref: ${{ github.head_ref }}
           filters: |
             client:

.github/workflows/integration.yml

@@ -1,5 +1,4 @@
-name: CI
-
+name: "[CI]"
 on:
   pull_request:
     branches: ["main", "dev"]

README.md

@@ -1,42 +1,58 @@
 # WeView
 
-<img src="https://img.shields.io/badge/node-16.18.1-339933?logo=node.js"> <img src="https://img.shields.io/badge/NestJS-9.1.5-E0234E?logo=NestJS"> <img src="https://img.shields.io/badge/TypeScript-4.8.4-3178C6?logo=typescript">
+<div align="center">
 
-우리가 함께하는 코드리뷰 커뮤니티, **WeView**
+<img width="100%" alt="섬네일" src="https://user-images.githubusercontent.com/63703962/207874401-2a180dd8-e16e-469d-ba47-9979b7b2034e.png">
 
-<img width="100%" alt="섬네일" src="https://user-images.githubusercontent.com/63703962/200758258-5673b6ee-01e8-4278-bc1d-71f2ed461c42.png">
+[💻 WeView](https://weview.club) | [📽 발표 영상](https://www.youtube.com/watch?v=-cujznqSkC4) | [📷 데모 영상](https://youtu.be/bK0whd-zuck) | [📝 팀 위키](https://github.com/boostcampwm-2022/web06-weview/wiki)
 
-## 👋 WeView 에 대해 소개할게요.
+</div>
 
-> 코드 리뷰를 받아보려고 하는데 리뷰를 부탁드리는게 되게 **부담이더라고요.**
+## 함께하는 코드리뷰 커뮤니티, WeView
+
+코드 리뷰를 요청할 때 리뷰어님께 부담이 될까 봐 쉽게 요청하지 못했던 캠퍼들이 많았어요.
+
+저희는 이런 문제를 코드를 편하게 공유하고 리뷰 할 수 있는 **유쾌한** 느낌의 서비스로 해결하고 싶어요.
+
+**💡 WeView 팀은 사용자가 즐길 수 있는 가치를 전달하는 방법으로 3가지를 생각했어요.**
+
+> 1. 간단하게 코드를 확인하고 리뷰 할 수 있어요.
 > 
-> 그래서 조금 더 가벼운 마음으로 리뷰를 부탁드릴 수 있는 서비스를 생각했어요.
+> 2. 보고 싶은 코드를 쉽게 찾을 수 있어요.
 > 
-> 우리 WeView 를 이용해서 서로가 서로에게 코드를 리뷰해주는 문화가 활성화 되었으면 좋겠어요.
+> 3. 한눈에 코드들이 들어오는 디자인을 생각했어요.
 
-**👉 부담없이 코드리뷰를 주고 받을 수 있는 커뮤니티를 위해 SNS 를 선택했어요.**
+## 저희 ‍김가네 식구들을 소개할게요.
 
-**👉 모두에게 일관성있는 코드를 보여주기 위해 이미지로 코드들을 보여주려고 해요.**
+|                                                                                     J043 김승현                                                                                     |                                                                                   J046 김우석                                                                                    |                                                                                   J056 김지원                                                                                    |                                                                                      J061 김태훈                                                                                      |
+|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
+| [<img src="https://user-images.githubusercontent.com/63703962/207867345-f2d94131-e684-4b47-84eb-7b144a6b1c58.jpeg" width=100 alt="_"/><br/>GitHub](https://github.com/shyuuuuni) | [<img src="https://user-images.githubusercontent.com/63703962/207867430-4ebe7c6d-422a-4d5a-b117-486ba88a5470.jpg" width=100 alt="_"/><br/>GitHub](https://github.com/WOOSERK) | [<img src="https://user-images.githubusercontent.com/83356118/200754523-34460cee-2c24-43e1-ae22-1dc006556caa.png" width=100 alt="_"><br/>GitHub](https://github.com/naamukim) | [<img src="https://user-images.githubusercontent.com/67636607/200756086-efea95c3-e7af-444f-8d47-9405368c51a9.jpeg" width=100 alt="_"/><br/>GitHub](https://github.com/taehoon1229) |
+|                                                                                   말투 컨벤션도 정하죠                                                                                    |                                                                                  지각 벌금 내시죠 ️                                                                                  |                                                                                  잠은 죽어서 잡시다                                                                                   |                                                                                     이번주도 만나나요?                                                                                     |
 
-## 👨‍👨‍👦‍👦 김가네 식구들을 소개합니다!
+## 🔎 이런 기술들을 사용했어요.
 
-|                                                                                    J043_김승현                                                                                    |                                                                                   J046_김우석                                                                                    |                                                                                   J056_김지원                                                                                    |                                                                                      J061_김태훈                                                                                       |
-|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
-| [<img src="https://user-images.githubusercontent.com/63703962/200755686-3bb59b42-7c76-4733-ae6d-475fbf3238cc.png" width=100 alt="_"/><br/>GitHub](https://github.com/shyuuuuni) | [<img src="https://user-images.githubusercontent.com/63703962/200756083-13dd4ffa-1ac5-4541-89c3-4f9eb1831874.png" width=100 alt="_"/><br/>GitHub](https://github.com/WOOSERK) | [<img src="https://user-images.githubusercontent.com/83356118/200754523-34460cee-2c24-43e1-ae22-1dc006556caa.png" width=100 alt="_"><br/>GitHub](https://github.com/naamukim) | [<img src="https://user-images.githubusercontent.com/67636607/200756086-efea95c3-e7af-444f-8d47-9405368c51a9.jpeg" width=100 alt="_"/><br/>GitHub](https://github.com/taehoon1229) |
-|                                                                                 말투 컨벤션도 정하죠                                                                                  |                                                                                  지각 벌금 내시죠 ️                                                                                  |                                                                                  잠은 죽어서 잡시다                                                                                   |                                                                                     이번주도 만나나요?                                                                                      |
+<div align="center">
+<img width="100%" src="https://user-images.githubusercontent.com/63703962/207869578-1c081595-3e28-4e7f-b073-04a59fa492c3.jpg">
+</div>
 
-## ⚙️ 저희 서비스는 이렇게 돌아가요.
+## ⚙️ 이런 흐름으로 작동해요.
 
-![프로세스](https://user-images.githubusercontent.com/63703962/200754033-1120a4e1-fcb4-4ce2-82dc-f58aed705dce.png)
+<div align="center">
+<img width="100%" src="https://user-images.githubusercontent.com/63703962/207868612-f8996442-ba7a-4213-a4dc-ca03a821eb38.jpg">
+</div>
 
-## 🔎 이런 기술들을 사용했어요.
 
-![테크스택](https://user-images.githubusercontent.com/63703962/200758534-51708df4-44b4-4da4-b09c-3d0b76c56a9d.png)
+## 🗂 더 알아보고 싶으시다면?
+
+저희 프로젝트는 [💻 WeView 바로가기](https://weview.club)에서 사용해 보실 수 있어요.
+
+더 궁금하시다면 아래를 참고해주세요.
 
-## 🗂 여기서 더 알아보세요.
+- 주요 기능이 궁금해요. 👉 [WeView 사용 설명서 바로가기]()
+- 프로젝트를 직접 설치하고 싶어요. 👉 [설치 가이드 바로가기]()
+- 협업 방식을 알아보고 싶어요. 👉 [협업 가이드 바로가기]()
+- 사용한 기술이 궁금해요. 👉 [기술 스펙 바로가기]()
+- 기술을 선정한 이유가 궁금해요. 👉 [기술 선정 이유 바로가기]()
+- 프로젝트를 하면서 겪은 이야기가 궁금해요. 👉 [기술 블로그 바로가기]()
 
-### [Git Convention](https://github.com/boostcampwm-2022/web06-WeView/wiki/Git-Convention)
-### [Ground Rule](https://github.com/boostcampwm-2022/web06-WeView/wiki/Ground-Rule)
-### [Choosing Technology](https://github.com/boostcampwm-2022/web06-WeView/wiki/Reasons-For-Choosing-Technology)
-### [Design Guide](https://www.figma.com/file/IouimrP0P8GlpkBdBl6WSQ/WeView?node-id=20%3A460)
-### [Back Log](https://bramble-litter-afe.notion.site/BACK-LOG-82b19198d729472f80da2efb7f41bb0b)
+다른 이야기들은 [📝 팀 위키](https://github.com/boostcampwm-2022/web06-weview/wiki)에서 확인해 보실 수 있어요.

client/src/components/main/MainNav/NavContent/SearchContent/SearchContentBody/SearchContentRecommend.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import useLabel from "@/hooks/useLabel";
+import useSearch from "@/hooks/useSearch";
 import { Label } from "@/types/search";
 import SearchLabel from "@/components/commons/SearchLabel/SearchLabel";
 
@@ -21,7 +21,7 @@ export const recommendKeyword: Label[] = [
   },
 ];
 const SearchContentRecommend = (): JSX.Element => {
-  const { insertLabel } = useLabel();
+  const { insertLabel } = useSearch();
 
   return (
     <div className="search-content__body">

client/src/components/main/MainNav/NavContent/SearchContent/SearchContentHeader/DetailSearchForm/DetailSearchForm.scss

@@ -1,11 +1,23 @@
 @import "@/styles/_theme";
+@import "@/styles/_mixin";
+@import "@/styles/_button";
+@import "@/styles/_animation";
 
 @mixin icon-common {
   width: $font-x-large;
   height: $font-x-large;
 }
 
 .detail-search-form {
+  @include content-fade-in;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+
+  &__input {
+    @include search-input(calc($font-medium * 2));
+  }
+
   &__check-boxes {
     display: flex;
     gap: 1rem;
@@ -14,6 +26,7 @@
     height: 2.2rem;
 
     &__title {
+      width: 4rem;
       font-size: $font-medium;
     }
 
@@ -61,4 +74,26 @@
       }
     }
   }
+
+  &__footer {
+    display: flex;
+    justify-content: right;
+
+    &__submit-btn {
+      // nav-button 작동 이상(클릭 유지 효과)으로 따로 작성
+      width: 6rem;
+      height: 2.2rem;
+      margin: 0;
+      font-size: $font-form;
+      color: $placeholder-color-dark;
+      cursor: pointer;
+      background: none;
+      border: $border-small $line-color;
+      border-radius: $radius-small;
+
+      &:active {
+        color: $text-color;
+      }
+    }
+  }
 }

client/src/components/main/MainNav/NavContent/SearchContent/SearchContentHeader/DetailSearchForm/DetailSearchForm.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from "react";
+import React from "react";
 
-import useLabel from "@/hooks/useLabel";
+import useSearch from "@/hooks/useSearch";
 import { LIKE_COUNT_ITEMS, REVIEW_COUNT_ITEMS } from "@/constants/search";
 import { LabelType } from "@/types/search";
+import { LABEL_NAME } from "@/constants/label";
 
 import "./DetailSearchForm.scss";
 
@@ -40,30 +41,6 @@ const ItemCheckBox = ({
   );
 };
 
-const LikeCountCheckBoxes = (): JSX.Element => {
-  const items: Array<Item<number>> = LIKE_COUNT_ITEMS;
-  return (
-    <CountCheckBoxes
-      title={"좋아요"}
-      items={items}
-      imageModifier={"--like"}
-      type={"likes"}
-    />
-  );
-};
-
-const ReviewCountCheckBoxes = (): JSX.Element => {
-  const items: Array<Item<number>> = REVIEW_COUNT_ITEMS;
-  return (
-    <CountCheckBoxes
-      title={"리뷰"}
-      items={items}
-      imageModifier={"--review"}
-      type={"reviews"}
-    />
-  );
-};
-
 interface CountCheckBoxesProps {
   title: string;
   items: Array<Item<number>>;
@@ -77,26 +54,22 @@ const CountCheckBoxes = ({
   imageModifier,
   type,
 }: CountCheckBoxesProps): JSX.Element => {
-  const { removeLabel, insertLabel, removeAndInsert } = useLabel();
-  const [checkedItemId, setCheckedItemId] = useState<number>(-1);
-  const handleCheckItem = (id: number): void => {
-    const prevItem = items.find((item) => item.id === checkedItemId);
+  const { labels, setLabels, hasLabel } = useSearch(type);
+  // 현재 상태로 등록된 라벨의 id를 반환
+  const id =
+    items.find(
+      ({ value }) => labels.length > 0 && String(value) === labels[0].value
+    )?.id ?? -1;
+
+  const toggleCheckItem = (id: number): void => {
     const item = items.find((item) => item.id === id) as Item<number>;
+    const labelById = { type, value: String(item.value) };
 
-    if (id === checkedItemId) {
-      removeLabel({ type, value: String(item.value) });
-      return setCheckedItemId(-1);
-    }
-    if (prevItem === undefined) {
-      insertLabel({ type, value: String(item.value) });
-      return setCheckedItemId(id);
+    if (hasLabel(labelById, labels)) {
+      return setLabels([]);
     }
 
-    removeAndInsert(
-      { type, value: String(prevItem.value) },
-      { type, value: String(item.value) }
-    );
-    setCheckedItemId(id);
+    setLabels([labelById]);
   };
 
   return (
@@ -109,21 +82,65 @@ const CountCheckBoxes = ({
         <ItemCheckBox
           key={item.id}
           item={item}
-          checked={item.id === checkedItemId}
-          handleCheckItem={handleCheckItem}
+          checked={item.id === id}
+          handleCheckItem={toggleCheckItem}
         />
       ))}
     </span>
   );
 };
 
+const LikeCountCheckBoxes = (): JSX.Element => {
+  const items: Array<Item<number>> = LIKE_COUNT_ITEMS;
+  return (
+    <CountCheckBoxes
+      title={"좋아요"}
+      items={items}
+      imageModifier={"--like"}
+      type={"likes"}
+    />
+  );
+};
+
+const ReviewCountCheckBoxes = (): JSX.Element => {
+  const items: Array<Item<number>> = REVIEW_COUNT_ITEMS;
+  return (
+    <CountCheckBoxes
+      title={"리뷰"}
+      items={items}
+      imageModifier={"--review"}
+      type={"reviews"}
+    />
+  );
+};
+
 const DetailSearchForm = (): JSX.Element => {
+  const { word, handleWordChange, handleInsertTag, handleSubmit } = useSearch(
+    LABEL_NAME.TAGS
+  );
+
   return (
-    <>
-      <div className="title">세부 검색</div>
+    <div className="detail-search-form">
+      <div className="title">상세 검색</div>
+      <input
+        className="detail-search-form__input"
+        type="text"
+        value={word}
+        placeholder={"태그를 엔터로 구분해서 입력할 수 있어요."}
+        onChange={handleWordChange}
+        onKeyUp={handleInsertTag}
+      />
       <LikeCountCheckBoxes />
       <ReviewCountCheckBoxes />
-    </>
+      <div className="detail-search-form__footer">
+        <button
+          className="detail-search-form__footer__submit-btn"
+          onClick={() => handleSubmit()}
+        >
+          적용
+        </button>
+      </div>
+    </div>
   );
 };
 

client/src/components/main/MainNav/NavContent/SearchContent/SearchContentHeader/SearchContentHeader.scss

@@ -13,26 +13,7 @@
       height: calc($font-medium * 3);
 
       &__input {
-        box-sizing: border-box;
-        flex: 1;
-        height: 100%;
-        padding-left: 1rem;
-        font-size: $font-medium;
-        line-height: calc($font-medium * 3);
-        background-color: $weview-off-white;
-        border: $border-small $placeholder-color-dark;
-        border-radius: $radius-small;
-        transition: 100ms;
-
-        &::placeholder {
-          font-size: $font-medium;
-          color: $placeholder-color;
-        }
-
-        &:focus {
-          background-color: $weview-white;
-          border: $border-small $primary;
-        }
+        @include search-input(calc($font-medium * 3));
       }
 
       &__submit {