Merge branch 'release/v0.1.1'

mukdaejang · Mar 22, 2022 · 794fdfb · 794fdfb
2 parents fcb708d + 6e735e9
commit 794fdfb
Show file tree

Hide file tree

Showing 20 changed files with 374 additions and 150 deletions.
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
@@ -2,21 +2,7 @@
 
 ## Context or Reproduce
 
-<<<<<<< HEAD
-=======
-## UX Flow
-
->>>>>>> release/v0.1.0
 ## Checklist
 
 - [ ] Item 1
 - [ ] Item 2
-<<<<<<< HEAD
-=======
-
-## Image Reference
-
-## Links
-
-### CC
->>>>>>> release/v0.1.0
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,19 +1,4 @@
-<<<<<<< HEAD
 ## Issue Number
-=======
-Please ensure your pull request adheres to the following guidelines:
-
-- [ ] Use the following format: `* [owner/repo](link)`
-- [ ] Link additions should be added to the bottom of the relevant category.
-- [ ] New categories or improvements to the existing categorization are welcome.
-- [ ] Search previous suggestions before making a new one, as yours may be a duplicate.
-
-<!-- Choose one of these types and delete else -->
-
-fix #
-resolve #
-close #
->>>>>>> release/v0.1.0
 
 ## Proposed Changes
 

diff --git a/src/components/BestRestaurantItem/bestRestaurantItem.styled.tsx b/src/components/BestRestaurantItem/bestRestaurantItem.styled.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import unstar from '@/assets/icons/un-star.svg';
+import { Link } from 'react-router-dom';
 
 const RestaurantItemLi = styled.li`
   width: 100%;
@@ -17,7 +17,7 @@ const RestaurantItem = styled.figure`
   }
 `;
 
-const RestaurantImg = styled.a`
+const RestaurantImg = styled(Link)`
   width: 45%;
   & img {
     width: 100%;

diff --git a/src/components/BestRestaurantItem/index.tsx b/src/components/BestRestaurantItem/index.tsx
@@ -1,5 +1,6 @@
 import food from '@/assets/food.jpeg';
 import { useState, useEffect, useRef } from 'react';
+import { Link } from 'react-router-dom';
 import {
   RestaurantItemLi,
   RestaurantItem,
@@ -28,15 +29,15 @@ const BestRestaurantItem = () => {
   return (
     <RestaurantItemLi>
       <RestaurantItem>
-        <RestaurantImg href="/">
+        <RestaurantImg to="/">
           <img src={food} alt="food" />
         </RestaurantImg>
         <RestaurantInfo>
-          <a href="/">
+          <Link to="/">
             <RestaurantTitle>
               까스까스<RestaurantScore>4.5</RestaurantScore>
             </RestaurantTitle>
-          </a>
+          </Link>
           {/* <RestaurantLike>
             <button onClick={changeStar} ref={starRef}></button>
             <span>가고싶다</span>
@@ -64,9 +65,9 @@ const BestRestaurantItem = () => {
               </p>
             </RestaurantMenu>
           </RestaurantSubInfo>
-          <a href="/">
+          <Link to="/">
             <RestaurantMore>{`${`까스까스`} 더보기 >`}</RestaurantMore>
-          </a>
+          </Link>
         </RestaurantInfo>
       </RestaurantItem>
     </RestaurantItemLi>

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -6,6 +6,7 @@ interface ButtonChecker {
   color: string;
   disabled?: boolean;
   forwardRef?: any;
+  event?: () => void;
 }
 
 const Button = ({
@@ -14,9 +15,11 @@ const Button = ({
   color,
   disabled,
   forwardRef,
+  event,
 }: ButtonChecker) => {
   return (
     <ButtonStyle
+      onClick={event}
       background={background}
       color={color}
       disabled={disabled}

diff --git a/src/components/CategoryItem/category_item.styled.tsx b/src/components/CategoryItem/category_item.styled.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
 
 const CategoryItemLi = styled.li`
   float: left;
@@ -8,7 +9,7 @@ const CategoryItemLi = styled.li`
   box-sizing: border-box;
 `;
 
