ewhk9887/korean_code_reviews_from_github huggingface dataset:
@@ -0,0 +1,55 @@
+package christmas.domain;
+
+import christmas.constant.Badge;
+import christmas.constant.Menu;
+import christmas.domain.promotion.ChristmasPromotion;
+import java.util.Arrays;
+import java.util.HashMap;
+
+public class BenefitStorage {
+
+    private final long beforeDiscountAmount;
+    private final boolean giftMenu;
+    private final HashMap<ChristmasPromotion, Long> promotionResult;
+
+    public BenefitStorage(long beforeDiscountAmount, boolean giftMenu, HashMap<ChristmasPromotion, Long> promotionResult){
+        this.beforeDiscountAmount = beforeDiscountAmount;
+        this.giftMenu = giftMenu;
+        this.promotionResult = promotionResult;
+    }
+
+    public long totalBenefitAmount() {
+        return promotionResult.values().stream().mapToLong(Long::longValue).sum();
+    }
+
+    public long afterDiscountAmount() {
+        long totalBenefit = totalBenefitAmount();
+
+        if (giftMenu) {
+            totalBenefit -= Menu.CHAMPAGNE.getPrice();
+        }
+
+        return beforeDiscountAmount - totalBenefit;
+    }
+
+    public Badge determineBadge() {
+        long totalBenefit = totalBenefitAmount();
+
+        return Arrays.stream(Badge.values())
+                .filter(badge -> totalBenefit >= badge.getPrize())
+                .reduce((first, second) -> second)
+                .orElse(Badge.NONE);
+    }
+
+    public long getBeforeDiscountAmount() {
+        return beforeDiscountAmount;
+    }
+
+    public boolean isGiftMenu() {
+        return giftMenu;
+    }
+
+    public HashMap<ChristmasPromotion, Long> getPromotionResult() {
+        return promotionResult;
+    }
+}

리뷰: 이 부분을 Map으로 선언하면 다형성을 좀 더 활용하실 수 있을거에요!
@@ -0,0 +1,26 @@
+package christmas.domain.promotion;
+
+import christmas.constant.PromotionItem;
+import christmas.constant.PromotionType;
+import java.util.List;
+
+public abstract class ChristmasPromotion {
+
+    protected List<Integer> period;
+    protected PromotionItem targetItems;
+    protected long discountAmount;
+    protected PromotionType promotionType;
+
+    public long getDiscountAmount() {
+        return discountAmount;
+    }
+
+    public PromotionType getPromotionType(){
+        return promotionType;
+    }
+
+    public abstract long applyPromotion(int data, long orderAmount);
+    protected abstract boolean isApplicable(int date);
+    protected abstract boolean isEligibleForPromotion(long orderAmount);
+
+}

리뷰: 이 부분을 추상 클래스로 구현하신 이유를 알수있을까요?? 제가 추상 클래스에 대해 익숙하지 않아서요!
@@ -0,0 +1,17 @@
+package christmas.dto;
+
+import christmas.constant.Badge;
+import christmas.domain.promotion.ChristmasPromotion;
+import java.util.HashMap;
+
+public record BenefitResult(
+
+        long beforeDiscountAmount,
+        boolean giftMenu,
+        HashMap<ChristmasPromotion, Long> promotionResult,
+        long totalBenefitAmount,
+        long afterDiscountAmount,
+        Badge badge)
+{
+
+}

리뷰: 레코드를 활용하셨네요. 이 부분은 메모해두었다가 저도 적용해보겠습니다! 좋은 코드 감사합니다!
@@ -0,0 +1,9 @@
+package christmas.util;
+
+public class Parser {
+
+    public static int stringToInteger(String input) {
+        return Integer.parseInt(input);
+    }
+
+}

