Merge pull request #50 from nan-noo/issue42

Issue42 별 컴포넌트 구현

src/components/Star.tsx

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+const StarContainer = styled.span`
+  font-size: 1.5rem;
+  color: ${({ theme }) => theme.yellow};
+`;
+
+const EMPTY_STAR_ICON = "\u2606";
+const FILLED_STAR_ICON = "\u2605";
+
+function Star({ isFilled = false }) {
+  return (
+    <StarContainer>
+      {isFilled ? FILLED_STAR_ICON : EMPTY_STAR_ICON}
+    </StarContainer>
+  );
+}
+
+export default Star;

src/components/StarRating.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import styled from "styled-components";
+import Star from "./Star";
 
 export const Container = styled.div`
   display: flex;
@@ -19,8 +20,6 @@ type Props = {
 };
 
 const MAX_RATING = 5;
-const EMPTY_STAR_ICON = "\u2606";
-const FILLED_STAR_ICON = "\u2605";
 
 function StarRating({ rating = 0, setRating }: Props) {
   const [hoverRating, setHoverRating] = useState<null | number>(null);
@@ -47,9 +46,7 @@ function StarRating({ rating = 0, setRating }: Props) {
             onMouseEnter={handleStarHover(index)}
             onMouseLeave={resetStarHover}
           >
-            {index > (hoverRating ?? rating)
-              ? EMPTY_STAR_ICON
-              : FILLED_STAR_ICON}
+            {index > (hoverRating ?? rating) ? <Star /> : <Star isFilled />}
           </StarButton>
         );
       })}

src/components/StoreDetailTitle.tsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import Star from "./Star";
 interface StoreDetailTitleProps {
   storeInfo: {
     name: string;
@@ -20,16 +21,6 @@ const TitleRatingWrapper = styled.div`
   justify-content: space-between;
 `;
 
-const StarWrapper = styled.span`
-  justify-content: center;
-  text-align: center;
-  font-size: 1.5rem;
-  //TODO:  별 색깔 const로 빼기
-  color: #e6d706;
-`;
-
-const FILLED_STAR_ICON = "\u2605";
-
 const DescriptionWrapper = styled.div`
   width: 100%;
   overflow: hidden;
@@ -44,7 +35,7 @@ function StoreDetailTitle({ storeInfo }: StoreDetailTitleProps) {
       <TitleRatingWrapper>
         <h2>{name}</h2>
         <div>
-          <StarWrapper>{FILLED_STAR_ICON}</StarWrapper>
+          <Star isFilled />
           <span>{rating}</span>
         </div>
       </TitleRatingWrapper>

src/components/StoreListItem.tsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import Star from "./Star";
 
 export interface StoreListItemProps {
   thumbnailUrl: string;
@@ -48,11 +49,8 @@ const ListItemDistance = styled.p`
 
 const ListItemStars = styled.div`
   font-size: 1.5rem;
-  color: #e6d706;
 `;
 
-const FILLED_STAR_ICON = "\u2605";
-
 function StoreListItem({
   thumbnailUrl,
   name,
@@ -76,7 +74,11 @@ function StoreListItem({
             {campus} 캠퍼스 기준 {distance}km
           </ListItemDistance>
         </div>
-        <ListItemStars>{FILLED_STAR_ICON.repeat(starCount)}</ListItemStars>
+        <ListItemStars>
+          {Array.from({ length: starCount }).map(() => (
+            <Star isFilled />
+          ))}
+        </ListItemStars>
       </div>
     </ListItemContainer>
   );

src/components/StoreReviewItem.tsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import Star from "./Star";
 
 interface StoreReviewItemProps {
   reviewInfo: {
@@ -37,8 +38,6 @@ const ReviewContentWrapper = styled.div`
   width: 80%;
 `;
 
-const FILLED_STAR_ICON = "\u2605";
-
 const Header = styled.header`
   display: flex;
   flex-direction: row;
@@ -49,10 +48,6 @@ const HeaderLeftWrapper = styled.div`
   margin-top: 0.4rem;
 `;
 
-const StarWrapper = styled.span`
-  color: #e6d706;
-`;
-
 const MenuWrapper = styled.div`
   border: 1px solid ${({ theme }) => theme.secondary};
   border-radius: 22px;
@@ -75,7 +70,7 @@ function StoreReviewItem({ reviewInfo }: StoreReviewItemProps) {
       <ReviewContentWrapper>
         <Header>
           <HeaderLeftWrapper>
-            <StarWrapper>{FILLED_STAR_ICON}</StarWrapper>
+            <Star isFilled />
             <span>X {rating}</span>
           </HeaderLeftWrapper>
           <MenuWrapper>{menuName}</MenuWrapper>

src/stories/Star.stories.jsx

@@ -0,0 +1,28 @@
+import Star from "../components/Star";
+
+export default {
+  title: "Component/Star",
+  component: Star,
+  argTypes: {
+    isFilled: { controls: "boolean" },
+  },
+};
+
+const Template = (args) => <Star {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  isFilled: true,
+};
+
+export const FilledStar = Template.bind({});
+FilledStar.args = {
+  isFilled: true,
+};
+FilledStar.parameters = { controls: { exclude: ["isFilled"] } };
+
+export const OutlinedStar = Template.bind({});
+OutlinedStar.args = {
+  isFilled: false,
+};
+OutlinedStar.parameters = { controls: { exclude: ["isFilled"] } };

src/stories/StarRating.stories.jsx

@@ -1,10 +1,15 @@
+import { useState } from "react";
+
 import StarRating from "../components/StarRating";
 
 export default {
   title: "Component/StarRating",
   component: StarRating,
 };
 
-const Template = (args) => <StarRating />;
+const Template = () => {
+  const [rating, setRating] = useState(4);
+  return <StarRating rating={rating} setRating={setRating} />;
+};
 
 export const Default = Template.bind({});

src/style/Theme.ts

@@ -4,6 +4,7 @@ const COLORS = {
   GRAY: "#8D8D8D",
   BLACK: "#121212",
   WHITE: "#F8F8FA",
+  YELLOW: "#E6D706",
 };
 
 export const theme = {
@@ -12,4 +13,5 @@ export const theme = {
   secondary: COLORS.GRAY,
   black: COLORS.BLACK,
   white: COLORS.WHITE,
+  yellow: COLORS.YELLOW,
 };