-const CategoryLink = styled.a``;
+const CategoryLink = styled(Link)``;
 
 const CategoryImg = styled.img`
   width: 100%;

diff --git a/src/components/CategoryItem/index.tsx b/src/components/CategoryItem/index.tsx
@@ -21,7 +21,7 @@ const CategoryItem = ({
 CategoryItemChecker) => {
   return (
     <CategoryItemLi>
-      <CategoryLink href="./bestRestaurants">
+      <CategoryLink to="./bestRestaurants">
         <figure>
           <CategoryImg src={`${food}`} alt="food" />
           <CategoryInfo>

diff --git a/src/components/Header/Header.styled.tsx b/src/components/Header/Header.styled.tsx
@@ -1,6 +1,12 @@
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 
-export const headerStyle = css`
+interface headerprops {
+  isScroll: boolean;
+  isMain: boolean;
+}
+
+export const StyledHeader = styled.header<headerprops>`
   height: 60px;
   display: flex;
   align-items: center;
@@ -13,16 +19,16 @@ export const headerStyle = css`
   z-index: 900;
   border-bottom: 0;
   box-shadow: none;
-  /* background-color: transparent; */
-  background-color: white;
+
+  background-color: ${({ isScroll, isMain }) =>
+    isMain ? (isScroll ? 'white' : 'transparent') : 'white'};
 
   a {
     margin: 0 25px;
 
     img {
       width: 100px;
       height: 33px;
-      color: hotpink;
     }
   }
 
@@ -33,6 +39,7 @@ export const headerStyle = css`
     border: none;
     font-size: 14px;
     font-weight: 700;
+
     &:focus {
       outline: none;
     }
@@ -49,47 +56,90 @@ export const headerStyle = css`
       display: flex;
       align-items: center;
       justify-content: center;
-      border-left: 1px solid #dbdbdb;
+      border-left: ${({ isScroll, isMain, theme }) =>
+        isMain
+          ? isScroll
+            ? `1px solid ${theme.colors.gray900}`
+            : 'none'
+          : `1px solid ${theme.colors.gray900}`};
+
+      span {
+        color: ${({ isScroll, isMain, theme }) =>
+          isMain
+            ? isScroll
+              ? `${theme.colors.gray800}`
+              : `${theme.colors.white}`
+            : `${theme.colors.gray800}`};
+
+        font-size: 14px;
+        font-weight: 700;
+      }
     }
   }
 
   div {
     height: 100%;
     width: 86px;
-    border-left: 1px solid #dbdbdb;
     display: flex;
     justify-content: center;
+    align-items: center;
+    border-left: ${({ isScroll, isMain, theme }) =>
+      isMain
+        ? isScroll
+          ? `1px solid ${theme.colors.gray900}`
+          : 'none'
+        : `1px solid ${theme.colors.gray900}`};
+
+    .profileImgBtn {
+      border: 2px solid ${({ theme }) => theme.colors.orange};
+      border-radius: 34px;
+      overflow: hidden;
+      width: 38px;
+      height: 38px;
+    }
 
     button {
       border: none;
-      color: gray;
-      background-color: white;
+      color: ${({ isScroll, isMain, theme }) =>
+        isMain
+          ? isScroll
+            ? `${theme.colors.gray500}`
+            : 'white'
+          : `${theme.colors.gray500}`};
       cursor: pointer;
+      background-color: transparent;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
     }
   }
 `;
 
-export const searchDiv = css`
-  display: flex;
-  align-items: center;
-  padding-left: 27px;
-  flex-grow: 1;
-`;
-export const searchDivNone = css`
-  visibility: hidden;
+export const blankDiv = css`
+  width: 0px;
+  height: 60px;
 `;
 
-export const liSpan = css`
-  color: gray;
-  font-size: 14px;
-  font-weight: 700;
-`;
-export const liSpanMain = css`
-  /* color: #ffffff; */
-  color: black;
-  font-size: 14px;
-  font-weight: 700;
-`;
+interface headerInputprops {
+  isMain: boolean;
+}
+
+export const HeaderInput = styled.div<headerInputprops>(({ isMain }) =>
+  isMain
+    ? {
+        visibility: 'hidden',
+      }
+    : {
+        display: 'flex',
+        alignItems: 'center',
+        paddingLeft: '27px',
+        flexGrow: '1',
+        borderLeft: 'none !important',
+      },
+);
+
 export const headerLink = css`
   text-decoration-line: none;
 `;