리뷰: 사소한 컨버팅이라도 객체로 만들어서 활용하신게 좋네요!
@@ -0,0 +1,44 @@
+package christmas.view;
+
+import christmas.constant.Badge;
+import christmas.constant.OutputMessage;
+import christmas.domain.promotion.ChristmasPromotion;
+import java.util.HashMap;
+
+public class BenefitsView {
+
+    public static String giftMenuOutputStatement(boolean giftMenu){
+        if(giftMenu)
+            return OutputMessage.CHAMPAGNE.getMessage();
+
+        return OutputMessage.DOES_NOT_EXIST.getMessage();
+    }
+
+    public static String promotionResultOutputStatement(long totalBenefitAmount, HashMap<ChristmasPromotion, Long> promotionResult){
+        if(totalBenefitAmount == 0)
+            return OutputMessage.DOES_NOT_EXIST.getMessage();
+
+        return findPromotionDetail(promotionResult).toString();
+    }
+
+    public static String badgeOutputStatement(Badge badge){
+        if(badge == Badge.NONE)
+            return OutputMessage.DOES_NOT_EXIST.getMessage();
+        return badge.getBadgeName();
+    }
+
+    private static StringBuilder findPromotionDetail(HashMap<ChristmasPromotion, Long> promotionResult){
+        StringBuilder sb = new StringBuilder();
+        for(ChristmasPromotion promotion: promotionResult.keySet()){
+            long discount = promotionResult.get(promotion);
+            if(discount == 0) continue;
+
+            sb.append(String.format(OutputMessage.BENEFIT_DETAILS.getMessage(),
+                    promotion.getPromotionType().getMessage(), discount));
+        }
+
+        if(sb.isEmpty())
+            return sb.append(OutputMessage.DOES_NOT_EXIST.getMessage());
+        return sb;
+    }
+}

리뷰: 이 부분을 별도 메서드로 빼서 인덴트를 줄여보는게 어떨까요??  인텔리제이에서 해당 부분을 드래그한 뒤 cmd+option+m 을 입력하시면 메서드로 추출할 수 있습니다!
@@ -0,0 +1,16 @@
+package christmas.view;
+
+import christmas.constant.Menu;
+import christmas.constant.OutputMessage;
+import java.util.Map;
+
+public class OrderMenuView {
+
+    public static String orderMenuOutputStatement(Map<Menu, Integer> orderMenu){
+        StringBuilder sb = new StringBuilder();
+        for(Menu menu : orderMenu.keySet()){
+            sb.append(String.format(OutputMessage.ORDER_MENU.getMessage(), menu.getName(), orderMenu.get(menu)));
+        }
+        return sb.toString();
+    }
+}

리뷰: 저는 view를 위한 log데이터를 하나의 도메인에서 처리했는데 이렇게 별도의 객체를 생성해서 관리하면 역할과 책임이 명확해지겠네요!
한 수 배워갑니다!
@@ -0,0 +1,44 @@
+package christmas.controller;
+
+import christmas.domain.event.EventCalculator;
+import christmas.domain.date.ReservationDate;
+import christmas.domain.order.OrderMenuParser;
+import christmas.view.InputView;
+import christmas.view.OutputView;
+
+public class ChristmasController {
+    public void run(){
+        OutputView.printStart();
+        ReservationDate reservationDate = reservationDate();
+        OrderMenuParser orderMenu = orderMenu();
+        OutputView.printDate(reservationDate);
+        OutputView.printOrderMenu(orderMenu);
+        OutputView.printTotalPrice(orderMenu);
+        EventCalculator eventCalculator = new EventCalculator(reservationDate, orderMenu);
+        OutputView.printGiftMenu(orderMenu);
+        OutputView.printEvent(eventCalculator);
+        OutputView.printTotalDiscount(eventCalculator);
+        OutputView.printExpectedDiscount(eventCalculator);
+        OutputView.printEventBadge(eventCalculator);
+    }
+
+    private ReservationDate reservationDate() {
+        while (true) {
+            try {
+                return new ReservationDate(InputView.readDate());
+            } catch (IllegalArgumentException e) {
+                System.out.println(e.getMessage());
+            }
+        }
+    }
+
+    private OrderMenuParser orderMenu(){
+        while (true) {
+            try {
+                return new OrderMenuParser(InputView.readMenu());
+            } catch (IllegalArgumentException e) {
+                System.out.println(e.getMessage());
+            }
+        }
+    }
+}

리뷰: 한 메서드에서 너무 복잡해 보이네요 메서드를 분리하면 더 좋을거 같아요!
@@ -0,0 +1,22 @@
+package christmas.domain.event;
+
+import christmas.constant.ChristmasConfig;
+
+public class ChristmasEvent {
+    private final int reservationDate;
+
+    public ChristmasEvent(int reservationDate) {
+        this.reservationDate = reservationDate;
+    }
+
+    public int calculateDiscount() {
+        if (isChristmasPeriod()) {
+            return ChristmasConfig.DISCOUNT_MONEY + ChristmasConfig.INCREASE_MONEY * (reservationDate - ChristmasConfig.START_DAY);
+        }
+        return ChristmasConfig.ZERO;
+    }
+
+    private boolean isChristmasPeriod() {
+        return reservationDate >= ChristmasConfig.START_DAY && reservationDate <= ChristmasConfig.END_DAY;
+    }
+}
\ No newline at end of file

