[Improve] Applying a styled component using emotion in Write page

src/App.test.jsx

@@ -76,7 +76,7 @@ describe('App', () => {
     it('renders the study write page', () => {
       const { container } = renderApp({ path: '/write' });
 
-      expect(container).toHaveTextContent('스터디 그룹 개설하기');
+      expect(container).toHaveTextContent('내용을 작성해주세요.');
     });
   });
 

src/components/auth/AuthForm.jsx

@@ -56,10 +56,7 @@ const InputWrapper = styled.input`
   transition-delay: initial;
   padding: 8px 12px;
   border: 2px solid #D7E2EB;
-  &:focus{
-    border: 2px solid ${palette.teal[5]};
-  }
-  &:hover{
+  &:focus, &.hover {
     border: 2px solid ${palette.teal[5]};
   }
   width: 400px;

src/components/common/Header.jsx

@@ -13,6 +13,7 @@ const HeaderWrapper = styled.div`
   width: 100%;
   background: white;
   box-shadow: 0px 2px 4px ${palette.teal[2]};
+  z-index: 100;
 `;
 
 const Wrapper = styled(Responsive)`

src/components/common/Tags.jsx

@@ -1,16 +1,17 @@
 import React from 'react';
 
-import styled from '@emotion/styled';
-
 import { Link } from 'react-router-dom';
 
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
 import palette from '../../styles/palette';
 
 const TagsWrapper = styled.div`
   margin-top: 1rem;
 `;
 
-const TagStyledLink = styled(Link)`
+const TagStyledWrapper = ({ div }) => css`
   display: inline-flex;
   align-items: center;
   padding-left: 1em;
@@ -25,20 +26,75 @@ const TagStyledLink = styled(Link)`
   &:hover {
     color: ${palette.teal[5]};
   }
+
+  ${div && css`
+    height: 2.5em;
+    border-radius: .5em;
+    margin-right: 0.3rem;
+    &:hover {
+    color: ${palette.teal[7]};
+    }
+  `};
 `;
 