리뷰: 각 이벤트 클래스에서 날짜를 검증하는 것도 좋은데 각각의 이벤트 기간에 포함되는지 처리하는 부분을 ReservationDate 클래스에서 처리해도 좋을거 같아요!
@@ -3,28 +3,50 @@ import './Login.scss';
 import Login_Button from './Login_Button/Login_Button';
 
 class Login extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      id: 'a',
+      pw: 0,
+    };
+  }
+
+  handleInput = e => {
+    const { value, name } = e.target;
+    this.setState({
+      [name]: value,
+    });
+  };
+
   render() {
+    const { handleInput } = this;
+    const { id, pw } = this.state;
+
     return (
       <div className="log_in_box">
         <div className="title">westagram</div>
         <div className="log_in">
           <div className="id">
             <input
+              onChange={handleInput}
               className="id_input"
+              name="id"
               type="text"
               placeholder="전화번호, 사용자 이름 또는 이메일"
             />
           </div>
           <div className="password">
             <input
+              onChange={handleInput}
               className="password_input"
+              name="pw"
               type="password"
               placeholder="비밀번호"
             />
           </div>
         </div>
 
-        <Login_Button />
+        <Login_Button idvalue={this.state.id} pwvalue={this.state.pw} />
 
         <p> 비밀번호를 잊으셨나요? </p>
       </div>

리뷰: this.state ... 이거 너무 기니까 이것도 비구조화 할당하시는 게 가독성이 좋을 것 같아요!
@@ -3,28 +3,50 @@ import './Login.scss';
 import Login_Button from './Login_Button/Login_Button';
 
 class Login extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      id: 'a',
+      pw: 0,
+    };
+  }
+
+  handleInput = e => {
+    const { value, name } = e.target;
+    this.setState({
+      [name]: value,
+    });
+  };
+
   render() {
+    const { handleInput } = this;
+    const { id, pw } = this.state;
+
     return (
       <div className="log_in_box">
         <div className="title">westagram</div>
         <div className="log_in">
           <div className="id">
             <input
+              onChange={handleInput}
               className="id_input"
+              name="id"
               type="text"
               placeholder="전화번호, 사용자 이름 또는 이메일"
             />
           </div>
           <div className="password">
             <input
+              onChange={handleInput}
               className="password_input"
+              name="pw"
               type="password"
               placeholder="비밀번호"
             />
           </div>
         </div>
 
-        <Login_Button />
+        <Login_Button idvalue={this.state.id} pwvalue={this.state.pw} />
 
         <p> 비밀번호를 잊으셨나요? </p>
       </div>

리뷰: 말씀하신대로 바꿨습니다!
@@ -3,28 +3,50 @@ import './Login.scss';
 import Login_Button from './Login_Button/Login_Button';
 
 class Login extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      id: 'a',
+      pw: 0,
+    };
+  }
+
+  handleInput = e => {
+    const { value, name } = e.target;
+    this.setState({
+      [name]: value,
+    });
+  };
+
   render() {
+    const { handleInput } = this;
+    const { id, pw } = this.state;
+
     return (
       <div className="log_in_box">
         <div className="title">westagram</div>
         <div className="log_in">
           <div className="id">
             <input
+              onChange={handleInput}
               className="id_input"
+              name="id"
               type="text"
               placeholder="전화번호, 사용자 이름 또는 이메일"
             />
           </div>
           <div className="password">
             <input
+              onChange={handleInput}
               className="password_input"
+              name="pw"
               type="password"
               placeholder="비밀번호"
             />
           </div>
         </div>
 
-        <Login_Button />
+        <Login_Button idvalue={this.state.id} pwvalue={this.state.pw} />
 
         <p> 비밀번호를 잊으셨나요? </p>
       </div>

리뷰: idValue를 넘겨주는 걸로 보이는데 idfunc라는 이름은 마치 함수같아서 적합하지 않아보입니다!
pwfunc, colorfunc 모두 마찬가지입니다!
그리고 colorfunc라는 값은 id랑 pw통해서 계산 가능해보이는데 그러면 idValue랑 pwValue만 Props로 받고, colorfunc에서 계산 하는 값은 LoginButton 컴포넌트에서 props통해서 바로 계산해서 사용해도 무방해보입니다!
@@ -5,15 +5,49 @@ import Main_right from './Main_right/Main_right';
 import './Main.scss';
 
 class Mainjaesang extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      feedslist: [],
+    };
+  }
+
+  callApi = () => {
+    fetch('http://localhost:3000/data/JaesangChoi/FeedsData.json')
+      .then(res => res.json())
+      .then(data => {
+        this.setState({
+          feedslist: data,
+        });
+      });
+  };
+
+  componentDidMount = () => {
+    this.callApi();
+  };
+
   render() {
+    const { feedslist } = this.state;
+
     return (
       <div>
         <Nav />
+        <main>
+          <div>
+            {feedslist.map(feed => {
+              return (
+                <Feeds
+                  key={feed.id}
+                  profilesrc={feed.profilesrc}
+                  mainfeedsrc={feed.mainfeedsrc}
+                  comments={feed.comments}
+                />
+              );
+            })}
+          </div>
 
-        <div className="main">
-          <Feeds />
           <Main_right />
-        </div>
+        </main>
       </div>
     );
   }