-const Tags = ({ tags }) => {
+const TagWrapper = styled.div`
+  display: inline-flex;
+  align-items: center;
+`;
+
+const TagSpanWrapper = styled.span`
+  height: 2.4em;
+  margin-right: .5rem;
+  font-weight: bold;
+  color: ${palette.warn[2]};
+  cursor: pointer;
+  &:hover {
+    color: ${palette.warn[0]};
+  }
+`;
+
+const TagStyledDiv = styled.div`
+  ${TagStyledWrapper}
+`;
+const TagStyledLink = styled(Link)`
+  ${TagStyledWrapper}
+`;
+
+const Tags = ({ tags, type, onRemove }) => {
   if (!tags || !tags.length) {
     return null;
   }
 
+  if (type === 'introduce') {
+    return (
+      <TagsWrapper>
+        {tags.map((tag) => (
+          <TagWrapper
+            key={tag}
+          >
+            <TagStyledDiv
+              div
+              className="tag"
+            >
+              {`#${tag}`}
+            </TagStyledDiv>
+            <TagSpanWrapper
+              onClick={() => onRemove(tag)}
+            >
+              x
+            </TagSpanWrapper>
+          </TagWrapper>
+        ))}
+      </TagsWrapper>
+    );
+  }
+
   return (
     <TagsWrapper>
       {tags.map((tag) => (
         <TagStyledLink
           key={tag}
           to={`/?tag=${tag}`}
-          className="tag"
         >
           {`#${tag}`}
         </TagStyledLink>

src/components/common/Tags.test.jsx

@@ -7,9 +7,10 @@ import { render } from '@testing-library/react';
 import Tags from './Tags';
 
 describe('Tags', () => {
-  const renderTags = (tags) => render((
+  const renderTags = ({ tags, type }) => render((
     <MemoryRouter>
       <Tags
+        type={type}
         tags={tags}
       />
     </MemoryRouter>
@@ -18,7 +19,7 @@ describe('Tags', () => {
   context('with tags', () => {
     const tags = ['JavaScript', 'C', 'Python'];
     it('renders tags name', () => {
-      const { container } = renderTags(tags);
+      const { container } = renderTags({ tags });
 
       tags.forEach((tag) => {
         expect(container).toHaveTextContent(tag);
@@ -32,9 +33,24 @@ describe('Tags', () => {
     it('nothing renders tags name', () => {
       const tags = [];
 
-      const { container } = renderTags(tags);
+      const { container } = renderTags({ tags });
 
       expect(container).toBeEmptyDOMElement();
     });
   });
+
+  context('with type introduce', () => {
+    const tags = ['JavaScript', 'C', 'Python'];
+    const type = 'introduce';
+
+    it('renders tags name', () => {
+      const { container } = renderTags({ tags, type });
+
+      tags.forEach((tag) => {
+        expect(container).toHaveTextContent(tag);
+
+        expect(container.innerHTML).not.toContain('<a');
+      });
+    });
+  });
 });

src/components/write/TagList.jsx

@@ -1,10 +1,6 @@
 import React from 'react';
 
-import styled from '@emotion/styled';
-
-import TagItem from './TagItem';
-
-const TagListWrapper = styled.div``;
+import Tags from '../common/Tags';
 
 const TagList = ({ tags, onRemove }) => {
   const handleRemove = (removeTag) => {
@@ -14,15 +10,11 @@ const TagList = ({ tags, onRemove }) => {
   };
 
   return (
-    <TagListWrapper>
-      {tags.map((tag) => (
-        <TagItem
-          key={tag}
-          tag={tag}
-          onRemove={() => handleRemove(tag)}
-        />
-      ))}
-    </TagListWrapper>
+    <Tags
+      tags={tags}
+      type="introduce"
+      onRemove={handleRemove}
+    />
   );
 };
 

src/components/write/TagList.test.jsx

@@ -43,7 +43,7 @@ describe('TagList', () => {
       tags.forEach((tag) => {
         expect(getByText(`#${tag}`)).not.toBeNull();
 
-        fireEvent.click(getByText(`#${tag}`));
+        fireEvent.click(getByText(`#${tag}`).nextElementSibling);
       });
       expect(handleRemove).toBeCalledTimes(2);
     });

src/components/write/TagsForm.jsx

@@ -2,9 +2,23 @@ import React, { useEffect, useState } from 'react';
 
 import styled from '@emotion/styled';
 
+import palette from '../../styles/palette';
+
 import TagList from './TagList';
 
-const TagsFormWrapper = styled.div``;
+const TagInputWrapper = styled.input`
+  height: 30px;
+  padding: 5px;
+  border-radius: 0.25rem;
+  font-size: 1rem;
+  line-height: 20px;
+  color: #5f5f5f;
+  border: 2px solid #D7E2EB;
+  &:focus, &.hover {
+    border: 2px solid ${palette.teal[5]};
+  }
+  width: 220px;
+`;
 
 const TagsForm = ({ onChange, tags }) => {
   const [tag, setTag] = useState('');
@@ -44,9 +58,8 @@ const TagsForm = ({ onChange, tags }) => {
   }, [tags]);
 
   return (
-    <TagsFormWrapper>
-      <h4>태그</h4>
-      <input
+    <div>
+      <TagInputWrapper
         type="text"
         placeholder="태그를 입력하세요"
         value={tag}
@@ -57,7 +70,7 @@ const TagsForm = ({ onChange, tags }) => {
         tags={inputTags}
         onRemove={handleRemove}
       />
-    </TagsFormWrapper>
+    </div>
   );
 };
 

src/components/write/TagsForm.test.jsx

@@ -20,10 +20,9 @@ describe('TagsForm', () => {
 
   describe('render Tag Form Container contents text', () => {
     it('renders tag form text', () => {
-      const { getByPlaceholderText, container } = renderTagsForm([]);
+      const { getByPlaceholderText } = renderTagsForm([]);
 
       expect(getByPlaceholderText('태그를 입력하세요')).not.toBeNull();
-      expect(container).toHaveTextContent('태그');
     });
   });
 
@@ -115,7 +114,7 @@ describe('TagsForm', () => {
       const { getByText, container } = renderTagsForm(tags);
 
       tags.forEach((tag) => {
-        fireEvent.click(getByText(`#${tag}`));
+        fireEvent.click(getByText(`#${tag}`).nextElementSibling);
 
         expect(container).not.toHaveTextContent(`#${tag}`);
       });