리뷰: feedslist안의 하나의 요소들인데 flist라는 변수명은 적합하지 않은것 같습니다! 차라리 feed등이 좀 더 적합하고 의미가 드러나 보이네요!
@@ -5,15 +5,49 @@ import Main_right from './Main_right/Main_right';
 import './Main.scss';
 
 class Mainjaesang extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      feedslist: [],
+    };
+  }
+
+  callApi = () => {
+    fetch('http://localhost:3000/data/JaesangChoi/FeedsData.json')
+      .then(res => res.json())
+      .then(data => {
+        this.setState({
+          feedslist: data,
+        });
+      });
+  };
+
+  componentDidMount = () => {
+    this.callApi();
+  };
+
   render() {
+    const { feedslist } = this.state;
+
     return (
       <div>
         <Nav />
+        <main>
+          <div>
+            {feedslist.map(feed => {
+              return (
+                <Feeds
+                  key={feed.id}
+                  profilesrc={feed.profilesrc}
+                  mainfeedsrc={feed.mainfeedsrc}
+                  comments={feed.comments}
+                />
+              );
+            })}
+          </div>
 
-        <div className="main">
-          <Feeds />
           <Main_right />
-        </div>
+        </main>
       </div>
     );
   }

리뷰: 메인 콘텐츠 구획을 의미하는 거라면 div tag보다는 main tag가 좀 더 적합하지 않을까요?
@@ -1,31 +1,15 @@
-
-
-body {
-    margin: 0px;
-    overflow: hidden;
-
+main {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  padding-top: 54px;
+  box-sizing: border-box;
+
+  .bold_comment {
+    font-weight: bold;
+  }
+
+  .grey_comment {
+    color: grey;
+  }
 }
-
-
-
-.main {
-    display: flex;
-    justify-content: center;
-    gap: 20px;
-    width:100%;
-    height:100vh;
-    padding-top: 54px;
-    box-sizing: border-box;
-    overflow: auto;
-
-    .bold_comment {
-        font-weight:bold;
-    }
-    
-    .grey_comment {
-        color: grey;
-    }
-
-}
-
-

리뷰: 이미 display:block인 요소인데 width:100% 를 부여할 이유가 없어보입니다!
@@ -1,31 +1,15 @@
-
-
-body {
-    margin: 0px;
-    overflow: hidden;
-
+main {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  padding-top: 54px;
+  box-sizing: border-box;
+
+  .bold_comment {
+    font-weight: bold;
+  }
+
+  .grey_comment {
+    color: grey;
+  }
 }
-
-
-
-.main {
-    display: flex;
-    justify-content: center;
-    gap: 20px;
-    width:100%;
-    height:100vh;
-    padding-top: 54px;
-    box-sizing: border-box;
-    overflow: auto;
-
-    .bold_comment {
-        font-weight:bold;
-    }
-    
-    .grey_comment {
-        color: grey;
-    }
-
-}
-
-

리뷰: height:100vh로 부모태그의 크기를 고정값으로 정하는건 좋지않습니다!
부모태그에 고정높이값을 주는건 스크롤이 필요한 경우를 제외하고는 지양하고있습니다!
안에 여러 자식태그들이 들어올텐데 그 크기만큼 자연스럽게 늘어나도록 height값을 주지 않는게 좋아보입니다!
@@ -1,9 +1,25 @@
 import React, { Component } from 'react';
-import Recommendation_list from './Recommendation_list/Recommendation_list';
+import RecommendationList from './Recommendation_list/Recommendation_list';
+import RECOMMENDATION_DATA from './RecommendationData';
 import './Main_right.scss';
 
 class Main_right extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      recommendation_List: [],
+    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      recommendation_List: RECOMMENDATION_DATA,
+    });
+  }
+
   render() {
+    const { recommendation_List } = this.state;
+
     return (
       <div className="main_right">
         <div className="my_profile">
@@ -26,29 +42,18 @@ class Main_right extends Component {
             <p className="bold_comment">모두 보기</p>
           </div>
 
-          <Recommendation_list
-            src="/images/jaesangChoi/profile3.jpeg"
-            main_name="musttafa_dgn"
-            sub_name="adnankizlitas님 외 6명이 팔로우합니다"
-          />
-
-          <Recommendation_list
-            src="/images/jaesangChoi/profile4.jpeg"
-            main_name="rah6590"
-            sub_name="회원님을 팔로우합니다"
-          />
-
-          <Recommendation_list
-            src="https://images.unsplash.com/photo-1547656807-9733c2b738c2?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
-            main_name="sym.ysl"
-            sub_name="gizoo_님 외 1명이 팔로우합니다"
-          />
-
-          <Recommendation_list
-            src="https://images.unsplash.com/photo-1623720274043-841b674a1a52?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
-            main_name="serdarakyol67"
-            sub_name="buse.19987님 외 1명이 팔로우함"
-          />
+          <ul>
+            {recommendation_List.map(list => {
+              return (
+                <RecommendationList
+                  key={list.id}
+                  src={list.src}
+                  main_name={list.main_name}
+                  sub_name={list.sub_name}
+                />
+              );
+            })}
+          </ul>
         </div>
 
         <p className="etc">

리뷰: 상수데이터는 대문자 + snake_case 사용해주세요!
@@ -1,9 +1,25 @@
 import React, { Component } from 'react';
-import Recommendation_list from './Recommendation_list/Recommendation_list';
+import RecommendationList from './Recommendation_list/Recommendation_list';
+import RECOMMENDATION_DATA from './RecommendationData';
 import './Main_right.scss';
 
 class Main_right extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      recommendation_List: [],
+    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      recommendation_List: RECOMMENDATION_DATA,
+    });
+  }
+
   render() {
+    const { recommendation_List } = this.state;
+
     return (
       <div className="main_right">
         <div className="my_profile">
@@ -26,29 +42,18 @@ class Main_right extends Component {
             <p className="bold_comment">모두 보기</p>
           </div>
 
-          <Recommendation_list
-            src="/images/jaesangChoi/profile3.jpeg"
-            main_name="musttafa_dgn"
-            sub_name="adnankizlitas님 외 6명이 팔로우합니다"
-          />
-
-          <Recommendation_list
-            src="/images/jaesangChoi/profile4.jpeg"
-            main_name="rah6590"
-            sub_name="회원님을 팔로우합니다"
-          />
-
-          <Recommendation_list
-            src="https://images.unsplash.com/photo-1547656807-9733c2b738c2?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
-            main_name="sym.ysl"
-            sub_name="gizoo_님 외 1명이 팔로우합니다"
-          />
-
-          <Recommendation_list
-            src="https://images.unsplash.com/photo-1623720274043-841b674a1a52?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
-            main_name="serdarakyol67"
-            sub_name="buse.19987님 외 1명이 팔로우함"
-          />
+          <ul>
+            {recommendation_List.map(list => {
+              return (
+                <RecommendationList
+                  key={list.id}
+                  src={list.src}
+                  main_name={list.main_name}
+                  sub_name={list.sub_name}
+                />
+              );
+            })}
+          </ul>
         </div>
 
         <p className="etc">

리뷰: camelCase 사용해주세요! 지금은 pascalCase를 사용하고 계시네요!
@@ -1,9 +1,25 @@
 import React, { Component } from 'react';
-import Recommendation_list from './Recommendation_list/Recommendation_list';
+import RecommendationList from './Recommendation_list/Recommendation_list';
+import RECOMMENDATION_DATA from './RecommendationData';
 import './Main_right.scss';
 
 class Main_right extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      recommendation_List: [],
+    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      recommendation_List: RECOMMENDATION_DATA,
+    });
+  }
+
   render() {
+    const { recommendation_List } = this.state;
+
     return (
       <div className="main_right">
         <div className="my_profile">
@@ -26,29 +42,18 @@ class Main_right extends Component {
             <p className="bold_comment">모두 보기</p>
           </div>
 
-          <Recommendation_list
-            src="/images/jaesangChoi/profile3.jpeg"
-            main_name="musttafa_dgn"
-            sub_name="adnankizlitas님 외 6명이 팔로우합니다"
-          />
-
-          <Recommendation_list
-            src="/images/jaesangChoi/profile4.jpeg"
-            main_name="rah6590"
-            sub_name="회원님을 팔로우합니다"
-          />
-
-          <Recommendation_list
-            src="https://images.unsplash.com/photo-1547656807-9733c2b738c2?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
-            main_name="sym.ysl"
-            sub_name="gizoo_님 외 1명이 팔로우합니다"
-          />
-
-          <Recommendation_list
-            src="https://images.unsplash.com/photo-1623720274043-841b674a1a52?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
-            main_name="serdarakyol67"
-            sub_name="buse.19987님 외 1명이 팔로우함"
-          />
+          <ul>
+            {recommendation_List.map(list => {
+              return (
+                <RecommendationList
+                  key={list.id}
+                  src={list.src}
+                  main_name={list.main_name}
+                  sub_name={list.sub_name}
+                />
+              );
+            })}
+          </ul>
         </div>
 
         <p className="etc">

리뷰: camelCase 사용해주세요!
@@ -1,31 +1,15 @@
-
-
-body {
-    margin: 0px;
-    overflow: hidden;
-
+main {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  padding-top: 54px;
+  box-sizing: border-box;
+
+  .bold_comment {
+    font-weight: bold;
+  }
+
+  .grey_comment {
+    color: grey;
+  }
 }
-
-
-
-.main {
-    display: flex;
-    justify-content: center;
-    gap: 20px;
-    width:100%;
-    height:100vh;
-    padding-top: 54px;
-    box-sizing: border-box;
-    overflow: auto;
-
-    .bold_comment {
-        font-weight:bold;
-    }
-    
-    .grey_comment {
-        color: grey;
-    }
-
-}
-
-

리뷰: main.scss에서 main태그에 height: 100vh를 준 이유가 화면 전체를 범위를 갖게 해주려고 사용했습니다.
그 이유는 Main_right의 박스가 Nav처럼 고정된걸 구현하려고 했고 그 방법으로 position:sticky가 떠올랐기 때문입니다.
sticky로 화면에 계속 고정시키기 위해선 화면 전체에 대해서 범위를 가져야하는데 Main_right는 main태그의 자식이기 때문에
main태그가 화면전체의 범위를 가져야 했습니다.

그래서 main에 height:100vh를 줬습니다아... height를 auto로 설정하면 position:sticky가 정상적으로 작동하지 않습니다 ㅠㅠ;
@@ -1,31 +1,15 @@
-
-
-body {
-    margin: 0px;
-    overflow: hidden;
-
+main {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  padding-top: 54px;
+  box-sizing: border-box;
+
+  .bold_comment {
+    font-weight: bold;
+  }
+
+  .grey_comment {
+    color: grey;
+  }
 }
-
-
-
-.main {
-    display: flex;
-    justify-content: center;
-    gap: 20px;
-    width:100%;
-    height:100vh;
-    padding-top: 54px;
-    box-sizing: border-box;
-    overflow: auto;
-
-    .bold_comment {
-        font-weight:bold;
-    }
-    
-    .grey_comment {
-        color: grey;
-    }
-
-}
-
-

리뷰: 라운지에 계실 때 여쭤보길 잘한거 같습니다. 
덕분에 position:sticky에 대해서 착각했던게 완전히 잡혔습니다.
더이상 position은 두렵지 않네요!!!